/* ==========================================================================
   The front door. Loaded by the Test Track's page ("/") and by Case 01, after garage.css.

   Two parts:
   1. #ig, the start screen, which is the Test Track's own page: what the Test
      Track is, then Case 01, its two questions, the button and the cluster.
      ignition.js runs it; Start sweeps the cluster and opens the case, a page of
      its own, so Back, the logo and Stop all come back to it.
   2. The case behind it: a tall open first screen for the skyline, the story,
      and the contents grid that routes a reader to the page that answers their
      question.

   The plate is the same image at the same crop on both pages, so when the case
   opens the shot does not jump; where the browser can, the two pages cross-fade
   (the view transition at the end of part 2).
   ========================================================================== */

/* ---------- 1. the start screen ------------------------------------------ */
/* ---------- the framing: the whole car is always in the window and nothing of ours sits on it -------------------
   The plate is 1920 x 1086. The car and its charger sit at 40% to 96.5% across it and 47% to 87% down. --pw, --px
   and --py are the plate's shown width and its offsets, worked out from the window so the car is fully in frame at
   any size, and both the start screen and (in a wide window) the landing behind it read them, so the shot does not
   jump when the door lifts.
   A wide window (1.55 to 1 and up) shows the plate full-bleed with the car pushed to the right, and the words and
   the button stay in the column in front of it: --room-text and --room-pod are how wide that column is. A tall or
   squarish window shows the plate as a band scaled to the car, between the words above and the console below,
   fading into the dark at its top and foot (see the stacked block below). */
:root{
  --vh:1vh; --A:1.768; --cl:.40; --cr:.965; --cb:.87; --m:16px;
  --pw:max(100vw,calc(var(--A) * 100 * var(--vh)));
  --ph:calc(var(--pw) / var(--A));
  --px:clamp(calc(100vw - var(--pw)),calc(100vw - var(--m) - var(--cr) * var(--pw)),0px);
  --py:clamp(calc(100 * var(--vh) - var(--ph)),calc(100 * var(--vh) - var(--m) - var(--cb) * var(--ph)),0px);
}
@supports (height:1svh){ :root{ --vh:1svh } }

/* the page: the start screen is the whole first screen, edge to edge, with no header above it (its main is not the page column, .gx); the footer
   follows it */

#ig{
  --btn:clamp(128px,min(21vmin,25vh),196px);
  --pad:clamp(18px,4.2vw,64px);
  --room-text:calc(.5 * var(--pw) + var(--px) - var(--pad) - 12px);
  --room-pod:calc(var(--cl) * var(--pw) + var(--px) - var(--pad) - 16px);
  position:relative; display:block;
  min-height:100vh; min-height:100svh;            /* a very short window grows the page; it never clips the button */
  background:#05070D; color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}

#ig .ig-plate{
  position:absolute; inset:0;
  background:var(--page-bg) var(--px) var(--py)/var(--pw) auto no-repeat,#05070D;
  filter:brightness(.6) saturate(.78);
  transition:filter 1.4s cubic-bezier(.3,.85,.4,1);
}
#ig[data-s="starting"] .ig-plate, #ig[data-s="on"] .ig-plate, #ig[data-s="leaving"] .ig-plate{ filter:brightness(1) saturate(1) }

/* the veil keeps the words legible and the top of the frame open for the skyline */
#ig .ig-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,7,13,.78) 0%,rgba(5,7,13,.5) 34%,rgba(5,7,13,.08) 66%,rgba(5,7,13,0) 100%),
    linear-gradient(0deg,rgba(5,7,13,.9) 0%,rgba(5,7,13,.55) 26%,rgba(5,7,13,0) 52%),
    linear-gradient(180deg,rgba(5,7,13,.6) 0%,rgba(5,7,13,0) 20%);
}
#ig .ig-flash{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(46% 52% at var(--fx,22%) var(--fy,82%),rgba(var(--speed-blue-rgb),.5),rgba(var(--speed-blue-rgb),.16) 42%,transparent 72%);
}
#ig.flash .ig-flash{ animation:ig-flash 1.6s cubic-bezier(.4,0,.3,1) }
@keyframes ig-flash{ 0%{opacity:0} 32%{opacity:.8} 100%{opacity:0} }
/* where the browser cannot cross-fade two pages, the screen dims to the dark before the case opens. The dark is a layer of its own over the
   stage: fading the stage itself would make it a backdrop root and take the blur off the cluster's glass on the way out */
#ig .ig-cover{ position:absolute; inset:0; z-index:2; pointer-events:none; background:#05070D; opacity:0; transition:opacity .32s cubic-bezier(.4,0,.2,1) }
html:not(.vt) #ig[data-s="leaving"] .ig-cover{ opacity:1 }

.ig-stage{
  position:relative; z-index:1; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) var(--pad) max(18px,env(safe-area-inset-bottom));
}
.ig-top{ display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; min-height:48px }
.ig-top img{ height:24px; width:auto; display:block }
/* the lockup is the page's name: the wordmark, a hairline, and the place, with its mark (build.py TT_ICON) */
.ig-lock{ display:flex; align-items:center; gap:14px; margin:0; font:inherit; letter-spacing:normal; text-transform:none }
.ig-issue{ display:inline-flex; align-items:center; gap:9px; padding-left:14px; border-left:1px solid rgba(255,255,255,.2);
  font-size:.74rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); white-space:nowrap; line-height:1 }
#ig .tt-ico{ width:24px; height:24px }
.ig-sp{ flex:1 }

