/* ══════════════════════════════════════════════════════════════════
   The night road. Loaded after styles.css on the pages that have moved
   to it. One theme (night), one accent (the centre line), and the road
   itself drawn by road.js once the words are on screen.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --night:    #07090D;
  --night-2:  #0B1222;   /* the sky at the horizon */
  --asphalt:  #12161F;
  --glass:    #0A0F18;
  --text:     #EEF1F5;
  --text-2:   #AEB6C4;   /* 9.6:1 on --night */
  --edge:     rgb(238 241 245 / .16);
  --cl:       #FFC72C;   /* the centre line, the one accent */
  --cl-glow:  rgb(255 199 44 / .55);

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* where the road meets the sky, as a share of the stage */
  --vx: 39%;
  --vy: 58%;
}

::selection{ background:var(--cl); color:var(--night); }

/* ══ header, night ══ */
.nav--night{
  position:absolute; inset:0 0 auto; background:transparent;
  backdrop-filter:none; border-bottom:0;
}
.nav--night .nav__in{
  max-width:none; flex-direction:row; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,3.5rem);
}
.nav--night .nav__me{ color:var(--text); }
.nav--night .nav__links{ gap:.35rem; align-items:center; }
.nav--night .ns{
  background:transparent; box-shadow:none; color:var(--text-2);
  font-family:var(--mono); font-weight:500; font-size:.88rem;
  min-height:2.6rem; padding:.5rem .7rem; border-radius:999px;
  transition:color .15s ease, background-color .15s ease;
}
.nav--night .ns:hover{ filter:none; background:rgb(238 241 245 / .07); color:var(--text); }
.nav--night .ns[aria-current="page"]{ outline:0; color:var(--text); box-shadow:inset 0 0 0 1px var(--edge); }
.nav--night :focus-visible{ outline-color:var(--cl); }

/* the motion switch: a real button, its state in aria-pressed */
.mo{
  display:inline-flex; align-items:center; gap:.5rem; margin-left:.35rem;
  min-height:2.6rem; padding:.45rem .9rem; border-radius:999px; cursor:pointer;
  font:500 .84rem/1 var(--mono); color:var(--text);
  background:rgb(238 241 245 / .06); border:1px solid var(--edge);
  transition:background-color .15s ease, transform .16s var(--ease-out);
}
.mo:active{ transform:scale(.97); }
.mo__dot{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--text-2);
  transition:background-color .2s ease, box-shadow .2s ease;
}
.mo[aria-pressed="true"] .mo__dot{ background:var(--cl); box-shadow:0 0 .55rem var(--cl-glow); }
.mo__off{ display:none; }
.mo[aria-pressed="false"] .mo__on{ display:none; }
.mo[aria-pressed="false"] .mo__off{ display:inline; }
@media (hover:hover) and (pointer:fine){ .mo:hover{ background:rgb(238 241 245 / .11); } }

