/* ==========================================================================
   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;
  /* the motorsport set: square-cut controls, machined boxes, and the Paddock20 stripe's slant for what is filled or picked */
  --r-box:4px; --r-ctl:2px; --cut:10px;
  /* Paddock20's canonical Speed Blue (brand tokens, July 2026): the light in the start button's halo and the Stop control.
     -rgb is for glows; -hot is the same blue turned up, for a lit LED. */
  --speed-blue:#57C7F5; --speed-blue-rgb:87,199,245; --speed-blue-hot:#8ADCFF;

  --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-2); 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:var(--r-box); 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 }

/* Text with no panel behind it sits on a photograph, and a photograph has bright places: clouds, a lit stadium, a sky. A soft dark
   halo keeps that text readable wherever it scrolls across one, which measured 1.2 to 3.0 to 1 without it. Text on glass has a
   ground of its own and is left alone. Chart labels get the same as a stroke, because text-shadow does not reach SVG text. */
:root{ --halo:0 0 2px rgba(3,5,10,.9), 0 0 5px rgba(3,5,10,.85), 0 0 12px rgba(3,5,10,.8), 0 0 28px rgba(3,5,10,.65) }
.gx > h1, .gx > p, .gx > .eyebrow, .gx > .rulebar, .gx > .wk-nav,
.bare, .rulebar, .ch-n, .chart-note,
.gx section:not(.g) > :is(p, h2, h3, ul, ol, dl, .eyebrow){ text-shadow:var(--halo) }
.gx svg text{ paint-order:stroke; stroke:rgba(3,5,10,.85); stroke-width:3px; stroke-linejoin:round }
/* and prose with no glass behind it takes the primary ink rather than the secondary one */
.bare :is(p, dd, li):not(.eyebrow, .chart-note, .ch-n),
.gx section:not(.g) > p:not(.eyebrow, .chart-note, .ch-n){ color:var(--ink) }

/* ---------- grids --------------------------------------------------------- */
.row{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,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; grid-template-columns:minmax(0,1fr); 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 3px 7px; border-radius:1px; border:1px solid; border-left-width:3px;
       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-2); 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:var(--r-box) }
.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-2); 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 }
/* A table of a few short columns fits a phone instead of scrolling sideways. */
.tw table.fit{ min-width:0 }
@media(max-width:640px){
  .tw table.fit{ font-size:.82rem }
  .tw table.fit th, .tw table.fit td{ padding:9px 5px }
  .tw table.fit .n{ white-space:normal }
  .tw table.fit .chip{ margin-top:3px }
}

/* ---------- the Stop button: shuts the engine and returns to the start screen -- */
.pg-stop{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:44px; min-height:44px; padding:0 4px; border:0;
  background:none; cursor:pointer; color:var(--ink-3); font-weight:800; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase }
.pg-stop:hover{ color:var(--ink) }
.pg-stop-ring{ position:relative; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  color:rgba(240,242,245,.78);
  background:radial-gradient(circle at 36% 28%,#3a404c,#0b0d12);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 1px rgba(255,255,255,.2) }
.pg-stop-ring::before{ content:''; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--speed-blue); opacity:.8;
  box-shadow:0 0 10px rgba(var(--speed-blue-rgb),.55),inset 0 0 6px rgba(var(--speed-blue-rgb),.35);
  transition:opacity .2s,box-shadow .2s }
.pg-stop:hover .pg-stop-ring::before{ opacity:1; box-shadow:0 0 16px rgba(var(--speed-blue-rgb),.85),inset 0 0 8px rgba(var(--speed-blue-rgb),.55) }
.pg-stop-ring svg{ width:12px; height:12px; display:block }
.pg-stop-t{ display:none }
@media(min-width:720px){ .pg-stop-t{ display:inline } }
.pg-stop:focus-visible{ outline:2px solid var(--ignition); outline-offset:2px; border-radius:22px }

/* ---------- 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-2); 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:var(--r-box);
               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(auto-fit,minmax(130px,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-2) }
.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; grid-template-columns:minmax(0,1fr); gap:var(--gap) }
.chapter{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 }
.chapter .ch-n{ font-family:var(--display); font-size:.72rem; letter-spacing:.16em;
                text-transform:uppercase; color:var(--ink-2); 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:minmax(0,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:var(--r-box); 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; grid-template-columns:minmax(0,1fr); 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:minmax(0,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:var(--r-ctl); background:var(--ignition); color:#fff !important; font-weight:800;
  padding-right:calc(26px + var(--cut)); clip-path:polygon(0 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  font-size:.82rem; letter-spacing:.13em; text-transform:uppercase;
  border:0 !important; text-decoration:none }
.btn-primary:hover{ background:#FF6A38 }
.btn-primary:focus-visible{ outline:none !important; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(5,7,13,.55) }
.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 (body.lp) is set in ignition.css, which only the home page loads */

/* ---------- 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:var(--r-box);
          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:minmax(0,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-2) }
.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. The plate and
   both veil layers share one 62vh band, so the photograph fades to black inside it and
   nothing below the band is left unveiled. Portrait only: a landscape phone keeps the
   desktop rule, because a 62vh band would not span its width. */
@media(max-width:720px) and (orientation:portrait){
  body::before{
    background-size:auto 62vh, auto 62vh, auto 62vh;
    background-position:center top, center top, var(--page-pos, 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,.56) 0%, rgba(5,7,13,.48) 22%,
                              rgba(5,7,13,.74) 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 }
}

/* ---------- follow: the strip above every footer, the follow page, the weekly notes ---------- */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none }

