/* 47ho.com v3: the cluster at night. See DESIGN-v3.md.
   One dark theme for everyone. One fluid system: the root size grows with the window above
   ~1700 px, so type, spacing, cards and drawings (all in rem) grow with it. No maximum width:
   every section spans the window with side padding proportional to it. Instrument elements
   (dials, odometer displays, lamps, the bus wire) appear only where real values sit behind them.
   No external requests. Fonts: Sofia Sans (OFL), see fonts/OFL.txt. */

@font-face {
  font-family: "Sofia XC";
  src: url("fonts/sofia-sans-xcond-latin.woff2?v=5749cc8082") format("woff2");
  font-weight: 500 800; font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-203A, U+2116, U+2122, U+2190-2193, U+2212, U+20AC;
}
@font-face {
  font-family: "Sofia XC";
  src: url("fonts/sofia-sans-xcond-cyrillic.woff2?v=3c8ffeb1fe") format("woff2");
  font-weight: 500 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F;
}
@font-face {
  font-family: "Sofia SC";
  src: url("fonts/sofia-sans-scond-latin.woff2?v=70a36981d5") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-203A, U+2116, U+2122, U+2190-2193, U+2212, U+20AC;
}
@font-face {
  font-family: "Sofia SC";
  src: url("fonts/sofia-sans-scond-cyrillic.woff2?v=ad85524f77") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0301, U+0400-045F;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0e1418;
  --bg-2: #141c22;
  --panel: #1a242c;
  --night: #090d10;
  --lcd: #060a0c;
  --line: #2a3742;
  --line-2: #3a4955;
  --ink: #eef1f2;
  --muted: #a7b3bc;
  --amber: #f6b228;
  --amber-ink: #1a1204;
  --teal: #5ee8c6;
  --blue: #7fb2ff;
  --red: #ff5a4a;
  --lamp-off: #1e2830;
  --focus: #7cc4ff;

  --f-display: "Sofia XC", "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", sans-serif;
  --f-text: "Sofia SC", "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;

  --gutter: clamp(16px, 4vw, 160px);
  --gap: clamp(1rem, .6rem + .8vw, 2.2rem);
  --section: clamp(3.5rem, 2rem + 4vw, 8rem);
  --radius: .5rem;
  --fig-h: clamp(5rem, 2.2rem + 6vw, 13rem);   /* height of a dial or odometer display */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='18'%3E%3Cpath d='M0 15H6V3H31V15H39V3H55V15H63V3H71V15H87V3H95V15H111V3H119V15H127V3H143V15H159V3H167V15H200' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* 16 px up to ~1700 px wide, then growing with the window: 17.6 px at 1920, 22 at 2560, 32 at 3840 */
  font-size: clamp(100%, .2rem + .75vw, 200%);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth;
  background: var(--bg);
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.125rem/1.55 var(--f-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--amber); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: 1.5rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -6rem; z-index: 10; background: var(--amber); color: var(--amber-ink); padding: .6rem 1rem; font-weight: 700; text-decoration: none; }
.skip:focus { top: .5rem; }
::selection { background: var(--amber); color: var(--amber-ink); }

.wrap { width: 100%; padding-inline: var(--gutter); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: .95; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1rem + 5vw, 7.5rem); line-height: .88; text-transform: uppercase; letter-spacing: -.004em; }
h2 { font-size: clamp(2.25rem, .5rem + 3.2vw, 5rem); line-height: .92; text-transform: uppercase; }
h3 { font-size: clamp(1.5rem, 1rem + .6vw, 2.4rem); font-weight: 700; line-height: 1; }
h4 { font-size: clamp(1.5rem, 1rem + .6vw, 2.4rem); line-height: 1; }
h1 small, h2 small, h3 small, h4 small { text-transform: none; }
p, ul, ol, dl, figure { margin: 0; }
p + p { margin-top: .8em; }
strong, b { font-weight: 700; }
.lede { font-size: 1.3rem; line-height: 1.45; color: var(--ink); max-width: 46ch; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: .9em; }
.prose h3 { margin-bottom: .75rem; }
.prose strong { color: var(--ink); }
.note-small, .src { margin-top: 1rem; font-size: .9rem; color: var(--muted); max-width: 90ch; }
.src a { color: var(--muted); }

/* ---------- shared patterns ---------- */
/* the 12-column grid shared by heads, the car section and the footer */
.cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62em) { .cols { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
/* auto grid: adds columns as room appears; with few items they share the full width */
.grid { list-style: none; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 18rem), 100%), 1fr)); }
/* two columns from 62em: text sized to its measure, the related material takes the rest */
.split { display: grid; gap: calc(var(--gap) * 1.5); }
@media (min-width: 62em) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 6rem); } }
@media (min-width: 100em) { .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.split.mid { align-items: center; }

/* section head: big uppercase title left, the intro right, on one rule */
.head { display: grid; gap: 1rem; margin-bottom: clamp(1.75rem, 1rem + 2vw, 3.5rem); }
.head p { color: var(--muted); max-width: 52ch; font-size: 1.2rem; line-height: 1.5; }
@media (min-width: 62em) {
  .head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(2rem, 4vw, 6rem); align-items: end; }
}

.card { padding: clamp(1.1rem, .8rem + .8vw, 1.8rem); background: var(--panel); border-top: 4px solid var(--line-2); border-radius: var(--radius); display: flex; flex-direction: column; gap: .7rem; }
.card.work { border-top-color: var(--amber); }
.card.ink { border-top-color: var(--teal); }
.card h3, .card h4 { text-transform: uppercase; }
.card p, .card li { color: var(--muted); }
.card h3 small, .card h4 small { display: block; margin-top: .4rem; font: 600 1rem/1.25 var(--f-text); color: var(--amber); letter-spacing: .01em; }

