/* =========================================================================
   SVNLABS — Design System implementation
   Editorial monochrome + one signal accent. Dark lab index / paper articles.
   Ref: DESIGN.md. No framework; HTML + CSS + a little vanilla JS.
   ========================================================================= */

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

:root {
    /* palette */
    --ink: #080A0A;
    --black: #0D0F0F;
    --graphite: #171A19;
    --surface-dark: #202321;

    --paper: #EFEDE8;
    --paper-bright: #FAF9F6;
    --ink-warm: #1B1A17;
    --white: #FFFFFF;

    --grey-100: #E5E4DE;
    --grey-300: #C3C3BC;
    --grey-500: #888B86;
    --grey-700: #4D514E;

    /* QK accent — cinematic vermillion red (ref: QK/Qualitätskamera stylescape) */
    --signal: #E4362B;

    /* type */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-read: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* motion */
    --motion-fast: 180ms;
    --motion-normal: 450ms;
    --motion-slow: 800ms;
    --ease: cubic-bezier(.16, 1, .3, 1);

    /* layout */
    --maxw: 1440px;
    --pad: clamp(20px, 4vw, 72px);
    --read: 720px;
    --space-section: clamp(90px, 12vw, 200px);
}

/* --- Theme: dark (lab index) --------------------------------------------- */
.theme-dark {
    --bg: var(--ink);
    --surface: var(--graphite);
    --text: var(--paper);
    --text-dim: var(--grey-300);
    --text-mute: var(--grey-500);
    --rule: rgba(255, 255, 255, .16);
    --rule-soft: rgba(255, 255, 255, .08);
    --signal: #F0402E;              /* vermillion, tuned for dark ground */
    --mark-tile: var(--paper);      /* light tile ... */
    --mark-channel: var(--bg);      /* ... with the S cut to the dark ground */
    color-scheme: dark;
}
/* --- Theme: paper (reading) ---------------------------------------------- */
.theme-paper {
    --bg: var(--paper);
    --surface: var(--paper-bright);
    --text: var(--graphite);
    --text-dim: var(--grey-700);
    --text-mute: var(--grey-500);
    --rule: rgba(0, 0, 0, .14);
    --rule-soft: rgba(0, 0, 0, .07);
    --signal: #CE2A1A;              /* deeper red for AA contrast on cream */
    --text: var(--ink-warm);        /* warm ink #1B1A17 to match the mark */
    --mark-tile: var(--ink-warm);   /* dark tile ... */
    --mark-channel: var(--bg);      /* ... with the S cut to the cream ground */
    color-scheme: light;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--font-read);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    scroll-padding-top: 90px;
}

a { color: inherit; text-decoration: none; transition: color var(--motion-fast) var(--ease); }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.sig-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); vertical-align: middle; margin-right: 4px; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: inline-flex; line-height: 0; }
.mark { display: block; }
.mark-tile { fill: var(--mark-tile); transition: fill var(--motion-normal) var(--ease); }
.mark-cut  { stroke: var(--mark-channel); transition: stroke var(--motion-normal) var(--ease); }
.footer-lockup { display: inline-flex; align-items: center; gap: 10px; line-height: 0; }

/* ---- Theme switcher ----------------------------------------------------- */
.tt-comment {
    font-family: var(--font-mono); font-size: .74rem; color: var(--text-mute);
    opacity: .75; white-space: nowrap; margin-left: 6px;
}
.theme-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 4px;
    font-family: var(--font-mono); font-size: .82rem; text-transform: lowercase;
    color: var(--text-dim); background: none; border: 1px solid var(--rule);
    padding: 6px 11px; border-radius: 4px; cursor: pointer;
    transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }
.theme-toggle .tt-glyph { color: var(--signal); font-size: .95rem; line-height: 1; }
@media (max-width: 760px) { .tt-comment { display: none; } }
.brand-name { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; font-size: 1rem; }
.brand-slash { color: var(--signal); }
.site-nav { display: flex; gap: 4px; font-family: var(--font-mono); }
.site-nav a {
    font-size: .82rem; color: var(--text-dim); padding: 7px 12px; border-radius: 4px;
    text-transform: lowercase;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--signal); }

