/*
 * DesignAChip calm theme. Loads after tokens.css and site.css and replaces their loud parts.
 *
 * Why. The first version used a dark neon look with glows, cut corner panels and a moving background. Feedback was
 * that it was too much in your face. This file keeps the same component names, so every page still works, and
 * changes what they look like. Light is the default. Dark is a full second theme. Nothing glows and nothing moves.
 *
 * Fonts are self hosted from assets/fonts under the SIL Open Font License, so the page makes no outside request.
 * Every text pair is checked by tests/contrast.test.js.
 */

@font-face { font-family: "Schibsted Grotesk"; src: url("../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* 1. Tokens ---------------------------------------------------------------------------------- */
:root {
  --cz-font-display: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --cz-font-body: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --cz-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --cz-weight-display: 640;
  --cz-tracking-display: -0.012em;
  --cz-tracking-label: 0.06em;
  --cz-leading-body: 1.62;
  --cz-leading-heading: 1.18;
  --cz-measure: 66ch;
  --cz-radius-sm: 4px;
  --cz-radius-md: 8px;
  --cz-hud-cut: 0px;
  --cz-hud-bracket: 0px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --cz-color-bg: #F5F7F9;
  --cz-color-surface: #FFFFFF;
  --cz-color-surface-sunken: #EBF0F3;
  --cz-color-text: #14202A;
  --cz-color-text-muted: #485765;
  --cz-color-border: #DAE1E7;
  --cz-color-border-strong: #6F7F8D;
  --cz-color-primary: #0A6870;
  --cz-color-primary-hover: #08535A;
  --cz-color-on-primary: #FFFFFF;
  --cz-color-focus: #0A6870;
  --cz-color-link: #0A6870;
  --cz-color-pass: #17693F;
  --cz-color-caution: #7A5000;
  --cz-color-fail: #A3241B;
  --cz-color-brand-ink: #14202A;
  --cz-color-brand-accent: #0A6870;
  --cz-color-brand-glow: #0A6870;
  --cz-color-grid-line: rgb(20 32 42 / 0.06);
  --cz-color-grid-line-strong: rgb(20 32 42 / 0.14);
  --cz-color-hud-edge: #DAE1E7;
  --cz-color-trace: #0A6870;
  --cz-color-realm-dash: #1B5BB0;
  --cz-color-realm-dash-tint: #E5EDF8;
  --cz-color-realm-haydn: #A02369;
  --cz-color-realm-haydn-tint: #F6E5EE;
  --cz-color-realm-liam: #3A6310;
  --cz-color-realm-liam-tint: #E9F1DD;
  --cz-color-pass-bg: #E3F2EA;
  --cz-color-caution-bg: #FAF0DA;
  --cz-color-fail-bg: #FAE6E4;
  --cz-color-primary-tint: #E2F0F1;
  --cz-glow-pulse: none; --cz-glow-pulse-strong: none; --cz-glow-dash: none; --cz-glow-haydn: none; --cz-glow-liam: none;
  --cz-glow-text: none; --cz-glow-edge: none; --cz-gradient-horizon: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --cz-color-bg: #10181F;
  --cz-color-surface: #161F27;
  --cz-color-surface-sunken: #0C1217;
  --cz-color-text: #E7EDF2;
  --cz-color-text-muted: #A3B1BD;
  --cz-color-border: #27343F;
  --cz-color-border-strong: #70838F;
  --cz-color-primary: #63C6CE;
  --cz-color-primary-hover: #8DDCE2;
  --cz-color-on-primary: #062B2E;
  --cz-color-focus: #8DDCE2;
  --cz-color-link: #63C6CE;
  --cz-color-pass: #7ED6A0;
  --cz-color-caution: #EEC06B;
  --cz-color-fail: #FF8F85;
  --cz-color-brand-ink: #E7EDF2;
  --cz-color-brand-accent: #63C6CE;
  --cz-color-brand-glow: #63C6CE;
  --cz-color-grid-line: rgb(231 237 242 / 0.06);
  --cz-color-grid-line-strong: rgb(231 237 242 / 0.14);
  --cz-color-hud-edge: #27343F;
  --cz-color-trace: #63C6CE;
  --cz-color-realm-dash: #7DAEF0;
  --cz-color-realm-dash-tint: #172B45;
  --cz-color-realm-haydn: #F28CBB;
  --cz-color-realm-haydn-tint: #3A1E2E;
  --cz-color-realm-liam: #A9D86A;
  --cz-color-realm-liam-tint: #243417;
  --cz-color-pass-bg: #17352A;
  --cz-color-caution-bg: #3A2F17;
  --cz-color-fail-bg: #3B1F1D;
  --cz-color-primary-tint: #14363A;
  --cz-glow-pulse: none; --cz-glow-pulse-strong: none; --cz-glow-dash: none; --cz-glow-haydn: none; --cz-glow-liam: none;
  --cz-glow-text: none; --cz-glow-edge: none; --cz-gradient-horizon: none;
}

/* 1b. The brand. The mark is an inline drawing so it follows the theme. The A in the name is always the accent colour. */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.brand__mark { flex: none; color: var(--ink); }
.brand__mark-a { stroke: var(--primary); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.022em; line-height: 1; white-space: nowrap; }
.brand__a { color: var(--primary); }
.brand--footer { margin-bottom: 1.2rem; }
.brand--footer .brand__mark { width: 34px; height: 34px; }
.brand--footer .brand__name { font-size: 1.15rem; }
@media (max-width: 30em) { .brand__mark { width: 32px; height: 32px; } .brand__name { font-size: 1.1rem; } }

/* 2. Quiet the loud parts --------------------------------------------------------------------- */
#world, .vignette, .splash, #pause-btn, #pause-btn-top { display: none !important; }
.page.wrap::before { display: none; }
h1, h2 { text-shadow: none; }
.btn--primary { box-shadow: none; }
.hud, .hud--raised {
  clip-path: none; box-shadow: none; background: var(--panel-solid); background-image: none;
  border: 1px solid var(--edge); border-radius: var(--radius);
}
.hud::before, .hud::after { display: none; }
.eyebrow { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink-2); }
.label, dt { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
body { font-size: 1.0625rem; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); font-weight: 650; }
h3 { font-size: 1.15rem; font-weight: 650; }
.lead, .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }
:root { --radius: 8px; }