.ig-more{ display:none }
@media(min-aspect-ratio:31/20) and (min-height:600px){
  .ig-more{ position:absolute; right:var(--pad); bottom:max(18px,env(safe-area-inset-bottom)); display:inline-flex; align-items:center; min-height:44px;
    font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,242,245,.78); text-decoration:none;
    text-shadow:0 1px 12px rgba(5,7,13,.85) }
  .ig-more:hover{ color:#fff }
  .ig-more:focus-visible{ outline:2px solid #fff; outline-offset:3px }
}
/* what the Test Track is. In a wide window it is the lockup's tagline, on the same bar, so the case below keeps the room it had; in a tall one it
   takes the line under the lockup (the tall-window block below) */
.ig-tt{ flex:0 1 40rem; min-width:0; margin:0 0 0 4px; padding:4px 0 4px 18px; border-left:1px solid rgba(255,255,255,.14);
  font-size:clamp(.84rem,1vw,1rem); line-height:1.45; color:rgba(240,242,245,.82); text-shadow:0 1px 14px rgba(5,7,13,.75) }
.ig-tt b{ color:#fff; font-weight:800 }
#ig button.ig-tool{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(8,11,20,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:rgba(240,242,245,.86); font-size:max(10px,.62rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
}
#ig button.ig-tool:hover{ border-color:rgba(244,81,30,.6); color:#fff }
#ig button.ig-tool svg{ width:18px; height:18px; display:block }
#ig button.ig-tool .off{ display:none }
#ig button.ig-tool[aria-pressed="false"] .on{ display:none }
#ig button.ig-tool[aria-pressed="false"] .off{ display:block }
#ig button:focus-visible{ outline:2px solid #fff; outline-offset:3px }

/* the copy and the console sit at the foot of the frame; the top third is the shot */
.ig-main{ margin-top:auto; padding-top:clamp(12px,3vh,32px); max-width:min(46rem,var(--room-text)) }
.ig-eyebrow{ margin:0 0 .85em; font-size:clamp(max(10px,.62rem),1.55vh,.72rem); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--amber) }
h2.ig-eyebrow{ font-family:inherit; line-height:inherit }
/* the case's tag: a pit board, white on the dark with the start screen's orange stripe down its left edge */
.ig-chip{ display:inline-block; margin:0 1em 0 0; padding:.32em .7em .32em .62em; border:1px solid rgba(255,255,255,.22); border-left:3px solid var(--ignition);
  background:rgba(5,7,13,.6); color:#fff; letter-spacing:.2em; line-height:1.2 }
.ig-h{
  margin:0 0 .26em; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.85rem,min(4.9vw,6.6vh),3.9rem); line-height:.98; letter-spacing:-.028em; text-wrap:balance;
}
/* the second question: the same face and weight a step down, in the sky of the second stripe, so the screen asks two things and still reads as one line of thought */
.ig-h2{
  margin:0 0 .6em; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--sky);
  font-size:clamp(1.1rem,min(2.5vw,3.7vh),2.15rem); line-height:1.05; letter-spacing:-.015em; text-wrap:balance;
}
.ig-go{
  margin:0 0 .9em; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ignition);
  font-size:clamp(1.02rem,min(2.3vw,3.2vh),1.65rem); letter-spacing:-.01em;
}
.ig-stripes{ display:block; width:min(210px,44vw); margin:0 0 clamp(12px,2.2vh,22px) }
.ig-stripes i{ display:block; height:6px; background:var(--ignition); clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%) }
.ig-stripes i + i{ width:80%; margin-top:4px; background:var(--sky) }

.ig-pod{ display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(16px,2.6vw,36px); max-width:var(--room-pod) }
.ig-center{ flex:none; display:flex; flex-direction:column; align-items:center; gap:12px }
.ig-hint{ margin:0; min-height:1.2em; font-size:max(10px,.6rem); font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:rgba(240,242,245,.6) }

/* the button: a machined ring, a knurled edge, a domed cap and a light that breathes */
#ig button.ig-btn{
  position:relative; display:block; width:var(--btn); height:var(--btn); padding:0; border:0; border-radius:50%;
  background:none; color:#fff; cursor:pointer; touch-action:manipulation;
}
#ig button.ig-btn:focus-visible{ outline:2px solid #fff; outline-offset:8px }
.ig-bezel{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 63%,rgba(0,0,0,.6) 64%,transparent 73%),
    conic-gradient(from 200deg,#2b303b,#0c0e14 14%,#3d4451 27%,#0c0e14 43%,#2b303b 58%,#0c0e14 72%,#414857 86%,#2b303b);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 6px rgba(0,0,0,.7);
}
.ig-bezel::after{
  content:''; position:absolute; inset:5.5%; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.1) 0 .8deg,transparent .8deg 3.6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 80%,#000 81% 100%); mask:radial-gradient(circle,transparent 0 80%,#000 81% 100%);
}
/* The light is Speed Blue and it has two states that are layers, so nothing ever cuts.
   Asleep it breathes: the ring and its glow swell and settle on one slow sine (2.7 s in, 2.7 s out), only ever
   animating opacity, and never falling to dark. Lit, a brighter ring fades in over it while the breathing layer
   fades out, and the same in reverse if the engine is stopped. */
.ig-led{ position:absolute; inset:13.5%; border-radius:50%; pointer-events:none }
.ig-led i{ position:absolute; inset:0; display:block; border-radius:50% }
.ig-idle{ transition:opacity .8s cubic-bezier(.4,0,.2,1) }
.ig-breath{
  border:max(2px,calc(var(--btn)*.014)) solid rgba(var(--speed-blue-rgb),.9);
  box-shadow:0 0 calc(var(--btn)*.05) rgba(var(--speed-blue-rgb),.45),inset 0 0 calc(var(--btn)*.07) rgba(var(--speed-blue-rgb),.5);
  animation:ig-breathe 2.7s cubic-bezier(.37,0,.63,1) infinite alternate;
  transition:border-color .5s;
}
.ig-breath::after{
  content:''; position:absolute; inset:calc(var(--btn)*-.02); border-radius:50%;
  box-shadow:0 0 calc(var(--btn)*.14) rgba(var(--speed-blue-rgb),.75),0 0 calc(var(--btn)*.36) rgba(var(--speed-blue-rgb),.32);
  animation:ig-breathe-glow 2.7s cubic-bezier(.37,0,.63,1) infinite alternate;
}
@keyframes ig-breathe{ from{ opacity:.68 } to{ opacity:1 } }
@keyframes ig-breathe-glow{ from{ opacity:.12 } to{ opacity:1 } }
.ig-lit{
  border:max(2px,calc(var(--btn)*.014)) solid var(--speed-blue-hot);
  box-shadow:0 0 calc(var(--btn)*.16) rgba(var(--speed-blue-rgb),.95),0 0 calc(var(--btn)*.55) rgba(var(--speed-blue-rgb),.42),inset 0 0 calc(var(--btn)*.1) rgba(190,236,255,.75);
  opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1);
}
.ig-cap{
  position:absolute; inset:19%; border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#474d5a 0%,#1a1e27 44%,#0a0c11 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.22),inset 0 -10px 16px rgba(0,0,0,.66),0 8px 18px rgba(0,0,0,.66);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s cubic-bezier(.2,.7,.25,1),box-shadow .12s;
}
#ig button.ig-btn:active .ig-cap{
  transform:translateY(calc(var(--btn)*.014)) scale(.96);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.14),inset 0 -6px 12px rgba(0,0,0,.72),0 3px 8px rgba(0,0,0,.6);
}
.ig-leg{
  display:flex; flex-direction:column; align-items:center; padding-left:.2em; line-height:1.18;
  font-family:Arial,Helvetica,sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.2em;
  font-size:max(10px,calc(var(--btn)*.066)); color:rgba(255,255,255,.74); transition:color .8s cubic-bezier(.4,0,.2,1),text-shadow .8s cubic-bezier(.4,0,.2,1);
}
.ig-leg small{ font-size:max(10px,.66em); font-weight:700; letter-spacing:.3em; color:rgba(255,255,255,.5); margin-bottom:.32em }
.ig-leg [data-t]::before{ content:attr(data-t) }   /* the engraving is drawn, not text: the button's one name is its aria-label ("Start driving"), which a label that spells out the legend would contradict */
#ig button.ig-btn:hover .ig-breath{ border-color:var(--speed-blue-hot) }
#ig[data-s="starting"] .ig-lit, #ig[data-s="on"] .ig-lit, #ig[data-s="leaving"] .ig-lit{ opacity:1 }
#ig[data-s="starting"] .ig-idle, #ig[data-s="on"] .ig-idle, #ig[data-s="leaving"] .ig-idle{ opacity:0; transition-delay:.3s }
#ig[data-s="starting"] .ig-leg, #ig[data-s="on"] .ig-leg, #ig[data-s="leaving"] .ig-leg{ color:#fff; text-shadow:0 0 12px rgba(var(--speed-blue-rgb),.85) }