.lamp { display: inline-block; flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 .22rem rgb(246 178 40 / .2), 0 0 .8rem rgb(246 178 40 / .55); }

.actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
.btn {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: .6rem 1.35rem .65rem;
  font: 700 1.25rem/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { color: var(--ink); border-color: var(--amber); }
.btn-main { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.btn-main:hover { background: transparent; color: var(--amber); }
.btn-plain:hover { background: rgb(246 178 40 / .08); }
.btn-sm { min-height: 2.75rem; font-size: 1.1rem; padding: .45rem 1rem .5rem; }
.email .at::before { content: "@"; }

.ico { width: 2.2rem; height: 2.2rem; color: var(--amber); flex: none; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.chips li { padding: .2rem .6rem .25rem; border-radius: 999px; font-size: .9rem; line-height: 1.25; background: #24313b; color: var(--ink); }

/* tags carry the same lamps as the bus map: Live, Codes, Tests, Read only, Identified */
.tags { display: flex; flex-wrap: wrap; gap: .35rem .5rem; list-style: none; padding: 0; }
.tag { display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .6rem .22rem .45rem; border-radius: 999px; font: 600 .95rem/1.2 var(--f-display); letter-spacing: .03em; background: #1f2a33; color: var(--ink); }
.tag::before { content: ""; width: .62rem; height: .62rem; border-radius: 50%; flex: none; background: var(--lamp-off); box-shadow: inset 0 0 0 1px var(--line-2); }
.tag-live::before { background: var(--teal); box-shadow: 0 0 .45rem rgb(94 232 198 / .7); }
.tag-codes::before { background: var(--amber); box-shadow: 0 0 .45rem rgb(246 178 40 / .7); }
.tag-tests::before { background: var(--blue); box-shadow: 0 0 .45rem rgb(127 178 255 / .7); }
.tag-ro::before { background: var(--red); box-shadow: 0 0 .45rem rgb(255 90 74 / .7); }
.tag-id { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }

.toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.toc a { display: inline-block; padding: .5rem .85rem .55rem; border: 1.5px solid var(--line-2); border-radius: 999px; font: 600 1.1rem/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.toc a:hover { border-color: var(--amber); color: var(--amber); }

/* ---------- header ---------- */
.site-head { background: var(--bg); position: relative; z-index: 2; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; padding-block: clamp(.7rem, .4rem + .6vw, 1.2rem); }
.mark { display: inline-flex; align-items: baseline; margin-right: auto; font: 800 2rem/1 var(--f-display); letter-spacing: -.005em; text-decoration: none; color: var(--ink); }
.mark:hover { color: var(--ink); }
.mark .dot { color: var(--amber); }
.mark .ho { color: var(--amber); }
.nav-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem clamp(1.5rem, 2vw, 3rem); }
.site-nav ul, .lang ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav ul { gap: .25rem clamp(1.2rem, 1.6vw, 2.6rem); }
.site-nav a { display: inline-block; padding-block: .55rem; text-decoration: none; font: 600 1.25rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--amber); }
.lang ul { gap: .1rem; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 2px; }
.lang a { display: inline-block; padding: .45rem .75rem; border-radius: 999px; text-decoration: none; font: 700 1.05rem/1 var(--f-display); letter-spacing: .04em; }
.lang a:hover { color: var(--ink); background: var(--panel); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.nav-toggle { display: none; }
@media (max-width: 61.99em) {
  .nav-panel { width: 100%; justify-content: space-between; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem .95rem;
    font: 700 1.2rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); background: transparent;
    border: 1.5px solid var(--line-2); border-radius: 999px; cursor: pointer;
  }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle .bars::before { top: -6px; }
  .nav-toggle .bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }
  .js .nav-panel { display: none; }
  .js .nav-panel.open { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding: .5rem 0 1rem; border-top: 1px solid var(--line); margin-top: .4rem; }
  .js .nav-panel.open .site-nav ul { flex-direction: column; gap: 0; }
  .js .nav-panel.open .site-nav a { display: block; padding: .85rem 0; font-size: 1.5rem; border-bottom: 1px solid var(--line); }
  .js .nav-panel.open .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--amber); padding-left: .9rem; }
  .js .nav-panel.open .lang { align-self: flex-start; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.band + .section, .stats + .section, .alt + .section, .section + .alt, .section + .band { padding-top: var(--section); }
.alt { background: var(--bg-2); }
.band { background: var(--night); border-block: 1px solid var(--line); }
.more-row { margin-top: calc(var(--gap) * 1.5); }

/* ---------- hero: the car, full bleed, fading into the night ---------- */
/* phones and portrait screens: the photograph stacks above the text */
.hero { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); }
.hero > .photo { grid-column: 1 / -1; grid-row: 1; }
.hero-copy { grid-column: 2; grid-row: 2; display: grid; gap: 1.1rem; justify-items: start; padding-block: 1.25rem var(--section); position: relative; z-index: 1; }
.hero .kicker { font: 700 clamp(1.2rem, .9rem + .5vw, 2rem)/1.2 var(--f-display); letter-spacing: .02em; color: var(--amber); max-width: 44ch; }
.hero h1 { max-width: 11em; text-shadow: 0 .04em .35em rgb(0 0 0 / .55); }
:lang(bg) .hero h1 { font-size: clamp(2.5rem, .8rem + 4.3vw, 6.6rem); max-width: 12em; }
.hero .lede { max-width: 44ch; }
.hero .why { color: var(--muted); max-width: 52ch; }
.status { display: flex; align-items: baseline; gap: .8rem; padding: .85rem 1.1rem; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: rgb(14 20 24 / .82); max-width: 50ch; line-height: 1.45; }
.status .lamp { transform: translateY(.05rem); }
.hero .actions { margin-top: .4rem; }

.photo.bleed { display: grid; position: relative; }
.photo.bleed > * { grid-area: 1 / 1; }
.photo.bleed picture { display: block; }
.photo.bleed img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 60%; border-radius: 0; background: var(--panel); }
.photo.bleed::after { content: ""; grid-area: 1 / 1; pointer-events: none; background: linear-gradient(0deg, var(--bg) 0, rgb(14 20 24 / .5) 10%, transparent 26%); }
.photo.bleed figcaption { position: relative; z-index: 1; align-self: end; justify-self: end; margin: 0 var(--gutter) .75rem; padding: .4rem .7rem; max-width: min(60ch, calc(100% - 2 * var(--gutter))); border-radius: .35rem; background: rgb(9 13 16 / .8); color: var(--muted); font-size: .8rem; line-height: 1.4; text-align: right; }
.photo.bleed figcaption .credit { display: inline; margin: 0; font-size: inherit; }
@media (max-width: 61.99em), (orientation: portrait) {
  .photo.bleed img { max-height: 72svh; }
  .photo.bleed figcaption { grid-area: 2 / 1; margin-bottom: 0; text-align: left; justify-self: stretch; max-width: none; margin-inline: 0; border-radius: 0; padding: .45rem var(--gutter); background: rgb(9 13 16 / .85); }
  .photo.bleed::after { background: none; }
}
/* landscape screens from 62em: the photo fills the right of the window and the text sits in its shadow */
@media (min-width: 62em) and (orientation: landscape) {
  .hero { grid-template-columns: var(--gutter) minmax(0, 5fr) minmax(0, 7fr); min-height: max(34rem, min(calc(100svh - 4.2rem), 62vw)); }
  .hero > .photo { grid-column: 3 / -1; grid-row: 1; }
  .hero-copy { grid-column: 2; grid-row: 1; align-self: center; align-content: center; padding-right: var(--gap); padding-block: clamp(3rem, 4vw, 9rem) clamp(2.5rem, 4vw, 8rem); }
  .photo.bleed img { aspect-ratio: auto; height: 100%; min-height: 100%; object-position: var(--focus-x, 76%) 62%; }
  .photo.bleed::after {
    background:
      linear-gradient(90deg, var(--bg) 0, rgb(14 20 24 / .88) 8%, rgb(14 20 24 / .45) 18%, rgb(14 20 24 / .08) 30%, transparent 40%),
      linear-gradient(0deg, var(--bg) 0, rgb(14 20 24 / .55) 9%, transparent 24%),
      linear-gradient(180deg, var(--bg) 0, transparent 9%);
  }
}

/* ---------- photographs ---------- */
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--panel); }
.photo.wide img { aspect-ratio: 16 / 9; }
.photo.tall img { aspect-ratio: 4 / 3; }
.photo figcaption { margin-top: .6rem; font-size: .9rem; line-height: 1.45; color: var(--muted); max-width: 72ch; }
.photo .credit { display: block; margin-top: .15rem; font-size: .8rem; }
.photo .credit a { color: inherit; }

