/* ============================================================================
   Cardinal — design system
   ----------------------------------------------------------------------------
   Cartographic/editorial, not SaaS. The compass rose is the organising motif:
   north is cardinal red, the other three points amber. Everything else is
   paper, ink and hairlines.

   No webfonts and no third-party requests: the display face is the system
   book serif (Iowan Old Style on Apple, Georgia everywhere else), the body
   face is the system UI sans. That keeps the privacy page honest — the site
   loads nothing from anyone else's server.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* Brand — fixed values, identical in both themes */
    --cardinal-red: #b21f2d;
    --cardinal-amber: #c6902f;

    /* Surfaces & ink (light) */
    --paper: #faf8f5;
    --paper-raised: #ffffff;
    --paper-sunken: #f2eee8;
    --ink: #1a1712;
    /* The ramp is contrast-checked against the *darkest* light surface it sits
       on (--paper-sunken, the colophon): 7.7:1 and 4.9:1. The earlier, prettier
       #8d867c came in at 3.1:1 and failed WCAG AA on 14 elements. */
    --ink-muted: #574f45;
    --ink-faint: #6b665d;
    --line: rgba(26, 23, 18, 0.14);
    --line-strong: rgba(26, 23, 18, 0.28);

    /* Accents, tuned per theme for contrast */
    --accent: #b21f2d;          /* 6.4:1 on paper */
    --accent-hover: #8d1824;
    --accent-soft: rgba(178, 31, 45, 0.09);
    --amber: #c6902f;           /* ornament only in light mode */
    --amber-text: #8a6318;      /* 5.1:1 on paper — amber as *text* */
    --amber-soft: rgba(198, 144, 47, 0.13);

    --on-accent: #fffaf7;

    /* Type */
    /* Iowan Old Style on Apple, Georgia on Windows, Charter on Linux — three
       book serifs of the same temperature. No webfont is downloaded: the point
       of the tail is that a Linux visitor lands on Charter rather than on the
       browser's default Times. */
    --font-display: "Iowan Old Style", Georgia, Charter, "Bitstream Charter",
                    "Palatino Linotype", "Liberation Serif", serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    /* Spacing scale (4px base) */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px;  --s-10: 128px;

    /* Radii — print-like, restrained */
    --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px; --r-pill: 999px;

    /* Elevation — one light source, low opacity */
    --shadow-sm: 0 1px 2px rgba(26, 23, 18, 0.06);
    --shadow-md: 0 2px 4px rgba(26, 23, 18, 0.05),
                 0 12px 28px -12px rgba(26, 23, 18, 0.16);

    /* Motion */
    --dur-fast: 120ms;
    --dur: 220ms;
    --ease: cubic-bezier(0.2, 0, 0.15, 1);

    /* Layout */
    --measure: 66ch;
    --page: 1200px;
    --gutter: clamp(20px, 5vw, 64px);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --paper: #141210;
    --paper-raised: #1c1917;
    --paper-sunken: #100e0c;
    --ink: #f0ebe2;
    --ink-muted: #a49d92;
    --ink-faint: #8b8479;
    --line: rgba(240, 235, 226, 0.14);
    --line-strong: rgba(240, 235, 226, 0.3);

    --accent: #e0616b;          /* 5.5:1 on #141210 */
    --accent-hover: #ef7d85;
    --accent-soft: rgba(224, 97, 107, 0.14);
    --amber: #e0b25a;
    --amber-text: #e0b25a;      /* 9.6:1 — safe as text on dark */
    --amber-soft: rgba(224, 178, 90, 0.14);

    --on-accent: #1a0d0e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35),
                 0 12px 28px -12px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* the sticky header is 64px tall; keep anchor targets clear of it */
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* A stray wide child must scroll inside its own box, never the page. */
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a {
    color: inherit;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease),
                text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* One visible focus treatment for the whole site. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--amber-soft); color: var(--ink); }

.skip-link {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--r-md);
    font-weight: 600;
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--on-accent); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- layout --- */
.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(var(--s-8), 11vw, var(--s-10)); }
.section--tight { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); }
.section + .section { border-top: 1px solid var(--line); }

