/* ==========================================================================
   Paddock Garage: layout system, built on assets/glass.css
   Mobile first, no exceptions. Base rules are the phone. Media queries scale up.
   Load AFTER glass.css.
   ========================================================================== */

:root{
  /* chart marks: brand hues stepped into the dark-mode lightness band
     (OKLCH L .48-.67, C >= .10) so they pass CVD separation on #05070D.
     UI accents keep the brighter brand values; these are for marks only. */
  --m1:#E84301;   /* ignition, stepped */
  --m2:#0791C8;   /* sky, stepped      */
  --m3:#B97504;   /* amber, stepped    */
  --m-neutral:#7F8794;  /* steel: reference marks only, never identity */
  --grid:rgba(229,231,235,.09);

  --ink:#F0F2F5; --ink-2:#AEB6C2; --ink-3:#8A93A0;
  --ignition:#F4511E; --amber:#F6A22B; --sky:#57B4E6; --steel:#9AA0AA;

  --navh:60px;
  --gap:14px;
  --pad:16px;
  --maxw:1120px;
  --display:"Arial Black","Arial Bold",Arial,sans-serif;
}

/* ---------- base ----------------------------------------------------------
   The legacy pages carried this reset in their own inline <style>, and
   glass.css was only ever an overlay on top of it. Generated pages have no
   inline block, so the base layer lives here or not at all. */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:clip }
