/*
Theme Name: Eco Car Guide
Theme URI: https://www.ecocarguide.com.au
Description: Standalone, lightweight theme for Eco Car Guide — premium photography-led automotive publication. Replaces MH Magazine + the ecg-child override layer. No jQuery, no FontAwesome, no slider/ticker/carousel libraries; one stylesheet, ~15 template files. Bundles the .ecg-table and .ecg-gallery rules the Upload/ publish bundles rely on, so no Additional CSS paste is needed.
Author: Eco Car Guide
Version: 0.4.6
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eco-car-guide
Tags: news, blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Design foundation lifted verbatim from ecg-child-preview/preview.css
   (the locked prototype). Preview-only rules (.pv-banner) removed.
   Publish-bundle CSS appended at the end of this file.
   ========================================================================== */
/* Self-hosted webfonts (downloaded from Google Fonts 2026-08-29).
   Replaces the render-blocking @import: same families, weights and
   unicode-ranges; served from this theme's own origin. */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/archivo-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/archivo-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap;
  src:url('assets/fonts/archivo-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap;
  src:url('assets/fonts/archivo-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ============================================================================
   ECG — "PREMIUM AUTOMOTIVE, PUSHED"  ·  preview stylesheet
   Cinematic featured-image heroes, spec-sheet data, score gauges, sticky
   verdict rail. Self-contained so the preview shows the TARGET design; live,
   this becomes child-theme template overrides + CSS.
   ============================================================================ */
:root{
  --ink-0:#0b0f0c; --ink-1:#0f1511; --ink-2:#141b16; --ink-3:#070a08;
  --line:#28322c; --line-2:#1b241f;
  /* Heritage #00ad02 is the primary brand green (Zac, 26 Aug 2026); emerald
     #0A9D4C is the secondary — gentler contrast for the supporting layer:
     two-tone table columns, on-light text greens, hover states. */
  --green:#00ad02; --green-br:#35c93a; --green-text:#0A7A3B; --green-deep:#087F3D; --green-2:#0A9D4C;
  --fg:#e9efea; --fg-dim:#93a49a;
  --paper:#ffffff; --paper-2:#f5f8f5; --ink:#14201a; --text:#29342e; --muted:#5f6f66; --line-lt:#e6ece7;
  --r:12px; --r-sm:7px;
  --display:'Archivo','Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'IBM Plex Sans','Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--ink-0); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.wrap{ max-width:1220px; margin:0 auto; padding:0 28px; }
@media(max-width:640px){ .wrap{ padding:0 16px; } }

/* signature kicker */
.kicker{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-dim); display:inline-flex; align-items:center; gap:9px; }
.kicker::before{ content:''; width:18px; height:2px; background:var(--green); }
.kicker.on-photo{ color:#d7e0da; }
.meta{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }


/* ===== TOP BAR ===== */
.topbar{ background:var(--ink-3); border-bottom:1px solid var(--line-2); }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; }
.topbar .meta{ font-size:11px; }
.topbar .socials{ display:flex; gap:16px; }
.topbar .socials .social-list{ display:flex; gap:16px; list-style:none; margin:0; padding:0; }
.topbar .socials a:hover{ color:var(--green-br); }

/* ===== MASTHEAD ===== */
.masthead{ background:var(--ink-0); text-align:center; padding:26px 0 20px; }
.wordmark{ font-family:var(--display); font-weight:900; font-size:30px; letter-spacing:-.03em; color:#fff; }
.wordmark .dot{ color:var(--green); }

/* Logo (0.4.5): the inline "Stop" lockup. The wordmark takes currentColor, so
   the same SVG is white on the dark shell and ink on the light theme; the tile
   and the full stop are brand green in both. Height is the only size knob. */
.logo{ display:inline-flex; align-items:center; color:#fff; flex:0 0 auto; line-height:0; }
.logo svg{ height:30px; width:auto; display:block; overflow:visible; }
.logo:hover .logo-dot, .logo:hover .logo-tile{ fill:var(--green-br); }
.siteheader .custom-logo-link img{ height:32px; width:auto; display:block; }
.footer .logo svg{ height:24px; }
.tagline{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); margin-top:6px; }

/* ===== NAV ===== */
.nav{ position:sticky; top:0; z-index:100; background:rgba(7,10,8,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.nav .wrap{ display:flex; justify-content:center; gap:4px; flex-wrap:wrap; }
.nav a{ font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg); padding:16px 15px; box-shadow:inset 0 0 0 var(--green); }
.nav a:hover{ color:var(--green-br); box-shadow:inset 0 -2px 0 var(--green); }
.nav a.current{ color:#fff; box-shadow:inset 0 -2px 0 var(--green); }

/* ===== HOMEPAGE LEAD FEATURE ===== */
.lead{ position:relative; margin:26px 0 8px; border-radius:var(--r); overflow:hidden; min-height:520px; display:flex; align-items:flex-end; }
.lead::before{ content:''; position:absolute; inset:-8% 0; z-index:0;
  background:var(--img) center/cover no-repeat;
  transform:translate3d(0,var(--py,0px),0) scale(var(--pz,1.02)); }
.lead::after{ content:''; position:absolute; inset:0; z-index:1;
  /* Two passes: a bottom scrim that earns the text its contrast, and a soft
     left wash for the headline. The upper right stays almost clear — that is
     where the car usually is. */
  background:linear-gradient(to top,rgba(6,10,8,.95) 0%,rgba(6,10,8,.80) 30%,rgba(6,10,8,.52) 55%,rgba(6,10,8,.12) 82%,rgba(6,10,8,0) 100%),
             linear-gradient(100deg,rgba(6,10,8,.72) 0%,rgba(6,10,8,.22) 46%,rgba(6,10,8,0) 74%); }
.lead-inner{ position:relative; z-index:2; padding:46px; max-width:760px; }
.lead h1{ font-family:var(--display); font-weight:900; font-size:52px; line-height:1.0; letter-spacing:-.03em; color:#fff; margin:16px 0 14px; text-shadow:0 2px 28px rgba(0,0,0,.55); }
.lead p{ color:#d7e0da; font-size:17px; max-width:560px; margin:0 0 22px; text-shadow:0 1px 18px rgba(0,0,0,.5); }
.lead .cta{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); padding:13px 22px; border-radius:var(--r-sm); }
.lead .cta:hover{ background:var(--green-deep); color:#fff; }
.lead .score-badge{ position:absolute; z-index:3; top:34px; right:34px; }
/* The gauge is the signature element — it shrinks on small screens, it does
   not disappear. Most of the audience is on a phone. */
@media(max-width:760px){ .lead h1{ font-size:32px; }
  /* Content is bottom-anchored, so when the text stack outgrows the card's
     min-height the title climbs into the gauge's corner. Reserving the
     gauge's band as top padding makes the overlap impossible. */
  .lead-inner{ padding:104px 20px 26px; }
  .lead .score-badge{ top:18px; right:18px; transform:scale(.68); transform-origin:top right; } }

/* spec chips (signature) */
.specbar{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 0 24px; }
.specbar li{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); padding:9px 13px; backdrop-filter:blur(4px); }
.specbar .v{ display:block; font-family:var(--mono); font-weight:600; font-size:16px; color:#fff; font-variant-numeric:tabular-nums; }
.specbar .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#aebcb2; margin-top:2px; }

/* ===== SCORE GAUGE ===== */
/* --goal is the real score (set inline by ecg_score_badge); --val is what the
   ring currently draws. Keeping them apart is what lets CSS hold the ring at
   zero and animate up — an inline --val would out-specify every rule here. */
@property --val{ syntax:'<number>'; inherits:false; initial-value:0; }
.score-badge{ --val:var(--goal,0); --tier:var(--green); --tier-text:var(--green-br);
  width:104px; height:104px; border-radius:50%; position:relative;
  background:conic-gradient(var(--tier) calc(var(--val)*3.6deg), rgba(255,255,255,.14) 0); display:grid; place-items:center; }
/* Four tiers, per the locked design system: >=9 outstanding, 7-8.9 good,
   5-6.9 average, <5 weak. */
.score-badge.tier-outstanding{ --tier:#8b5cf6; --tier-text:#a78bfa; }
.score-badge.tier-good{ --tier:var(--green); --tier-text:var(--green-br); }
.score-badge.tier-average{ --tier:#eab308; --tier-text:#f5ce3e; }
.score-badge.tier-weak{ --tier:#e0493a; --tier-text:#f0776b; }
.score-badge::before{ content:''; position:absolute; inset:7px; border-radius:50%; background:#0b0f0c; }
.score-badge .n{ position:relative; font-family:var(--mono); font-weight:600; font-size:30px; color:#fff; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.score-badge.sm{ width:60px; height:60px; }
.score-badge.sm::before{ inset:5px; background:#0b0f0c; }
.score-badge.sm .n{ font-size:18px; }
.score-badge.light::before{ background:var(--paper); } .score-badge.light .n{ color:var(--ink); }

/* ===== SECTION HEADER ===== */
.sec{ padding:44px 0 8px; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:26px; }
.sec-head h1, .sec-head h2{ font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--fg); margin:8px 0 0; display:flex; align-items:center; gap:12px; }
.sec-head h1::before, .sec-head h2::before{ content:''; width:5px; height:24px; background:var(--green); border-radius:1px; }
.sec-head .more{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); }
.sec-head .more:hover{ color:var(--green-br); }

/* ===== CARD GRID ===== */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:900px){ .grid3{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .grid3{ grid-template-columns:1fr; } }
.card{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.card:hover{ border-color:rgba(0,173,2,.55); box-shadow:0 14px 34px rgba(0,0,0,.5); transform:translateY(-3px); }
.card-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.card:hover .card-thumb img{ transform:scale(1.04); }
.card-tag{ position:absolute; left:12px; top:12px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-br); background:rgba(7,10,8,.82); padding:5px 9px; border-radius:var(--r-sm); }
.card-score{ position:absolute; right:12px; bottom:12px; z-index:2; }
.card-body{ padding:22px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card-body .meta{ font-size:11px; }
.card-body h3{ font-family:var(--display); font-weight:700; font-size:20px; line-height:1.22; letter-spacing:-.01em; color:var(--fg); margin:0; }
.card:hover .card-body h3{ color:var(--green-br); }
.card-body p{ color:var(--fg-dim); font-size:14px; line-height:1.6; margin:0; }

/* ===== VIDEO REVIEW (inc/ecg-video.php + ecg.js) =====
   Poster + play until clicked; the iframe is injected on play. Once playing
   and scrolled out of view the frame docks bottom-right (.is-docked) and the
   wrapper keeps the slot open so the page never jumps. Never links out. */
.vidbar{ margin:0 0 26px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; }
.rbody > .wrap > .vidbar{ margin-top:0; }
.rbody > .wrap > .mmbar + .vidbar{ margin-top:20px; }
.vid-media{ position:relative; background:var(--ink-3); }
.vid-media.vid-wide{ aspect-ratio:16/9; }
.vid-media.vid-tall{ aspect-ratio:9/16; flex:0 0 96px; border-radius:var(--r-sm); overflow:hidden; }
.vid-frame{ position:absolute; inset:0; background:#000; overflow:hidden; }
.vid-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.vid-frame:hover .vid-poster{ transform:scale(1.03); }
.vid-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,8,6,.55),rgba(5,8,6,0) 45%); pointer-events:none; }
.vid-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:72px; height:72px; border:0; border-radius:50%;
  background:var(--green); cursor:pointer; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .2s ease, background .2s ease; }
.vid-play-icon{ width:0; height:0; margin-left:5px; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #fff; }
.vid-play:hover{ transform:translate(-50%,-50%) scale(1.06); background:var(--green-deep); }
.vid-play:focus-visible{ outline:2px solid var(--green-br); outline-offset:3px; }
.vid-tall .vid-play{ width:34px; height:34px; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.vid-tall .vid-play-icon{ margin-left:3px; border-width:6px 0 6px 10px; }
.vid-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.vid-frame.is-playing .vid-poster, .vid-frame.is-playing .vid-play, .vid-frame.is-playing::after{ display:none; }
.vid-body{ padding:26px 26px 22px; display:flex; flex-direction:column; gap:8px; }
.vid-body .kicker{ color:var(--green-br); }
.vid-body h2{ font-family:var(--display); font-weight:800; font-size:21px; line-height:1.2; letter-spacing:-.015em; color:var(--fg); margin:0; }
.vid-body p{ color:var(--fg-dim); font-size:14px; line-height:1.6; margin:0; }
@media(max-width:860px){ .vidbar{ grid-template-columns:1fr; } .vid-body{ padding:18px 20px 20px; } }

/* Short-only cut: vertical card in the rail. */
.rail-video .body{ display:flex; gap:14px; align-items:stretch; }
.rail-video .txt{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rail-video .txt strong{ font-family:var(--display); font-weight:700; font-size:15px; line-height:1.25; color:var(--fg); }
.rail-video .txt p{ color:var(--fg-dim); font-size:13px; line-height:1.5; margin:0; }

/* Mini-player: only ever after a play click (ecg.js adds .is-docked). */
.vid-frame.is-docked{ position:fixed; inset:auto 22px 22px auto; z-index:60; width:min(380px,42vw); aspect-ratio:16/9;
  border-radius:var(--r-sm); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.6); }
.vid-tall .vid-frame.is-docked{ width:min(200px,32vw); aspect-ratio:9/16; }
.vid-dock-bar{ display:none; }
.vid-frame.is-docked .vid-dock-bar{ display:flex; position:absolute; left:0; right:0; top:0; z-index:4; align-items:center; justify-content:space-between;
  padding:6px 8px 10px 12px; background:linear-gradient(180deg,rgba(5,8,6,.85),rgba(5,8,6,0));
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#d7e0da; pointer-events:none; }
.vid-dock-bar b{ display:flex; align-items:center; gap:7px; font-weight:600; }
.vid-dock-bar b::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green-br); box-shadow:0 0 0 3px rgba(53,201,58,.25); }
.vid-close{ pointer-events:auto; width:24px; height:24px; border:0; border-radius:50%; background:rgba(7,10,8,.7); color:#fff; cursor:pointer;
  display:grid; place-items:center; font:700 15px/1 var(--sans); }
.vid-close:hover{ background:var(--green); }
.vid-return{ display:none; position:absolute; inset:0; width:100%; border:0; background:var(--ink-3); color:var(--fg-dim); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.vid-media.is-empty .vid-return{ display:grid; place-items:center; }
.vid-return:hover{ color:var(--green-br); }
@media(max-width:600px){
  .vid-frame.is-docked{ inset:auto 12px 12px auto; width:58vw; }
  .vid-tall .vid-frame.is-docked{ width:34vw; }
}
:root[data-theme="light"] .vid-dock-bar{ color:#e9efea; }

/* ===== ARCHIVE PAGINATION (the_posts_pagination markup) =====
   Mono uppercase to match .sec-head .more; page numbers as chips, current
   page in brand green; Newer/Older hug the outer edges, numbers centred. */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); border:0; white-space:nowrap; }
.navigation.pagination{ margin:34px 0 10px; padding-top:22px; border-top:1px solid var(--line); }
.navigation.pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.navigation.pagination .page-numbers{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 13px; box-sizing:border-box;
  color:var(--fg-dim); background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-sm); text-decoration:none;
  font-variant-numeric:tabular-nums; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.navigation.pagination a.page-numbers:hover{ color:var(--green-br); border-color:rgba(0,173,2,.55); }
.navigation.pagination .page-numbers.current{ color:#fff; background:var(--green); border-color:var(--green); }
.navigation.pagination .page-numbers.dots{ background:transparent; border-color:transparent; padding:0 4px; min-width:0; }
.navigation.pagination .prev{ margin-right:auto; }
.navigation.pagination .next{ margin-left:auto; }
.navigation.pagination .page-of{ display:none; }
@media(max-width:600px){
  .navigation.pagination .nav-links{ justify-content:space-between; }
  .navigation.pagination .prev{ margin:0; order:1; }
  .navigation.pagination .next{ margin:0; order:3; }
  .navigation.pagination .page-numbers:not(.prev):not(.next){ display:none; }
  .navigation.pagination .page-of{ display:inline-flex; order:2; align-items:center; height:38px; padding:0 13px; border-radius:var(--r-sm);
    font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--green); }
}

/* ===== SPLIT: NEWS + POPULAR ===== */
.split{ display:grid; grid-template-columns:2fr 1fr; gap:40px; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } }
.newsrow{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-2); }
.newsrow img{ width:130px; height:84px; object-fit:cover; border-radius:var(--r-sm); flex:0 0 auto; }
.newsrow h4{ font-family:var(--display); font-weight:700; font-size:17px; line-height:1.25; margin:6px 0 8px; color:var(--fg); }
.newsrow:hover h4{ color:var(--green-br); }
.ranklist{ list-style:none; margin:0; padding:0; }
.ranklist li{ display:flex; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line-2); }
.ranklist .rk{ font-family:var(--mono); font-weight:600; font-size:15px; color:var(--green); font-variant-numeric:tabular-nums; }
.ranklist h4{ font-family:var(--sans); font-weight:600; font-size:15px; line-height:1.3; margin:0; color:var(--fg); }
.ranklist li:hover h4{ color:var(--green-br); }

/* ===== MOTORING MINUTE BAND ===== */
.mm{ margin:46px 0; background:linear-gradient(120deg,var(--ink-2),var(--ink-1)); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 36px; display:flex; align-items:center; gap:28px; }
.mm .play{ width:66px; height:66px; border-radius:50%; background:var(--green); display:grid; place-items:center; flex:0 0 auto; color:#fff; font-size:22px; }
.mm h3{ font-family:var(--display); font-weight:800; font-size:23px; margin:0 0 6px; color:#fff; }
.mm p{ margin:0; color:var(--fg-dim); font-size:14px; }
.mm .stat{ margin-left:auto; text-align:right; }
.mm .stat .v{ font-family:var(--mono); font-weight:600; font-size:26px; color:var(--green-br); }
.mm .stat .k{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }
@media(max-width:700px){ .mm{ flex-wrap:wrap; padding:24px; } .mm .stat{ margin-left:0; } }

/* ===== REVIEW PAGE HERO (full-bleed featured image) ===== */
.rhero{ position:relative; min-height:74vh; display:flex; align-items:flex-end; overflow:hidden; }
.rhero::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--img) center/cover no-repeat; }
.rhero::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(5,8,6,.92) 0%,rgba(5,8,6,.62) 20%,rgba(5,8,6,.20) 42%,rgba(5,8,6,0) 66%); }
/* .rhero is a flex container, which makes its .wrap a flex item that
   shrink-wraps to its own text — every hero rendered at a different width,
   set by whichever line happened to be longest. Fill it so the hero column
   matches the 1220px wrap everywhere else on the page. */
.rhero .wrap{ width:100%; }
.rhero-inner{ position:relative; z-index:2; width:100%; padding:44px 0 40px; }
.rhero h1{ font-family:var(--display); font-weight:900; font-size:58px; line-height:.98; letter-spacing:-.032em; color:#fff; margin:18px 0 16px; max-width:900px; }
.rhero-meta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:22px; }
.rhero-meta .who{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:#c9d6cd; }
.rhero .score-badge{ position:absolute; right:0; bottom:40px; }
/* The gauge's dark centre is a ::before pinned with inset:7px, so the badge
   must stay positioned. Dropping it to static re-anchored that circle to
   .rhero-inner and painted a black ellipse across the whole mobile hero. */
@media(max-width:820px){ .rhero h1{ font-size:34px; }
  .rhero .score-badge{ position:relative; right:auto; bottom:auto; margin-top:20px; }
  /* The copy block fills far more of the hero on a phone, so it needs the
     scrim carried much further up than the desktop ramp does. */
  .rhero::after{ background:linear-gradient(0deg,rgba(5,8,6,.95) 0%,rgba(5,8,6,.84) 32%,rgba(5,8,6,.58) 60%,rgba(5,8,6,.18) 84%,rgba(5,8,6,0) 100%); } }

/* Standfirst and the credibility byline — both were emitted by single.php
   with no rules behind them. */
.rhero-standfirst{ font-size:19px; line-height:1.55; color:#d7e0da; max-width:720px; margin:0 0 20px;
  text-shadow:0 1px 18px rgba(0,0,0,.5); }
.rhero h1{ text-shadow:0 2px 28px rgba(0,0,0,.55); }
.rhero-by{ display:inline-flex; align-items:center; gap:10px; }
.rhero-by .au-mark, .rhero-by .au-face{ width:38px; height:38px; font-size:13px; box-shadow:none; }
.rhero-by .who{ color:#fff; font-weight:600; }
.rhero-by:hover .who{ color:var(--green-br); }
.rhero-method{ color:#a9bcb0 !important; }
/* Keep the hero copy clear of the score gauge, which is absolutely placed
   against the right edge of .rhero-inner. The gauge's band reaches ~144px up
   from the inner's bottom edge, so the byline, the standfirst's last line and
   a low-sitting title can all collide with it on narrower desktops. The
   reserve applies to every hero — scored or not — so titles wrap identically
   across the site at any given window width. */
@media(min-width:821px){ .rhero-meta{ max-width:calc(100% - 190px); }
  .rhero-standfirst{ max-width:min(720px, calc(100% - 190px)); }
  .rhero h1{ max-width:min(900px, calc(100% - 190px)); } }
@media(max-width:820px){ .rhero-standfirst{ font-size:16.5px; } .rhero-method{ display:none; } }

/* Rail author card. */
.rail-by{ display:flex; gap:13px; align-items:flex-start; }
.rail-by .au-mark, .rail-by .au-face{ width:46px; height:46px; font-size:15px; flex:0 0 auto; box-shadow:none; }
.rail-by-name{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--fg); }
.rail-by-name:hover{ color:var(--green-br); }
.rail-by p{ margin:5px 0 0; font-size:13px; line-height:1.5; color:var(--fg-dim); }

/* Tags below the article body sit on the light reading panel. */
/* ----- Share the verdict (inc/ecg-share.php) --------------------------- */
.share{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line-lt); display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; }
.share .kicker{ color:var(--green-text); }
.share-row{ display:flex; gap:8px; flex-wrap:wrap; }
.share-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:1px solid var(--line-lt); border-radius:var(--r-sm);
  background:var(--paper); color:var(--text); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:border-color .2s ease, color .2s ease; }
.share-btn:hover{ border-color:var(--green); color:var(--green-text); }
.share-btn:focus-visible{ outline:2px solid var(--green-br); outline-offset:2px; }
.share-btn.is-done{ border-color:var(--green); color:var(--green-text); }
.share-btn svg{ flex:0 0 auto; }

.article-tags{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line-lt);
  display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.article-tags .kicker{ color:var(--green-text); }
.article-tags a{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text); border:1px solid var(--line-lt); border-radius:100px; padding:6px 13px; }
.article-tags a:hover{ border-color:var(--green); color:var(--green-text); }

/* The Motoring Minute sits between hero and body, so it needs to clear them. */
.rbody > .wrap > .mmbar{ margin:0 0 26px; }

/* ===== REVIEW BODY: article + sticky rail ===== */
.rbody{ background:var(--ink-1); padding:40px 0 60px; }
.rbody-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; }
@media(max-width:940px){ .rbody-grid{ grid-template-columns:1fr; } }
.article{ background:var(--paper); border-radius:var(--r); padding:46px 50px; box-shadow:0 18px 46px rgba(0,0,0,.42); color:var(--text); }
@media(max-width:600px){ .article{ padding:24px 20px; } }
.article > p:first-of-type{ font-size:1.16rem; color:var(--ink); line-height:1.7; }
.article p,.article li{ color:var(--text); font-size:16.5px; line-height:1.78; }
.article b,.article strong{ color:var(--ink); }
.article h3{ font-family:var(--display); font-weight:800; font-size:25px; letter-spacing:-.02em; color:var(--ink); margin:42px 0 4px; padding-bottom:12px; position:relative; }
.article h3::after{ content:''; position:absolute; left:0; bottom:0; width:46px; height:3px; background:var(--green); border-radius:2px; }
.article h4{ font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); margin:26px 0 8px; }
.article a{ color:var(--green-text); font-weight:600; border-bottom:1px solid rgba(10,125,12,.3); }
.article a:hover{ color:var(--green-deep); }
.article img{ border-radius:var(--r); box-shadow:0 6px 20px rgba(13,74,35,.12); margin:20px 0; }
/* Without the script no .plate is built, so a pasted <p><img> would keep the
   generic radius/shadow/margins above. Give it the plate look in CSS alone. */
html:not(.ecg-js) .article p:has(> img:only-child){ margin:34px -56px; }
html:not(.ecg-js) .article p > img:only-child{ display:block; width:100%; border-radius:0; box-shadow:none; margin:0; }
@media(max-width:600px){ html:not(.ecg-js) .article p:has(> img:only-child){ margin:24px -20px; } }
.article ul{ margin:14px 0; padding:0; } .article ul li{ list-style:none; padding-left:22px; position:relative; margin:9px 0; }
.article ul li::before{ content:''; position:absolute; left:0; top:11px; width:7px; height:7px; background:var(--green); border-radius:1px; }
.article blockquote{ border-left:3px solid var(--green); background:var(--paper-2); padding:18px 22px; margin:28px 0; border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--display); font-weight:600; font-size:21px; line-height:1.4; color:var(--ink); }

