/* 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; }
}