/*
  makeitbiggerforher.org - reconstruction.

  Every size is expressed in cqw against .page, which is a container. The
  screenshots were captured in a 360px-wide viewport, so 1cqw = 3.6 capture
  pixels and the whole page is a clean scale of the reference images at any
  window width. Measured values are noted beside each rule in capture pixels.
*/

:root {
  --bg: #dff3fc;          /* the flat blue the vignette sits on */
  --ink: #1a1a1a;
  --warn-fill: #f6da65;   /* as captured; see README - the source clipart is probably #ffcc00 */
  --warn-line: #1a1a1a;
}

* { box-sizing: border-box; }

/*
  The vignette: grey shading across the top of the window, heaviest in the two
  upper corners, gone by about three quarters of the way down.

  It is anchored to the viewport, not to the page - which is why it looks
  identical in all four screenshots even though they are at different scroll
  positions, and why the same rows of the page are darker in shot 3 than in
  shot 4 across their 82px overlap. Hence background-attachment: fixed.

  Measured as pure black at varying alpha over the flat blue: 0.256 in the top
  corners, 0.130 along the top edge at centre, fading out down the sides by
  about y=200 of a 281px-tall viewport. That decomposes into a top band plus a
  corner ellipse at each side, and the two compose the way overlaid translucent
  blacks do. The radii are percentages so the shading scales with the window;
  only one window size was ever captured, so that is a choice, not a finding.
*/
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(37.4% 74.7% at 0% 0%,
      rgba(0,0,0,.145)   0%, rgba(0,0,0,.142)  30%, rgba(0,0,0,.098) 40%,
      rgba(0,0,0,.057)  57%, rgba(0,0,0,.036)  72%, rgba(0,0,0,.022) 86%,
      rgba(0,0,0,0)    100%),
    radial-gradient(37.4% 74.7% at 100% 0%,
      rgba(0,0,0,.145)   0%, rgba(0,0,0,.142)  30%, rgba(0,0,0,.098) 40%,
      rgba(0,0,0,.057)  57%, rgba(0,0,0,.036)  72%, rgba(0,0,0,.022) 86%,
      rgba(0,0,0,0)    100%),
    linear-gradient(to bottom,
      rgba(0,0,0,.130)   0%, rgba(0,0,0,.099)   5%, rgba(0,0,0,.043) 15%,
      rgba(0,0,0,.007)  22%, rgba(0,0,0,0)     26%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.page {
  container-type: inline-size;
  max-width: 680px;       /* stop scaling up on large monitors */
  margin-inline: auto;
}

/* ---- warning triangles ------------------------------------------------- */

.warn {
  display: block;
  width: 21.94cqw;        /* 79 */
  height: auto;
  margin: 5.87cqw auto 5.84cqw;   /* 21 above, 21 below */
  overflow: visible;
}

.page > .warn:first-child { margin-top: 4.44cqw; }   /* 16 from the top of the viewport */

.tri {
  fill: var(--warn-fill);
  stroke: var(--warn-line);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.glyph-stroke {
  fill: none;
  stroke: var(--warn-line);
  stroke-width: 7;
  stroke-linecap: butt;
}

.glyph-fill { fill: var(--warn-line); }

/* ---- the messages ------------------------------------------------------ */

/*
  The padding-top on the second and third messages is deliberate, and is
  padding rather than margin so it does not collapse into the triangle's
  margin-bottom above it. The gap a triangle leaves before its text is not
  constant in the screenshots (28, 30, 35) because each message is set at a
  different size and so carries a different amount of leading above its first
  line; these two nudges make up the difference.

  Line breaks are explicit. They have to be: at any single column width that
  lets "passed out and hit" (307) sit on one line, "an" would also fit up
  beside "I'm calling" (198) - so the breaks in the screenshots cannot fall
  out of natural wrapping. The original page must have hard-broken them too.
*/

.say { margin: 0; }
.line { display: block; }

.say--hey        { font-size: 12.20cqw; line-height: 1.12; }  /* 43.9 */
.say--hey .grow  { font-size: 1.374em;  line-height: 1.10; }  /* 60.3 */

.say--presuming  { font-size: 10.5cqw;  line-height: 1.16; padding-top: 0.83cqw; }  /* 37.8 */

.say--ambulance  { font-size: 12.75cqw; line-height: 1.08; padding-top: 2.22cqw; }  /* 45.9 */
.say--ambulance .shout { font-weight: bold; }

/* ---- the man ----------------------------------------------------------- */

/*
  Sized by fitting man.png's alpha silhouette to his outline in shot 4: the
  photo runs at 4.05 image pixels per capture pixel, which puts the 981px
  canvas at 242.2 capture px. Centring the canvas leaves him about 3px right
  of where the screenshot has him, hence the small nudge back.

  The negative top margin pulls back the transparent headroom above his head
  in this particular file (63px of it, 15.6 capture px). What has to be right
  is the gap between the bottom of "RIGHT NOW!" and the top of his head, which
  is 10px. Re-measure it if you ever swap the file.
*/
/*
  display:block and margin-bottom:0 are what make him flush with the bottom of
  the page - .page carries no bottom padding, and an inline img would otherwise
  leave a descender gap under it. The document ends exactly on his bottom edge.
*/
.man {
  display: block;
  width: 67.28cqw;          /* 242.2 */
  height: auto;
  margin: -4.26cqw auto 0;  /* -15.3, then flush at the bottom */
  position: relative;
  left: -0.89cqw;           /* -3.2 */
}