/* article spec-chip row (light variant) */
.specbar.light li{ background:var(--paper-2); border:1px solid var(--line-lt); backdrop-filter:none; }
.specbar.light .v{ color:var(--ink); } .specbar.light .k{ color:var(--muted); }

/* tables */
.ecg-table{ border-collapse:collapse; width:100%; margin:24px 0; font-family:var(--sans); font-size:15px; border:1px solid var(--line-lt); border-radius:var(--r-sm); overflow:hidden; }
/* !important: article content carries legacy inline background-color:#00ad02 /
   #0ad029 on its th elements — the theme owns header colour, not the content. */
.ecg-table th{ background:var(--green) !important; color:#fff; text-align:left; padding:13px 15px; font-family:var(--display); font-weight:700; }
.ecg-table th:not(:first-child){ background:var(--green-2) !important; }
/* A single-title header row ("— at a glance") ships an empty second th;
   matching it to the first cell reads as one continuous bar instead of a
   darker empty block. */
.ecg-table th:empty{ background:var(--green) !important; }
.ecg-table td{ padding:12px 15px; border-bottom:1px solid var(--line-lt); color:var(--text); }
.ecg-table td:first-child{ font-weight:600; color:var(--ink); }
.ecg-table tbody tr:nth-child(even) td{ background:var(--paper-2); }
.ecg-table tbody tr:last-child td{ border-bottom:none; }

/* RAIL — two zones: sticky anchor (verdict + jump nav) + flowing recirculation */
.rail{ display:flex; flex-direction:column; gap:18px; }
.rail-sticky{ position:sticky; top:74px; z-index:2; }
@media(max-width:940px){ .rail-sticky{ position:static; } }
/* jump-link headings clear the sticky site header */
.article h3[id]{ scroll-margin-top:88px; }
.railcard{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
a.railcard{ text-decoration:none; transition:border-color .18s ease; }
a.railcard:hover{ border-color:var(--green); }
.railcard h4{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim);
  margin:0; padding:15px 18px; border-bottom:1px solid var(--line-2); }
.railcard .body{ padding:16px 18px; }
.verdict-top{ display:flex; align-items:center; gap:16px; padding:18px; }
.verdict-top .txt .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }
.verdict-top .txt .v{ display:block; font-family:var(--display); font-weight:800; font-size:16px; color:var(--fg); line-height:1.2; margin-top:3px; }
.bars{ list-style:none; margin:0; padding:0; }
.bars li{ margin:11px 0; }
.bars .row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-dim); margin-bottom:5px; }
.bars .row b{ color:var(--fg); }
.bars .track{ height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
.bars .fill{ height:100%; background:var(--green); border-radius:3px; }
.quickspec{ list-style:none; margin:0; padding:0; }
.quickspec li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.quickspec li:last-child{ border-bottom:none; }
.quickspec .k{ color:var(--fg-dim); } .quickspec .v{ font-family:var(--mono); color:var(--fg); font-variant-numeric:tabular-nums; }
.prosbox{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.prosbox .col{ padding:14px 16px; } .prosbox .col+.col{ border-left:1px solid var(--line-2); }
.prosbox h5{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
.prosbox .good h5{ color:var(--green-br); } .prosbox .bad h5{ color:#e0776a; }
.prosbox ul{ list-style:none; margin:0; padding:0; } .prosbox li{ font-size:12.5px; color:var(--fg-dim); margin:6px 0; line-height:1.35; }

/* rail: on-this-page jump nav */
.rail-toc .body{ padding:6px 18px 12px; }
.rail-toc ul{ list-style:none; margin:0; padding:0; }
.rail-toc li a{ display:block; position:relative; font-family:var(--sans); font-size:13.5px; color:var(--fg-dim);
  padding:8px 0 8px 15px; border-bottom:1px solid var(--line-2); }
.rail-toc li:last-child a{ border-bottom:none; }
.rail-toc li a::before{ content:''; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:1px; background:var(--line); transition:background .15s ease; }
.rail-toc li a:hover{ color:var(--green-br); }
.rail-toc li a:hover::before{ background:var(--green); }

/* rail: Motoring Minute mini */
.rail-mm{ display:flex; align-items:center; gap:12px; padding:14px 16px; }
.rail-mm .play{ width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff; font-size:12px; display:grid; place-items:center; flex:0 0 auto; }
.rail-mm .mm-t{ display:flex; flex-direction:column; flex:1; min-width:0; }
.rail-mm .mm-t .k{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green-br); }
.rail-mm .mm-t .t{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--fg); margin-top:2px; line-height:1.2; }
.rail-mm .time{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); flex:0 0 auto; }

/* rail: related reviews (image + text) */
.rail-list .body{ padding:4px 18px 10px; }
.railmini{ display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2); text-decoration:none; }
.rail-list .railmini:last-child{ border-bottom:none; }
.railmini img{ width:74px; height:52px; object-fit:cover; border-radius:var(--r-sm); flex:0 0 auto; }
.railmini .rm-txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.railmini .rm-k{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-br); }
.railmini .rm-t{ font-family:var(--display); font-weight:700; font-size:14px; line-height:1.22; color:var(--fg); }
.railmini:hover .rm-t{ color:var(--green-br); }

