/* ═══════════════════════════════════════════════════════════════
   Zone Two Security: "THE DISPATCH LOG"
   The page IS the record of the 30 minutes after an alarm trips.
   No top navbar: a left timecode RAIL is the log's spine.
   The opener is a camera frame, not a hero stack.
   Sections are LOG ENTRIES, stamped in a left gutter.
   Palette: navy, royal blue, gold.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:      #0A1430;
  --ink-2:    #101C42;
  --ink-3:    #17244F;
  --blue:     #2C4C9B;
  --blue-lt:  #5D7FD1;
  --gold:     #F2C230;
  --gold-dk:  #A97F08;
  --paper:    #F4F1EA;
  --paper-2:  #E7E2D6;
  --alert:    #C8442E;
  --alert-lt: #F0836C;

  --txt-on-ink:   #EEF1F8;
  --txt-on-ink-2: #A8B3CE;
  --txt-on-paper: #14203F;
  --txt-on-paper-2:#4B5876;

  --f-disp:'Libre Franklin','Helvetica Neue',Helvetica,sans-serif;
  --f-mono:'Azeret Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r: 10px;
  --railw: 104px;          /* the spine */
  --gutter: 132px;         /* the timecode gutter inside each entry */

  /* margin tiers: rail (frame) < frame copy (stage) < entry body (column) */
  --p-rail: 18px;
  --p-hero: clamp(26px, 4.4vw, 72px);
  --p-body: clamp(30px, 5.4vw, 96px);
  --w-body: 1180px;

  --sec-y: clamp(76px, 9vw, 152px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--txt-on-ink);
  font:400 17px/1.62 var(--f-disp);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-left:var(--railw);              /* the rail owns the left edge */
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--f-mono);font-variant-numeric:lining-nums tabular-nums}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════ BUTTON — one lane, one CTA ═══════════ */
.btn{
  --pad-y:16px; --pad-x:30px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--pad-y) var(--pad-x);min-height:50px;
  border-radius:var(--r);text-decoration:none;cursor:pointer;
  font:600 15px/1 var(--f-disp);letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn--lg{--pad-y:18px;--pad-x:36px;font-size:16.5px;min-height:58px}