/* ══ the road: the hero ══ */
.road{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; color:var(--text); background:var(--night);
  display:grid; align-content:start;
  padding:clamp(7rem,15svh,9rem) clamp(1rem,4vw,3.5rem) 3rem;
}
.road__stage{ position:absolute; inset:0; z-index:-1; }
.road__stage::before{
  /* the sky, and a warm haze where the road meets it */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(34% 9% at var(--vx) var(--vy), rgb(255 199 44 / .16), transparent 70%),
    linear-gradient(#04060A, var(--night-2) var(--vy), var(--night) var(--vy), var(--night));
}
.road__still, .road__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.road__gl{ opacity:0; transition:opacity .8s var(--ease-out); }
.road__gl.is-live{ opacity:1; }

.road__copy{ position:relative; z-index:1; max-width:36rem; }
.road__hi{
  font:700 clamp(1.15rem,1.6vw,1.5rem)/1.2 var(--sans); color:var(--cl); margin:0 0 .6rem;
}
.road__h{
  color:var(--text); font-weight:900;
  font-size:clamp(2.6rem,5.2vw,4.6rem); line-height:.98; letter-spacing:-.025em;
  margin:0 0 1.25rem; text-wrap:balance;
}
.road__p{ font-size:clamp(1.05rem,1.25vw,1.15rem); line-height:1.55; color:var(--text-2); max-width:28rem; }

/* the decode: each letter keeps its own width, so nothing reflows */
.dc{ white-space:nowrap; }
.ch{ position:relative; display:inline-block; }
.ch.is-hidden{ color:transparent; }
.ch > i{
  position:absolute; inset:0 auto auto 0; font-style:normal;
  color:var(--cl); text-shadow:0 0 .6rem var(--cl-glow);
}

/* ══ the signs ══ */
/* Without the script the signs are a plain list beside the words. With it
   (.has-wheel) they stand round a display wheel: one faces you, the rest
   turn away to the side, and the wheel turns on a spring. */
.signs{ position:relative; margin-top:2rem; }
.signs__h{ margin:0 0 .9rem; font:500 .95rem/1 var(--mono); letter-spacing:.06em; color:var(--cl); white-space:nowrap; }
.signs__list{ display:grid; gap:.75rem; max-width:36rem; }
.sign__arrive, .sign__float{ transform-style:preserve-3d; }

.signs.has-wheel{
  position:absolute; inset:0; margin:0; pointer-events:none;
  z-index:0;   /* its own layer, so the words always sit above the wheel */
  --w:clamp(16rem,26vw,27rem);
}
.has-wheel .signs__h{ position:absolute; left:70%; top:calc(40% - 12.75rem); translate:-50% 0; }
.has-wheel .signs__list{
  position:absolute; inset:auto; left:70%; top:40%; width:0; height:0; max-width:none;
  display:block; transform-style:preserve-3d; cursor:grab; touch-action:pan-y; pointer-events:auto;
}
.has-wheel .signs__list.is-dragging{ cursor:grabbing; }
.turn{
  position:absolute; left:70%; top:calc(40% + var(--sign-h, 12rem) / 2 + 1.5rem); translate:-50% 0;
  display:flex; align-items:center; gap:.25rem; pointer-events:auto; white-space:nowrap;
  padding:.2rem; background:rgb(10 13 19 / .88); border:1px solid rgb(255 199 44 / .45); border-radius:999px;
  box-shadow:0 .75rem 2rem -.5rem rgb(0 0 0 / .8);
}
.turn__t{ font:500 .85rem/1 var(--mono); letter-spacing:.06em; color:var(--text); padding-inline:.35rem; }
.turn__b{
  display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; cursor:pointer;
  color:var(--cl); background:transparent; border:0; border-radius:50%;
  transition:background-color .2s ease;
}
.turn__b svg{ width:1.2rem; height:1.2rem; }
.turn__b:focus-visible{ outline:3px solid var(--text); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){ .turn__b:hover{ background:rgb(255 199 44 / .14); } }
.has-wheel .sign{ position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; }
/* a zero-size sign with its card centred on it, so every sign turns about
   its own middle and the wheel is the same on both sides */
/* no backface-visibility here: WebKit judges it from the sign's own turn and
   ignores the wheel's, hiding the sign in front. The script fades the backs out. */
.has-wheel .sign a{ width:var(--w); min-height:calc(var(--w) * .46); translate:-50% -50%; }
.sign a{
  pointer-events:auto; position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.25rem 1rem;
  width:clamp(19rem,39vw,35rem); min-height:clamp(9rem,17vw,16rem);
  padding:clamp(1rem,1.9vw,1.75rem); border-radius:16px;
  color:var(--text); text-decoration:none;
  background:var(--glass);
  border:2px solid var(--cl);
  box-shadow:0 0 1.6rem rgb(255 199 44 / .35), 0 2.5rem 4rem -1.5rem rgb(0 0 0 / .8);
  transition:box-shadow .2s ease;
}
.sign__name{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(1.9rem,4vw,3.6rem); line-height:1; letter-spacing:-.02em;
}
.sign__to{ display:block; margin-top:.5rem; font-size:clamp(.95rem,1.3vw,1.2rem); line-height:1.35; color:var(--text-2); }
.sign__arrow{ width:clamp(1.6rem,2.6vw,2.4rem); height:auto; color:var(--cl); }
.sign a:focus-visible{ outline:3px solid var(--text); outline-offset:4px; }



/* the scan line: one sweep each time the pointer arrives */
.sign a::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 0 46%, rgb(255 199 44 / .18) 50%, transparent 54% 100%);
  transform:translateY(-100%); opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .sign a:hover{ box-shadow:0 0 2.6rem rgb(255 199 44 / .6), 0 2.5rem 4rem -1.5rem rgb(0 0 0 / .8); }
  [data-motion="on"] .sign a:hover::after{ animation:scan .7s var(--ease-out) 1; }
}
@keyframes scan{
  from{ transform:translateY(-100%); opacity:1; }
  to{   transform:translateY(100%);  opacity:1; }
}

