/* css/story.css: the CONTENT sheet for BUILDER STORY pages (locked template).
   Extracted VERBATIM from rebuild/template-reference.html (the authoritative
   template, SHELL-DECISION.md 2026-07-28). When the reference and this file
   disagree, the reference wins: re-extract, do not hand-edit here.

   The SHELL half of the reference (clamped root, reset, header, gold nav,
   three-column footer, mobile shell) moved to css/shell.css on 2026-07-29 so
   the modern plan pages share it (SHELL-DECISION items 2-3). Story pages load
   css/shell.css FIRST and this file second, which reproduces the reference's
   own source order exactly. */

/* ===================================================================
   WM6C - "One sheet, centered" (wm5 base + wm4 typography)
   The story sits on a single sheet of warm paper laid on the cream
   page, as in wm5. Everything on that sheet is centered on one axis
   the way wm4 was: title, subtitle, section heads, captions, the
   closing links. Prose keeps a reading measure but the measure is
   centered, not flush left. The plans offer is the one thing that is
   boxed, so it reads as a departure from the story, and it is
   repeated as a full call to action near the foot of the page.
   ------------------------------------------------------------------
   Page tone: the lightest of the three, close to wm4's paper. The sheet keeps
   only a whisper of edge and shadow. CTA: a soft green tinted panel.
   ------------------------------------------------------------------
   Shell (header + gold nav + three column footer) reproduced from
   lemay-shell-final.html and css/plans.css.
=================================================================== */

/* ===================================================================
   Content
=================================================================== */
:root{
  --ink:#221F19;
  --body:#3B372F;
  --muted:#6E6657;
  --gold:#FFC300;
  --gold-deep:#9A7400;
  --hair:rgba(154,116,0,.38);
  --green:#425E31;
  --green-deep:#2F4527;
  --measure:620px;
  --serif:Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* the sheet of paper the whole story sits on */
.sheet{
  /* 720 picture width + 64px padding each side, and never edge to edge:
     the sheet keeps a gutter at every width, including the 768 to 848 band
     where the auto margins used to collapse to nothing. The gutter is 10px
     a side on a phone, as drawn, and opens to 24px by desktop. */
  width:min(848px,100% - clamp(20px,5vw,48px));
  margin:clamp(18px,3vw,44px) auto clamp(34px,5vw,60px);
  background:#FFFEFA;
  border:1px solid rgba(154,116,0,.28);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(45,36,18,.045),0 34px 60px -48px rgba(45,36,18,.50);
  padding:clamp(26px,5vw,64px) clamp(20px,5vw,64px) clamp(64px,9vw,120px);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.72;
  color:var(--body);
}
@media (max-width:767.9px){
  .sheet{ border-radius:12px; }
}

.sheet a{
  color:var(--green); text-decoration:underline; text-decoration-thickness:2px;
  text-decoration-color:rgba(255,195,0,.5); text-underline-offset:3px;
}
.sheet a:hover{ color:var(--green-deep); text-decoration-color:var(--gold); }
.sheet h1,.sheet h2{ font-weight:400; color:var(--ink); }

/* every block of prose is a centered measure, not a flush left column */
.sheet p{ margin:0 0 1.05em; max-width:var(--measure); margin-inline:auto; }
.sheet p:last-child{ margin-bottom:0; }

.sheet h1{
  font-size:clamp(30px,4.4vw,42px); line-height:1.12; letter-spacing:-.02em;
  text-align:center; text-wrap:balance; margin-bottom:.38em;
}
.sheet .lede{
  text-align:center; color:var(--muted);
  font-size:clamp(17.5px,2.1vw,20px); line-height:1.5;
  max-width:31em; margin:0 auto clamp(32px,4.5vw,50px);
}

/* sections: a short centered hairline, a centered kicker, a centered head.
   The gap that opens a section is always larger than the gap between a
   caption and the next picture, so the page reads in blocks. */
.sec{ margin-top:clamp(56px,7vw,80px); }
.sec::before{
  content:""; display:block; width:56px; height:1px;
  background:var(--hair); margin:0 auto clamp(22px,3vw,30px);
}
.kicker{
  display:block; font-family:var(--sans); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep); margin-bottom:.5rem;
}
.sheet h2{
  font-size:clamp(22px,2.7vw,28px); line-height:1.18; letter-spacing:-.014em;
  text-align:center; text-wrap:balance; margin-bottom:.6em;
}

