/* evansandchargers.com — the one stylesheet, injected into every page by
   eac/build.mjs and lifted out to /assets/ under a content hash, so all pages
   share one cached file.

   The layout borrows the *grammar* of a vehicle marketplace — a white top
   bar, a hero with one search box, a filter panel, cards with a picture area,
   a key figure where a price would sit, a detail page with a fact grid — and
   nothing else: no photographs, no purple, no orange, no rounded display
   typeface. Petrol blue and electric green, system fonts, our own icons. */
:root{
  --ink:#14202b; --muted:#5b6771; --faint:#8b95a0; --line:#e1e6eb; --soft:#eef2f5; --bg:#f4f6f8; --white:#fff;
  --brand:#14364a; --brand-2:#1d5a7a; --brand-3:#2a7fa8; --accent:#16b978; --accent-dark:#0a7a4d; --accent-soft:#dff6ea;
  --sun:#ffc857; --sun-dark:#b98a1f; --warn:#b3261e; --ok:#0a7a4d;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px; --shadow:0 10px 30px -18px rgba(11,60,93,.45);
  --ed-accent:var(--accent); --ed-strong:var(--brand-2); --ed-bg:var(--bg); --ed-top:64px;
  --ed-change-text:#7a5a00; --ed-change-row:#fffbea;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-text-size-adjust:100%;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
a{color:var(--brand-2)}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;width:100%}
main{flex:1}

