:root{
  color-scheme: light;
  --ink:#141414; --muted:#4e4e4e; --rule:#d8d4cc;
  --bg:#fbf9f5; --panel:#f3f0e9;
  --red:#b3242b; --amber:#a8761a; --green:#2f6b44; --slate:#3a4a5a;
  --glass: color-mix(in oklab, #fff 62%, transparent);
  --radius:14px;
  --shadow: 0 1px 2px rgb(20 20 20 / .04), 0 8px 24px -12px rgb(20 20 20 / .16);
}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  /* 17.5px base and a generous measure: a large share of readers are over sixty
     and reading this while frightened. Small grey text fails them. */
  font:17.5px/1.7 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-image:
    radial-gradient(60rem 40rem at 88% -12%, color-mix(in oklab,var(--red) 13%, transparent), transparent 62%),
    radial-gradient(52rem 34rem at -8% 8%, color-mix(in oklab,var(--slate) 11%, transparent), transparent 60%);
  background-attachment: fixed;
}
.wrap{ max-inline-size:68rem; margin-inline:auto; padding-inline:1.25rem; padding-block:0 4rem; }
a{ color:var(--red); text-underline-offset:.16em; }
a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--red); outline-offset:3px; border-radius:4px;
}

header.top{
  position:sticky; inset-block-start:0; z-index:10;
  backdrop-filter: blur(14px) saturate(1.5);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-block-end:1px solid var(--rule);
}
.top .wrap{ display:flex; gap:.75rem 1rem; align-items:center; flex-wrap:wrap; padding-block:.85rem; }
.mark{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:-.015em; text-decoration:none; color:inherit; }
.mark .glyph{
  inline-size:1.85rem; block-size:1.85rem; border-radius:7px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--red), color-mix(in oklab, var(--red) 62%, #000));
  color:#fff; font-size:.95rem; box-shadow:var(--shadow);
}
.top nav{ margin-inline-start:auto; display:flex; gap:.5rem 1.15rem; flex-wrap:wrap; font-size:.92rem; }
.top nav a{ color:var(--muted); text-decoration:none; padding-block:.25rem; }
.top nav a:hover{ color:var(--ink); }
/* Below ~46rem the four nav items cannot sit beside the wordmark. Let them take
   their own full-width row and wrap within it rather than pushing the page wide. */
@media (max-width: 46rem){
  .top nav{ margin-inline-start:0; inline-size:100%; gap:.4rem 1rem; font-size:.88rem; }
}

/* ============================================================
   Liquid glass — depth, refraction and specular light.

   Three rules govern everything below, because of who reads this
   site: a frightened person, often over sixty, sometimes on a
   phone in poor light.

   1. Glass is DECORATION. No body text ever sits on a surface
      whose contrast depends on what is behind it. The panels
      carry a near-opaque ground under the translucency.
   2. Motion is an ENHANCEMENT. Every animation is wrapped in
      @supports and killed by prefers-reduced-motion. With both
      off, the page is a clean static document.
   3. Nothing decorative blocks reading. The hero art sits at
      low opacity behind a scrim, and is masked away from text.
   ============================================================ */