/* ---- Homepage: hero ----------------------------------------------------- */
.site-main { padding-bottom: var(--space-section); }
.hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); position: relative; }
.eyebrow {
    font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em;
    color: var(--text-mute); margin-bottom: clamp(24px, 4vw, 44px); text-transform: uppercase;
}
.hero-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(3rem, 10vw, 7.5rem); line-height: .9; letter-spacing: -.045em;
    text-transform: uppercase;
    display: flex; flex-direction: column; align-items: flex-start; gap: .14em;
}
/* red marker slab with knockout (ink) text */
.hero-title .slab {
    display: inline-block; width: fit-content;
    background: var(--signal); color: var(--ink);
    padding: .06em .3em .14em; line-height: .82;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero-quiet {
    margin-top: .18em;
    color: var(--text-mute); text-transform: none; font-weight: 500;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem); letter-spacing: -.02em; line-height: 1;
}
.hero-quiet::after {
    content: '_'; color: var(--signal); margin-left: .05em;
    animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-foot {
    display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-end;
    margin-top: clamp(36px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--rule);
}
.hero-sub { font-size: 1.05rem; color: var(--text-dim); max-width: 46ch; }
.hero-stats { display: flex; gap: 22px; font-family: var(--font-mono); font-size: .8rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .04em; }
.hero-stats em { color: var(--signal); font-style: normal; font-weight: 500; }
.net-motif {
    position: absolute; top: clamp(56px, 9vw, 120px); right: var(--pad);
    font-family: var(--font-mono); font-size: .8rem; line-height: 1.25; color: var(--rule);
    white-space: pre; display: none;
}
@media (min-width: 900px) { .net-motif { display: block; color: color-mix(in srgb, var(--text-mute) 60%, transparent); } }

/* ---- Tag bar (text tags) ------------------------------------------------ */
.tagbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; padding-bottom: 30px; }
.tagbar-label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; color: var(--text-mute); }
.txt-tag {
    font-family: var(--font-mono); font-size: .85rem; color: var(--text-dim);
    transition: color var(--motion-fast) var(--ease); white-space: nowrap;
}
.txt-tag:hover { color: var(--text); }
.txt-tag.on { color: var(--signal); }

/* ---- Homepage: editorial index ------------------------------------------ */
.index-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-mute); padding-bottom: 14px; border-bottom: 1px solid var(--text-dim);
}
.index-row {
    display: grid; grid-template-columns: minmax(64px, 90px) 1fr auto;
    gap: clamp(16px, 3vw, 44px); align-items: start;
    padding: clamp(26px, 3.4vw, 40px) 0; border-bottom: 1px solid var(--rule);
    transition: background var(--motion-normal) var(--ease);
    position: relative;
}
.index-row::before {
    content: ''; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1); top: 0; bottom: 0;
    background: var(--surface); opacity: 0; transition: opacity var(--motion-fast) var(--ease); z-index: -1;
}
.index-row:hover::before { opacity: .5; }
.row-no { font-family: var(--font-mono); font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text-mute); font-weight: 500; letter-spacing: -.02em; }
.row-no .slash { color: var(--signal); }
.row-title {
    font-family: var(--font-display); font-weight: 500; letter-spacing: -.03em; line-height: 1.02;
    font-size: clamp(1.5rem, 3.6vw, 2.5rem); color: var(--text);
    transition: color var(--motion-fast) var(--ease);
}
.index-row:hover .row-title { color: var(--signal); }
.row-excerpt { color: var(--text-dim); margin-top: 12px; max-width: 62ch; font-size: 1rem; }
.row-tags { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); }
.row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; color: var(--text-mute); white-space: nowrap; }
.row-arrow { color: var(--signal); font-size: 1.1rem; margin-top: 4px; transition: transform var(--motion-normal) var(--ease); }
.index-row:hover .row-arrow { transform: translateX(6px); }

/* ---- Empty state -------------------------------------------------------- */
.empty { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.empty h1, .empty h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; margin-bottom: 12px; }
.empty p { color: var(--text-dim); margin-top: 8px; }
.empty code { font-family: var(--font-mono); color: var(--signal); }
.empty a { color: var(--signal); }

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb {
    display: flex; gap: 10px; padding-top: 28px;
    font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; color: var(--text-mute);
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span:not(:last-child) { color: var(--rule); }

/* ---- Article: 3-column grid --------------------------------------------- */
.article-grid {
    display: grid;
    grid-template-columns: 190px minmax(0, var(--read)) 210px;
    justify-content: center; gap: clamp(28px, 4vw, 60px);
    padding-top: clamp(28px, 4vw, 52px);
}
.rail-sticky { position: sticky; top: 92px; }
.rail-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px; }