/* 3. Shell, one quiet bar on top ---------------------------------------------------------------- */
.shell { display: block; }
.preview-bar { background: var(--cz-color-surface-sunken); border-bottom: 1px solid var(--edge); padding: 0.4rem 1rem; font-size: 0.85rem; color: var(--ink-2); gap: 0.2rem 0.7rem; }
.preview-bar strong { font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 600; }
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--edge); }
.site-header__inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; }
.site-header .brand { margin-right: auto; }
.site-nav { display: none; }
.site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--panel-solid); border-bottom: 1px solid var(--edge); padding: 0.4rem 1rem 0.8rem; }
.site-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav li { margin: 0; }
.site-nav a.nav-link { display: block; padding: 0.7rem 0.4rem; min-height: 44px; text-decoration: none; color: var(--ink); border-radius: var(--radius); font-weight: 500; }
.site-nav a.nav-link:hover { background: var(--panel-inset); }
.site-nav a.nav-link[aria-current="page"] { color: var(--primary); font-weight: 650; }
.menu-btn { display: inline-flex; }
.btn--sm { min-height: 40px; padding: 0.4rem 0.95rem; font-size: 0.95rem; }
.icon-btn { background: transparent; border-color: var(--edge); font-weight: 500; }
.icon-btn:hover { background: var(--panel-inset); border-color: var(--edge); }
@media (min-width: 52em) {
  .site-nav { display: block; position: static; background: none; border: 0; padding: 0; }
  .site-nav ol { flex-direction: row; gap: 0.2rem; }
  .site-nav a.nav-link { padding: 0.5rem 0.8rem; min-height: 40px; }
  .menu-btn { display: none; }
  .site-header .brand { margin-right: 0.5rem; }
  .site-header__inner { gap: 0.5rem; }
  .site-header__spacer { flex: 1; }
}
main { padding: 2rem 1rem 4rem; }
.wrap { max-width: 64rem; }
.site-footer { background: var(--cz-color-surface-sunken); border-top: 1px solid var(--edge); padding: 2.5rem 1rem 3rem; }
.site-footer__inner { max-width: 64rem; margin: 0 auto; }
.site-footer .footer-links { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.site-footer .footer-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-footer .footer-links a:hover { text-decoration: underline; }
.site-footer p { max-width: 70ch; }
.footer-notice { border-left: 3px solid var(--edge-strong); background: transparent; padding: 0 0 0 1rem; }
@media (min-width: 70em) { .shell { display: block; } .site-footer { grid-column: auto; padding: 2.5rem 1rem 3rem; } main { padding: 3rem 1.5rem 5rem; } }

/* 4. Buttons, tags, tables ------------------------------------------------------------------- */
.btn { border-radius: var(--radius); font-weight: 600; box-shadow: none; text-transform: none; letter-spacing: 0; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--link); padding-left: 0.2rem; padding-right: 0.2rem; }
.tag { border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; padding: 0.1rem 0.6rem; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel-solid); }
.table-wrap table { margin: 0; border: 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th { text-align: left; font-weight: 650; background: var(--cz-color-surface-sunken); }
th, td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.callout { border-radius: var(--radius); }
details { margin: 0 0 0.8rem; }
details > summary { cursor: pointer; font-weight: 600; padding: 0.55rem 0; min-height: 44px; display: flex; align-items: center; gap: 0.6rem; }
details > summary:hover { color: var(--primary); }
.muted-small { color: var(--ink-2); font-size: 0.9rem; }

/* 5. Home ------------------------------------------------------------------------------------ */
.home-hero { padding: 1.5rem 0 2.5rem; max-width: 46rem; }
.home-hero h1 { margin-bottom: 1rem; }
.home-hero .lead { margin-bottom: 1.6rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.fineprint { color: var(--ink-2); font-size: 0.9rem; margin-top: 1rem; }
.section { margin: 3.2rem 0; }
.section > h2 { margin-bottom: 0.5rem; }
.section__lead { color: var(--ink-2); max-width: 60ch; margin-bottom: 1.4rem; }
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; counter-reset: s; }
.steps4 li { margin: 0; padding-top: 0.9rem; border-top: 2px solid var(--edge); }
.steps4 h3 { margin: 0 0 0.3rem; }
.steps4 p { margin: 0; color: var(--ink-2); }
@media (min-width: 46em) { .steps4 { grid-template-columns: repeat(4, 1fr); } }
.file-peek { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52em) { .file-peek { grid-template-columns: 1fr 1fr; } }
.file-card { background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 10px; padding: 1.2rem 1.4rem; }
.file-card h3 { margin-top: 0; }
.file-card ol { margin: 0; padding-left: 1.2rem; }
.file-card li { margin-bottom: 0.35rem; }
.file-card li span { color: var(--ink-2); }
.pick-row { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 46em) { .pick-row { grid-template-columns: repeat(3, 1fr); } }
.pick { display: block; text-decoration: none; color: inherit; background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 10px; padding: 1.1rem 1.2rem; text-align: left; font: inherit; cursor: pointer; width: 100%; }
.pick:hover { border-color: var(--primary); }
.pick h3 { margin: 0.3rem 0 0.3rem; font-size: 1.05rem; }
.pick p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.pick .dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--r, var(--primary)); margin-right: 0.45rem; vertical-align: baseline; }
.honest { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 46em) { .honest { grid-template-columns: 1fr 1fr; } }
.honest p { margin: 0; }
.honest strong { display: block; margin-bottom: 0.15rem; }
.ways-teaser { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 46em) { .ways-teaser { grid-template-columns: repeat(2, 1fr); } }
.ways-teaser div { border-left: 3px solid var(--edge); padding-left: 1rem; }
.ways-teaser h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.ways-teaser p { margin: 0; color: var(--ink-2); }
.founder-line { color: var(--ink-2); font-size: 0.92rem; max-width: 70ch; }