/* Section label: the map-legend voice — letterspaced small caps + hairline. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-5);
}
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.lede {
    font-size: clamp(18px, 2.1vw, 21px);
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: var(--measure);
}

/* Section heading: one size for every "chapter" opener on the site. */
.section-title {
    font-size: clamp(28px, 4.4vw, 46px);
    max-width: 20ch;
}
.section-title--narrow { max-width: 17ch; }

.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-8 { margin-top: var(--s-8); }
.muted { color: var(--ink-muted); }
.muted + .muted { margin-top: var(--s-4); }
/* A hairline that opens a closing block, e.g. the "next step" note under a list. */
.rule-top { padding-top: var(--s-7); border-top: 1px solid var(--line); }

/* ------------------------------------------------------------- buttons --- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 var(--s-5);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: 600 16px/1 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:hover { color: var(--btn-fg); border-color: var(--ink-faint); }
.btn:active { transform: translateY(1px); }

.btn--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--on-accent);
    --btn-bd: var(--accent);
}
.btn--primary:hover {
    --btn-bg: var(--accent-hover);
    --btn-bd: var(--accent-hover);
    color: var(--on-accent);
}

/* Disabled is a *state we designed*, not a broken button: it still reads as a
   button, states plainly that it is not ready, and is removed from the tab
   order because there is nothing to activate. */
.btn[aria-disabled="true"],
.btn:disabled {
    --btn-bg: transparent;
    --btn-fg: var(--ink-faint);
    --btn-bd: var(--line);
    cursor: not-allowed;
    box-shadow: none;
}
.btn[aria-disabled="true"]:hover,
.btn:disabled:hover { transform: none; border-color: var(--line); }

.btn__soon {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: var(--r-pill);
    background: var(--amber-soft);
    color: var(--amber-text);
}

/* Text link with a moving arrow — the one live action in the hero. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
    min-height: 44px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(4px); }

/* --------------------------------------------------------------- chips --- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px var(--s-3) 6px var(--s-2);
    border: 1px solid var(--amber);
    border-radius: var(--r-pill);
    background: var(--amber-soft);
    color: var(--amber-text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
}
.chip__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--amber);
    flex: none;
}
/* The "in construction" beacon. Slow, once every 3s — a signal, not a toy. */
@media (prefers-reduced-motion: no-preference) {
    .chip__dot { animation: beacon 3s var(--ease) infinite; }
}
@keyframes beacon {
    0%, 70%, 100% { opacity: 1; transform: scale(1); }
    35%           { opacity: 0.35; transform: scale(0.82); }
}

/* ---------------------------------------------------------- compass art -- */
.rose { display: block; }
.rose__north { fill: var(--cardinal-red); }
.rose__point { fill: var(--cardinal-amber); }
.rose__ring  { stroke: var(--line-strong); fill: none; }
.rose__tick  { stroke: var(--line-strong); }
.rose__label {
    fill: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.12em;
}
:root[data-theme="dark"] .rose__north { fill: #e0616b; }
:root[data-theme="dark"] .rose__point { fill: #e0b25a; }

/* -------------------------------------------------------------- header --- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
}
.masthead[data-scrolled="true"] { border-bottom-color: var(--line); }

.masthead__bar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    height: 64px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--ink);
    margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav__link {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--paper-sunken); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 3px;
    background: var(--accent);
    border-radius: var(--r-pill);
}

.tools {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-left: var(--s-3);
    margin-left: var(--s-2);
    border-left: 1px solid var(--line);
}

/* Icon buttons: 40px visual, 44px hit area via padding on the parent row. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--paper-sunken); }

/* Language switch: two letters, current one marked. */
.langs {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}
.langs__item {
    padding: 0 var(--s-3);
    height: 34px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-faint);
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.langs__item:hover { color: var(--ink); background: var(--paper-sunken); }
.langs__item[aria-current="true"] { color: var(--ink); background: var(--paper-sunken); }

.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }

.burger { display: none; }

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 64px 0 auto 0;
    z-index: 49;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--s-4) var(--gutter) var(--s-6);
    display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer__nav { display: flex; flex-direction: column; gap: var(--s-1); }