/* the cluster: one needle gauge and three readouts, dark until the engine starts */
.ig-inst{
  flex:1 1 11rem; min-width:0; max-width:31rem; container-type:inline-size;      /* 11rem: beside the button down to 176px (a 1280 by 800 laptop) rather than wrapping under it and off the first screen */ list-style:none; margin:0; padding:14px clamp(14px,1.6vw,22px);
  display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(14px,1.8vw,26px); align-items:center;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),rgba(8,11,20,.5);
  -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(229,231,235,.1),0 24px 60px -24px rgba(0,0,0,.85);
  opacity:.5; transition:opacity 1s ease;
}
#ig[data-s="starting"] .ig-inst, #ig[data-s="on"] .ig-inst, #ig[data-s="leaving"] .ig-inst{ opacity:1 }
.ig-i{ list-style:none; margin:0; padding:0 }
.ig-i--cost{ grid-column:1; grid-row:1 / span 3 }
.ig-i--cost .ig-l, .ig-i--cost .ig-n{ display:none }
.ig-i--row{ grid-column:2; display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09) }
.ig-i--row:last-child{ border-bottom:0 }
.ig-l{ font-size:max(10px,.58rem); font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3) }
.ig-n{ font-family:var(--display); font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap }
.ig-bar{ grid-column:1 / -1; display:block; height:3px; margin-top:7px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden }
.ig-bar b{ display:block; height:100%; width:0; border-radius:2px; background:var(--sky); box-shadow:0 0 8px rgba(87,180,230,.7) }

