/* ============================================================================
   Acrux Journey Vault — Mission-Control × Lab-Notebook
   Display: Space Grotesk · Body: IBM Plex Sans · Data: IBM Plex Mono
   ========================================================================== */

/* ---- Theme: Mission (dark, default) ---------------------------------- */
:root,
[data-theme="mission"] {
    --bg:        #0c0f13;
    --panel:     #12161c;
    --panel-2:   #161b22;
    --elev:      #1b212a;
    --line:      #262d38;
    --line-soft: #1c222b;

    --ink:   #e9edf3;
    --ink-2: #a7b1c0;
    --ink-3: #6b7686;

    --signal:      #f5a524;            /* amber — the robot, the carried box, action */
    --signal-soft: rgba(245,165,36,.13);
    --data:        #3ad6ee;            /* cyan — the plan, the GPU, telemetry */
    --data-soft:   rgba(58,214,238,.12);

    --ok:    #34d399;  --ok-soft:    rgba(52,211,153,.12);
    --bad:   #fb7185;  --bad-soft:   rgba(251,113,133,.12);
    --tried: #a78bfa;  --tried-soft: rgba(167,139,250,.12);

    --code-bg: #0e1318;
    --inline:  #ffb4d2;
    --shadow:  0 18px 40px -24px rgba(0,0,0,.8);

    --grid-line: rgba(255,255,255,.022);
    --hero-glow: radial-gradient(900px 380px at 78% -10%, rgba(58,214,238,.10), transparent 60%),
                 radial-gradient(700px 360px at 8% 0%, rgba(245,165,36,.08), transparent 60%);
    color-scheme: dark;
}

/* ---- Theme: Paper (light, drafting paper) ---------------------------- */
[data-theme="paper"] {
    --bg:        #e9edf3;
    --panel:     #ffffff;
    --panel-2:   #f4f7fb;
    --elev:      #ffffff;
    --line:      #dfe5ee;
    --line-soft: #e9eef4;

    --ink:   #111a26;
    --ink-2: #495568;
    --ink-3: #8893a3;

    --signal:      #bd6f06;
    --signal-soft: rgba(189,111,6,.10);
    --data:        #0c8fc4;
    --data-soft:   rgba(12,143,196,.10);

    --ok:    #0c9b67;  --ok-soft:    rgba(12,155,103,.10);
    --bad:   #d63864;  --bad-soft:   rgba(214,56,100,.10);
    --tried: #7857d6;  --tried-soft: rgba(120,87,214,.10);

    --code-bg: #f6f8fb;
    --inline:  #c0316c;
    --shadow:  0 16px 36px -26px rgba(20,40,80,.35);

    --grid-line: rgba(20,40,80,.04);
    --hero-glow: radial-gradient(900px 380px at 78% -10%, rgba(12,143,196,.10), transparent 60%),
                 radial-gradient(700px 360px at 8% 0%, rgba(189,111,6,.07), transparent 60%);
    color-scheme: light;
}

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

:root {
    --sidebar-w: 286px;
    --toc-w: 230px;
    --maxread: 760px;
    --r: 12px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --f-display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
    --f-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --f-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--f-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
}

.grid-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 30% 0%, #000 0%, transparent 75%);
}

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

/* scrollbars */
.scroll::-webkit-scrollbar, .nav::-webkit-scrollbar, .toc::-webkit-scrollbar { width: 10px; }
.scroll::-webkit-scrollbar-thumb, .nav::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box;
}
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ---- App grid -------------------------------------------------------- */
.app {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--toc-w);
    height: 100vh;
}
@media (max-width: 1180px) { .app { grid-template-columns: var(--sidebar-w) minmax(0,1fr); } .toc { display: none; } }

/* ============================ Sidebar ============================ */
.sidebar {
    grid-row: 1; grid-column: 1;
    background: var(--panel);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    min-height: 0;
    transition: transform .32s var(--ease);
}

.brand {
    display: flex; align-items: center; gap: 11px;
    padding: 20px 20px 16px;
    text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
}
.brand-mark {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 10px;
}
.bm-a { fill: var(--signal); }
.bm-b { fill: var(--data); }
.bm-path { stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 2.4 2.4; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--f-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; }
.brand-text em { font-style: normal; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

.search-box {
    position: relative; margin: 14px 16px 8px;
    display: flex; align-items: center;
}
.search-ico { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
#search {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line); border-radius: 9px;
    font-family: var(--f-body); font-size: .86rem;
    transition: border-color .18s, box-shadow .18s;
}
#search::placeholder { color: var(--ink-3); }
#search:focus { outline: none; border-color: var(--data); box-shadow: 0 0 0 3px var(--data-soft); }
.search-kbd {
    position: absolute; right: 10px;
    font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3);
    border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: var(--panel-2);
}

.nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 16px; }

.nav-section { margin-top: 14px; }
.nav-eyebrow {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 8px;
    font-family: var(--f-mono); font-size: .64rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.nav-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-bottom: 2px;
    border-radius: 8px; cursor: pointer;
    color: var(--ink-2); font-size: .885rem;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
    user-select: none;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); transform: translateX(2px); }
.nav-item.active {
    background: var(--data-soft); color: var(--ink);
    border-color: color-mix(in srgb, var(--data) 35%, transparent);
}
.nav-item .ni-ico { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.nav-item.active .ni-ico { color: var(--data); }
.nav-item .ni-title { flex: 1; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.nav-item .ni-level { display: flex; gap: 3px; flex: none; }
.ni-level i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.nav-item.active .ni-level i { background: color-mix(in srgb, var(--data) 40%, var(--line)); }
.ni-level i.on { background: var(--signal); }
.nav-item.active .ni-level i.on { background: var(--signal); }

.nav-empty { padding: 16px 12px; color: var(--ink-3); font-size: .85rem; }
mark.hit { background: var(--signal-soft); color: var(--signal); border-radius: 3px; padding: 0 2px; }

.sidebar-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-top: 1px solid var(--line-soft);
    font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3);
}
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok-soft); animation: live 2.4s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ============================ Main ============================ */
.main { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

.topbar {
    position: relative;
    height: 54px; flex: none;
    display: flex; align-items: center; gap: 12px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(10px);
    z-index: 6;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-3); font-family: var(--f-mono); flex: 1; min-width: 0; }
.crumbs .crumb-root { color: var(--ink-3); }
.crumbs .sep { opacity: .5; }
.crumbs .crumb-cur { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }

.ghost-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    background: none; border: 1px solid transparent; border-radius: 9px;
    color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ghost-btn:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.only-mobile { display: none; }

.ico-sun { display: none; }
[data-theme="paper"] .ico-moon { display: none; }
[data-theme="paper"] .ico-sun { display: block; }

.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--data), var(--signal)); transition: width .12s linear; }

.scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; min-height: 0; }

/* ============================ TOC ============================ */
.toc { grid-row: 1; grid-column: 3; border-left: 1px solid var(--line); padding: 70px 20px 40px; overflow-y: auto; }
.toc-title { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.toc a { display: block; padding: 4px 0 4px 12px; margin-left: 1px; border-left: 2px solid var(--line); color: var(--ink-3); text-decoration: none; font-size: .8rem; line-height: 1.4; transition: color .15s, border-color .15s; }
.toc a.lvl-3 { padding-left: 24px; font-size: .76rem; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); border-left-color: var(--signal); }

/* ============================ Page / Markdown ============================ */
.page { max-width: var(--maxread); margin: 0 auto; padding: 50px 44px 24px; }
.page.is-hero { max-width: 1000px; }

.page h1, .page h2, .page h3, .page h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.18; letter-spacing: -.012em; color: var(--ink); scroll-margin-top: 76px; }
.page h1 { font-size: 2.3rem; margin: .2em 0 .5em; letter-spacing: -.022em; }
.page h2 { font-size: 1.62rem; margin: 1.9em 0 .55em; padding-top: .4em; }
.page h2::before { content: ""; display: block; width: 30px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--signal), transparent); margin-bottom: .6em; }
.page h3 { font-size: 1.2rem; margin: 1.5em 0 .4em; color: var(--ink); }
.page h4 { font-size: 1rem; margin: 1.3em 0 .3em; font-family: var(--f-body); font-weight: 700; color: var(--ink-2); }

.page p { margin: 0 0 1.15em; color: var(--ink); }
.page a { color: var(--data); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--data) 35%, transparent); transition: border-color .15s, color .15s; }
.page a:hover { border-bottom-color: var(--data); }

.page ul, .page ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.page li { margin-bottom: .4em; }
.page li::marker { color: var(--ink-3); }
.page ul li::marker { color: var(--signal); }