.drawer__link {
    display: block;
    padding: var(--s-3) var(--s-2);
    border-radius: var(--r-md);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.drawer__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-5);
}

/* ---------------------------------------------------------------- hero --- */
.hero { padding-block: clamp(var(--s-8), 10vw, 120px) clamp(var(--s-8), 9vw, var(--s-9)); }

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(var(--s-6), 6vw, var(--s-9));
    align-items: center;
}

.hero__title {
    font-size: clamp(56px, 12vw, 128px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: var(--s-5) 0 var(--s-5);
}

.hero__claim {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.6vw, 28px);
    line-height: 1.38;
    /* 22ch broke the red phrase across two lines and left "should be." alone
       on a fourth. 32ch gives three full lines at every size in the clamp. */
    max-width: 32ch;
    margin-bottom: var(--s-6);
}
.hero__claim b { font-weight: 600; color: var(--accent); }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
}

.hero__art { display: flex; justify-content: center; }
.hero__art .rose { width: min(100%, 380px); }

/* Facts rail under the hero — the licence line, in map-legend voice. */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    padding-block: var(--s-5);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.facts__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.facts__item::before {
    content: "";
    width: 5px; height: 5px;
    background: var(--amber);
    transform: rotate(45deg);
    flex: none;
}

/* ------------------------------------------------------------- pillars --- */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
    margin-top: var(--s-7);
}
/* Hairline separators instead of floating cards — closer to a printed page. */
.pillar { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.pillar:nth-child(2), .pillar:nth-child(3) { border-top-color: var(--line-strong); }

.pillar__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.pillar__idx {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
}
.pillar__rose { width: 22px; flex: none; }
.pillar__title { font-size: clamp(21px, 2.2vw, 25px); margin-bottom: var(--s-3); }
.pillar__body { color: var(--ink-muted); font-size: 16px; }

/* ------------------------------------------------- interface study (app) -- */
.study { margin-top: var(--s-7); }

.window {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--paper-raised);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.window__chrome {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line);
    background: var(--paper-sunken);
}
.window__dots { display: flex; gap: 6px; }
.window__dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--line-strong);
}
.window__dots i:first-child { background: var(--accent); opacity: 0.7; }
.window__title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

.window__body {
    display: grid;
    grid-template-columns: 168px minmax(0, 260px) minmax(0, 1fr);
    min-height: 380px;
}
.window__col + .window__col { border-left: 1px solid var(--line); }
.window__col { padding: var(--s-4); min-width: 0; }

.folders { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.folders li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 7px var(--s-3);
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--ink-muted);
}
.folders li[data-active="true"] {
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
}
.folders b { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-faint); }
/* On the selected row the tinted background eats the faint ink — in dark mode
   the unread count dropped under 4.5:1. One step up on that row only. */
.folders li[data-active="true"] b { color: var(--ink-muted); }

