/* ============================================================
   Silicon Antiques: the look of the website.
   Built 20 October 2026 from the family design tokens, tokens.json v1
   (Manuals repo, "Family look for the website", commit b89d842).
   Loads LAST, after style.css, each page's inline styles and style-workbench.css,
   and overrides them. Token values are verbatim; the web roles follow web-mapping.md.
   Token default is Bench; the SITE defaults to Vintage (Andy, 20 Oct 2026 evening) by setting data-theme="vintage" unless the visitor chose Bench.
   ============================================================ */


/* ---------- Tokens (generated verbatim from tokens.json) ---------- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-round: 999px;
  --opacity-disabled: 0.38; --opacity-engraved: 0.7;
  --surface-000: #0b0d10; --surface-100: #14181d; --surface-200: #1d2329; --surface-300: #272e36; --well: #07090b;
  --ink: #eef1f4; --ink-muted: #9aa4ae; --ink-faint: #5d6872;
  --line: #2d353e; --line-strong: #3d4854;
  --walnut: #7a4a22; --walnut-light: #a0652f;
  --signal: #ffd98a; --signal-dim: #7a6440;
  --accent-taran: #ffe066; --accent-arweinydd: #ff7a59; --accent-carn: #9bd4a3; --accent-corwynt: #5ce1e6;
  --mod-positive: #9ad0ff; --mod-negative: #d9a3ff;
  --ok: #6fcf97; --warn: #f2b84b; --error: #ff5c5c; --focus: #ffffff;
  --shadow-raise-1: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 6px rgba(0,0,0,0.45);
  --shadow-raise-2: 0 1px 0 rgba(255,255,255,0.09) inset, 0 6px 14px rgba(0,0,0,0.55);
  --shadow-well: 0 2px 6px rgba(0,0,0,0.7) inset, 0 -1px 0 rgba(255,255,255,0.04) inset;
  --shadow-glow-signal: 0 0 12px rgba(255,217,138,0.45);
}
:root[data-theme="vintage"] {
  --surface-000: #110f0d; --surface-100: #1e1a16; --surface-200: #2a241f; --surface-300: #352e27; --well: #0b0908;
  --ink: #f3eadb; --ink-muted: #b3a48f; --ink-faint: #6f6353;
  --line: #3a322a; --line-strong: #4d4237;
  --walnut: #8a5a2b; --walnut-light: #b0733a;
  --signal: #ffcc80; --signal-dim: #7a5d3b;
  --accent-taran: #f5d76e; --accent-arweinydd: #e8775a; --accent-carn: #a3c48c; --accent-corwynt: #7fc9c0;
  --mod-positive: #9fc3d6; --mod-negative: #c9a0c7;
  --ok: #7fbf8a; --warn: #e0a84a; --error: #e05a4e; --focus: #fff4e0;
  --shadow-raise-1: 0 1px 0 rgba(255,235,200,0.06) inset, 0 2px 6px rgba(0,0,0,0.5);
  --shadow-raise-2: 0 1px 0 rgba(255,235,200,0.1) inset, 0 6px 14px rgba(0,0,0,0.6);
  --shadow-well: 0 2px 6px rgba(0,0,0,0.75) inset, 0 -1px 0 rgba(255,235,200,0.05) inset;
  --shadow-glow-signal: 0 0 12px rgba(255,204,128,0.45);
}

/* ---------- Bridge: the old stylesheets' variable names now point at tokens ---------- */
:root, :root[data-theme="vintage"] {
  --ground: var(--surface-100); --card: var(--surface-200); --panel: var(--surface-000); --on-panel: var(--ink);
  --signal-text: var(--ink); --hole: var(--line-strong); --muted: var(--ink-muted); --rule: var(--line-strong);
  --hairline: var(--line); --hairline-panel: var(--line);
  --sans: var(--font-sans); --serif: var(--font-sans); --mono: var(--font-mono);
  color-scheme: dark;
}