.page strong { color: var(--ink); font-weight: 600; }
.page hr { border: none; height: 1px; background: var(--line); margin: 2.4em 0; }

.page blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--line); color: var(--ink-2); }

/* tables */
.page table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .86rem; display: block; overflow-x: auto; }
.page th, .page td { padding: 9px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.page th { background: var(--panel-2); font-weight: 600; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.page tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-2) 50%, transparent); }

/* code */
.page :not(pre) > code { font-family: var(--f-mono); font-size: .84em; background: var(--panel-2); color: var(--inline); padding: .12em .4em; border-radius: 5px; border: 1px solid var(--line-soft); }
.page pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; overflow-x: auto; margin: 1.4em 0; font-size: .82rem; line-height: 1.6; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.page pre code { font-family: var(--f-mono); background: none; border: none; padding: 0; color: var(--ink); }

/* video cards */
.page video { width: 100%; border-radius: var(--r); margin: .3em 0; border: 1px solid var(--line); background: #000; box-shadow: var(--shadow); display: block; }
.vfig { margin: 1.6em 0; }
.vfig figcaption { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); margin-top: 8px; letter-spacing: .02em; }
.vfig figcaption::before { content: "▸ "; color: var(--signal); }

/* inline screenshots / images in body copy */
.md-body img { width: 100%; height: auto; border-radius: var(--r); margin: 1.4em 0 .5em; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); display: block; }
.md-body img[alt]:not([src$=".mp4"]):not([src$=".webm"]) { font-size: .8rem; color: var(--ink-3); }

/* ---- Animated explainer widgets -------------------------------------- */
.anim-widget {
    position: relative; margin: 1.7em 0;
    border: 1px solid var(--line); border-radius: 14px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
    overflow: hidden; box-shadow: var(--shadow);
}
.anim-widget canvas { display: block; width: 100%; height: var(--anim-h, 190px); }
.anim-widget .anim-tag {
    position: absolute; left: 14px; top: 11px;
    font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3); pointer-events: none;
}
.anim-widget .anim-tag::before { content: "◆ "; color: var(--signal); }
.anim-widget figcaption {
    padding: 11px 16px 13px; border-top: 1px solid var(--line-soft);
    background: var(--panel); font-size: .85rem; color: var(--ink-2); line-height: 1.5;
}
.anim-widget figcaption b { color: var(--ink); font-weight: 600; }
.anim-widget figcaption::before {
    content: "Analogy"; display: inline-block; margin-right: 8px;
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--signal); border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
    border-radius: 4px; padding: 1px 5px; vertical-align: 1px;
}

/* images */
.page img { max-width: 100%; border-radius: var(--r); border: 1px solid var(--line); display: block; margin: 1.4em auto; }

/* ---- Callouts -------------------------------------------------------- */
.callout {
    margin: 1.5em 0; padding: 14px 16px 14px 16px;
    border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent);
    border-radius: 10px; background: var(--c-bg);
}
.callout > .callout-head {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--f-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent);
    margin-bottom: 6px;
}
.callout > .callout-head .co-ico { width: 15px; height: 15px; }
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }
.callout.worked { --c-accent: var(--ok); --c-bg: var(--ok-soft); --c-line: color-mix(in srgb,var(--ok) 22%,transparent); }
.callout.broke  { --c-accent: var(--bad); --c-bg: var(--bad-soft); --c-line: color-mix(in srgb,var(--bad) 22%,transparent); }
.callout.note   { --c-accent: var(--data); --c-bg: var(--data-soft); --c-line: color-mix(in srgb,var(--data) 22%,transparent); }
.callout.key    { --c-accent: var(--signal); --c-bg: var(--signal-soft); --c-line: color-mix(in srgb,var(--signal) 22%,transparent); }
.callout.tried  { --c-accent: var(--tried); --c-bg: var(--tried-soft); --c-line: color-mix(in srgb,var(--tried) 22%,transparent); }

/* ---- Native <details> as a "deep dive" disclosure -------------------- */
.page details { margin: 1.4em 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.page details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-family: var(--f-display); list-style: none; display: flex; align-items: center; gap: 9px; color: var(--ink); }
.page details > summary::-webkit-details-marker { display: none; }
.page details > summary::before { content: "+"; font-family: var(--f-mono); color: var(--data); width: 16px; text-align: center; transition: transform .2s; }
.page details[open] > summary::before { content: "−"; }
.page details[open] > summary { border-bottom: 1px solid var(--line); }
.page details > *:not(summary) { padding-left: 16px; padding-right: 16px; }
.page details > *:not(summary):last-child { padding-bottom: 14px; }
.page details > summary + * { margin-top: 14px; }