.threads { list-style: none; display: flex; flex-direction: column; }
.threads li {
    padding: var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.threads li[data-active="true"] { background: var(--paper-sunken); box-shadow: inset 2px 0 0 var(--amber); }
.threads__from {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.threads__from span { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink-faint); flex: none; }
.threads__subject { font-size: 14px; margin-bottom: 2px; }
.threads__preview {
    font-size: 13px;
    color: var(--ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reader__subject { font-size: 22px; margin-bottom: var(--s-3); }
.reader__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s-4);
}
.reader__body { font-size: 15.5px; line-height: 1.65; color: var(--ink-muted); max-width: 52ch; }
.reader__body p + p { margin-top: var(--s-4); }

.caption {
    margin-top: var(--s-4);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    display: flex;
    gap: var(--s-2);
    align-items: baseline;
}
.caption::before { content: "†"; color: var(--amber-text); flex: none; }

/* ---------------------------------------------------------- manifesto  --- */
.manifesto {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
}
:root[data-theme="dark"] .manifesto { background: var(--paper-sunken); color: var(--ink); }

.manifesto__quote {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: clamp(30px, 5.6vw, 62px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    max-width: 17ch;
}
.manifesto__quote em { font-style: italic; color: var(--cardinal-amber); }
.manifesto__body {
    position: relative;
    z-index: 1;
    margin-top: var(--s-6);
    max-width: 54ch;
    font-size: 17px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--paper) 74%, transparent);
}
:root[data-theme="dark"] .manifesto__body { color: var(--ink-muted); }
.manifesto .eyebrow { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.manifesto .eyebrow::after { background: color-mix(in srgb, var(--paper) 22%, transparent); }
:root[data-theme="dark"] .manifesto .eyebrow { color: var(--ink-faint); }
:root[data-theme="dark"] .manifesto .eyebrow::after { background: var(--line); }

/* Oversized rose bleeding off the right edge — texture, not decoration. */
.manifesto__mark {
    position: absolute;
    right: -110px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    opacity: 0.13;
    pointer-events: none;
}

/* ------------------------------------------------------------- support --- */
.support__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(var(--s-6), 6vw, var(--s-8));
    align-items: start;
    margin-top: var(--s-6);
}
.stack { display: flex; flex-direction: column; gap: var(--s-4); }

.no-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.no-list li {
    display: flex;
    gap: var(--s-3);
    align-items: baseline;
    color: var(--ink-muted);
}
.no-list li::before {
    content: "—";
    color: var(--accent);
    font-family: var(--font-mono);
    flex: none;
}

.panel {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper-raised);
    padding: var(--s-6);
    box-shadow: var(--shadow-sm);
}
.panel__title { font-size: 21px; margin-bottom: var(--s-3); }
.panel__actions { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); }
.panel__actions .btn { width: 100%; }
.panel__note { font-size: 14px; color: var(--ink-faint); line-height: 1.6; }