/* ---------- The window: ground, the panel, the walnut rail ---------- */
html { background: var(--surface-000); }
body {
  margin: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) * 2);
  background: var(--surface-100); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.6;
  border-radius: var(--radius-md); overflow-x: clip;
  box-shadow: var(--shadow-raise-2);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: var(--space-4);
  background: var(--walnut); border-top: 3px solid var(--walnut-light); z-index: 50;
  box-shadow: 2px 0 6px rgba(0,0,0,0.45);
}
::selection { background: var(--ink); color: var(--surface-000); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Type ---------- */
h1, h2, h3, h4, .hero h1, h1.d, h2.d, .range h2, .compare h2, .learn h2, .closing h2, .idea h2, .features h2, .prose h2, .try h2, .recipe h3, .article h1.d, .dl h1.d, .card h3, .others a b, .learn-grid a b, .three a b, .wb .entry h2, .wb .next h2, .loves li.most span, .sounds li, .story .pull, .idea .body p.pull, .signoff .name, .welsh i, .phero .welsh i, .card .welsh i, .bignums b, .mstat b, .three a .count b, table.cmp thead th {
  font-family: var(--font-sans); font-style: normal;
}
h1.d, .hero h1, .article h1.d, .dl h1.d, .phero h1.d { font-weight: 700; letter-spacing: -0.02em; line-height: 1.0; }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); }
.phero h1.d { font-size: clamp(44px, 6.8vw, 84px); }
.article h1.d, .dl h1.d { font-size: clamp(34px, 5vw, 60px); }
h2.d, .range h2, .compare h2, .learn h2, .closing h2, .idea h2, .features h2 { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.prose h2, .try h2 { font-weight: 700; letter-spacing: -0.02em; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; }
.prose h3, .box h3, .grid > * h3, .feat h3, .matrix h3 { font-weight: 600; letter-spacing: -0.01em; }
.recipe h3 { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.phero h1 .code { font-family: var(--font-mono); font-weight: 500; font-size: .28em; letter-spacing: 0; color: var(--ink-muted); }
p { color: var(--ink); }
.hero p.lede, .article .standfirst, .dl p.lede, .phero .engine { color: var(--ink); }
.story .pull, .idea .body p.pull, .loves li.most span { font-weight: 600; letter-spacing: -0.01em; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.sounds li { font-size: 15px; font-weight: 500; border-color: var(--line-strong); background: var(--surface-300); border-radius: var(--radius-sm); color: var(--ink); }

/* Labels: the engraved label-caps style, readable (ink-muted), no bullet */
.label, .dgroup h4, .bignums span, .mstat span, .brand .s, .card .code, .three a .code, .feat .tag, .card .nums {
  font-family: var(--font-sans); font-stretch: normal; font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted);
}
.label::before { content: none; }
.card .nums { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-muted); }

/* Values: IBM Plex Mono, tabular */
.bignums b, .mstat b, .three a .count b, .prose .n, .count, .pins li, .ticker, .wb .entry time, figcaption, .tour figcaption, .fine, footer, .welsh, .phero .welsh, .signoff .role, .updated, .feedback .tag, code, .num {
  font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums;
}
.bignums b, .mstat b { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; border: 0; color: var(--ink); display: inline-block; }
.three a .count b { font-size: 18px; color: var(--ink); }
.welsh, .phero .welsh, .card .welsh { font-size: 13px; color: var(--ink-muted); }
.welsh i, .phero .welsh i, .card .welsh i { font-style: normal; font-weight: 600; font-size: 15px; color: var(--ink); }
table.spec td, table.cmp td { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--ink); }
table.spec td .n, table.cmp td .n { font-family: var(--font-mono); font-weight: 500; }
table.spec th, table.cmp tbody th, .prose th { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink-muted); }
table.cmp thead th { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
table.spec th, table.spec td, table.cmp th, table.cmp td, .prose th, .prose td { border-color: var(--line); }
.prose td { font-size: 15px; }
figcaption, .tour figcaption, .fine, .ctas .fine, .updated { font-size: 13px; color: var(--ink-muted); }
.tour figcaption b { color: var(--ink); }

/* Links: ink, underlined in line-strong; focus-white on hover. No colour as decoration. */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-muted); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { background: none; color: var(--focus); text-decoration-color: var(--focus); }
.brand, .brand *, nav.main a, .btn, .card a.get, .others a, .learn-grid a, .three a, .tour a, .shot a, .crumbs a, .assets a, .related a { text-decoration: none; }
section.dark a, footer a, .range a, .card a { color: var(--ink); }

/* ---------- Header ---------- */
header { padding-block: var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-200); box-shadow: var(--shadow-raise-1); position: relative; z-index: 2; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.brand { color: var(--ink); gap: var(--space-3); }
.brand .s { font-size: 10px; letter-spacing: 0.3em; color: var(--ink-muted); }
/* The logotype is the one exception to "no italic": lettering, not interface type. The mark's plugs are signal amber: what a pin matrix routes. */
.brand .a { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: 0; line-height: 1; }
nav.main a { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-muted); border-bottom: 2px solid transparent; }
nav.main a:hover { color: var(--ink); border-bottom-color: var(--line-strong); background: none; }
nav.main a[aria-current=page] { color: var(--ink); border-bottom-color: var(--ink-muted); }
nav.main a.cta, .cta-small {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink); background: var(--surface-300); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 3px 8px rgba(0,0,0,.5);
}
nav.main a.cta:hover, .cta-small:hover { background: var(--surface-300); color: var(--focus); border-color: var(--ink-muted); }

/* ---------- The status line (was the orange ticker) ---------- */
.ticker { background: var(--well); color: var(--ink-muted); font-size: 13px; line-height: 18px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-well); }
.ticker b { font-weight: 500; background: var(--surface-300); color: var(--ink); padding: 1px 6px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); }
.ticker a { color: var(--ink); text-decoration-color: var(--ink-muted); }
.crumbs, .crumbs a { color: var(--ink-muted); }

/* ---------- Buttons ---------- */
.btn, .signup .btn, .signup button, .getbox .btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--signal); color: var(--surface-000); border: 1px solid var(--signal); border-radius: var(--radius-sm); padding: 13px 18px;
  box-shadow: var(--shadow-raise-1); transition: none; transform: none;
}
.btn:hover, .signup .btn:hover, .signup button:hover, .getbox .btn:hover { background: var(--signal); color: var(--surface-000); box-shadow: var(--shadow-glow-signal), var(--shadow-raise-1); transform: none; }
.btn.ghost { background: var(--surface-300); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 3px 8px rgba(0,0,0,.5); }
.btn.ghost:hover { background: var(--surface-300); color: var(--focus); border-color: var(--ink-muted); box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 3px 8px rgba(0,0,0,.5); }
section.dark .btn { box-shadow: var(--shadow-raise-1); }

/* ---------- Inputs ---------- */
.signup input[type=email], .getbox input[type=email] { background: var(--surface-300); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-well); }
.signup input[type=email]::placeholder, .getbox input[type=email]::placeholder { color: var(--ink-faint); }
.getbox { background: var(--surface-200); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-raise-1); padding: var(--space-6); }
.getbox input[type=checkbox] { accent-color: var(--ink); }
.getbox .err { color: var(--error); }
.getbox label small, .getbox .fine { color: var(--ink-muted); }

/* ---------- Modules: cards, boxes, recipes, callouts ---------- */
.card, .learn-grid a, .three a, .others a, .recipe, .try, .feedback, .wb .next, .audio .clip, .assets a {
  background: var(--surface-200); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-raise-1); color: var(--ink);
}
.card { padding: var(--space-6); margin: 0; }
.cards { gap: var(--space-6); border: 0; }
.card:last-child { margin: 0; }
.card h3 { font-weight: 700; font-size: 32px; letter-spacing: -0.02em; }
.card .kind { color: var(--ink); }
.card p.desc { color: var(--ink-muted); }
.card a.get { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.card a.get:hover { color: var(--focus); border-color: var(--ink-muted); }
.card img.strip { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.learn-grid a:hover, .three a:hover, .others a:hover, .assets a:hover { box-shadow: var(--shadow-raise-2); color: var(--ink); }
.learn-grid a b, .three a b, .others a b { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.learn-grid a span, .three a span, .others a span, .related a span, .assets span, .recipe .from { color: var(--ink-muted); }
.three a .count { color: var(--ink-muted); }
.feedback { padding: var(--space-4) var(--space-6); }
.feedback .tag { background: var(--surface-300); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-xs); font-size: 12px; }
.feedback p, section.dark .feedback p { color: var(--ink); }
.quote { border-left: 2px solid var(--line-strong); color: var(--ink); }

/* Numbered feature runs (home grid, product boxes) */
.boxes, .grid { border-top: 0; background: var(--surface-200); border-radius: var(--radius-md); box-shadow: var(--shadow-raise-1); padding: var(--space-2) var(--space-6); }
.box:last-child, .grid > *:last-child { border-bottom: 0; }
.box, .grid > * { border-bottom: 1px solid var(--line); }
.box::before, .grid > *::before { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--ink-muted); }
.box p, .grid > * p, .feat p { color: var(--ink-muted); }
section.dark .boxes { border-color: var(--line); }
section.dark .box { border-color: var(--line); }
section.dark .box p { color: var(--ink-muted); }
.intro { border-top: 1px solid var(--line-strong); }
.intro p, section.s .intro p { color: var(--ink-muted); }

/* Dark bands become the window ground showing through */
section.dark, .range { background: var(--well); color: var(--ink); box-shadow: var(--shadow-well); }
section.dark p, section.dark .intro p, .range .head p { color: var(--ink-muted); }
section.dark .label, .range .label { color: var(--ink-muted); }
section.s, .idea, .learn, .compare, .closing, .idea + .idea { border-top: 1px solid var(--line); }
.range { padding-block: 64px; }
.cards { border-top: 0; }

/* Images and figures */
.shot.has-img img, .tour img, .figwide img, figure img, .card img.strip, .boards img, .assets img, .signoff img {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-raise-2); background: var(--surface-200);
}
.shot { border: 1px dashed var(--line-strong); background: var(--surface-200); color: var(--ink-muted); border-radius: var(--radius-sm); }
figure svg { background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-well); }
.assets img { background: var(--surface-300); }