/* rail: most read (numbered) */
.rail-rank{ list-style:none; margin:0; padding:0; counter-reset:r; }
.rail-rank li{ counter-increment:r; display:flex; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line-2); }
.rail-rank li:last-child{ border-bottom:none; }
.rail-rank li::before{ content:counter(r,decimal-leading-zero); font-family:var(--mono); font-weight:600; font-size:13px; color:var(--green-br); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.rail-rank a{ font-family:var(--sans); font-weight:600; font-size:13.5px; line-height:1.3; color:var(--fg); text-decoration:none; }
.rail-rank a:hover{ color:var(--green-br); }

/* rail: latest video */
.rail-video{ display:block; text-decoration:none; overflow:hidden; }
.rail-video .vid-thumb{ display:block; position:relative; aspect-ratio:16/9; background:var(--img) center/cover no-repeat; }
.rail-video .vid-play{ position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%; background:rgba(0,173,2,.92); color:#fff; display:grid; place-items:center; font-size:15px; }
.rail-video .vid-txt{ display:block; padding:12px 16px; }
.rail-video .vid-txt .k{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green-br); }
.rail-video .vid-txt .t{ display:block; font-family:var(--display); font-weight:700; font-size:14px; color:var(--fg); margin-top:3px; line-height:1.2; }

/* rail: how it compares */
.rail-compare .body{ padding:4px 18px 10px; }
.cmp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-2); text-decoration:none; }
.rail-compare .cmp-row:last-child{ border-bottom:none; }
.cmp-name{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--fg); }
.cmp-fig{ font-family:var(--mono); font-size:10.5px; color:var(--fg-dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cmp-row:hover .cmp-name{ color:var(--green-br); }
.cmp-row.is-this{ margin:0 -18px; padding:10px 18px; background:rgba(0,173,2,.09); border-bottom:1px solid var(--line-2); }
.cmp-row.is-this .cmp-name{ color:var(--green-br); }
.cmp-row.is-this .cmp-fig{ color:var(--fg); }

/* rail: category chips */
.rail-tags .body{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px; }
.tagchip{ font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--fg-dim); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; transition:border-color .15s ease, color .15s ease; }
.tagchip:hover{ border-color:var(--green); color:var(--green-br); }

/* rail: author / E-E-A-T */
.rail-author .body{ padding:16px 18px; }
.au-top{ display:flex; align-items:center; gap:12px; }
.au-avatar{ width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:20px; flex:0 0 auto; }
.au-name{ font-family:var(--display); font-weight:800; font-size:15px; color:var(--fg); }
.au-role{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-br); margin-top:2px; }
.au-bio{ font-size:12.5px; line-height:1.55; color:var(--fg-dim); margin:12px 0 0; }

/* FOOTER */
.footer{ background:var(--ink-3); border-top:2px solid var(--green); padding:44px 0 0; }
/* Flex, not a fixed grid: the middle columns are widgets, so their count is
   editorial. Link columns stay narrow; a column carrying paragraphs (the
   "Who Are We?" sort) earns roughly double the width. */
.footer-grid{ display:flex; flex-wrap:wrap; gap:36px; }
.footer-grid > div{ flex:1 1 160px; min-width:0; }
.footer-grid > div:first-child{ flex:1.4 1 240px; }
.footer-grid > .footcol:has(> p, > .wp-block-paragraph){ flex:2 1 300px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin:0 0 8px; }
.footcol h2, .footcol h3, .footcol h4, .footcol h5{ font-family:var(--display);
  font-weight:700; font-size:15px; color:#fff; margin:0 0 14px; }
.footcol p{ margin:0 0 12px; line-height:1.6; }
:root[data-theme="light"] .footcol h2, :root[data-theme="light"] .footcol h3,
:root[data-theme="light"] .footcol h4, :root[data-theme="light"] .footcol h5{ color:var(--ink); }
@media(max-width:760px){ .footer-grid{ gap:24px; } .footer-grid > div{ flex-basis:100%; } }
.footer h5{ font-family:var(--display); font-weight:700; font-size:15px; color:#fff; margin:0 0 14px; }
.footer p,.footer a{ color:var(--fg-dim); font-size:14px; }
.footer ul{ list-style:none; margin:0; padding:0; } .footer li{ margin:8px 0; } .footer a:hover{ color:var(--green-br); }
.footer .wm{ font-family:var(--display); font-weight:900; font-size:22px; color:#fff; letter-spacing:-.02em; }
.footer .wm .dot{ color:var(--green); }
.copyright{ border-top:1px solid var(--line-2); margin-top:34px; }
.copyright .wrap{ display:flex; justify-content:space-between; height:52px; align-items:center; }
.copyright, .copyright a{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:#6c7d72; }

/* ===== HERO MOSAIC (big lead + 2 stacked secondary) ===== */
.mosaic{ display:grid; grid-template-columns:1.9fr 1fr; gap:18px; margin:26px 0 6px; }
.mosaic .lead{ margin:0; min-height:486px; }
.mosaic .rightcol{ display:grid; grid-template-rows:1fr 1fr; gap:18px; }
@media(max-width:860px){ .mosaic{ grid-template-columns:1fr; } .mosaic .lead{ min-height:400px; } }
.feature-sm{ position:relative; border-radius:var(--r); overflow:hidden; display:flex; align-items:flex-end; min-height:234px;
  transition:transform .2s ease, box-shadow .2s ease; }
.feature-sm::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--img) center/cover no-repeat; transition:transform .55s ease; }
.feature-sm::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(6,10,8,.94) 4%,rgba(6,10,8,.45) 52%,rgba(6,10,8,.05) 100%); }
.feature-sm:hover{ box-shadow:0 14px 34px rgba(0,0,0,.5); }
.feature-sm:hover::before{ transform:scale(1.05); }
.feature-sm .fs-inner{ position:relative; z-index:2; padding:20px 22px; }
.feature-sm h3{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1.1; letter-spacing:-.015em; color:#fff; margin:8px 0 0; }
.feature-sm:hover h3{ color:var(--green-br); }
.feature-sm .score-badge.sm{ position:absolute; z-index:3; top:16px; right:16px; }

/* ===== SEGMENT FILTER STRIP ===== */
.segbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:30px 0 2px; padding-bottom:2px; }
.segbar .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-right:6px; }
.segbar a{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim);
  border:1px solid var(--line); padding:8px 15px; border-radius:100px; }