/* ---------- stats band: dials where there is a maximum, odometer displays where there is not ---------- */
.stats { background: var(--night); border-top: 3px solid var(--amber); border-bottom: 1px solid var(--line); padding-block: clamp(1.75rem, 1rem + 2.4vw, 4.5rem); }
.stats ul { list-style: none; padding: 0; display: grid; gap: calc(var(--gap) * 1.2) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats li { display: grid; gap: .8rem; align-content: start; }
.stats li:last-child { grid-column: 1 / -1; }
@media (min-width: 62em) {
  .stats ul { grid-template-columns: 1.35fr 1.35fr 1fr 1fr 1fr; }
  .stats li:last-child { grid-column: auto; }
}
.stats .label { font-size: 1.02rem; line-height: 1.35; color: var(--muted); max-width: 26ch; }
.gauge { display: flex; align-items: center; gap: clamp(.5rem, .2rem + .8vw, 1.6rem); height: var(--fig-h); }
.dial { height: 100%; width: auto; aspect-ratio: 240 / 176; flex: none; overflow: visible; }
.dial .track { fill: none; stroke: var(--line-2); stroke-width: 7; }
.dial .fill { fill: none; stroke: var(--amber); stroke-width: 7; filter: drop-shadow(0 0 4px rgb(246 178 40 / .55)); }
.dial .tick { stroke: var(--muted); stroke-width: 2; }
.dial .tick.major { stroke: var(--ink); stroke-width: 3.5; }
.dial .num { font: 700 17px var(--f-display); fill: var(--muted); text-anchor: middle; }
.dial .needle { stroke: var(--amber); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgb(246 178 40 / .6)); }
.dial .hub { fill: var(--ink); stroke: var(--night); stroke-width: 3; }
@media (max-width: 47.99em) { .dial .num { display: none; } }
.gauge-val { display: grid; justify-items: start; line-height: .85; }
.gauge-val b { font: 800 calc(var(--fig-h) * .62)/.85 var(--f-display); color: var(--amber); }
.gauge-val small { font: 600 1rem/1.2 var(--f-display); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: .3rem; }
.lcd {
  display: inline-flex; align-items: center; justify-content: flex-end; height: var(--fig-h); min-width: 3.4ch; padding: 0 .3em;
  background: var(--lcd); border-radius: .4rem; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #1a242b, inset 0 .25em .9em rgb(0 0 0 / .85);
  font: 700 calc(var(--fig-h) * .62)/1 var(--f-display); color: var(--teal); letter-spacing: .02em; text-shadow: 0 0 .32em rgb(94 232 198 / .5);
}
.lcd .approx { font-size: .75em; margin-right: .04em; transform: translateY(-.06em); }
.stats .lcd { justify-self: stretch; }