/* photographs, with wm4's italic centered captions.
   A caption belongs to the picture above it, so it sits close to the
   picture, and the space that separates one block from the next is put
   below the caption instead: tight above, generous below. */
figure{ margin:clamp(26px,3.6vw,42px) auto clamp(42px,5.4vw,64px); }
figure img{ width:100%; }
.fig-narrow{ max-width:650px; }        /* this photo is 650px native, do not enlarge it */
figcaption{
  margin:10px auto 0; max-width:34em;
  font-style:italic; font-size:16.5px; line-height:1.5;
  color:var(--muted); text-align:center; text-wrap:pretty;
}

/* the two snapshots, side by side, capped at their native 300px */
.pair{
  display:grid; grid-template-columns:1fr 1fr; gap:36px;
  max-width:636px; margin:clamp(26px,3.6vw,42px) auto clamp(42px,5.4vw,64px);
}
.pair figure{ margin:0; }
.pair img{ aspect-ratio:4/3; object-fit:cover; }

.sheet .label{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep);
  text-align:center; text-wrap:balance; max-width:none; margin:0 0 1.2em;
}
.letter{
  font-style:italic; font-size:20px; line-height:1.65; color:#302C24;
  max-width:var(--measure); margin:0 auto;
}
.letter p{ margin:0 0 .95em; max-width:100%; }
.letter p:last-child{ margin-bottom:0; }
.sec .letter{ margin-top:clamp(22px,2.8vw,34px); }   /* a letter that opens a section, not a label */