/* --------------------------------------------------------------- prose --- */
.prose { max-width: var(--measure); }
.prose h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin-top: var(--s-8);
    margin-bottom: var(--s-4);
    scroll-margin-top: 88px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-size: clamp(19px, 2.2vw, 22px);
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
}
.prose p, .prose ul, .prose ol { margin-bottom: var(--s-4); color: var(--ink-muted); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--amber-text); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); }
.prose code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    padding: 2px 5px;
    border-radius: var(--r-sm);
    background: var(--paper-sunken);
    border: 1px solid var(--line);
    overflow-wrap: anywhere;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-bottom: var(--s-4);
}
.prose th, .prose td {
    text-align: left;
    padding: var(--s-3);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.prose th { font-weight: 600; color: var(--ink); }
.prose td { color: var(--ink-muted); }
/* Wide tables scroll inside their own box — the page never does. */
.table-scroll { overflow-x: auto; margin-bottom: var(--s-4); }
.table-scroll table { margin-bottom: 0; min-width: 460px; }
/* The table already scrolls, so a cookie name has no reason to break as
   "django_l / anguage" in the narrow first column. */
.table-scroll td code { white-space: nowrap; }

.page-head { padding-block: clamp(var(--s-7), 9vw, var(--s-9)) var(--s-6); }
.page-head h1 { font-size: clamp(38px, 6.5vw, 64px); letter-spacing: -0.03em; }
.page-head .lede { margin-top: var(--s-4); }
.page-head__meta {
    margin-top: var(--s-5);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Table of contents rail on long legal pages */
.doc {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(var(--s-6), 5vw, var(--s-8));
    align-items: start;
}
/* Grid children default to min-width:auto, so the 460px min-width of the legal
   tables pushed the whole track — and the page — past the viewport at 390px.
   This is the fix; the tables still scroll inside .table-scroll. */
.doc > * { min-width: 0; }
.toc { position: sticky; top: 88px; }
.toc__title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-3);
}
.toc ol { list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.toc a {
    display: block;
    padding: 6px var(--s-3);
    border-left: 2px solid var(--line);
    font-size: 14px;
    color: var(--ink-muted);
    text-decoration: none;
}
.toc a:hover { border-left-color: var(--accent); color: var(--ink); }

/* ----------------------------------------------------------- changelog --- */
.releases { display: flex; flex-direction: column; gap: var(--s-7); margin-top: var(--s-6); }
.release {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}
.release:first-child { border-top: 2px solid var(--ink); }
.release__aside { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.release__version {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.release__date {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--s-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.tag--now { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.release__title { font-size: clamp(21px, 2.4vw, 26px); margin-bottom: var(--s-3); }
.release__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.release__list li { display: flex; gap: var(--s-3); align-items: baseline; color: var(--ink-muted); }
.release__list li::before {
    content: "";
    width: 6px; height: 6px;
    flex: none;
    background: var(--amber);
    transform: rotate(45deg) translateY(-1px);
}
.release__list li[data-kind="fix"]::before { background: var(--accent); }

/* Empty/holding state — used on /download while there is nothing to ship. */
.holding {
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    padding: clamp(var(--s-6), 6vw, var(--s-8));
    text-align: center;
    background: var(--paper-sunken);
}
.holding .rose { width: 72px; margin: 0 auto var(--s-5); opacity: 0.85; }
.holding__title { font-size: clamp(22px, 3vw, 28px); margin-bottom: var(--s-3); }
.holding p { color: var(--ink-muted); max-width: 48ch; margin-inline: auto; }
.holding__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
    margin-top: var(--s-6);
}

.platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-7);
}
.platform {
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper-raised);
}
.platform__name { font-size: 18px; margin-bottom: var(--s-2); }
.platform__status {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* -------------------------------------------------------------- footer --- */
.colophon {
    border-top: 1px solid var(--line);
    padding-block: var(--s-8) var(--s-6);
    background: var(--paper-sunken);
}
.colophon__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
}
.colophon__about { max-width: 38ch; color: var(--ink-muted); font-size: 15px; }
.colophon__brand { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.colophon__title {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-4);
}
.colophon__list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); font-size: 15px; }
.colophon__list a { text-decoration: none; color: var(--ink-muted); }
.colophon__list a:hover { color: var(--accent); }

.colophon__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--ink-faint);
}
.colophon__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
    .window__body { grid-template-columns: 150px minmax(0, 1fr); }
    .window__col--reader { display: none; }
}

@media (max-width: 960px) {
    .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
    .hero__art { order: -1; justify-content: flex-start; }
    .hero__art .rose { width: min(56vw, 240px); }
    .pillars { grid-template-columns: 1fr; gap: var(--s-6); }
    .support__grid { grid-template-columns: minmax(0, 1fr); }
    .doc { grid-template-columns: minmax(0, 1fr); }
    .toc { position: static; }
    .toc ol { flex-direction: row; flex-wrap: wrap; }
    .toc a { border-left: 0; border-bottom: 2px solid var(--line); }
    .colophon__grid { grid-template-columns: 1fr 1fr; }
    .colophon__about { grid-column: 1 / -1; }
    .platforms { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    /* Nav collapses into the drawer; the theme toggle stays reachable. */
    .nav, .tools .langs { display: none; }
    .burger { display: inline-flex; }
    .release { grid-template-columns: 1fr; gap: var(--s-4); }
    .release__aside { flex-direction: row; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .hero__actions .btn { width: 100%; }
    .window__body { grid-template-columns: 1fr; min-height: 0; }
    .window__col--folders { display: none; }
    .window__col + .window__col { border-left: 0; border-top: 1px solid var(--line); }
    .manifesto__mark { right: -150px; width: 320px; opacity: 0.1; }
    .colophon__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- reveal & a11y -- */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 600ms var(--ease), transform 600ms var(--ease);
    }
    .js .reveal[data-shown="true"] { opacity: 1; transform: none; }
}

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

@media print {
    .masthead, .drawer, .colophon__base, .btn { display: none !important; }
    body { background: #fff; color: #000; }
}