/**
 * main.css — vossscher-verlag.com
 *
 * Quiet Inky — the serious IT-publisher's site chrome. Dark-primary
 * with OS-follow via `light-dark()`; user-forced override via the
 * `data-theme="light|dark"` attribute. Single cadmium-orange accent.
 * Fraunces / Inter / JetBrains Mono, self-hosted. Grid as default;
 * flex reserved for inline lists (nav, button pairs, meta strips).
 *
 * Layer architecture per design.md {K0006}:
 *   @layer reset, tokens, base, layout, components, utilities;
 *
 * Visual target per design.md {K0013}: Design Spec 1
 *   (concept/spec/Templates/Voss'scher Verlag Webseite -
 *    Claude Design Vorschlag 1/).
 *
 * Copyright 2026 Voss'scher Verlag. All rights reserved.
 */

@layer reset, tokens, base, layout, components, utilities;

/* ════════════════════════════════════════════════════════
   FONT FACES — OFL, self-hosted
   ════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/fraunces-variable.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-variable.woff2") format("woff2-variations");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/jetbrains-mono-variable.woff2") format("woff2-variations");
}

/* ════════════════════════════════════════════════════════
   @layer reset
   ════════════════════════════════════════════════════════ */

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

    html, body { margin: 0; padding: 0; }

    html {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

    h1, h2, h3, h4 { text-wrap: balance; }
    p { text-wrap: pretty; }

    ul, ol { padding: 0; list-style: none; }

    img, picture, svg, video {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
    }

    button, input, select, textarea { font: inherit; color: inherit; }
}

/* ════════════════════════════════════════════════════════
   @layer tokens
   Per design.md {K0004}, {K0009}, {K0010}
   ════════════════════════════════════════════════════════ */

@layer tokens {
    :root {
        color-scheme: light dark;

        /* Type */
        --f-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
        --f-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
        --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

        /* Fluid type scale */
        --step-0:  1rem;
        --step-1:  clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
        --step-2:  clamp(1.1875rem, 1.05rem + 0.7vw,  1.4375rem);
        --step-3:  clamp(1.4375rem, 1.2rem  + 1.2vw,  1.875rem);
        --step-4:  clamp(1.875rem,  1.4rem  + 2.4vw,  2.75rem);
        --step-5:  clamp(2.5rem,    1.7rem  + 4vw,    4.25rem);
        --step-6:  clamp(3.25rem,   2rem    + 6vw,    6rem);

        /* Spacing */
        --space-1:  0.25rem;
        --space-2:  0.5rem;
        --space-3:  0.75rem;
        --space-4:  1rem;
        --space-5:  1.5rem;
        --space-6:  2rem;
        --space-7:  3rem;
        --space-8:  4.5rem;
        --space-9:  6.5rem;
        --space-10: 9rem;

        /* Layout */
        --measure:           64ch;
        --container:         72rem;    /* 1152 px */
        --container-narrow:  42rem;    /*  672 px */

        /* Breakpoints (for @container and readability; cannot be used in @media var()) */
        --bp-tablet:      560px;
        --bp-screen:      960px;
        --bp-widescreen:  1260px;

        /* Accent — the one colour the Verlag carries */
        --accent:        oklch(62% 0.14 45);
        --accent-hover:  oklch(68% 0.14 45);

        /* Functional CTAs — buy buttons only */
        --cta-amazon:        oklch(70% 0.15 55);
        --cta-amazon-hover:  oklch(76% 0.17 55);
        --cta-direct:        oklch(55% 0.11 145);
        --cta-direct-hover:  oklch(61% 0.13 145);

        /* Surfaces + ink — OS-follow via light-dark() */
        --bg:         light-dark(oklch(96% 0.008 80),   oklch(16% 0.025 260));
        --bg-elev:    light-dark(oklch(100% 0 0),       oklch(20% 0.03 260));
        --bg-sunken:  light-dark(oklch(92% 0.01 80),    oklch(13% 0.02 260));

        --text:        light-dark(oklch(20% 0.02 260),  oklch(94% 0.012 80));
        --text-muted:  light-dark(oklch(48% 0.02 260),  oklch(68% 0.02 80));
        --text-faint:  light-dark(oklch(62% 0.02 260),  oklch(52% 0.02 80));
        --rule:        light-dark(oklch(82% 0.01 260),  oklch(28% 0.02 260));
        --rule-soft:   light-dark(oklch(88% 0.01 260),  oklch(22% 0.02 260));

        --selection-bg: light-dark(oklch(62% 0.14 45 / 0.25), oklch(62% 0.14 45 / 0.35));
    }

    /* Force dark regardless of OS preference */
    [data-theme="dark"] {
        color-scheme: dark;
        --bg:         oklch(16% 0.025 260);
        --bg-elev:    oklch(20% 0.03 260);
        --bg-sunken:  oklch(13% 0.02 260);
        --text:       oklch(94% 0.012 80);
        --text-muted: oklch(68% 0.02 80);
        --text-faint: oklch(52% 0.02 80);
        --rule:       oklch(28% 0.02 260);
        --rule-soft:  oklch(22% 0.02 260);
        --selection-bg: oklch(62% 0.14 45 / 0.35);
    }

    /* Force light regardless of OS preference */
    [data-theme="light"] {
        color-scheme: light;
        --bg:         oklch(96% 0.008 80);
        --bg-elev:    oklch(100% 0 0);
        --bg-sunken:  oklch(92% 0.01 80);
        --text:       oklch(20% 0.02 260);
        --text-muted: oklch(48% 0.02 260);
        --text-faint: oklch(62% 0.02 260);
        --rule:       oklch(82% 0.01 260);
        --rule-soft:  oklch(88% 0.01 260);
        --selection-bg: oklch(62% 0.14 45 / 0.25);
    }
}

