/* ==========================================================================
   Board detail — the pieces base1.css does not already cover.
   Loaded after base1.css, so it inherits --primary, --panel, --line, --mono
   and the .b1 wrapper's type scale rather than restating them.
   ========================================================================== */

.bd { --bd-gap: 18px; }

/* ── Buy line ─────────────────────────────────────────────────────────── */
.bd-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.bd-buy__price { font-family: var(--mono); font-size: 26px; color: var(--primary); line-height: 1; }
.bd-buy__note {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); border: 1px dashed var(--line2); padding: 8px 12px;
}

/* ── Gallery ──────────────────────────────────────────────────────────── */
.bd-gal { min-width: 0; }
.bd-gal__main { margin: 0; border: 1px solid var(--line2); background: var(--panel); padding: 14px; }
.bd-gal__zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; line-height: 0;
}
.bd-gal__zoom img { width: 100%; height: auto; display: block; background: #fff; }
.bd-gal__hint {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-fg); background: var(--primary); padding: 5px 9px; opacity: 0; transition: opacity .18s;
}
.bd-gal__zoom:hover .bd-gal__hint, .bd-gal__zoom:focus-visible .bd-gal__hint { opacity: 1; }
.bd-gal__hint i { font-style: normal; }
.bd-gal__main figcaption {
  font-family: var(--mono); font-size: 11px; color: var(--mut); padding: 12px 2px 0; line-height: 1.6;
  min-height: 1.6em;
}