body{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size:16px;                       /* 16px floor: iOS zooms on focus below it */
  line-height:1.6;
  background:var(--g-black,#05070D);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto }
button,input,select,textarea{ font:inherit; font-size:max(16px,1em) }

/* ---------- page shell ---------------------------------------------------- */
.gx{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  /* .pg-nav is fixed at --navh, so the first line has to clear it */
  padding:
    calc(var(--navh) + var(--pad) + env(safe-area-inset-top))
    calc(var(--pad) + env(safe-area-inset-right))
    calc(56px + env(safe-area-inset-bottom))
    calc(var(--pad) + env(safe-area-inset-left));
}
@media(min-width:720px){ :root{ --pad:26px; --gap:16px } }
@media(min-width:1040px){ :root{ --pad:34px } }

.gx > * + *{ margin-top:26px }
.gx section{ scroll-margin-top:calc(var(--navh) + 16px) }

/* ---------- type ---------------------------------------------------------- */
.gx h1{
  font-family:var(--display);
  font-size:clamp(1.85rem,7.2vw,3.15rem);
  line-height:1.03; letter-spacing:-.022em;
  margin:.16em 0 .3em; text-wrap:balance; color:var(--ink);
}
.gx h1 span{ color:var(--ignition) }
.gx h2{
  font-family:var(--display);
  font-size:clamp(1.15rem,4.4vw,1.6rem);
  line-height:1.14; letter-spacing:-.012em;
  margin:0 0 .5em; text-wrap:balance; color:var(--ink);
}
.gx h3{ font-size:.98rem; font-weight:700; margin:0 0 .3em; color:var(--ink) }
.gx p{ margin:0 0 .85em; color:var(--ink-2); line-height:1.62 }
.gx .prose{ max-width:66ch }
.lede{ color:var(--ink); font-size:clamp(1rem,3.5vw,1.14rem); line-height:1.55 }
.eyebrow{
  font-size:.66rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .55em;
}
.eyebrow b{ color:var(--ignition); font-weight:700 }
.gx a{ color:var(--sky); text-decoration:none; border-bottom:1px solid rgba(87,180,230,.35) }
.gx a:hover{ border-bottom-color:var(--sky) }
.gx a:focus-visible,.pg-menu a:focus-visible,button:focus-visible{
  outline:2px solid var(--ignition); outline-offset:3px; border-radius:3px;
}
.tnum{ font-variant-numeric:tabular-nums }

/* ---------- glass surfaces (e0 recedes, e1 rests, e2 commands) ------------- */
.g{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%),
             var(--g-fill-1,rgba(13,18,32,.58));
  border:1px solid var(--hairline,rgba(229,231,235,.10));
  border-radius:16px; padding:18px var(--pad);
  box-shadow:var(--bevel-top,inset 0 1px 0 rgba(229,231,235,.10)),
             var(--drop-1,0 24px 60px -24px rgba(0,0,0,.85));
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
}
.g-0{ background:var(--g-fill-0,rgba(10,14,25,.36)); box-shadow:none;
      border-color:rgba(229,231,235,.07) }
.g-2{ box-shadow:var(--bevel-top,inset 0 1px 0 rgba(229,231,235,.12)),
      0 0 0 1px rgba(244,81,30,.5),
      0 28px 70px -20px rgba(244,81,30,.32) }

/* A block that is a heading and prose is not an object, so it does not get a
   box. It gets a rule and the backdrop. Glass is kept for data, for the doors
   and for the one commanding number on a page: when every element is a card,
   none of them is emphasis. Padding matches .g so the type keeps the same left
   edge as the blocks above and below it. */
.bare{
  border-top:1px solid var(--hairline,rgba(229,231,235,.10));
  padding:22px var(--pad) 0;
}
.bare > :last-child{ margin-bottom:0 }

/* ---------- grids --------------------------------------------------------- */
.row{ display:grid; gap:var(--gap); grid-template-columns:1fr }
/* A run of like things is one instrument, not a row of boxes. The container
   carries the glass and the cells are divided by hairlines, so eight charging
   lessons or eight site profiles read as one set the eye can move down. The
   grid is one column below 600px and two above it, which is why the edge
   rules are cleared on the first row and the first column separately. */
.cluster{ gap:0; overflow:hidden; padding:0 }
.cluster > .cell{ padding:16px var(--pad); border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.cluster > .cell:first-child{ border-top:0 }
@media(min-width:600px){
  .cluster > .cell:nth-child(2){ border-top:0 }
  .cluster > .cell:nth-child(even){ border-left:1px solid var(--hairline,rgba(229,231,235,.10)) }
}
.cluster > .cell > :last-child{ margin-bottom:0 }
.cluster > .cell h3{ margin-top:0 }
@media(min-width:600px){ .row-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:860px){
  .row-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .row-2-1{ grid-template-columns:2fr 1fr }
}
@media(min-width:600px) and (max-width:859px){ .row-3{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---------- the one number ------------------------------------------------ */
.cmd{ display:grid; gap:4px; padding:22px var(--pad) }
.cmd p,.stat p{ margin:0 }
.cmd .k{ font-size:.66rem; font-weight:700; letter-spacing:.15em;
         text-transform:uppercase; color:var(--ink-3) }
.cmd .v{ font-family:var(--display); font-size:clamp(2.9rem,13vw,4.6rem);
         line-height:.92; letter-spacing:-.03em; color:var(--ink);
         font-variant-numeric:tabular-nums }
.cmd .v em{ font-style:normal; font-size:.38em; letter-spacing:-.01em; color:var(--ink-2);
            margin-left:.14em }
.cmd .sub{ color:var(--ink-2); font-size:.92rem; margin:.35em 0 0; line-height:1.5 }

/* stat tiles */
.stats{ display:grid; gap:0; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden }
@media(min-width:760px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
/* One instrument cluster, not four floating boxes: the section carries the
   glass and the cells are divided by hairlines. */
.stat{ padding:15px var(--pad); border-top:1px solid var(--hairline,rgba(229,231,235,.10));
       border-left:1px solid var(--hairline,rgba(229,231,235,.10)) }
.stats .stat:nth-child(-n+2){ border-top:0 }
.stats .stat:nth-child(odd){ border-left:0 }
@media(min-width:760px){
  .stats .stat{ border-top:0 }
  .stats .stat:nth-child(odd){ border-left:1px solid var(--hairline,rgba(229,231,235,.10)) }
  .stats .stat:first-child{ border-left:0 }
}
.stat .v{ font-family:var(--display); font-size:clamp(1.45rem,5.6vw,2rem); line-height:1;
          letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums }
.stat .v small{ font-family:Arial,sans-serif; font-size:.5em; font-weight:700;
                color:var(--ink-3); margin-left:.2em; letter-spacing:0 }
.stat .k{ font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
          color:var(--ink-3); margin-top:7px }

/* ---------- provenance chips --------------------------------------------- */
.chip{ display:inline-block; font-size:.57rem; font-weight:700; letter-spacing:.11em;
       text-transform:uppercase; padding:3px 8px; border-radius:6px; border:1px solid;
       white-space:nowrap; vertical-align:middle }
.chip-m{ color:var(--amber); border-color:rgba(246,162,43,.35); background:rgba(246,162,43,.1) }
.chip-mo{ color:var(--sky); border-color:rgba(87,180,230,.35); background:rgba(87,180,230,.1) }
.chip-p{ color:var(--steel); border-color:rgba(154,160,170,.32); background:rgba(154,160,170,.09) }
.chip-w{ color:var(--ignition); border-color:rgba(244,81,30,.45); background:rgba(244,81,30,.12) }
/* reported: published by a named source, neither an invoice nor a derivation */
.chip-r{ color:var(--sky); border-color:rgba(87,180,230,.28); background:rgba(87,180,230,.07) }

/* ---------- live strip ---------------------------------------------------- */
.live{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:baseline;
       padding:12px var(--pad); font-size:.82rem; color:var(--ink-2);
       font-variant-numeric:tabular-nums }
.live b{ color:var(--ink); font-weight:700 }
.live .src{ width:100%; color:var(--ink-3); font-size:.68rem; letter-spacing:.04em }
@media(min-width:860px){ .live .src{ width:auto; margin-left:auto } }

/* ---------- tables -------------------------------------------------------- */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px }
.tw table{ border-collapse:collapse; width:100%; font-size:.88rem; min-width:480px }
.tw th{ font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
        color:var(--ink-3); text-align:left; padding:10px 12px;
        border-bottom:1px solid var(--hairline-strong,rgba(229,231,235,.2)); white-space:nowrap }
.tw td{ padding:10px 12px; border-bottom:1px solid var(--hairline,rgba(229,231,235,.1));
        color:var(--ink-2); vertical-align:top; line-height:1.45 }
.tw td:first-child{ color:var(--ink) }
.tw tr:last-child td{ border-bottom:0 }
.tw .n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.tw th.n{ text-align:right }

/* ---------- charts -------------------------------------------------------- */
.chart{ display:block; width:100%; height:auto; overflow:visible }
.chart text{ font-family:Arial,Helvetica,sans-serif; fill:var(--ink-3) }
/* SVG text scales with the viewBox, so these are tuned per breakpoint to land
   near 10px on screen. Phone first: a 720-unit box drawn at ~310px needs ~22u. */
.chart .lab{ font-size:21px; letter-spacing:.04em }
.chart .val{ font-size:23px; font-weight:700; fill:var(--ink) }
@media(min-width:600px){ .chart .lab{ font-size:13px } .chart .val{ font-size:14px } }
@media(min-width:1040px){ .chart .lab{ font-size:11px } .chart .val{ font-size:12px } }
.chart .axis{ stroke:var(--grid); stroke-width:1 }
.chart .bar{ transition:opacity .15s ease, stroke .15s ease; cursor:pointer }
.chart .bar:hover{ opacity:.75 }
.chart .bar[tabindex]:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px }
/* The pinned bar stays visually marked through hover and hand-off between
   bars, since opacity 1 alone is indistinguishable from a bar nobody chose. */
.chart .bar.is-active{ opacity:1; stroke:var(--ignition); stroke-width:2;
                        vector-effect:non-scaling-stroke }
.chart .bar.is-active:hover{ opacity:1 }
.chart-note{ font-size:.74rem; color:var(--ink-3); margin:9px 0 0; line-height:1.5 }

/* ---------- chart detail panel --------------------------------------------
   One panel per bars() chart, matched to its bars by data-panel/id. Server-
   rendered to the peak day so it is never empty; chart.js swaps its content
   on hover (desktop) or tap (any pointer), same complete-by-default rule as
   the bars themselves. */
.chart-detail{ margin-top:14px; padding:13px var(--pad); border-radius:12px;
               background:rgba(255,255,255,.035);
               border:1px solid var(--hairline,rgba(229,231,235,.10)) }
.cd-title{ margin:0 0 10px; font-size:.72rem; font-weight:700; letter-spacing:.1em;
           text-transform:uppercase; color:var(--ink-3) }
.cd-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px }
@media(min-width:600px){ .cd-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(min-width:1040px){ .cd-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) } }
.cd-stat{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.cd-k{ font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
       color:var(--ink-3) }
.cd-v{ font-size:.92rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;
       overflow-wrap:break-word }
.legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 12px; padding:0; list-style:none }
.legend li{ display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--ink-2) }
.legend i{ width:11px; height:11px; border-radius:3px; flex:none }

/* ---------- the switch: chapters ----------------------------------------- */
.chapters{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gap) }
.chapter{ display:grid; grid-template-columns:1fr; gap:0 }
.chapter .ch-n{ font-family:var(--display); font-size:.72rem; letter-spacing:.16em;
                text-transform:uppercase; color:var(--ink-3); margin:0 0 .4em }
.chapter.now .ch-n{ color:var(--ignition) }
.chapter .body{ padding:18px var(--pad) }
.chapter .data{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; padding:0; list-style:none }
.chapter .tw{ margin-top:12px }
.chapter .data li{ font-size:.8rem; color:var(--ink-2); font-variant-numeric:tabular-nums;
                   padding:6px 11px; border-radius:9px; background:rgba(255,255,255,.035);
                   border:1px solid rgba(229,231,235,.07) }
.chapter .data b{ color:var(--ink); font-weight:700 }
@media(min-width:760px){
  .chapter{ grid-template-columns:88px 1fr; gap:0 18px; align-items:start }
  .chapter .ch-n{ text-align:right; padding-top:20px; margin:0 }
}

/* ---------- doors --------------------------------------------------------- */
.doors{ display:grid; gap:var(--gap); grid-template-columns:1fr; list-style:none; margin:0; padding:0 }
@media(min-width:640px){ .doors{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.door{ display:block; padding:18px var(--pad); border-bottom:0 !important; color:inherit }
.door:hover{ border-color:var(--hairline-strong,rgba(229,231,235,.2)) }
.door .k{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
          color:var(--ignition) }
.door h3{ margin:.45em 0 .3em }
.door p{ margin:0; font-size:.87rem }
@media(min-width:640px){ .doors-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1040px){ .doors-4{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
/* the shift timeline: door to door underneath, one bar per batch on the app clock */
.chart .tl-wall{ fill:var(--m-neutral); opacity:.55 }
.chart.tl .val{ fill:#F0F2F5 }

/* ---------- module cards -------------------------------------------------- */
.mod{ padding:16px var(--pad) }
.mod .src{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem;
           color:var(--sky); margin:0 0 .35em; word-break:break-word }
.mod p{ font-size:.88rem; margin:0 }

/* ---------- operating-area diagram --------------------------------------- */
.map{ display:block; width:100%; height:auto }
.map .corr{ stroke:var(--m2); stroke-linecap:round; fill:none;
            filter:drop-shadow(0 0 1.5px rgba(5,7,13,.85)) drop-shadow(0 0 3px rgba(5,7,13,.55)) }
.map .city{ fill:var(--ink) }
.map .cl{ font-family:Arial,Helvetica,sans-serif; font-size:22px; font-weight:700;
          fill:var(--ink-2); letter-spacing:.02em }
@media(min-width:600px){ .map .cl{ font-size:13px } }
@media(min-width:1040px){ .map .cl{ font-size:11px } }
.map .sc{ fill:var(--m1) }

/* ---------- spec tabs ----------------------------------------------------- */
.tabs{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 14px; padding:0; list-style:none }
.tabs button{ font:inherit; font-size:.72rem; font-weight:700; letter-spacing:.09em;
              text-transform:uppercase; color:var(--ink-2); cursor:pointer;
              padding:9px 13px; border-radius:9px; min-height:38px;
              background:var(--g-fill-0,rgba(10,14,25,.36));
              border:1px solid var(--hairline,rgba(229,231,235,.1)) }
.tabs button[aria-selected="true"]{ color:var(--ink); border-color:rgba(244,81,30,.5);
              box-shadow:0 0 0 1px rgba(244,81,30,.22) }
.panel[hidden]{ display:none }

/* legacy fragments dropped into new pages */
.legacy :is(h3,h4){ color:var(--ink); margin:1.3em 0 .35em; font-size:.98rem }
.legacy p,.legacy li{ color:var(--ink-2); line-height:1.62 }
.legacy table{ border-collapse:collapse; width:100%; font-size:.87rem; min-width:460px }
.legacy th,.legacy td{ padding:9px 12px; text-align:left;
  border-bottom:1px solid var(--hairline,rgba(229,231,235,.1)) }
.legacy th{ font-size:.62rem; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3) }
.legacy img{ max-width:100%; height:auto; border-radius:12px; display:block; margin:14px 0 6px }
.legacy figcaption,.legacy .cap{ font-size:.76rem; color:var(--ink-3); margin:0 0 14px }
.legacy .tbl-wrap,.legacy .scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---------- spec lists + skill grid --------------------------------------- */
.spec{ margin:0; display:grid; gap:0 }
.spec dt{ font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
          color:var(--ignition); margin-top:16px }
.spec dt:first-child{ margin-top:0 }
.spec dd{ margin:5px 0 0; color:var(--ink-2); line-height:1.62; font-size:.92rem }
@media(min-width:760px){
  .spec{ grid-template-columns:170px 1fr; gap:0 22px; align-items:baseline }
  .spec dt{ margin-top:14px; text-align:right }
  .spec dd{ margin-top:14px }
  .spec dt:first-child,.spec dt:first-child + dd{ margin-top:0 }
}
.skills{ list-style:none; margin:0; padding:0; display:grid; gap:8px;
         grid-template-columns:1fr }
@media(min-width:560px){ .skills{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:900px){ .skills{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.skills li{ font-size:.86rem; color:var(--ink-2); padding:9px 12px; border-radius:9px;
            background:rgba(255,255,255,.035); border:1px solid rgba(229,231,235,.07);
            border-left:2px solid rgba(244,81,30,.5) }

/* ---------- hero, copied from the paddock20.com / paddockgavin.com pattern --
   Both sites run the same opening: eyebrow, a short two-line headline, a short
   intro paragraph, one solid accent button with a ghost link beside it, then a
   four-cell stat strip. The proof sits immediately under the headline instead
   of below a wall of prose. */
.hero{ position:relative }
.hero-panel{
  background:linear-gradient(100deg,rgba(10,14,25,.93) 0%,rgba(10,14,25,.88) 52%,
             rgba(10,14,25,.62) 100%);
  border:1px solid var(--hairline,rgba(229,231,235,.10));
  border-radius:18px;
  padding:clamp(26px,5vw,54px) clamp(20px,4vw,48px);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  max-width:760px;
}
.hero-eyebrow{ font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); margin:0 0 1.1em }
.hero h1{ font-family:var(--display); font-size:clamp(2.4rem,8.4vw,4.15rem); line-height:.98;
  letter-spacing:-.028em; color:var(--ink); margin:0 0 .5em; text-wrap:balance }
.hero h1 em{ font-style:normal; color:var(--ignition) }
.hero-blob{ color:var(--ink-2); font-size:clamp(.98rem,2.4vw,1.08rem); line-height:1.62;
  max-width:52ch; margin:0 0 1.7em }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center }
.btn-primary{ display:inline-flex; align-items:center; min-height:52px; padding:0 26px;
  border-radius:10px; background:var(--ignition); color:#fff !important; font-weight:800;
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  border:0 !important; text-decoration:none }
.btn-primary:hover{ background:#FF6A38 }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; min-height:52px;
  color:var(--ink) !important; font-weight:800; font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; border-bottom:0 !important; text-decoration:none }
.btn-ghost span{ color:var(--ignition) }

/* four-cell stat strip, divided by hairlines, numbers first */
.statstrip{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:18px 0 0;
  padding:0; list-style:none; border:1px solid var(--hairline,rgba(229,231,235,.10));
  border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 46%),
             var(--g-fill-1,rgba(13,18,32,.58));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px) }
@media(min-width:760px){ .statstrip{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.statstrip li{ padding:16px clamp(14px,2.2vw,22px);
  border-right:1px solid var(--hairline,rgba(229,231,235,.10));
  border-bottom:1px solid var(--hairline,rgba(229,231,235,.10)) }
.statstrip li:nth-child(2n){ border-right:0 }
@media(min-width:760px){
  .statstrip li{ border-bottom:0 }
  .statstrip li:nth-child(2n){ border-right:1px solid var(--hairline,rgba(229,231,235,.10)) }
  .statstrip li:last-child{ border-right:0 }
}
.statstrip li:nth-last-child(-n+2){ border-bottom:0 }
.statstrip .v{ font-family:var(--display); font-size:clamp(1.5rem,5vw,2.05rem); line-height:1;
  letter-spacing:-.022em; color:var(--ink); font-variant-numeric:tabular-nums; margin:0 }
.statstrip .v.hot{ color:var(--ignition) }
.statstrip .v.cool{ color:var(--sky) }
.statstrip .k{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:9px 0 0 }

/* the landing plate is the ground, not a texture: much lighter veil */
body.lp::before{
  background-image:
    linear-gradient(180deg,rgba(5,7,13,.42) 0%,rgba(5,7,13,.30) 34%,
                            rgba(5,7,13,.80) 78%,var(--g-black) 100%),
    var(--page-bg) !important;
  background-size:cover,cover !important;
  background-position:center 22% !important;
}

/* ---------- road trip: route, state of charge, charging curves ------------- */
.rt-map{ display:block; width:100%; height:auto; overflow:visible }
.rt-line{ fill:none; stroke:var(--m2); stroke-width:2.5; stroke-linecap:round;
          stroke-linejoin:round; opacity:.32 }
.rt-line-lead{ stroke:var(--m1); stroke-width:3.5; opacity:.95;
               stroke-dasharray:2400; stroke-dashoffset:2400 }
.rt-city circle{ transform-box:fill-box; transform-origin:center }
.rt-dot{ fill:var(--ink) }
.rt-dot-c{ fill:var(--m1) }
.rt-pulse{ fill:var(--m1); opacity:.22 }
.rt-cl{ font-family:var(--display); font-size:19px; fill:var(--ink); letter-spacing:.01em }
.rt-legmi{ font-family:var(--display); font-size:18px; fill:var(--ink) }
.rt-legwh{ font-family:Arial,sans-serif; font-size:15px; font-weight:700; fill:var(--ink-3) }
@media(min-width:600px){
  .rt-cl{ font-size:13px } .rt-legmi{ font-size:12.5px } .rt-legwh{ font-size:10.5px }
}
.rt-soc{ overflow:visible }
.rt-socline{ fill:none; stroke:var(--m1); stroke-width:2.5; stroke-linejoin:round }
.rt-socfill{ fill:var(--m1); opacity:.10 }
.rt-socchg{ fill:var(--m2); opacity:.13 }
.rt-socl{ font-family:var(--display); font-size:15px; fill:var(--ink) }
.rt-socs{ font-family:Arial,sans-serif; font-size:13px; font-weight:700; fill:var(--ink-3) }
@media(min-width:600px){ .rt-socl{ font-size:10.5px } .rt-socs{ font-size:9.5px } }
.rt-curve{ overflow:visible }
.rt-curveline{ fill:none; stroke:var(--m3); stroke-width:2.5; stroke-linejoin:round;
               stroke-linecap:round }
.rt-curvefill{ fill:var(--m3); opacity:.12 }
.rt-pk{ fill:var(--m1); stroke:var(--g-black,#05070D); stroke-width:2 }

@media(prefers-reduced-motion:no-preference){
  .rt-line-lead{ animation:rt-draw 2.6s cubic-bezier(.3,.7,.3,1) .25s forwards }
  @keyframes rt-draw{ to{ stroke-dashoffset:0 } }
  .rt-pulse{ animation:rt-pulse 2.6s ease-out infinite }
  @keyframes rt-pulse{ 0%{ transform:scale(.72); opacity:.30 }
                       70%{ transform:scale(1.5); opacity:0 }
                       100%{ transform:scale(1.5); opacity:0 } }
  .rt-city{ opacity:0; animation:rt-in .5s ease-out forwards;
            animation-delay:calc(.5s + var(--i,0) * .32s) }
  .rt-leg{ opacity:0; animation:rt-in .5s ease-out forwards;
           animation-delay:calc(.9s + var(--i,0) * .32s) }
  @keyframes rt-in{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
  .rt-socline{ stroke-dasharray:2000; stroke-dashoffset:2000;
               animation:rt-draw 2.2s cubic-bezier(.3,.7,.3,1) .2s forwards }
  .rt-curveline{ stroke-dasharray:1400; stroke-dashoffset:1400;
                 animation:rt-draw 1.8s cubic-bezier(.3,.7,.3,1) .15s forwards }
}
@media(prefers-reduced-motion:reduce){
  .rt-line-lead,.rt-socline,.rt-curveline{ stroke-dashoffset:0 }
  .rt-city,.rt-leg{ opacity:1 }
}

/* ---------- figures ------------------------------------------------------- */
.fig{ margin:0 }
.fig + .fig{ margin-top:var(--gap) }
.fig img{ width:100%; height:auto; display:block; border-radius:12px;
          border:1px solid var(--hairline,rgba(229,231,235,.1)) }
.fig figcaption{ font-size:.76rem; color:var(--ink-3); line-height:1.5; margin-top:9px;
                 display:flex; flex-wrap:wrap; gap:6px; align-items:baseline }
.gallery{ display:grid; gap:var(--gap); grid-template-columns:1fr }
@media(min-width:640px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.gallery .fig + .fig{ margin-top:0 }

/* ---------- footnote / rule ----------------------------------------------- */
.rulebar{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  margin-top:14px; padding-top:16px; border-top:1px solid var(--hairline,rgba(229,231,235,.1));
  font-size:.74rem; color:var(--ink-3) }
.rulebar .sp{ margin-left:auto }

/* ---------- backdrop plate, mobile art direction --------------------------
   glass.css veils the plate for desktop. On a portrait phone a 2.39:1 plate
   under `cover` becomes a narrow centre slice, so it stops reading as a
   photograph. Anchor it to the top and lift the veil on small screens. */
@media(max-width:720px){
  body::before{
    background-size:auto 62vh, auto 62vh, cover;
    background-position:center top;
    background-image:
      radial-gradient(140% 70% at 50% 0%, rgba(5,7,13,0) 30%, rgba(5,7,13,.42) 100%),
      linear-gradient(180deg, rgba(5,7,13,.34) 0%, rgba(5,7,13,.30) 22%,
                              rgba(5,7,13,.72) 58%, var(--g-black) 88%),
      var(--page-bg) !important;
  }
}

/* ---------- motion -------------------------------------------------------- */
@media(prefers-reduced-motion:no-preference){
  .g,.door{ transition:border-color .2s cubic-bezier(.2,.7,.25,1),
                       box-shadow .2s cubic-bezier(.2,.7,.25,1) }

  /* The charts draw their own values. This is the only motion the subject
     justifies: the bars arrive the way the measurement did, left to right,
     rather than sliding in because a page loaded.

     The resting state is the full bar. A browser that never runs the
     animation, and anyone who asks for reduced motion below, gets the chart
     complete rather than empty, which is why the keyframe animates towards
     the default instead of away from it. transform-box is what makes
     transform-origin mean the rect rather than the whole SVG canvas. */
  .chart .bar{
    transform-box:fill-box; transform-origin:bottom;
    animation:bar-rise .62s cubic-bezier(.2,.75,.3,1) both;
    animation-delay:calc(var(--i,0) * .035s);
  }
  .chart .bar.hbar{ transform-origin:left; animation-name:bar-grow }
  @keyframes bar-rise{ from{ transform:scaleY(0) } to{ transform:none } }
  @keyframes bar-grow{ from{ transform:scaleX(0) } to{ transform:none } }

  /* The peak label belongs to its bar, so it follows rather than leads. */
  .chart .val{ animation:val-in .5s ease-out both; animation-delay:.42s }
  @keyframes val-in{ from{ opacity:0 } to{ opacity:1 } }

  /* The one commanding number on a page settles instead of appearing. */
  .cmd .v{ animation:cmd-settle .7s cubic-bezier(.2,.75,.3,1) both }
  @keyframes cmd-settle{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
}
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }

/* landscape phones: give the fold back */
@media(max-height:520px) and (orientation:landscape){
  .cmd .v{ font-size:2.4rem }
  .gx > * + *{ margin-top:18px }
}