.segbar a:hover{ border-color:var(--green); color:var(--fg); }
.segbar a.active{ background:var(--green); border-color:var(--green); color:#fff; }

/* ===== FEATURED GUIDE BAND (contrasting surface, breaks the rhythm) ===== */
.guide{ display:grid; grid-template-columns:1.05fr 1fr; margin:8px 0; background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; }
.guide .g-img{ position:relative; min-height:280px; }
.guide .g-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.guide .g-body{ padding:40px 44px; align-self:center; }
.guide h3{ font-family:var(--display); font-weight:800; font-size:30px; line-height:1.08; letter-spacing:-.02em; color:#fff; margin:14px 0 12px; }
.guide p{ color:var(--fg-dim); font-size:15px; margin:0 0 20px; max-width:440px; }
.guide .cta{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:12.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--green-br); }
.guide .cta:hover{ color:#fff; }
.guide .kicker{ color:var(--green-br); }
.guide.no-img{ grid-template-columns:1fr; }   /* pre-restore / thumbless guide */
@media(max-width:760px){ .guide{ grid-template-columns:1fr; } .guide .g-img{ min-height:200px; } .guide .g-body{ padding:26px 22px; } }

/* ===== CHAPTER BANDS (alternating surface) ===== */
.band{ background:var(--ink-1); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin-top:46px; padding:6px 0 50px; }
.band + .band{ margin-top:0; border-top:none; }

/* ===== IMPACT STRIP (credibility numbers, spec-sheet mono) ===== */
.impact{ background:var(--ink-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:48px; padding:40px 0; }
/* Column-flow, not a fixed template: the fleet-mix strip renders only the
   powertrains that exist, so the column count varies. */
.impact-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
@media(max-width:640px){ .impact-grid{ grid-auto-flow:row; grid-auto-columns:auto; gap:26px; } }
.impact .stat-link{ display:block; text-decoration:none; }
.impact .stat-link:hover .k{ color:var(--green-br); }
.impact .stat{ text-align:center; padding:6px 20px; }
.impact-grid .stat + .stat{ border-left:1px solid var(--line-2); }
@media(max-width:640px){ .impact-grid .stat + .stat{ border-left:none; } }
.impact .v{ font-family:var(--mono); font-weight:600; font-size:42px; line-height:1; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.impact .v em{ font-style:normal; color:var(--green); }
.impact .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin-top:10px; }

/* ===== COMPACT TILE GRID (small segment) ===== */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:820px){ .tiles{ grid-template-columns:1fr 1fr; } }
@media(max-width:440px){ .tiles{ grid-template-columns:1fr; } }
.tile{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
  transition:border-color .2s ease, transform .2s ease; }
.tile:hover{ border-color:rgba(0,173,2,.5); transform:translateY(-2px); }
.tile-thumb{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.tile-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile:hover .tile-thumb img{ transform:scale(1.05); }
.tile-body{ padding:12px 13px 14px; }
.tile .meta{ font-size:10px; }
.tile h4{ font-family:var(--display); font-weight:700; font-size:14.5px; line-height:1.2; letter-spacing:-.01em; color:var(--fg); margin:5px 0 0; }
.tile:hover h4{ color:var(--green-br); }

/* ===== TEXT-ONLY HEADLINE LIST (small, dense) ===== */
.headlist{ list-style:none; margin:0; padding:0; }
.headlist li a{ display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-2); }
.hl-thumb{ flex:0 0 96px; aspect-ratio:16/10; border-radius:5px; overflow:hidden; }
.hl-thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .25s ease; }
.headlist li a:hover .hl-thumb img{ transform:scale(1.06); }
.hl-text{ min-width:0; }
.headlist li:first-child a{ padding-top:2px; }
.headlist .meta{ font-size:10.5px; }
.headlist h4{ font-family:var(--display); font-weight:700; font-size:16px; line-height:1.28; letter-spacing:-.01em; color:var(--fg); margin:5px 0 0; }
.headlist li a:hover h4{ color:var(--green-br); }

/* featured news lead (medium, image on top) */
.newslead{ display:block; margin-bottom:8px; }
.newslead .nl-thumb{ aspect-ratio:16/9; border-radius:var(--r-sm); overflow:hidden; margin-bottom:14px; }
.newslead .nl-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.newslead:hover .nl-thumb img{ transform:scale(1.04); }
.newslead h3{ font-family:var(--display); font-weight:800; font-size:24px; line-height:1.15; letter-spacing:-.02em; color:var(--fg); margin:8px 0 8px; }
.newslead:hover h3{ color:var(--green-br); }
.newslead p{ color:var(--fg-dim); font-size:14.5px; margin:0; }

/* advice card tag accent */
.card-tag.advice{ color:#e0c15a; }

/* ===== COMPACT STICKY HEADER (logo left + nav right) — raises the hero ===== */
.siteheader{ position:sticky; top:0; z-index:100; background:rgba(7,10,8,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-2); }
.siteheader .wrap{ display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:62px; flex-wrap:wrap; }
.siteheader .wordmark{ font-size:21px; letter-spacing:-.025em; flex:0 0 auto; }
.siteheader .nav-inline{ display:flex; gap:1px; flex-wrap:wrap; }
.siteheader .nav-inline .nav-list{ display:flex; gap:1px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.siteheader .nav-inline a{ font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg); padding:20px 11px; box-shadow:inset 0 0 0 var(--green); } /* 13px until 0.4.6; the search toggle needed the room */
.siteheader .nav-inline a:hover{ color:var(--green-br); box-shadow:inset 0 -2px 0 var(--green); }
.siteheader .nav-inline a.current{ color:#fff; box-shadow:inset 0 -2px 0 var(--green); }
@media(max-width:640px){ .siteheader .logo svg{ height:26px; } .siteheader .wrap{ min-height:0; padding-top:10px; padding-bottom:6px; } .siteheader .nav-inline a{ padding:8px 10px; } }

/* ===== MID-ARTICLE RELATED CALLOUT (light panel) ===== */
.inline-related{ display:flex; gap:15px; align-items:center; border-top:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt);
  padding:15px 0; margin:30px 0; }
.inline-related img{ width:104px; height:66px; object-fit:cover; border-radius:var(--r-sm); flex:0 0 auto; }
.inline-related .ir-k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-text); display:block; margin-bottom:5px; }
.inline-related a{ font-family:var(--display); font-weight:700; font-size:17.5px; line-height:1.2; color:var(--ink); border:none !important; }
.inline-related a:hover{ color:var(--green-deep); }