/* Registered so they can be animated and interpolated smoothly. */
@property --sheen-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --sheen-y { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --sheen-a { syntax: "<number>"; inherits: true; initial-value: 0; }

:root{
  /* Elevation: each step adds a longer, softer shadow and a brighter top edge,
     which is what actually reads as "thicker glass" rather than more blur. */
  --lift-1: 0 1px 2px rgb(20 20 20/.04), 0 8px 24px -14px rgb(20 20 20/.18);
  --lift-2: 0 1px 2px rgb(20 20 20/.05), 0 18px 44px -20px rgb(20 20 20/.26),
            0 4px 12px -6px rgb(20 20 20/.08);
  --lift-3: 0 2px 4px rgb(20 20 20/.06), 0 34px 70px -28px rgb(20 20 20/.32),
            0 8px 20px -10px rgb(20 20 20/.10);
  --edge:   inset 0 1px 0 rgb(255 255 255/.85), inset 0 0 0 1px rgb(255 255 255/.35);
}

.glass{
  position: relative;
  isolation: isolate;
  /* A real ground under the translucency. This is the contrast guarantee:
     whatever passes behind, text on this surface stays legible. */
  background:
    linear-gradient(180deg, rgb(255 255 255/.78), rgb(255 255 255/.62)),
    var(--panel);
  backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid color-mix(in oklab, #fff 70%, var(--rule));
  border-radius: var(--radius);
  box-shadow: var(--lift-2), var(--edge);
}

/* The refraction edge: a bright hairline that catches light along the top-left
   and falls away — the thing that separates glass from a grey box. */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background: linear-gradient(145deg,
    rgb(255 255 255/.95), rgb(255 255 255/.15) 38%, transparent 58%,
    color-mix(in oklab, var(--red) 14%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: 2;
}

/* Specular sheen that tracks the pointer. --sheen-a is raised on hover so the
   highlight fades in rather than snapping. */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(28rem 22rem at var(--sheen-x) var(--sheen-y),
    rgb(255 255 255/.55), transparent 60%);
  opacity: var(--sheen-a);
  transition: opacity .35s ease;
  z-index: 1;
}
.glass > *{ position: relative; z-index: 3; }

@media (hover: hover) and (pointer: fine){
  .glass:hover{ --sheen-a: .9; box-shadow: var(--lift-3), var(--edge); }
  .glass{ transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.3,1); }
  .card.link:hover{ transform: translateY(-3px) scale(1.004); }
}

/* Glass conveys nothing essential. In forced colors it becomes a plain box. */
@media (forced-colors: active){
  .glass{ border:1px solid CanvasText; backdrop-filter:none; background:Canvas; box-shadow:none; }
  .glass::before, .glass::after{ display:none; }
}

/* ---- the aurora ground -------------------------------------------------
   Two slow-drifting blobs behind everything. Transform-only, so it stays on
   the compositor and costs nothing on the main thread. */
.aurora{
  position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  overflow: hidden; contain: strict;
}
.aurora i{
  position:absolute; display:block; border-radius:50%;
  filter: blur(70px); opacity:.38; will-change: transform;
}
.aurora i:nth-child(1){
  inline-size:52vmax; block-size:52vmax; inset-block-start:-6vmax; inset-inline-end:-8vmax;
  background: radial-gradient(circle, color-mix(in oklab,var(--red) 42%, transparent), transparent 68%);
}
.aurora i:nth-child(2){
  inline-size:46vmax; block-size:46vmax; inset-block-end:-10vmax; inset-inline-start:-10vmax;
  background: radial-gradient(circle, color-mix(in oklab,var(--slate) 40%, transparent), transparent 68%);
}
@media (prefers-reduced-motion: no-preference){
  .aurora i:nth-child(1){ animation: drift-a 34s ease-in-out infinite alternate; }
  .aurora i:nth-child(2){ animation: drift-b 41s ease-in-out infinite alternate; }
}
@keyframes drift-a{ to{ transform: translate3d(-7vmax, 5vmax, 0) scale(1.14); } }
@keyframes drift-b{ to{ transform: translate3d(6vmax, -5vmax, 0) scale(1.1); } }

/* ---- hero art ----------------------------------------------------------
   The on-chain map, sunk far enough back that it reads as depth rather than as
   a picture.

   Two things it must not do, both of which the first attempt did: end in a hard
   vertical seam at the edge of the 68rem content column, and cut off with a
   straight line at the bottom. So it bleeds the full viewport width and is
   masked to nothing on every edge — the art has no boundary the eye can find. */
.hero{ position: relative; }
.hero .art{
  position:absolute; inset-block:-5rem auto; z-index:-1; pointer-events:none;
  /* Break out of .wrap to the full viewport, without causing a scrollbar. */
  inline-size:100vw; margin-inline:calc(50% - 50vw);
  block-size:min(38rem, 84vh); overflow:clip;
}
.hero .art img{
  inline-size:100%; block-size:100%; object-fit:cover; object-position:78% 40%;
  opacity:.22; filter:saturate(1.05);
  /* Feathered on all four sides and pushed hard to the right. The headline and
     lede occupy roughly the left half at desktop widths, and they are the only
     two things on this page that have to be read perfectly, so the art is
     masked to nothing across that whole column rather than merely dimmed. */
  mask-image:
    radial-gradient(105% 88% at 84% 36%, #000 0%, rgb(0 0 0/.5) 40%, transparent 74%),
    linear-gradient(90deg, transparent 0%, transparent 40%, #000 68%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 58%, transparent 94%);
  mask-composite: intersect;
  will-change:transform;
}
@media (max-width: 54rem){
  /* On a phone the map competes with the headline for the same space. Push it
     back further rather than letting it fight the one sentence that matters. */
  .hero .art img{ opacity:.18; object-position:64% 40%; }
}
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .hero{ view-timeline: --hero; }
    .hero .art img{
      animation: art-parallax linear both;
      animation-timeline: --hero;
      animation-range: entry 0% exit 100%;
    }
    @keyframes art-parallax{
      from{ transform: translate3d(0, -4%, 0) scale(1.10); }
      to  { transform: translate3d(0, 8%, 0) scale(1.16); }
    }
  }
}

/* ---- scroll reveal (decorative; no fallback by design) ---------------- */
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .reveal{
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes rise-in{
      from{ opacity:0; transform: translate3d(0, 22px, 0); }
      to  { opacity:1; transform: none; }
    }
  }
}