/* ══ motion: only when it is on ══ */
@keyframes bob{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(0,-6px,0); }
}
[data-motion="on"] .sign__float{ animation:bob 7s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -1.4s); }

/* the boot, once per visit: the signs arrive from down the road */
@keyframes arrive{
  from{ transform:scale(.6); opacity:0; }
  to{   transform:none; opacity:1; }
}
@keyframes blur-in{
  from{ opacity:0; filter:blur(8px); transform:translateY(6px); }
  to{   opacity:1; filter:none; transform:none; }
}
@keyframes show{ to{ opacity:1; } }
.boot[data-motion="on"] .sign__arrive{
  animation:arrive 1.1s var(--ease-out) backwards;
  animation-delay:calc(.35s + var(--i) * 70ms);
}
.boot[data-motion="on"] .road__hi{ animation:blur-in .6s var(--ease-out) both; }
.boot[data-motion="on"] .road__p{ animation:blur-in .6s var(--ease-out) .45s both; }
.boot[data-motion="on"] .signs__h{ animation:blur-in .6s var(--ease-out) .9s both; }
/* the headline waits for its decode, and shows itself if the script never runs */
.boot[data-motion="on"] .road__h{ opacity:0; animation:show 0s 1.4s forwards; }
.boot[data-motion="on"] .road__h.is-decoding{ opacity:1; animation:none; }

/* with reduced motion on, transitions that remain are near-instant */
@media (prefers-reduced-motion:reduce){
  .sign a, .mo, .mo__dot, .road__gl{ transition-duration:.01s; }
}