.sheet .note{ max-width:var(--measure); margin:clamp(22px,3vw,32px) auto 0; color:#4A4437; }
.note b{ color:var(--green-deep); }

/* ---------- the plans offer: the one boxed thing on the sheet ---------- */
.plan-box{
  max-width:var(--measure);
  margin:clamp(40px,5vw,62px) auto;
  padding:clamp(24px,3.4vw,34px) clamp(20px,3.4vw,34px) clamp(26px,3.6vw,36px);
  text-align:center;
  background:#FBF4E4;
  border:1px solid #E8D8A8;
  border-radius:8px;
}
.plan-box h2{ font-size:clamp(20px,2.4vw,25px); margin-bottom:.55em; color:var(--green-deep); }
.plan-box p{ max-width:30em; margin:0 auto 1.1em; }
.plan-box.final{ margin-top:clamp(46px,5.5vw,70px); margin-bottom:0; }
/* Sized with padding rather than a 52px line box, so a label that has to
   wrap on a narrow screen makes a taller button instead of two 52px lines
   inside one. Desktop height is unchanged: 24 + 14 + 14 + 2 = 54px. */
.btn{
  display:inline-block; margin-top:.35em; max-width:100%;
  font-family:Verdana,Geneva,sans-serif; font-weight:700; letter-spacing:.02em;
  font-size:18px; line-height:24px; padding:14px 32px; text-align:center;
  text-wrap:balance;
  background:linear-gradient(180deg,#FFCE3C 0%,#F7BC00 100%);
  border:1px solid #D9A600; border-radius:9px;
  box-shadow:0 2px 5px rgba(184,138,0,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
/* .sheet a would colour and underline it, so the link form is set on its own */
a.btn{ color:#000; text-decoration:none; }
a.btn:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 3px 8px rgba(184,138,0,.34), inset 0 1px 0 rgba(255,255,255,.4); color:#000; }
a.btn:active{ transform:translateY(1px); box-shadow:0 1.5px 4px rgba(184,138,0,.45), inset 0 1px 0 rgba(255,255,255,.4); }
/* on a phone the call to action is a full width block, so it carries the
   weight the footer links used to take away from it */
@media (max-width:560px){
  .btn{
    display:block; width:100%; max-width:360px; margin:.5em auto 0;
    font-size:17px; line-height:23px; padding:15px 18px;
  }
}
.aside{
  display:block; margin-top:1.15em;
  font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--muted);
}

/* ---------- the closing links, centered like wm4 ---------- */
.next ul{ list-style:none; max-width:var(--measure); margin:0 auto; }
.next li{
  padding:.75em 0; border-bottom:1px solid rgba(154,116,0,.22); line-height:1.55;
}
.next li:first-child{ padding-top:0; }
.next li:last-child{ border-bottom:none; padding-bottom:0; }

@media (max-width:560px){
  .sheet{ font-size:17.5px; }
  .letter{ font-size:18.5px; }
  /* stacked, the two snapshots are read one under the other, so the gap
     between a caption and the next picture matches the rest of the page */
  .pair{ grid-template-columns:1fr; gap:36px; max-width:340px; }
  .sheet h2{ font-size:21px; }
}

/* ===================================================================
   VERTICAL RHYTHM SCALE (SHELL-DECISION.md 2026-08-06)

   NOT part of the verbatim extraction from template-reference.html.
   KEEP THIS BLOCK WHEN RE-EXTRACTING: it is appended below the
   extracted text on purpose, so the extraction above stays byte-clean
   and this still wins on the cascade (later, equal specificity).

   Until today the site had no spacing convention at all: every wrapper
   declared its own top gap, its own heading margins and its own
   first-section gap, each set locally, none derived from anything. The
   .home / .gallery family and the .sheet family were 4.5x apart at the
   top of the page on a phone (10px vs 45px), and two of the "bespoke"
   numbers people had been tuning never rendered at all. The scale is
   the source of truth now; SHELL-DECISION.md carries the reasoning and
   the permitted departures.

   Every declaration below EXCEPT the one text-wrap is a no-op: each
   token holds the value its rule already computed. The point is to
   give those numbers names that BOTH wrapper families can read, since
   .home and .gallery load this sheet too and cannot see .sheet's rules.
=================================================================== */
:root{
  --rh-gutter:      clamp(18px,3vw,44px);    /* chrome -> sheet edge      */
  --rh-crown:       clamp(26px,5vw,64px);    /* sheet edge -> h1          */
  --rh-crown-open:  clamp(34px,5.4vw,72px);  /* chrome -> h1, no sheet    */
  --rh-lede:        .38em;                   /* h1 -> lede                */
  --rh-body:        .5em;                    /* heading -> its own body   */
  --rh-block:       clamp(32px,4.5vw,50px);  /* lede -> first block       */
  --rh-block-tight: clamp(24px,3.2vw,34px);  /* ...when it is a control   */
  --rh-sec:         clamp(56px,7vw,80px);    /* section -> section, prose */
  --rh-sec-dense:   clamp(40px,5vw,58px);    /* ...lists and directories  */
}
/* no-ops: the tokens become the authority for the sheet family too, so a
   later edit to a token moves both families instead of only one */
.sheet{ margin-top:var(--rh-gutter); padding-top:var(--rh-crown); }
.sheet h1{ margin-bottom:var(--rh-lede); }
.sec{ margin-top:var(--rh-sec); }
/* The one real change on this sheet. balance, not pretty: measured off real
   Range client rects at 11 widths on 8 pages, `pretty` was byte-identical to
   normal wrapping in EVERY case and fixes nothing, while `balance` fixes the
   whole dangling-word class and never changed a lede's rendered height at any
   width on any page. That last property is what makes it safe here. */
.sheet .lede{ margin-bottom:var(--rh-block); text-wrap:balance; }