/* 6. The design flow ------------------------------------------------------------------------- */
.flow { max-width: 44rem; }
.flow-head { margin-bottom: 1.6rem; }
.flow-head h1 { margin-bottom: 0.4rem; }
.progress { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.92rem; color: var(--ink-2); }
.progress li { margin: 0; padding: 0.15rem 0; border-bottom: 2px solid transparent; }
.progress li[aria-current="step"] { color: var(--ink); font-weight: 650; border-bottom-color: var(--primary); }
.progress li.is-done { color: var(--ink); }
.step { margin: 0 0 1.4rem; }
.step h2 { margin-bottom: 0.3rem; }
.step__lead { color: var(--ink-2); margin-bottom: 1.4rem; }
.field { margin: 0 0 1.35rem; }
.field > label, .field > .field__label, legend { display: block; font-weight: 600; margin-bottom: 0.3rem; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.field__help { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 0.5rem; max-width: 60ch; }
.flow input[type="text"], .flow input[type="number"], .flow select, .flow textarea {
  width: 100%; max-width: 32rem; min-height: 46px; padding: 0.6rem 0.75rem; font: inherit; color: var(--ink);
  background: var(--panel-solid); border: 1px solid var(--cz-color-border-strong); border-radius: var(--radius);
}
.flow textarea { min-height: 6.5rem; max-width: 40rem; resize: vertical; }
.flow input:focus-visible, .flow select:focus-visible, .flow textarea:focus-visible { outline: var(--cz-focus-width) solid var(--focus); outline-offset: 1px; }
.inline-fields { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.inline-fields input[type="number"] { max-width: 9rem; }
.inline-fields select { max-width: 10rem; }
.opts { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .opts--2 { grid-template-columns: 1fr 1fr; } .opts--3 { grid-template-columns: repeat(3, 1fr); } }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt > span { display: block; background: var(--panel-solid); border: 1px solid var(--cz-color-border-strong); border-radius: var(--radius); padding: 0.75rem 0.95rem; min-height: 46px; }
.opt strong { display: block; font-weight: 600; }
.opt small { display: block; color: var(--ink-2); font-size: 0.9rem; margin-top: 0.1rem; }
.opt input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--cz-color-primary-tint); }
.opt input:focus-visible + span { outline: var(--cz-focus-width) solid var(--focus); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips .opt > span { padding: 0.45rem 0.9rem; border-radius: 999px; min-height: 40px; }
.chips .opt small { display: none; }
.sub-fields { margin: 0.6rem 0 0 0.2rem; padding-left: 1rem; border-left: 2px solid var(--edge); }
.sub-fields[hidden] { display: none; }
.nav-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--edge); }
.nav-row .spacer { flex: 1; }
.summary-list { list-style: none; margin: 0 0 1.4rem; padding: 0; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel-solid); }
.summary-list li { margin: 0; padding: 0.7rem 1rem; display: grid; gap: 0.1rem 1rem; grid-template-columns: 1fr; border-bottom: 1px solid var(--edge); }
.summary-list li:last-child { border-bottom: 0; }
.summary-list .k { color: var(--ink-2); font-size: 0.9rem; }
@media (min-width: 40em) { .summary-list li { grid-template-columns: 12rem 1fr; } }
.hint { background: var(--cz-color-primary-tint); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0 0 1.4rem; max-width: 60ch; }
.hint p { margin: 0; }
.starters { margin: 0 0 1.8rem; }
.starters .chips .btn { border-radius: 999px; }