.ig-dial{ display:block; width:clamp(118px,13.5vw,168px); height:auto; overflow:visible }
.ig-dial .track{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:5; stroke-linecap:round }
.ig-dial .lit{ fill:none; stroke:var(--ignition); stroke-width:5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; filter:drop-shadow(0 0 4px rgba(244,81,30,.85)) }
.ig-dial .t{ stroke:rgba(255,255,255,.3); stroke-width:1 }
.ig-dial .t.maj{ stroke:rgba(255,255,255,.66); stroke-width:1.7 }
.ig-dial text{ fill:var(--ink-3); font-family:Arial,Helvetica,sans-serif; font-size:17px; font-weight:700; text-anchor:middle }
.ig-dial .needle{ fill:#fff; transform:rotate(-120deg); transform-origin:100px 100px; filter:drop-shadow(0 0 3px rgba(244,81,30,.95)) }
.ig-dial .hub{ fill:#12151c; stroke:rgba(255,255,255,.34); stroke-width:1.6 }
.ig-dial .ig-dn{ fill:#fff; font-family:var(--display); font-size:28px; font-weight:900; letter-spacing:-.02em }
.ig-dial .ig-dl{ font-size:17px; letter-spacing:.17em }
/* The dial is a 200 unit drawing, so its lettering is sized for the smallest the dial is drawn at each step, and never lands under
   10px on the screen: 17 units at 118px and up, 14 at 148px and up (13.5vw from 1100px). A console too narrow for that loses the
   scale's numbers and keeps PER MILE (see the container steps below). */
@media(min-width:1100px){ .ig-dial text, .ig-dial .ig-dl{ font-size:14px } }

.ig-legend{ margin:clamp(10px,2vh,18px) 0 0; font-size:max(10px,.62rem); letter-spacing:.06em; color:rgba(240,242,245,.5) }
.ig-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* the console in a narrow column: the dial shrinks and each readout stacks its label over its figure */
@container (max-width:360px){
  .ig-dial{ width:clamp(92px,42cqw,128px) }
  .ig-dial text, .ig-dial .ig-dl{ font-size:17px }          /* 118px to 128px wide here */
  .ig-i--row{ grid-template-columns:1fr; row-gap:2px; padding:6px 0 }
  .ig-n{ font-size:1rem }
  .ig-l{ font-size:max(10px,.52rem); letter-spacing:.1em; line-height:1.2 }
  .ig-bar{ margin-top:5px }
}
/* under 118px the scale's numbers cannot be drawn at 10px without running into the ticks, so the dial keeps its ticks, needle and figure */
@container (max-width:280.98px){
  .ig-dial text:not(.ig-dn):not(.ig-dl){ display:none }
  .ig-dial .ig-dn{ transform:translateY(-4px) }
  .ig-dial .ig-dl{ font-size:22px }
  /* the 10px labels are taller than the 8px ones were, so the rows close up to keep the console its old height */
  .ig-i--row{ padding:5px 0 }
  .ig-l{ line-height:1.15 }
  .ig-bar{ margin-top:3px }
}
/* and where a 10px label has no room beside the dial (DEGRADATION is about 85px), the dial sits on top and the three readouts run the
   full width under it */
@container (max-width:210px){
  .ig-i--cost{ grid-column:1 / -1; grid-row:auto; justify-self:center }
  .ig-i--row{ grid-column:1 / -1; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; padding:5px 0 }
  .ig-bar{ margin-top:4px }
}

/* a short window: give the shot the room */
@media(max-height:760px){
  .ig-eyebrow{ margin-bottom:.6em }
}
/* a laptop 800px tall (1280 by 800): the words and the console close up so the gauges and the cue stay on the first screen */
@media(max-height:820px) and (min-width:721px){
  .ig-eyebrow{ margin-bottom:.6em }
  .ig-main{ padding-top:clamp(8px,1.5vh,16px) }
  .ig-legend{ margin-top:8px }
}
@media(max-height:640px){
  .ig-stripes{ display:none }
  .ig-legend{ display:none }
}
/* a landscape phone: the words, the button and nothing else in front of the car */
@media(max-height:520px){
  #ig{ --btn:clamp(84px,24vh,112px) }
  .ig-inst{ display:none }
}

/* a tall or squarish window: the plate is a band scaled so the whole car and its charger fit the width, with the
   words above it and the console below. The band's top and foot fade into the dark, so it reads as dusk over the
   river rather than a photograph with an edge. */
@media(max-aspect-ratio:31/20){
  :root{
    --wf:calc((100vw - 2 * var(--m)) / (var(--cr) - var(--cl)));
    --pw:max(100vw,min(var(--wf),calc(.875 * var(--A) * 100 * var(--vh))));
    --px:clamp(calc(100vw - var(--pw)),calc(50vw - .6825 * var(--pw)),0px);
    --py:clamp(min(0px,calc(100 * var(--vh) - var(--ph))),calc(.53 * 100 * var(--vh) - .665 * var(--ph)),max(0px,calc(100 * var(--vh) - var(--ph))));
  }
  #ig{ background:linear-gradient(180deg,#0a1028 0,#05070D 62%) }
  #ig .ig-plate{
    -webkit-mask-image:linear-gradient(180deg,transparent var(--py),#000 calc(var(--py) + .24 * var(--ph)),#000 calc(var(--py) + .8 * var(--ph)),transparent calc(var(--py) + var(--ph)));
            mask-image:linear-gradient(180deg,transparent var(--py),#000 calc(var(--py) + .24 * var(--ph)),#000 calc(var(--py) + .8 * var(--ph)),transparent calc(var(--py) + var(--ph)));
  }
  #ig .ig-veil{
    background:
      linear-gradient(180deg,rgba(5,7,13,.7) 0%,rgba(5,7,13,.42) 30%,rgba(5,7,13,0) 46%),
      linear-gradient(0deg,rgba(5,7,13,.92) 0%,rgba(5,7,13,.66) 22%,rgba(5,7,13,0) 40%);
  }
  .ig-main{ margin-top:0; flex:1 1 auto; display:flex; flex-direction:column; max-width:46rem; padding-top:clamp(8px,2vh,22px) }
  .ig-tt{ order:3; flex:1 1 100%; max-width:40rem; margin:4px 0 0; padding:0; border:0; font-size:clamp(.95rem,2.2vw,1.1rem) }
  .ig-pod{ margin-top:auto; max-width:none }
  .ig-legend{ margin-top:clamp(8px,1.6vh,14px) }
}

/* phone: the words on top, the whole car under them, and the console at the foot with the button on the left and
   four numbers beside it, no needle */
@media(max-width:720px){
  #ig{ --btn:clamp(112px,17vh,148px) }
  .ig-main{ max-width:none }
  .ig-eyebrow{ letter-spacing:.15em }
  .ig-h{ font-size:clamp(1.55rem,min(7.6vw,5.4vh),2.3rem) }
  .ig-h2{ font-size:max(17px,clamp(1.05rem,min(4.6vw,3.2vh),1.5rem)) }
  .ig-go{ font-size:clamp(.95rem,min(4.4vw,3.2vh),1.2rem) }
  .ig-pod{ flex-wrap:nowrap; gap:14px }
  .ig-center{ align-self:center }
  .ig-inst{
    flex:1 1 0; max-width:none; padding:4px 8px; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:0; text-align:center;
  }
  .ig-i--cost, .ig-i--row{
    grid-column:auto; grid-row:auto; display:flex; flex-direction:column-reverse; align-items:center; gap:4px;
    padding:9px 4px; border-bottom:0;
  }
  .ig-i:nth-child(even){ border-left:1px solid rgba(255,255,255,.09) }
  .ig-i:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.09) }
  .ig-i--cost .ig-dial{ display:none }
  .ig-i--cost .ig-l, .ig-i--cost .ig-n{ display:block }
  .ig-n{ font-size:clamp(.95rem,4.4vw,1.15rem) }
  .ig-l{ font-size:max(10px,.5rem); letter-spacing:.1em; line-height:1.25 }
  .ig-bar{ display:none }
}

/* the intro and the second question need the room the words had. In a tall window the words stay off the car: below 900px tall the stripes go, and
   the car's band sits a little lower; below 700px the "press start" line goes too (the button says it) and so does the middle of the intro ("proving
   ground" carries it). A phone on its side keeps the button on the screen the same way. A narrow phone keeps the case's line to one line: below 390px
   wide the state goes, and below 360px the city. The words get a soft edge where the skyline and the car run behind them */
@media(max-aspect-ratio:31/20){ .ig-h2, .ig-go{ text-shadow:0 1px 14px rgba(5,7,13,.72) } }
@media(max-width:599.98px), (min-aspect-ratio:31/20) and (min-width:720px) and (max-width:799.98px), (max-height:520px){ .ig-st{ display:none } }
@media(max-width:389.98px){ .ig-st2{ display:none } }
@media(max-width:359.98px){ .ig-h{ font-size:clamp(1.3rem,6.9vw,1.6rem) } }
@media(max-aspect-ratio:31/20) and (max-width:719.98px) and (max-height:899.98px){
  .ig-stripes{ display:none }
  :root{ --py:clamp(min(0px,calc(100 * var(--vh) - var(--ph))),calc(.55 * 100 * var(--vh) - .665 * var(--ph)),max(0px,calc(100 * var(--vh) - var(--ph)))) }
}
@media(max-aspect-ratio:31/20) and (max-width:719.98px) and (max-height:700px){
  .ig-go, .ig-tt-x{ display:none }
  :root{ --py:clamp(min(0px,calc(100 * var(--vh) - var(--ph))),calc(.57 * 100 * var(--vh) - .665 * var(--ph)),max(0px,calc(100 * var(--vh) - var(--ph)))) }
}
@media(max-height:520px){
  .ig-go, .ig-tt-x{ display:none }
  .ig-tt{ order:3; flex-basis:100%; margin:0; padding:0; border:0 }
}
@media(prefers-reduced-motion:reduce){
  #ig .ig-cover, #ig .ig-plate, .ig-idle, .ig-lit, .ig-breath, .ig-leg, .ig-inst, .ig-cap{ transition:none !important }
  .ig-breath, .ig-breath::after{ animation:none !important }
  .ig-breath::after{ opacity:.6 }
  #ig.flash .ig-flash{ animation:none }
}

/* ---------- the cases, below the start screen ----------------------------------------------------------------------------------------------
   Every case on the Test Track (data/cases.json): Case 01 large, its button pressing Start the way the one above does; the apps, each opening its case
   study on paddock20.com until it moves in. The ground stays the start screen's dark, so nothing here sits on the photograph. A wide window lays the
   six out as a three-by-three (Case 01 two by two), a middling one as two across (Case 01 and the last app the full width), a phone as one column. */
.tt-cases{ position:relative; background:#05070D; padding:clamp(56px,10vh,104px) max(clamp(18px,4.2vw,64px),calc((100% - 1180px) / 2)) clamp(64px,11vh,120px) }
.tc-eyebrow{ margin:0 0 .85em; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--amber) }
.tt-cases .ig-stripes{ margin-bottom:clamp(12px,2.2vh,20px) }
.tc-h{ margin:0 0 .45em; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.6rem,4.2vw,2.6rem); line-height:1.02; letter-spacing:-.025em; text-wrap:balance }
.tc-lede{ margin:0 0 clamp(24px,4vh,36px); max-width:40rem; font-size:17px; line-height:1.55; color:rgba(240,242,245,.84) }
.tc-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:minmax(0,1fr) }
.tc{ min-width:0; margin:0; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 40%),rgba(10,14,24,.9);
  box-shadow:inset 0 1px 0 rgba(229,231,235,.08),0 24px 60px -28px rgba(0,0,0,.9) }