/* ---------- key facts panel (home car section, car page) ---------- */
.facts { border-top: 3px solid var(--amber); }
.facts > div { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr); gap: .2rem 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.facts dt { font: 700 1.1rem/1.3 var(--f-display); color: var(--muted); letter-spacing: .03em; text-transform: uppercase; display: flex; gap: .55rem; align-items: baseline; }
.facts dd { margin: 0; }
.facts dd small { display: block; color: var(--muted); font-size: .9rem; }
.cl { display: inline-grid; place-items: center; flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font: 800 1rem/1 var(--f-display); transform: translateY(-.1rem); }

/* ---------- the car, home ---------- */
.car-intro { display: grid; gap: calc(var(--gap) * 1.5); }
.car-intro .photos { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.car-intro .photos .photo:first-child { grid-column: 1 / -1; }
.car-intro .photos .photo + .photo img { aspect-ratio: 4 / 3; }
.car-intro .side { display: grid; gap: var(--gap); align-content: start; }
@media (min-width: 62em) { .car-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(2rem, 4vw, 6rem); align-items: start; } }

/* ---------- the drawn outline with callouts ---------- */
.outline { margin: 0; }
.outline svg { width: 100%; height: auto; overflow: visible; }
.outline .o-ground { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 10 8; }
.outline .o-body { fill: #1c2730; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.outline .o-glass { fill: #0f171d; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.outline .o-line { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.outline .o-rail { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.outline .o-tyre { fill: #05080a; stroke: var(--ink); stroke-width: 3; }
.outline .o-rim { fill: #1c2730; stroke: var(--muted); stroke-width: 3; }
.outline .o-hub { fill: var(--muted); }
.outline .o-lamp { fill: #3a4955; stroke: var(--ink); stroke-width: 2; }
.outline .o-tail { fill: #7a2a22; stroke: var(--ink); stroke-width: 2; }
.outline .o-call circle { fill: var(--amber); stroke: var(--bg); stroke-width: 5; filter: drop-shadow(0 0 6px rgb(246 178 40 / .5)); }
.outline .o-call text { fill: var(--amber-ink); font: 800 38px var(--f-display); text-anchor: middle; }
@media (max-width: 47.99em) { .outline .o-call text { font-size: 44px; } .outline .o-call circle { r: 34px; } }
.outline figcaption { margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.callouts { margin: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.callouts > div { border-top: 2px solid var(--line-2); padding-top: .9rem; display: grid; gap: .35rem; align-content: start; }
.callouts dt { display: flex; align-items: center; gap: .6rem; font: 700 1.05rem/1.2 var(--f-display); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.callouts dd { margin: 0; color: var(--muted); }
.callouts dd b { display: block; font: 800 clamp(1.5rem, 1rem + .8vw, 2.8rem)/1 var(--f-display); color: var(--ink); text-transform: uppercase; margin-bottom: .3rem; }
.glance { display: grid; gap: calc(var(--gap) * 1.5); }
@media (min-width: 62em) { .glance { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(2rem, 4vw, 6rem); align-items: start; } }
.glance .callouts { margin-top: calc(var(--gap) * 1.5); }
@media (min-width: 100em) { .glance .callouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- what it does ---------- */
.group + .group { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; margin-bottom: 1rem; color: var(--amber); text-transform: uppercase; letter-spacing: .02em; }
.group-title small { font: 400 1.05rem/1.3 var(--f-text); color: var(--muted); letter-spacing: 0; }
.tiles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80em) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40em) and (max-width: 79.99em) { .tiles.three > :last-child { grid-column: 1 / -1; } }

/* ---------- the bus: sixteen modules on one wire ---------- */
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: 1rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: .55rem; }
.bus { margin: clamp(1.5rem, 1rem + 2vw, 3.5rem) 0 0; }
.bus-field { position: relative; padding-top: 1.6rem; }
.bus-field::before { content: ""; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 0; height: 1.1rem; background: var(--amber); -webkit-mask: var(--wave) repeat-x 0 50% / 12.2rem 1.1rem; mask: var(--wave) repeat-x 0 50% / 12.2rem 1.1rem; }
.mods { list-style: none; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .mods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mod { position: relative; display: grid; gap: .9rem; align-content: space-between; min-height: clamp(6rem, 4rem + 3vw, 11rem); padding: clamp(.8rem, .6rem + .6vw, 1.5rem); background: var(--bg-2); border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: var(--radius); }
.mod-name { font: 800 clamp(1.3rem, 1rem + .6vw, 2.4rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.mod.id { background: transparent; border-style: dashed; border-top: 1px dashed var(--line-2); }
.mod.id .mod-name { color: var(--muted); }
.lamps { display: flex; gap: clamp(.4rem, .3rem + .3vw, .8rem); }
.lamps i, .key-lamp { display: block; width: clamp(.85rem, .7rem + .3vw, 1.4rem); aspect-ratio: 1; border-radius: 50%; background: var(--lamp-off); box-shadow: inset 0 0 0 1px var(--line-2); }
.key-lamp { display: inline-block; }
.lamps .on.l-live, .key-lamp.l-live { background: var(--teal); box-shadow: 0 0 0 .18rem rgb(94 232 198 / .15), 0 0 .8rem rgb(94 232 198 / .65); }
.lamps .on.l-codes, .key-lamp.l-codes { background: var(--amber); box-shadow: 0 0 0 .18rem rgb(246 178 40 / .15), 0 0 .8rem rgb(246 178 40 / .65); }
.lamps .on.l-tests, .key-lamp.l-tests { background: var(--blue); box-shadow: 0 0 0 .18rem rgb(127 178 255 / .15), 0 0 .8rem rgb(127 178 255 / .65); }
.lamps .on.l-ro, .key-lamp.l-ro { background: var(--red); box-shadow: 0 0 0 .18rem rgb(255 90 74 / .15), 0 0 .8rem rgb(255 90 74 / .65); }
/* eight to a row: two rows hang above and below the wire */
@media (min-width: 80em) {
  .bus-field { padding-top: 0; --tap: clamp(3rem, 1.5rem + 3vw, 8rem); }
  .mods { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 1fr; row-gap: var(--tap); }
  .bus-field::before { top: 50%; transform: translateY(-50%); }
  .mod::after { content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; height: calc(var(--tap) / 2 - .55rem); background: var(--amber); }
  .mod:nth-child(-n+8)::after { top: 100%; }
  .mod:nth-child(n+9)::after { bottom: 100%; }
  .mod:nth-child(n+9) { border-top: 1px solid var(--line); border-bottom: 3px solid var(--amber); }
  .mod.id:nth-child(n+9) { border-top-style: dashed; border-bottom: 1px dashed var(--line-2); }
  .mod.id::after { background: var(--line-2); }
}
.bus figcaption { margin-top: clamp(1.5rem, 1rem + 1.5vw, 3rem); max-width: 90ch; color: var(--muted); font-size: 1rem; }
.bus figcaption strong { color: var(--ink); }
.bus figcaption a { color: var(--ink); }
.bus-top { display: grid; gap: 1rem; }
@media (min-width: 62em) { .bus-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gap) clamp(2rem, 4vw, 6rem); } .bus-top .legend { justify-content: flex-end; } }

/* ---------- what you need ---------- */
.kit { list-style: none; padding: 0; display: grid; gap: calc(var(--gap) * 1.2); counter-reset: step; }
.kit li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem 1.1rem; align-items: start; }
.kit .pic { grid-row: span 2; width: 5.5rem; height: 5.5rem; padding: .6rem; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--panel); }
.kit h3 { display: flex; align-items: baseline; gap: .5rem; text-transform: uppercase; }
.kit h3::before { counter-increment: step; content: counter(step); font: 800 1.1em/1 var(--f-display); color: var(--amber); }
.kit p { color: var(--muted); max-width: 46ch; }
.kit-wrap, .pair { display: grid; gap: calc(var(--gap) * 1.5); }
@media (min-width: 62em) {
  .kit-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 6rem); align-items: center; }
  .pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 6rem); align-items: start; }
}
.device { padding: clamp(1rem, .5rem + 2vw, 2.4rem); background: var(--panel); border-radius: var(--radius); }
.device svg, .device img { width: 100%; height: auto; }
.device img { border: 1.5px solid var(--line-2); border-radius: 14px; }
.device figcaption { margin-top: .8rem; font-size: .9rem; color: var(--muted); max-width: 64ch; }

