/* story.css: the study below the hero (s2..s8) and the footer: the shared frame the r10 beats sit in.
   Owns the story tokens and grid (--story-left, --story-wide, --story-right, --join), .step and .step-body,
   the s3 map frame's rhythm (title, lede, figure, caption), .step-title / .step-text, the shared figure
   caption, the #method anchor and the footer.
   The type beats (s2, s4, s5, s7 desktop) and the device switch are story-v3.css; the held figure frames
   (.fh: s6 and the phone's s7) are story-figs.css; the map itself is story-map.css; the Method's inside
   (#mx) is method.css. Entrances live in story-reveal.css (story.js: velocity-aware, each block once,
   opacity plus a small rise). The held map frame (s3's title, text, the map figure and its caption) has
   none; inside the map only what is drawn moves while its camera zooms out (story-map.js / story-map.css).
   Desktop rules are the defaults; the phone layout lives in ONE block: @media (max-width: 767px).
   Tokens (slate-*, gold, fonts) come from hero.css :root.
   No text moves with the scroll. Motion is opacity / translate / transform only, and every hidden state is
   gated on html.has-reveal (story.js, motion allowed), so no JS, reduced motion and print show the final look. */

:root {
  --story-wide: 1200px;                         /* the grid: wide blocks (the s2 / s3 pairs, the s3 map frame, Method) */
  --story-body: 720px;                          /* the text measure (the footer) */
  --story-right: 72px;                          /* kept clear for the tucked rail (34px peek) */
  /* One left edge for the whole story: the left side of a centred 1200px container, never under 48px. */
  --story-left: max(48px, calc((100vw - var(--story-wide)) / 2));

  --title-size: clamp(36px, 4.4vw, 60px);
  --title-lh: 1.06;

  --ink-3: var(--rail-num);    /* small labels: 4.69:1 on white */
  --card-radius: 14px;
  --join: clamp(48px, 6vh, 64px);               /* one side of a join between two sections (>= 768px) */
  --gutter: 32px;                               /* the story grid's one gutter (24px from 768 to 1279) */
  --card-shadow: 0 10px 30px rgba(48, 50, 54, .12);
  --gold-wash: rgba(151, 112, 17, .09);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root { --gutter: 24px; }
}

/* main clips any stray horizontal overflow: the page never scrolls sideways. */
main {
  position: relative;
  overflow-x: clip;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Step grid ---------- */

.step {
  position: relative;
  z-index: 1;
  padding: var(--step-pt, clamp(96px, 13vh, 150px)) var(--story-right)
           var(--step-pb, clamp(96px, 13vh, 150px)) var(--story-left);
}

/* s3 starts and ends one --join from its neighbours. (The short-landscape block below and the phone
   block override both.) */
#s3 {
  --step-pt: var(--join);
  --step-pb: var(--join);
}

.step-body {
  max-width: var(--story-wide);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

.step-body > * { margin: 0; }

/* Vertical rhythm inside a step. */
.step-body > * + *                    { margin-top: 22px; }
.step-body > .step-title + *          { margin-top: 26px; }
.step-body > figure                   { margin-top: 32px; }
.step-body > figure + *               { margin-top: 32px; }
/* s3: the map sits a plain paragraph gap under its paragraph (#aemap-lede, in the flow).
   story-map.css owns the pin and its scroll room inside #aemap; nothing here adds margin or padding
   to the figure's insides. The caption is one short line 12px under the card, styled by story-map.css. */
.step-body > .aemap                   { margin-top: 24px; }

/* Short landscape screens (a phone on its side): half the room between and inside the sections, so a
   section is not mostly blank screen. The hero keeps its own layout. */
@media (min-width: 768px) and (max-height: 520px) {
  .step,
  #s3 {
    --step-pt: 56px;
    --step-pb: 56px;
  }

  .step-body > figure,
  .step-body > figure + * { margin-top: 32px; }
}

/* ---------- Typography ---------- */

.step-title {
  font-family: var(--serif);
  font-weight: 450;
  font-size: var(--title-size);
  line-height: var(--title-lh);
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--slate-900);
}

.step-text {
  max-width: 620px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 30px;
  text-wrap: pretty;
  color: var(--slate-800);
}