/* ════════════════════════════════════════════════════════
   @layer base
   Element defaults: body theming, type-flow, links, focus-ring
   ════════════════════════════════════════════════════════ */

@layer base {
    html { scroll-behavior: smooth; }

    body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--f-sans);
        font-size: var(--step-0);
        line-height: 1.6;
        font-feature-settings: "ss01", "cv11";
        min-block-size: 100dvh;
        transition: background-color 240ms ease, color 240ms ease;
    }

    ::selection { background: var(--selection-bg); color: var(--text); }

    h1, h2, h3, h4 {
        font-family: var(--f-serif);
        font-weight: 400;
        font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
        letter-spacing: -0.015em;
        line-height: 1.08;
        color: var(--text);
    }

    h1 { font-size: var(--step-6); letter-spacing: -0.03em; }
    h2 { font-size: var(--step-4); }
    h3 { font-size: var(--step-3); letter-spacing: -0.01em; }
    h4 { font-size: var(--step-2); letter-spacing: -0.005em; }

    p { max-inline-size: var(--measure); }

    a {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--rule);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
        transition: text-decoration-color 160ms ease, color 160ms ease;
    }
    a:hover { text-decoration-color: currentColor; }

    small { font-size: 0.825em; color: var(--text-muted); }

    hr {
        border: 0;
        border-block-start: 1px solid var(--rule);
        margin: 0;
    }

    code, kbd, samp, pre {
        font-family: var(--f-mono);
        font-size: 0.9em;
    }

    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }
}

/* ════════════════════════════════════════════════════════
   @layer layout
   Structural primitives
   ════════════════════════════════════════════════════════ */

@layer layout {
    .container {
        inline-size: 100%;
        max-inline-size: var(--container);
        margin-inline: auto;
        padding-inline: var(--space-5);
    }
    @media (min-width: 560px) { .container { padding-inline: var(--space-6); } }
    @media (min-width: 960px) { .container { padding-inline: var(--space-7); } }

    .container-narrow { max-inline-size: var(--container-narrow); }
}

/* ════════════════════════════════════════════════════════
   @layer components
   ════════════════════════════════════════════════════════ */