.bd-gal__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.bd-gal__thumbs::-webkit-scrollbar { height: 5px; }
.bd-gal__thumbs::-webkit-scrollbar-thumb { background: var(--line2); }
.bd-gal__t {
  flex: none; width: 78px; height: 58px; padding: 0; border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .18s, opacity .18s; opacity: .62;
}
.bd-gal__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-gal__t:hover, .bd-gal__t:focus-visible { opacity: 1; border-color: var(--line2); }
.bd-gal__t.is-on { opacity: 1; border-color: var(--primary); }
.bd-gal__t i {
  position: absolute; left: 0; bottom: 0; font-style: normal; font-family: var(--mono);
  font-size: 8.5px; letter-spacing: .06em; color: var(--primary-fg); background: var(--primary); padding: 1px 4px;
}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.bd-lb {
  position: fixed; inset: 0; z-index: 9000; background: rgba(2, 10, 7, .94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 24px; cursor: zoom-out;
}
.bd-lb[hidden] { display: none; }
.bd-lb img { max-width: min(1400px, 96vw); max-height: 84vh; object-fit: contain; background: #fff; }
.bd-lb__cap { font-family: var(--mono); font-size: 12px; color: #9fb8ad; margin: 0; text-align: center; max-width: 70ch; }
.bd-lb__x {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border: 1px solid var(--line2);
  background: none; color: var(--fg); font-size: 24px; line-height: 1; cursor: pointer;
}
.bd-lb__x:hover { border-color: var(--primary); color: var(--primary); }

/* ── Sticky in-page nav ───────────────────────────────────────────────── */
.bd-nav {
  /* Same translucent treatment as the site header, off the theme's own
     ground - this was rgba(6,20,15,.92), a fixed near-black that stayed a
     dark band across the middle of a light page. */
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.bd-nav__wrap { display: flex; align-items: center; gap: 20px; height: 52px; }
.bd-nav__label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary); flex: none;
}
.bd-nav__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.bd-nav__links::-webkit-scrollbar { display: none; }
.bd-nav__links a {
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  color: var(--fg2); text-decoration: none;
  padding: 9px 12px; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.bd-nav__links a:hover,
.bd-nav__links a:focus-visible { color: var(--fg); border-bottom-color: var(--border); }
.bd-nav__links a.is-on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
@media (max-width: 720px) { .bd-nav__label { display: none; } }

/* ── Build explorer ───────────────────────────────────────────────────── */
.bd-ex { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; margin-top: 32px; align-items: start; }
.bd-ex__board { position: sticky; top: 76px; }
.bd-ex__pcb {
  position: relative; border: 1px solid var(--line2); background: var(--panel);
  padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bd-ex__chip {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 15px; letter-spacing: .16em;
  color: var(--primary-fg); background: var(--primary); padding: 12px; text-align: center; font-weight: 700;
}
.bd-ex__blk {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.35; color: var(--mut);
  border: 1px solid var(--line); padding: 9px 7px; text-align: center;
  transition: color .18s, border-color .18s, background .18s, opacity .18s;
}
.bd-ex__blk.is-on {
  color: var(--primary-fg); background: var(--primary); border-color: var(--primary); font-weight: 700;
}
.bd-ex__blk.is-off { opacity: .3; }
.bd-ex__img { width: 100%; height: auto; display: block; border: 1px solid var(--line2); background: #fff; }

.bd-ex__now {
  border: 1px solid var(--line); border-top: 0; background: var(--panel); padding: 14px 16px;
  display: grid; gap: 5px; min-height: 74px;
}
.bd-ex__now-label { font-size: 12.5px; color: var(--primary); letter-spacing: .04em; }
.bd-ex__now-text { font-size: 12.5px; color: var(--mut); line-height: 1.6; }
.bd-ex__now-text b { color: var(--fg); }
.bd-ex__now a { color: var(--primary); }

.bd-ex__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bd-ex__chips i {
  font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--mut); border: 1px solid var(--line); padding: 4px 8px;
}

.bd-ex__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bd-ex__proj {
  position: relative; text-align: left; border: 1px solid var(--line); background: var(--panel);
  padding: 14px 13px; display: flex; flex-direction: column; gap: 7px; cursor: pointer;
  transition: transform .16s, border-color .16s;
}
.bd-ex__proj:hover, .bd-ex__proj:focus-visible, .bd-ex__proj.is-on {
  transform: translateY(-2px); border-color: var(--primary); outline: none;
}
.bd-ex__n { position: absolute; top: 10px; right: 11px; font-size: 9.5px; color: var(--primary); opacity: .7; }
.bd-ex__icon { font-size: 19px; color: var(--primary); line-height: 1; }
.bd-ex__name { font-family: var(--mono); font-size: 12.5px; color: var(--fg); line-height: 1.4; }
.bd-ex__adds { font-size: 10.5px; color: var(--mut); margin-top: auto; line-height: 1.4; }
.bd-ex__adds--none { color: var(--primary); }
.bd-ex__lvl {
  position: absolute; bottom: 10px; right: 11px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 2px 5px; border: 1px solid;
}
.bd-ex__lvl--medium { color: color-mix(in srgb, #c08a1e 68%, var(--fg)); border-color: color-mix(in srgb, #e8c26a 45%, transparent); }
.bd-ex__lvl--hard   { color: color-mix(in srgb, #e5646a 68%, var(--fg)); border-color: color-mix(in srgb, #e5646a 45%, transparent); }

@media (max-width: 900px) {
  .bd-ex { grid-template-columns: 1fr; }
  .bd-ex__board { position: static; }
}

/* ── Tables: specs, pinout, editor tables ─────────────────────────────── */
.bd-specs { display: grid; gap: 26px; margin-top: 30px; }
.bd-specs__gh {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bd-specs__gh small { font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--mut); }

.bd-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line2); }
.bd-table th, .bd-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.bd-table tr:last-child th, .bd-table tr:last-child td { border-bottom: 0; }
.bd-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.bd-table thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut); background: var(--panel); border-bottom: 1px solid var(--line2); font-weight: 400;
}
.bd-table tbody th {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--mut);
  font-weight: 400; width: 210px;
}
.bd-table td { font-size: 14px; color: var(--fg); line-height: 1.65; }
.bd-table td small { display: block; font-size: 12px; color: var(--mut); margin-top: 5px; line-height: 1.55; }

.bd-scroll { overflow-x: auto; margin-top: 24px; }
.bd-table--wide { min-width: 560px; }
.bd-table--pins tbody th { width: auto; color: var(--fg); font-size: 13px; }
.bd-table--pins td:first-child { width: 56px; color: var(--mut); font-size: 12px; }
.bd-pin__fn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--primary);
  border: 1px solid var(--line2); padding: 3px 7px; display: inline-block; white-space: nowrap;
}
.bd-pin__note { font-size: 12.5px; color: var(--mut); }

.bd-pin__bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.bd-pin__q {
  flex: 1 1 240px; min-width: 200px; background: var(--panel); border: 1px solid var(--line2);
  color: var(--fg); font-family: var(--mono); font-size: 13px; padding: 11px 14px;
}
.bd-pin__q:focus { outline: none; border-color: var(--primary); }
.bd-pin__q::placeholder { color: var(--mut); }
.bd-pin__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-pin__f {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--mut);
  border: 1px solid var(--line); background: none; padding: 8px 12px; cursor: pointer; transition: all .15s;
}
.bd-pin__f:hover { color: var(--fg); border-color: var(--line2); }
.bd-pin__f.is-on { color: var(--primary-fg); background: var(--primary); border-color: var(--primary); }
.bd-pin__tables { display: grid; gap: 26px; margin-top: 24px; }
.bd-pin__grp[hidden] { display: none; }
.bd-pin__ref {
  font-size: 12.5px; color: var(--primary-fg); background: var(--primary); padding: 3px 8px; letter-spacing: .08em;
}
.bd-pin__none { font-family: var(--mono); font-size: 13px; color: var(--mut); padding: 28px; text-align: center;
  border: 1px dashed var(--line2); }

/* ── Editor sections ──────────────────────────────────────────────────── */
.bd-prose { font-size: 15px; color: var(--mut); line-height: 1.8; max-width: 72ch; margin-top: 6px; }
.bd-prose p { margin: 0 0 14px; }
.bd-prose p:last-child { margin-bottom: 0; }
.bd-prose b, .bd-prose strong { color: var(--fg); }
.bd-prose a { color: var(--primary); }