/* left rail: lab note block + meta */
.labnote-block { border-top: 2px solid var(--signal); padding-top: 12px; margin-bottom: 26px; }
.labnote-kicker { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--text-mute); }
.labnote-no { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.meta-dl { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.meta-dl > div { display: flex; flex-direction: column; gap: 2px; }
.meta-dl dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--text-mute); }
.meta-dl dd { font-family: var(--font-mono); font-size: .82rem; color: var(--text); }
.meta-tags { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: .78rem; }
.meta-tags a { color: var(--text-dim); }
.meta-tags a:hover { color: var(--signal); }

/* article column */
.article-col { min-width: 0; }
.article-head { padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; }
.article-tagline { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; color: var(--text-mute); margin-bottom: 20px; }
.article-head h1 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.045em; line-height: 1.18;
    font-size: clamp(2.1rem, 5.2vw, 3.5rem); text-transform: uppercase;
}
/* red marker slab with knockout (ink) text — matches the hero */
.article-head h1 .slab-title {
    color: var(--ink); background: var(--signal);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding: .04em .26em .1em; box-shadow: none;
}
.article-lede { font-size: 1.24rem; line-height: 1.5; color: var(--text-dim); margin-top: 22px; letter-spacing: -.01em; }

/* body typography */
.article-body { font-size: 18px; line-height: 1.72; letter-spacing: -.008em; color: var(--text); }
.article-body > * + * { margin-top: 1.5em; }
.article-body h2 {
    font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
    font-size: 1.7rem; margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--rule);
    display: flex; align-items: baseline; gap: .5rem;
}
.article-body h2::before { content: '/'; color: var(--signal); font-family: var(--font-mono); font-size: 1.1rem; }
.article-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: -.02em; margin-top: 1.8em; }
.article-body p { max-width: var(--read); }
.article-body a { color: var(--text); border-bottom: 1.5px solid var(--signal); transition: background var(--motion-fast) var(--ease); }
.article-body a:hover { background: color-mix(in srgb, var(--signal) 26%, transparent); }
.article-body strong { font-weight: 600; }
.article-body ul, .article-body ol { padding-left: 1.5em; max-width: var(--read); }
.article-body li { margin: .55em 0; padding-left: .25em; }
.article-body li::marker { color: var(--signal); font-family: var(--font-mono); }
.article-body img { max-width: 100%; border: 1px solid var(--rule); border-radius: 2px; display: block; }
.article-body hr { border: none; border-top: 1px solid var(--rule); margin: 2.6em 0; }

/* callouts (blockquote variants — DESIGN.md §22) */
.article-body blockquote {
    position: relative; margin: 2.2em 0; padding: 22px 24px 22px 26px;
    background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--text-mute);
    border-radius: 2px; font-size: 1.02rem; line-height: 1.6; color: var(--text-dim); max-width: var(--read);
}
.article-body blockquote::before {
    content: attr(data-label); position: absolute; top: -9px; left: 24px; padding: 0 8px;
    background: var(--bg); font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
    letter-spacing: .14em; color: var(--text-mute);
}
.article-body blockquote p { margin: 0; max-width: none; }
/* accented variants — signal red for the ones that demand attention */
.article-body .callout-note,
.article-body .callout-watchout,
.article-body .callout-result { border-left-color: var(--signal); }
.article-body .callout-note::before,
.article-body .callout-watchout::before,
.article-body .callout-result::before { color: var(--signal); }
.article-body .callout-watchout { border-left-width: 3px; }

/* inline code */
.article-body code {
    font-family: var(--font-mono); font-size: .86em;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    padding: 2px 6px; border-radius: 3px;
}

/* ---- Code blocks (always dark) ------------------------------------------ */
.code-wrap { margin: 2em 0; max-width: var(--read); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; background: #111413; }
.code-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
}
.code-head .lang { color: var(--grey-500); }
.code-head .lang b { color: var(--signal); font-weight: 500; }
.copy-btn {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    background: none; border: 1px solid rgba(255,255,255,.16); color: var(--grey-300);
    padding: 3px 10px; border-radius: 3px; cursor: pointer; transition: all var(--motion-fast) var(--ease);
}
.copy-btn:hover { border-color: var(--signal); color: var(--signal); }
.copy-btn.copied { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.code-block, pre.code-block {
    font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6;
    background: #111413; color: #E5E4DE; padding: 18px 16px; overflow-x: auto; margin: 0;
    border: none; border-radius: 0;
}
/* standalone (no JS wrap yet) code block keeps its own frame */
.article-body > .code-block { max-width: var(--read); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; }
.code-block code { background: none; padding: 0; font-size: 1em; color: inherit; }

/* ---- Diagrams (inline SVG) ---------------------------------------------- */
.diagram { margin: 2.4em 0; max-width: var(--read); }
.diagram svg { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 8px; }
.diagram figcaption { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--text-mute); margin-top: 10px; text-transform: uppercase; }
.dg-node { fill: var(--surface); stroke: var(--text); stroke-width: 1.25; }
.dg-line { stroke: var(--text-mute); stroke-width: 1.25; fill: none; }
.dg-node-dot { fill: var(--text-mute); }
.dg-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; fill: var(--text); }
.dg-anno { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; fill: var(--text-mute); }
.dg-active { stroke: var(--signal); stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; }
.dg-active-dot { fill: var(--signal); }
.dg-arrow { fill: var(--signal); }
.dg-active-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; fill: var(--signal); }

