/* ═══ CASE · OPERATION SENTINEL ═══════════════════════════════════════════
   Page physics: a screen, then a flight record. The film band is dark in both
   themes because it frames moving pictures; everything below it follows the
   site theme. Colour carries state only: --down is the failed run and the
   phantom, --ok the run that flew the box, --sig the path a mission takes.  */

/* Field Record migration: the page's own names mapped onto field.css tokens. */
.case--sentinel{--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--page:var(--paper);
  --raise:var(--sheet);--r-row:var(--hair);--r-sec:var(--hair);--sig:var(--signal)}
.band h1.statement{font-size:clamp(56px,10vw,168px);line-height:.86}
.case__body h2{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.92}

/* ── the band ───────────────────────────────────────────────────────────── */
.band{
  --page:#000000; --raise:#15191C; --fg:#FFFFFF; --fg-2:#A9B0B5; --fg-3:#8E959A;
  --r-row:#262B2F; --r-sec:#3D454A; --sig:#7FB2E8; --ok:#63C39F; --down:#E8906A;
  color-scheme:only dark; background:var(--page); color:var(--fg);
  padding-block:clamp(26px,4.5vw,60px) clamp(34px,6vw,84px)}
.band a{color:var(--fg)}
.crumb{font-size:14px;color:var(--fg-2);margin:0 0 clamp(22px,4vw,46px)}
.crumb a{color:var(--fg-2);text-underline-offset:3px}
.crumb a:hover,.crumb a:focus-visible{color:var(--fg)}
.band h1{font-size:clamp(2.7rem,8.4vw,6.4rem);line-height:.92;letter-spacing:-.045em;max-width:none}
.band__lede{font-size:clamp(1.12rem,2vw,1.42rem);line-height:1.38;color:var(--fg-2);
  max-width:40ch;margin:clamp(16px,2.4vw,26px) 0 0}
.stage{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:22px 0 0;
  font-size:14px;color:var(--fg-2)}
.stage__chip{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--page);background:var(--fg);padding:5px 9px}

/* ── the film ───────────────────────────────────────────────────────────── */
.film{margin-top:clamp(26px,4vw,48px)}
.film figure{margin:0}
.film .frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.film video,.film img.poster{display:block;width:100%;height:100%;object-fit:cover}
.film img.poster,.film .play{display:none}
html[data-js="on"] .film img.poster{display:block;position:absolute;inset:0}
html[data-js="on"] .film .play{display:flex;position:absolute;inset:0;align-items:flex-end;
  justify-content:flex-start;padding:0 0 clamp(14px,2.4vw,26px) clamp(14px,2.4vw,26px);
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));border:0;cursor:pointer;
  font:600 15px/1 var(--disp);color:#fff}
.film .play span{display:inline-flex;align-items:center;gap:12px;padding:13px 18px 13px 14px;
  background:rgba(10,12,14,.72);border:1px solid rgba(255,255,255,.5);
  transition:background var(--t-fast,.18s) ease,border-color var(--t-fast,.18s) ease}
.film .play span::before{content:"";width:0;height:0;border-style:solid;
  border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.film .play:hover span{background:rgba(255,255,255,.14);border-color:#fff}
.film .play:focus-visible{outline:none}
.film .play:focus-visible span{outline:2px solid #fff;outline-offset:3px}
.film .play .sm{display:none}
@media (max-width:620px){.film .play .lg{display:none}.film .play .sm{display:inline-flex}
  .film .play span{padding:10px 14px 10px 12px;font-size:14px}}
html[data-js="on"] .film.playing .play,html[data-js="on"] .film.playing img.poster{display:none}
.film figcaption{font-size:14px;line-height:1.5;color:var(--fg-2);max-width:72ch;margin-top:14px}
.shows{margin-top:14px;font-size:14px;color:var(--fg-2);max-width:72ch}
.shows summary{cursor:pointer;color:var(--fg);font-weight:600;text-underline-offset:3px}
.shows summary:hover,.shows summary:focus-visible{text-decoration:underline}
.shows ol{margin:12px 0 0;padding:0;list-style:none}
.shows li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:0 12px;padding:7px 0;
  border-top:1px solid var(--r-row)}
.shows li b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--fg-3);padding-top:2px}

/* ── body rhythm: big statements, then the evidence at readable scale ───── */
.case__body>section{padding-top:clamp(52px,8vw,112px)}
.case__body>section+section{border-top:0}
.case__body h2{font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.06;letter-spacing:-.03em;
  max-width:24ch;margin-bottom:clamp(16px,2.4vw,26px)}

.parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:3px solid var(--fg)}
.part{padding:18px 20px 4px 0}
.part+.part{padding-left:20px;border-left:1px solid var(--r-row)}
.part h3{font-size:18px}
.part p{font-size:15.5px;line-height:1.5;color:var(--fg-2)}
.upstream{margin-top:22px;font-size:15px;color:var(--fg-2);max-width:64ch}
@media (max-width:900px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .part:nth-child(3){padding-left:0;border-left:0}
  .part:nth-child(n+3){border-top:1px solid var(--r-row)}}
@media (max-width:560px){.parts{grid-template-columns:minmax(0,1fr)}
  .part,.part+.part{padding-left:0;border-left:0}
  .part+.part{border-top:1px solid var(--r-row)}}

/* ── the Lesnar Signal, as this mission's path ──────────────────────────
   One continuous rule in --sig. It breaks once, at the human gate, because a
   mission does not proceed until a person dispatches it; Prove is the only
   filled node because it is the only state that leaves a permanent record. */
.signal__path{list-style:none;margin:0;padding:0;max-width:760px;position:relative}
.signal__path li{position:relative;display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:4px 22px;padding:0 0 22px 34px}
.signal__path li::before{content:"";position:absolute;left:7px;top:8px;bottom:-8px;width:2px;
  background:var(--sig)}
.signal__path li:last-child::before{display:none}
.signal__path li::after{content:"";position:absolute;left:1px;top:3px;width:10px;height:10px;
  border:2px solid var(--sig);background:var(--page)}
.signal__path li[data-state="idea"]::after{border-style:dashed}
.signal__path li[data-state="review"]::before{top:22px}
.signal__path li[data-state="protect"]::before{bottom:6px}
.signal__path li[data-state="review"]::after{width:14px;height:14px;left:-1px;top:1px;
  border-color:var(--fg);box-shadow:0 0 0 4px var(--page)}
.signal__path li[data-state="prove"]::after{background:var(--sig)}
.signal__path b{font-weight:700;font-size:17px;letter-spacing:-.01em}
.signal__path span{color:var(--fg-2);font-size:16px;line-height:1.45}
@media (max-width:560px){.signal__path li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ── the ledger ─────────────────────────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.ledger th,.ledger td{text-align:left;padding:13px 12px 13px 0;border-bottom:1px solid var(--r-row);
  vertical-align:middle}
.ledger thead th{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);border-bottom:3px solid var(--fg)}
.ledger tbody th a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
  font-weight:700;font-size:18px;text-underline-offset:3px}
.ledger code{font-family:var(--mono);font-size:13px;color:var(--fg)}
.ledger td:nth-child(3){color:var(--fg-2)}
.ledger tr.is-bad td:nth-child(4){color:var(--down);font-weight:600}
.ledger tr.is-ok td:nth-child(4){color:var(--ok);font-weight:600}
.ledger td:last-child{width:34%}
.ledger__bar{display:inline-block;vertical-align:middle;height:10px;
  width:calc(var(--d) * (100% - 4.2rem));min-width:4px;background:var(--ok)}
.ledger tr.is-bad .ledger__bar{background:var(--down)}
.ledger__s{display:inline-block;width:4rem;margin-left:.2rem;text-align:right;
  font-family:var(--mono);font-size:13px;color:var(--fg-2)}
@media (max-width:700px){
  .ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ledger,.ledger tbody{display:block}
  .ledger tr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:2px 12px;
    padding:10px 0;border-bottom:1px solid var(--r-row)}
  .ledger th,.ledger td{display:block;padding:0;border:0}
  .ledger tbody th{grid-row:1 / span 3}
  .ledger td:nth-child(2){grid-column:2;font-size:13px;color:var(--fg-3)}
  .ledger td:nth-child(3){grid-column:2;grid-row:2}
  .ledger td:nth-child(4){grid-column:3;grid-row:1;text-align:right}
  .ledger td:last-child{grid-column:2 / span 2;grid-row:3;width:auto}
}

/* ── the phantom wall ───────────────────────────────────────────────────── */
.phantom__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);
  align-items:start}
.phantom__text p{color:var(--fg-2);max-width:46ch}
.phantom__text b{color:var(--fg)}
.phantom figure{margin:0}
.phantom__plan{background:var(--raise);padding:clamp(10px,1.6vw,18px)}
.phantom__speed{margin-top:clamp(28px,4vw,44px)!important}
.phantom figcaption,.diag figcaption{font-size:13.5px;line-height:1.55;color:var(--fg-2);margin-top:12px;max-width:72ch}
@media (max-width:900px){.phantom__grid{grid-template-columns:minmax(0,1fr)}}
.key{display:inline-block;width:18px;height:3px;vertical-align:middle;margin:0 6px 0 0}
.key~.key{margin-left:12px}
.key--bad{background:var(--down)}
.key--ok{background:var(--ok)}
.key--ghost{height:9px;border:1.5px dashed var(--down)}