/* Shared figure captions (component classes win: :where keeps this at element weight). */
:where(.step-body) figcaption {
  margin-top: 14px;
  max-width: 620px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  text-wrap: pretty;
  color: var(--slate-800);
}

:where(.step-body) time { font-variant-numeric: tabular-nums; }

/* s3 before story-map.js draws (or without JS): the map's still image. story-map.css styles the
   stage; this only keeps the picture inside the column. */
:where(.aemap-fallback) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- s8: Method (its inside, generated by tools/build_method.py, is styled in method.css) ---------- */

/* #method: a link target at the Method's top edge (the section itself is #s8, for the rail). */
.method-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 72px var(--story-right) 64px var(--story-left);
  background: var(--slate-900);
  color: var(--slate-100);
}

.footer-inner {
  max-width: var(--story-body);
  display: grid;
  gap: 28px;
}

.footer-head p { margin: 0; }

.footer-title {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--white);
}

.footer-head .footer-by {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  text-wrap: balance;
  color: var(--slate-300);
}

.footer-notes {
  display: grid;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.footer-notes p {
  margin: 0;
  max-width: 620px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 22px;
  text-wrap: pretty;
  color: var(--slate-300);
}

.footer-notes a,
.footer-notes a:hover {
  color: var(--slate-100);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-notes a:hover { color: var(--white); }

/* A taller tap area for the source link (inline padding: the lines keep their height).
   No padding while keyboard-focused, so the focus ring hugs the link text instead of the lines around it. */
.footer-notes a { padding-block: 10px; }
.footer-notes a:focus-visible { padding-block: 0; }

.footer-copy {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .06em;
  color: var(--slate-500);
}

.site-footer :focus-visible { outline-color: var(--slate-100); }

/* ---------- Phone ---------- */

@media (max-width: 767px) {

  :root {
    --story-left: 24px;
    --story-right: 24px;                        /* no rail on phones (hero.css): even side margins */
    /* Titles 8vw, capped at their 402 size (32). Line boxes in whole px (titles 32px at 374 and under). */
    --title-size: clamp(28px, 8vw, 32px);
    --title-lh: 36px;
    --card-radius: 12px;
    --join: 28px;                               /* one side of a join: sections sit 2 x --join = 56px apart */
  }

  /* Sections sit 56px apart (--join + --join). In normal flow: nothing sticks or pins. */
  .step {
    --step-pt: var(--join);
    --step-pb: var(--join);
  }

  .step {
    padding-top: var(--step-pt);
    padding-bottom: var(--step-pb);
  }

  #s3 { --step-pt: var(--join); --step-pb: var(--join); }   /* beats the desktop #s3 values (an id rule) */

  /* Blocks inside a section: 16-24px apart. */
  .step-body > * + *                    { margin-top: 16px; }
  .step-body > .step-title + *          { margin-top: 16px; }
  .step-body > figure                   { margin-top: 20px; }
  .step-body > figure + *               { margin-top: 20px; }
  .step-body > .aemap                   { margin-top: 20px; }

  /* s3's desktop-only sentence (the lede's last): kept for screen readers, not drawn on the phone, so
     the held map frame keeps its height. */
  .aemap-lede-more {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .step-text {
    font-size: 17px;
    line-height: 27px;
  }

  :where(.step-body) figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 18px;   /* one phone caption: 13/18, 8px under its figure (the map's too: story-map.css) */
    color: var(--hero-lede);   /* the map caption's grey: a step under the #4C5056 body (5.8:1 on slate-50) */
  }

  /* Footer. */
  .site-footer { padding-top: 44px; padding-bottom: 40px; }

  .footer-inner { gap: 20px; }

  .footer-notes { padding-top: 20px; }

  .footer-title { font-size: 26px; line-height: 30px; }

  .footer-head .footer-by { font-size: 15px; line-height: 22px; }

  .footer-notes p { font-size: 13px; line-height: 21px; }
}

/* Under 390px the vw-sized titles get tighter whole-px line boxes, so their leading stays 1.07-1.15
   (36px under a 30px title would be 1.2): titles 34 at 375-389 and 32 at 374 and under. */
@media (max-width: 389px) {
  :root { --title-lh: 34px; }
}

@media (max-width: 374px) {
  :root { --title-lh: 32px; }
}

/* Very narrow phones. */
@media (max-width: 359px) {
  .step-text {
    font-size: 16px;
    line-height: 26px;
  }
}