.tc-img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0a0e18; border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)) }
.tc-img img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 0 }
.tc-body{ flex:1; display:flex; flex-direction:column; padding:16px 18px 18px }
.tc-k{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase }
.tc-n{ padding:.3em .65em .3em .55em; border:1px solid rgba(255,255,255,.2); border-left:3px solid var(--ignition); color:#fff; line-height:1.2 }
.tc-s{ color:var(--amber) }
.tc-s--live{ color:var(--sky) }
.tc-t{ margin:0 0 .2em; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink); font-size:1.35rem; line-height:1.08; letter-spacing:-.01em }
.tc-g{ margin:0 0 .7em; font-size:13px; line-height:1.4; color:var(--ink-3) }
.tc-l{ margin:0 0 1em; font-size:15px; line-height:1.5; color:var(--ink-2) }
.tc-go{ margin:auto 0 0 }
/* Case 01's four readings, the start screen's cluster at rest */
.tc-stats{ list-style:none; margin:0 0 1.3em; padding:12px 14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px); background:rgba(5,7,13,.55) }
.tc-stats li{ min-width:0; margin:0 }
.tc-stats b{ display:block; font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums }
.tc-stats span{ display:block; margin-top:3px; font-size:13px; line-height:1.35; color:var(--ink-3) }
@media(min-width:1080px){ .tc--lead .tc-stats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }   /* the lead has the width; a card in the side
   column keeps two by two, or 4,131 and 104 run together (the usability sweep at 1180) */
.tc-a{ margin-top:auto; align-self:flex-start; display:inline-block; padding:12px 0; font-size:12px; line-height:1.5; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); text-decoration:none }
.tc-a::after{ content:' \2197'; margin-left:.4em }
.tc-a[href^="/"]::after{ content:' \2192' }               /* a case that has moved in opens here, so its arrow points along, not out */
.tc-a:hover{ color:#fff }
.tc-a:focus-visible{ outline:2px solid var(--speed-blue); outline-offset:3px; border-radius:2px }
.tc--lead .tc-t{ font-size:clamp(1.6rem,3vw,2.3rem) }
.tc--lead .tc-l{ font-size:17px; color:rgba(240,242,245,.86) }
@media(min-width:720px){
  .tc-list{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .tc--lead, .tc:last-child{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
  .tc--lead .tc-img, .tc:last-child .tc-img{ aspect-ratio:auto; min-height:100%; border-bottom:0; border-right:1px solid var(--hairline,rgba(229,231,235,.1)) }
  .tc--lead .tc-body, .tc:last-child .tc-body{ padding:clamp(20px,2.4vw,32px) }
}
@media(min-width:1080px){
  .tc-list{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .tc--lead{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column }
  .tc--lead .tc-img{ aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)) }
  /* the lead spans two rows of cards, so its photo takes the height the two beside it add, rather than a gap above Press Start */
  .tc--lead .tc-img{ aspect-ratio:auto; flex:1 1 auto; min-height:clamp(240px,22vw,400px) }
  .tc--lead .tc-body{ flex:0 0 auto }
  .tc:last-child{ grid-column:auto; display:flex }
  .tc:last-child .tc-img{ aspect-ratio:16/9; min-height:0; border-right:0; border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)) }
  .tc:last-child .tc-body{ padding:16px 18px 18px }
}
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .tc-k, .tc-a, .tc-eyebrow{ font-size:var(--t-cap) }
  .tc-stats span{ font-size:var(--t-foot) }
  .tc-g{ font-size:var(--t-foot) }
  .tc-l{ font-size:var(--t-sub) }
  .tc-lede, .tc--lead .tc-l{ font-size:var(--t-body) }
}
@media(prefers-reduced-motion:reduce){ .tc-a{ transition:none } }

/* The band under the start screen: what this is, then four questions with the figure that answers each (2026-10-10). It sits on the cases' dark ground and
   shares its eyebrow, stripes, headline, lede and link; the cards are its own (a figure, not a photograph), so the .tc rules that lay a list of cases out do not
   reach them. Four across on a wide window, two by two in the middle, one column on a phone. */