/* ---- TOC rail ----------------------------------------------------------- */
.toc ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a {
    display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
    font-size: .84rem; line-height: 1.35; color: var(--text-mute);
    border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px;
    transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--text); border-left-color: var(--signal); }
.toc-n { font-family: var(--font-mono); font-size: .7rem; color: var(--signal); }

/* ---- Article footer / share --------------------------------------------- */
.article-foot { margin-top: 56px; }
.foot-rule { font-family: var(--font-mono); color: var(--rule); overflow: hidden; white-space: nowrap; font-size: .9rem; margin-bottom: 20px; }
.share-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-family: var(--font-mono); font-size: .82rem; color: var(--text-mute); }
.share-row a:hover { color: var(--signal); }

/* ---- Related ------------------------------------------------------------ */
.related { margin-top: var(--space-section); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rule); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; padding-top: 52px; padding-bottom: 30px; }
.footer-brand .brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: .04em; }
.footer-brand p { color: var(--text-mute); font-size: .9rem; margin-top: 10px; max-width: 34ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; font-family: var(--font-mono); font-size: .84rem; }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--signal); }
.footer-links .arr { color: var(--signal); }
.footer-copy {
    display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
    padding: 20px 0 48px; border-top: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; color: var(--text-mute); text-transform: uppercase;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    .article-grid { grid-template-columns: minmax(0, var(--read)); }
    .rail-left { order: -1; }
    .rail-sticky { position: static; }
    .rail-left .labnote-block { margin-bottom: 18px; }
    .rail-left .meta-dl { flex-direction: row; flex-wrap: wrap; gap: 18px; }
    .rail-right { display: none; }
    .index-row { grid-template-columns: 54px 1fr; }
    .row-meta { grid-column: 2; flex-direction: row; gap: 16px; margin-top: 12px; }
}
@media (max-width: 560px) {
    .article-body { font-size: 16px; }
    .hero-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
    .index-row { grid-template-columns: 44px 1fr; gap: 14px; }
    .row-title { font-size: 1.4rem; }
}

/* ---- Motion & reveals (DESIGN.md §18) ----------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    /* scroll-reveal — only when JS is present, so no-JS never hides content */
    .js .index-row,
    .js .feature-card,
    .js .article-body > h2,
    .js .article-body > .diagram,
    .js .article-body > blockquote {
        opacity: 0; transform: translateY(18px);
        transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease);
    }
    .js .is-in { opacity: 1; transform: none; }

    /* homepage hero — staggered rise on load */
    .js .page-home .hero > *,
    .js .page-home .tagbar { opacity: 0; animation: rise .7s var(--ease) forwards; }
    .js .page-home .hero .eyebrow { animation-delay: .04s; }
    .js .page-home .hero-title  { animation-delay: .12s; }
    .js .page-home .hero-foot   { animation-delay: .22s; }
    .js .page-home .net-motif   { animation-delay: .30s; }
    .js .page-home .tagbar      { animation-delay: .34s; }
    @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

    /* article head — quiet entrance */
    .js .page-post .article-head,
    .js .page-about .article-head { animation: rise .6s var(--ease) both; }

    /* diagrams — live signal: marching-ants on active paths + pulsing nodes */
    .dg-active { animation: dashflow 1.15s linear infinite; }
    @keyframes dashflow { to { stroke-dashoffset: -14; } }
    .dg-active-dot { animation: dotpulse 1.9s ease-in-out infinite; }
    @keyframes dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

    /* index row arrow already nudges on hover; add a soft lift */
    .index-row { transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero-quiet::after { opacity: 1; }
}