/* ── top bar ───────────────────────────────────────────────────────── */
.top{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:64px;min-width:0}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--brand);font:800 22px/1 var(--body);letter-spacing:-.02em;white-space:nowrap;min-width:0}
.logo .and{color:var(--accent-dark)}
.logo .tld{color:var(--muted);font-weight:600}
.logo svg{width:28px;height:28px;flex:0 0 auto}
.logo small{display:block;font:500 11px/1.2 var(--body);letter-spacing:.06em;color:var(--muted);margin-top:3px;text-transform:uppercase}
.nav{display:flex;gap:4px 14px;flex-wrap:wrap;font:600 14.5px/1 var(--body);margin-left:6px}
.nav a{color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--accent)}
.top .cta{margin-left:auto;background:var(--brand);color:#fff;text-decoration:none;font:700 14px/1 var(--body);padding:11px 16px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.top .cta .long{display:inline}
.top .cta .brief{display:none}
.top .cta:hover{background:var(--brand-2)}
@media(max-width:1080px){.logo{font-size:19px;flex-shrink:0}.logo small{display:none}.nav{gap:4px 14px}}
@media(max-width:800px){.top .wrap{gap:12px}.nav{display:none}.logo{flex-shrink:1}}
/* The bar holds four sections and they fit at every width down to 800 px,
   where the Menu takes over (19 September 2026). Contact drops out first if
   ever a fifth is added; it is in the Menu and in the footer as well. */
@media(max-width:979px){.top .cta .long{display:none}.top .cta .brief{display:inline}}
@media(max-width:899px){.nav a[href="/contact/"]{display:none}}
/* The name is one word shorter than the truck site's, but the bar also
   carries a button and the Menu: on a phone the .com goes, so the name
   itself is never cut off (19 September 2026). */
@media(max-width:520px){.top .wrap{min-height:56px}.logo{font-size:clamp(13px,calc(8.2vw - 11px),18px);gap:7px}.logo .tld{display:none}.logo svg{width:24px;height:24px}.top .cta{font-size:13px;padding:9px 12px}.top .cta .long{display:none}.top .cta .brief{display:inline}}

/* ── hero + search ─────────────────────────────────────────────────── */
.hero{background:linear-gradient(112deg,var(--brand) 0%,var(--brand-2) 55%,var(--brand-3) 100%);color:#fff;padding:54px 0 150px;position:relative;overflow:hidden}
@media(max-width:520px){.hero{padding:34px 0 140px}.searchbox{padding:18px 14px 14px}}
.hero::after{content:"";position:absolute;right:-8%;bottom:-40%;width:60%;height:140%;background:radial-gradient(closest-side,rgba(22,185,120,.35),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{margin:0;font:800 clamp(30px,5vw,54px)/1.05 var(--body);letter-spacing:-.02em;max-width:14ch}
.hero p{margin:14px 0 0;font-size:clamp(16px,2vw,19px);color:#d7e6f0;max-width:62ch}
.hero .art{position:absolute;right:20px;top:24px;width:min(420px,40%);opacity:.9}
@media(max-width:900px){.hero .art{display:none}}
.searchbox{background:var(--white);border-radius:18px;box-shadow:0 24px 50px -24px rgba(11,60,93,.55);margin:-120px auto 0;padding:22px 22px 18px;position:relative;z-index:2}
.searchbox h2{margin:0 0 12px;font:700 20px/1.2 var(--body);text-align:center}
.q{display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:6px 6px 6px 14px;background:var(--white)}
.q:focus-within{border-color:var(--brand-3)}
.q svg{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.q input{flex:1;border:0;outline:0;font:400 17px/1.4 var(--body);min-width:0;background:transparent;color:var(--ink)}
.q button{appearance:none;border:0;background:var(--accent);color:#063;width:46px;height:46px;border-radius:10px;cursor:pointer;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center}
.q button:hover{background:var(--accent-dark);color:#fff}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:16px;align-items:end}
.filters label{display:block;font:600 12.5px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.filters select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font:500 15px/1.3 var(--body);background:var(--white);color:var(--ink)}
.filters .go{appearance:none;border:0;background:var(--accent);color:#003d18;font:800 15px/1 var(--body);padding:14px 18px;border-radius:10px;cursor:pointer;white-space:nowrap}
.filters .go:hover{background:var(--accent-dark);color:#fff}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white)}
.seg button{appearance:none;border:0;background:transparent;font:600 14px/1 var(--body);padding:12px 12px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff}

/* ── sections + card grid ──────────────────────────────────────────── */
.sec{margin:34px 0 0}
.sec .h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.sec h2{margin:0;font:800 24px/1.2 var(--body);letter-spacing:-.01em}
.sec h2 .pill{display:inline-block;vertical-align:middle;margin-left:8px;background:var(--accent-soft);color:var(--accent-dark);font:700 13px/1 var(--body);padding:5px 9px;border-radius:999px}
.sec .h a.more{font:700 14px/1 var(--body);color:var(--brand-2);text-decoration:none}
.sec .h a.more:hover{text-decoration:underline}
.sec p.sub{margin:-4px 0 14px;color:var(--muted);max-width:80ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c9d6e0}
.pic{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#e9f0f5,#f7fafc);min-width:0}
.pic svg{width:62%;height:auto;color:var(--brand)}
.pic.charger svg{width:38%}
.pic.maker svg{width:40%}
.pic.battery svg{width:44%}

/* The film of a listing (20 September 2026): the still is ours and is all that
   loads; pressing play puts YouTube's no-cookie player in its place. */
.film-sec .film{margin:0}
/* A sheet that has a film opens with it: the film takes the frame the lead
   photograph stands in, which is 16/9 rather than 4/3, and the photographs all
   move into the strip under it (20 September 2026). */
.detail .pic.film-top{aspect-ratio:16/9;background:var(--brand);border:0}
.detail .pic.film-top .film-play{border-radius:var(--r)}
.film-play{display:block;position:relative;width:100%;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:var(--brand);aspect-ratio:16/9;box-shadow:0 16px 36px -22px rgba(10,25,40,.6)}
.film-play img{display:block;width:100%;height:100%;object-fit:cover}
.film-go{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:999px;
  background:rgba(11,60,93,.74);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.film-go::after{content:"";border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #fff;margin-left:6px}
.film-play:hover .film-go,.film-play:focus-visible .film-go{background:var(--accent);transform:scale(1.06)}
.film-play:hover .film-go::after,.film-play:focus-visible .film-go::after{border-left-color:#052}
.film iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);background:#000}
.film figcaption{margin-top:8px;font:400 13.5px/1.45 var(--body);color:var(--muted)}
@media(max-width:520px){.film-go{width:58px;height:58px;margin:-29px 0 0 -29px}.film-go::after{border-width:12px 0 12px 20px}}
/* The photograph of the truck or charger, or the maker's logo on white (15 September 2026). */
.pic.has-pic{background:#fff}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pic.has-logo img{object-fit:contain;padding:9% 16%}
.pic.has-contain{background:#f4f6f8}
.pic.has-contain img{object-fit:contain}
.pic .badge{z-index:1}
.pic .credit{position:absolute;right:8px;bottom:8px;z-index:1;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.3 var(--body);color:#fff;background:rgba(11,60,93,.72);padding:3px 7px;border-radius:6px;text-decoration:none}
.pic a.credit:hover{background:rgba(11,60,93,.92);text-decoration:underline}
.detail .pic .credit{white-space:normal;text-align:right;left:8px;margin-left:auto;width:max-content}
.pic .badge{position:absolute;left:10px;top:10px;font:700 11.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--brand);color:#fff}
.pic .badge.new{background:var(--accent);color:#003d18}
.pic .badge.calc{background:var(--sun);color:#3d2c00}
.card .b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .mk{font:600 12px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.card .nm{font:700 17px/1.25 var(--body);color:var(--ink)}
.card .fig{font:800 20px/1.2 var(--body);color:var(--accent-dark);margin:4px 0 2px}
.card .fig small{display:block;font:500 12px/1.3 var(--body);color:var(--muted)}
.card ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.card li{font:500 12.5px/1.3 var(--body);color:var(--ink);background:var(--soft);border-radius:8px;padding:4px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .go{margin-top:auto;padding-top:10px;font:700 13.5px/1 var(--body);color:var(--brand-2)}

/* ── list page ─────────────────────────────────────────────────────── */
.crumbs{font-size:13px;color:var(--muted);margin:16px 0 8px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.listing{display:grid;grid-template-columns:270px 1fr;gap:20px;align-items:start;margin-top:10px}
@media(max-width:860px){.listing{grid-template-columns:1fr}.side{position:static}}
.side{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:sticky;top:80px}
.side h3{margin:0 0 10px;font:700 15px/1.3 var(--body)}
.side .f{border-top:1px solid var(--line);padding:12px 0 4px}
.side .f label{display:block;font:600 12px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.side select,.side input[type=text],.side input[type=search]{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font:500 14.5px/1.3 var(--body);background:var(--white);color:var(--ink)}
.side .count{display:block;width:100%;margin-top:12px;appearance:none;border:0;cursor:pointer;background:var(--accent);color:#003d18;font:800 15px/1 var(--body);padding:13px;border-radius:10px;text-align:center}
.side select option:disabled{color:#9aa7b1}
.side .ftoggle{display:none}
@media(min-width:861px){.side{max-height:calc(100vh - 96px);overflow:auto}}
.results .bar .chips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
.results .bar .chips[hidden]{display:none}
.chip{appearance:none;border:1.5px solid var(--line);background:var(--soft);color:var(--ink);border-radius:999px;padding:5px 10px 5px 11px;font:600 12.5px/1.2 var(--body);cursor:pointer;max-width:100%;overflow-wrap:anywhere;text-align:left}
.chip::after{content:" ×";color:var(--muted);font-weight:700}
.chip:hover{border-color:var(--brand-2)}
.chip.clear{background:transparent;border-color:transparent;text-decoration:underline;color:var(--brand-2)}
.chip.clear::after{content:""}
@media(max-width:860px){
  .side{padding:0;overflow:hidden}
  .side .ftoggle{display:flex;align-items:center;gap:8px;width:100%;appearance:none;border:0;background:var(--white);padding:13px 16px;font:700 15px/1.2 var(--body);color:var(--ink);cursor:pointer;text-align:left}
  .side .ftoggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 2px 0 4px;transition:transform .15s}
  .side.open .ftoggle::after{transform:rotate(-135deg);margin-top:4px}
  .side .ftoggle b{background:var(--accent);color:#003d18;border-radius:999px;font:800 12px/1 var(--body);padding:3px 7px}
  .side .ftoggle b:empty{display:none}
  .side .ftoggle .n{margin-left:auto;font:600 13px/1.2 var(--body);color:var(--muted)}
  .side .fbody{display:none;padding:0 16px 16px}
  .side.open .fbody{display:block}
  .side .fbody h3{display:none}
}
.side .reset{display:block;margin:10px auto 0;appearance:none;border:0;background:transparent;color:var(--brand-2);font:600 13px/1 var(--body);cursor:pointer;text-decoration:underline}
.results .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-bottom:12px}
.results .bar h1{margin:0;font:800 20px/1.2 var(--body)}
.results .bar select{border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;font:500 14px/1.3 var(--body);background:var(--white)}
.item{display:grid;grid-template-columns:230px 1fr;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.item:hover{box-shadow:var(--shadow);border-color:#c9d6e0}
.item[hidden]{display:none}
.item .pic{aspect-ratio:auto;min-height:150px;min-width:0}
.item .b{padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.item .row1{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.item .nm{font:700 19px/1.2 var(--body)}
.item .mk{font:600 12.5px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.item .fig{font:800 20px/1.2 var(--body);color:var(--accent-dark);text-align:right}
.item .fig small{display:block;font:500 12px/1.3 var(--body);color:var(--muted);text-align:right}
.item .lead{font-size:14px;color:var(--muted);margin:0}
.item ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.item li{font:500 12.5px/1.3 var(--body);background:var(--soft);border-radius:8px;padding:4px 8px}
.item .ft{margin-top:auto;padding-top:10px;border-top:1px solid var(--soft);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.item .ft .btn{background:var(--brand);color:#fff;font:700 13px/1 var(--body);padding:9px 13px;border-radius:999px}
@media(max-width:600px){.item{grid-template-columns:1fr}.item .pic{aspect-ratio:16/7;min-height:0}}
.empty{display:none;background:var(--white);border:1px dashed var(--line);border-radius:var(--r);padding:24px;text-align:center;color:var(--muted)}
.empty.show{display:block}

/* ── photographs (19 September 2026): the strip under the picture of a sheet,
      the wall on /photos/, and the large view both of them open ─────────── */
.gal{display:flex;flex-direction:column;gap:10px;min-width:0}
.pic .pic-open{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;display:block}
.pic .pic-open::after{content:"⤢";position:absolute;right:8px;top:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:rgba(11,60,93,.62);color:#fff;font-size:14px;opacity:0;transition:opacity .15s}
.pic .pic-open:hover::after,.pic .pic-open:focus-visible::after{opacity:1}
.shots{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 0}
.shots .shot{flex:0 0 auto;width:98px;height:66px;padding:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--soft);cursor:zoom-in}
.shots .shot img{width:100%;height:100%;object-fit:cover;display:block}
.shots .shot:hover,.shots .shot:focus-visible{border-color:var(--brand-3)}
.shots-note{margin:0;font:400 12.5px/1.45 var(--body);color:var(--muted)}
.shots-note a{color:var(--brand-3)}

.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
@media(max-width:520px){.wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}}
.tile{position:relative;display:block;aspect-ratio:4/3;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--soft);text-decoration:none;cursor:zoom-in}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .t{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;color:#fff;
  background:linear-gradient(rgba(11,60,93,0),rgba(6,26,41,.86))}
.tile .t b{display:block;font:700 13px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .t small{display:block;font:500 11px/1.35 var(--body);color:#cfdbe4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile[hidden]{display:none}
.tile:hover{border-color:var(--brand-3)}
.tile:hover img{transform:scale(1.03)}
.tile img{transition:transform .25s ease}
.rights{margin:20px 0 0;max-width:78ch;font:400 12.5px/1.6 var(--body);color:var(--muted)}

.lightbox{border:0;padding:0;background:transparent;max-width:min(1180px,96vw);max-height:96vh;overflow:visible;color:#e8eef3}
.lightbox::backdrop{background:rgba(6,20,30,.88)}
.lightbox figure{margin:0}
.lightbox img{display:block;margin:0 auto;max-width:100%;max-height:76vh;width:auto;height:auto;border-radius:10px;background:#0b1620}
.lightbox figcaption{padding:10px 2px 0}
.lb-cap{margin:0;font:600 15px/1.4 var(--body)}
.lb-who{margin:2px 0 0;font:500 13px/1.4 var(--body);color:#a9b8c4}
.lb-go2{margin:7px 0 0;display:flex;gap:16px;flex-wrap:wrap;font:600 13px/1.4 var(--body)}
.lb-go2 a{color:var(--accent);text-decoration:none}
.lb-go2 a:hover{text-decoration:underline}
.lb-n{color:#8b99a6;font-weight:500}
.lb-x,.lb-go{position:fixed;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:999px;font:400 26px/1 var(--body)}
.lb-x{top:12px;right:14px;width:42px;height:42px;font-size:24px}
.lb-go{top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:12px;font-size:32px}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-x:hover,.lb-go:hover{background:rgba(255,255,255,.28)}
.lb-go[hidden]{display:none}
@media(max-width:600px){
  .lightbox{max-width:100vw}
  .lightbox img{max-height:62vh}
  .lb-go{width:38px;height:52px;font-size:26px}
  .lightbox figcaption{padding:10px 12px 0}
}

/* ── detail page ───────────────────────────────────────────────────── */
.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-top:10px}
@media(max-width:860px){.detail{grid-template-columns:1fr}}
.detail .pic{border-radius:var(--r);border:1px solid var(--line);aspect-ratio:4/3;min-height:0}
.detail .pic svg{width:58%}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.panel .mk{font:600 13px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.panel h1{margin:2px 0 6px;font:800 clamp(24px,3.4vw,34px)/1.1 var(--body);letter-spacing:-.02em}
.panel p.lead{margin:0 0 14px;color:var(--muted);font-size:15px}
.panel .fig{font:800 26px/1.2 var(--body);color:var(--accent-dark)}
.panel .fig small{display:block;font:500 13px/1.3 var(--body);color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
@media(max-width:480px){.facts{grid-template-columns:1fr}}
.facts div{background:var(--soft);border-radius:10px;padding:9px 11px;min-width:0}
.facts b{display:block;font:600 11.5px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.facts span{display:block;font:600 14px/1.35 var(--body);color:var(--ink);word-wrap:break-word}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.actions a{text-decoration:none;font:700 14px/1 var(--body);padding:12px 16px;border-radius:999px}
.actions a.pri{background:var(--accent);color:#003d18}
.actions a.pri:hover{background:var(--accent-dark);color:#fff}
.actions a.sec2{background:var(--soft);color:var(--brand)}
.actions a.sec2:hover{background:#e3e9ee}
.others{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 0}
.others a{font:500 12.5px/1 var(--body);color:var(--brand);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--white)}
.others a:hover{border-color:var(--brand-3)}
.others a[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.others .all{border-style:dashed}
.seller{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.seller .mark{width:46px;height:46px;border-radius:12px;background:var(--brand);display:flex;align-items:center;justify-content:center}
.seller .mark svg{width:26px;height:26px}
.seller h3{margin:0 0 2px;font:700 16px/1.3 var(--body)}
.seller p{margin:0;font-size:14px;color:var(--muted)}
.seller ul{margin:8px 0 0;padding-left:18px;font-size:13.5px}
.seller li{margin:2px 0}

/* ── the editable sheet (ids and classes are those pages/sheet.html's
      script expects; see eac/build.mjs) ───────────────────────────── */
.intro{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:20px 0 14px}
.intro h2{margin:0 0 8px;font:800 20px/1.2 var(--body)}
.intro p{margin:0 0 8px}
.intro p:last-child{margin:0}
.intro b{color:var(--brand)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:640px){.meta{grid-template-columns:1fr}}
.meta label{display:block;font:600 12.5px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.meta label b{color:var(--warn);font-weight:700;text-transform:none;letter-spacing:0}
.meta small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.meta input,.meta textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;font:400 15px/1.4 var(--body);background:var(--white);color:var(--ink)}
.meta textarea{min-height:64px;resize:vertical}
.meta .full{grid-column:1/-1}
input:focus,textarea:focus{outline:2px solid var(--brand-3);outline-offset:0;border-color:var(--brand-3)}
.banner{display:none;align-items:center;gap:12px;flex-wrap:wrap;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14.5px}
.banner.show{display:flex}
.banner.note{background:#fff7e0;border:1px solid #f1dc9a;color:#5f4400}
.banner.good{background:var(--accent-soft);border:1px solid #b7e8cd;color:#0b5b3c}
.banner.bad{background:#fdecea;border:1px solid #f3c0b8;color:#8a2a17}
.banner .grow{flex:1;min-width:200px}
.banner button{appearance:none;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:6px 12px;font:600 13px var(--body);cursor:pointer}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:6px 0 10px}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid var(--line)}
.legend .l-filled::before{background:var(--accent-soft);border-color:#b7e8cd}
.legend .l-changed::before{background:#fff2c2;border-color:#e7cd7a}
.legend .l-empty::before{background:var(--white)}
section.block{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin:0 0 14px;overflow:hidden}
section.block h2{margin:0;padding:12px 16px;font:700 15px/1.3 var(--body);background:var(--brand);color:#fff;display:flex;justify-content:space-between;align-items:baseline}
section.block h2 .count{font:600 12px/1 var(--mono);opacity:.8}
.head{display:grid;grid-template-columns:minmax(200px,40%) 1fr;font:600 12px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.row{display:grid;grid-template-columns:minmax(200px,40%) 1fr;border-bottom:1px solid var(--soft);align-items:center}
.row:last-child{border-bottom:0}
.row .lab{padding:9px 16px;font-size:14.5px}
.row .lab .unit{display:block;font:500 12px/1.3 var(--body);color:var(--muted)}
.row .cell{padding:5px 12px 5px 8px;display:flex;align-items:center;gap:6px}
.row .cell input{flex:1;min-width:0;border:1.5px solid transparent;border-radius:8px;padding:8px 10px;font:400 14.5px/1.35 var(--body);background:var(--white);color:var(--ink)}
.row .cell input:hover{border-color:var(--line)}
.row .cell input.filled{background:var(--accent-soft)}
.row .cell input.changed{background:#fff2c2}
.row .cell input:focus{border-color:var(--brand-3);background:var(--white)}
.src{flex:0 0 auto;text-decoration:none;color:var(--brand-2);font-size:13px;border:1px solid var(--line);border-radius:6px;padding:2px 6px;background:var(--white)}
.src:hover{border-color:var(--brand-3)}
section.hist{background:var(--white);border:1px solid var(--line);border-radius:var(--r);margin:18px 0 0;overflow:hidden}
section.hist h2{margin:0;padding:12px 16px;font:700 15px/1.3 var(--body);background:var(--soft);border-bottom:1px solid var(--line)}
section.hist .none{padding:12px 16px;font-size:14px;color:var(--muted)}
section.hist details{border-bottom:1px solid var(--line)}
section.hist details:last-child{border-bottom:0}
section.hist summary{list-style:none;cursor:pointer;padding:10px 16px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:14.5px}
section.hist summary::-webkit-details-marker{display:none}
section.hist summary .v{font:700 12px/1 var(--mono);background:var(--brand);color:#fff;padding:4px 7px;border-radius:6px}
section.hist summary .when{color:var(--muted);font-size:13px}
section.hist summary .n{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}
section.hist .body{padding:0 16px 12px;font-size:14px}
section.hist table{border-collapse:collapse;width:100%;margin:4px 0 8px}
section.hist td{padding:5px 8px;border-top:1px solid var(--soft);vertical-align:top}
section.hist td.lab{color:var(--muted);width:40%}
section.hist td .old{color:#8a2a17;text-decoration:line-through;margin-right:8px}
section.hist td .new{color:var(--ok);font-weight:600}
section.hist .notes{white-space:pre-wrap;background:var(--soft);border-radius:8px;padding:8px 10px;margin:6px 0 0}
@media(max-width:700px){.head{display:none}.row{grid-template-columns:1fr;padding:6px 0 8px}.row .lab{padding:4px 12px 2px;font-weight:600}.row .cell{padding:3px 12px}}
.bar2{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:8px}
.bar2 .in{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.progress{flex:1;min-width:160px;font-size:13.5px;color:var(--muted)}
.progress b{color:var(--ink)}
.progress .track{height:6px;background:var(--soft);border-radius:999px;margin-top:5px;overflow:hidden}
.progress .fill{height:100%;background:var(--accent);width:0;transition:width .3s}
.btn{appearance:none;border:0;border-radius:999px;padding:11px 20px;font:700 15px var(--body);cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--accent);color:#003d18}
.btn.primary:hover{background:var(--accent-dark);color:#fff}
.btn.primary[disabled]{opacity:.6;cursor:default}
.btn.ghost{background:var(--soft);color:var(--ink);font-weight:600;padding:10px 14px}
.btn.ghost:hover{background:#e3e9ee}
details.more{position:relative}
details.more summary{list-style:none;cursor:pointer}
details.more summary::-webkit-details-marker{display:none}
details.more .menu{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:230px;padding:6px;z-index:30}
details.more .menu button,details.more .menu label{display:block;width:100%;text-align:left;appearance:none;border:0;background:transparent;padding:9px 12px;border-radius:7px;font:500 14.5px var(--body);color:var(--ink);cursor:pointer}
details.more .menu button:hover,details.more .menu label:hover{background:var(--soft)}
details.more .menu button.danger{color:var(--warn)}
details.more .menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.attach{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attach .chip{background:var(--soft);border-radius:999px;padding:3px 10px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.attach .chip button{appearance:none;border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;color:var(--muted);padding:0}

/* ── nothing may be wider than a phone ─────────────────────────────── */
/* A grid or flex item's automatic minimum is its content's width; a long
   unbreakable value (a URL, a figure with commas) would then push the whole
   page past the viewport, and a phone lets it scroll sideways. */
.detail>*,.listing>*,.results,.item .b,.card .b,.panel,.facts>div,.bar2 .in>*,.seller>*{min-width:0}
.panel .fig,.facts span,.card .nm,.item .nm,.crumbs,.seller p,.intro p,.row .lab,section.hist td,.item .lead{overflow-wrap:anywhere}

/* ── footer ────────────────────────────────────────────────────────── */
.foot{margin-top:40px;background:var(--brand);color:#c9dbe7;padding:28px 0 34px;font-size:13.5px}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media(max-width:760px){.foot .wrap{grid-template-columns:1fr}}
.foot h4{margin:0 0 6px;font:700 14px/1.3 var(--body);color:#fff}
.foot a{color:#e6f0f6}
.foot ul{list-style:none;margin:0;padding:0}
/* De voetteksten staan als lijst onder elkaar: een aanraakdoel van 24 px hoog
   vraagt wat lucht om de link heen, anders raakt een duim er twee tegelijk. */
.foot li{margin:0}
.foot li a{display:inline-block;padding:5px 0;line-height:1.35}
.foot p{margin:0 0 6px}
@media print{.top,.bar2,.banner,.legend,.src,details.more,.foot,.others,.actions{display:none!important}.row .cell input{border:0;background:transparent;padding:4px 0}section.block{break-inside:avoid}body{background:#fff}}

/* ── editing (15 September 2026): find, views, notes under a row, undo, review ── */
.intro .how{margin:0}
.intro .how-log{margin:8px 0 0;font-size:13px;color:var(--muted)}
.howmore{margin-top:8px;font-size:14px;color:var(--muted)}
.howmore summary{cursor:pointer;font-weight:600;color:var(--ed-strong)}
.howmore p{margin:6px 0 0}
#notices{scroll-margin-top:calc(var(--ed-top) + 12px)}
.tools{position:sticky;top:var(--ed-top);z-index:15;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;background:var(--ed-bg);padding:10px 0 8px;margin:0 0 8px;border-bottom:1px solid var(--line)}
.tools .find{flex:1 1 220px;min-width:0;border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;font:400 15px/1.3 var(--body);background:var(--white);color:var(--ink)}
.tools .find:focus{outline:2px solid var(--ed-accent);outline-offset:0;border-color:var(--ed-accent)}
.views{display:flex;gap:3px;background:var(--soft);border-radius:999px;padding:3px;max-width:100%;overflow-x:auto}
.views button{appearance:none;border:0;background:transparent;border-radius:999px;padding:7px 12px;font:600 13.5px/1 var(--body);color:var(--muted);cursor:pointer;white-space:nowrap}
.views button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.views .n{font-weight:700;color:var(--ed-strong)}
.jump{flex-basis:100%;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.jump a{flex:0 0 auto;font:500 12.5px/1 var(--body);color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:var(--white)}
.jump a:hover{border-color:var(--ed-accent)}
section.block{scroll-margin-top:calc(var(--ed-top) + 130px)}
section.block[hidden],.row[hidden]{display:none!important}
.row .field{position:relative;flex:1;min-width:0;display:flex}
.row .field input{flex:1;min-width:0;width:100%}
.row .field.has-unit input{padding-right:4em}
.row .field .u{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:500 12px/1 var(--body);color:var(--muted);pointer-events:none}
.row .undo{flex:0 0 auto;appearance:none;border:1px solid var(--line);background:var(--white);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:17px;line-height:1;color:var(--ink)}
.row .undo:hover{border-color:var(--ed-accent);background:var(--soft)}
.row .undo[hidden]{display:none}
.row .rnote{grid-column:2;padding:0 12px 8px 8px;font:400 12.5px/1.4 var(--body);color:var(--muted);display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.row .rnote:not(:has(> :not([hidden]))){display:none}
.row .rnote [hidden]{display:none}
.row .rnote .was{color:var(--ed-change-text)}
.row .rnote .warn{color:var(--warn);font-weight:600}
.row.is-changed{background:var(--ed-change-row)}
.t-none{background:var(--white);border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);margin:0 0 14px}
.t-none button{appearance:none;border:0;background:transparent;color:var(--ed-strong);font:600 14px var(--body);text-decoration:underline;cursor:pointer}
.btn.primary[disabled]{opacity:.55;cursor:default}
@media(max-width:700px){
  .row .rnote{grid-column:1;padding:0 12px 6px}
  .tools .find{flex-basis:100%}
  .jump{display:none}
}
dialog.review{border:0;border-radius:14px;padding:0;width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);color:var(--ink);background:var(--white)}
dialog.review::backdrop{background:rgba(10,20,25,.55)}
.rv{padding:18px 20px 16px;overflow:auto;max-height:calc(100vh - 32px)}
.rv h2{margin:0 0 4px;font:800 20px/1.2 var(--body)}
.rv-sub{margin:0 0 12px;color:var(--muted);font-size:14px}
.rv-list{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:10px}
.rv-list li{padding:10px 12px;border-bottom:1px solid var(--line)}
.rv-list li:last-child{border-bottom:0}
.rv-row{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.rv-lab{font-weight:600;font-size:14.5px}
.rv-lab small{color:var(--muted);font-weight:500}
.rv-val{flex:1;min-width:140px;font-size:14.5px;overflow-wrap:anywhere}
.rv-val .old{color:#8a2a17;text-decoration:line-through}
.rv-val .new{color:var(--ok);font-weight:700}
.rv-edit{appearance:none;border:0;background:transparent;color:var(--ed-strong);font:600 13px var(--body);text-decoration:underline;cursor:pointer;padding:0}
.rv-src{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:400 13.5px/1.3 var(--body);color:var(--ink);background:var(--white)}
.rv .meta{margin-top:0}
.rv-attach{margin:10px 0 0;font-size:14px}
.rv-attach label{color:var(--ed-strong);text-decoration:underline;cursor:pointer;font-weight:600}
.rv-msg{margin:10px 0 0;background:#fdecea;border:1px solid #f3c0b8;color:#8a2a17;border-radius:8px;padding:8px 10px;font-size:14px}
.rv-msg[hidden]{display:none}
.rv-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}
.rv-fine{margin:8px 0 0;font-size:12.5px;color:var(--muted);text-align:right}
@media print{.tools,.t-none,.row .undo,.row .rnote .was,.row .rnote .warn,dialog.review{display:none!important}}
@media(max-width:520px){:root{--ed-top:56px}}

/* ── the experts (16 September 2026) ─────────────────────────────────
      /experts/ and /experts/<slug>/: people, and what was made with
      them. A card is a face plus a line; a person's page is that face
      once more and then the items, newest first. The video player is
      the browser's own, on a file of this site. */
.ex-head{margin:6px 0 18px}
.ex-head h1{margin:0;font:800 clamp(28px,5vw,40px)/1.1 var(--body);color:var(--brand);letter-spacing:-.02em}
.ex-lead{margin:8px 0 0;max-width:70ch;color:var(--muted)}
.ex-n{margin:6px 0 0;font:600 13px/1 var(--body);color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ex-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:inherit}
.ex-card:hover{border-color:var(--brand-3);box-shadow:var(--shadow)}
.ex-card strong{display:block;font:800 17px/1.25 var(--body);color:var(--brand)}
.ex-face{width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--soft);flex:0 0 auto}
.ex-initials{display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font:800 26px/1 var(--body);letter-spacing:.02em}
.ex-who{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.ex-intro{display:block;margin-top:8px;font-size:14.5px}
.ex-counts{display:inline-block;margin-top:10px;background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;padding:4px 10px;font:700 12.5px/1 var(--body)}
.ex-counts.ex-soon{background:var(--soft);color:var(--muted)}
.ex-newest{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.ex-empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--r);padding:22px;color:var(--muted);margin:0}
.ex-invite{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:22px 0 0}
.ex-invite h2{margin:0 0 6px;font:800 20px/1.2 var(--body);color:var(--brand)}
.ex-invite p{margin:0 0 10px;color:var(--muted);max-width:70ch}
.ex-invite .pri{display:inline-block;background:var(--accent);color:#003d18;text-decoration:none;font:700 14px/1 var(--body);padding:12px 16px;border-radius:999px}
.ex-invite .pri:hover{background:var(--accent-dark);color:#fff}
.ex-person{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px}
.ex-person .ex-face{width:132px;height:132px}
.ex-person h1{margin:0;font:800 clamp(24px,4.4vw,34px)/1.15 var(--body);color:var(--brand);letter-spacing:-.02em}
.ex-person .ex-who{margin:4px 0 0;font-size:15px}
.ex-person .ex-intro{margin:10px 0 0;max-width:70ch}
.ex-links{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ex-links a{background:var(--soft);color:var(--brand);text-decoration:none;border-radius:999px;padding:7px 12px;font:600 13px/1 var(--body)}
.ex-links a:hover{background:#e3e9ee}
.ex-items{display:grid;gap:16px}
.ex-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.ex-item h3{margin:6px 0 10px;font:800 21px/1.25 var(--body);color:var(--ink)}
.ex-item p{margin:0 0 10px;max-width:74ch}
.ex-item p:last-child{margin-bottom:0}
.ex-kind{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0}
.ex-tag{border-radius:999px;padding:4px 10px;font:700 12px/1 var(--body);text-transform:uppercase;letter-spacing:.05em}
.ex-tag.ex-interview{background:var(--accent-soft);color:var(--accent-dark)}
.ex-tag.ex-article{background:var(--soft);color:var(--brand-2)}
.ex-tag.ex-video{background:#fdf1d4;color:var(--sun-dark)}
.ex-meta{font-size:13px;color:var(--muted)}
.ex-summary{font-size:16.5px;color:var(--ink)}
.ex-player{display:block;width:100%;max-width:760px;max-height:70vh;aspect-ratio:16/9;background:#000;border-radius:10px;margin:0 0 12px}
.ex-link a{font-weight:600}
.ex-back{margin:20px 0 0}
.ex-back a{font-weight:600;text-decoration:none}
@media(max-width:560px){
  .ex-person{grid-template-columns:1fr;gap:12px}
  .ex-person .ex-face{width:96px;height:96px}
  .ex-card{grid-template-columns:1fr}
  .ex-card .ex-face{width:64px;height:64px}
}

/* ── the site menu (17 September 2026): a button at the end of the top bar,
   an overview of the whole site under it ─────────────────────────────── */
.top{position:sticky}
.sitemenu{flex:0 0 auto}
.sitemenu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:9px 13px;font:700 14px/1 var(--body);color:var(--ink);background:var(--white);user-select:none;-webkit-tap-highlight-color:transparent}
.sitemenu>summary::-webkit-details-marker{display:none}
.sitemenu>summary:hover{border-color:var(--brand-2)}
.sitemenu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sitemenu[open]>summary{background:var(--brand);border-color:var(--brand);color:#fff}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:16px;height:12px}
.burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.sitemenu[open] .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.sitemenu[open] .burger i:nth-child(2){opacity:0}
.sitemenu[open] .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.sitemenu-panel{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(11,60,93,.5);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.top .sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:18px 32px;min-height:0;padding-top:18px;padding-bottom:24px}
.sm-grid section{min-width:0}
.sm-grid h3{margin:0 0 6px;font:700 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sm-grid ul{list-style:none;margin:0;padding:0}
.sm-grid a{display:block;padding:8px 10px;margin:0 -10px;border-radius:10px;text-decoration:none;color:var(--ink)}
.sm-grid a:hover{background:var(--soft)}
.sm-grid a[aria-current]{background:var(--accent-soft)}
.sm-grid b{display:block;font:700 15px/1.3 var(--body)}
.sm-grid .n{display:inline-block;background:var(--soft);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700;margin-left:4px;vertical-align:1px}
.sm-grid a[aria-current] .n{background:var(--white)}
.sm-grid small{display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:1px}
@media(max-width:900px){.top .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.top .sm-grid{grid-template-columns:1fr;gap:14px;padding-top:12px}.sm-grid a{padding:9px 10px}}
@media(max-width:520px){.sitemenu-panel{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}.sitemenu>summary{padding:9px 11px}}
@media(max-width:400px){.sitemenu .lbl{display:none}}
@media print{.sitemenu{display:none!important}}

/* The save bar on a phone (20 September 2026). Its text used to sit in a
   column beside the two buttons, and "39 of 71 values filled in · 1 changed by
   you, not sent yet" came out one word per line. Below 620 px the text takes
   the whole width, with the buttons under it and Review & send the wide one. */
@media(max-width:620px){
  .bar2 .in{gap:8px 10px}
  .progress{flex:1 0 100%;font-size:13px}
  .bar2 .in details.more{flex:0 0 auto}
  .bar2 .in .btn.primary{flex:1 1 auto;text-align:center}
}

/* The More menu on a phone (20 September 2026). It hangs from the right edge
   of its own button and is 230 px wide; since the button moved to the left of
   the second row, that put the menu off the left of the screen. Below 620 px
   it is measured from the bar instead of from the button, so it stands above
   the bar across the full width, whatever the button does. */
@media(max-width:620px){
  .bar2 details.more{position:static}
  .bar2 details.more .menu{left:16px;right:16px;min-width:0;bottom:calc(100% + 10px)}
}

/* ── ebuses.be additions (29 October 2026) ───────────────────────── */
/* The language switch: a small pill beside the Menu button. */
.top .lang{flex:0 0 auto;margin-left:auto;border:1.5px solid var(--line);border-radius:999px;padding:8px 12px;font:700 13.5px/1 var(--body);color:var(--brand);text-decoration:none;background:var(--white);white-space:nowrap}
.top .lang:hover{border-color:var(--brand-2)}
.top .cta+.lang,.top .cta~.lang{margin-left:0}
.top .cta{margin-left:auto}
@media(max-width:520px){.top .lang{padding:8px 10px;font-size:13px}}
/* The Contact link leaves the bar first on narrow screens, in both languages. */
@media(max-width:899px){.nav a[href="/zh/contact/"]{display:none}}

/* The static pages: one column of prose with the house measures. */
.page-head{margin:22px 0 10px}
.page-head h1{margin:0;font:800 clamp(28px,4.2vw,42px)/1.1 var(--body);letter-spacing:-.02em;color:var(--brand);max-width:24ch}
.page-head p.sub{margin:10px 0 0;color:var(--muted);font-size:17px;max-width:70ch}
.prose{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-top:18px;max-width:900px}
@media(max-width:520px){.prose{padding:18px 16px}}
.prose>*:first-child{margin-top:0}
.prose h2{margin:28px 0 8px;font:800 22px/1.25 var(--body);color:var(--brand);letter-spacing:-.01em}
.prose h3{margin:22px 0 6px;font:800 17px/1.3 var(--body);color:var(--brand)}
.prose p,.prose li{max-width:72ch;overflow-wrap:anywhere}
.prose p{margin:0 0 12px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose table{border-collapse:collapse;width:100%;margin:8px 0 16px;font-size:14.5px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line)}
.prose th{font:700 12.5px/1.3 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.prose figure{margin:14px 0 18px}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.prose .fine,.prose .sources{font-size:13.5px;color:var(--muted)}
.prose .sources{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.prose .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 16px}
.prose .cards div{background:var(--soft);border-radius:12px;padding:12px 14px}
.prose .cards b{display:block;font:800 15px/1.3 var(--body);color:var(--brand)}
.prose .cards .big{display:block;font:800 24px/1.1 var(--body);color:var(--accent-dark);margin:6px 0 2px}
.prose .cards span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}
.prose .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.prose .btnrow a{background:var(--brand);color:#fff;text-decoration:none;font:800 14px/1 var(--body);padding:12px 18px;border-radius:999px}
.prose .btnrow a.sec{background:var(--accent-soft);color:var(--accent-dark)}

/* ── content-page tables (added with /flanders/): a wide comparison table
   scrolls inside its wrapper instead of pushing the page sideways at 360 px;
   the figure column and the source column keep a readable width. ── */
.prose .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px}
.prose .tbl table{margin:0;min-width:560px}
.prose .tbl td{min-width:120px}
.prose .tbl td a{overflow-wrap:anywhere}
/* ── end content-page tables ── */

/* Chinese pages: the system CJK stack, a looser line, no Latin tracking
   tricks, and measures in characters that fit CJK glyphs. */
:lang(zh){--body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif}
:lang(zh) body{line-height:1.7}
:lang(zh) .logo,:lang(zh) .hero h1,:lang(zh) .sec h2,:lang(zh) .panel h1,:lang(zh) .page-head h1,:lang(zh) .prose h2{letter-spacing:0}
:lang(zh) .hero h1{max-width:16ch;font-weight:700}
:lang(zh) .hero p,:lang(zh) .sec p.sub,:lang(zh) .page-head p.sub{max-width:44ch}
:lang(zh) .prose p,:lang(zh) .prose li{max-width:46ch}
:lang(zh) .logo small,:lang(zh) .filters label,:lang(zh) .side .f label,:lang(zh) .facts b,:lang(zh) .pic .badge,:lang(zh) .card .mk,:lang(zh) .item .mk,:lang(zh) .panel .mk,:lang(zh) .meta label,:lang(zh) .head,:lang(zh) .prose th,:lang(zh) .c-field label{letter-spacing:0}
:lang(zh) .logo small{text-transform:none}