/* drawings: strokes follow the theme */
.ill { color: var(--ink); }
.ill .st { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ill .thin { stroke-width: 1.5; }
.ill .soft { stroke: var(--line-2); }
.ill .screen { fill: var(--night); }
.ill .fill-ink { fill: currentColor; }
.ill .fill-amber { fill: var(--amber); }
.ill .st-amber { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.ill .fill-soft { fill: var(--bg-2); }
.ill text { font-family: var(--f-display); font-weight: 600; fill: var(--muted); }
.ill .t-lg { font-size: 24px; fill: var(--ink); font-weight: 700; }
.ill .t-sm { font-size: 19px; }
@media (max-width: 47.99em) {
  .device .ill .t-sm { font-size: 27px; }
  .device .ill .t-lg { font-size: 30px; }
}
/* the drawn tablet's needle is fixed at its value: an illustration, not a reading */
.ill .needle { transform-box: view-box; transform-origin: 282px 206px; transform: rotate(38deg); }

/* ---------- safety and limits ---------- */
.safety { background: var(--amber); color: var(--amber-ink); border-radius: var(--radius); padding: clamp(1.4rem, 1rem + 1.6vw, 3.2rem); }
.safety h3, .limits h3 { margin-bottom: 1.4rem; text-transform: uppercase; font-size: clamp(1.8rem, 1.2rem + 1.2vw, 3.6rem); }
.safety a { color: var(--amber-ink); }
.rules { list-style: none; padding: 0; display: grid; gap: 1.4rem; }
.rules li { display: grid; gap: .25rem; padding-top: 1rem; border-top: 2px solid rgb(26 18 4 / .35); }
.rules strong { font: 800 1.45rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.rules span { color: #2b1f06; }
.limits ul { list-style: none; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 48em) { .limits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.limits li { padding-top: 1rem; border-top: 1px solid var(--line-2); }
.limits li strong { display: block; font: 700 1.35rem/1.15 var(--f-display); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .01em; }
.limits li span { color: var(--muted); }
.limits .more { margin-top: 1.4rem; }

/* ---------- where it stands ---------- */
.road { list-style: none; padding: 0; display: grid; position: relative; }
.road li { position: relative; padding: 0 0 1.5rem 2.6rem; }
.road li::before { content: ""; position: absolute; left: .62rem; top: 1.2rem; bottom: -.2rem; border-left: 2px solid var(--line-2); }
.road li:last-child::before { display: none; }
.road .node { position: absolute; left: 0; top: .15rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--muted); background: var(--bg); }
.road .now .node { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 .3rem rgb(246 178 40 / .2), 0 0 1rem rgb(246 178 40 / .6); }
.road .end .node { border-width: 4px; }
.road b { display: block; font: 800 clamp(1.5rem, 1.1rem + .7vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; }
.road .when { display: block; font: 700 1.05rem/1.2 var(--f-display); color: var(--amber); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; }
.road p { color: var(--muted); margin-top: .4rem; max-width: 34ch; }
@media (min-width: 62em) {
  .road { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
  .road li { padding: 2.4rem 0 0; }
  .road li::before { left: 1.4rem; right: calc(-1 * var(--gap)); top: .7rem; bottom: auto; border-left: 0; border-top: 2px solid var(--line-2); }
  .road .now::before { border-top-color: var(--amber); }
  .road .node { top: 0; }
}
.plain { margin-top: 1.6rem; max-width: 80ch; color: var(--muted); }

/* ---------- notes preview ---------- */
.notes-row { --min: 18rem; gap: var(--gap); }
.notes-row li { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 3px solid var(--line-2); }
.notes-row time { font: 700 1.05rem/1.3 var(--f-display); color: var(--amber); letter-spacing: .04em; text-transform: uppercase; }
.notes-row a { font: 800 clamp(1.5rem, 1.1rem + .8vw, 2.8rem)/1.02 var(--f-display); text-transform: uppercase; text-decoration: none; text-wrap: balance; }
.notes-row a:hover { text-decoration: underline; }
.notes-row p { color: var(--muted); }

/* ---------- next step, closing every page ---------- */
.next { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 1.5rem + 3vw, 6rem); }
.next .wrap { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 62em) { .next .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 6rem); } .next .actions { justify-content: flex-end; } }
.next h2 { font-size: clamp(2rem, .8rem + 2.6vw, 4.4rem); }
.next p { margin-top: .9rem; color: var(--muted); max-width: 60ch; }

/* ---------- inner page heads ---------- */
.page-hero { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 7rem) clamp(1.75rem, 1rem + 2vw, 3.5rem); border-bottom: 3px solid var(--amber); margin-bottom: var(--section); }
.page-hero .wrap { display: grid; gap: 1.5rem; }
.page-hero .side { display: grid; gap: 1.4rem; align-content: end; }
.page-hero .kicker { font: 700 clamp(1.2rem, .9rem + .5vw, 2rem)/1.2 var(--f-display); letter-spacing: .02em; color: var(--amber); margin-bottom: .8rem; }
@media (min-width: 62em) { .page-hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gap) clamp(2rem, 4vw, 6rem); } }
.page-hero + .section, .page-hero + .notes-section { padding-top: 0; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.codes, .compare { width: 100%; border-collapse: collapse; }
.codes th, .codes td, .compare th, .compare td { text-align: left; vertical-align: top; padding: .75rem 1.2rem .75rem 0; border-bottom: 1px solid var(--line); }
.codes thead th, .compare thead th { font: 700 1.05rem/1.2 var(--f-display); color: var(--muted); border-bottom: 3px solid var(--amber); letter-spacing: .04em; text-transform: uppercase; vertical-align: bottom; }
.compare thead th { font-size: clamp(1.3rem, 1rem + .6vw, 2.2rem); color: var(--ink); letter-spacing: .02em; }
.compare thead th.ho { color: var(--amber); }
.codes tbody th { font: 700 1.25rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.compare tbody th { font: 700 1.1rem/1.25 var(--f-display); color: var(--muted); width: 28%; letter-spacing: .03em; text-transform: uppercase; }
.codes td { color: var(--muted); }
.compare td { width: 36%; }
.compare td small { display: block; color: var(--muted); font-size: .88rem; margin-top: .15rem; }
.yes { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; }
.yes::before { content: ""; width: .62rem; height: .62rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 .45rem rgb(94 232 198 / .6); }
.ro { color: var(--red); font-weight: 700; }

/* content beside a table: the table never runs 3,500 px wide */
.beside { display: grid; gap: calc(var(--gap) * 1.5); grid-template-columns: minmax(0, 1fr); }
.beside > *, .sidehead > *, .glance > *, .car-intro > * { min-width: 0; }
@media (min-width: 62em) { .beside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(2rem, 4vw, 6rem); align-items: start; } }
.beside > .aside { display: grid; gap: var(--gap); align-content: start; }
.beside .note-small, .beside .src { margin-top: 0; }
/* the head sits beside its content */
.sidehead { display: grid; gap: calc(var(--gap) * 1.5); }
.sidehead > .head { margin-bottom: 0; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 62em) { .sidehead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap) clamp(2rem, 4vw, 6rem); align-items: start; } }
.sidehead .gauge { margin-top: 1rem; }