/* ===== MOTORING MINUTE AUDIO EMBED (in article) ===== */
.mm-embed{ display:flex; align-items:center; gap:16px; background:var(--ink); border-radius:var(--r); padding:15px 20px; margin:26px 0; }
.mm-embed .play{ width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; font-size:15px; display:grid; place-items:center; flex:0 0 auto; }
.mm-embed .mm-txt{ flex:0 0 auto; }
.mm-embed .mm-txt .k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green-br); }
.mm-embed .mm-txt .t{ font-family:var(--display); font-weight:700; font-size:15px; color:#fff; margin-top:2px; }
.mm-embed .wave{ flex:1; height:24px; min-width:60px; border-radius:4px;
  background:repeating-linear-gradient(90deg, var(--green) 0 2px, transparent 2px 5px);
  opacity:.5; -webkit-mask:linear-gradient(90deg,#000 55%,transparent 55%); mask:linear-gradient(90deg,#000 55%,transparent 55%); }
.mm-embed .time{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); flex:0 0 auto; }

/* ===== THEME TOGGLE BUTTON ===== */
.he-right{ display:flex; align-items:center; gap:12px; }
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; font-size:15px; line-height:1; flex:0 0 auto;
  transition:border-color .2s ease, color .2s ease; }
.theme-toggle:hover{ border-color:var(--green); color:var(--green-br); }

/* ===== LIGHT THEME (toggled via data-theme="light" on <html>) ===== */
:root[data-theme="light"]{
  --ink-0:#f2f5f2;   /* page */
  --ink-1:#eef2ee;   /* wrapper / bands / rbody */
  --ink-2:#ffffff;   /* cards */
  --ink-3:#ffffff;   /* chrome: topbar / header / nav */
  --line:#dce4dd; --line-2:#e7ede7;
  --fg:#16241c;      /* text on the shell (now dark) */
  --fg-dim:#5f6f66;  /* muted */
  --green-br:#0A7A3B; /* links/hover on light backgrounds (AA on white; emerald text green) */
}
/* overrides for selectors that bake in dark values (heroes/photos stay dark by design) */
:root[data-theme="light"] .siteheader{ background:rgba(255,255,255,.9); }
:root[data-theme="light"] .nav{ background:rgba(255,255,255,.92); }
:root[data-theme="light"] .wordmark,
:root[data-theme="light"] .logo,
:root[data-theme="light"] .footer .wm{ color:var(--ink); }
:root[data-theme="light"] .nav-inline a.current,
:root[data-theme="light"] .nav a.current{ color:var(--ink); }
:root[data-theme="light"] .impact .v{ color:var(--ink); }
:root[data-theme="light"] .guide h3,
:root[data-theme="light"] .mm h3{ color:var(--ink); }
:root[data-theme="light"] .footer{ background:#e9efe9; }
:root[data-theme="light"] .footer h5{ color:var(--ink); }
:root[data-theme="light"] .copyright{ border-top-color:var(--line); }
:root[data-theme="light"] .copyright,
:root[data-theme="light"] .copyright a{ color:#788b7f; }
:root[data-theme="light"] .article{ box-shadow:0 10px 34px rgba(20,50,30,.10); border:1px solid var(--line-lt); }
/* Whites that read on the dark shell but vanish on light surfaces: the
   author-initials chip (its --ink-3 ground turns white), the authority
   band's big numerals, the Motoring Minute bar's title link (the bar's
   ink-gradient ground turns light), and the au-link hover. */
:root[data-theme="light"] .au-mark{ background:var(--ink); }
:root[data-theme="light"] .au-count strong,
:root[data-theme="light"] .au-big,
:root[data-theme="light"] .mmbar .mm-body h2 a,
:root[data-theme="light"] .mmbar .mm-body h3 a{ color:var(--ink); }
:root[data-theme="light"] .au-link:hover{ color:var(--ink); }

@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  /* Anything the reveal styles hid or collapsed must come back, unanimated.
     The pseudo-elements need naming explicitly — killing the transition alone
     would leave the section ticks and the kicker dash scaled to nothing. */
  .ecg-js [data-ecg-reveal]{ opacity:1 !important; transform:none !important; }
  .ecg-js [data-ecg-reveal] .sec-head h1::before,
  .ecg-js [data-ecg-reveal] .sec-head h2::before,
  .ecg-js .lead-inner .kicker::before{ transform:none !important; }
  .score-badge{ --val:var(--goal,0) !important; }
}

/* ==========================================================================
   PUBLISH-BUNDLE CSS — was Upload/additional-css.txt + ecg-table-styles.css,
   previously pasted by hand into Appearance > Additional CSS. Bundled here so
   pasted article-body.html renders correctly out of the box.
   ========================================================================== */
/* ============================================================
   ECG article images — add ONCE to WordPress:
   Appearance → Customise → Additional CSS
   (site-wide; every review that uses .ecg-hero / .ecg-gallery
   gets the same layout, so you only paste this a single time)
   ============================================================ */

/* Full-width hero image (one above each section's grid) */
.ecg-hero { margin: 18px 0; }
.ecg-hero img { width: 100%; height: auto; display: block; }

/* Driving loops (0.4.4): a short silent MP4 as a section hero, sized like the
   hero photo so the reading rhythm is unchanged. Video never joins the lightbox. */
.ecg-hero video { width: 100%; height: auto; display: block; background: #000; }
figure.ecg-loop { margin: 18px 0; }
.ecg-gallery figure.ecg-loop video { aspect-ratio: 3 / 2; object-fit: cover; }

/* Responsive image grid: 2-up on mobile by default */
.ecg-gallery { display: grid; gap: 10px; margin: 14px 0; grid-template-columns: repeat(2, 1fr); }
.ecg-gallery figure { margin: 0; }
.ecg-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* More columns on wider screens (all collapse to 2-up on phones) */
@media (min-width: 600px) {
  .ecg-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .ecg-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .ecg-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================================
   ECG REVIEW TABLES — house style (V1: polished brand green + zebra)
   Paste this ONCE into WordPress: Appearance > Customize > Additional CSS.
   Then any table with class="ecg-table" picks it up (every ECG review + all
   past articles once their <table> tags carry the class).
   The comparison table also gets class="ecg-table ecg-wide" so it swipe-scrolls
   on phones instead of breaking the layout. Chosen by Zac 2026-06-21.
   ============================================================================ */
.ecg-table{
  border-collapse:collapse;
  width:100%;
  margin:18px 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.45;
  box-shadow:0 1px 4px rgba(0,0,0,.10);
}
.ecg-table th{
  background:var(--green);     /* brand green */
  color:#fff;                  /* white header text for contrast */
  text-align:left;
  padding:12px 14px;
  font-weight:700;
}
.ecg-table th:not(:first-child){ background:var(--green-2); }   /* two-tone header */
.ecg-table td{
  padding:11px 14px;
  border-bottom:1px solid #e6e6e6;
  vertical-align:top;
}
.ecg-table tbody tr:nth-child(even) td{ background:#f4faf4; }  /* zebra */
.ecg-table tbody tr:hover td{ background:#eaf6ea; }           /* row hover */
.ecg-table tbody tr:last-child td{ border-bottom:none; }

/* --- Mobile: tighten spacing; wide tables swipe sideways --- */
@media (max-width:600px){
  .ecg-table{ font-size:14px; }
  .ecg-table th, .ecg-table td{ padding:10px 11px; }
  .ecg-wide{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .ecg-wide th, .ecg-wide td{ white-space:nowrap; }
}

/* ==========================================================================
   MOTION  (v0.3.0)

   Built for a reader who is hard to hold. The rule that shapes all of it:
   motion either DIRECTS attention or COMPETES with it. Arrival, scroll
   response and interaction feedback direct it. Ambient loops compete, so
   there are none in the reading area — every animation here settles and
   stops.

   Gated on .ecg-js, set by the inline head script BEFORE first paint, so a
   browser without JS gets the same page with nothing hidden.
   prefers-reduced-motion switches the lot off (see the block further up).
   ========================================================================== */

@property --pz{ syntax:'<number>'; inherits:false; initial-value:1.02; }

/* --- scroll progress ----------------------------------------------------
   A constant, cheap "you are getting somewhere" signal. Sits above the
   sticky header; transform-only, so scrolling never triggers layout. */
.ecg-progress{ position:fixed; left:0; top:0; right:0; height:3px; z-index:200; pointer-events:none; }
.ecg-progress span{ display:block; height:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--green),var(--green-br)); }

/* --- reveal on scroll ---------------------------------------------------- */
.ecg-js [data-ecg-reveal="up"]{ opacity:0; transform:translateY(15px); }
.ecg-js [data-ecg-reveal="up"].is-in{ opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.75,.25,1); }

/* Section ticks draw down as their section arrives. */
.ecg-js [data-ecg-reveal="up"] .sec-head h1::before,
.ecg-js [data-ecg-reveal="up"] .sec-head h2::before{ transform:scaleY(0); transform-origin:top; }
.ecg-js [data-ecg-reveal="up"].is-in .sec-head h1::before,
.ecg-js [data-ecg-reveal="up"].is-in .sec-head h2::before{ transform:scaleY(1);
  transition:transform .5s cubic-bezier(.2,.8,.2,1) .14s; }

/* Filter chips arrive as a run, not a block. */
.ecg-js .segbar.is-in a{ animation:ecg-chip .42s cubic-bezier(.2,.8,.2,1) both; }
.ecg-js .segbar.is-in a:nth-of-type(1){ animation-delay:.02s; }
.ecg-js .segbar.is-in a:nth-of-type(2){ animation-delay:.07s; }
.ecg-js .segbar.is-in a:nth-of-type(3){ animation-delay:.12s; }
.ecg-js .segbar.is-in a:nth-of-type(4){ animation-delay:.17s; }
.ecg-js .segbar.is-in a:nth-of-type(5){ animation-delay:.22s; }
.ecg-js .segbar.is-in a:nth-of-type(6){ animation-delay:.27s; }
.ecg-js .segbar.is-in a:nth-of-type(7){ animation-delay:.32s; }
.ecg-js .segbar.is-in a:nth-of-type(8){ animation-delay:.37s; }
@keyframes ecg-chip{ from{ opacity:0; transform:translateY(8px) scale(.96); } }

/* --- score gauge: ring draws, number counts (see ecg.js) ----------------- */
.ecg-js .score-badge[data-ecg-reveal="gauge"]:not(.is-in){ --val:0; }
.ecg-js .score-badge[data-ecg-reveal="gauge"].is-in{ animation:ecg-gauge 1s cubic-bezier(.22,.85,.25,1) both; }
@keyframes ecg-gauge{ from{ --val:0; } }

/* --- impact figures ------------------------------------------------------ */
.impact .cv{ display:inline-block; text-align:right; font-variant-numeric:tabular-nums; }

/* --- hero ---------------------------------------------------------------
   A slow push that never repeats, plus parallax drift driven from ecg.js. */
.ecg-js .lead::before{ animation:ecg-push 24s cubic-bezier(.16,.6,.3,1) both; }
@keyframes ecg-push{ from{ --pz:1.02; } to{ --pz:1.08; } }

/* Headline rises word by word out of its own mask. The padding/margin pair
   keeps descenders from being clipped by the mask. */
.lead h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.09em; margin-bottom:-.09em; }
.lead h1 .wi{ display:inline-block; animation:ecg-word .72s cubic-bezier(.19,.83,.26,1) both; }
@keyframes ecg-word{ from{ transform:translateY(108%); } to{ transform:translateY(0); } }
/* The generic rise would double up on a split headline. */
.ecg-js .lead-inner > h1.is-split{ animation:none; opacity:1; transform:none; }

.ecg-js .lead-inner > *{ animation:ecg-rise .62s cubic-bezier(.2,.75,.25,1) both; }
.ecg-js .lead-inner > .kicker{ animation-delay:.06s; }
.ecg-js .lead-inner > h1{ animation-delay:.14s; }
.ecg-js .lead-inner > p{ animation-delay:.42s; }
.ecg-js .lead-inner > .cta{ animation-delay:.52s; }
@keyframes ecg-rise{ from{ opacity:0; transform:translateY(16px); } }

/* The kicker's green dash draws itself out. */
.ecg-js .lead-inner .kicker::before{ transform-origin:left;
  animation:ecg-dash .5s cubic-bezier(.2,.8,.2,1) .12s both; }
@keyframes ecg-dash{ from{ transform:scaleX(0); } }

/* --- interaction feedback ------------------------------------------------
   Everything clickable answers immediately. On a page you are skimming, the
   reply to a hover IS the invitation to click. */
.lead .cta{ transition:background .2s ease, transform .18s ease, box-shadow .18s ease; }
.lead .cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,173,2,.34); }
.lead .cta:active{ transform:translateY(0); }

.feature-sm .fs-inner{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.feature-sm:hover .fs-inner{ transform:translateY(-4px); }
.feature-sm:hover h3{ color:var(--green-br); }

.segbar a{ transition:border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease; }
.segbar a:hover{ transform:translateY(-2px); }

.card:active{ transform:translateY(-1px); }

/* ==========================================================================
   AUTHORITY BAND — the first screen's answer to "who is this?"
   Sits directly under the hero. Three cells: the reviewer and the method,
   proof of what has been driven, and the broadcast reach.
   ========================================================================== */
.authority{ display:grid; grid-template-columns:1.3fr 1.25fr .85fr; gap:0;
  margin:16px 0 6px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(120deg,var(--ink-2),var(--ink-1)); overflow:hidden; }
.au-cell{ padding:22px 26px; min-width:0; }
.au-cell + .au-cell{ border-left:1px solid var(--line-2); }
.authority .kicker{ color:var(--green-br); }

/* --- who ---
   A multi-author masthead: every reviewer is a face and a link to their own
   archive, which is what makes the authorship claim checkable. Monograms
   rather than Gravatar — Gravatar serves a placeholder face to anyone without
   an account, and a row of those would make the team look invented. */
.au-faces{ display:flex; margin:12px 0 10px; padding-left:6px; }
.au-face-link{ display:block; margin-left:-6px; border-radius:50%;
  transition:transform .2s ease, z-index 0s; }
.au-face-link:hover{ transform:translateY(-3px) scale(1.07); position:relative; z-index:2; }
.au-mark, .au-face{ display:block; width:46px; height:46px; border-radius:50%;
  border:2px solid var(--green); box-shadow:0 0 0 3px var(--ink-1); }
.au-mark{ display:grid; place-items:center; background:var(--ink-3); color:#fff;
  font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:-.02em; }
.au-face{ object-fit:cover; }
.au-names{ margin:0 0 8px; font-size:13.5px; line-height:1.5; color:var(--fg-dim); }
.au-names a{ color:var(--fg); }
.au-names a:hover{ color:var(--green-br); }
.au-more{ color:var(--fg-dim); }
.au-pitch{ margin:0 0 10px; color:var(--fg-dim); font-size:13.5px; line-height:1.55; }

/* --- what has been driven --- */
.au-count{ margin:10px 0 12px; font-family:var(--display); font-weight:700; font-size:15px; color:var(--fg-dim); }
.au-count strong{ font-family:var(--mono); font-weight:600; font-size:38px; color:#fff;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-right:7px;
  display:inline-block; text-align:right; }
/* Four across, two rows: at eight thumbs each lands ~88px wide — big enough
   to read as a car, and the second row fills the cell's height. */
.au-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.au-strip a{ display:block; aspect-ratio:16/10; border-radius:5px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease; }
.au-strip img{ width:100%; height:100%; object-fit:cover; display:block; }
.au-strip a:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 8px 18px rgba(0,0,0,.55); }

/* --- as heard on --- */
.au-big{ margin:8px 0 4px; font-family:var(--mono); font-weight:600; font-size:38px; line-height:1;
  color:#fff; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.au-big em{ font-style:normal; color:var(--green); }
.au-big .cv{ display:inline-block; text-align:right; }
.au-sub{ margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-dim); line-height:1.7; }

.au-link{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-br); }
.au-link:hover{ color:#fff; }

/* On a phone the band would otherwise sit fourth, ~950px down — past the
   point most people stop. Dissolving the mosaic's box with display:contents
   promotes .lead and .rightcol to siblings of the band, so the order becomes
   hero -> who is this -> the other two features. Scoped to this breakpoint
   and to the wrap that actually holds the mosaic. */
@media(max-width:700px){
  .wrap:has(> .mosaic){ display:flex; flex-direction:column; }
  .mosaic{ display:contents; }
  .mosaic .lead{ order:1; margin:26px 0 0; }
  .authority{ order:2; }
  .mosaic .rightcol{ order:3; display:grid; gap:18px; margin-top:18px; }
  .segbar{ order:4; }
  .sec{ order:5; }
}

@media(max-width:1040px){
  .authority{ grid-template-columns:1fr 1fr; }
  .au-heard{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--line-2); }
}
@media(max-width:700px){
  .authority{ grid-template-columns:1fr; }
  .au-cell + .au-cell{ border-left:0; border-top:1px solid var(--line-2); }
  .au-cell{ padding:20px; }
  .au-big, .au-count strong{ font-size:32px; }
}

/* ==========================================================================
   MOTORING MINUTE BAR
   The review template's player, and — via the .mm-home modifier below — the
   homepage band as well. Progressive: the <audio> ships with controls and
   ecg.js swaps in the custom transport (bound by the .mmbar class).
   ========================================================================== */
.mmbar{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  margin:16px 0 6px; padding:20px 26px; border-radius:var(--r);
  background:linear-gradient(120deg,var(--ink-2),var(--ink-1)); border:1px solid var(--line); }
.mmbar::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:var(--green); }