.tt-what{ position:relative; background:#05070D; padding:clamp(56px,10vh,104px) max(clamp(18px,4.2vw,64px),calc((100% - 1180px) / 2)) clamp(24px,4vh,40px) }
.tt-what .ig-stripes{ margin-bottom:clamp(12px,2.2vh,20px) }
.tt-what + .tt-cases{ padding-top:clamp(24px,4vh,40px) }
.tw-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:minmax(0,1fr) }
.tw{ min-width:0; margin:0; display:flex; flex-direction:column; padding:18px 18px 6px;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 40%),rgba(10,14,24,.9);
  box-shadow:inset 0 1px 0 rgba(229,231,235,.08),0 24px 60px -28px rgba(0,0,0,.9) }
.tw-q{ margin:0 0 16px; font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink); font-size:1.1rem; line-height:1.12; letter-spacing:-.01em; text-wrap:balance }
.tw-f{ margin:0 0 .7em; display:flex; flex-direction:column; gap:4px }
.tw-n{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,4.4vw,2.7rem); line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums }
.tw-u{ font-size:13px; line-height:1.35; color:var(--ink-3) }
.tw-l{ margin:0 0 .8em; font-size:15px; line-height:1.5; color:var(--ink-2); text-wrap:pretty }
.tw .tc-a{ margin-top:auto }
/* the question's room is two lines in a pair and three in a row of four, so the figures sit level across a row */
@media(min-width:640px){ .tw-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } .tw-q{ min-height:2.24em } }
@media(min-width:1080px){ .tw-list{ grid-template-columns:repeat(4,minmax(0,1fr)) } .tw-q{ min-height:3.36em } }
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .tw-u{ font-size:var(--t-foot) }
  .tw-l{ font-size:var(--t-sub) }
}

/* ---------- 2. the landing behind it ------------------------------------- */

/* the plate is the ground, not a texture: the same image and crop the start screen shows */
body.lp::before{
  background-image:
    linear-gradient(180deg,rgba(5,7,13,.30) 0%,rgba(5,7,13,.10) 30%,rgba(5,7,13,.72) 74%,var(--g-black) 100%),
    var(--page-bg) !important;
  background-size:cover,cover !important;
  background-position:center top,var(--page-pos,25% top) !important;
}

/* in a wide window the landing reads the same plate position as the start screen, so the shot does not jump when the
   door lifts; a tall window keeps the skyline crop here, because the answer covers the band the start screen frames */
@media(min-aspect-ratio:31/20){
  body.lp::before{ background-size:cover,var(--pw) auto !important; background-position:center top,var(--px) var(--py) !important }
}

/* the first screen is open: the shot on top, the answer at its foot */
.lp .hero{ display:flex; flex-direction:column; justify-content:flex-end; min-height:calc(100svh - var(--navh) - 96px) }
.lp .hero-panel{
  max-width:580px; padding:clamp(20px,3.2vw,32px) clamp(20px,3.4vw,36px);
  background:linear-gradient(100deg,rgba(8,11,20,.84) 0%,rgba(8,11,20,.74) 56%,rgba(8,11,20,.42) 100%);
}
.lp .hero-eyebrow{ margin-bottom:.8em }
.lp .hero h1{ font-size:clamp(2.1rem,6.6vw,3.35rem); margin-bottom:.4em }
.lp .hero-blob{ margin-bottom:1.3em }

/* phone: a shorter panel, so the shot keeps the top of the first screen */
@media(max-width:620px){
  .ix a{ aspect-ratio:16/9 }
  .lp .hero-panel{ padding:20px 18px }
  .lp .hero h1{ font-size:clamp(1.9rem,8.6vw,2.4rem) }
  .lp .hero-blob{ font-size:.95rem; line-height:1.55; margin-bottom:1.1em }
}
/* and, between 600px and 620px, a four-across strip. Under 600px it is the two-by-two the strip is everywhere else: at
   the phone type scale a label such as DEGRADATION is wider than a quarter of the screen. */
@media(min-width:600px) and (max-width:620px){
  .lp .statstrip{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .lp .statstrip li{ padding:12px 8px; border-right:1px solid var(--hairline,rgba(229,231,235,.1)); border-bottom:0 }
  .lp .statstrip li:last-child{ border-right:0 }
  .lp .statstrip .v{ font-size:1.16rem }
  .lp .statstrip .k{ font-size:max(10px,.5rem); letter-spacing:.08em; line-height:1.3; margin-top:7px }
}

/* the way in: a glass heading over the tiles, then one tile per page, each showing the plate that page is drawn on */
#inside > .g{ margin-bottom:var(--gap) }
.ix{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) }
@media(min-width:620px){ .ix{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1040px){
  .ix{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:dense }
  .ix-lead{ grid-column:span 2; grid-row:span 2 }
  .ix-lead a{ aspect-ratio:auto !important }      /* two rows tall here, so the grid sets its height; below 1040 it keeps 16:10 (it was 2px tall on a phone) */
}
.ix li{ margin:0; padding:0; display:flex }
.gx .ix a{
  position:relative; display:block; flex:1; min-height:0; aspect-ratio:16/10; overflow:hidden; isolation:isolate;
  border:1px solid var(--hairline,rgba(229,231,235,.1)); border-radius:var(--r-box,4px); background:#0a0e18;
  color:var(--ink); text-decoration:none;
  box-shadow:var(--bevel-top),var(--drop-1);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.ix img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  transition:transform .9s var(--ease),filter .4s;
}
.ix a::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,0) 28%,rgba(5,7,13,.58) 60%,rgba(5,7,13,.95) 100%);
}
.ix-body{ position:absolute; z-index:1; left:0; right:0; bottom:0; display:block; padding:16px 18px 18px }
.ix-t{ display:block; margin:.32em 0 .22em; font-family:var(--display); font-size:1.28rem; line-height:1.08; letter-spacing:-.015em }
.ix-s{ display:block; font-size:.86rem; line-height:1.4; color:var(--ink-2) }
.ix-lead .ix-body{ padding:clamp(20px,3vw,34px) }
.ix-lead .ix-t{ font-size:clamp(1.7rem,3.2vw,2.5rem) }
.ix-lead .ix-s{ font-size:1rem; max-width:34ch }
.gx .ix a:hover{ border-color:rgba(244,81,30,.55); transform:translateY(-3px); box-shadow:var(--bevel-top),0 28px 70px -22px rgba(244,81,30,.3),var(--drop-2) }
.ix a:hover img{ transform:scale(1.045) }
.gx .ix a:focus-visible{ outline:2px solid var(--ignition); outline-offset:3px }
@media(prefers-reduced-motion:reduce){ .ix a, .ix img{ transition:none } .gx .ix a:hover{ transform:none } .ix a:hover img{ transform:none } }