.modtables { display: block; }
.modtables > .modtable { break-inside: avoid; margin-bottom: calc(var(--gap) * 1.6); }
@media (min-width: 62em) { .modtables { columns: 2; column-gap: clamp(2rem, 3vw, 5rem); } }
@media (min-width: 120em) { .modtables { columns: 3; } }
.modtable { width: 100%; border-collapse: collapse; }
.modtable caption { text-align: left; font: 800 clamp(1.6rem, 1.1rem + 1vw, 3.2rem)/1 var(--f-display); text-transform: uppercase; padding-bottom: .6rem; border-bottom: 3px solid var(--amber); }
.modtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.modtable th, .modtable td { text-align: left; vertical-align: top; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); }
.modtable tbody th { font: 700 1.3rem/1.1 var(--f-display); width: 36%; text-transform: uppercase; letter-spacing: .01em; }
.modtable td .tags { margin-bottom: .45rem; }
.modtable td p { color: var(--muted); }
@media (max-width: 29.99em) {
  .modtable tr, .modtable tbody th, .modtable td { display: block; width: auto; }
  .modtable tbody th { padding-bottom: .1rem; border-bottom: 0; }
  .modtable td { padding-top: .35rem; }
}

.spec { display: grid; border-top: 1px solid var(--line); }
.spec > div { display: grid; gap: .3rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.spec dt { font: 800 1.4rem/1.1 var(--f-display); text-transform: uppercase; color: var(--amber); letter-spacing: .02em; }
.spec dd { margin: 0; max-width: 70ch; color: var(--muted); }
@media (min-width: 48em) and (max-width: 79.99em) { .spec > div { grid-template-columns: 14rem minmax(0, 1fr); } }
@media (min-width: 80em) {
  .spec { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap); border-top: 0; }
  .spec > div { align-content: start; border-top: 3px solid var(--amber); border-bottom: 0; }
}