.mmbar .mm-play{ position:relative; flex:0 0 auto; width:54px; height:54px; border:0; border-radius:50%;
  background:var(--green); color:#fff; cursor:pointer; display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease; }
.mmbar .mm-play:hover{ background:var(--green-deep); transform:scale(1.05); }
.mmbar .mm-play:focus-visible{ outline:2px solid var(--green-br); outline-offset:3px; }
.mm-icon{ width:0; height:0; margin-left:4px;
  border-left:15px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; }
.mmbar.is-playing .mm-icon{ width:14px; height:18px; margin-left:0; border:0;
  background:linear-gradient(90deg,#fff 0 5px,transparent 5px 9px,#fff 9px 14px); }
.mmbar.is-playing .mm-play::after{ content:''; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--green); animation:ecg-pulse 1.9s ease-out infinite; }
@keyframes ecg-pulse{ from{ transform:scale(1); opacity:.55; } to{ transform:scale(1.4); opacity:0; } }

.mmbar .mm-body{ flex:1 1 260px; min-width:0; }
.mmbar .mm-body .kicker{ color:var(--green-br); }
.mmbar .mm-body h2, .mmbar .mm-body h3{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1.2;
  letter-spacing:-.02em; margin:6px 0 4px; }
.mmbar .mm-body h2 a, .mmbar .mm-body h3 a{ color:#fff; }
.mmbar .mm-body h2 a:hover, .mmbar .mm-body h3 a:hover{ color:var(--green-br); }
.mmbar .mm-body p{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-dim); }

.mmbar .mm-scrub{ flex:0 1 300px; display:flex; align-items:center; gap:14px; }
.mmbar .mm-track{ flex:1 1 auto; height:6px; border-radius:3px; background:rgba(255,255,255,.13);
  cursor:pointer; overflow:hidden; }
.mmbar .mm-track:focus-visible{ outline:2px solid var(--green-br); outline-offset:3px; }
.mmbar .mm-fill{ display:block; width:0; height:100%; border-radius:3px; background:var(--green-br);
  transition:width .15s linear; }
.mmbar .mm-time{ font-family:var(--mono); font-size:12px; color:var(--fg-dim);
  font-variant-numeric:tabular-nums; flex:0 0 auto; }

.mmbar audio{ flex:1 1 100%; width:100%; }
.mmbar.mm-ready audio{ display:none; }
.mmbar:not(.mm-ready) .mm-play,
.mmbar:not(.mm-ready) .mm-scrub{ display:none; }

@media(max-width:760px){
  .mmbar{ padding:18px 20px; gap:14px 18px; }
  .mmbar .mm-scrub{ flex:1 1 100%; }
  .mmbar .mm-body h2, .mmbar .mm-body h3{ font-size:18px; }
}

/* homepage variant — same transport, more presence */
.mm-home{ margin:0 0 64px; padding:28px 32px; }
.mm-home .mm-play{ width:64px; height:64px; }
.mm-home .mm-body h3{ font-size:23px; margin:6px 0 4px; }

/* ── Progressive disclosure in the article body ─────────────────────────────
   The long version of a review, opt-in. The casual reader gets the narrative;
   the researcher opens what they need without either of them paying for the
   other. Content inside <details> stays in the DOM, so it is still indexed.
   Markup lives in the pasted article body: <details class="ecg-more">. */
.article details.ecg-more{ border:1px solid var(--line-lt); border-radius:var(--r-sm);
  margin:14px 0; background:var(--paper-2); overflow:hidden; }
.article details.ecg-more + details.ecg-more{ margin-top:10px; }
.article details.ecg-more > summary{ cursor:pointer; list-style:none; padding:15px 18px;
  font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink);
  display:flex; align-items:center; gap:12px; transition:background .15s ease; }
.article details.ecg-more > summary::-webkit-details-marker{ display:none; }
.article details.ecg-more > summary::before{ content:''; flex:0 0 auto; width:9px; height:9px;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg); transition:transform .2s ease; margin-left:2px; }
.article details.ecg-more[open] > summary::before{ transform:rotate(45deg); }
.article details.ecg-more > summary:hover{ background:rgba(10,125,12,.06); }
.article details.ecg-more > summary:focus-visible{ outline:2px solid var(--green); outline-offset:-2px; }
.article details.ecg-more[open] > summary{ border-bottom:1px solid var(--line-lt); }
.article details.ecg-more > *:not(summary){ margin-left:18px; margin-right:18px; }
.article details.ecg-more > *:not(summary):first-of-type{ margin-top:16px; }
.article details.ecg-more > *:not(summary):last-child{ margin-bottom:18px; }
.article details.ecg-more .ecg-table{ width:calc(100% - 0px); }

/* The signpost that lets a researcher skip the narrative in one click. */
.article p.ecg-signpost{ font-family:var(--mono); font-size:13px; letter-spacing:.01em;
  color:var(--muted); border-left:3px solid var(--green); padding:8px 0 8px 14px; margin:22px 0; }

/* ==========================================================================
   REVIEW PAGE — reading experience (v0.3)

   A review runs 18,000px on a phone-shaped screen. Everything below exists to
   make that length survivable: a rail that stays with the reader, a body with
   a rhythm rather than 17 identical photographs, and a first screen that says
   what the car is before you scroll.
   ========================================================================== */

/* ----- Rail: stays for the whole read ------------------------------------ */
/* The rail was 348px of cards against 18,000px of article, so it scrolled
   away in the first screen and left a third of the page empty for the rest.
   Everything the reader might want mid-read now sticks. */
/* Sticky sticks only within its own parent's box, and the rail was as short
   as its cards — so it left the screen in the first thousand pixels. The rail
   has to be the full height of the grid row for the anchor to hold. */
.rbody-grid > .rail{ align-self:stretch; height:100%; }
/* Only the "On this page" nav sticks (the verdict card scrolls away with the
   byline — the score already lives in the hero and the scorecard). When the
   section list outgrows the viewport, the LIST scrolls inside the card while
   the header and progress bar hold still; the spy keeps the current section
   in view. */
.rail-sticky{ top:84px; display:flex; flex-direction:column; gap:16px; background:var(--ink-1);
  max-height:calc(100vh - 104px); overflow:hidden; }
.rail-sticky .rail-toc{ display:flex; flex-direction:column; min-height:0; }
.rail-sticky .rail-toc .body{ overflow-y:auto; min-height:0; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.rail-sticky .rail-toc .body::-webkit-scrollbar{ width:6px; }
.rail-sticky .rail-toc .body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
@media(max-width:940px){
  .rail-sticky{ max-height:none; overflow:visible; }
  /* Below 940px the rail lands after the article, so its table of contents is
     a duplicate of a nav the reader has already passed. The collapsed copy at
     the top of the article is the one that does the work. */
  .rail-toc{ display:none; }
}

/* ----- On this page: jump nav, current section, how much is left --------- */
.rail-toc h4{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-bottom:none; padding-bottom:11px; }
.toc-mins{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--green-br); }
.toc-bar{ height:2px; background:var(--line-2); }
.toc-bar i{ display:block; height:100%; background:var(--green); transform:scaleX(0); transform-origin:0 50%; }
.rail-toc .body{ padding:4px 18px 12px; }
.rail-toc li.is-sub a{ padding-left:30px; font-size:12.5px; }
.rail-toc li.is-sub a::before{ left:15px; }
.rail-toc li a.is-active{ color:var(--fg); font-weight:600; }
.rail-toc li a.is-active::before{ background:var(--green); box-shadow:0 0 0 3px rgba(0,173,2,.16); }

/* Below 940px the rail sits after the article, where a table of contents is
   no use at all — so the reader gets a collapsed copy at the top instead. */
.toc-inline{ display:none; }
@media(max-width:940px){
  .toc-inline{ display:block; border:1px solid var(--line-lt); border-radius:var(--r-sm);
    background:var(--paper-2); margin:0 0 26px; }
  .toc-inline summary{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; cursor:pointer; list-style:none;
    font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .toc-inline summary::-webkit-details-marker{ display:none; }
  .toc-inline summary::after{ content:'+'; font-size:15px; color:var(--green-text); }
  .toc-inline[open] summary::after{ content:'–'; }
  .toc-inline ul{ list-style:none; margin:0; padding:0 16px 10px; }
  .toc-inline li{ margin:0; padding:0; }
  .toc-inline li::before{ display:none; }
  .toc-inline li a{ display:block; padding:10px 0; border-top:1px solid var(--line-lt);
    color:var(--text); font-size:14.5px; font-weight:500; border-bottom:none; }
  .toc-inline li.is-sub a{ padding-left:16px; font-size:13.5px; color:var(--muted); }
}

/* ----- Body: type ------------------------------------------------------- */
/* 16.5px over an 800px column ran to ~85 characters a line. 17.5px brings it
   back to the low seventies without narrowing the photography. */
.article{ padding:52px 56px; overflow:hidden; counter-reset:ecg-sec; }
.article p, .article li{ font-size:17.5px; line-height:1.75; }
.article > p:first-of-type{ font-size:19.5px; line-height:1.62; }
/* Pasted bodies routinely open with an empty heading; it must not take a
   chapter number with it. */
.article h2:empty, .article h3:empty, .article p:empty{ display:none; }

/* Headings are chapter breaks in a page this long, so they get numbered and
   given room. h2 where a body has one; h3 carries it where there is not. */
.article h2{ font-family:var(--display); font-weight:900; font-size:33px; line-height:1.12; letter-spacing:-.026em;
  color:var(--ink); margin:58px 0 14px; }
.article h3{ font-size:28px; line-height:1.18; margin:54px 0 14px; padding-bottom:0; }
.article h3::after{ display:none; }
.article h2::before, .article h3:not(:empty)::before{ counter-increment:ecg-sec;
  content:counter(ecg-sec,decimal-leading-zero); display:block;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--green-text); margin-bottom:10px; }
/* A body with both tiers: h3 is a sub-section, not a chapter — no number. */
.article:has(h2) h3::before{ display:none; }
.article:has(h2) h3{ font-size:23px; margin:38px 0 10px; }
.article h2[id], .article h3[id], .article h4[id]{ scroll-margin-top:96px; }

/* ----- Body: photography ------------------------------------------------ */
/* A single photograph bleeds to the panel edge — it is the reason people came.
   Runs of them pair up (see articlePlates in ecg.js) so seventeen shots read
   as a set of plates rather than seventeen identical interruptions. */
.article .plate{ margin:34px -56px; }
.article .plate img{ width:100%; border-radius:0; box-shadow:none; margin:0; }
.article .plate.is-pair{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.article .plate.is-pair img{ aspect-ratio:3/2; object-fit:cover; }
.article .plate figcaption, .article .wp-caption-text{ font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--muted); padding:10px 56px 0; margin:0; }
@media(max-width:600px){
  .article{ padding:26px 20px; }
  .article .plate{ margin:24px -20px; }
  .article .plate figcaption, .article .wp-caption-text{ padding:8px 20px 0; }
  .article p, .article li{ font-size:16.5px; }
  .article > p:first-of-type{ font-size:18px; }
  .article h2{ font-size:26px; margin:44px 0 12px; }
  .article h3{ font-size:23px; margin:40px 0 12px; }
}

/* ----- Body: WordPress galleries ---------------------------------------- */
/* [gallery] emits .gallery-columns-N and, on an html5 theme, no CSS to go with
   it — so eight photographs stacked full width and ran for 4,000px. They lay
   out as the grid the shortcode asked for, bled to the panel edge. */
.article .gallery{ display:grid; gap:6px; margin:34px -56px; grid-template-columns:repeat(3,1fr); }
.article .gallery-columns-1{ grid-template-columns:1fr; }
.article .gallery-columns-2{ grid-template-columns:repeat(2,1fr); }
.article .gallery-columns-4{ grid-template-columns:repeat(4,1fr); }
.article .gallery-columns-5{ grid-template-columns:repeat(5,1fr); }
.article .gallery .gallery-item{ margin:0; width:auto; float:none; }
.article .gallery .gallery-icon{ margin:0; overflow:hidden; }
.article .gallery img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; border:0;
  border-radius:0; box-shadow:none; margin:0; transition:transform .5s ease; }
.article .gallery a:hover img{ transform:scale(1.04); }
.article .gallery .gallery-caption{ font-family:var(--mono); font-size:10.5px; color:var(--muted); padding:6px 2px 0; margin:0; }
@media(max-width:600px){
  .article .gallery{ margin:24px -20px; grid-template-columns:repeat(2,1fr) !important; }
}