.follow-strip{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px 26px; align-items:center; margin:34px 0 0; padding:20px var(--pad) }
@media(min-width:960px){ .follow-strip{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto; padding:20px 26px } }
.follow-strip:not(:has(.fs-form)){ }
@media(min-width:960px){ .follow-strip:not(:has(.fs-form)){ grid-template-columns:minmax(0,1fr) auto } }
.fs-h{ font-family:var(--display); font-size:1.08rem; letter-spacing:-.012em; margin:0 0 .35em; color:var(--ink) }
.fs-copy p{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.55; max-width:44ch }
.fs-form{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; margin:0 }
@media(max-width:520px){ .fs-form{ grid-template-columns:minmax(0,1fr) } }
.fs-form input[type=email]{ width:100%; min-height:52px; padding:0 16px; border-radius:10px;
  border:1px solid var(--hairline-strong); background:rgba(5,7,13,.62); color:var(--ink);
  font:inherit; font-size:1rem }
.fs-form input[type=email]::placeholder{ color:var(--ink-3) }
.fs-form input[type=email]:focus-visible,.fs-btn:focus-visible,.fs-form .btn-primary:focus-visible{
  outline:2px solid var(--sky); outline-offset:2px }
.fs-form .btn-primary{ cursor:pointer; font-family:inherit }
.fs-form .btn-primary[disabled]{ opacity:.6; cursor:progress }
.fs-status{ grid-column:1/-1; margin:0; min-height:1.3em; font-size:.86rem; color:var(--ink-2) }
.fs-links{ display:flex; flex-wrap:wrap; gap:8px }
.fs-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:10px;
  border:1px solid var(--hairline-strong) !important; background:transparent; color:var(--ink) !important;
  font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; cursor:pointer }
.fs-btn:hover{ border-color:var(--ink-2) !important }

.follow-main{ padding:20px var(--pad); margin:22px 0 0 }
@media(min-width:760px){ .follow-main{ padding:26px 30px } }
.follow-main .fine{ margin:12px 0 0; font-size:.8rem; color:var(--ink-3); line-height:1.5 }
.fs-confirm{ grid-template-columns:minmax(0,1fr) }
.fstate{ display:none; margin:18px 0 0; padding:14px var(--pad); color:var(--ink) }
.fstate:target{ display:block }
.fstate b{ color:var(--ignition) }

.wk-stats{ display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); margin:22px 0 0 }
@media(min-width:760px){ .wk-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.wk-tile{ padding:16px clamp(14px,2.2vw,22px) }
.wk-tile .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 }
.wk-tile .v small{ font-size:.5em; letter-spacing:0; color:var(--ink-2) }
.wk-tile .v.hot{ color:var(--ignition) }
.wk-tile .v.cool{ color:var(--sky) }
.wk-tile .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 }
.wk-tile .chg{ display:block; margin-top:6px; font-size:.72rem; color:var(--ink-3) }
.wk-nav{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:26px 0 0; font-size:.86rem }
.wk-nav a{ color:var(--ink) }
.note-body{ padding:22px var(--pad); margin:18px 0 0; max-width:68ch }
@media(min-width:760px){ .note-body{ padding:30px 34px } }
.note-body p{ margin:0 0 1em }
.note-body p:last-child{ margin-bottom:0 }