/* the way back to the Test Track (.cs-trail) is in garage.css: every case page carries it */

/* the story the start screen used to carry: its own sizes and colors (funnel.css). The page column's element rules (.gx h2, .gx p, .gx a) outrank a
   single class, so what they would change is said again here */
/* it keeps the ground it had under the start screen: a dark band the width of the window, fading in from the photograph and back out to it */
.cs-story{ display:grid; gap:clamp(56px,10vh,100px); margin-inline:calc(50% - 50vw); padding:clamp(96px,20vh,200px) calc(50vw - 50%);
  background:linear-gradient(180deg,rgba(5,7,13,0) 0,rgba(5,7,13,.88) clamp(96px,18vh,200px),rgba(5,7,13,.88) calc(100% - clamp(96px,18vh,200px)),rgba(5,7,13,0) 100%) }
.cs-story .fn-sec{ max-width:44rem; margin:0 }
.gx .cs-story .fn-h{ font-size:clamp(1.6rem,4.2vw,2.6rem); line-height:1.02; letter-spacing:-.025em; margin:0 0 .5em }
.gx .cs-story .fn-eyebrow{ margin:0 0 .85em; color:var(--amber); line-height:1.4 }
.gx .cs-story .fn-p{ margin:0 0 1em; color:rgba(240,242,245,.88); line-height:1.55 }
.gx .cs-story .fn-how-b .fn-p{ line-height:1.5 }
.gx .cs-story .fn-note{ margin:1em 0 0; color:var(--ink-3); line-height:1.5 }
.gx .cs-story .fn-axis{ margin:1.4em 0 .5em; color:var(--ink-3); line-height:1.4 }
.gx .cs-story .fn-fine{ margin:14px 0 0; color:var(--ink-3); line-height:1.45 }
.gx .cs-story .fn-now{ margin:1.1em 0 0; color:var(--ink-2); line-height:1.45 }
.gx .cs-story a{ border-bottom:0 }

/* Start opens the case as a page of its own. Where the browser can, the two pages cross-fade: the start screen lets go as the case settles in. Only
   these two pages opt in, so nothing else on the site changes how it opens. Snapshots move, never the live page, so no glass loses its blur. */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:tt-out .55s cubic-bezier(.4,0,.2,1) both }
::view-transition-new(root){ animation:tt-in .75s cubic-bezier(.2,.7,.25,1) both }
@keyframes tt-out{ to{ opacity:0; transform:scale(1.012) } }
@keyframes tt-in{ from{ opacity:0; transform:scale(.996) } }
@media(prefers-reduced-motion:reduce){ @view-transition{ navigation:none } }

/* ---------- phone type: Apple's scale (the rule and the four sizes are set out at the end of garage.css) -------------
   The start screen and the landing carry type of their own, so the same four sizes are set here. Labels are 12px, notes
   13px, supporting lines 15px, reading text 17px. The instrument figures and the headlines keep their display sizes. */
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .ig-issue, #ig button.ig-tool, .ig-eyebrow, .ig-hint, .ig-l, .ig-leg{ font-size:var(--t-cap) }
  .ig-tt{ font-size:var(--t-sub) }
  @media (orientation:landscape){ .ig-tt{ font-size:var(--t-cap); line-height:1.4 } }
  .ig-leg small{ font-size:1em }
  .ig-legend{ font-size:var(--t-foot) }
  .ix-s{ font-size:var(--t-sub) }
  .ix-lead .ix-s, .lp .hero-blob{ font-size:var(--t-body) }
  .ig-go{ font-size:max(var(--t-body),clamp(1.02rem,min(2.3vw,3.2vh),1.65rem)) }
}
/* the lettering engraved on the button is part of its drawing, so on a phone on its side, where the button is smaller
   than a portrait one, it scales with the button and reads 12px on the largest */
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .ig-leg{ font-size:max(10px,min(var(--t-cap),calc(var(--btn) * .105))) }
  /* the 12px eyebrow takes a second line in the room beside the car, so the gaps around the words close up to pay for it */
  .ig-main{ padding-top:4px }
  .ig-eyebrow, .ig-go{ margin-bottom:.5em }
  /* and the hint sits beside the button instead of under it */
  .ig-center{ flex-direction:row; gap:16px }
  .ig-hint{ max-width:9rem; text-align:left; line-height:1.3 }
}
@media (max-width:599.98px){
  .ig-go{ font-size:max(var(--t-body),clamp(.95rem,min(4.4vw,3.2vh),1.2rem)) }
  .ig-n{ font-size:max(var(--t-body),clamp(.95rem,4.4vw,1.15rem)) }
  /* the console reads as rows, a label and its figure on one line, so a 12px label never has to fit half a phone; the
     hint wraps to the button's width instead of pushing the console narrower */
  .ig-inst{ grid-template-columns:minmax(0,1fr); padding:2px 12px; text-align:left }
  .ig-i--cost, .ig-i--row{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:center;
    padding:7px 0; border-bottom:1px solid rgba(255,255,255,.09) }
  .ig-i:nth-child(even){ border-left:0 }
  .ig-i:last-child{ border-bottom:0 }
  .ig-n{ justify-self:end }
  .ig-hint{ max-width:calc(var(--btn) + 12px); text-align:center; line-height:1.3 }
}
/* a 320px phone has no room beside the button for a console, and gives the shot the room instead */
@media (max-width:359.98px){ .ig-inst{ display:none } }
@media (max-width:599.98px){
  .ig-lock{ flex-direction:column; align-items:flex-start; justify-content:center; gap:5px }
  .ig-top img{ height:21px }
  .ig-issue{ padding:0; border:0; gap:6px; letter-spacing:.18em }
  #ig .tt-ico{ width:16px; height:16px }
}