/* ----- Body: tables ----------------------------------------------------- */
/* Pasted bundles bring .ecg-table with them; hand-written posts do not, and
   were rendering as bare browser-default tables. */
.article table:not(.ecg-table){ border-collapse:collapse; width:100%; margin:28px 0; font-size:15px;
  border:1px solid var(--line-lt); border-radius:var(--r-sm); overflow:hidden; }
.article table:not(.ecg-table) th{ background:var(--green); color:#fff; text-align:left; padding:13px 15px;
  font-family:var(--display); font-weight:700; }
.article table:not(.ecg-table) td{ padding:12px 15px; border-bottom:1px solid var(--line-lt); color:var(--text); }
.article table:not(.ecg-table) tbody tr:nth-child(even) td{ background:var(--paper-2); }
.article table:not(.ecg-table) tbody tr:last-child td{ border-bottom:none; }
.article table:not(.ecg-table) td:first-child{ font-weight:600; color:var(--ink); }
.article .tablewrap{ margin:28px 0; overflow-x:auto; }
.article .tablewrap table{ margin:0; }

/* ----- Comments --------------------------------------------------------- */
/* Raw browser inputs on a dark shell looked like the page had stopped. */
.comments-area{ margin-top:8px; max-width:760px; }
.comments-title, .comment-reply-title{ font-family:var(--display); font-weight:800; font-size:22px;
  color:var(--fg); margin:0 0 18px; }
.comment-form p{ margin:0 0 14px; }
.comment-form label{ display:block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:7px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url],
.comment-form textarea, .search-field{
  width:100%; max-width:560px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--fg); font-family:var(--sans); font-size:15px; padding:12px 14px; }
.comment-form textarea{ max-width:100%; min-height:140px; resize:vertical; }
.comment-form input:focus, .comment-form textarea:focus, .search-field:focus{ outline:none; border-color:var(--green); }
.comment-form .form-submit{ margin-top:4px; }
.comment-form input[type=submit], .search-submit{ font-family:var(--sans); font-weight:600; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); border:0;
  border-radius:var(--r-sm); padding:13px 24px; cursor:pointer; transition:background .18s ease; }
.comment-form input[type=submit]:hover, .search-submit:hover{ background:var(--green-deep); }
.comment-notes, .comment-form-cookies-consent label, .logged-in-as{ font-size:13px; color:var(--fg-dim);
  font-family:var(--sans); letter-spacing:0; text-transform:none; }
.comment-form-cookies-consent{ display:flex; align-items:center; gap:9px; }
.comment-form-cookies-consent input{ margin:0; accent-color:var(--green); }
.comment-list{ list-style:none; margin:0 0 34px; padding:0; }
.comment-list li{ border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2);
  padding:18px 20px; margin:0 0 14px; }
.comment-list .children{ list-style:none; margin:14px 0 0 22px; padding:0; }
.comment-list .fn{ font-family:var(--display); font-weight:700; font-style:normal; color:var(--fg); }
.comment-list .comment-metadata a{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); }
.comment-list .comment-content p{ font-size:15px; color:var(--fg-dim); }

/* ----- First screen ----------------------------------------------------- */
/* On an 844px phone the header ran three rows and the hero 74vh, which put
   the headline — the only thing that tells a social arrival what they clicked
   — at 870px, below the fold. The nav collapses (see .navtoggle) and the hero
   gives back enough height for the title, standfirst and score to land. */
.navtoggle{ display:none; }
@media(max-width:820px){
  /* 74vh + a three-row header put the headline at 870px. 52vh keeps the car
     visible above the scrim and still lands the title, the standfirst and the
     score inside the first screen of an 844px phone. */
  .rhero{ min-height:60vh; }
  .rhero-inner{ padding:28px 0 24px; }
  .rhero h1{ font-size:31px; margin:14px 0 12px; }
  .rhero-standfirst{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:16px; }
  .rhero-meta{ gap:14px; margin-bottom:16px; }
  .rhero .score-badge{ transform:scale(.8); transform-origin:left center; margin-top:8px; margin-bottom:-10px; }

  .siteheader .wrap{ position:relative; }
  .navtoggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
    border:1px solid var(--line); border-radius:var(--r-sm); background:transparent; color:var(--fg); cursor:pointer; }
  .navtoggle span{ display:block; width:17px; height:2px; background:currentColor; position:relative; }
  .navtoggle span::before, .navtoggle span::after{ content:''; position:absolute; left:0; width:17px; height:2px;
    background:currentColor; transition:transform .2s ease, top .2s ease; }
  .navtoggle span::before{ top:-5px; } .navtoggle span::after{ top:5px; }
  .navtoggle[aria-expanded="true"] span{ background:transparent; }
  .navtoggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .navtoggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  .siteheader .nav-inline{ position:absolute; left:0; right:0; top:calc(100% + 14px); z-index:120;
    background:var(--ink-3); border:1px solid var(--line); border-radius:var(--r);
    box-shadow:0 22px 44px rgba(0,0,0,.5); padding:6px 4px; display:none; }
  .siteheader .nav-inline.is-open{ display:block; }
  .siteheader .nav-inline .nav-list{ flex-direction:column; gap:0; }
  .siteheader .nav-inline .nav-list li{ border-bottom:1px solid var(--line-2); }
  .siteheader .nav-inline .nav-list li:last-child{ border-bottom:none; }
  .siteheader .nav-inline .nav-list a{ display:block; padding:14px 16px; font-size:13px; }
  .siteheader .wrap{ min-height:56px; flex-wrap:nowrap; }
  /* The date wrapping to a second row cost 20px of the first screen for
     information nobody came for. */
  .topbar .meta:first-child{ display:none; }
  .topbar .wrap{ justify-content:flex-end; height:32px; }
}

/* A black disc on a white card reads as a rendering fault rather than a gauge,
   so the score sits on the card's own surface in light mode. */
:root[data-theme="light"] .railcard .score-badge::before,
:root[data-theme="light"] .verdict-top .score-badge::before{ background:var(--ink-2); }
:root[data-theme="light"] .railcard .score-badge .n{ color:var(--ink); }

/* ----- Score gauge lockup ------------------------------------------------ */
/* The number and its label were auto-placed into two equal grid rows and each
   centred inside its own half, so the number sat 22px above the circle's
   centre and the label 31px below it. Only the .sm badges looked right, and
   only because they hide the label. Centre the pair as one block instead.
   The padding compensates for trailing letter-spacing, which was pushing both
   lines a pixel left of the ring. */
.score-badge{ align-content:center; gap:3px; }
.score-badge .n{ padding-left:.04em; }

/* ----- Hero copy over photography --------------------------------------- */
/* The hero photograph is the reason the page exists, so it is not the thing
   that pays for legibility. A global scrim was the wrong instrument: it dims
   the whole frame to fix one band of it — the band where a white Trailseeker
   happens to park behind a white headline.
   So the scrim is lighter than it has ever been, and the contrast is bought
   locally instead: a pool of shade over the corner the copy occupies, and a
   genuinely heavy shadow on the type.
   Both passes live on .rhero::after, which is inset:0 over the whole hero —
   on .rhero-inner the pool was cut off by that element's own edge, leaving a
   vertical seam down the middle of the photograph. Here the falloff runs out
   at the screen edge, where there is nothing to see it against. */
.rhero::after{ background:
  radial-gradient(74% 66% at 24% 86%,
    rgba(3,6,4,.78) 0%, rgba(3,6,4,.60) 32%, rgba(3,6,4,.34) 56%,
    rgba(3,6,4,.12) 76%, rgba(3,6,4,0) 92%),
  linear-gradient(0deg,
    rgba(5,8,6,.88) 0%, rgba(5,8,6,.56) 15%, rgba(5,8,6,.26) 33%,
    rgba(5,8,6,.08) 52%, rgba(5,8,6,0) 70%); }

/* Layered rather than one wide blur: the 1px pass holds the glyph edge, the
   4px pass gives it a body to sit against, the wide passes separate the block
   from the picture. A single 28px blur only ever produced haze. */
.rhero h1{ text-shadow:
  0 1px 1px rgba(3,6,4,.72), 0 2px 4px rgba(3,6,4,.62),
  0 6px 16px rgba(3,6,4,.6), 0 16px 46px rgba(3,6,4,.55); }
.rhero-standfirst{ text-shadow:
  0 1px 1px rgba(3,6,4,.72), 0 2px 6px rgba(3,6,4,.6), 0 8px 26px rgba(3,6,4,.5); }
.rhero .kicker.on-photo,
.rhero-meta .who,
.rhero-by .who{ text-shadow:
  0 1px 2px rgba(3,6,4,.8), 0 2px 8px rgba(3,6,4,.6); }

@media(max-width:820px){
  /* The copy runs the full width on a phone, so the pool becomes a wash for
     no benefit — the bottom ramp is the whole treatment there. */
  .rhero::after{ background:linear-gradient(0deg,
    rgba(5,8,6,.92) 0%, rgba(5,8,6,.74) 26%, rgba(5,8,6,.44) 54%,
    rgba(5,8,6,.14) 78%, rgba(5,8,6,0) 96%); }
}

/* ==========================================================================
   GALLERY STRIP + LIGHTBOX  (see galleries() in ecg.js)
   The supporting shots scroll sideways instead of stacking, and open full
   screen on click. Without the script the markup stays the grid above.
   ========================================================================== */
.stripwrap{ margin:28px 0 30px; }
.strip{ display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; }
.strip::-webkit-scrollbar{ display:none; }
/* 46% leaves a third frame peeking, which is what says "keep going" — an
   exact 2-up looks like the whole set. */
.strip-item{ flex:0 0 46%; scroll-snap-align:start; padding:0; border:0; background:none;
  cursor:zoom-in; border-radius:3px; overflow:hidden; position:relative; line-height:0; }
.strip-item img{ width:100%; aspect-ratio:3/2; object-fit:cover; margin:0; border-radius:0;
  box-shadow:none; transition:transform .5s ease, filter .25s ease; }
.strip-item:hover img{ transform:scale(1.03); }
.strip-item:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
@media(max-width:600px){ .strip-item{ flex-basis:78%; } }

.strip-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:9px; }
.strip-count{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); }
.strip-arrows{ display:flex; gap:7px; }
.strip-a{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line-lt);
  background:var(--paper); cursor:pointer; position:relative; transition:border-color .18s ease, opacity .18s ease; }
.strip-a::before{ content:''; position:absolute; inset:0; margin:auto; width:7px; height:7px;
  border-top:2px solid var(--ink); border-right:2px solid var(--ink); }
.strip-prev::before{ transform:translateX(2px) rotate(-135deg); }
.strip-next::before{ transform:translateX(-2px) rotate(45deg); }
.strip-a:hover{ border-color:var(--green); }
.strip-a[disabled]{ opacity:.3; cursor:default; }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:300; display:none; background:rgba(4,7,5,.96);
  backdrop-filter:blur(3px); place-items:center; }
.lb.is-open{ display:grid; }
.lb-fig{ margin:0; display:grid; place-items:center; gap:14px; padding:26px; max-width:100vw; }
.lb-fig img{ max-width:min(1400px,92vw); max-height:82vh; width:auto; height:auto;
  object-fit:contain; border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,.6); margin:0; }
.lb-fig figcaption{ font-family:var(--mono); font-size:12px; line-height:1.5; color:#c9d6cd;
  text-align:center; max-width:760px; }
.lb-count{ position:absolute; bottom:22px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#8b9c92; }
.lb-x{ position:absolute; top:18px; right:20px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; }
.lb-x:hover{ border-color:var(--green); color:var(--green-br); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35);
  cursor:pointer; }