.bd-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line2); margin-top: 26px; }
.bd-list__row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 18px; align-items: baseline;
  background: var(--ink); padding: 15px 18px;
}
.bd-list__k { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
.bd-list__v { font-size: 13.5px; color: var(--mut); line-height: 1.65; }

.bd-badge {
  font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line2); color: var(--mut);
}
.bd-badge--new    { color: var(--primary); border-color: var(--line2); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bd-badge--better { color: color-mix(in srgb, #2f6fd0 62%, var(--fg)); border-color: color-mix(in srgb, #6aa8ff 50%, transparent); }

.bd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 26px; }
.bd-card { border: 1px solid var(--line); background: var(--panel); padding: 18px; }
.bd-card__t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bd-card__t span { font-family: var(--mono); font-size: 13.5px; color: var(--fg); }
.bd-card p { font-size: 13.5px; color: var(--mut); line-height: 1.7; margin: 0; }

.bd-note {
  border: 1px solid color-mix(in srgb, #e5646a 35%, var(--line2)); margin-top: 26px;
  background: color-mix(in srgb, #e5646a 5%, transparent);
}
.bd-note__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 16px 18px;
  border-bottom: 1px solid var(--line); }
.bd-note__row:last-child { border-bottom: 0; }
.bd-note__k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, #e5646a 68%, var(--fg)); }
.bd-note__v { font-size: 13.5px; color: var(--fg); line-height: 1.7; }

.bd-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 26px; }
.bd-strip figure { margin: 0; border: 1px solid var(--line2); background: var(--panel); padding: 12px; }
.bd-strip img { width: 100%; height: auto; display: block; background: #fff; }
.bd-strip figcaption { font-family: var(--mono); font-size: 11px; color: var(--mut); margin-top: 10px; line-height: 1.6; }

/* ── Downloads ────────────────────────────────────────────────────────── */
.bd-dl__group { margin-top: 30px; }
.bd-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bd-dl__item {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 22px; gap: 14px; align-items: center;
  border: 1px solid var(--line); background: var(--panel); padding: 14px; text-decoration: none;
  transition: border-color .16s, transform .16s;
}
.bd-dl__item:hover { border-color: var(--primary); transform: translateY(-2px); }
.bd-dl__ext {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--primary);
  border: 1px solid var(--line2); padding: 10px 4px; text-align: center; display: block;
}
.bd-dl__body { display: grid; gap: 4px; min-width: 0; }
.bd-dl__t { font-size: 13.5px; color: var(--fg); line-height: 1.4; }
.bd-dl__c { font-size: 12.5px; color: var(--mut); line-height: 1.55; }
.bd-dl__m { font-size: 10.5px; color: var(--mut); letter-spacing: .06em; }
.bd-dl__go { font-size: 18px; color: var(--primary); text-align: center; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.bd-faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line2); margin-top: 28px; }
.bd-faq__item { background: var(--ink); }
.bd-faq__item summary {
  cursor: pointer; list-style: none; padding: 17px 20px; font-family: var(--mono); font-size: 13.5px;
  color: var(--fg); display: flex; align-items: baseline; gap: 12px; transition: color .15s;
}
.bd-faq__item summary::-webkit-details-marker { display: none; }
.bd-faq__item summary::before { content: '+'; color: var(--primary); font-size: 15px; flex: none; }
.bd-faq__item[open] summary::before { content: '−'; }
.bd-faq__item summary:hover { color: var(--primary); }
.bd-faq__a { padding: 0 20px 20px 44px; font-size: 13.5px; color: var(--mut); line-height: 1.8; max-width: 82ch; }

.bd-end { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

@media (max-width: 720px) {
  .bd-list__row, .bd-note__row { grid-template-columns: 1fr; gap: 6px; }
  .bd-table tbody th { width: auto; }
  .bd-table th, .bd-table td { padding: 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-ex__proj, .bd-dl__item { transition: none; }
  .bd-ex__proj:hover, .bd-dl__item:hover { transform: none; }
}

/* ── Register interest / pre-order ────────────────────────────────────── */
.bd-ic { margin-top: 22px; }
.bd-ic__open { cursor: pointer; }
.bd-ic__open[aria-expanded="true"] { background: none; color: var(--primary); border: 1px solid var(--primary); }

.bd-ic__msg {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; margin: 14px 0 0;
  padding: 12px 14px; border: 1px solid;
}
.bd-ic__msg--ok  { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent); }
.bd-ic__msg--err { color: color-mix(in srgb, #e5646a 68%, var(--fg)); border-color: color-mix(in srgb, #e5646a 45%, transparent);
  background: color-mix(in srgb, #e5646a 7%, transparent); }

.bd-ic__form {
  margin-top: 16px; border: 1px solid var(--line2); background: var(--panel); padding: 22px;
  max-width: 720px;
}
.bd-ic__form[hidden] { display: none; }
.bd-ic__h { font-family: var(--mono); font-size: 16px; color: var(--fg); margin: 0 0 8px; line-height: 1.35; }
.bd-ic__blurb { font-size: 13.5px; color: var(--mut); line-height: 1.7; margin: 0 0 18px; max-width: 60ch; }

.bd-ic__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bd-ic__f { display: grid; gap: 6px; min-width: 0; }
.bd-ic__f--wide { grid-column: 1 / -1; }
.bd-ic__f--sm { max-width: 160px; }
.bd-ic__f > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); display: flex; gap: 7px; align-items: baseline;
}
.bd-ic__f > span i { font-style: normal; font-size: 9.5px; color: var(--primary); letter-spacing: .06em; }
.bd-ic__f input, .bd-ic__f textarea {
  width: 100%; background: var(--ink); border: 1px solid var(--line2); color: var(--fg);
  font-family: inherit; font-size: 14px; padding: 11px 13px; line-height: 1.5;
}
.bd-ic__f textarea { resize: vertical; min-height: 76px; }
.bd-ic__f input:focus, .bd-ic__f textarea:focus { outline: none; border-color: var(--primary); }
.bd-ic__f input::placeholder, .bd-ic__f textarea::placeholder { color: color-mix(in srgb, var(--mut) 70%, transparent); }

/* Off-screen rather than display:none — a bot that skips hidden inputs still
   fills this one, which is the whole point of it. */
.bd-ic__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bd-ic__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.bd-ic__fine { font-size: 12px; color: var(--mut); line-height: 1.6; max-width: 42ch; }

.bd-ic-sec .bd-ic { margin-top: 26px; }
.bd-ic-sec .bd-ic__form { max-width: 820px; }
.bd-ic-sec .bd-ic__h { display: none; }   /* the section already carries it */

@media (max-width: 640px) {
  .bd-ic__grid { grid-template-columns: 1fr; }
  .bd-ic__f--sm { max-width: none; }
}

/* Interest link on an index card. It sits outside the card's own <a>, because
   a link inside a link is invalid markup and picks the wrong click target. */
.b1-bcard-wrap { display: flex; flex-direction: column; min-width: 0; }
.b1-bcard-wrap > .b1-bcard { flex: 1; }
.b1-bcard__ic {
  display: block; text-align: center; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
  border: 1px solid var(--line2); border-top: 0; padding: 12px; text-decoration: none;
  transition: background .16s, color .16s;
}
.b1-bcard__ic:hover { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

/* And on the homepage showcase button row. */
.dk-btn--interest { white-space: nowrap; }

/* Draft preview — only an admin ever sees this, and it has to be impossible to
   mistake for the live page, so it outranks the preorder notice below it. */
.bd-draft {
  border: 1px solid #e0a23c; background: color-mix(in srgb, #e0a23c 12%, transparent);
  color: color-mix(in srgb, #e0a23c 62%, var(--fg)); font-family: var(--mono); font-size: 12.5px; line-height: 1.8;
  padding: 13px 16px; margin-bottom: 16px;
}
.bd-draft b { color: color-mix(in srgb, #e0a23c 74%, var(--fg)); }
.bd-draft a { color: color-mix(in srgb, #e0a23c 62%, var(--fg)); }

/* ═══════════════════════════════════════════════════════════════════════
   BOARD DETAIL — legibility pass
   ───────────────────────────────────────────────────────────────────────
   Same three faults as the homepage showcase, and the same corrections:
   green earns its meaning back by not being everywhere, reading text moves
   from mono to DM Sans, and body copy comes up from 13.5px to a size that
   survives a dark background.

   The .b1 tokens are re-pointed rather than replaced, so base1.css keeps
   working unchanged and every section gains the same lift at once.
   ═══════════════════════════════════════════════════════════════════════ */

.b1 {
  /* These were fixed pale-greens and near-blacks chosen for a permanently
     dark page - on the light theme they were pale text on a white ground and
     dark boxes in a light layout. Pointed at the site tokens, so contrast is
     whatever the active theme guarantees. --mut carries body copy, so it
     takes --fg2; --dim is for true asides only. */
  --mut:  var(--fg2);
  --dim:  var(--fg3);
  --soft: var(--fg);

  /* Neutral resting lines, so a green border marks something rather than
     being the default state of every box on the page. */
  --nline:  var(--border);
  --nline2: var(--border2);
  --nface:  var(--bg2);

  font-size: 16.5px;
}

/* ── Reading text ──────────────────────────────────────────────────────*/
.b1-sub        { font-size: 16px; line-height: 1.8; color: var(--mut); max-width: 68ch; }
.bd-prose      { font-size: 16px; line-height: 1.85; color: var(--mut); max-width: 70ch; }
.bd-prose b, .bd-prose strong { color: var(--fg); font-weight: 600; }
.b1-lede       { font-size: 17px; line-height: 1.75; color: var(--soft); max-width: 50ch; }

/* Headings: a clear step between the section label, the heading and the body.
   Previously the eyebrow, the h2 and the body were close enough in weight
   that the page read as one long block. */
.b1-eyebrow {
  font-size: 11.5px; letter-spacing: .22em; color: var(--primary);
  margin-bottom: 14px; font-weight: 600;
}
.b1-h2 {
  font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.02em; line-height: 1.1;
  margin-bottom: 18px;
}
.b1-sec { padding: 84px 0; border-top-color: var(--nline); }

/* ── Tables ────────────────────────────────────────────────────────────
   The spec and pinout tables are the reference people come back for, so they
   get the biggest lift: bigger values, quieter labels, neutral rules. */
.bd-table { border-color: var(--nline2); }
.bd-table th, .bd-table td { border-bottom-color: var(--nline); padding: 14px 18px; }
.bd-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.bd-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.bd-table thead th { background: var(--nface); border-bottom-color: var(--nline2); font-size: 11px; }
.bd-table tbody th { font-size: 12.5px; color: var(--dim); letter-spacing: .04em; }
.bd-table td { font-size: 15px; line-height: 1.7; color: var(--soft); }
.bd-table td small { font-size: 13px; color: var(--dim); margin-top: 6px; }

.bd-specs__gh {
  font-size: 12px; letter-spacing: .16em; color: var(--primary);
  margin-bottom: 14px; font-weight: 600;
}
.bd-specs__gh small { font-size: 12.5px; color: var(--dim); }
.bd-specs { gap: 32px; }

/* Pinout: the pin name is the thing you are hunting for, so it is the
   brightest element in the row and the function badge stops competing. */
.bd-table--pins tbody th { font-size: 14px; color: var(--fg); letter-spacing: .02em; }
.bd-pin__fn {
  font-size: 11px; color: var(--mut); border-color: var(--nline2);
  background: var(--nface); padding: 4px 8px;
}
.bd-pin__note { font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.bd-pin__q {
  font-size: 14px; padding: 13px 16px; border-color: var(--nline2); background: var(--nface);
}
.bd-pin__f { font-size: 11.5px; border-color: var(--nline); padding: 9px 14px; }

/* ── Build explorer ────────────────────────────────────────────────────
   Same correction as the homepage: neutral at rest so "lights up" is a real
   change, and the build name in sans because that is what people scan. */
.bd-ex__pcb {
  background:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--panel2);
  border-color: var(--nline2); gap: 7px;
}
.bd-ex__blk {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; font-size: 11px; line-height: 1.3; padding: 7px 6px;
  background: var(--nface); border-color: var(--nline); color: var(--mut); border-radius: 3px;
}
.bd-ex__blk.is-on {
  color: var(--primary-fg); background: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.bd-ex__chip { font-size: 14px; letter-spacing: .28em; padding: 12px 8px; border-radius: 3px; }

.bd-ex__proj {
  min-height: 108px; border-color: var(--nline); background: var(--nface);
  border-radius: 4px; padding: 15px 13px 13px;
}
.bd-ex__proj:hover, .bd-ex__proj:focus-visible, .bd-ex__proj.is-on {
  border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--nface));
}
.bd-ex__name {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.35; color: var(--soft);
}
.bd-ex__adds { font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.bd-ex__adds--none { color: var(--primary); font-weight: 500; }
.bd-ex__n { color: var(--fg3); }
.bd-ex__proj:hover .bd-ex__n, .bd-ex__proj.is-on .bd-ex__n { color: var(--primary); }
.bd-ex__now { border-color: var(--nline); min-height: 78px; }
.bd-ex__now-text { font-size: 13.5px; color: var(--fg2); }
.bd-ex__now-text b { color: var(--fg); font-weight: 600; }
.bd-ex__chips i { font-size: 10.5px; border-color: var(--nline); color: var(--dim); }

/* ── Editor sections ───────────────────────────────────────────────────*/
.bd-list { border-color: var(--nline2); background: var(--nline); }
.bd-list__row { padding: 17px 20px; }
.bd-list__k { font-size: 13px; color: var(--fg); letter-spacing: .02em; }
.bd-list__v { font-size: 15px; line-height: 1.7; color: var(--mut); }

.bd-cards { gap: 12px; }
.bd-card { border-color: var(--nline); background: var(--nface); border-radius: 4px; padding: 20px; }
.bd-card:hover { border-color: var(--nline2); }
.bd-card__t span { font-family: 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; }
.bd-card p { font-size: 14.5px; line-height: 1.75; color: var(--mut); }

.bd-note__row { padding: 17px 20px; }
.bd-note__k { font-size: 12px; letter-spacing: .12em; }
.bd-note__v { font-size: 15px; line-height: 1.75; }

.bd-badge { font-size: 10px; letter-spacing: .14em; padding: 4px 9px; border-color: var(--nline2); }

/* ── Downloads ─────────────────────────────────────────────────────────*/
.bd-dl__item { border-color: var(--nline); background: var(--nface); border-radius: 4px; padding: 16px; }
.bd-dl__item:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--nface)); }
.bd-dl__ext { border-color: var(--nline2); background: var(--panel2); font-size: 11.5px; padding: 11px 4px; }
.bd-dl__t { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.bd-dl__c { font-size: 13.5px; color: var(--dim); }
.bd-dl__m { font-size: 11px; color: var(--dim); }

/* ── FAQ ───────────────────────────────────────────────────────────────*/
.bd-faq { border-color: var(--nline2); background: var(--nline); }
.bd-faq__item summary {
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: -.01em; padding: 19px 22px;
}
.bd-faq__a { font-size: 15px; line-height: 1.85; color: var(--mut); padding: 0 22px 22px 46px; }

/* ── Hero, stats, nav ──────────────────────────────────────────────────*/
.b1-stats { border-color: var(--nline); background: var(--nline); margin-top: 48px; }
.b1-stat { padding: 22px 20px; }
.b1-stat b { font-size: 30px; letter-spacing: -.01em; }
.b1-stat span { font-size: 13px; color: var(--mut); margin-top: 9px; }

.bd-nav { border-color: var(--border); }
.bd-nav__links a { font-size: 13.5px; padding: 9px 12px; }
.bd-nav__label { font-size: 12.5px; letter-spacing: .12em; font-weight: 700; }

.b1-preview {
  font-size: 14px; line-height: 1.75;
}
.bd-buy__note { font-size: 12.5px; letter-spacing: .12em; padding: 10px 14px; border-color: var(--nline2); }

/* Buttons: a real primary, and a genuinely quiet secondary. Previously both
   sat at similar weight, so the page offered no obvious next step. */
.b1-btn {
  font-size: 13px; letter-spacing: .04em; padding: 14px 20px; font-weight: 600;
  border-radius: 3px;
}
.b1-btn--sm { font-size: 12px; padding: 11px 16px; }
.b1-btn--ghost { border-color: var(--nline2); color: var(--soft); }
.b1-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ── Interest form ─────────────────────────────────────────────────────*/
.bd-ic__form { border-color: var(--nline2); border-radius: 4px; padding: 26px; }
.bd-ic__h { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.bd-ic__blurb { font-size: 14.5px; line-height: 1.75; color: var(--mut); }
.bd-ic__f > span { font-size: 11.5px; letter-spacing: .12em; color: var(--dim); }
.bd-ic__f input, .bd-ic__f textarea { font-size: 15px; padding: 12px 14px; border-color: var(--nline2); border-radius: 3px; }
.bd-ic__fine { font-size: 12.5px; color: var(--dim); }

/* ── Gallery ───────────────────────────────────────────────────────────*/
.bd-gal__main { border-color: var(--nline2); }
.bd-gal__main figcaption { font-size: 12px; color: var(--dim); line-height: 1.65; }
.bd-gal__t { border-color: var(--nline); }
.b1-shot { border-color: var(--nline2); }
.b1-shot figcaption { font-size: 12px; color: var(--dim); }

@media (max-width: 720px) {
  .b1-sec { padding: 56px 0; }
  .bd-ex__proj { min-height: 98px; }
  .b1-sub, .bd-prose { font-size: 15.5px; }
}

/* ── Detail page: the same evening-up as the showcase ──────────────────*/
.bd-ex__name {
  min-height: 2.7em; display: flex; align-items: flex-start; text-wrap: balance;
}
.bd-ex__proj { gap: 8px; }
.bd-ex__adds { margin-top: 0; }
.bd-ex__blk { text-wrap: balance; hyphens: none; }

/* ── Two things only visible once the page is rendered ─────────────────*/

/* 1. The sticky nav sat on top of whatever heading you jumped to, so every
      nav link landed with its own title hidden behind the bar. */
.b1-sec, .bd-ic-sec { scroll-margin-top: 72px; }
.b1 [id] { scroll-margin-top: 72px; }

/* 2. The preview notice was set in mono across the full 1180px — roughly 120
      characters a line of monospace, which is the least readable thing on the
      page and it is the one paragraph that carries a warning. Sans, and capped
      at a comfortable measure. */
.b1-preview {
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px; line-height: 1.7; max-width: 88ch;
  padding: 16px 18px; border-radius: 3px;
}
.b1-preview b { font-weight: 700; color: color-mix(in srgb, #e0a23c 62%, var(--fg)); }

/* Long spec values ran the full width too. Capping the block keeps the table
   full-bleed on narrow screens and readable on a wide monitor. */
.bd-specs, .bd-pin__tables { max-width: 1020px; }
.bd-table td { max-width: 82ch; }

/* The breadcrumb and the "coming soon" chip were floating unanchored. */
.b1-crumb { font-size: 12.5px; margin-bottom: 24px; }
.bd-buy { margin-top: 26px; }

/* ── The difficulty badge was sitting on top of the text ───────────────
   It is absolutely positioned bottom-right, so on any card whose "adds" line
   wrapped to the full width the two overlapped — "distance sensor MEDIUM" ran
   into each other. Reserving the corner keeps them apart, and a card with no
   badge is unaffected. */
.bd-ex__proj:has(.bd-ex__lvl) .bd-ex__adds { padding-right: 62px; }
.bd-ex__lvl { bottom: 12px; right: 12px; }

/* Fallback for browsers without :has() — costs a little room on every card
   rather than letting the two collide on any of them. */
@supports not selector(:has(*)) {
  .bd-ex__adds { padding-right: 62px; }
}

/* Icons are symbol glyphs, not emoji: keep any that slipped through from
   rendering in full colour and breaking the monochrome set. */
.bd-ex__icon, .dk-base__proj-icon {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-emoji: text;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIZE + CHARACTER PASS
   Everything up another step, and a few marks of its own so the page reads
   as designed rather than defaulted.
   ═══════════════════════════════════════════════════════════════════════ */

.b1 { font-size: 17px; }

/* ── Reading sizes, up a step ──────────────────────────────────────────*/
.b1-sub        { font-size: 17.5px; line-height: 1.75; }
.bd-prose      { font-size: 17.5px; line-height: 1.8; }
.b1-lede       { font-size: 19px; line-height: 1.7; max-width: 46ch; }
.bd-table td   { font-size: 16.5px; line-height: 1.65; }
.bd-table tbody th { font-size: 13.5px; }
.bd-table td small { font-size: 14px; }
.bd-list__v    { font-size: 16.5px; }
.bd-list__k    { font-size: 14px; }
.bd-card p     { font-size: 16px; line-height: 1.7; }
.bd-card__t span { font-size: 17px; }
.bd-note__v    { font-size: 16.5px; }
.bd-faq__item summary { font-size: 17.5px; }
.bd-faq__a     { font-size: 16.5px; line-height: 1.8; }
.bd-dl__t      { font-size: 16px; }
.bd-dl__c      { font-size: 14.5px; }
.bd-ic__blurb  { font-size: 16px; }
.bd-ic__f input, .bd-ic__f textarea { font-size: 16px; }
.bd-pin__note  { font-size: 14.5px; }
.bd-table--pins tbody th { font-size: 15px; }
.bd-pin__fn    { font-size: 12px; }
.bd-ex__name   { font-size: 15.5px; }
.bd-ex__adds   { font-size: 12.5px; }
.bd-ex__blk    { font-size: 12px; min-height: 46px; }
.b1-preview    { font-size: 15.5px; }

/* ── A heading that announces itself ───────────────────────────────────
   The eyebrow gets a rule running out of it, so each section starts with a
   mark rather than just smaller text. */
.b1-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .24em;
}
.b1-eyebrow::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, transparent), transparent);
}
.b1-h2 { font-size: clamp(30px, 4.2vw, 46px); }

/* Spec group headers get the same treatment, one level quieter. */
.bd-specs__gh { font-size: 13px; display: flex; align-items: center; gap: 12px; }
.bd-specs__gh::before {
  content: ''; width: 16px; height: 2px; background: var(--primary); flex: none;
}

/* ── Bigger numbers ────────────────────────────────────────────────────*/
.b1-stat b { font-size: 38px; }
.b1-stat span { font-size: 14px; }
.b1-stat { padding: 26px 22px; }

/* ── Cards: an accent edge that appears on approach ────────────────────*/
.bd-ex__proj, .bd-card, .bd-dl__item { position: relative; overflow: hidden; }
.bd-ex__proj::before, .bd-dl__item::before {
  content: ''; position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.bd-ex__proj:hover::before, .bd-ex__proj:focus-visible::before,
.bd-ex__proj.is-on::before, .bd-dl__item:hover::before { transform: scaleX(1); }

/* ── Buttons with a bit more presence ──────────────────────────────────*/
.b1-btn { font-size: 14px; padding: 15px 24px; letter-spacing: .03em; }
.b1-btn--sm { font-size: 13px; padding: 12px 18px; }

@media (prefers-reduced-motion: reduce) {
  .bd-ex__proj::before, .bd-dl__item::before { transition: none; }
}
@media (max-width: 720px) {
  .b1 { font-size: 16px; }
  .b1-sub, .bd-prose { font-size: 16.5px; }
  .b1-lede { font-size: 17.5px; }
  .b1-stat b { font-size: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════
   FOLDS — the reference material, collapsed
   ──────────────────────────────────────────────────────────────────────
   Specification, pinout, downloads and questions are what you read AFTER
   deciding the board is interesting. Expanded, they made the page several
   screens of tables before the reader had seen the builds, and on a phone
   that is a long scroll past things they did not ask for. Each one is now
   a <details>: the heading stays visible with a count beside it, and the
   content opens on tap. Native element, so it works with no JavaScript,
   with the keyboard, and with find-in-page (browsers open a fold to reach
   a match).
   ═════════════════════════════════════════════════════════════════════ */
.bd-fold { border: 1px solid var(--line); background: var(--bg2, transparent); }
.bd-fold + .bd-fold { margin-top: 14px; }

.bd-fold__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px 24px; cursor: pointer; list-style: none;
  transition: background .18s, border-color .18s;
}
.bd-fold__head::-webkit-details-marker { display: none; }
.bd-fold__head:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.bd-fold__head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.bd-fold__titles { flex: 1 1 auto; min-width: 0; }
.bd-fold__titles .b1-eyebrow { margin-bottom: 4px; }
.bd-fold__titles .b1-h2 { margin: 0; }

.bd-fold__hint {
  flex: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg3, #8a94a6);
}

/* A plus that becomes a minus. Rotating a glyph keeps the two states the
   same size, so the header does not jump on open. */
.bd-fold__chev {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 17px; line-height: 1; color: var(--primary);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .18s;
}
.bd-fold[open] .bd-fold__chev { transform: rotate(45deg); }
.bd-fold__head:hover .bd-fold__chev { background: color-mix(in srgb, var(--primary) 12%, transparent); }

.bd-fold__body { padding: 0 24px 28px; }
.bd-fold[open] .bd-fold__head { border-bottom: 1px solid var(--line); margin-bottom: 24px; }

/* A fold the in-page nav has just jumped to. */
.bd-fold.is-target { border-color: var(--primary); }

/* Folded sections sit closer together than full sections did. */
.b1-sec:has(> .b1-wrap > .bd-fold) { padding: 26px 0; border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .bd-fold__chev { transition: none; }
}

@media (max-width: 720px) {
  .bd-fold__head { padding: 18px 16px; gap: 12px; }
  .bd-fold__body { padding: 0 16px 22px; }
  .bd-fold[open] .bd-fold__head { margin-bottom: 18px; }
  /* The count goes under the heading rather than squeezing it. */
  .bd-fold__titles { flex: 1 1 100%; }
  .bd-fold__hint { order: 3; }
  .bd-fold__chev { position: absolute; right: 14px; top: 16px; }
  .bd-fold__head { position: relative; padding-right: 60px; }
}

/* ── Wide content inside a fold scrolls in its own box ──────────────────
   Pin tables and spec tables are the two things on this page that cannot
   be made narrow enough for a phone. They scroll sideways themselves
   rather than pushing the whole page wider. */
.bd-fold__body .bd-pin__tables,
.bd-fold__body .bd-specs { max-width: 100%; }
.bd-fold__body table { min-width: 0; }
@media (max-width: 720px) {
  .bd-fold__body .bd-pin__table,
  .bd-fold__body .bd-specs__group { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ══════════════════════════════════════════════════════════════════════
   LEGIBILITY — last, so it wins
   ──────────────────────────────────────────────────────────────────────
   Two things made this page hard to read. The palette was hardcoded dark,
   which is fixed at the top of base1.css by binding to the site tokens.
   The other is here: almost everything was set in JetBrains Mono at 12-13px
   in a muted green-grey. Mono is right for a pin name or a part number and
   wrong for a paragraph - narrow counters, no shape variation between words,
   and at 12.5px on a phone it is genuinely tiring. Running text is sans and
   bigger now; mono is kept for the things that are actually code-like:
   pin names, part numbers, eyebrows, counts, buttons.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Running text ── */
.b1 .b1-sub,
.b1 .b1-lede,
.b1 .bd-prose,
.b1 .bd-prose p,
.b1 .bd-prose li,
.b1 .bd-card p,
.b1 .bd-faq__a,
.b1 .bd-ic__p {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--fg2);
}
.b1 .b1-sub    { font-size: 17px; line-height: 1.75; max-width: 68ch; }
.b1 .b1-lede   { font-size: 18.5px; line-height: 1.75; color: var(--fg); max-width: 62ch; }
.b1 .bd-prose  { font-size: 17px; line-height: 1.8; max-width: 72ch; }
.b1 .bd-prose p + p { margin-top: 1.1em; }
.b1 .bd-faq__a { font-size: 16.5px; line-height: 1.75; }
.b1 .bd-card p { font-size: 15.5px; line-height: 1.65; }

/* Bold inside body copy must actually look bold at these weights. */
.b1 b, .b1 strong, .b1 .bd-prose b, .b1 .bd-prose strong { color: var(--fg); font-weight: 700; }

/* ── Headings ── */
.b1 .b1-h2 { color: var(--fg); letter-spacing: -.005em; line-height: 1.2; }
.b1 .bd-prose h3, .b1 .bd-specs__gh { color: var(--fg); }

/* ── Names and labels: mono is fine, but not at 12px ── */
.b1 .bd-ex__name    { font-size: 14px; line-height: 1.45; color: var(--fg); }
.b1 .bd-list__k     { font-size: 14px; color: var(--fg); }
.b1 .bd-card__t span{ font-size: 15px; color: var(--fg); }
.b1 .bd-dl__t       { font-size: 15px; color: var(--fg); }
.b1 .b1-note-line   { font-size: 14px; color: var(--fg2); line-height: 1.85; }
.b1 .bd-nav__links a{ font-size: 13.5px; }

/* ── Tables: the numbers are the point, so give them room ── */
.b1 .bd-table th,
.b1 .bd-table td { font-size: 15px; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; }
.b1 .bd-table td { color: var(--fg2); }
.b1 .bd-table th { color: var(--fg); }
.b1 .bd-table--pins tbody th { font-size: 14.5px; color: var(--fg); }

/* ── Eyebrows stay small and mono, but readable ── */
.b1 .b1-eyebrow { font-size: 11.5px; letter-spacing: .18em; color: var(--primary); }

/* On a light theme a thin mono at 11px on a pale ground disappears. */
[data-theme="light"] .b1 .b1-eyebrow { font-weight: 600; }
[data-theme="light"] .b1 .bd-fold__hint { color: var(--fg2); }

/* ── Phones: one more step up, and no cramped gutters ── */
@media (max-width: 720px) {
  .b1 .b1-sub, .b1 .bd-prose { font-size: 17px; }
  .b1 .bd-prose { max-width: none; }
  .b1 .b1-lede  { font-size: 18px; }
  .b1 .bd-faq__a { font-size: 17px; }
  .b1-wrap { padding: 0 16px; }
  .b1 .bd-table th, .b1 .bd-table td { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Fold headings, and zoomable images
   ═════════════════════════════════════════════════════════════════════ */

/* A fold header is a signpost, not a page title. At clamp(24px, 3.4vw, 38px)
   in mono, "Twenty-four kits, four families" ran nearly the full width and
   was louder than the section it introduces. */
.b1 .bd-fold__head .b1-h2 { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.25; }
@media (max-width: 720px) {
  .b1 .bd-fold__head .b1-h2 { font-size: 18px; }
}

/* Concept renders are full of small print. Clicking one opens the lightbox
   the hero gallery already uses, so the button has to look pressable. */
.bd-zoom {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in; line-height: 0;
}
.bd-zoom img { transition: opacity .18s; }
.bd-zoom:hover img, .bd-zoom:focus-visible img { opacity: .88; }
.bd-zoom:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.bd-zoom__hint {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 14px; line-height: 1;
  color: var(--primary-fg); background: color-mix(in srgb, var(--primary) 88%, transparent);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s;
}
.bd-zoom:hover .bd-zoom__hint,
.bd-zoom:focus-visible .bd-zoom__hint { opacity: 1; transform: none; }
/* No hover on a touch screen, so the hint is simply always there. */
@media (hover: none) {
  .bd-zoom__hint { opacity: .92; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-zoom img, .bd-zoom__hint { transition: none; }
}

/* The lightbox keeps its own dark overlay in both themes — a photo is easier
   to look at against black, and its caption is written for that ground. */
.bd-lb__cap { color: #cfe0d8; }

/* ── Brand green as TEXT on the light theme ────────────────────────────
   #009e68 on the light ground measures 3.29:1 — fine as a fill behind
   white button text, too weak for 12px labels, which is what the board
   name and every eyebrow are. Darkened toward the page's own text colour
   so they stay recognisably brand green and clear the 4.5:1 line. Text
   ON the green (buttons, badges) is untouched. */
[data-theme="light"] .b1 .b1-eyebrow,
[data-theme="light"] .bd-nav__label,
[data-theme="light"] .bd-nav__links a.is-on,
[data-theme="light"] .b1 .bd-fold__chev,
[data-theme="light"] .b1 .bd-bullet__k,
[data-theme="light"] .b1 .b1-tag {
  color: color-mix(in srgb, var(--primary) 62%, var(--fg));
}
/* The underline and the ring stay full-strength green — they are shapes,
   not text, and read fine at any size. */
[data-theme="light"] .bd-nav__links a.is-on { border-bottom-color: var(--primary); }