/* ============================================================
   SEQUENTIAL STORYTELLING — the flight path
   One object carries the story and the visitor follows it down.

   Baseline first: everything here is readable, stacked and in reading
   order with no JS. There is no pinning, so the no-JS page is not a
   special case — it is the same page without the motion.
   ============================================================ */

.story{background:var(--bg);overflow-x:clip}

/* Magnetism lives in paper.js, not here.
   CSS scroll-snap gives no tuning knobs — no threshold, no duration, no
   easing — and `proximity` fights the page's own `scroll-behavior: smooth`,
   which is what made it feel twitchy. The JS settle only fires once scrolling
   has genuinely stopped, eases over a set duration, and aborts the moment the
   reader touches the page again. */
.flight{position:relative;padding:clamp(30px,5vw,60px) 0 clamp(40px,6vw,80px)}

.flightsvg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;overflow:visible;
}
/* the dotted contrail — evenly dotted, no ticks and no marks.
   It records where the plane has been, never how long it took. */
.trail{stroke:#D8C7B2;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 13}

.planewrap{
  /* above the waypoint copy so the sheet can land ON the notice and
     cross-dissolve into it rather than sliding behind it */
  position:absolute;top:0;left:0;width:132px;z-index:3;pointer-events:none;
}
.paper{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 14px 22px rgba(31,26,23,.16))}
.paper .facet{stroke:#E3D6C6;stroke-width:.6;stroke-linejoin:round}

/* ---------- waypoints ---------- */
.wp{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  min-height:88vh;display:flex;flex-direction:column;justify-content:center;
}
.wp--land{min-height:78vh}
.wpin{width:100%}
@media(min-width:900px){
  .wp--l .wpin{max-width:46%;margin-right:auto}
  .wp--r .wpin{max-width:46%;margin-left:auto}
  .wp--center .wpin{max-width:74%;margin:0 auto;text-align:center}
  .wp--land .wpin{max-width:min(720px,80%)}
}

.bnum{
  font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:block;
}
.bcopy{
  font-family:Fraunces,Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,3.3vw,2.6rem);line-height:1.14;letter-spacing:-.02em;
  color:var(--ink);margin:0;
}
.wp--center h1{margin:0 auto}
.sub{margin-top:20px;color:var(--muted);font-size:1.05rem}

.skipbtn{
  appearance:none;background:transparent;border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--muted);
  padding:11px 22px;min-height:44px;cursor:pointer;margin-top:26px;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.skipbtn:hover{border-color:var(--muted);color:var(--ink)}
.skipbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- the landing: it opens into the notice ---------- */
.doc{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:clamp(28px,4.5vw,48px);position:relative;text-align:left;
  box-shadow:0 1px 0 var(--line),0 18px 44px rgba(31,26,23,.07);
}
.doc::before{
  /* the centre crease it was folded on — it stays, the way real paper does.
     z-index matters: the CTA is an unpositioned child and the crease drew
     straight across it. */
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:0;
  background:linear-gradient(180deg,transparent,#EADFD2 12%,#EADFD2 88%,transparent);
  pointer-events:none;
}
.doc > *{position:relative;z-index:1}
.dochead{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px;
}
.doc h2{max-width:18ch}
.doc .lead{margin-top:18px}
.doc .ctarow{margin-top:26px}

/* ---------- narrow: the route runs down a gutter, never across the copy ----------
   On a 390px screen there is no room for a moving object and a line of
   text to share a row, so the plane gets its own lane on the left. */
@media(max-width:899px){
  .planewrap{width:68px}
  .wp{min-height:78vh;padding-left:calc(var(--gut) + 24%)}
  .wp--center,.wp--land{padding-left:var(--gut)}
  /* room for the sheet to open without crossing the previous beat's copy —
     at 390px the lane and the text are only ~60px apart, so the sheet needs
     the last beat gone from the screen before it grows */
  .wp--land{padding-top:20vh}
  .wp--center .wpin,.wp--land .wpin{text-align:center}
  .wp--land .wpin{text-align:left}
  .bcopy{font-size:clamp(1.3rem,5.4vw,1.85rem)}
}

/* ---------- the fork ---------- */
.forksec{background:var(--surface-2);border-top:1px solid var(--line)}
.forkhead{text-align:center;max-width:22ch;margin:0 auto clamp(30px,4vw,46px)}
.forkgrid{display:grid;gap:clamp(18px,2.6vw,28px)}
@media(min-width:860px){.forkgrid{grid-template-columns:.85fr 1.15fr;align-items:start}}
.path{border-radius:4px;padding:clamp(26px,3.4vw,38px);position:relative;overflow:hidden}
.path .plabel{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.path h3{font-family:Fraunces,Georgia,serif;font-size:clamp(1.4rem,2.5vw,1.95rem);font-weight:500;letter-spacing:-.02em;line-height:1.14}
.path--lose{background:var(--bg);border:1px solid var(--line)}
.path--lose .plabel{color:var(--muted)}
.path--lose h3{color:var(--muted)}
.path--lose p{color:var(--muted);font-size:.99rem;margin:14px 0 0}
.path--win{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent)}
.path--win .plabel{color:var(--accent)}
.path--win p{color:var(--muted);font-size:.99rem;margin:14px 0 0}
/* the first week, as a sequence — momentum rather than a menu */
.plan{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.pstep{
  display:grid;grid-template-columns:74px 1fr;gap:0 18px;align-items:start;
  padding:16px 0;border-top:1px solid var(--line);
}
.pstep:first-child{border-top:0;padding-top:4px}
.pwhen{
  font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);padding-top:4px;
}
.pbody{font-size:.99rem;line-height:1.6;color:var(--muted)}
.pbody strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.doors{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.doors li{
  position:relative;padding-left:18px;font-size:.95rem;line-height:1.55;color:var(--muted);
}
.doors li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:1px;transform:rotate(45deg);background:var(--accent);opacity:.55;
}
@media(max-width:560px){
  .pstep{grid-template-columns:1fr;gap:6px}
  .pwhen{padding-top:0}
}
.fallplane{width:70px;height:auto;display:block;margin:0 0 18px;opacity:.45}

/* ============================================================
   THE LOWER PAGE, AS ONE CONTINUOUS SHEET
   Paper is the stage and the divider — not a texture on everything.
   The photographs stay on their dark ground; a studio portrait pasted
   onto a paper card would read as a scrapbook, and those assets are
   doing the trust work.
   ============================================================ */
.truthsec{background:var(--surface-2);border-top:1px solid var(--line)}
.truthgrid{display:grid;gap:clamp(20px,2.6vw,30px);margin-top:clamp(30px,4vw,44px)}
@media(min-width:880px){.truthgrid{grid-template-columns:repeat(3,1fr)}}
.truthsec .truth{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:26px 24px 28px;border-top:3px solid var(--accent);
  box-shadow:0 1px 0 var(--line),0 10px 26px rgba(31,26,23,.04);
}
.truthsec .truth p{margin:0}
.truthsec .reducer{margin-top:clamp(26px,3.4vw,38px);max-width:66ch}

/* the section divider is a fold crease in the sheet */
.gaprule{grid-template-columns:1fr 14px 1fr}
.gaprule i{height:2px;background:linear-gradient(180deg,#EFE5D8 0 1px,#FFFFFF 1px 2px)}
.gaprule b{width:4px;height:4px;border-radius:1px;transform:rotate(45deg);background:var(--line);opacity:1}
.gaprule--deep i{background:linear-gradient(180deg,#000 0 1px,#3B312B 1px 2px)}
.gaprule--deep b{background:var(--deep-line)}

.opt{border-radius:4px}
.opt::before{height:3px}
.notecard,.rule,.legalnote,.countycard{border-radius:4px}