.lb-nav::before{ content:''; position:absolute; inset:0; margin:auto; width:11px; height:11px;
  border-top:2px solid #fff; border-right:2px solid #fff; }
.lb-prev{ left:20px; } .lb-prev::before{ transform:translateX(3px) rotate(-135deg); }
.lb-next{ right:20px; } .lb-next::before{ transform:translateX(-3px) rotate(45deg); }
.lb-nav:hover{ border-color:var(--green); }
@media(max-width:700px){
  .lb-nav{ display:none; }          /* swipe is the gesture on a phone */
  .lb-fig{ padding:16px; } .lb-fig img{ max-height:74vh; }
}
.lb.is-single .lb-nav, .lb.is-single .lb-count{ display:none; }

/* ----- How a set is indexed --------------------------------------------- */
/* Decided: a contact sheet where there is room, a swipe strip on a phone.
   The sheet shows the whole set at once, which is the point — the coverage is
   the claim, and two frames behind an arrow do not make it. Below 700px three
   across would be 100px thumbnails, so the native sideways gesture takes over.
   The thumbnails are small on purpose either way: they are the index, the
   lightbox is the viewing size. */
@media(min-width:701px){
  .stripwrap .strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; overflow:visible; }
  .stripwrap .strip-item{ flex:none; width:auto; }
  .stripwrap .strip-arrows{ display:none; }
}

/* ==========================================================================
   SCORECARD — the score, itemised (see ecg_scorecard() in functions.php)

   Ten of the design system's signature gauges, one per criterion — the same
   .score-badge component as the hero and the cards, so the element adds no
   new visual language. Each circle fills to its own score (a 7.5 fills 3/4
   of its ring) and wears the judgement tier in on-light hues, deepened from
   the hero versions to hold up on paper. Colour repeats what the fill length
   and the printed number already say — it never carries alone — and the
   weakest criterion is still named in words. The gauges cascade in reading
   order on arrival (--gd, set inline by ecg_scorecard()).
   ========================================================================== */
.scorecard{ margin:44px 0 8px; padding:28px 0 0; border-top:1px solid var(--line-lt); position:relative; }
.sc-head{ font-family:var(--mono) !important; font-size:11px !important; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 22px !important; }
.sc-mean{ position:absolute; top:29px; right:0; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
/* The chapter counter must not tick for this heading — `content:none` stops
   the pseudo-element existing at all, which is what stops the increment. */
.article h3.sc-head::before{ content:none; }

.sc-gauges{ list-style:none; margin:0 !important; padding:0 !important; display:grid;
  grid-template-columns:repeat(5,1fr); gap:28px 14px; }
@media(max-width:640px){ .sc-gauges{ grid-template-columns:repeat(3,1fr); gap:24px 10px; } }
@media(max-width:400px){ .sc-gauges{ grid-template-columns:repeat(2,1fr); } }
.sc-gauges li{ margin:0 !important; padding:0 !important; display:grid; justify-items:center;
  align-content:start; gap:9px; text-align:center; }
.sc-gauges li::before{ display:none !important; }

/* The signature gauge, re-grounded for paper: grey track instead of the
   hero's white-alpha, paper inner disc, ink number, on-light tier hues. */
.sc-gauges .score-badge{ width:76px; height:76px;
  background:conic-gradient(var(--tier) calc(var(--val)*3.6deg), var(--line-lt) 0); }
.sc-gauges .score-badge::before{ inset:6px; background:var(--paper); }
.sc-gauges .score-badge .n{ font-size:19px; color:var(--ink); }
.sc-gauges .score-badge.tier-outstanding{ --tier:#7c3aed; }
.sc-gauges .score-badge.tier-good{ --tier:var(--green-text); }
.sc-gauges .score-badge.tier-average{ --tier:#b26a00; }
.sc-gauges .score-badge.tier-weak{ --tier:#c1362a; }
.ecg-js .sc-gauges .score-badge.is-in{ animation-delay:var(--gd,0s); }

.sc-gauges .k{ font-size:13px !important; line-height:1.3; color:var(--text); }
.sc-gauges .tag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-lt); border-radius:100px; padding:2px 7px; margin-left:6px;
  vertical-align:1px; white-space:nowrap; }

.sc-foot{ font-size:13px !important; color:var(--muted) !important; margin:22px 0 0 !important; }
.sc-foot a{ font-weight:600; }

/* ==========================================================================
   SEARCH (0.4.6, inc/ecg-search.php + search() in ecg.js)
   A magnifier beside the theme toggle opens a panel under the sticky header:
   the form, live suggestions as you type, and the make grid (monochrome
   badges painted as CSS masks in currentColor, so one file serves both
   themes). No script: the magnifier is a link to the search page.
   ========================================================================== */
.search-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; flex:0 0 auto;
  transition:border-color .2s ease, color .2s ease, background .2s ease; }
.search-toggle:hover, .search-toggle[aria-expanded="true"]{ border-color:var(--green); color:var(--green-br); }
.search-toggle[aria-expanded="true"]{ background:rgba(0,173,2,.12); }
.search-toggle svg{ display:block; }

.search-panel{ position:absolute; left:0; right:0; top:100%; z-index:130; background:var(--ink-3);
  border-bottom:1px solid var(--line-2); box-shadow:0 24px 48px rgba(0,0,0,.45);
  max-height:calc(100vh - 62px); max-height:calc(100dvh - 62px); overflow:auto; -webkit-overflow-scrolling:touch; }
.siteheader .search-panel > .wrap{ display:block; min-height:0; padding-top:22px; padding-bottom:26px; } /* not the header's flex row */
.search-panel[hidden]{ display:none; }
.search-panel[hidden]:target{ display:block; } /* no-JS: the toggle is a hash link */

/* the form — also styles the 404 / no-results form */
.searchform{ display:flex; align-items:center; gap:10px; max-width:760px; position:relative; }
.searchform input[type=search]{ flex:1; min-width:0; height:48px; padding:0 16px 0 44px; font-family:var(--sans); font-size:16px;
  color:var(--fg); background:var(--ink-1); border:1px solid var(--line); border-radius:var(--r-sm); -webkit-appearance:none; appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease; }
.searchform input[type=search]:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,173,2,.18); }
.searchform input[type=search]::placeholder{ color:var(--fg-dim); }
.searchform input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.searchform .searchform-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--fg-dim); display:flex; pointer-events:none; }
.searchform:focus-within .searchform-icon{ color:var(--green-br); }
.searchform:not(.searchform--panel) input[type=search]{ padding-left:16px; }
.searchform button, .search-submit{ height:48px; padding:0 20px; border-radius:var(--r-sm); border:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--green); flex:0 0 auto; }
.searchform button:hover, .search-submit:hover{ background:var(--green-deep); }
.search-panel .searchform{ max-width:none; }
.searchform--page{ margin:0 0 26px; }
.searchform .search-cancel{ display:none; height:44px; padding:0 4px 0 12px; background:none; border:none; color:var(--fg-dim); cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; flex:0 0 auto; }
.searchform .search-cancel:hover{ color:var(--green-br); background:none; }
.sr--wait{ color:var(--fg-dim); font-size:14px; cursor:default; }
.sr--wait:hover, .sr--none:hover{ background:none; }
.sr--wait::before{ content:''; width:14px; height:14px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--green); flex:0 0 auto;
  animation:ecg-spin .8s linear infinite; }
@keyframes ecg-spin{ to{ transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){ .sr--wait::before{ animation:none; border-top-color:var(--line); } }
.mk.is-here a{ border-color:var(--green); background:rgba(0,173,2,.08); }
.mk.is-here .mk-badge{ color:var(--green-br); }
html.ecg-search-lock, html.ecg-search-lock body{ overflow:hidden; } /* phones: the page underneath stays put */
.no-results .searchform, .error404 .searchform{ margin:18px 0 26px; }

/* live suggestions */
.search-live{ margin-top:14px; }
.search-live[hidden]{ display:none; }
.search-live .sl-k{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
  padding:12px 0 6px; border-bottom:1px solid var(--line-2); margin-bottom:4px; }
.search-live .sl-k:first-child{ padding-top:2px; }
.sr{ display:flex; align-items:center; gap:14px; padding:8px 10px; margin:0 -10px; border-radius:var(--r-sm); color:var(--fg); }
.sr:hover, .sr[aria-selected="true"]{ background:var(--ink-1); }
.sr:hover .sr-t, .sr[aria-selected="true"] .sr-t{ color:var(--green-br); }
.sr-img{ width:76px; height:48px; border-radius:5px; object-fit:cover; flex:0 0 auto; background:var(--ink-1); }
.sr-body{ flex:1; min-width:0; }
.sr-t{ font-family:var(--display); font-weight:700; font-size:15.5px; line-height:1.25; letter-spacing:-.01em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-m{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); margin-top:3px; display:block; }
.sr-score{ font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:-.02em; flex:0 0 auto; min-width:44px; text-align:center;
  padding:5px 8px; border-radius:999px; border:1px solid var(--line); color:var(--green-br); font-variant-numeric:tabular-nums; }
.sr-score.tier-outstanding{ color:#a78bfa; } .sr-score.tier-average{ color:#f5ce3e; } .sr-score.tier-weak{ color:#f0776b; }
.sr--more{ justify-content:center; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); margin-top:4px; }
.sr--more:hover, .sr--more[aria-selected="true"]{ color:var(--green-br); }
.sr--none{ color:var(--fg-dim); font-size:14px; cursor:default; }
.sr--none:hover{ background:none; }

/* the make grid */
.search-makes{ margin-top:22px; }
.search-makes[hidden]{ display:none; }
.search-makes .kicker{ margin-bottom:12px; }
.mk-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.mk{ margin:0; }
.mk.is-off{ display:none; }
.mk a{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px 11px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--ink-1); color:var(--fg); text-align:center; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.mk a:hover, .mk.is-hit a{ border-color:var(--green); }
.mk a:hover{ transform:translateY(-2px); }
.mk a:hover .mk-badge, .mk.is-hit .mk-badge{ color:var(--green-br); }
.mk-badge{ display:block; width:84px; height:34px; color:var(--fg); background:currentColor;
  -webkit-mask:var(--mk) center / contain no-repeat; mask:var(--mk) center / contain no-repeat; }
.mk-badge.mk-mono{ background:none; -webkit-mask:none; mask:none; display:grid; place-items:center; font-family:var(--display); font-weight:900;
  font-size:17px; letter-spacing:-.03em; border:2px solid currentColor; border-radius:8px; width:52px; }
.mk-name{ font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.02em; line-height:1.2; }
.mk-n{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); }
.sec--makes{ padding-top:0; }
.h1-make .mk-badge{ width:96px; height:36px; color:var(--fg); }
.sec-head h1.h1-make{ gap:18px; }

:root[data-theme="light"] .search-panel{ box-shadow:0 24px 48px rgba(20,32,26,.16); }
:root[data-theme="light"] .sr-score{ color:var(--green-text); }
:root[data-theme="light"] .sr:hover .sr-t, :root[data-theme="light"] .sr[aria-selected="true"] .sr-t{ color:var(--green-deep); }
:root[data-theme="light"] .mk a:hover .mk-badge, :root[data-theme="light"] .mk.is-hit .mk-badge, :root[data-theme="light"] .mk.is-here .mk-badge{ color:var(--green-deep); }
:root[data-theme="light"] .searchform .search-cancel:hover{ color:var(--green-deep); }

@media(max-width:640px){
  /* Three controls now sit right of the logo; at 360px they only fit smaller. */
  .siteheader .logo svg{ height:23px; }
  .he-right{ gap:7px; }
  .he-right .navtoggle, .he-right .search-toggle, .he-right .theme-toggle{ width:34px; height:34px; }
  .he-right .theme-toggle{ font-size:14px; }
  .siteheader .search-panel > .wrap{ padding-top:14px; padding-bottom:18px; }
  .search-panel{ max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px); }
  .searchform input[type=search]{ height:44px; font-size:16px; }
  .searchform button, .search-submit{ height:44px; padding:0 14px; }
  .search-panel .search-submit{ display:none; } /* Enter / the keyboard's Search key submits; Cancel takes the slot */
  .searchform .search-cancel{ display:inline-flex; align-items:center; }
  .sr-img{ width:64px; height:40px; }
  .sr-t{ white-space:normal; font-size:14.5px; }
  .mk-grid{ grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:6px; }
  .mk a{ padding:11px 6px 9px; }
  .mk-badge{ width:68px; height:28px; }
  .mk-n{ display:none; }
}

/* Classic-editor [caption] figures carry an inline width (1500px); without
   this the .article clips them (backlog K9; Zac's live Additional CSS since
   10 Sep 2026, now owned by the theme). */
.article .wp-caption{ max-width:100%; width:auto !important; }