/* ---- section art ------------------------------------------------------- */
.artcard{ display:grid; grid-template-columns: minmax(0,1fr); gap:1.5rem; align-items:start; }
@media (min-width: 54rem){ .artcard.split{ grid-template-columns: 1.35fr .65fr; } }
.artcard picture{ display:block; border-radius:16px; overflow:clip; box-shadow:var(--lift-2); line-height:0; }
.artcard picture img{
  inline-size:100%; block-size:auto; display:block;
  max-block-size:22rem; object-fit:cover;
}
@media (max-width:54rem){ .artcard picture img{ max-block-size:14rem; } }

/* ---- the demo player ---------------------------------------------------
   Click to play. No autoplay, and the files carry no audio track at all, so
   the page can never make a noise at someone who is already frightened. */
.demo{ padding:1.35rem; }
.demo .frame{
  position:relative; border-radius:14px; overflow:clip; background:#0d0d0f;
  box-shadow: var(--lift-2); aspect-ratio: 3 / 4; max-inline-size: 26rem; margin-inline:auto;
}
/* Beside a text column the clip is supporting material, not the subject, so it
   is capped rather than allowed to set the height of the whole row. */
.artcard .frame{ max-block-size:24rem; aspect-ratio:auto; block-size:24rem; }
.demo video{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.demo .play{
  position:absolute; inset:0; inline-size:100%; display:grid; place-items:center;
  border:0; cursor:pointer; color:#fff; font:inherit; font-weight:700;
  background: linear-gradient(180deg, rgb(10 10 12/.15), rgb(10 10 12/.55));
}
.demo .play span{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.2rem; border-radius:100px; backdrop-filter: blur(8px);
  background: rgb(255 255 255/.16); border:1px solid rgb(255 255 255/.5);
  box-shadow: var(--lift-2);
}
.demo .play[hidden]{ display:none; }
.demo figcaption{ color:var(--muted); font-size:.88rem; margin-block-start:.8rem; text-align:center; }


.hero{ padding-block:3.5rem 1.5rem; }
.hero h1{ font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.028em; margin:0 0 .8rem; }
.hero p.lede{ font-size:clamp(1.02rem,1.6vw,1.16rem); color:var(--muted); margin:0; max-inline-size:44rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--red);
  background:color-mix(in oklab,var(--red) 9%, transparent);
  border:1px solid color-mix(in oklab,var(--red) 22%, transparent);
  padding:.32rem .68rem; border-radius:100px; margin-block-end:1rem;
}

