/* ==========================================================================
   The front door. Loaded by the home page only, after garage.css.

   Two parts:
   1. #ig, the start screen. It exists in the HTML but is display:none until the
      inline script in the head puts .gate on <html> (no JavaScript, no gate).
      ignition.js runs it; a visitor who has started this session never sees it.
   2. The landing behind it: a tall open first screen for the skyline, 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 sides of the door, so
   when the start screen lifts the shot does not jump.
   ========================================================================== */

/* ---------- 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 } }

#ig{ display:none }
html.gate #ig{ display:block }
html.gate, html.gate body{ overflow:hidden }
@media print{ #ig{ display:none !important } }

#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:fixed; inset:0; z-index:100;
  overflow-x:hidden; overflow-y:auto;             /* a very short window scrolls; it never clips the button */
  background:#05070D; color:var(--ink);
  opacity:1; transition:opacity .75s cubic-bezier(.3,.85,.4,1);
  -webkit-tap-highlight-color:transparent;
}
#ig[data-s="leaving"]{ opacity:0; pointer-events:none; z-index:-1; }

#ig .ig-plate{
  position:fixed; 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:fixed; 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:fixed; 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} }

.ig-stage{
  position:relative; z-index:1; min-height:100%;
  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; align-items:center; gap:14px; min-height:48px }
.ig-top img{ height:24px; width:auto; display:block }
.ig-issue{ padding-left:14px; border-left:1px solid rgba(255,255,255,.2);
  font-size:.62rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:rgba(240,242,245,.66) }
.ig-sp{ flex:1 }
#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:.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(.62rem,1.55vh,.72rem); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--amber) }
.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;
}
.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:.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: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:.66em; font-weight:700; letter-spacing:.3em; color:rgba(255,255,255,.5); margin-bottom:.32em }
#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 13rem; min-width:0; max-width:31rem; container-type:inline-size; 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:.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:10.5px; 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:8.6px; letter-spacing:.17em }

.ig-legend{ margin:clamp(10px,2vh,18px) 0 0; font-size:.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-i--row{ grid-template-columns:1fr; row-gap:2px; padding:7px 0 }
  .ig-n{ font-size:1rem }
  .ig-l{ font-size:.52rem; letter-spacing:.1em; line-height:1.25 }
  .ig-bar{ margin-top:5px }
}

/* a short window: give the shot the room */
@media(max-height:760px){
  .ig-eyebrow{ margin-bottom:.6em }
}
@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-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-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:.5rem; letter-spacing:.1em; line-height:1.25 }
  .ig-bar{ display:none }
}

@media(prefers-reduced-motion:reduce){
  #ig, #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 }
}

/* ---------- 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 }
.lp h1[tabindex="-1"]:focus{ outline:0 }

/* 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:.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 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-lead a{ aspect-ratio:auto !important }
.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-k{ display:block; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); text-shadow:0 1px 10px rgba(0,0,0,.7) }
.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 landing rises in as the start screen lifts */
main.ig-in{ animation:ig-rise .8s cubic-bezier(.3,.85,.4,1) both; animation-delay:-.1s }
@keyframes ig-rise{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media(prefers-reduced-motion:reduce){ main.ig-in{ animation: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, .ix-k{ font-size:var(--t-cap) }
  .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: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 } .ig-issue{ display:none } }