/* ---------- features page ---------- */
.datalist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .datalist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80em) { .datalist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 160em) { .datalist { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.datalist h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .65rem; }
.datalist h3 .ico { width: 1.9rem; height: 1.9rem; }
.datalist h3 small { display: block; flex-basis: 100%; margin: 0; }
.datalist ul { padding-left: 1.1em; display: grid; gap: .3rem; }
.datalist li::marker { color: var(--amber); }
.derived { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line-2); font-size: 1rem; }
.derived strong { color: var(--ink); }
.tests { gap: .7rem; counter-reset: t; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .tests { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80em) { .tests { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tests li { counter-increment: t; display: grid; grid-template-columns: 2.2rem 1.8rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .85rem 1rem; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); font: 700 1.25rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.tests li::before { content: counter(t, decimal-leading-zero); font: 800 1.15rem/1 var(--f-display); color: var(--blue); order: -2; }
.tests .ico { width: 1.8rem; height: 1.8rem; color: var(--muted); order: -1; }
.tools { --min: 16rem; gap: var(--gap); }
.tools li { display: grid; gap: .6rem; align-content: start; padding-top: 1rem; border-top: 3px solid var(--line-2); }
.tools h3 { text-transform: uppercase; }
.tools p { color: var(--muted); }
.later { --min: 18rem; }
.later-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: clamp(1.1rem, .8rem + .8vw, 1.8rem); border: 1.5px dashed var(--line-2); border-radius: var(--radius); }
.later-item h3 { margin-bottom: .5rem; text-transform: uppercase; }
.later-item p { color: var(--muted); }

/* ---------- car page ---------- */
.sub { margin: calc(var(--gap) * 2) 0 1rem; text-transform: uppercase; }
.ratios { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); --fig-h: clamp(4rem, 2rem + 4vw, 9rem); }
@media (min-width: 30em) { .ratios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 62em) { .ratios { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.ratios li { display: grid; gap: .6rem; align-content: start; }
.ratios .lcd { justify-content: center; }
.ratios > li > span:not(.lcd) { font: 700 1.05rem/1.2 var(--f-display); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.systems { --min: 17rem; }
.systems .kind { font: 700 1.05rem/1.2 var(--f-display); color: var(--teal); letter-spacing: .04em; text-transform: uppercase; }
.dlc { display: grid; gap: 1.2rem; padding: clamp(1rem, .6rem + 1vw, 2rem); background: var(--panel); border-radius: var(--radius); }
@media (min-width: 100em) { .dlc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gap); } }
.dlc svg { width: 100%; height: auto; }
.ill .pin { fill: var(--panel); stroke: currentColor; stroke-width: 2; }
.ill .pin.on { fill: var(--amber); stroke: var(--amber); }
.ill .pin.gnd { fill: var(--ink); }
.ill .pin.sci { fill: none; stroke: var(--teal); stroke-width: 4; }
.ill .pin.flash { fill: none; stroke-dasharray: 4 4; }
.ill .pin.bat { fill: var(--muted); }
.ill .pin-n text { font-size: 15px; text-anchor: middle; fill: var(--ink); font-weight: 700; }
.ill .pin-n text:nth-child(2), .ill .pin-n text:nth-child(4), .ill .pin-n text:nth-child(5), .ill .pin-n text:nth-child(16) { fill: var(--night); }
.pins-table { width: 100%; border-collapse: collapse; }
.pins-table th, .pins-table td { text-align: left; padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.pins-table thead th { font: 700 1rem/1.2 var(--f-display); color: var(--muted); border-bottom: 2px solid var(--amber); letter-spacing: .04em; text-transform: uppercase; }
.pins-table tbody th { font: 800 1.2rem/1.1 var(--f-display); white-space: nowrap; }
.key { display: inline-block; width: .8rem; height: .8rem; margin-right: .5rem; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -.05rem; }
.k-on { background: var(--amber); border-color: var(--amber); }
.k-gnd { background: var(--ink); }
.k-sci { border: 3px solid var(--teal); }
.k-flash { border-style: dashed; }
.k-bat { background: var(--muted); border-color: var(--muted); }
.gallery { --min: 20rem; gap: var(--gap); align-items: start; }
.gallery img { width: 100%; border-radius: var(--radius); background: var(--panel); }
.gallery figcaption { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
@media (min-width: 80em) { .gallery.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- notes page ---------- */
.notes-section { padding-top: 0; }
.notes { display: grid; }
@media (min-width: 100em) {
  .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
  .notes .note { grid-template-columns: 1fr; border-top: 3px solid var(--amber); }
}
.note { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-top: 1px solid var(--line); display: grid; gap: .7rem 3rem; align-content: start; }
.note:first-child { border-top: 3px solid var(--amber); }
@media (min-width: 56em) and (max-width: 99.99em) { .note { grid-template-columns: 12rem minmax(0, 1fr); } }
.note time { font: 700 1.2rem/1.3 var(--f-display); color: var(--amber); letter-spacing: .04em; text-transform: uppercase; }
.note h2 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3.6rem); margin-bottom: 1.1rem; max-width: 20ch; }
.note .prose p { color: var(--ink); }
.feedline { color: var(--muted); }

/* ---------- 404 and form results ---------- */
.lost { padding-block: clamp(3rem, 2rem + 5vw, 9rem); }
.lost .wrap { display: grid; gap: calc(var(--gap) * 2); }
@media (min-width: 62em) { .lost .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.lost .code { display: inline-flex; font: 800 clamp(6rem, 2rem + 14vw, 26rem)/.82 var(--f-display); color: var(--teal); background: var(--lcd); padding: .08em .2em .02em; border-radius: .5rem; text-shadow: 0 0 .25em rgb(94 232 198 / .45); box-shadow: inset 0 .2em .8em rgb(0 0 0 / .8); }
.lost h1 { font-size: clamp(2.4rem, 1rem + 3.6vw, 6rem); margin-block: 1.4rem 1rem; }
.lost h2 { font-size: clamp(2rem, 1rem + 2.4vw, 4rem); margin-bottom: 1rem; }
.lost .actions { margin-top: 1.6rem; }
.lost .bg { padding-top: 1.6rem; border-top: 1px solid var(--line); }
@media (min-width: 62em) { .lost .bg { padding-top: 0; border-top: 0; padding-left: clamp(2rem, 3vw, 5rem); border-left: 1px solid var(--line); } }
.result-wrap { display: grid; gap: calc(var(--gap) * 2); }
@media (min-width: 62em) { .result-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.result .big { font: 800 clamp(3rem, 1rem + 5vw, 8rem)/.9 var(--f-display); text-transform: uppercase; }
.result .lamp-xl { width: 2rem; height: 2rem; margin-bottom: 1.6rem; display: block; background: var(--teal); box-shadow: 0 0 0 .4rem rgb(94 232 198 / .18), 0 0 1.6rem rgb(94 232 198 / .6); }
.result.bad .lamp-xl { background: var(--red); box-shadow: 0 0 0 .4rem rgb(255 90 74 / .2), 0 0 1.6rem rgb(255 90 74 / .6); }
.result .lede { margin-top: 1.2rem; }
.result .actions { margin-top: 2rem; }

/* ---------- contact form ---------- */
.form-wrap { display: grid; gap: calc(var(--gap) * 2); }
@media (min-width: 62em) { .form-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.contact-form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .45rem; }
.field label { font: 800 1.35rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.field .hint { font-size: .95rem; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 1.1rem/1.45 var(--f-text); color: var(--ink); background: var(--panel); border: 2px solid var(--line-2); border-radius: var(--radius); padding: .75rem .9rem; min-height: 3rem; }
.field textarea { min-height: 13rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
.err { color: var(--red); font-weight: 700; font-size: 1rem; }
.form-summary { padding: .85rem 1.1rem; border: 2px solid var(--red); border-radius: var(--radius); font-weight: 700; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button { justify-self: start; cursor: pointer; }
.contact-form button:disabled { opacity: .6; cursor: progress; }
.aside-box { padding: clamp(1.25rem, 1rem + 1.2vw, 2.6rem); border-radius: var(--radius); background: var(--panel); border-top: 4px solid var(--amber); display: grid; gap: 1rem; align-content: start; }
.aside-box h2 { font-size: clamp(1.8rem, 1.2rem + 1.2vw, 3.2rem); }
.aside-box p { color: var(--muted); }
.aside-box .addr { font: 800 clamp(1.6rem, 1.1rem + 1vw, 3rem)/1.15 var(--f-display); color: var(--amber); overflow-wrap: anywhere; }
.aside-box .addr a { color: var(--amber); }
.aside-box p + h2 { margin-top: 1rem; }

/* ---------- credits ---------- */
.sources-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.sources-list li { padding-bottom: .9rem; border-bottom: 1px solid var(--line); break-inside: avoid; }
.sources-list b { color: var(--amber); font-family: var(--f-display); font-weight: 800; margin-right: .3rem; }
@media (min-width: 80em) { .sources-list { display: block; columns: 2; column-gap: calc(var(--gap) * 2); } .sources-list li { margin-bottom: .9rem; } }
@media (min-width: 150em) { .sources-list { columns: 3; } }
.sources-list a { overflow-wrap: anywhere; }
.sources-list .meta { display: block; color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.credit-photos { gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .credit-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80em) { .credit-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.credit-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: .7rem; }
.credit-photos dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; font-size: .92rem; }
.credit-photos dt { color: var(--muted); }
.credit-photos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.site-foot { background: var(--night); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 1.5rem + 3vw, 6rem) clamp(1.5rem, 1rem + 1.5vw, 3rem); font-size: 1rem; color: var(--muted); }
.site-foot .wrap { display: grid; gap: calc(var(--gap) * 1.5); }
@media (min-width: 48em) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 68em) { .site-foot .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--gap) clamp(2rem, 4vw, 6rem); } }
.site-foot .mark { margin: 0 0 .8rem; }
.site-foot p { max-width: 52ch; }
.site-foot p + p { margin-top: .6rem; }
.site-foot h2 { font-size: clamp(1.6rem, 1.2rem + .8vw, 2.6rem); color: var(--ink); margin-bottom: .6rem; }
.foot-nav ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
.foot-nav a { display: inline-block; padding-block: .3rem; color: var(--ink); font: 700 1.2rem/1.2 var(--f-display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.foot-nav a:hover { color: var(--amber); }
.foot-contact .addr { margin-block: .6rem .9rem; font: 800 1.4rem/1.2 var(--f-display); color: var(--amber); }
.foot-contact .addr a { color: var(--amber); }
.foot-small { list-style: none; padding: 0; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot-small a { color: var(--ink); }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.4rem; display: grid; gap: .6rem 3rem; font-size: .92rem; }
@media (min-width: 62em) { .foot-legal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .foot-legal p + p { margin-top: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  :root { --bg: #fff; --bg-2: #fff; --panel: #fff; --night: #fff; --ink: #000; --muted: #333; --line: #999; --line-2: #999; }
  .site-nav, .lang, .skip, .actions, .next, .photo.bleed::after { display: none; }
  body, .band, .stats, .site-foot { background: #fff; color: #000; }
  .lcd { color: #000; background: #fff; text-shadow: none; box-shadow: inset 0 0 0 1px #000; }
}

/* ---------- per-photo focus and small fixes ---------- */
.photo.bleed.rear { --focus-x: 42%; }
.sub.first { margin-top: 0; }
.hero .toc { margin-top: .4rem; }
.page-hero .toc { margin-top: 1.4rem; }