.panel{ padding:1.5rem; margin-block:1.25rem; }
form.check label{ display:block; font-weight:650; margin-block-end:.45rem; }
form.check .hint{ display:block; color:var(--muted); font-size:.86rem; margin-block-end:.5rem; }
form.check textarea{
  inline-size:100%; box-sizing:border-box; min-block-size:9.5rem; resize:vertical;
  padding:.85rem .95rem; border-radius:10px; border:1px solid var(--rule);
  background:#fff; color:inherit; font:inherit; font-size:.96rem;
}
form.check textarea:user-invalid{ border-color:var(--red); background:color-mix(in oklab,var(--red) 5%, #fff); }
form.check textarea:user-invalid ~ .err{ display:block; }
.err{ display:none; color:var(--red); font-size:.86rem; margin-block-start:.4rem; }
.row{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-block-start:1rem; }
button.primary{
  font:inherit; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(150deg,var(--red), color-mix(in oklab,var(--red) 76%, #000));
  border:0; border-radius:10px; padding:.72rem 1.35rem;
  min-block-size:2.75rem; min-inline-size:9rem; box-shadow:var(--shadow);
}
button.primary:hover{ filter:brightness(1.06); }
button.primary[disabled]{ opacity:.6; cursor:progress; }
.note{ color:var(--muted); font-size:.86rem; }

.grid3{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-block:1.5rem; }
.card{ padding:1.15rem 1.25rem; }
.card h3{ margin:.1rem 0 .4rem; font-size:1rem; }
.card p{ margin:0; color:var(--muted); font-size:.92rem; }

/* verdict */
.verdict{ display:flex; gap:1.25rem; flex-wrap:wrap; align-items:stretch; padding:1.35rem; }
.meter{ text-align:center; padding:1rem 1.35rem; border-radius:12px; min-inline-size:9rem;
  background:color-mix(in oklab,var(--panel) 80%, #fff); border:1px solid var(--rule); }
.meter .n{ font-size:2.9rem; font-weight:800; line-height:1; letter-spacing:-.04em; }
.meter .b{ font-weight:800; font-size:.82rem; letter-spacing:.06em; margin-block-start:.3rem; }
.meter .s{ color:var(--muted); font-size:.74rem; margin-block-start:.25rem; }
.facts{ flex:1 1 22rem; display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; align-content:start; font-size:.92rem; }
.facts dt{ font-weight:700; color:var(--muted); }
.facts dd{ margin:0; }

.crit{ color:var(--red); } .high{ color:#c0561f; } .warn{ color:var(--amber); }
.ok{ color:var(--green); } .neutral{ color:var(--slate); }

h2.sec{ font-size:1.12rem; letter-spacing:-.012em; margin-block:2rem .75rem;
  padding-block-end:.45rem; border-block-end:1px solid var(--rule); }
table{ inline-size:100%; border-collapse:collapse; font-size:.88rem; }
th,td{ text-align:start; vertical-align:top; padding:.55rem .6rem; border-block-end:1px solid var(--rule); }
th{ background:var(--panel); font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
td.mono,.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; word-break:break-all; }
.tablewrap{ overflow-x:auto; }

.finding{ padding:1rem 1.15rem; margin-block:.7rem; }
.finding h4{ margin:0 0 .35rem; font-size:.98rem; }
.finding .meta{ color:var(--muted); font-size:.8rem; margin-block-start:.5rem; }
.tag{ font-size:.7rem; font-weight:800; letter-spacing:.06em; padding:.14rem .45rem;
  border-radius:5px; border:1px solid currentColor; }

.step{ padding:1.15rem 1.25rem; margin-block:.85rem; }
.step h4{ margin:0 0 .6rem; font-size:1rem; }
.step .who{ display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; font-size:.86rem; margin-block-end:.7rem; }
.step .who dt{ font-weight:700; color:var(--muted); }
.step .who dd{ margin:0; }
.step ul{ margin:.35rem 0; padding-inline-start:1.1rem; }
.step li{ margin-block:.32rem; font-size:.92rem; }
.callout{ border-inline-start:3px solid var(--green); background:var(--panel);
  padding:.7rem .9rem; border-radius:0 8px 8px 0; margin-block-start:.7rem; font-size:.89rem; }
.callout.limit{ border-inline-start-color:var(--amber); }
.callout.danger{ border-inline-start-color:var(--red); }
.callout.danger.loud{ font-size:1rem; padding:1rem 1.15rem; margin-block:1.25rem;
  background:color-mix(in oklab,var(--red) 7%, #fff); }
.callout.danger.loud strong{ color:var(--red); }
.script{ background:#fff; border:1px dashed var(--rule); border-radius:8px; padding:.7rem .8rem;
  font-family:ui-monospace,monospace; font-size:.79rem; margin-block-start:.6rem; }
.src{ color:var(--muted); font-size:.76rem; margin-block-start:.5rem; word-break:break-word; }

footer.foot{ margin-block-start:3rem; padding-block:2rem; border-block-start:1px solid var(--rule);
  color:var(--muted); font-size:.85rem; }


/* ---- library + long-form ---- */
.wrap.wide{ max-inline-size:52rem; }
article p, .hero p.lede{ max-inline-size:44rem; }
.crumb{ margin-block:1.5rem .5rem; font-size:.95rem; }
.crumb a{ text-decoration:none; }
.question{ font-size:1.15rem; font-style:italic; color:var(--muted); margin-block:.25rem 1rem; max-inline-size:44rem; }
.answer{ background:var(--panel); border-inline-start:3px solid var(--red); border-radius:0 10px 10px 0;
  padding:1rem 1.25rem; margin-block:1rem; }
.answer p{ margin:0; font-size:1.06rem; font-weight:600; }
.cardgrid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); margin-block:1.25rem 2rem; }
.card.link{ display:block; text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
.card.link:hover{ transform:translateY(-2px); box-shadow:var(--shadow), 0 12px 32px -16px rgb(20 20 20/.25); }
.card .q{ font-style:italic; color:var(--muted); font-size:.92rem; margin:.1rem 0 .5rem; }
.card .odds{ font-size:.86rem; font-weight:700; margin-block-start:.6rem; }
.card .more{ display:inline-block; margin-block-start:.7rem; font-weight:650; color:var(--red); font-size:.92rem; }
.btnlink{ display:inline-block; font-weight:700; text-decoration:none; color:#fff; border-radius:10px;
  padding:.7rem 1.25rem; min-block-size:2.75rem; background:linear-gradient(150deg,var(--red),
  color-mix(in oklab,var(--red) 76%,#000)); box-shadow:var(--shadow); }
.btnlink.ghost{ background:var(--panel); color:var(--ink); border:1px solid var(--rule); box-shadow:none; }
.btnlink:hover{ filter:brightness(1.05); }
ul.checks, ul.warn-list, ol.do-list, ul.related{ max-inline-size:44rem; padding-inline-start:1.3rem; }
ul.checks li, ul.warn-list li, ol.do-list li, article ul li, article ol li{ margin-block:.55rem; }
ul.warn-list li::marker{ color:var(--red); }
ol.do-list li::marker{ font-weight:700; color:var(--red); }
dl.glossary{ max-inline-size:46rem; }
dl.glossary dt{ font-weight:700; margin-block-start:1.1rem; }
dl.glossary dd{ margin:.2rem 0 0; color:var(--ink); }
.checklist{ list-style:none; counter-reset:c; padding:0; max-inline-size:46rem; }
.checklist li{ counter-increment:c; position:relative; padding-inline-start:3rem; margin-block:1.5rem; }
.checklist li::before{ content:counter(c); position:absolute; inset-inline-start:0; inset-block-start:.1rem;
  inline-size:2rem; block-size:2rem; border-radius:50%; display:grid; place-items:center;
  background:var(--red); color:#fff; font-weight:800; font-size:.95rem; }
.checklist h3{ margin:.1rem 0 .3rem; font-size:1.05rem; }
.checklist p{ margin:0; }
.guide-head{ margin-block:2rem 1rem; }
.guide-item{ margin-block:2rem; }
.guide-item h3{ font-size:1.15rem; margin-block:1.5rem .3rem; }
.guide-item h4{ font-size:.98rem; margin-block:1rem .3rem; }
.footlinks a{ text-decoration:none; }

/* ---- verdict block ---- */
.verdict-plain{ padding:1.5rem; margin-block:1.25rem; }
.verdict-plain h2{ font-size:1.3rem; line-height:1.35; margin:0 0 .6rem; letter-spacing:-.015em; }
.verdict-plain .lead{ font-size:1.05rem; margin:0 0 1rem; }
.reasons{ list-style:none; padding:0; margin:0; }
.reasons li{ padding:.85rem 1rem; margin-block:.6rem; background:var(--panel); border-radius:10px;
  border-inline-start:3px solid var(--rule); }
/* Severity tints the rule only. Body text stays near-black: coloured paragraphs
   are harder to read, and harder still for the older readers this page is for. */
.reasons li.sev-critical{ border-inline-start-color:var(--red); }
.reasons li.sev-high{ border-inline-start-color:#c0561f; }
.reasons li.sev-medium{ border-inline-start-color:var(--amber); }
.reasons li.sev-low{ border-inline-start-color:var(--slate); }
.reasons li p{ color:var(--ink); }
.reasons li p{ margin:0; }
.reasons li .attr{ font-size:.82rem; color:var(--muted); margin-block-start:.4rem; }


/* ---- the fork ----------------------------------------------------------
   The most important element on the site. Three doors, each stating its own
   consequence, because the choice a reader makes here determines whether the
   next hour is spent preventing a loss or chasing one. */
.fork{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); margin-block:0 2.5rem; }
.door{
  display:flex; flex-direction:column; gap:.55rem; padding:1.5rem 1.5rem 1.35rem;
  text-decoration:none; color:inherit; border-radius:var(--radius);
  border-block-start:4px solid color-mix(in oklab,var(--slate) 55%, transparent);
}
.door .k{ font-size:1.22rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.door .v{ color:var(--muted); font-size:.95rem; }
.door .go{ margin-block-start:auto; padding-block-start:.6rem; font-weight:700; color:var(--red); font-size:.95rem; }
.door.urgent{ border-block-start-color:var(--red); }
.door.urgent .k{ color:var(--red); }
@media (hover:hover){ .door:hover .go{ text-decoration:underline; } }

.fork-hero{ padding-block:3rem 1.75rem; }
.fork-hero h1{ font-size:clamp(2rem,5vw,3.25rem); }

/* ---- the damage-limitation clock --------------------------------------
   A timeline, read top to bottom, with WHO can act on each row — because
   several of the mechanisms that actually work are available only to a police
   officer, and not knowing that is how people waste the window. */
ol.clock{ list-style:none; margin:1.25rem 0 0; padding:0; counter-reset:c; }
ol.clock li{
  display:grid; gap:.15rem .9rem; padding:1rem 0 1rem 1.25rem;
  border-block-end:1px solid var(--rule);
  border-inline-start:3px solid color-mix(in oklab,var(--slate) 35%, transparent);
}
@media (min-width:48rem){
  ol.clock li{ grid-template-columns:9.5rem minmax(0,1fr) 15rem; align-items:start; }
}
ol.clock li:last-child{ border-block-end:0; }
ol.clock li.hot{ border-inline-start-color:var(--red); background:color-mix(in oklab,var(--red) 4%, transparent); }
ol.clock li.cold{ border-inline-start-color:var(--rule); }
ol.clock .when{
  font-weight:800; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding-block-start:.2rem;
}
ol.clock li.hot .when{ color:var(--red); }
ol.clock .what{ font-size:.98rem; }
ol.clock .who{ color:var(--muted); font-size:.86rem; }
@media (min-width:48rem){ ol.clock .who{ border-inline-start:1px solid var(--rule); padding-inline-start:.9rem; } }

/* ---- the proof grid ---------------------------------------------------- */
/* Explicit, not auto-fit. Four cards of real prose: auto-fit resolved to three
   across at desktop and stranded the fourth on its own row. Two columns is a
   fact about the content, so it is stated rather than derived from a min-width
   guess that changes meaning at every container size. */
.proof{ display:grid; gap:1rem; grid-template-columns:1fr; margin-block:1.25rem 2rem; }
@media (min-width:46rem){ .proof{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.proof .card{ padding:1.35rem 1.4rem; }
.proof .n{
  display:block; font-size:2.6rem; font-weight:800; line-height:1;
  letter-spacing:-.045em; color:var(--red); margin-block-end:.35rem;
}
.proof h3{ margin:.1rem 0 .5rem; font-size:.95rem; font-weight:700; line-height:1.35; }
.proof p{ margin:0 0 .5rem; color:var(--muted); font-size:.9rem; }
.proof p:last-child{ margin-block-end:0; }

/* ---- download bar ---- */
.dlbar{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-block:1.25rem; }
.dlbar .note{ flex:1 1 16rem; }
.btnlink.small{ padding:.55rem 1rem; font-size:.92rem; min-block-size:2.5rem; }
button.copy{ font:inherit; font-weight:700; cursor:pointer; color:var(--ink); background:var(--panel);
  border:1px solid var(--rule); border-radius:10px; padding:.55rem 1rem; min-block-size:2.5rem; }
button.copy:hover{ filter:brightness(.98); }
button.copy[data-done="1"]{ border-color:var(--green); color:var(--green); }

/* ---- guided intake ---- */
form.intake, form.intake fieldset{ scroll-margin-block-start:5.5rem; }
form.intake fieldset{ border:0; border-block-start:1px solid var(--rule); padding:0; margin:2rem 0 0; }
form.intake fieldset:first-of-type{ border-block-start:0; margin-block-start:0; }
form.intake legend{ font-weight:800; font-size:1.05rem; letter-spacing:-.012em; padding:0 .6rem 0 0;
  margin-block-start:1.4rem; }
form.intake .hint{ display:block; color:var(--muted); font-size:.88rem; margin-block:.3rem .55rem;
  max-inline-size:44rem; }
form.intake .hint code{ font-family:ui-monospace,monospace; font-size:.85em;
  background:var(--panel); padding:.05em .3em; border-radius:4px; }
.fld{ margin-block:1.15rem; }
.fld > label, .fld > .label{ display:block; font-weight:650; margin-block-end:.15rem; }
.fld textarea, .fld input[type=text], .fld select{
  inline-size:100%; box-sizing:border-box; padding:.7rem .85rem; border-radius:10px;
  border:1px solid var(--rule); background:#fff; color:inherit; font:inherit; font-size:.98rem;
}
.fld textarea{ min-block-size:5rem; resize:vertical; }
#story{ min-block-size:11rem; }
.fld .mono-in{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88rem; }
.fld textarea:user-invalid{ border-color:var(--red); background:color-mix(in oklab,var(--red) 5%, #fff); }
.fld textarea:user-invalid ~ .err{ display:block; }
.fldrow{ display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
label.opt{ display:flex; gap:.7rem; align-items:flex-start; padding:.75rem .9rem; margin-block:.5rem;
  border:1px solid var(--rule); border-radius:10px; background:#fff; cursor:pointer; }
label.opt:hover{ background:var(--panel); }
label.opt input{ margin-block-start:.35rem; inline-size:1.15rem; block-size:1.15rem; accent-color:var(--red); flex:none; }
label.opt span{ display:block; }
label.opt strong{ display:block; font-weight:650; }
label.opt em{ display:block; font-style:normal; color:var(--muted); font-size:.88rem; margin-block-start:.15rem; }
label.opt:has(input:checked){ border-color:var(--red); background:color-mix(in oklab,var(--red) 5%, #fff); }
label.opt.check{ padding:.55rem .9rem; align-items:center; }
label.opt.check input{ margin-block-start:0; }
.preview{ scroll-margin-block-start:5.5rem; margin-block-start:2rem; padding:1.25rem; border:1px solid var(--rule); border-radius:12px;
  background:var(--panel); }
.preview h3{ margin:0 0 .3rem; font-size:1.05rem; }
.preview textarea{ inline-size:100%; box-sizing:border-box; border:1px solid var(--rule);
  border-radius:10px; padding:.8rem .9rem; background:#fff; color:inherit;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86rem; line-height:1.6;
  resize:vertical; }

@media print{
  @page{ size:letter; margin:14mm; }
  body{ background:#fff; background-image:none; font-size:10.5pt; }
  header.top,.noprint{ display:none !important; }
  .glass{ backdrop-filter:none; background:#fff; border:1px solid var(--rule); box-shadow:none; }
  .wrap{ max-inline-size:none; padding:0; }
  .step,.finding,.verdict,.guide-item,.checklist li,.reasons li{ break-inside:avoid; }
  .printbar,.btnlink,.crumb{ display:none !important; }
  .cardgrid{ display:block; }
  .guide-head{ margin-block:0 1rem; }
  h2.sec{ break-after:avoid; }
  a{ color:var(--ink); text-decoration:none; }
  .src a::after{ content:" (" attr(href) ")"; font-size:.85em; word-break:break-all; }
}