/* 7. The design file ------------------------------------------------------------------------- */
.file { max-width: 56rem; }
.file-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1.2rem 0 1.8rem; }
.file section { margin: 2.6rem 0; }
.file h2 { margin-bottom: 0.4rem; }
.file .sec-lead { color: var(--ink-2); margin: 0 0 1rem; max-width: 62ch; }
.verdict-card { background: var(--panel-solid); border: 1px solid var(--edge); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1rem 0 1.4rem; }
.verdict-card h2 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.verdict-card p { margin: 0 0 0.5rem; }
.verdict-card ul { margin: 0.4rem 0 0; }
.toc { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.95rem; }
.toc a { color: var(--link); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.notice { background: var(--cz-color-surface-sunken); border-radius: var(--radius); padding: 0.9rem 1.1rem; max-width: 62ch; }
.notice ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.notice p { margin: 0; }
.route { background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 0 0 1rem; }
.route h3 { margin: 0 0 0.3rem; }
.route__head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; justify-content: space-between; }
.route__facts { margin: 0.6rem 0; display: grid; gap: 0.2rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .route__facts { grid-template-columns: 9rem 1fr; } .route__facts dt { padding-top: 0.15rem; } }
.route__facts dd { margin: 0 0 0.3rem; }
.checklist { list-style: none; margin: 0.4rem 0 0.2rem; padding: 0; }
.checklist li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; margin: 0 0 0.45rem; align-items: start; }
.checklist .tag { justify-self: start; }
.status--fits { background: var(--cz-color-pass-bg); color: var(--cz-color-pass); }
.status--fits_with_care { background: var(--cz-color-caution-bg); color: var(--cz-color-caution); }
.status--cannot_tell { background: var(--cz-color-surface-sunken); color: var(--ink-2); }
.status--does_not_fit { background: var(--cz-color-fail-bg); color: var(--cz-color-fail); }
.chk--pass { background: var(--cz-color-pass-bg); color: var(--cz-color-pass); }
.chk--warn { background: var(--cz-color-caution-bg); color: var(--cz-color-caution); }
.chk--fail { background: var(--cz-color-fail-bg); color: var(--cz-color-fail); }
.chk--unknown, .chk--info { background: var(--cz-color-surface-sunken); color: var(--ink-2); }
.partner-group { margin: 0 0 1rem; }
.partner { padding: 0.8rem 0; border-top: 1px solid var(--edge); }
.partner:first-child { border-top: 0; }
.partner h4 { margin: 0 0 0.15rem; font-size: 1rem; }
.partner p { margin: 0 0 0.25rem; color: var(--ink-2); font-size: 0.93rem; }
.hash { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-all; color: var(--ink-2); }
.block-group { margin: 1.1rem 0 0.4rem; color: var(--ink-2); font-size: 0.85rem; font-weight: 650; }
@media print {
  .site-header, .preview-bar, .site-footer, .file-top, .nav-row, .toc { display: none !important; }
  body { background: #fff; color: #000; }
  details { display: block; }
  details > summary { display: none; }
  .route, .verdict-card, .table-wrap { break-inside: avoid; }
}

/* 7b. Block diagram, next steps and table heads -------------------------------------------------- */
thead th, th { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.88rem; color: var(--ink-2); font-weight: 650; background: var(--cz-color-surface-sunken); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-flex; width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border: 1px solid var(--edge); border-radius: 50%; font-size: 0.95rem; line-height: 1; color: var(--ink-2); flex: none; }
details[open] > summary::before { content: "\2212"; }
.next-steps { padding-left: 1.2rem; margin: 0 0 1.4rem; max-width: 62ch; }
.next-steps li { margin-bottom: 0.7rem; }
.diagram { margin: 1.4rem 0; }
.diagram figcaption { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 0.6rem; }
.diagram__chip { border: 1px solid var(--cz-color-border-strong); border-radius: 12px; background: var(--panel-solid); padding: 0.9rem; display: grid; gap: 0.6rem; }
.diagram__row { display: grid; gap: 0.3rem 0.8rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 40em) { .diagram__row { grid-template-columns: 7.5rem 1fr; } }
.diagram__label { font-size: 0.85rem; font-weight: 650; color: var(--ink-2); padding-top: 0.45rem; }
.diagram__boxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.diagram__box { border: 1px solid var(--edge); background: var(--cz-color-surface-sunken); border-radius: 6px; padding: 0.4rem 0.7rem; font-size: 0.9rem; }
.diagram__bus { text-align: center; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.02em; color: var(--on-primary); background: var(--primary); border-radius: 4px; padding: 0.25rem 0.5rem; }
.diagram__pads { text-align: center; font-size: 0.85rem; color: var(--ink-2); border-top: 1px dashed var(--cz-color-border-strong); padding-top: 0.6rem; }
code { background: var(--cz-color-surface-sunken); border-radius: 4px; padding: 0.05rem 0.3rem; }

/* 7c. Small screens, a quieter header ---------------------------------------------------------- */
.nav-cta a { font-weight: 650; color: var(--primary); }
@media (min-width: 52em) { .nav-cta { display: none; } }
@media (max-width: 30em) {
  .site-header__inner { gap: 0.4rem; padding: 0.5rem 0.75rem; }
  #header-cta { display: none; }
  .site-header .icon-btn { padding: 0.3rem 0.6rem; min-width: 40px; min-height: 40px; font-size: 0.88rem; }
  main { padding: 1.5rem 1rem 3rem; }
}

/* 7d. The founder page -------------------------------------------------------------------------- */
.founder { display: grid; gap: 1.6rem 2.6rem; grid-template-columns: 1fr; margin: 1.4rem 0 0; align-items: start; }
@media (min-width: 52em) { .founder { grid-template-columns: minmax(0, 20rem) 1fr; } }
.founder__photo { margin: 0; }
.founder__photo img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--edge); background: var(--cz-color-surface-sunken); }
.founder__text .lead { margin-top: 0; }
.founder__section { margin: 1.8rem 0 0; }
.founder__section h2 { margin-bottom: 0.4rem; }
.founder__text p { max-width: 62ch; }
.promises { padding-left: 1.3rem; max-width: 66ch; }
.promises li { margin-bottom: 1.1rem; }
.promises .tag { vertical-align: 0.1em; }
.promises p { margin: 0.3rem 0 0; }
.ideas { max-width: 66ch; margin: 0; }
.ideas dt { font-family: var(--font-body); font-size: 1.05rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); margin-top: 1.1rem; }
.ideas dd { margin: 0.2rem 0 0; color: var(--ink-2); }
.founder-link { margin-top: 2rem; }
.founder-link a { font-weight: 600; }
.tag--built { background: var(--cz-color-pass-bg); color: var(--cz-color-pass); }
.tag--partly_built, .tag--planned { background: var(--cz-color-caution-bg); color: var(--cz-color-caution); }
.tag--designed { background: var(--cz-color-surface-sunken); color: var(--ink-2); }

/* 8. Ways to build page ---------------------------------------------------------------------- */
.ways-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 52em) { .ways-grid { grid-template-columns: 1fr 1fr; } }
.ways-grid .route { margin: 0; }

/* 9. Motion, nothing moves unless the visitor acts --------------------------------------------- */
*, *::before, *::after { animation: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }