/* Fortress CMS — public site
   Swiss grid: white ground, near-black ink, hairlines, one tech blue. */

:root {
    --bg: #ffffff;
    --bg-soft: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #f4f6f8;
    --hover: #fbfcfd;
    --ink: #0b0d10;
    --ink-2: #454c58;
    --dim: #6e7683;
    --line: #e5e7eb;
    --line-soft: #eff1f4;
    --line-2: #cfd4db;
    --line-strong: #0b0d10;
    --accent: #0a66ff;
    --accent-dark: #0043c8;
    --accent-soft: #e9f0ff;
    --accent-line: #bcd3ff;
    --ok: #0f7a53;
    --warn: #9a5b00;
    --danger: #b42318;
    /* Semantic surfaces: a theme must never hard-code white, or it cannot be
       flipped to a dark scheme. */
    --on-ink: #ffffff;
    --ink-hover: #1b2027;
    --header-bg: rgba(255, 255, 255, .95);
    --hero-bg: #fbfcfd;
    --footer-bg: #f7f8fa;
    --card-line: #cdd3db;
    --shadow-card: 0 14px 32px rgba(11, 13, 16, .07);
    --thumb: #ccd2db;
    --thumb-hover: #a9b1bd;
    /* Inverted band: a dark block in the light scheme, a raised one in the dark
       scheme, so a theme can use it without ever flipping to white-on-white. */
    --band-bg: #0b0d10;
    --band-ink: #f3f5f8;
    --band-dim: #9aa2ae;
    --band-line: rgba(255, 255, 255, .14);
    --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --gutter: clamp(18px, 5vw, 56px);
    --radius: 2px;
    color-scheme: light;
}

/* ---------------------------------------------------------- dark scheme
   Opt-in, per page, via <html data-scheme="dark">. The demo frames use it, and
   any theme can ship dark as its default. Everything below is a token swap:
   no layout rule is duplicated, so a theme works in both schemes for free. */

html[data-scheme="dark"] {
    --bg: #0b0d10;
    --bg-soft: #101318;
    --surface: #12151a;
    --surface-2: #171b21;
    --hover: #191e25;
    --ink: #f3f5f8;
    --ink-2: #c4cad4;
    --dim: #9098a6;
    --line: #242931;
    --line-soft: #1b2027;
    --line-2: #333a45;
    --line-strong: #f3f5f8;
    --accent-dark: color-mix(in srgb, var(--accent) 62%, #ffffff);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, #0b0d10);
    --accent-line: color-mix(in srgb, var(--accent) 38%, #0b0d10);
    --ok: #35c48c;
    --warn: #e0a33a;
    --danger: #ff7a6e;
    --on-ink: #0b0d10;
    --ink-hover: #d9dee6;
    --header-bg: rgba(11, 13, 16, .82);
    --hero-bg: #101318;
    --footer-bg: #0d1014;
    --card-line: #333a45;
    --shadow-card: 0 14px 32px rgba(0, 0, 0, .5);
    --thumb: #2c333d;
    --thumb-hover: #3f4753;
    --band-bg: #151a21;
    --band-ink: #f3f5f8;
    --band-dim: #939ba8;
    --band-line: rgba(255, 255, 255, .10);
    color-scheme: dark;
}

/* The demo page carries one inline --accent (the tint) and derives the rest, so
   a dark frame never inherits a light tinted surface. */
.demo-page {
    --accent-dark: color-mix(in srgb, var(--accent) 78%, #000000);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, #ffffff);
    --accent-line: color-mix(in srgb, var(--accent) 34%, #ffffff);
}
html[data-scheme="dark"] .demo-page {
    --accent-dark: color-mix(in srgb, var(--accent) 62%, #ffffff);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, #0b0d10);
    --accent-line: color-mix(in srgb, var(--accent) 38%, #0b0d10);
}

/* ---------------------------------------------------------------- tints
   The theme decides structure, the tint decides the single accent colour.
   Applied as a class on <body> so nothing is inlined (strict CSP). */

body.tint-azure { --accent: #0a66ff; --accent-dark: #0043c8; --accent-soft: #e9f0ff; --accent-line: #bcd3ff; }
body.tint-ink { --accent: #0b0d10; --accent-dark: #000000; --accent-soft: #f1f2f4; --accent-line: #d5d8dd; }
body.tint-emerald { --accent: #00a06b; --accent-dark: #00714c; --accent-soft: #e4f7f0; --accent-line: #a9e5cf; }
body.tint-violet { --accent: #6a3cff; --accent-dark: #4720d6; --accent-soft: #efeaff; --accent-line: #cfc2ff; }

*, *::before, *::after { box-sizing: border-box; }

/* Author `img { display: block }` below would otherwise beat the UA rule for
   the hidden attribute; keep `hidden` authoritative everywhere. */
[hidden] { display: none !important; }

/* -------------------------------------------------------------- scrollbars */

html { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--thumb);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

h1, h2, h3, h4, h5 {
    font-family: var(--display);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.025em;
    line-height: 1.1;
    margin: 0 0 .55em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.05rem; letter-spacing: -.015em; }
h4 { font-size: .95rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--ink); font-weight: 600; }
small, .small { font-size: .82rem; }
.muted { color: var(--dim); }
.nowrap { white-space: nowrap; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- layout */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
/* Block padding only: a `.container.section` must keep its horizontal gutter. */
.section { padding-block: clamp(52px, 7vw, 96px); }
.section-alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 60ch; margin-bottom: clamp(24px, 3.5vw, 40px); }
.section-lead { color: var(--dim); font-size: 1rem; margin: 0; }
.section-note { color: var(--dim); font-size: .82rem; margin-top: 1.1rem; }
.eyebrow {
    font-family: var(--mono);
    font-size: .67rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 .8rem;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: var(--on-ink); padding: .65rem 1rem;
    font-family: var(--mono); font-size: .78rem;
}
.skip-link:focus { left: 0; color: var(--on-ink); }

/* --------------------------------------------------------------- buttons */

.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink);
    --btn-bd: var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .68rem 1.15rem;
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--sans);
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.15;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { color: var(--btn-fg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary { --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-bd: var(--ink); font-weight: 600; }
.btn-primary:hover { --btn-bg: var(--ink-hover); --btn-bd: var(--ink-hover); color: var(--on-ink); }
.btn-accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); font-weight: 600; }
.btn-accent:hover { --btn-bg: var(--accent-dark); --btn-bd: var(--accent-dark); color: #fff; }
.btn-secondary { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn-secondary:hover { --btn-bd: var(--ink); color: var(--ink); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-bd: transparent; }
.btn-ghost:hover { --btn-fg: var(--ink); background: var(--surface-2); }
.btn-danger { --btn-bg: var(--ink); --btn-fg: var(--on-ink); --btn-bd: var(--ink); }
.btn-danger:hover { --btn-bg: var(--ink-hover); --btn-bd: var(--ink-hover); --btn-fg: var(--on-ink); }
.btn-sm { padding: .4rem .7rem; font-size: .78rem; }
.btn-lg { padding: .88rem 1.5rem; font-size: .95rem; }
.btn-block { display: flex; width: 100%; }

/* ---------------------------------------------------------------- badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}
.badge-ai { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-dark); }
.badge-success { border-color: #bfe3d2; background: #eef8f3; color: var(--ok); }
.badge-warning { border-color: #f0dcbd; background: #fdf6ec; color: var(--warn); }
.badge-error { border-color: #f0c4c0; background: #fdf3f2; color: var(--danger); }
.badge-neutral { color: var(--dim); }
.badge-lang { color: var(--dim); }

.chip {
    display: inline-flex; align-items: center;
    padding: .25rem .55rem;
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
    color: var(--ink-2);
}
.provider-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.3rem; }
.provider-chip {
    border: 1px solid var(--line);
    background: var(--surface);
    padding: .3rem .6rem;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
    color: var(--ink-2);
}

.status-dot { width: 6px; height: 6px; background: var(--dim); display: inline-block; margin-right: .4rem; vertical-align: middle; }
.status-dot.is-ready { background: var(--ok); }
.status-pill {
    display: inline-flex; align-items: center;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .07em;
    text-transform: uppercase; color: var(--dim);
}
.status-pill.is-ready { color: var(--ok); }
.dot { width: 6px; height: 6px; background: var(--accent); display: inline-block; }

/* ----------------------------------------------------------------- cards */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.35rem;
}
.card-flush { padding: 0; }
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 0 1rem;
}
.card-head-pad { padding: 1rem 1.35rem; border-bottom: 1px solid var(--line); margin: 0 0 1rem; }
.card-title { font-size: .95rem; margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid .card { border: 0; border-radius: 0; }

.feature-card {
    background: var(--surface);
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
    display: flex; flex-direction: column; gap: .4rem;
}
.feature-card h3 { margin: 0; }
.feature-card p { margin: 0; color: var(--dim); font-size: .89rem; }
.feature-icon {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
    color: var(--accent); display: block; margin-bottom: .3rem;
}
.feature-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.feature-list li { display: grid; gap: .15rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list strong { font-size: .93rem; color: var(--ink); }
.feature-list span { color: var(--dim); font-size: .87rem; }

.empty-state {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(2rem, 6vw, 3.4rem) 1.5rem;
    text-align: center;
}
.empty-icon { font-family: var(--mono); font-size: 1.3rem; color: var(--dim); display: block; margin-bottom: .8rem; }

/* ----------------------------------------------------------------- forms */

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .32rem; }
.field-group { display: grid; gap: 1rem; }
.field-inline { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
label, .label {
    font-family: var(--mono);
    font-size: .67rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-2);
}
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], input[type="datetime-local"], input[type="date"],
input[type="tel"], select, textarea {
    width: 100%;
    padding: .6rem .7rem;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .94rem;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa1ac; }
input:hover, select:hover, textarea:hover { border-color: #b6bcc5; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 102, 255, .18);
}
/* Writing uses the text face, not the technical/mono one. */
textarea { min-height: 8rem; resize: vertical; font-family: var(--sans); font-size: .94rem; line-height: 1.65; }
select {
    appearance: none;
    padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--accent); vertical-align: -2px; margin-right: .4rem; }
.check { display: flex; align-items: start; gap: .1rem; font-size: .87rem; }
.check label { font-family: var(--sans); font-size: .87rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.hint { color: var(--dim); font-size: .78rem; margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding-top: .3rem; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline-form select { width: auto; min-width: 9rem; }
.input-with-action { display: flex; }
.input-with-action input { border-right: 0; }
.input-action {
    border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
    padding: 0 .8rem; font-family: var(--mono); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
}
.input-action:hover { color: var(--ink); border-color: var(--ink); }
.slug-field { display: flex; align-items: stretch; }
.slug-prefix {
    display: flex; align-items: center; padding: 0 .6rem;
    border: 1px solid var(--line-2); border-right: 0;
    background: var(--surface-2); color: var(--dim);
    font-family: var(--mono); font-size: .82rem;
}
.slug-field input { border-left: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.filters-actions { display: flex; gap: .5rem; align-items: end; margin-left: auto; }

/* ----------------------------------------------------------------- table */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th {
    text-align: left;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 400;
    background: var(--bg-soft);
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table td { padding: .8rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }
.table-sub { display: block; color: var(--dim); font-size: .74rem; margin-top: .1rem; }
.table-title { color: var(--ink); font-weight: 500; }
.td-actions, .th-actions { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- alerts
   Sober by design: no colour fill, no tinted background. One hairline, one
   heavier left rule, a small mono label and room to breathe. */

.alert {
    position: relative;
    border: 1px solid var(--line);
    border-left: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.05rem 1.15rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 0 0 1.6rem;
}
.alert > strong:first-child,
.alert > .alert-label {
    display: block;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .45rem;
    font-weight: 500;
}
.alert-list { margin: .35rem 0 0; padding-left: 1.1rem; list-style: disc; }
.alert-list li { margin-bottom: .2rem; }
.alert-info, .alert-success, .alert-warning, .alert-error, .alert-danger {
    border-left-color: var(--ink);
    background: var(--surface);
}
.alert code { font-family: var(--mono); font-size: .82em; background: var(--surface-2); padding: .08em .35em; border-radius: 2px; color: var(--ink); }
.alert strong { display: block; margin-bottom: .35rem; color: var(--ink); }

/* ------------------------------------------------------------ site chrome */

.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex; align-items: center; gap: 1.4rem; height: 66px;
    /* One size for every item in the top navigation: links, language picker and
       the download button. Anything smaller reads as a different widget. */
    --nav-size: .84rem;
}

.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-family: var(--display); }
.brand:hover { color: var(--ink); }
.brand-mark { display: inline-flex; color: var(--ink); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.brand-sub { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

.site-nav { display: flex; align-items: center; gap: 1.3rem; margin-left: auto; }
.site-nav a {
    font-size: var(--nav-size);
    line-height: 1.2;
    color: var(--ink-2);
    padding: .35rem 0;
    border-bottom: 1.5px solid transparent;
    white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-active { color: var(--ink); border-bottom-color: var(--ink); }
/* Duplicated language links for the mobile drawer, hidden on desktop. */
.nav-lang { display: none; }

.header-tools { display: flex; align-items: center; gap: .55rem; }

/* Search is an icon, not a word: it is an action, not a section. */
.nav-search {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
}
.nav-search:hover { border-color: var(--ink); color: var(--ink); }
.nav-search svg { display: block; }

.lang-menu { position: relative; }
.lang-menu summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    height: 34px; padding: 0 .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--sans); font-size: var(--nav-size); letter-spacing: 0;
    color: var(--ink-2);
    background: var(--surface);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: "▾"; font-size: .58rem; color: var(--dim); }
.lang-menu summary:hover { border-color: var(--ink); color: var(--ink); }
.lang-menu[open] summary { border-color: var(--ink); color: var(--ink); }
.lang-menu ul {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 200px; margin: 0; padding: .3rem;
    list-style: none;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(11, 13, 16, .1);
    z-index: 50;
}
.lang-menu ul a {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .45rem .55rem; font-size: var(--nav-size); color: var(--ink-2); border-radius: var(--radius);
}
.lang-menu ul a span { font-size: .72em; letter-spacing: .06em; color: var(--dim); }
.lang-menu ul a:hover { background: var(--surface-2); color: var(--ink); }
.lang-menu ul a span { font-family: var(--mono); font-size: .66rem; color: var(--dim); letter-spacing: .06em; }
.lang-menu ul a.is-active { color: var(--ink); background: var(--accent-soft); }
.lang-menu ul a.is-active span { color: var(--accent); }

/* The one filled button in the header: same size as every link next to it. */
.btn-nav {
    height: 34px;
    padding: 0 .9rem;
    font-size: var(--nav-size);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.lang-switch a { padding: .28rem .45rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--dim); }
.lang-switch a:hover { color: var(--ink); background: var(--surface-2); }
.lang-switch a.is-active { color: #fff; background: var(--accent); }

.nav-toggle {
    display: none;
    background: none; border: 0; border-radius: 0;
    color: var(--ink); padding: .3rem .1rem; cursor: pointer;
    font: inherit; font-size: var(--nav-size);
    align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; display: block; }
.nav-toggle rect { transition: transform .2s ease, opacity .2s ease; transform-origin: center; }
.nav-toggle[aria-expanded="true"] rect:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] rect:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] rect:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-toggle:hover { color: var(--accent); }

.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: clamp(36px, 5vw, 64px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); }
.footer-title { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 .8rem; font-weight: 400; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .87rem; }
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--ink); }
.brand-footer { margin-bottom: .7rem; color: var(--ink); }
.footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
    padding: 1.1rem var(--gutter);
    border-top: 1px solid var(--line);
    max-width: 1200px; margin: 0 auto;
    color: var(--dim);
}
.footer-bottom p { margin: 0; }
/* The vendor credit: two names that carry the product, in ink so they are read
   before the runtime details around them. */
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.footer-credit { color: var(--ink); font-weight: 500; }
/* Decorative dot, quieter than the label but still visible on the tinted
   footer: pure line colour disappears against #f7f8fa. */
.footer-sep { color: var(--dim); opacity: .55; }
.footer-disclosure { border-top: 1px solid var(--line); padding: .9rem var(--gutter); max-width: 1200px; margin: 0 auto; }
.ai-line { margin: 0; font-size: .84rem; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ai-line a { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.ai-star { color: var(--accent); font-size: .95em; line-height: 1; }
.linklike {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.linklike:hover { color: var(--accent-dark); }

/* ---------------------------------------------------------- AI disclosure */

.ai-mark {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-dark);
    border: 1px solid var(--accent-line); background: var(--accent-soft);
    padding: .12rem .42rem; border-radius: 999px;
    white-space: nowrap;
}
.post-meta .ai-mark { margin-left: .1rem; }
.ai-note {
    margin-top: 2.4rem; padding: 1rem 1.1rem;
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    background: var(--bg-soft); border-radius: var(--radius);
    max-width: 70ch;
}
.ai-note-title { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.ai-note p { font-size: .88rem; color: var(--ink-2); }

/* ------------------------------------------------------- AI transparency page */

.ai-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.ai-hero h1 { margin-bottom: .5rem; }
.ai-lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--ink-2); max-width: 56ch; margin: 0; }
.ai-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ai-stat { background: var(--surface); padding: 1.1rem 1.15rem; display: grid; gap: .25rem; }
.ai-stat-value { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.ai-stat-value.small { font-family: var(--mono); font-size: .82rem; letter-spacing: 0; }
.ai-stat-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ai-answer { margin-top: 1.6rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-left: 3px solid var(--ink); background: var(--surface); border-radius: var(--radius); max-width: 72ch; }
.ai-answer p { margin: 0 0 .5rem; color: var(--ink-2); }
.ai-human { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ai-policy { border-top: 2px solid var(--ink); padding-top: 1.1rem; max-width: 72ch; }
.ai-policy-list { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .5rem; color: var(--ink-2); }
@media (max-width: 860px) {
    .ai-stats { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------- GDPR consent
   Black and white only. The banner is an inverted bar — the same ink as the
   footer band — so it reads as part of the site's structure rather than as a
   coloured widget bolted on top of it. */

.consent-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--ink);
    color: var(--on-ink);
    border-top: 1px solid var(--ink);
    box-shadow: 0 -20px 44px rgba(11, 13, 16, .22);
}
.consent-bar.is-hidden { display: none; }
/* Keep the footer reachable while the banner is on screen. */
body.consent-pending { padding-bottom: 8.5rem; }
@media (max-width: 760px) {
    body.consent-pending { padding-bottom: 15rem; }
}
.consent-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.consent-copy { max-width: 58ch; }
.consent-kicker {
    margin: 0 0 .25rem;
    font-family: var(--mono); font-size: .58rem; letter-spacing: .2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-ink) 55%, transparent);
}
.consent-copy h2 {
    font-size: 1rem; margin: 0 0 .25rem; letter-spacing: -.02em;
    color: var(--on-ink);
}
.consent-copy p { margin: 0; font-size: .84rem; line-height: 1.5; color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.consent-copy a { color: var(--on-ink); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.consent-actions form { margin: 0; }

/* Buttons in the bar: no accent, no shadow, 1px rules. */
.consent-btn {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: .4rem;
    height: 34px; padding: 0 .85rem;
    font: inherit; font-size: .8rem; line-height: 1;
    background: transparent;
    color: var(--on-ink);
    border: 1px solid color-mix(in srgb, var(--on-ink) 42%, transparent);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.consent-btn:hover { border-color: var(--on-ink); background: color-mix(in srgb, var(--on-ink) 10%, transparent); }
.consent-btn-solid { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); font-weight: 600; }
.consent-btn-solid:hover { background: color-mix(in srgb, var(--on-ink) 84%, transparent); color: var(--ink); }
.consent-btn-quiet { border-color: transparent; color: color-mix(in srgb, var(--on-ink) 74%, transparent); }
.consent-btn-quiet:hover { color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 42%, transparent); }

/* In the dialog the same buttons sit on white, so they invert. */
.consent-btn-line { border-color: var(--line-2); color: var(--ink-2); }
.consent-btn-line:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.consent-dialog .consent-btn-solid { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.consent-dialog .consent-btn-solid:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }

.consent-dialog {
    width: min(560px, calc(100vw - 2rem));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: 0 24px 60px rgba(11, 13, 16, .22);
}
.consent-dialog::backdrop { background: rgba(11, 13, 16, .52); }
.consent-dialog form { margin: 0; }
.consent-dialog-head { padding: 1.2rem 1.3rem .9rem; border-bottom: 1px solid var(--line); }
.consent-dialog-head h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.consent-dialog-head p { margin: 0; font-size: .86rem; color: var(--dim); }
.consent-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.consent-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.3rem; border-bottom: 1px solid var(--line-soft);
}
.consent-item h3 { font-size: .9rem; margin: 0 0 .15rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.consent-item p { margin: 0; font-size: .82rem; color: var(--dim); }
.consent-state { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; padding-top: .15rem; }
.consent-dialog-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
    padding: 1rem 1.3rem; background: var(--bg-soft); border-top: 1px solid var(--line);
}
.consent-policy-link { font-size: .8rem; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.consent-dialog-buttons { display: flex; gap: .5rem; }

.switch { position: relative; display: inline-flex; flex: none; width: 40px; height: 22px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
    position: absolute; inset: 0; border-radius: 999px;
    background: #d7dbe1; border: 1px solid #c8cdd5;
    transition: background .15s ease, border-color .15s ease;
}
.switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--surface); box-shadow: 0 1px 2px rgba(11, 13, 16, .25);
    transition: transform .15s ease;
}
/* Black, not accent: a consent toggle is not a place for brand colour. */
.switch input:checked + .switch-track { background: var(--ink); border-color: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 760px) {
    .consent-actions { width: 100%; }
    .consent-actions form { flex: 1 1 auto; }
    .consent-actions .consent-btn { width: 100%; }
}

/* --------------------------------------------------------------- content */

.prose { font-size: 1rem; color: var(--ink-2); max-width: 70ch; }
.prose h2 { margin-top: 2em; font-size: 1.35rem; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.prose h3 { margin-top: 1.7em; }
.prose p { margin: 0 0 1.1em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.5em 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--accent); color: var(--ink-2); font-style: normal; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border-radius: 2px; padding: .1em .35em; color: var(--ink); overflow-wrap: anywhere; }
.prose pre { background: #0b0d10; border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; color: #e8eaed; }
.prose img { border: 1px solid var(--line); border-radius: var(--radius); margin: 1.5em 0; }
/* A documentation table is often wider than a phone: display:block makes the
   table itself the scroll container, so the page never widens. */
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9rem; margin: 1.5em 0; }
.prose table > * { width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .65rem; text-align: left; }
.prose th { background: var(--bg-soft); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.prose hr { margin: 2.2em 0; }

.article-inner { max-width: 760px; margin: 0 auto; padding: clamp(36px, 6vw, 76px) var(--gutter) clamp(44px, 6vw, 80px); }
.article-head { margin-bottom: clamp(24px, 4vw, 36px); }
.article-head h1 { margin-bottom: .45rem; }
.article-lead { font-size: 1.05rem; color: var(--ink-2); max-width: 60ch; }
.article-meta {
    display: flex; flex-wrap: wrap; gap: .35rem 1.2rem;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dim);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--line);
    padding: .6rem 0; margin-top: 1.3rem;
}
.article-cover { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1.8rem; }
.article-body { margin-top: 2.2rem; }
.article-foot {
    margin-top: 2.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
}

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post-card { background: var(--surface); display: flex; flex-direction: column; transition: background .15s ease; }
.post-card:hover { background: var(--hover); }
.post-cover { border-bottom: 1px solid var(--line); aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.post-card-body h2, .post-card-body h3 { font-size: 1.02rem; margin: 0; }
.post-card-body h2 a, .post-card-body h3 a { color: var(--ink); }
.post-card-body p { margin: 0; color: var(--dim); font-size: .87rem; }
.post-meta { font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.read-more { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-top: auto; padding-top: .5rem; }

.pagination { display: flex; gap: .3rem; margin-top: 2rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: .42rem .65rem; border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--mono); font-size: .74rem; color: var(--ink-2); background: var(--surface);
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .is-active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pagination-pad { margin-top: 1.8rem; }

.search-form { display: flex; gap: .5rem; max-width: 540px; margin-bottom: 2rem; }
.search-results { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.search-result { background: var(--surface); padding: 1.1rem; }
.search-result h2, .search-result h3 { font-size: 1rem; margin: 0 0 .25rem; }
.search-result h2 a, .search-result h3 a { color: var(--ink); }
.search-result p { margin: 0; color: var(--dim); font-size: .87rem; }

.page-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: .4rem; }
.page-hero p { color: var(--dim); max-width: 60ch; margin: 0; }
.page-actions { display: flex; gap: .6rem; margin-top: 1.3rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ live */

.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.live-card { background: var(--surface); display: flex; flex-direction: column; }
.live-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--dim); font-family: var(--mono); }
.live-card-media img, .live-card-media video { width: 100%; height: 100%; object-fit: cover; }
.live-card-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.live-card-body h2, .live-card-body h3 { font-size: 1rem; margin: 0; }
.live-card-body h2 a, .live-card-body h3 a { color: var(--ink); }
.live-duration { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--dim); }
.live-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--danger); }
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); display: inline-block; }
.live-player { border: 1px solid var(--line); border-radius: var(--radius); background: #0b0d10; overflow: hidden; }
.live-player video, .live-player audio { width: 100%; display: block; }
.live-embed { margin: 2.2rem 0; }
.live-article { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.1rem; margin-bottom: 1rem; }
.live-linked { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.attached-live { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 2.2rem; }
.live-audio-mark { font-family: var(--mono); color: var(--dim); }
.podcast-shell { display: grid; grid-template-columns: 88px 1fr; gap: 1.1rem; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.1rem; }
.podcast-art { aspect-ratio: 1; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--accent); }

/* ---------------------------------------------------------------- download */

.dl-hero {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
    margin-top: clamp(20px, 3vw, 30px);
}
.dl-hero .btn svg { flex: none; }
.dl-hero-meta {
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .02em; color: var(--dim);
}
.dl-hero-meta code { font-size: .72rem; color: var(--ink-2); }

.dl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(20px, 3.4vw, 48px);
    align-items: start;
}
.dl-block h2, .dl-card h2 {
    font-size: .72rem; font-family: var(--mono); font-weight: 400;
    letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
    margin: 0 0 .9rem;
}
.dl-card h2:not(:first-child) { margin-top: 1.6rem; }
.dl-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.dl-steps li { background: var(--surface); padding: 1rem 1.15rem; }
.dl-steps strong { display: block; color: var(--ink); font-size: .95rem; letter-spacing: -.02em; margin-bottom: .18rem; }
.dl-steps p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--dim); }
.dl-more { margin: 1rem 0 0; font-size: .84rem; }
.dl-more a { color: var(--ink); border-bottom: 1px solid var(--line-2); }

.dl-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-soft);
    padding: 1.15rem 1.25rem 1.3rem;
}
.dl-req { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .85rem; color: var(--ink-2); }
.dl-req li { display: grid; grid-template-columns: .9rem minmax(0, 1fr); gap: .45rem; }
.dl-req li::before { content: "✓"; color: var(--ink); font-size: .76rem; line-height: 1.5; }
.dl-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .82rem; color: var(--dim); }
.dl-tree code { color: var(--ink); }
.dl-checksum { margin: 0 0 .4rem; }
.dl-checksum code {
    display: block; word-break: break-all;
    font-size: .68rem; line-height: 1.5; color: var(--ink-2);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .5rem .6rem;
}
.dl-note { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--dim); }

.dl-versions { margin-top: clamp(32px, 5vw, 60px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.dl-versions h2 { font-size: 1.25rem; letter-spacing: -.025em; margin: 0 0 .3rem; }
.dl-version-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.dl-version { background: var(--surface); padding: 1rem 1.15rem; display: grid; gap: .55rem; }
.dl-version.is-current { box-shadow: inset 3px 0 0 var(--ink); }
.dl-version-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; }
.dl-version-num { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.dl-version-head time { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.dl-chip {
    font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--ink); border-radius: 2px; padding: .1rem .34rem; color: var(--ink);
}
.dl-version-notes { margin: 0; padding-left: 1.05rem; display: grid; gap: .22rem; font-size: .86rem; color: var(--dim); }
.dl-version .btn { justify-self: start; }

/* -------------------------------------------------- catalogue & docs */

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.cat-grid-plugins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); overflow: hidden;
    display: flex; flex-direction: column;
}
.cat-body { padding: 1rem 1.05rem 1.15rem; display: grid; gap: .45rem; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cat-head h2 { margin: 0; font-size: 1.02rem; letter-spacing: -.025em; }
.cat-body p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--dim); }
.cat-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--dim);
}
.cat-active {
    margin-left: auto;
    color: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
    padding: .05rem .3rem; font-size: .58rem;
}
.cat-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.cat-card-plugin { padding-top: 1rem; }
.plugin-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0 1.05rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-soft); color: var(--ink);
}
.cat-caps { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cat-caps code {
    font-size: .66rem; color: var(--ink-2);
    border: 1px solid var(--line); border-radius: 2px; padding: .1rem .32rem;
}

.cat-note { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(20px, 3vw, 30px); border-top: 1px solid var(--line); }
.cat-note h2 { font-size: 1.15rem; letter-spacing: -.025em; margin: 0 0 .35rem; }
.cat-note p { margin: 0 0 .9rem; max-width: 68ch; color: var(--ink-2); font-size: .92rem; }
.cat-tints { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .84rem; color: var(--ink-2); }
.cat-tints li { display: inline-flex; align-items: center; gap: .45rem; }
.tint-dot { width: .8rem; height: .8rem; border-radius: 50%; display: block; border: 1px solid rgba(11, 13, 16, .12); }
.tint-dot.tint-azure { background: #0a66ff; }
.tint-dot.tint-ink { background: #0b0d10; }
.tint-dot.tint-emerald { background: #00a06b; }
.tint-dot.tint-violet { background: #6a3cff; }
.cat-hooks { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .25rem .8rem; font-size: .8rem; }
.cat-hooks li { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--line-soft); padding: .25rem 0; color: var(--ink-2); }
.cat-hooks span { font-family: var(--mono); color: var(--dim); }
.cat-cta {
    margin-top: clamp(26px, 4vw, 44px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
    padding: clamp(18px, 2.6vw, 28px);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-soft);
}
.cat-cta h2 { margin: 0 0 .25rem; font-size: 1.1rem; letter-spacing: -.025em; }
.cat-cta p { margin: 0; max-width: 60ch; font-size: .88rem; color: var(--dim); }

.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(20px, 3.6vw, 56px); align-items: start; }
.docs-toc { position: sticky; top: 84px; }
.docs-toc-title { margin: 0 0 .6rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.docs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; counter-reset: docs; }
.docs-toc li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; counter-increment: docs; }
.docs-toc a {
    color: var(--ink-2); font-size: .86rem;
    padding: .3rem 0; border-bottom: 1px solid var(--line-soft);
    flex: 1 1 auto;
}
.docs-toc a::before { content: counter(docs, decimal-leading-zero) " "; font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.docs-toc a:hover { color: var(--ink); }
.docs-words { font-family: var(--mono); font-size: .62rem; color: var(--dim); }
.docs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 64px); min-width: 0; }
.docs-chapter { scroll-margin-top: 90px; }
.docs-chapter-head { padding-bottom: .9rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--ink); }
.docs-chapter-head h2 { margin: .2rem 0 .3rem; font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.03em; }
.docs-chapter-head h2 a { color: inherit; text-decoration: none; }
.docs-chapter-head h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The chapter also lives on its own page: the marker makes that addressable. */
.docs-anchor { color: var(--dim); font-weight: 400; margin-left: .4rem; opacity: 0; transition: opacity .15s ease; }
.docs-chapter-head h2 a:hover .docs-anchor, .docs-chapter-head h2 a:focus-visible .docs-anchor { opacity: 1; }
.docs-summary { margin: 0; color: var(--dim); font-size: .9rem; max-width: 62ch; }
.docs-meta { margin: .6rem 0 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.docs-chapter-standalone { max-width: 76ch; }

/* --------------------------------------------------------- responsive */

@media (max-width: 1024px) {
    .dl-grid { grid-template-columns: 1fr; }
    /* minmax(0, 1fr), not 1fr: a code block must scroll inside the column
       instead of widening the whole page on a phone. */
    .docs-layout { grid-template-columns: minmax(0, 1fr); }
    .docs-toc { position: static; }
    .cat-grid, .cat-grid-plugins { grid-template-columns: 1fr; }
    .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-grid, .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .header-inner { height: 58px; gap: .7rem; }
    .site-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        padding: .4rem var(--gutter) 1rem;
        display: none;
        box-shadow: 0 16px 24px rgba(11, 13, 16, .06);
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
    .site-nav a.is-active { border-bottom-color: var(--line-soft); color: var(--ink); }
    .header-tools { order: 2; margin-left: auto; gap: .4rem; }
    .nav-toggle { order: 3; display: inline-flex; }
    .brand { order: 1; }
    /* Language moves into the drawer on small screens; search and the download
       button stay, because they are the two actions that matter here. */
    .lang-menu { display: none; }
    .nav-lang {
        display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
        padding-top: .8rem; margin-top: .4rem;
        border-top: 1px solid var(--line);
    }
    .nav-lang-label {
        font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
        text-transform: uppercase; color: var(--dim); margin-right: .3rem;
    }
    .site-nav .nav-lang a {
        padding: .3rem .55rem; border: 1px solid var(--line); border-radius: var(--radius);
        font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
    }
    .site-nav .nav-lang a.is-active { border-color: var(--ink); color: var(--ink); }
    .card-grid, .card-grid-4, .post-grid, .live-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .article-inner { padding-left: var(--gutter); padding-right: var(--gutter); }
    .filters-actions { margin-left: 0; }
    .podcast-shell { grid-template-columns: 64px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}