svg.plan,svg.speed,svg.det{display:block;width:100%;height:auto}
.plan__world path,.plan__world circle{fill:var(--r-sec);opacity:.55}
.plan__wall{fill:var(--fg)}
.plan__phantom{fill:var(--down);fill-opacity:.08;stroke:var(--down);stroke-width:2;stroke-dasharray:7 6}
.plan__mission{fill:none;stroke:var(--fg-3);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.plan__scan{fill:var(--down);fill-opacity:.13;stroke:var(--down);stroke-width:1.4;stroke-linejoin:round}
.plan__ok,.plan__bad{fill:none;stroke-width:3.4;stroke-linejoin:round;stroke-linecap:round}
.plan__ok{stroke:var(--ok)}
.plan__bad{stroke:var(--down)}
.plan__stop{fill:var(--down);stroke:var(--raise);stroke-width:3}
.plan__lbl{font:500 17px var(--disp);fill:var(--fg-2)}
.plan__lbl.is-bad{fill:var(--down);font-weight:600}
.plan__lbl.is-wall{fill:var(--fg);font-weight:600}
.plan__lbl.is-scan{fill:var(--fg-2);font-style:italic}

.speed__axis{stroke:var(--r-sec);stroke-width:1}
.speed__hold{fill:var(--down);fill-opacity:.09}
.speed__ok,.speed__bad{fill:none;stroke-width:2.2;stroke-linejoin:round}
.speed__ok{stroke:var(--ok)}
.speed__bad{stroke:var(--down)}
.speed__tick{font:400 11px var(--mono);fill:var(--fg-3)}
.speed__note{font:600 13px var(--disp);fill:var(--down)}

.det__body{fill:var(--fg-3);opacity:.5}
.det__foot{fill:var(--fg)}
.det__none{fill:var(--fg-3)}
.det__day{font:400 11px var(--mono);fill:var(--fg-3)}

/* ── the boundary ───────────────────────────────────────────────────────── */
.limits{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px)}
.limits__gps p{color:var(--fg-2);max-width:52ch}
.params{list-style:none;margin:18px 0 0;padding:0;border-top:3px solid var(--fg);max-width:520px}
.params li{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:12px;padding:11px 0;
  border-bottom:1px solid var(--r-row);font-size:15px;color:var(--fg-2)}
.params code{font-family:var(--mono);font-size:13px;color:var(--fg)}
.limits__list{background:var(--raise);padding:clamp(18px,2.4vw,28px);align-self:start}
.limits__list h3{font-size:18px;margin-bottom:10px}
.limits__list ul{margin:0;padding-left:1.1em}
.limits__list li{color:var(--fg-2);font-size:15.5px;line-height:1.5;margin:0 0 8px}
@media (max-width:900px){.limits{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.params li{grid-template-columns:minmax(0,1fr);gap:2px}}

/* ── credits and the next step ──────────────────────────────────────────── */
.credits p{font-size:14px;line-height:1.6;color:var(--fg-2);max-width:78ch}
.credits code{font-family:var(--mono);font-size:12.5px}
.next{padding-bottom:clamp(20px,3vw,40px)}
.next h2{max-width:20ch}
.next p{color:var(--fg-2)}
.next .back{display:inline-block;margin:20px 0 0 22px;font-size:16px;color:var(--fg-2);
  text-underline-offset:3px}

/* The flight film: a portrait recording beside its timed log. */
.film--flight{display:grid;gap:22px;align-items:start}
.film--flight .frame{aspect-ratio:9/16;max-height:min(82vh,760px);width:auto;margin-inline:auto}
.film--flight figure{display:flex;justify-content:center}
.film__k{margin:0 0 10px;font-weight:700;font-size:clamp(19px,1.8vw,24px);line-height:1.25}
.film__cap{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg-2);max-width:56ch}
.film__events{list-style:none;margin:18px 0 14px;padding:0;border-top:1px solid var(--hair, rgba(127,127,127,.35))}
.film__events li{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:0 12px;padding:10px 0;border-bottom:1px solid var(--hair, rgba(127,127,127,.35));font-size:15px;line-height:1.4}
.film__events b{font:500 13px var(--mono);color:var(--fg-3);padding-top:1px}
@media (min-width:900px){.film--flight{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:48px}.film--flight figure{justify-content:flex-start}}
@media (max-width:899px){.film--flight .frame{max-height:72vh}}
.film__note{margin:0;font:500 12.5px/1.5 var(--mono);color:var(--fg-2)}