@layer components {

    /* ── Skip link ─────────────────────────────────────── */

    .link-skip {
        position: absolute;
        inset-block-start: calc(var(--space-10) * -1);
        inset-inline-start: var(--space-4);
        background: var(--accent);
        color: var(--bg);
        padding: var(--space-2) var(--space-4);
        text-decoration: none;
        font-family: var(--f-mono);
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        z-index: 100;
        transition: inset-block-start 120ms ease;
    }
    .link-skip:focus-visible { inset-block-start: var(--space-4); }

    /* ── Site header ───────────────────────────────────── */

    .chrome-site {
        border-block-end: 1px solid var(--rule-soft);
        background: var(--bg);
    }
    .chrome-site .container {
        display: flex;
        align-items: center;
        gap: var(--space-5);
        padding-block: var(--space-4);
        min-block-size: 72px;
    }
    .chrome-site .nav-primary { margin-inline-start: auto; }

    .brand {
        display: inline-flex;
        flex-direction: column;
        gap: 0.28rem;
        text-decoration: none;
        color: var(--text);
    }
    .brand-name {
        font-family: var(--f-serif);
        font-size: 1.0625rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.005em;
    }
    .brand-tag {
        font-family: var(--f-mono);
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .nav-primary {
        display: flex;
        align-items: center;
        gap: var(--space-6);
    }
    .nav-primary a {
        font-family: var(--f-sans);
        font-size: 0.925rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--text-muted);
        padding-block: var(--space-1);
        transition: color 160ms ease;
    }
    .nav-primary a:hover { color: var(--text); }
    .nav-primary a[aria-current="page"] {
        color: var(--text);
        position: relative;
    }
    .nav-primary a[aria-current="page"]::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: -4px;
        block-size: 1px;
        background: var(--accent);
    }

    @media (max-width: 559px) {
        .nav-primary { gap: var(--space-5); }
        .nav-primary a { font-size: 0.875rem; }
        .brand-tag { display: none; }
    }

    /* ── Chrome controls (lang-switch + theme-toggle) ─────
       Shared visual rhythm consolidated per css.md Rule 1
       (≥ 2× = shared selector). Both are mono-caps pill controls
       in the chrome row, same border weight, same padding, same
       hover signal. Min-block-size locks both to the natural
       height of .toggle-theme — driven by its 0.95rem glyph
       (block-size 1em → 0.95rem) plus the shared 0.45rem
       block-padding × 2 plus 1px border × 2 = ~1.85rem + 2px.
       Without this lock the lang-switch (0.72rem text only)
       would render visibly shorter than its sibling. */
    .lang-switch,
    .toggle-theme {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        min-block-size: calc(0.95rem + 0.9rem + 2px);
        font-family: var(--f-mono);
        font-size: 0.72rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.45rem 0.7rem;
        border: 1px solid var(--rule);
        background: transparent;
        color: var(--text);
        transition: border-color 160ms ease, color 160ms ease;
    }
    .lang-switch:hover,
    .toggle-theme:hover { border-color: var(--text); }

    /* ── Language switcher ────────────────────────────────
       Real <a> per Rule 7 — bookmarkable, right-click works, no JS.
       Href is computed at template-render time by the i18n.url CAST
       extension (see site/lib/z_cast_setup.lua) using the request
       path + slug map; chrome_site_en links to DE, chrome_site_de
       links to EN. */
    .lang-switch {
        text-decoration: none;
        justify-content: center;
    }

    /* ── Theme toggle (Part B per ticket 0003-B; design.md K0010) ──
       JS only sets [data-theme] on <html> + aria-pressed on the button
       (per css.md Rule 7). Visible glyph + label are CSS content-swap
       on [data-theme] state — the spans carry no textContent. */
    .toggle-theme {
        gap: var(--space-2);
        cursor: pointer;
    }
    .toggle-theme .toggle-glyph {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1em;
        block-size: 1em;
        font-size: 0.95rem;
        line-height: 1;
    }

    /* Stable button width — inline-grid with an invisible ::after carrying
       the WIDEST state name ("SYSTEM"); the visible ::before stacks at the
       same grid cell. Both left-aligned via text-align: start, both
       vertically centred via align-items so the label's box-centre matches
       the glyph's. Pure CSS — Rule 7. */
    .toggle-theme .toggle-label {
        display: inline-grid;
        align-items: center;
        text-align: start;
        line-height: 1;
    }
    .toggle-theme .toggle-label::before,
    .toggle-theme .toggle-label::after {
        grid-area: 1 / 1;
    }
    .toggle-theme .toggle-label::after {
        content: "SYSTEM";
        visibility: hidden;
        pointer-events: none;
    }

    /* Two-state toggle: light or dark, no system mode.
       Default content (no [data-theme]) shows DARK as fallback; the
       FOWT-guard always sets data-theme on first paint so this default
       only paints if localStorage is blocked. */
    .toggle-theme .toggle-glyph::before { content: "☾"; }
    .toggle-theme .toggle-label::before { content: "DARK"; }

    /* Forced light */
    :root[data-theme="light"] .toggle-theme .toggle-glyph::before { content: "☀"; }
    :root[data-theme="light"] .toggle-theme .toggle-label::before { content: "LIGHT"; }

    /* Forced dark (explicit; matches default but kept for clarity) */
    :root[data-theme="dark"] .toggle-theme .toggle-glyph::before { content: "☾"; }
    :root[data-theme="dark"] .toggle-theme .toggle-label::before { content: "DARK"; }

    @media (max-width: 559px) {
        .toggle-theme .toggle-label { display: none; }
    }

    /* ── Theme-toggle ripple overlay ──────────────────── */
    /* Demoscene-style pixel wave on theme flip. JS builds an
       overlay grid of 32×32 px tiles in the OLD background colour
       at click time; tiles fade out top-to-bottom with per-tile
       jitter to reveal the NEW theme. Vivian-approved JS-spend
       per theme.js header (overrides Rule 7 default). */
    .theme-ripple {
        position: fixed;
        inset: 0;
        z-index: 9999;
        pointer-events: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, 32px);
        grid-auto-rows: 32px;
        overflow: hidden;
        contain: layout paint;
    }
    .theme-ripple-tile {
        inline-size: 32px;
        block-size: 32px;
        opacity: 1;
        transition: opacity 220ms ease-out;
    }
    .theme-ripple-fading .theme-ripple-tile { opacity: 0; }
    /* Suppress the body's standard 240ms background-color crossfade
       during the ripple — the tiles ARE the visible transition; the
       body underneath should snap so the reveal stays crisp. */
    .theme-rippling body { transition: none !important; }

    /* ── Site footer ───────────────────────────────────── */

    .footer-site {
        border-block-start: 1px solid var(--rule-soft);
        margin-block-start: var(--space-10);
        padding-block: var(--space-7) var(--space-6);
        color: var(--text-muted);
    }
    .footer-site .container {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: 1fr;
    }
    @media (min-width: 560px) {
        .footer-site .container {
            grid-template-columns: 1fr auto;
            align-items: end;
        }
    }
    .colophon {
        font-size: 0.8rem;
        line-height: 1.5;
        max-inline-size: 38ch;
    }
    .colophon strong {
        color: var(--text);
        font-weight: 500;
        font-family: var(--f-serif);
        font-size: 0.975rem;
    }
    .nav-footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
        font-family: var(--f-mono);
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .nav-footer a {
        text-decoration: none;
        color: var(--text-muted);
        transition: color 160ms ease;
    }
    .nav-footer a:hover { color: var(--text); }

    /* ── Buttons ───────────────────────────────────────── */

    .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--f-mono);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.85rem 1.25rem;
        border: 1px solid var(--rule);
        background: transparent;
        color: var(--text);
        text-decoration: none;
        cursor: pointer;
        transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
    }
    .btn:hover { border-color: var(--text); }

    .btn-accent  { border-color: var(--accent);     color: var(--accent); }
    .btn-accent:hover { background: var(--accent);  color: var(--bg); border-color: var(--accent); }

    .btn-amazon  { border-color: var(--cta-amazon); color: var(--cta-amazon); }
    .btn-amazon:hover { background: var(--cta-amazon); color: var(--bg); border-color: var(--cta-amazon); }

    .btn-direct  { border-color: var(--cta-direct); color: var(--cta-direct); }
    .btn-direct:hover { background: var(--cta-direct); color: var(--bg); border-color: var(--cta-direct); }

    .btn-ghost   { border-color: transparent; padding-inline: 0; }
    .btn-ghost:hover { border-color: transparent; color: var(--accent); }

    .btn .arrow { transition: transform 160ms ease; }
    .btn:hover .arrow { transform: translateX(2px); }

    /* ── Landing: hero ─────────────────────────────────── */

    .block-hero {
        padding-block: clamp(5rem, 10vw, 10rem) clamp(4rem, 8vw, 8rem);
        border-block-end: 1px solid var(--rule-soft);
    }
    .block-hero .mono { margin-block-end: var(--space-5); }
    .block-hero h1 {
        max-inline-size: 18ch;
        margin-block-end: var(--space-6);
    }
    .block-hero .lede {
        font-family: var(--f-serif);
        font-size: var(--step-2);
        font-variation-settings: "opsz" 40;
        font-weight: 350;
        line-height: 1.45;
        color: var(--text-muted);
        max-inline-size: 46ch;
        margin-block-end: var(--space-7);
    }

    /* ── Landing: featured title strip ─────────────────── */

    .block-featured {
        padding-block: var(--space-8) var(--space-9);
    }
    .featured-grid {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: 1fr;
    }
    @media (min-width: 960px) {
        .featured-grid {
            grid-template-columns: 1fr 1.4fr;
            gap: var(--space-9);
            align-items: start;
        }
    }
    .block-featured .label {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-block-end: var(--space-5);
    }
    .block-featured .label::before {
        content: "";
        display: inline-block;
        inline-size: 28px;
        block-size: 1px;
        background: var(--accent);
    }
    .block-featured h2 {
        font-size: var(--step-5);
        max-inline-size: 16ch;
        margin-block-end: var(--space-4);
    }
    .block-featured .subtitle {
        font-family: var(--f-serif);
        font-variation-settings: "opsz" 18;
        font-style: italic;
        font-size: var(--step-2);
        color: var(--text-muted);
        line-height: 1.35;
        max-inline-size: 32ch;
        margin-block-end: var(--space-6);
    }
    .block-featured .byline {
        text-transform: none;
        letter-spacing: 0.01em;
        color: var(--text-muted);
        margin-block-end: var(--space-6);
    }
    .block-featured p { margin-block-end: var(--space-5); }
    .block-featured .muted { color: var(--text-muted); margin-block-end: var(--space-6); }

    /* ── Landing: ethos principles strip ───────────────── */

    .block-ethos {
        padding-block: var(--space-8);
        border-block-start: 1px solid var(--rule-soft);
    }
    .ethos-grid {
        display: grid;
        gap: var(--space-7);
        grid-template-columns: 1fr;
    }
    @media (min-width: 960px) {
        .ethos-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
    }
    .block-ethos article h3 {
        font-size: var(--step-2);
        margin-block-end: var(--space-4);
    }
    .block-ethos article h3::before {
        content: attr(data-num);
        display: block;
        font-family: var(--f-mono);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        color: var(--accent);
        margin-block-end: var(--space-3);
        font-weight: 500;
    }
    .block-ethos article p {
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    /* ── Product page: header meta strip ───────────────── */

    .book-header {
        padding-block: var(--space-7) var(--space-6);
        border-block-end: 1px solid var(--rule-soft);
    }
    .meta-strip {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
        margin: 0;
    }
    .meta-strip .sep { opacity: 0.5; }

    /* ── Product page: top (cover + head) ──────────────── */

    .book-top {
        display: grid;
        gap: var(--space-7);
        grid-template-columns: 1fr;
        padding-block: var(--space-6) var(--space-8);
    }
    @media (min-width: 720px) {
        .book-top {
            grid-template-columns: minmax(200px, 280px) 1fr;
            gap: var(--space-8);
            align-items: start;
        }
    }
    @media (min-width: 960px) {
        .book-top > figure {
            position: sticky;
            inset-block-start: var(--space-6);
        }
    }
    .book-top > figure { margin: 0; }
    .cover-frame {
        position: relative;
        aspect-ratio: 2 / 3;
        background: var(--bg-sunken);
        border: 1px solid var(--rule);
        overflow: hidden;
    }
    .cover-frame .cover {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
    }
    .book-head h1 {
        font-size: var(--step-5);
        max-inline-size: 18ch;
        margin-block-end: var(--space-3);
    }
    .book-head .subtitle {
        font-family: var(--f-serif);
        font-variation-settings: "opsz" 24;
        font-style: italic;
        font-size: var(--step-2);
        color: var(--text-muted);
        line-height: 1.35;
        max-inline-size: 32ch;
        margin-block-end: var(--space-5);
    }
    .book-head .byline {
        font-size: 1rem;
        margin-block-end: var(--space-6);
        color: var(--text-muted);
    }
    .book-head .byline strong {
        color: var(--text);
        font-weight: 500;
    }
    .meta-table {
        border-block-start: 1px solid var(--rule-soft);
        padding-block-start: var(--space-4);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-2) var(--space-5);
        font-size: 0.875rem;
    }
    .meta-table dt {
        font-family: var(--f-mono);
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        padding-block-start: 0.12rem;
    }
    .meta-table dd { margin: 0; color: var(--text); }

    /* ── Product page: description ─────────────────────── */

    .book-desc {
        padding-block: var(--space-6) var(--space-7);
        border-block-start: 1px solid var(--rule-soft);
    }
    .desc-label { margin-block-end: var(--space-4); }
    .book-desc p {
        font-family: var(--f-serif);
        font-variation-settings: "opsz" 18;
        font-size: var(--step-1);
        line-height: 1.55;
        max-inline-size: 62ch;
        margin-block-end: var(--space-4);
    }
    .book-desc p.muted { color: var(--text-muted); }

    /* ── Product page: formats + tabs (radio-CSS) ──────── */

    .formats {
        padding-block: var(--space-6) var(--space-7);
        border-block-start: 1px solid var(--rule-soft);
    }
    .formats-label { margin-block-end: var(--space-5); }

    .tabs > input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .tabs-labels {
        display: flex;
        flex-wrap: wrap;
        border-block-end: 1px solid var(--rule);
        margin-block-end: var(--space-6);
    }
    .tabs-labels > label {
        font-family: var(--f-mono);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.85rem 1.1rem;
        color: var(--text-muted);
        cursor: pointer;
        position: relative;
        transition: color 160ms ease;
    }
    .tabs-labels > label:hover { color: var(--text); }
    .tabs-labels .state-dot {
        display: inline-block;
        inline-size: 6px;
        block-size: 6px;
        border-radius: 50%;
        background: var(--accent);
        opacity: 0.8;
        margin-inline-start: 0.6em;
        vertical-align: middle;
    }

    /* Panels hidden by default; the checked radio's matching panel is shown */
    .tabs-panel { display: none; }

    /* Checked-radio state: colour the label, underline it, show the panel */
    #tab-hardcover:checked ~ .tabs-labels label[for="tab-hardcover"],
    #tab-paperback:checked ~ .tabs-labels label[for="tab-paperback"],
    #tab-kindle:checked    ~ .tabs-labels label[for="tab-kindle"],
    #tab-epub:checked      ~ .tabs-labels label[for="tab-epub"],
    #tab-pdf:checked       ~ .tabs-labels label[for="tab-pdf"] {
        color: var(--text);
    }
    #tab-hardcover:checked ~ .tabs-labels label[for="tab-hardcover"]::after,
    #tab-paperback:checked ~ .tabs-labels label[for="tab-paperback"]::after,
    #tab-kindle:checked    ~ .tabs-labels label[for="tab-kindle"]::after,
    #tab-epub:checked      ~ .tabs-labels label[for="tab-epub"]::after,
    #tab-pdf:checked       ~ .tabs-labels label[for="tab-pdf"]::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: -1px;
        block-size: 1px;
        background: var(--accent);
    }
    #tab-hardcover:checked ~ .tabs-panels [data-for="tab-hardcover"],
    #tab-paperback:checked ~ .tabs-panels [data-for="tab-paperback"],
    #tab-kindle:checked    ~ .tabs-panels [data-for="tab-kindle"],
    #tab-epub:checked      ~ .tabs-panels [data-for="tab-epub"],
    #tab-pdf:checked       ~ .tabs-panels [data-for="tab-pdf"] {
        display: block;
    }

    /* ── Product page: version card ────────────────────── */

    .card-version {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding: var(--space-6);
        border: 1px solid var(--rule);
        background: var(--bg-elev);
    }
    @media (min-width: 720px) {
        .card-version {
            grid-template-columns: 1.4fr auto;
            gap: var(--space-7);
            align-items: start;
        }
    }
    .card-version .vc-title {
        font-family: var(--f-serif);
        font-size: var(--step-3);
        font-variation-settings: "opsz" 40;
        margin-block-end: var(--space-3);
    }
    .card-version .vc-price {
        font-family: var(--f-mono);
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        color: var(--text);
        margin-block-end: var(--space-4);
    }
    .card-version .vc-price .currency { color: var(--text-muted); }
    .card-version .vc-desc {
        color: var(--text-muted);
        font-size: 0.925rem;
        max-inline-size: 56ch;
        margin-block-end: var(--space-4);
    }
    .card-version .vc-specs {
        font-family: var(--f-mono);
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-faint);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    .card-version .vc-specs li { list-style: none; }
    .card-version .vc-buys {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        min-inline-size: 220px;
    }

    .card-version-pending {
        background: transparent;
        border-style: dashed;
    }
    .card-version-pending .soon-note {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        padding: 0.85rem 0;
        color: var(--accent);
        border-block: 1px solid var(--rule);
    }

    /* ── Product page: side-blocks ─────────────────────── */

    .side-blocks {
        padding-block: var(--space-6) var(--space-8);
        border-block-start: 1px solid var(--rule-soft);
    }
    .side-blocks-grid {
        display: grid;
        gap: var(--space-5);
        grid-template-columns: 1fr;
    }
    @media (min-width: 720px) {
        .side-blocks-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
    }
    .block-side {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-5) var(--space-6);
        border: 1px solid var(--rule);
        background: transparent;
        color: inherit;
        text-decoration: none;
        transition: border-color 160ms ease, background-color 160ms ease;
    }
    .block-side:hover {
        border-color: var(--text);
        background: var(--bg-elev);
    }
    .block-side .side-label { color: var(--text-muted); }
    .block-side .side-title {
        font-family: var(--f-serif);
        font-size: var(--step-2);
        line-height: 1.2;
    }
    .block-side .side-note {
        font-size: 0.875rem;
        color: var(--text-muted);
    }

    /* ── Legal page (impressum) ────────────────────────── */

    .legal { padding-block: var(--space-8) var(--space-9); }
    .legal h1 {
        font-size: var(--step-4);
        margin-block-end: var(--space-3);
    }
    .legal .legal-sub {
        color: var(--text-muted);
        margin-block-end: var(--space-7);
    }
    .legal h2 {
        font-size: var(--step-2);
        margin-block: var(--space-7) var(--space-4);
        padding-block-start: var(--space-5);
        border-block-start: 1px solid var(--rule-soft);
    }
    .legal h2:first-of-type {
        padding-block-start: 0;
        border-block-start: 0;
        margin-block-start: 0;
    }
    .legal address {
        font-style: normal;
        font-size: 1rem;
        line-height: 1.6;
        margin-block-end: var(--space-5);
    }
    .legal dl {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3) var(--space-6);
        margin: 0 0 var(--space-5);
        font-size: 0.925rem;
    }
    @media (min-width: 560px) {
        .legal dl { grid-template-columns: 12rem 1fr; }
    }
    .legal dt {
        font-family: var(--f-mono);
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
        padding-block-start: 0.16rem;
    }
    .legal dd { margin: 0; }
    .legal p {
        font-size: 0.925rem;
        margin-block-end: var(--space-4);
        max-inline-size: 62ch;
    }
    .legal p.fine {
        font-size: 0.825rem;
        color: var(--text-muted);
    }

    /* ── Errata page ───────────────────────────────────── */

    .errata { padding-block: var(--space-8) var(--space-10); }
    .errata h1 {
        font-size: var(--step-4);
        margin-block-end: var(--space-3);
    }
    .errata .errata-sub {
        color: var(--text-muted);
        margin-block-end: var(--space-7);
    }
    .errata-empty {
        padding-block: var(--space-7);
        border-block: 1px solid var(--rule);
        text-align: center;
        margin-block-end: var(--space-7);
    }
    .empty-line {
        font-family: var(--f-serif);
        font-variation-settings: "opsz" 40;
        font-style: italic;
        font-size: var(--step-2);
        color: var(--text-muted);
        margin: 0;
    }
    .errata h2 {
        font-size: var(--step-1);
        margin-block-end: var(--space-4);
    }
    .errata p {
        color: var(--text-muted);
        font-size: 0.95rem;
        margin-block-end: var(--space-4);
        max-inline-size: 62ch;
    }

    /* ── 404 ───────────────────────────────────────────── */

    .not-found {
        min-block-size: 60vh;
        display: grid;
        place-items: center;
        padding-block: var(--space-9);
    }
    .nf-inner {
        text-align: center;
        max-inline-size: 36ch;
    }
    .nf-code {
        font-family: var(--f-mono);
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent);
        margin-block-end: var(--space-5);
    }
    .not-found h1 {
        font-size: var(--step-4);
        margin-block-end: var(--space-6);
    }
    .nf-back {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--f-mono);
        font-size: 0.8rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text);
        border-block-end: 1px solid var(--accent);
        padding-block-end: var(--space-2);
        transition: color 160ms ease;
    }
    .nf-back:hover { color: var(--accent); }
}

/* ════════════════════════════════════════════════════════
   @layer utilities
   ════════════════════════════════════════════════════════ */

@layer utilities {
    .mono {
        font-family: var(--f-mono);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .muted { color: var(--text-muted); }
    .fine  { font-size: 0.825rem; color: var(--text-muted); }

    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* ════════════════════════════════════════════════════════
   Reduced motion
   ════════════════════════════════════════════════════════ */

@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;
    }
}