/* ============================ HERO (landing) ============================ */
.hero { position: relative; padding: 12px 0 8px; }
.hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.hero-eyebrow .tick { color: var(--signal); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 18px; max-width: 16ch; }
.hero h1 .accent-a { color: var(--data); }
.hero h1 .accent-b { color: var(--signal); }
.hero-lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 56ch; margin: 0 0 26px; }

.hero-canvas-wrap { position: relative; margin: 26px 0 30px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%); overflow: hidden; box-shadow: var(--shadow); }
.hero-canvas-wrap::before { content: ""; position: absolute; inset: 0; background: var(--hero-glow); pointer-events: none; }
#hero-canvas { display: block; width: 100%; height: 270px; }
.hero-canvas-tag { position: absolute; left: 16px; top: 14px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hero-legend { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 16px; font-family: var(--f-mono); font-size: .68rem; color: var(--ink-2); }
.hero-legend span { display: flex; align-items: center; gap: 6px; }
.hero-legend i { width: 10px; height: 10px; border-radius: 50%; }
.hl-plan { background: var(--data); }
.hl-follow { background: var(--signal); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 34px; }
.stat { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.stat .s-num { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.stat .s-num small { font-size: .9rem; color: var(--ink-3); font-weight: 500; }
.stat .s-lab { font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-top: 8px; }
.stat:nth-child(1) .s-num { color: var(--data); }
.stat:nth-child(3) .s-num { color: var(--signal); }

/* hero nav cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; margin: 12px 0 8px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; text-decoration: none; color: var(--ink); transition: transform .16s var(--ease), border-color .16s, background .16s; }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--data) 40%, var(--line)); background: var(--panel-2); }
.card .c-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--data-soft); color: var(--data); }
.card .c-title { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; }
.card .c-desc { font-size: .84rem; color: var(--ink-2); line-height: 1.5; }
.card .c-meta { margin-top: auto; font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); }

/* generic "chips" used in markdown via inline HTML if needed */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 100px; font-family: var(--f-mono); font-size: .72rem; border: 1px solid var(--line); color: var(--ink-2); }

/* ---- Page meta strip (difficulty + reading time) --------------------- */
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); }
.page-meta .pm-sec { color: var(--data); letter-spacing: .08em; text-transform: uppercase; }
.page-meta .pm-item { display: flex; align-items: center; gap: 6px; }
.pm-level { display: inline-flex; gap: 3px; }
.pm-level i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.pm-level i.on { background: var(--signal); }

/* ---- Prev / next pager ----------------------------------------------- */
.page-foot { max-width: var(--maxread); margin: 0 auto; padding: 8px 44px 70px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--panel); transition: border-color .16s, transform .16s; }
.pager a:hover { border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); transform: translateY(-2px); }
.pager a.next { text-align: right; align-items: flex-end; }
.pager .pg-dir { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pager .pg-title { font-family: var(--f-display); font-weight: 600; }

/* ============================ Mobile / scrim ============================ */
.scrim { position: fixed; inset: 0; z-index: 14; background: rgba(0,0,0,.5); border: none; opacity: 0; pointer-events: none; transition: opacity .3s; }
body.nav-open .scrim { opacity: 1; pointer-events: auto; }

@media (max-width: 820px) {
    .app { grid-template-columns: minmax(0,1fr); }
    .sidebar { position: fixed; z-index: 15; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); transform: translateX(-102%); box-shadow: 12px 0 40px -20px rgba(0,0,0,.7); }
    body.nav-open .sidebar { transform: translateX(0); }
    .only-mobile { display: grid; }
    .page { padding: 34px 20px 16px; }
    .page-foot { padding: 8px 20px 60px; }
    .hero h1 { letter-spacing: -.02em; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .pager { grid-template-columns: 1fr; }
    #hero-canvas { height: 210px; }
}

/* ---- Accessibility --------------------------------------------------- */
:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; border-radius: 4px; }
.nav-item:focus-visible, .card:focus-visible { outline-offset: -2px; }

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