/* ══ phones and narrow windows: the road sits behind the words, the wheel below ══ */
@media (max-width:52rem){
  :root{ --vx:50%; --vy:16.5%; }
  .nav--night{ position:relative; background:#04060A; }
  .road{ min-height:auto; padding-top:1.5rem; background:linear-gradient(#04060A, var(--night-2) var(--hz, calc(100% - 26.75rem)), var(--night) var(--hz, calc(100% - 26.75rem))); }
  /* the stage hangs from the bottom of the hero, so the horizon always
     falls between the words and the wheel, however long the words run */
  .road__stage{ inset:auto 0 0; height:32rem; }
  .road__stage::after{
    /* the stage ends in night, so the list below sits on a quiet ground */
    content:""; position:absolute; inset:auto 0 0; height:30%;
    background:linear-gradient(transparent, var(--night));
  }
  .nav--night .nav__in{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .road__copy{ max-width:none; }
  .nav--night .nav__links{ justify-content:flex-start; max-width:100%; }
  .road__top{ min-height:auto; }
  .signs.has-wheel{ position:relative; inset:auto; height:22.5rem; margin-top:4.5rem; perspective:1100px; perspective-origin:50% 45%; --w:min(78vw,22rem); }
  .has-wheel .signs__h{ left:50%; top:0; }
  .has-wheel .signs__list{ left:50%; top:56%; }
  .turn{ left:50%; top:calc(56% + var(--sign-h, 12rem) / 2 + 1rem); }
  .has-wheel .sign a{ min-height:calc(var(--w) * .55); }
  .sign__name{ font-size:1.6rem; }
}

/* ══ the still road: drawn in CSS, seen before the 3D one arrives, and
   instead of it when WebGL is missing or data saver is on ══ */
.road__still > span{ position:absolute; inset:0; }
.rs-road{
  background:linear-gradient(#0D1118, #161B26);
  clip-path:polygon(calc(var(--vx) - .25%) var(--vy), calc(var(--vx) + .25%) var(--vy), 128% 100%, -48% 100%);
}
.rs-edge{
  background:rgb(207 214 224 / .5);
  clip-path:polygon(calc(var(--vx) - .25%) var(--vy), calc(var(--vx) - .2%) var(--vy), -47.6% 100%, -48% 100%,
                    calc(var(--vx) + .25%) var(--vy), calc(var(--vx) + .2%) var(--vy), 127.6% 100%, 128% 100%);
}
.rs-line{
  background:var(--cl); filter:drop-shadow(0 0 6px var(--cl-glow));
  clip-path:polygon(var(--vx) var(--vy), calc(var(--vx) + .08%) var(--vy), calc(var(--vx) - 5.4%) 100%, calc(var(--vx) - 6.4%) 100%);
}
.mo[hidden]{ display:none; }

/* ══════════════════════════════════════════════════════════════════
   Night, for the whole site. styles.css draws everything from tokens,
   so night is mostly the tokens turned: dark ground, light ink, the
   centre-line yellow where navy used to be the thing to press.
   ══════════════════════════════════════════════════════════════════ */
.night{
  --bg:        #07090D;
  --bg-sub:    #0B0F16;
  --bg-raise:  #161C27;
  --panel:     #0C1119;
  --ink:       #EEF1F5;
  --ink-2:     #C3CAD5;
  --ink-3:     #9AA3B2;   /* 7.4:1 on --panel */
  --ink-4:     #9AA3B2;
  --rule:      #1E2531;
  --rule-2:    #3A4454;
  --sign:      #1A2440;   /* a panel, not a button, at night */
  --sign-2:    #AEB9D6;
  --sign-3:    #24305A;
  --accent:    #FFC72C;
  --accent-d:  #FFD866;
  --accent-bg: #2A2410;
  --quiet:     linear-gradient(transparent, transparent);
  color-scheme:dark;
}
.night body{ background:var(--bg); color:var(--ink); }
.night :focus-visible{ outline-color:var(--cl); }
.night a{ color:var(--accent); }
.night h1, .night h2, .night h3, .night h4{ color:var(--ink); }

/* the header on inner pages: the same night glass as on the road */
.night .nav:not(.nav--night){
  background:rgb(7 9 13 / .82); border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(140%) blur(12px);
}
.night .nav__me{ color:var(--ink); }
.night .ns{
  background:transparent; box-shadow:none; color:var(--ink-3);
  font-family:var(--mono); font-weight:500; border-radius:999px;
  transition:color .15s ease, background-color .15s ease, transform .16s var(--ease-out);
}
.night .ns:hover{ filter:none; background:rgb(238 241 245 / .07); color:var(--ink); }
.night .ns[aria-current="page"]{ outline:0; color:var(--ink); box-shadow:inset 0 0 0 1px var(--edge); }

/* buttons: the thing to press is the centre line */
.night .btn{ border-color:var(--rule-2); color:var(--ink); }
.night .btn:hover{ background:var(--bg-raise); border-color:var(--ink-3); }
.night .btn--open, .night .back{
  background:var(--cl); border-color:var(--cl); color:var(--night);
}
.night .btn--open:hover, .night .back:hover{ background:#FFD45A; border-color:#FFD45A; color:var(--night); }
.night .btn--quiet{ background:var(--panel); }
/* press feedback, every button on the site */
.btn, .back, .ns, .foot__links a, .lightbox__close{ transition-property:background-color, border-color, color, transform; transition-duration:.15s, .15s, .15s, .16s; }
.btn:active, .back:active, .ns:active, .foot__links a:active, .lightbox__close:active{ transform:scale(.97); }
@media (prefers-reduced-motion:reduce){ .btn:active, .back:active, .ns:active, .foot__links a:active, .lightbox__close:active{ transform:none; } }

/* panels and cards */
.night .pcard, .night .readout, .night .skills li{ background:var(--panel); border-color:var(--rule); }
.night .tag{ background:var(--bg-raise); color:var(--ink-2); }
.night .tag--wip{ background:var(--cl); color:var(--night); }
.night .chips span{ background:var(--bg-sub); }
.night .stops li:last-child::after{ background:var(--bg); }
.night .route li::after{ background:var(--bg); }
.night .route__now::before{ border-color:var(--bg); }
.night .zoom img, .night .shot, .night .proj__fig > img, .night .phones img, .night .twin{ border-color:var(--rule); }
.night .me img{ box-shadow:0 0 0 3px var(--bg), 0 0 0 7px var(--cl); }
.night .me--big img{ box-shadow:0 0 0 5px var(--bg), 0 0 0 11px var(--cl); }
.night .logo{ box-shadow:0 0 0 1px rgb(238 241 245 / .14); }
.night .readout__row--true b{ color:#FF8A7A; }
.night .zoom__hint{ background:var(--cl); color:var(--night); }

/* the numbers are no longer mounted on a green board */
.night .sect:has(.nums){ background:none; box-shadow:none; border-radius:0; color:var(--ink); }
.night .sect:has(.nums) .sect__h{ border-bottom-color:var(--ink); }
.night .sect:has(.nums) .sect__n{ color:var(--ink-3); }
.night .sect:has(.nums) .nums li{ border-top-color:var(--cl); }
.night .sect:has(.nums) .nums b{ color:var(--ink); }
.night .sect:has(.nums) .nums span{ color:var(--ink-2); }
.night .nums b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.night .nums li{ border-top-color:var(--cl); }
.night .sect__h{ border-bottom-color:var(--ink); }

/* lightboxes open like a material arriving, not a cut */
.night .lightbox::backdrop{ background:rgb(4 6 10 / .92); }
.night .lightbox__close{ background:var(--panel); border-color:var(--ink); }
.lightbox{
  opacity:0; transform:scale(.96);
  transition:opacity .22s var(--ease-out), transform .26s var(--ease-out), overlay .26s allow-discrete, display .26s allow-discrete;
}
.lightbox:popover-open{ opacity:1; transform:none; }
@starting-style{ .lightbox:popover-open{ opacity:0; transform:scale(.96); } }
.lightbox::backdrop{ transition:opacity .22s ease, overlay .26s allow-discrete, display .26s allow-discrete; opacity:0; }
.lightbox:popover-open::backdrop{ opacity:1; }
@starting-style{ .lightbox:popover-open::backdrop{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .lightbox{ transform:none; } }

/* the terminal and the exit sign keep their own dark panels */
.night .term{ background:#0F1830; }
.night .exit__panel{ background:var(--panel); box-shadow:inset 0 0 0 1px var(--rule); }

/* ══ the footer ══ */
.night .foot{ background:var(--night); border-top:1px solid var(--rule); }
.night .foot__grid h3{ color:var(--ink-3); }
.night .foot__grid p{ color:var(--ink-2); }
.night .foot__links a{ border-color:var(--rule-2); }
.night .foot__links a:hover{ border-color:var(--cl); color:var(--cl); }

/* ══ page to page: a short warp forward ══ */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root){ animation:warp-out .2s var(--ease-in-out) both; }
  ::view-transition-new(root){ animation:warp-in .26s var(--ease-out) both; }
}
@keyframes warp-out{ to{ opacity:0; transform:scale(1.06); filter:blur(4px); } }
@keyframes warp-in{ from{ opacity:0; transform:scale(.97); } }


/* ══ scroll arrivals: panels come up the road toward you, once. They move
   with translate and scale, so a tilt can own transform ══ */
.js-arrive [data-arrive]{
  opacity:0; translate:0 2.25rem; scale:.96;
  transition:opacity .7s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out);
  transition-delay:calc(var(--k, 0) * 70ms);
}
.js-arrive [data-arrive].is-in{ opacity:1; translate:0 0; scale:1; }

/* ══ project panels: HUD glass with a glowing edge ══ */
.night .pcard{
  position:relative; overflow:hidden;
  background:linear-gradient(rgb(255 255 255 / .025), transparent 40%), var(--panel);
  border:1px solid var(--rule);
  box-shadow:0 1.5rem 3rem -2rem rgb(0 0 0 / .9);
}
.night .pcard::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--line, var(--cl)); }
.night .pcard::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(transparent 0 46%, rgb(255 199 44 / .12) 50%, transparent 54% 100%);
  translate:0 -100%; opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .night .pcard{ transition:box-shadow .25s ease, border-color .25s ease; }
  .night .pcard:hover{ border-color:rgb(255 199 44 / .55); box-shadow:0 1.75rem 3.5rem -2rem rgb(0 0 0 / .95); }
  [data-motion="on"].night .pcard:hover::after{ animation:scan-y .8s var(--ease-out) 1; }
}
@keyframes scan-y{ from{ translate:0 -100%; opacity:1; } to{ translate:0 100%; opacity:1; } }

/* ══ the numbers: a speedometer readout ══ */
.night .nums b{ font-size:clamp(2.4rem,5vw,3.4rem); }
.night .nums b [aria-hidden]{ display:inline-block; min-width:1ch; }

/* ══ the Claude kit: a command palette you can actually search ══ */
.kit__panel{
  border-radius:16px; overflow:hidden; background:var(--panel);
  border:1px solid var(--rule); box-shadow:0 2rem 4rem -2.5rem rgb(0 0 0 / .95), inset 0 1px 0 rgb(255 255 255 / .05);
}
.kit__bar{
  display:flex; align-items:center; gap:.75rem; padding:.9rem 1.1rem;
  border-bottom:1px solid var(--rule); background:rgb(255 255 255 / .02);
}
.kit__bar[hidden]{ display:none; }
.kit__icon{ width:1.15rem; height:1.15rem; color:var(--ink-3); flex:none; }
.kit__label{ font:500 .9rem/1 var(--mono); color:var(--ink-3); flex:none; }
.kit__q{
  flex:1; min-width:0; min-height:2.4rem; padding:.4rem .7rem; border-radius:8px;
  font:500 1rem/1.2 var(--sans); color:var(--ink);
  background:var(--bg-sub); border:1px solid var(--rule-2); caret-color:var(--cl);
}
.kit__q:focus-visible{ outline:2px solid var(--cl); outline-offset:1px; }
.kit__count{ font:500 .8rem/1 var(--mono); color:var(--ink-3); flex:none; font-variant-numeric:tabular-nums; }
.kit__list{ padding:1.25rem 1.1rem .1rem; column-gap:2.5rem; }
@media (min-width:52rem){ .kit__list{ columns:2; } }
.kit__group{ break-inside:avoid; margin-bottom:1.5rem; }
.kit__group[hidden], .kit__item[hidden]{ display:none; }
.kit__gh{
  font:500 .8rem/1 var(--mono); letter-spacing:.06em; color:var(--cl);
  margin:0 0 .55rem; padding:0 .55rem;
}
.kit__item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .75rem; align-items:baseline;
  padding:.5rem .55rem; border-radius:8px;
}
.kit__item + .kit__item{ border-top:1px solid rgb(255 255 255 / .04); }
.kit__name{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); }
.kit__tag{
  font:500 .72rem/1 var(--mono); color:var(--ink-2); padding:.3rem .45rem; border-radius:999px;
  border:1px solid var(--rule-2);
}
.kit__what{ grid-column:1 / -1; font-size:.9rem; line-height:1.45; color:var(--ink-3); }
.kit__empty{ padding:0 1.65rem 1.4rem; color:var(--ink-3); }
.kit__go{ margin-top:1.25rem; }

.night .sign a{ color:var(--text); }
.signs:not(.has-wheel) .sign a{ width:auto; min-height:0; }

/* ══ review fixes ══ */
.night .ns[aria-current="page"]:focus-visible{ outline:3px solid var(--cl); outline-offset:3px; }
.night .pick-opt input:focus-visible + span{ outline-color:var(--cl); }
.night .pick-opt input:checked + span{ background:var(--cl); border-color:var(--cl); color:var(--night); }
.night .pick-opt input:checked + span small{ color:#3A3320; }
/* white panels stay white objects, with dark ink on them */
.night .stop, .night .place--jp, .night .place--sv{ --ink:#14171F; --ink-2:#414856; --sign:#14224A; color:#14171F; }
.night .now{ background:var(--bg-sub); }
.night .air__list li{ background:var(--panel); }
/* project colours as text need a lighter night version to pass AA */
.night .sec__n, .night .moves .arrow{ color:color-mix(in oklab, var(--line, var(--cl)) 55%, white); }
/* a picture never shows as a dead black frame while it loads */
.night .zoom img, .night .phones img, .night .twin{ background:var(--bg-raise); }
/* the wheel's dots: a 44px target on touch */
@media (max-width:52rem){
  .nav--night .mo{ position:absolute; top:.9rem; right:clamp(1rem,4vw,3.5rem); margin:0; }
}
.road__p--also{ margin-top:.5rem; }
.boot[data-motion="on"] .road__p--also{ animation-delay:.55s; }

/* ══ every page: the road's motion and the HUD's frame ══ */

/* the headline waits for its decode, and shows itself if the script never runs */
.dc-page[data-motion="on"] main h1:not(.road__h){ opacity:0; animation:show 0s 1.2s forwards; }
.dc-page[data-motion="on"] main h1.is-decoding{ opacity:1; animation:none; }

/* under the header, the centre line races in as the page arrives, then rests */
.night .nav:not(.nav--night){ position:sticky; }
.night .nav:not(.nav--night)::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:repeating-linear-gradient(90deg, var(--cl) 0 28px, transparent 28px 52px);
  opacity:.55;
}
@media (prefers-reduced-motion:no-preference){
  [data-motion="on"] .night .nav:not(.nav--night)::after,
  [data-motion="on"].night .nav:not(.nav--night)::after{ animation:lane-in 1.4s var(--ease-out) both; }
}
@keyframes lane-in{
  from{ background-position:-520px 0; opacity:0; }
  30%{ opacity:.9; }
  to{ background-position:0 0; opacity:.55; }
}

/* each page title sits in HUD corner brackets */
.night .page-h, .night .aboutme > div:last-child, .night .case > .case__title{ position:relative; }
.night .page-h::before, .night .page-h::after{
  content:""; position:absolute; width:1.4rem; height:1.4rem; pointer-events:none;
  border:2px solid var(--cl); opacity:.8;
}
.night .page-h::before{ left:calc(var(--gut) - .9rem); top:clamp(1.6rem,5vw,3.6rem); border-right:0; border-bottom:0; }
.night .page-h::after{ right:calc(var(--gut) - .9rem); bottom:clamp(.6rem,2vw,1.25rem); border-left:0; border-top:0; }
@media (prefers-reduced-motion:no-preference){
  [data-motion="on"].night .page-h::before{ animation:corner-in .7s var(--ease-out) .15s both; }
  [data-motion="on"].night .page-h::after{ animation:corner-in .7s var(--ease-out) .3s both; }
}
@keyframes corner-in{ from{ opacity:0; scale:.4; } }

/* the case study's kicker and title read as a HUD readout */
.night .case__kicker{ font-family:var(--mono); font-weight:500; letter-spacing:.04em; color:var(--ink-3); }

/* cards across the site: a glowing edge and one scan sweep under the pointer */
.night .skills li, .night .moves > li, .night .roster details, .night .exit__panel{ position:relative; overflow:hidden; }
.night .skills li::after, .night .moves > li::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 0 46%, rgb(255 199 44 / .12) 50%, transparent 54% 100%);
  translate:0 -100%; opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .night .skills li, .night .moves > li, .night .roster details{ transition:border-color .25s ease, box-shadow .25s ease; }
  .night .skills li:hover, .night .moves > li:hover, .night .roster details:hover{
    border-color:rgb(255 199 44 / .5); box-shadow:0 1.5rem 3rem -2rem rgb(0 0 0 / .95);
  }
  [data-motion="on"].night .skills li:hover::after, [data-motion="on"].night .moves > li:hover::after{ animation:scan-y .8s var(--ease-out) 1; }
  /* pictures lean in a touch, inside their frame */
  .night .zoom{ overflow:hidden; }
  .night .zoom img{ transition:scale .5s var(--ease-out); }
  [data-motion="on"].night .zoom:hover img{ scale:1.015; }
}

/* the roster's details slide open instead of snapping */
.roster details{ interpolate-size:allow-keywords; }
.roster details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .28s var(--ease-out), content-visibility .28s allow-discrete;
}
.roster details[open]::details-content{ block-size:auto; }
@media (prefers-reduced-motion:reduce){ .roster details::details-content{ transition:none; } }

/* the story pages' try-it pieces cross-fade when a choice changes them */
.vote__out, .vote__then, .turns__panel, .term__reply, .now [data-s], .packet__s{
  transition:opacity .22s var(--ease-out), translate .22s var(--ease-out);
}
@starting-style{
  .vote__out, .vote__then, .turns__panel, .term__reply, .now [data-s], .packet__s{ opacity:0; translate:0 4px; }
}
@media (prefers-reduced-motion:reduce){
  .vote__out, .vote__then, .turns__panel, .term__reply, .now [data-s], .packet__s{ translate:none; }
}
/* dragging the wheel never selects its words or drags its links */
.has-wheel .signs__list{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.has-wheel .sign a{ -webkit-user-drag:none; }