/* ---------- the crew tag in the start screen's top bar (build.py CREW_TAG; the band it points to is next_band(), alive.css) ----------
   It sits in the spacer, positioned, so nothing in the first screen moves, and it shortens to "Crew", then goes, as the spacer narrows.
   Its type keeps to the phone scale (12, 13, 15, 17px). */
.ig-sp:has(.cw-tag){ position:relative; container-name:cwsp; container-type:inline-size }
.cw-tag{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; padding:.5em .85em .5em .7em; border:1px solid rgba(255,255,255,.22); border-left:3px solid var(--ignition); background:rgba(5,7,13,.6); color:#fff; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; line-height:1.2; text-decoration:none; white-space:nowrap }
.cw-tag:hover{ border-color:rgba(255,255,255,.4); border-left-color:var(--ignition) }
.cw-tag:focus-visible{ outline:2px solid var(--speed-blue); outline-offset:2px }
.cw-short{ display:none }
@container cwsp (max-width:157px){ .cw-full{ display:none } .cw-short{ display:inline } }
@container cwsp (max-width:84px){ .cw-tag{ display:none } }
@media (max-width:520px){ .cw-tag{ padding:.45em .55em .45em .5em; letter-spacing:.1em } }

/* ---------- the list of cases, for a screen reader (2026-10-06) ---------- */
/* The arrow after a case's link is decoration. It keeps its look and has empty alternative text, so a screen reader reads
   only the link's words. A browser that does not know the "/ ''" form drops these two and keeps the arrows set above. */
.tc-a::after{ content:' \2197' / '' }
.tc-a[href^="/"]::after{ content:' \2192' / '' }

/* ---------- controls that need script (2026-10-06) ---------- */
/* Without script the sound switch does nothing, so it is not shown (head() puts .js on <html> before the first paint). */
html:not(.js) #ig #ig-snd{ display:none }

/* ── The cover says what it is (Gavin, 2026-10-10: he loves how TezLab's cover reads: one plain claim, a line, a proof row, and art that is data) ──
   The start screen's three lines and the dark console are his and stay as they were. Added: a plain line saying what the case is and the record in four
   counts (one block, .ig-facts: under the console on a phone, bottom right over the road in a wide window), and under each of the band's four answers
   the shape behind it. */
.ig-facts{ position:relative; z-index:1; margin:0; padding:clamp(14px,2.6vh,24px) var(--pad) clamp(28px,5vh,48px) }
.ig-facts > *{ max-width:30rem }
.ig-what{ display:none; margin:0 0 14px; font-size:clamp(.92rem,1.05vw,1.02rem); line-height:1.5; color:rgba(240,242,245,.82); text-wrap:pretty }
.ig-proof{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px }
.ig-proof li{ display:flex; flex-direction:column; gap:4px; min-width:0; padding-left:10px; border-left:3px solid var(--ignition) }
.ig-proof li:nth-child(even){ border-left-color:var(--sky) }
.ig-proof b{ font-family:var(--display); font-weight:900; font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums }
.ig-proof span{ font-size:max(12px,.75rem); font-weight:700; letter-spacing:.1em; line-height:1.3; text-transform:uppercase; color:rgba(240,242,245,.7) }
/* a wide window keeps the copy and the console on the left and the car on the right: the facts sit bottom right, on the road under the car, above "What this is" */
@media(min-aspect-ratio:31/20) and (min-height:600px) and (min-width:1100px){
  .ig-facts{ position:absolute; right:var(--pad); bottom:calc(max(18px,env(safe-area-inset-bottom)) + 52px); left:auto; width:min(31rem,34vw); margin:0; padding:0;
    text-shadow:0 1px 14px rgba(5,7,13,.85) }
  .ig-facts > *{ max-width:none }
  .ig-proof{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 14px }
  .ig-proof b{ font-size:clamp(1.2rem,1.75vw,1.6rem) }
}
/* the sentence shows where there is room for it under the car (a wide window at least 860px tall); elsewhere the band below says it */
@media(min-aspect-ratio:31/20) and (min-width:1100px) and (min-height:860px){ .ig-facts .ig-what{ display:block } }
.tw-s{ display:block; width:100%; height:34px; margin:0 0 .85em; overflow:visible }
.tw-s rect{ fill:var(--ignition) }
.tw-s--b rect{ fill:var(--sky) }
.tw-s .a{ fill:rgba(244,81,30,.2) }
.tw-s .l{ fill:none; stroke:var(--ignition); stroke-width:1.8; stroke-linejoin:round; vector-effect:non-scaling-stroke }
.tw-s--m .t{ fill:rgba(255,255,255,.1) }
.tw-s--m .f{ fill:var(--sky) }
/* the calmer type (Gavin, 2026-10-10, chose it over keeping the second and third lines in capitals): the question stays heavy capitals; the second
   line is a soft sentence and "Press start" is the one orange line. It also fits a 900px-tall laptop, which the capitals did not (the console ran 50px
   past the fold). The class is on #ig in the markup (build.py hub_markup()). */
#ig.ig--calm .ig-h2{ text-transform:none; font-weight:700; letter-spacing:0; line-height:1.25; color:rgba(240,242,245,.9); font-size:clamp(1.05rem,min(2vw,3.1vh),1.7rem) }
#ig.ig--calm .ig-go{ text-transform:none; font-weight:800; letter-spacing:0; font-size:clamp(.98rem,min(1.7vw,2.7vh),1.3rem) }
/* the fifth question, the one that divides people (Gavin, 2026-10-10: "can the car be used to create income"), has the whole row */
@media(min-width:640px){ .tw:nth-child(5){ grid-column:1 / -1 } }
@media(min-width:1080px){
  .tw:nth-child(5){ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,2.1fr) minmax(0,1.2fr); column-gap:30px; align-items:center; padding:22px 22px 18px }
  .tw:nth-child(5) .tw-q{ grid-column:1; grid-row:1 / span 2; margin:0; min-height:0; font-size:1.35rem }
  .tw:nth-child(5) .tw-f{ grid-column:2; grid-row:1 / span 2; margin:0 }
  .tw:nth-child(5) .tw-s{ grid-column:3; grid-row:1 / span 2; margin:0; height:64px }
  .tw:nth-child(5) .tw-l{ grid-column:4; grid-row:1; margin:0 0 .5em; align-self:end }
  .tw:nth-child(5) .tc-a{ grid-column:4; grid-row:2; margin:0; align-self:start }
}