/* Diagram colours inside the article SVGs (classes set in each page's own styles) */
.dline { stroke: var(--ink-muted); }
.dsig { stroke: var(--signal); }
.dbox { fill: var(--surface-200); stroke: var(--line-strong); }
.dtxt { fill: var(--ink); font-family: var(--font-sans); }
.dnote { fill: var(--ink-muted); font: 500 9px var(--font-mono); }
/* Hard-coded colours in inline SVGs: the old ink becomes ink, the old orange pins become ink plugs, orange lines become signal */
svg [stroke="#1B1A17"] { stroke: var(--ink-faint); }
svg [fill="#1B1A17"] { fill: var(--ink); }
svg circle[fill="#D4561E"], svg g[fill="#D4561E"], svg [fill="#D4561E"] { fill: var(--ink); }
svg [stroke="#D4561E"] { stroke: var(--signal); }
svg [fill="#F1EADC"] { fill: var(--surface-200); }
svg [fill="#F3ECDD"], svg [fill="#FFF8EE"], svg [fill="#fff8ee"] { fill: var(--surface-200); }
.brand svg g[stroke="#1B1A17"] { stroke: var(--ink-faint); }
.brand svg g[fill="#D4561E"] { fill: var(--signal); }
.hero .mark g[stroke="#1B1A17"] { stroke: var(--line-strong); }
.pin { animation: none; }

.hero .mark { width: min(100%, 340px); }
.hero .mark svg.plate { overflow: visible; }

/* Pins / chips */
.pins li { font-size: 12px; background: var(--surface-300); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-muted); padding: 3px 8px; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 4px rgba(0,0,0,.4); }
.pins li.src { border-color: var(--ink-muted); background: var(--surface-300); color: var(--ink); }
.matrix h3 small { color: var(--ink-muted); }

/* FAQ */
.faq details, .faq details:last-child { border-color: var(--line); }
.faq summary { color: var(--ink); }
.faq summary::after { color: var(--ink-muted); }
.faq details p { color: var(--ink-muted); }

/* Related / lists */
.related a { color: var(--ink); border-color: var(--line); }
.related a:last-child { border-color: var(--line); }
.related a:hover { color: var(--focus); }

/* Sign-off */
.signoff { border-top: 1px solid var(--line); }
.signoff .name { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.signoff .role { font-size: 13px; color: var(--ink-muted); }

/* Workbench */
.wb .entry { border-top: 1px solid var(--line); }
.wb .entry time { font-size: 13px; color: var(--ink-muted); }
.wb .entry h2 { font-size: 20px; font-weight: 600; }
.wb .next { padding: var(--space-6); }

/* Audio placeholders */
.audio .clip b { color: var(--ink); }
.audio .clip span { color: var(--ink-muted); }
audio { color-scheme: dark; }

/* ---------- Footer: colophon on the ground ---------- */
footer { background: var(--well); color: var(--ink-muted); font-size: 13px; border-top: 1px solid var(--line); padding-block: var(--space-8); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-well); }
footer a { color: var(--ink); text-decoration-color: var(--ink-muted); }
footer .links { gap: var(--space-4) var(--space-6); }
.theme-toggle { font: 500 12px/18px var(--font-mono); color: var(--ink-muted); background: var(--surface-300); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; }
.theme-toggle:hover { color: var(--focus); border-color: var(--ink-muted); }

/* ---------- Skip link ---------- */
.skip:focus { background: var(--ink); color: var(--surface-000); }

/* ---------- Phones and tablets: the rail runs along the top ---------- */
@media (max-width: 640px) {
  body { margin: calc(var(--space-4) + 3px) var(--space-2) var(--space-2); }
  body::before { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: var(--space-4); border-top: 0; border-bottom: 3px solid var(--walnut-light); }
  .hero h1 { font-size: 40px; }
  .phero h1.d { font-size: 44px; }
  /* Nav: the free-synths button takes its own line */
  nav.main a.cta { flex-basis: 100%; text-align: center; margin-top: var(--space-2); }
  /* Numbered runs: the number sits above the heading so the text keeps the full width */
  .boxes, .grid { padding-inline: var(--space-4); }
  .box, .grid > * { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .box p, .grid > * p { grid-column: 1; }
  /* Comparison table scrolls sideways; say so */
  .tablewrap::before { content: "Scroll sideways for all three"; display: block; font: 500 12px/18px var(--font-mono); color: var(--ink-muted); margin-bottom: var(--space-2); }
}