/* ---------- your numbers: the calculator and the Paddock20 band ---------- */
.calc{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; padding:20px var(--pad); margin:22px 0 0 }
.calc > *{ min-width:0 }
@media(min-width:900px){ .calc{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:38px; padding:30px 34px } }
.fld{ margin:0 0 18px }
.fld:last-child{ margin-bottom:0 }
.fld label{ display:block; margin:0 0 7px; font-size:.7rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2) }
.fld input{ width:100%; min-height:52px; padding:0 14px; border-radius:10px; border:1px solid var(--hairline-strong);
  background:rgba(5,7,13,.62); color:var(--ink); font:inherit; font-size:1.05rem; font-variant-numeric:tabular-nums }
.fld input:focus-visible,.pset:focus-visible{ outline:2px solid var(--sky); outline-offset:2px }
.hint{ margin:6px 0 0; font-size:.78rem; color:var(--ink-3); line-height:1.45 }
.psets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px }
.pset{ min-height:36px; padding:0 12px; border-radius:var(--r-ctl); border:1px solid var(--hairline-strong);
  background:transparent; color:var(--ink-2); font:inherit; font-size:.76rem; cursor:pointer }
.pset:hover{ color:var(--ink); border-color:var(--ink-2) }
.calc-out .pair{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px }
.calc-out .big{ font-family:var(--display); font-size:clamp(1.8rem,6.4vw,2.7rem); line-height:1;
  letter-spacing:-.025em; margin:0; color:var(--ink); font-variant-numeric:tabular-nums }
.calc-out .big.hot{ color:var(--ignition) }
.calc-out .k{ margin:9px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.cbar{ height:10px; margin-top:10px; border-radius:5px; background:rgba(255,255,255,.08); overflow:hidden }
.cbar i{ display:block; height:100%; border-radius:5px; transition:width .25s cubic-bezier(.2,.7,.25,1) }
.tally{ width:100%; margin-top:20px; border-collapse:collapse; font-size:.92rem }
.tally th{ padding:6px 0; font-size:.62rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); text-align:left }
.tally th.n{ text-align:right }
.tally td{ padding:9px 0; border-top:1px solid var(--hairline) }
.verdict{ margin:16px 0 0; font-weight:700; line-height:1.45 }
.cta-row{ margin:14px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px }
.cta-band{ padding:22px var(--pad); margin:34px 0 0 }
@media(min-width:760px){ .cta-band{ padding:28px 34px } }
.cta-band h2{ margin-top:.2em }
.fine{ font-size:.8rem; color:var(--ink-3) }
@media(prefers-reduced-motion:reduce){ .cbar i{ transition:none } }
.calc .tw table.tally{ min-width:0 }

.nb{ white-space:nowrap }
.tw tr.tot td{ font-weight:700; color:var(--ink); border-top:1px solid var(--hairline-strong) }
.tw tr.me td{ font-weight:700; color:var(--ink) }

/* The three sizes a few generated blocks used to carry inline, named so the phone scale below can reach them.
   Desktop sizes are the ones they always had. */
.gx h3.h3-lg{ font-size:1.02rem }
.cp{ font-size:.9rem }
.dl{ font-size:.86rem }

/* ---------- home: the narrative bands (content/home/*.html) and one published figure ------------------------------ */
.rm{ font-variant-numeric:tabular-nums }
.hm-band h2{ margin:0 0 .45em }
.hm-band .prose{ margin:0 0 1em }
.hm-band .prose:last-child{ margin-bottom:0 }
.hm-lbl{ font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ignition); margin:0 0 .6em }
.gx .hm-cta{ margin:1.1em 0 0 }
.hm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:var(--gap); margin:1.4em 0 0 }
.hm-fig{ margin:0; overflow:hidden; border-radius:var(--r-box); border:1px solid var(--hairline,rgba(229,231,235,.10));
         background:var(--g-fill-0,rgba(10,14,25,.36)) }
.hm-fig img{ display:block; width:100%; height:auto; aspect-ratio:9/10; object-fit:cover }
.hm-fig figcaption{ margin:0; padding:10px 12px; font-size:.78rem; line-height:1.45; color:var(--ink-2) }
.gx .pg-f-note{ margin:16px 0 0; padding-top:16px; border-top:1px solid var(--hairline,rgba(229,231,235,.10));
                font-size:.82rem; color:var(--ink-3) }

/* ---------- phone type: Apple's own scale ---------------------------------------------------------------------------
   On a phone every piece of text here is one of four sizes, the four a stock iPhone app uses, so the site reads the way
   the rest of the phone does. Each class is placed by what it is for, not by what size it happened to be:
     17px  Body         what you read: paragraphs, table cells, values, inputs, a card's own heading
     15px  Subheadline  the line that supports it: subtitles, hints, buttons, menu items, the data chips
     13px  Footnote     notes, sources, captions, fine print
     12px  Caption 1    uppercase labels, chips, table headings, chart labels
   Display type (the page headline, the big numbers, the section headings) keeps its own sizes above Body. The containers,
   the gaps and the breakpoints are the ones above; only the type grows, and the few layout rules the bigger type needs are
   set out after this block. A phone in either orientation gets it. A desktop, a laptop and a tablet keep the sizes above.
   Text drawn inside an SVG is set in the drawing's own units, which the drawing scales to fit its box, so it is sized
   through --u, the drawn units in one pixel, which chart.js sets on every drawing (2.2 is a 390px phone's, for a page
   that has not run it yet). Asking for 12px there gives 12px on the screen. */
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  :root{ --t-body:17px; --t-sub:15px; --t-foot:13px; --t-cap:12px }
  body{ font-size:var(--t-body) }

  /* Body */
  .lede, .hero-blob, .gx h3, .gx h3.h3-lg, .legacy :is(h3,h4), .cp,
  .tw table, .legacy table, .tally, .cd-v, .mod p, .spec dd, .fld input, .fs-form input[type=email]{ font-size:var(--t-body) }
  /* a section heading stays above Body */
  .gx h2{ font-size:clamp(1.25rem,4.4vw,1.6rem) }

  /* Subheadline */
  .cmd .sub, .live, .chapter .data li, .door p, .skills li, .hint, .pset, .wk-nav, .fs-copy p, .fs-status, .fs-btn,
  .btn-primary, .btn-ghost, .tw table.fit, .pg-menu a, .pg-f-brand p, .dl{ font-size:var(--t-sub) }
  .pg-nav-issue{ font-size:var(--t-cap); letter-spacing:.18em }

  /* Footnote */
  .chart-note, .legend li, .live .src, .mod .src, .legacy figcaption, .legacy .cap, .fig figcaption, .rulebar,
  .follow-main .fine, .fine, .wk-tile .chg, .pg-f-bottom, .pg-f-legend, .pg-f-legal, .hm-fig figcaption, .gx .pg-f-note{ font-size:var(--t-foot) }

  /* Caption 1 */
  .eyebrow, .hero-eyebrow, .hm-lbl, .cmd .k, .stat .k, .statstrip .k, .wk-tile .k, .calc-out .k, .chip,
  .tw th, .legacy th, .tally th, .cd-k, .cd-title, .chapter .ch-n, .door .k, .spec dt, .fld label, .tabs button,
  .pg-stop, .pg-f-h, .pg-f-nav a, .pg-f-connect a, .pg-f-community a, .pg-f-tm{ font-size:var(--t-cap) }
  .stat .v small, .wk-tile .v small{ font-size:max(.5em,var(--t-cap)) }
  .stat-tile .value span{ font-size:max(.5em,var(--t-cap)) !important }   /* a unit the legacy figures write inline */

  /* drawn text */
  .chart .lab, .chart .val, .map .cl, .rt-cl, .rt-legmi, .rt-legwh, .rt-socl, .rt-socs{
    font-size:calc(var(--t-cap) * var(--u,2.2)) }

  /* The road trip drawings hold more than 12px labels have room for, so the pairs that sat a line apart are opened up by
     the size of the type (em is the label's own size), and the charging stops, under five percent of the axis each, go
     unlabelled: the shaded columns are the charges, and the drives carry the names. */
  .rt-legwh{ transform:translateY(.6em) }
  .rt-cl.up{ transform:translateY(-.95em) }
  .rt-soc .rt-chg{ display:none }
  .rt-socl{ transform:translateY(-.32em) }
  .rt-socs{ transform:translateY(.4em) }
  .rt-soc{ margin-bottom:6px }
}

/* What the bigger type needs from the layout, and nothing more. A table heading may wrap rather than hold a column open,
   two columns of sentences share the width instead of scrolling, and a phone on its side has the width for tables at
   the 15px size, which keeps the wide ones inside their frames. */
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .tw th{ white-space:normal }
}
@media (max-width:599.98px){
  .tw table.wraps{ min-width:0 }
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .tw table, .legacy table{ font-size:var(--t-sub) }
  .tw th, .tw td{ padding-inline:8px }
}