.btn--full{width:100%}
.btn--gold{
  background:var(--gold);color:#231A00;
  border:1px solid color-mix(in oklab,#fff 34%,var(--gold));
  box-shadow:0 1px 2px rgb(0 0 0/.3);
}
.btn--gold:hover{background:color-mix(in oklab,#000 7%,var(--gold));box-shadow:0 6px 20px rgb(242 194 48/.3)}
.btn--gold:active{transform:translateY(1px);box-shadow:0 1px 1px rgb(0 0 0/.3)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ═══════════ THE RAIL ═══════════ */
.rail{
  position:fixed;inset:0 auto 0 0;z-index:70;width:var(--railw);
  display:flex;flex-direction:column;align-items:center;
  padding:20px var(--p-rail);
  background:color-mix(in oklab,#000 30%,var(--ink));
  border-right:1px solid var(--ink-3);
}
.rail__mark{flex:none;display:block}
/* the wordmark, set as type: a Z and a gold 2, the second zone */
.rail__mark{text-decoration:none}
.mark{width:48px;height:48px;border-radius:10px;
  border:1px solid color-mix(in oklab,var(--gold) 40%,transparent);
  background:color-mix(in oklab,#000 20%,var(--ink));
  font:900 21px/1 var(--f-disp);letter-spacing:-.06em;color:var(--txt-on-ink);
  box-shadow:0 2px 10px rgb(0 0 0/.45);transition:border-color .16s}
.mark{display:flex;align-items:center;justify-content:center}
.mark b{font-weight:900;color:var(--gold);margin-left:1px}
.rail__mark:hover .mark{border-color:var(--gold)}
.rail__mark:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:12px}
.rail__name{
  flex:1;display:grid;place-items:center;margin:26px 0;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:12.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:color-mix(in oklab,var(--txt-on-ink-2) 82%,transparent);white-space:nowrap;
}
.rail__mid{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:22px}
.rail__cam{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rail__now{font-size:11px;font-weight:500;color:var(--txt-on-ink-2);letter-spacing:-.02em}
.rail__call{
  position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--gold);color:#231A00;text-decoration:none;
  border:1px solid color-mix(in oklab,#fff 34%,var(--gold));
  box-shadow:0 2px 10px rgb(0 0 0/.4);
  transition:transform .14s ease, box-shadow .14s ease}
.rail__call:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgb(242 194 48/.34)}
.rail__call:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rail__call .ic{width:21px;height:21px;stroke-width:1.9}
.rail__call span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ═══════════ 02:14:07 — THE FRAME ═══════════ */
.frame{
  --striph:56px;
  position:relative;height:100dvh;min-height:560px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#05070f;
}
.frame__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 44%;transform:scaleX(-1)}
.frame__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(5,7,15,.95) 0%, rgba(5,7,15,.74) 26%, rgba(5,7,15,.10) 58%, rgba(5,7,15,.44) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(5,7,15,.58) 100%);
}

/* HUD — the frame's own furniture */
.hud{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in oklab,var(--txt-on-ink) 88%,transparent);
  text-shadow:0 1px 6px rgb(0 0 0/.9)}
.hud--tl{top:26px;left:var(--p-hero)}
.hud--tr{top:26px;right:var(--p-hero);letter-spacing:.04em;text-transform:none}
.hud--tr b{font-weight:600;color:var(--gold)}
.hud__rec{width:9px;height:9px;border-radius:50%;background:var(--alert);
  box-shadow:0 0 10px var(--alert);animation:rec 1.5s steps(1) infinite}
@keyframes rec{50%{opacity:.2}}
/* the activation, carried in the HUD where the reticle can't go (phones) */
.hud__zone{display:none;align-items:center;margin-left:10px;padding:4px 8px;border-radius:4px;
  background:var(--gold);color:#231A00;font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s;text-shadow:none}
.hud__zone.is-hit{background:var(--alert);color:#fff}

/* the reticle — JS pins it to the door inside the photograph */
.ret{position:absolute;z-index:3;opacity:0;transition:opacity .5s ease}
.ret.is-on{opacity:1}
.ret i{position:absolute;width:20px;height:20px;border:2px solid var(--gold);
  filter:drop-shadow(0 0 6px rgb(0 0 0/.85))}
.ret i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.ret i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.ret i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.ret i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.ret__tag{position:absolute;top:-14px;left:0;padding:4px 8px;border-radius:4px;
  background:var(--gold);color:#231A00;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .3s}
.ret.is-hit i{border-color:var(--alert-lt)}
.ret.is-hit .ret__tag{background:var(--alert);color:#fff}

/* the copy lives INSIDE the frame, bottom-left — not a centered stack */
.frame__copy{
  position:relative;z-index:2;max-width:1180px;width:100%;
  padding:0 var(--p-hero) calc(var(--striph) + clamp(38px,4vw,64px));
}
/* the copy column ends where the lit door starts — the frame dictates the measure */
@media (min-width:861px){
  .frame__copy{max-width:min(1180px, calc(var(--door-left, 1180px) - 56px))}
}
.h1{
  font-weight:900;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(38px,5.2vw,80px);max-width:15ch;text-wrap:balance;
  text-shadow:0 4px 40px rgb(5 7 15/.75);
}
.lede{
  margin-top:24px;max-width:56ch;
  font-size:clamp(16.5px,1.22vw,19px);line-height:1.56;
  color:#D3DAEA;text-wrap:pretty;text-shadow:0 2px 18px rgb(5 7 15/.95);
}
.frame__copy .cta{margin-top:32px}

/* the fold strip — the camera's own log */
.strip{
  position:absolute;left:0;right:0;bottom:0;z-index:3;height:var(--striph);
  display:flex;align-items:center;overflow:hidden;
  padding-left:var(--p-hero);
  background:color-mix(in oklab,#000 52%,var(--ink));
  border-top:1px solid color-mix(in oklab,var(--gold) 26%,transparent);
}
.strip__label{flex:none;z-index:2;display:inline-flex;align-items:center;gap:9px;height:100%;
  padding:0 20px;background:var(--gold);color:#231A00;
  font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.strip__pulse{width:7px;height:7px;border-radius:50%;background:#231A00;animation:blink 1.3s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.strip__vp{flex:1;overflow:hidden;
  mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent)}
.strip__track{display:flex;width:max-content;animation:slide 46s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip__i{display:inline-flex;align-items:center;gap:12px;padding:0 24px;white-space:nowrap;
  font:400 11.8px/1 var(--f-mono);color:var(--txt-on-ink-2);letter-spacing:-.005em}
.strip__i b{color:var(--txt-on-ink);font-weight:500}
.strip__i.is-hit b{color:var(--gold)}
.strip__i::after{content:"";width:4px;height:4px;border-radius:50%;
  background:color-mix(in oklab,var(--txt-on-ink) 30%,transparent);margin-left:14px}

/* ═══════════ LOG ENTRIES ═══════════ */
.entry{position:relative;padding-block:var(--sec-y)}
.entry--dark{background:var(--ink);color:var(--txt-on-ink)}
.entry--paper{background:var(--paper);color:var(--txt-on-paper)}
.entry--dark + .entry--dark{padding-top:0}

.entry__in{
  max-width:calc(var(--w-body) + var(--gutter));margin-inline:auto;
  padding-inline:var(--p-body);
  display:grid;grid-template-columns:var(--gutter) minmax(0,1fr);
}
/* the timecode gutter — this replaces the eyebrow */
.entry__t{
  position:sticky;top:34px;align-self:start;
  display:flex;flex-direction:column;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--gold);padding-top:9px;
}
.entry--paper .entry__t{color:var(--gold-dk)}
.entry__t > i{display:block;width:1px;flex:1;min-height:56px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--gold) 55%,transparent),transparent)}
.entry--paper .entry__t > i{background:linear-gradient(180deg,color-mix(in oklab,var(--gold-dk) 50%,transparent),transparent)}

.h2{font-weight:900;letter-spacing:-.025em;line-height:1.03;
  font-size:clamp(30px,3.4vw,50px);text-wrap:balance;max-width:19ch}
.h2--sm{font-size:clamp(27px,2.7vw,39px)}
.prose{margin-top:20px;max-width:64ch;color:var(--txt-on-ink-2);
  font-size:17.5px;line-height:1.62;text-wrap:pretty}
.entry--paper .prose{color:var(--txt-on-paper-2)}
.prose em{font-style:italic;color:var(--txt-on-ink)}

/* ═══════════ THE INTERVAL (simulator) ═══════════ */
.sim{margin-top:clamp(38px,4vw,60px);display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;align-items:stretch}
.sim__panel{--r-card:18px;--gap-card:26px;
  background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:var(--r-card);padding:var(--gap-card)}
.ctl+.ctl{margin-top:28px;padding-top:28px;border-top:1px solid var(--ink-3)}
.ctl__lab{display:block;font:600 11px/1 var(--f-mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--txt-on-ink-2)}
.ctl__val{float:right;font-size:19px;font-weight:600;color:var(--gold);margin-top:-4px}

.dial{position:relative;margin-top:22px;height:28px}
.dial__band{position:absolute;top:11px;height:6px;border-radius:3px;
  left:29.17%;width:41.67%;
  background:repeating-linear-gradient(45deg,
    color-mix(in oklab,var(--alert) 42%,transparent) 0 5px, transparent 5px 10px);
  opacity:0;transition:opacity .28s ease}
.sim.is-com .dial__band{opacity:.5}
.sim.is-blackout .dial__band{opacity:1}
.dial input[type=range]{position:relative;width:100%;height:28px;margin:0;background:none;
  -webkit-appearance:none;appearance:none;cursor:ew-resize}
.dial input[type=range]::-webkit-slider-runnable-track{height:6px;margin-top:11px;border-radius:3px;
  background:color-mix(in oklab,#fff 12%,transparent)}
.dial input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:color-mix(in oklab,#fff 12%,transparent)}
.dial input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  margin-top:-8px;background:var(--gold);border:2px solid var(--ink-2);box-shadow:0 2px 8px rgb(0 0 0/.45)}
.dial input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--gold);border:2px solid var(--ink-2);box-shadow:0 2px 8px rgb(0 0 0/.45)}
.dial input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.dial__ticks{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;
  color:color-mix(in oklab,var(--txt-on-ink-2) 70%,transparent);letter-spacing:.1em}

.seg{display:flex;gap:6px;margin-top:16px;padding:6px;border-radius:14px;
  background:color-mix(in oklab,#000 26%,transparent)}
.seg__b{flex:1;padding:12px 10px;border:0;border-radius:8px;cursor:pointer;background:transparent;
  color:var(--txt-on-ink-2);font:600 14px/1 var(--f-disp);transition:background .15s,color .15s}
.seg__b:hover{color:var(--txt-on-ink)}
.seg__b.is-on{background:var(--blue);color:#fff}
.seg__b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.opts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.opt{display:flex;gap:13px;align-items:flex-start;padding:11px 10px;border-radius:10px;
  cursor:pointer;transition:background .15s}
.opt:hover{background:color-mix(in oklab,#fff 4%,transparent)}
.opt input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.opt__box{flex:none;width:19px;height:19px;margin-top:2px;border-radius:5px;
  border:1.6px solid color-mix(in oklab,#fff 30%,transparent);
  background:color-mix(in oklab,#000 22%,transparent);display:grid;place-items:center;
  transition:background .15s,border-color .15s}
.opt__box::after{content:"";width:9px;height:5px;border-left:2px solid #231A00;
  border-bottom:2px solid #231A00;transform:rotate(-45deg) scale(0);transition:transform .16s;margin-top:-2px}
.opt input:checked + .opt__box{background:var(--gold);border-color:var(--gold)}
.opt input:checked + .opt__box::after{transform:rotate(-45deg) scale(1)}
.opt input:focus-visible + .opt__box{outline:2px solid var(--gold);outline-offset:2px}
.opt__t{font-size:14.5px;font-weight:500;line-height:1.4}
.opt__t em{display:block;font:400 10.8px/1.45 var(--f-mono);font-style:normal;
  color:color-mix(in oklab,var(--txt-on-ink-2) 82%,transparent);margin-top:3px;letter-spacing:.04em}

.sim__out{display:grid;grid-template-rows:auto 1fr;gap:20px}
.verdict{--r-card:18px;border-radius:var(--r-card);padding:28px;border:1px solid;
  transition:background .3s,border-color .3s}
.verdict[data-state=go]{background:linear-gradient(160deg,color-mix(in oklab,var(--gold) 15%,var(--ink-2)),var(--ink-2));
  border-color:color-mix(in oklab,var(--gold) 46%,transparent)}
.verdict[data-state=no]{background:linear-gradient(160deg,color-mix(in oklab,var(--alert) 20%,var(--ink-2)),var(--ink-2));
  border-color:color-mix(in oklab,var(--alert) 55%,transparent)}
.verdict[data-state=maybe]{background:var(--ink-2);border-color:var(--ink-3)}
.verdict__top{display:flex;justify-content:space-between;align-items:center}
.verdict__badge{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px}
.verdict[data-state=go] .verdict__badge{background:var(--gold);color:#231A00}
.verdict[data-state=no] .verdict__badge{background:var(--alert);color:#fff}
.verdict[data-state=maybe] .verdict__badge{background:color-mix(in oklab,#fff 14%,transparent);color:var(--txt-on-ink)}
.verdict__clock{font-size:15px;color:var(--txt-on-ink-2);letter-spacing:.02em}
.verdict__head{margin-top:20px;font-size:clamp(23px,2.1vw,31px);font-weight:800;
  letter-spacing:-.018em;line-height:1.14;text-wrap:balance}
.verdict__sub{margin-top:11px;color:var(--txt-on-ink-2);font-size:15.5px;line-height:1.55;max-width:44ch;text-wrap:pretty}
.quote{margin:22px 0 0;padding:16px 20px;border-left:3px solid var(--alert);
  background:color-mix(in oklab,#000 26%,transparent);border-radius:0 10px 10px 0}
.quote p{font-size:14.5px;line-height:1.55;font-style:italic}
.quote cite{display:block;margin-top:9px;font:400 11px/1 var(--f-mono);font-style:normal;
  letter-spacing:.08em;color:var(--txt-on-ink-2);text-transform:uppercase}

.log{background:color-mix(in oklab,#000 30%,var(--ink-2));border:1px solid var(--ink-3);
  border-radius:18px;padding:24px 26px}
.log__cap{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-on-ink-2);margin-bottom:14px}
.log__list{list-style:none;margin:0;padding:0;display:grid;gap:9px;align-content:start;min-height:130px}
.log__list li{display:flex;gap:14px;font-size:12.2px;line-height:1.55;letter-spacing:-.005em;
  color:var(--txt-on-ink-2);animation:logIn .3s ease both}
.log__list li b{flex:none;color:var(--gold);font-weight:500}
.log__list li.is-bad b{color:var(--alert-lt)}
.log__list li span{color:var(--txt-on-ink)}
@keyframes logIn{from{opacity:0;transform:translateY(5px)}}

.fineprint{margin-top:32px;max-width:78ch;font-size:13.5px;line-height:1.6;
  color:color-mix(in oklab,var(--txt-on-ink-2) 76%,transparent)}

/* ═══════════ ROUTES ═══════════ */
.routes{list-style:none;margin:clamp(36px,3.6vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.route{--r-card:18px;padding:28px 26px 26px;border-radius:var(--r-card);
  background:var(--ink-2);border:1px solid var(--ink-3);
  display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease}
.route:hover{translate:0 -3px}
.route--own:hover{border-color:color-mix(in oklab,var(--gold) 48%,transparent)}
.route__ic{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;padding:9px;box-sizing:content-box;border-radius:11px;
  background:color-mix(in oklab,var(--gold) 11%,transparent)}
.route--other .route__ic{stroke:var(--blue-lt);background:color-mix(in oklab,var(--blue-lt) 12%,transparent)}
.route h3{margin-top:20px;font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.22;text-wrap:balance}
.route p{margin-top:12px;margin-bottom:24px;font-size:15px;line-height:1.58;color:var(--txt-on-ink-2);text-wrap:pretty}
.route p em{font-style:italic;color:var(--txt-on-ink)}
.route__tag{align-self:flex-start;margin-top:auto;font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 11px;border-radius:6px}
.route--own .route__tag{background:color-mix(in oklab,var(--gold) 15%,transparent);color:var(--gold)}
.route--other .route__tag{background:color-mix(in oklab,#fff 8%,transparent);color:var(--txt-on-ink-2)}

/* ═══════════ THE PAIR — same camera, opposite verdict ═══════════ */
.pair{margin-top:clamp(38px,4vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pane{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--ink-3);background:var(--ink-2)}
.pane img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 46%;transform:scaleX(-1)}
.pane figcaption{padding:20px 22px 22px}
.pane__row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pane__t{font-size:11.5px;font-weight:500;color:var(--txt-on-ink-2);letter-spacing:.02em}
.pane__v{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 10px;border-radius:5px;white-space:nowrap}
.pane__v--go{background:var(--gold);color:#231A00}
.pane__v--no{background:var(--alert);color:#fff}
.pane figcaption p{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--txt-on-ink-2);text-wrap:pretty}

.pull{margin:clamp(36px,3.6vw,54px) 0 0;padding:26px 0 26px 30px;border-left:3px solid var(--alert)}
.pull p{font-size:clamp(18px,1.6vw,23px);line-height:1.44;font-style:italic;
  color:var(--txt-on-ink);max-width:50ch;text-wrap:pretty}
.pull cite{display:block;margin-top:14px;font:400 11px/1 var(--f-mono);font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-on-ink-2)}

.prem{margin-top:clamp(40px,4vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.4vw,60px)}
.prem__col{padding-top:26px;border-top:1px solid var(--ink-3)}
.prem__h{font-size:19px;font-weight:800;letter-spacing:-.012em}
.prem__col p{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--txt-on-ink-2);text-wrap:pretty}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

/* ═══════════ THE TRADE ═══════════ */
.install{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(34px,4vw,72px);align-items:center}
/* no install photo: the copy takes the column and the kit spreads to three */
.install--solo{grid-template-columns:1fr}
.install--solo .kit{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;margin-top:40px}
.install__fig{margin:0}
.install__fig img{border-radius:18px;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 24px 60px -32px rgb(10 20 48/.55)}
.install__fig figcaption{margin-top:14px;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-on-paper-2)}
.entry--paper .h2{color:var(--txt-on-paper)}
.kit{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.kit li{display:flex;gap:14px;align-items:flex-start}
.ic--tile{width:20px;height:20px;stroke:var(--blue);stroke-width:1.8;padding:9px;
  box-sizing:content-box;border-radius:10px;background:color-mix(in oklab,var(--blue) 9%,transparent);
  flex:none;transition:background .16s}
.kit li:hover .ic--tile{background:color-mix(in oklab,var(--blue) 17%,transparent)}
.kit li span{font-size:14.5px;line-height:1.45;color:var(--txt-on-paper-2);text-wrap:balance}
.kit li strong{display:block;font-size:15.5px;font-weight:700;color:var(--txt-on-paper);margin-bottom:3px}

/* ═══════════ WHO ANSWERS ═══════════ */
.owner{display:grid;grid-template-columns:.56fr 1.44fr;gap:clamp(34px,4.2vw,70px);align-items:center}
.owner__mark{display:grid;place-items:center;padding:clamp(24px,2.4vw,38px);border-radius:22px;
  border:1px solid color-mix(in oklab,var(--gold) 34%,transparent);
  background:radial-gradient(120% 100% at 50% 0%,#FFFDF7,var(--paper) 62%,var(--paper-2));
  box-shadow:0 30px 70px -40px rgb(0 0 0/.8)}
.lockup{display:grid;justify-items:start;color:var(--ink);padding:6px 4px}
.lockup__z,.lockup__t{font:900 clamp(46px,5vw,72px)/.86 var(--f-disp);letter-spacing:-.045em}
.lockup__t{color:var(--blue);display:flex;align-items:baseline;gap:.12em}
.lockup__t::after{content:"";width:.16em;height:.16em;border-radius:2px;background:var(--gold)}
.lockup__s{margin-top:16px;padding-top:12px;border-top:1px solid color-mix(in oklab,var(--ink) 16%,transparent);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-on-paper-2)}
.facts{margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:20px 34px}
.facts dt{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-on-ink-2)}
.facts dd{margin:7px 0 0;font-size:16.5px;font-weight:600;color:var(--txt-on-ink)}

/* ═══════════ BOOK ═══════════ */
.book{--r-card:24px;background:#fff;border:1px solid var(--paper-2);border-radius:var(--r-card);
  padding:clamp(30px,3.2vw,56px);box-shadow:0 30px 80px -50px rgb(10 20 48/.45);max-width:920px}
.entry--paper .book .prose{color:var(--txt-on-paper-2)}
.form{margin-top:32px;display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:7px}
.fld span{font:600 11px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--txt-on-paper-2)}
.fld input,.fld select{width:100%;padding:14px 15px;border-radius:calc(var(--r) + 1px);
  border:1.5px solid var(--paper-2);background:var(--paper);
  font:400 16px/1.2 var(--f-disp);color:var(--txt-on-paper)}
.fld input:focus,.fld select:focus{outline:2px solid var(--blue);outline-offset:1px;
  border-color:transparent;background:#fff}
.book .btn--gold{margin-top:8px}
.form__note{margin-top:4px;text-align:center;font-size:14.5px;color:var(--txt-on-paper-2);
  text-wrap:balance;max-width:34ch;margin-inline:auto}
.form__note a{font-weight:700;color:var(--blue);text-underline-offset:3px}
.form.is-sent{opacity:.55;pointer-events:none}

/* ═══════════ END OF LOG ═══════════ */
.foot{background:color-mix(in oklab,#000 26%,var(--ink));border-top:1px solid var(--ink-3);
  padding-block:clamp(58px,5vw,88px) 34px}
.foot__in{max-width:none;margin-inline:auto;padding-inline:calc(var(--p-rail) + 6px)}
.foot__end{display:flex;align-items:center;gap:18px;justify-content:center;
  font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:color-mix(in oklab,var(--txt-on-ink-2) 78%,transparent)}
.foot__end i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ink-3))}
.foot__end i:last-child{background:linear-gradient(90deg,var(--ink-3),transparent)}
.foot__line{margin:26px auto 0;max-width:24ch;text-align:center;
  font-size:clamp(20px,2.1vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.18;
  color:var(--gold);text-wrap:balance}
.foot__cols{display:grid;grid-template-columns:1.2fr .9fr 1.1fr;gap:44px;
  padding-block:clamp(46px,4.4vw,70px)}
.foot__col{display:flex;flex-direction:column;gap:11px}
.foot__cap{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px}
.foot__col a,.foot__col span,.foot__col p{font-size:15px;line-height:1.55;
  color:var(--txt-on-ink-2);text-decoration:none;transition:color .15s}
.foot__col a:hover{color:var(--gold)}
.foot__col--note p{font-size:14px;max-width:36ch}
.foot__base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--ink-3);
  font-size:11.8px;color:color-mix(in oklab,var(--txt-on-ink-2) 70%,transparent)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .sim{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .prem{grid-template-columns:1fr}
  .install{grid-template-columns:1fr}
  .install__fig{max-width:520px}
  .owner{grid-template-columns:1fr}
  .owner__mark{max-width:330px}
  .install--solo .kit{grid-template-columns:1fr 1fr}
  .foot__cols{grid-template-columns:1fr 1fr;gap:34px}
}

/* the rail lies down across the top on small screens */
@media (max-width:860px){
  :root{--railw:0px;--gutter:78px;--p-hero:24px}
  body{padding-left:0;padding-top:66px}
  .rail{inset:0 0 auto 0;width:100%;height:66px;flex-direction:row;align-items:center;
    padding:0 16px;border-right:0;border-bottom:1px solid var(--ink-3)}
  .mark{width:42px;height:42px;font-size:18.5px}
  .rail__name{flex:1;writing-mode:horizontal-tb;transform:none;margin:0 0 0 12px;
    place-items:center start;font-size:11px;letter-spacing:.2em}
  .rail__mid{flex-direction:row;gap:12px;margin:0 14px 0 0}
  .rail__cam{display:none}
  .rail__call{width:46px;height:46px}
  .frame{height:calc(100dvh - 66px)}
  /* On a phone the frame is height-constrained: there is no vertical slack, so the
     reticle would always land on the headline. Pan to keep the lit door on screen and
     let the HUD carry the activation instead of cramming a bracket over the copy. */
  .frame__img{object-position:28% 40%}
  .ret{display:none}
  .hud__zone{display:inline-flex}
  .hud__long{display:none}            /* the two HUD labels collided on a phone */
  .hud{font-size:10px}
  /* a phone shows less of the frame — hold the copy legible */
  .frame__scrim{background:
    linear-gradient(to top, rgba(5,7,15,.96) 0%, rgba(5,7,15,.86) 34%, rgba(5,7,15,.42) 66%, rgba(5,7,15,.5) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(5,7,15,.6) 100%)}
  .h1{font-size:clamp(40px,11.2vw,56px);line-height:.98;max-width:none}
  .kit,.install--solo .kit{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--sec-y:clamp(58px,13vw,86px);--gutter:0px}
  .entry__in{grid-template-columns:1fr;gap:16px}
  .entry__t{position:static;flex-direction:row;align-items:center;padding-top:0}
  .entry__t > i{display:none;flex:1;height:1px;min-height:0;width:auto;
    background:linear-gradient(90deg,color-mix(in oklab,var(--gold) 45%,transparent),transparent)}
  .frame__copy{padding-bottom:calc(var(--striph) + 30px)}
  .lede{font-size:16.5px}
  .frame__copy .cta{width:100%}
  .row{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .strip__label{padding:0 13px;font-size:9.5px}
  .pull{padding-left:20px}
}

/* ═══════════ PARTS: knobs set to this site's tokens ═══════════ */
/* fill-wipe-button: the gold CTA; the navy sheet rises and the label rolls to gold */
.cta{
  --fwb-bg:var(--gold);--fwb-ink:#231A00;--fwb-fill:var(--ink);--fwb-ink-hover:var(--gold);
  --fwb-line:1px solid color-mix(in oklab,#fff 34%,var(--gold));
  --fwb-radius:var(--r);--fwb-pad:18px 36px;--fwb-font:600 16.5px/1.15 var(--f-disp);
  text-transform:none;letter-spacing:.01em;min-height:58px;justify-content:center;
  box-shadow:0 1px 2px rgb(0 0 0/.3);
}
.cta:active{transform:translateY(1px)}
/* form-button-states: the submit, in the CTA's gold */
.book .cta-submit{
  --fbs-bg:var(--gold);--fbs-bg-hover:color-mix(in oklab,#000 8%,var(--gold));
  --fbs-bg-press:color-mix(in oklab,#000 15%,var(--gold));
  --fbs-bg-success:color-mix(in oklab,var(--gold) 45%,#fff);
  --fbs-ink:#231A00;--fbs-spin-color:#231A00;--fbs-radius:var(--r);--fbs-h:58px;
  font:600 16.5px/1 var(--f-disp);margin-top:8px;
}
.book .cta-submit:focus-visible{outline-color:var(--blue)}
.book .form{--fbs-done-ink:var(--txt-on-paper);--fbs-done-mark:var(--gold)}
.book .fbs-done{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
/* scramble-label: the log's timecode stamps decode as they arrive */
.entry__t .sclabel{
  --sl-ink:currentColor;--sl-glyph:color-mix(in oklab,currentColor 45%,transparent);
  --sl-rule:color-mix(in oklab,currentColor 45%,transparent);--sl-tab:currentColor;--sl-tab-w:18px;
  --sl-font:600 12px/14px var(--f-mono);--sl-gap:10px;width:calc(100% - 28px);
}
.foot{--scr-glyph:color-mix(in oklab,var(--gold) 70%,transparent)}
/* stepped-reveal on cards that also lift on hover: keep both clocks */
.step-js .route[data-step-block]{transition:transform var(--step-block-dur) steps(var(--step-steps)) var(--step-delay,0s),translate .18s ease,border-color .18s ease}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .strip__track{transform:none}
  .route:hover{translate:none}
}
@media (max-width:640px){.entry__t .sclabel{width:100%}}
.install--solo .prose{max-width:50ch}