/* ============================================================================
   site.css — the dilmun.at design system (ported verbatim from the previous site; Round 5 there, ruling R14, Direction B)

   The start of the real CSS architecture: design tokens first, then components.
   As of Round 7 this is the stylesheet for every public content page except the
   Hephaestus demo: the homepage,
   all four project pages and both consoles, the legal pages, 403/404, and the
   Neptune page, and — since Round 8 — the whole logged-in experience: /app/,
   /app/users/ and /login/. NOT on it: demo/alexandria/ (inline only) and
   demo/hephaestus/ (css/style.css, OQ #28). app/dashboard.css is retired.

   Self-hosted fonts, no external requests of any kind (DSGVO posture preserved).
   Palette is the existing one, lifted from style.css :root — ruling R9.
   ========================================================================= */

/* ---------------------------------------------------------------- @font-face
   Filenames are the REAL on-disk names in /fonts/, restored from 42cebcd under
   ruling R15. They are deliberately NOT renamed — the original demo-site.html
   referenced invented short names, which is why none of its fonts ever loaded
   (OBSERVATIONS #3). Reference what exists.
   -------------------------------------------------------------------------- */

/* Display — Bricolage Grotesque */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/bricolage-grotesque-v9-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/bricolage-grotesque-v9-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/bricolage-grotesque-v9-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Body — Hanken Grotesk */
@font-face {
    font-family: "Hanken Grotesk";
    src: url("/fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Hanken Grotesk";
    src: url("/fonts/hanken-grotesk-v12-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Hanken Grotesk";
    src: url("/fonts/hanken-grotesk-v12-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* UI voice — Space Mono */
@font-face {
    font-family: "Space Mono";
    src: url("/fonts/space-mono-v17-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Space Mono";
    src: url("/fonts/space-mono-v17-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------- tokens */

:root {
    /* Palette — unchanged from css/style.css :root (R9) */
    --bg-0: #0c0b0a;
    --bg-1: #141110;
    --bg-2: #1c1816;
    --gold: #e6c15a;
    --ember: #ff9a3c;
    --text-main: #f2f2f2;
    --text-muted: #b8b1aa;
    --border-gold: rgba(230, 193, 90, 0.35);
    --glass-dark: rgba(15, 12, 10, 0.55);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.65);
    --glow-gold: 0 0 18px rgba(230, 193, 90, 0.25);

    /* Derived */
    --hairline: rgba(255, 255, 255, 0.06);
    --hairline-strong: rgba(255, 255, 255, 0.12);

    /* Type */
    --font-display: "Bricolage Grotesque", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: "Hanken Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Scale */
    --step--1: 0.82rem;
    --step-0: 1rem;
    --step-1: 1.15rem;
    --step-2: clamp(1.4rem, 2.5vw, 1.75rem);
    --step-3: clamp(1.9rem, 4vw, 2.6rem);
    --step-4: clamp(3rem, 10vw, 6.5rem);

    /* Space */
    --space-xs: 0.5rem;
    --space-sm: 0.9rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    /* Shape */
    --radius: 18px;
    --radius-pill: 999px;
    /* Aliases kept so the app pages' page-specific CSS resolves against the
       same scale (they were authored against style.css's names). */
    --radius-lg: 14px;
    --radius-xl: 18px;

    /* Layout */
    --measure: 74rem;
    --gutter: 1.75rem;
}

/* --------------------------------------------------------------- foundation */

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

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

body {
    margin: 0;
    background: var(--bg-0);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

p { margin: 0; }

img {
    max-width: 100%;
    display: block;
}

a { color: inherit; }

/* Visible focus everywhere. Never remove without replacing. */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: var(--space-md);
    top: -4rem;
    z-index: 100;
    padding: 0.7rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius);
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-md); }

.wrap {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

/* ---------------------------------------------------------------- site nav */

.site-header {
    position: relative;
    z-index: 10;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: var(--measure);
    margin-inline: auto;
    padding: var(--space-md) var(--gutter);
}

.brand {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
}
.brand b {
    color: var(--gold);
    font-weight: 700;
}

.nav-list {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-list a:hover { color: var(--gold); }

/* ------------------------------------------------------------------- hero
   Full-bleed flagship. The project art sits behind a scrim so display type
   stays legible over it — the scrim is the contrast guarantee, not decoration.
   -------------------------------------------------------------------------- */


.card__media picture {
    display: block;
    width: 100%;
    height: 100%;
}


.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: var(--space-md);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
}
.eyebrow::before {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
}


.hero__lede {
    max-width: 34rem;
    font-size: var(--step-1);
    margin-bottom: var(--space-md);
}


.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.cta {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cta--primary {
    border: 1px solid var(--border-gold);
    background: rgba(230, 193, 90, 0.12);
    color: var(--gold);
    box-shadow: var(--glow-gold);
}
.cta--primary:hover { background: rgba(230, 193, 90, 0.22); }

.cta--ghost {
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--text-muted);
}
.cta--ghost:hover {
    border-color: var(--border-gold);
    color: var(--gold);
}

.hero__note {
    margin-top: var(--space-sm);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    color: var(--text-muted);   /* R37: was rgba(184,177,170,.7), which computed to
                                   3.39:1 over the 0.86 panel on a white keyart --
                                   under the 4.5 floor for small text. Full-opacity
                                   --text-muted gives 6.47:1. */
}

/* Facts strip under the hero copy */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
    list-style: none;
    padding-inline: 0;
}

.facts dt,
.facts .fact__k {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--gold);
}

.facts dd,
.facts .fact__v {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* -------------------------------------------------------------------- rail
   Horizontal scroller. Deliberately count-agnostic: `grid-auto-columns` sizes
   whatever cards exist, so adding or removing a project needs no CSS change.
   The survival ruling for the nine project pages is still pending.
   -------------------------------------------------------------------------- */

.section { padding-block: var(--space-xl) var(--space-2xl); }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.section__head h2 {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* DEAD as of Round 6: the rail's 'scroll →' hint was removed when the rail dropped to two
   cards. Kept for now — new projects will make the rail scrollable again. Round 7 decides. */
.section__hint {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    color: rgba(184, 177, 170, 0.5);
}

.rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 1fr);
    gap: var(--space-sm);
    margin: 0;
    padding: 0 0 var(--space-md);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-gold) transparent;
}

.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb {
    background: var(--border-gold);
    border-radius: var(--radius-pill);
}

.card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-1);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover,
.card:focus-visible {
    border-color: var(--border-gold);
    transform: translateY(-3px);
}

.card__media {
    aspect-ratio: 4 / 3;
    background: var(--bg-2);
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.card:hover .card__media img { opacity: 1; }

.card__body { padding: var(--space-sm) 1.1rem 1.2rem; }

.card__body h3 {
    font-size: var(--step-0);
    margin-bottom: 0.3rem;
}

.card__body p {
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------- about */

.about {
    border-block: 1px solid var(--hairline);
    background: var(--bg-1);
    padding-block: var(--space-xl);
}

.about__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.about__inner h2 {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.about__inner p {
    max-width: 42rem;
    color: var(--text-muted);
}
.about__inner p + p { margin-top: var(--space-sm); }

/* ------------------------------------------------------------------ footer */

.site-footer {
    padding: var(--space-lg) var(--gutter) var(--space-xl);
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    list-style: none;
    padding: 0;
}

.footer-links a {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--gold); }

.footer-copy {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    color: rgba(184, 177, 170, 0.5);
}

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

@media (max-width: 46rem) {
    :root { --gutter: 1.25rem; }

    .facts { gap: var(--space-md); }
    .about__inner { grid-template-columns: 1fr; gap: var(--space-sm); }
    .nav-list { gap: var(--space-sm); }
}

/* ------------------------------------------------------- reduced motion
   Honour the OS setting: no transforms, no transitions, no snap animation.
   ------------------------------------------------------------------------ */

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

    .card:hover,
    .card:focus-visible { transform: none; }

    .rail { scroll-snap-type: none; }
}

/* ============================================================================
   PAGE COMPONENTS — added Round 7 (R-migrations)
   Shared shell for every non-homepage page: the auth-aware nav, page headers,
   prose/article typography, definition lists, notes, error pages.
   The dev's complaint that drove this: the old pages "look old with huge text
   boxes". The fix is a real measure (~68ch), a type scale, and breathing room —
   not a narrower box.
   ========================================================================= */

/* --- auth-aware nav -------------------------------------------------------
   Same visual language as the homepage nav, but keeps the DOM contract
   js/auth-navbar.js expects: #loginNav, #dashboardNav, #userNav, #navUsername.
   That script is cosmetic (swaps Login for username + Dashboard) and exits
   safely if the IDs are absent. Preserved deliberately — restyle the shell,
   don't regress behaviour.
   -------------------------------------------------------------------------- */

.nav-list .user-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-list .user-name {
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
}

.nav-list .logout-link { white-space: nowrap; }

/* --- page header ---------------------------------------------------------- */

.page-header {
    padding-block: var(--space-xl) var(--space-lg);
    border-bottom: 1px solid var(--hairline);
}

.page-header .eyebrow { margin-bottom: var(--space-sm); }

.page-header h1 {
    font-size: var(--step-3);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-sm);
}

.page-header .lede {
    max-width: 46ch;
    color: var(--text-muted);
    font-size: var(--step-1);
}

/* --- prose ----------------------------------------------------------------
   A real measure. Long-form text caps at ~68ch; the container may be wider.
   -------------------------------------------------------------------------- */

.page-main { padding-block: var(--space-lg) var(--space-2xl); }

.prose {
    max-width: 68ch;
    color: var(--text-muted);
}

.prose > * + * { margin-top: var(--space-md); }

.prose h2 {
    margin-top: var(--space-xl);
    font-size: var(--step-2);
    color: var(--text-main);
}

.prose h3 {
    margin-top: var(--space-lg);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--gold);
    font-family: var(--font-display);
}

.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose p,
.prose li { line-height: 1.75; }

.prose ul,
.prose ol {
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prose li::marker { color: var(--border-gold); }

.prose a {
    color: var(--gold);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

.prose strong { color: var(--text-main); }

.prose hr {
    border: none;
    border-top: 1px solid var(--hairline);
    margin-block: var(--space-xl);
}

.prose blockquote {
    margin-inline: 0;
    padding: var(--space-md) var(--space-md) var(--space-md) 1.25rem;
    border-left: 2px solid var(--border-gold);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.prose blockquote > * + * { margin-top: var(--space-sm); }

/* --- definition lists (Impressum's field pairs) --------------------------- */

.legal-fields {
    display: grid;
    gap: var(--space-md);
    margin-block: var(--space-md);
}

.legal-fields dt {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.legal-fields dd {
    margin: 0.3rem 0 0;
    color: var(--text-main);
}

/* --- aside note ----------------------------------------------------------- */

.legal-note,
.note {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border-left: 2px solid var(--border-gold);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--step--1);
    color: var(--text-muted);
}

/* --- back link ------------------------------------------------------------ */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.back-link:hover { color: var(--gold); }

/* --- feature grid (project pages) ----------------------------------------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
    list-style: none;
    padding: 0;
}

.feature {
    padding: var(--space-md);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--bg-1);
}

.feature h3 {
    font-size: var(--step-0);
    margin-bottom: 0.4rem;
    color: var(--text-main);
}

.feature p {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- tech/meta strip ------------------------------------------------------ */

.meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
    list-style: none;
    padding-left: 0;
}

.meta-strip li {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.meta-strip li::before {
    content: "·";
    margin-right: var(--space-xs);
    color: var(--border-gold);
}
.meta-strip li:first-child::before { content: none; }

/* --- error pages (403 / 404) ---------------------------------------------- */

.error-page {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--gutter);
    text-align: center;
}

.error-page__code {
    font-family: var(--font-display);
    font-size: clamp(4rem, 18vw, 9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold);
    opacity: 0.16;
}

.error-page h1 {
    margin-top: calc(var(--space-lg) * -1);
    font-size: var(--step-3);
}

.error-page p {
    margin: var(--space-md) auto 0;
    max-width: 40ch;
    color: var(--text-muted);
}

.error-page .cta-row { justify-content: center; margin-top: var(--space-lg); }

/* --- body layout for shell pages ------------------------------------------ */

.page-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-body > main { flex: 1 0 auto; }

/* --- project page hero (compact cousin of the homepage hero) --------------- */

.project-hero {
    position: relative;
    min-height: 42vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--hairline);
}

.project-hero__media { position: absolute; inset: 0; }
.project-hero__media picture { display: block; width: 100%; height: 100%; }
.project-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.38;
}

.project-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,11,10,.72) 0%, rgba(12,11,10,.32) 40%, rgba(12,11,10,.96) 100%);
}

.project-hero__body {
    position: relative;
    width: 100%;
    padding-block: var(--space-xl) var(--space-lg);
}

.project-hero h1 {
    font-size: var(--step-3);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-sm);
    text-shadow: 0 4px 30px rgba(0,0,0,.6);
}

.project-hero .tagline {
    max-width: 46ch;
    color: var(--text-main);
    font-size: var(--step-1);
}

/* --- embedded demo frame -------------------------------------------------- */

.demo-frame {
    margin-top: var(--space-md);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-1);
}

.demo-frame iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: 0;
}

@media (max-width: 46rem) {
    .project-hero { min-height: 34vh; }
    .demo-frame iframe { height: 460px; }
}

/* --- Round 7 follow-up: classes that were in page markup with no rule anywhere.
   .legal-toc / .legal-summary come from the original Datenschutz content (they were
   unstyled under style.css too — pre-existing, surfaced by the class-resolution check).
   .fact is the wrapper in the homepage facts list; its children were already styled. */

.legal-toc {
    padding: var(--space-md);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--bg-1);
}
.legal-toc ul { margin-top: var(--space-sm); }

.legal-summary {
    display: block;
    margin-top: var(--space-sm);
    padding-left: 1rem;
    border-left: 2px solid var(--border-gold);
    color: var(--text-muted);
}

.fact { min-width: 0; }

/* ============================================================================
   AUTH + DASHBOARD COMPONENTS — added Round 8 (R25), mobile-first
   The dev's brief: it works, but on mobile it absolutely doesn't look good.
   So every rule below is written narrow-first; the wide-screen layout is the
   media query, not the default.
   ========================================================================= */

/* --- centred auth card (login) -------------------------------------------- */

.auth-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--gutter);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-lg);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--shadow-soft);
}

.auth-card h1 {
    font-size: var(--step-2);
    margin-bottom: .4rem;
}

.auth-card .lede {
    color: var(--text-muted);
    font-size: var(--step--1);
    margin-bottom: var(--space-md);
}

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--space-md); }

.field label {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.field input {
    /* 16px minimum: anything smaller makes iOS Safari zoom on focus */
    font-size: 1rem;
    font-family: inherit;
    padding: .85rem .9rem;
    min-height: 2.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline-strong);
    background: rgba(0, 0, 0, .3);
    color: var(--text-main);
    width: 100%;
}
.field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.field input.input-error { border-color: rgba(224, 82, 82, .65); }

.error-msg {
    display: none;               /* the login JS flips this to flex — contract kept */
    align-items: center;
    gap: .6rem;
    margin-bottom: var(--space-md);
    padding: .75rem .9rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(224, 82, 82, .35);
    background: rgba(224, 82, 82, .08);
    color: #e8837f;
    font-size: var(--step--1);
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

/* Buttons: thumb-sized by default. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline-strong);
    background: rgba(255, 255, 255, .03);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--step--1);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover, .btn:focus-visible { color: var(--gold); border-color: var(--border-gold); }

.btn.primary {
    border-color: var(--border-gold);
    background: rgba(230, 193, 90, .12);
    color: var(--gold);
}
.btn.primary:hover { background: rgba(230, 193, 90, .22); }

.btn.danger { border-color: rgba(224, 82, 82, .4); color: #e8837f; }
.btn.danger:hover { background: rgba(224, 82, 82, .12); border-color: rgba(224, 82, 82, .7); }

.btn.small { min-height: 2.25rem; padding: .45rem 1rem; font-size: .72rem; }

/* --- dashboard shell ------------------------------------------------------
   Mobile-first: single column, nav collapsed behind a toggle. The two-column
   layout is the >=60rem enhancement, not the default.
   -------------------------------------------------------------------------- */

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: .75rem var(--gutter);
    background: rgba(12, 11, 10, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    min-width: 0;
}
.app-brand .dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--gold); box-shadow: var(--glow-gold); flex: none;
}
.app-brand b { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--text-main); }
.app-brand small { display: block; font-size: .68rem; color: var(--text-muted); letter-spacing: .1em; }

.app-user {
    display: flex; align-items: center; gap: .5rem;
    min-width: 0;
}
.app-user .name { font-size: var(--step--1); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user .meta { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

/* nav toggle — visible only on narrow screens */
.nav-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 2.5rem; padding: .5rem .9rem;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
    background: transparent; color: var(--text-muted);
    font-family: var(--font-ui); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
}
.nav-toggle:hover { color: var(--gold); border-color: var(--border-gold); }

.app-body { display: flex; flex-direction: column; flex: 1 0 auto; }

.app-sidebar {
    display: none;
    padding: var(--space-md) var(--gutter);
    border-bottom: 1px solid var(--hairline);
    background: var(--bg-1);
}
.app-sidebar[data-open="true"] { display: block; }

.nav-section + .nav-section { margin-top: var(--space-md); }
.nav-title {
    font-family: var(--font-ui); font-size: .66rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem;
}
.nav-item {
    display: flex; align-items: center; gap: .65rem;
    min-height: 2.75rem;            /* thumb-sized */
    padding: .55rem .7rem;
    border-radius: var(--radius-lg);
    color: var(--text-muted); text-decoration: none;
    font-size: var(--step--1);
}
.nav-item:hover, .nav-item:focus-visible { background: rgba(255,255,255,.04); color: var(--gold); }
.nav-item.active { background: rgba(230,193,90,.10); color: var(--gold); }
.nav-item .icon { width: 1.05rem; height: 1.05rem; flex: none; }
.nav-sub { font-size: .74rem; color: rgba(184,177,170,.6); padding: .2rem .7rem 0; }

/* R-fix-4 (Round 11): `flex: 1 0 auto` + the default `min-width: auto` made this
   element able to GROW but never SHRINK. At >=60rem .app-body is a ROW flex
   container, so .app-main's width is the main axis and its min-content size
   became a floor. Chart.js (responsive) measures this element's width through
   .mon-layout, sizes the canvas to it, the wider canvas raises the min-content
   width, .app-main grows, Chart.js measures again -- a ratchet that advanced on
   every 30s poll and every resize. That is the "grows infinitely to the right".
   On mobile .app-body is a COLUMN, where width is the cross axis and is
   stretched rather than content-derived, which is why only desktop showed it.
   Round 9's minmax(0,...) and min-width:0 were correct but sat one level BELOW
   the unconstrained element. `1 1 auto` + `min-width: 0` closes the loop. */
.app-main { flex: 1 1 auto; min-width: 0; padding: var(--space-lg) var(--gutter) var(--space-2xl); }

.header-row { margin-bottom: var(--space-md); }
.header-row h1 { font-size: var(--step-2); margin-bottom: .3rem; }
.header-row p { color: var(--text-muted); font-size: var(--step--1); max-width: 60ch; }

.searchbar {
    display: flex; align-items: center; gap: .5rem;
    margin-top: var(--space-md);
    padding: .1rem .9rem;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
    background: rgba(0,0,0,.3);
}
.searchbar .icon { width: 1rem; height: 1rem; color: var(--text-muted); flex: none; }
.searchbar input {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none;
    color: var(--text-main); font-family: inherit;
    font-size: 1rem;                /* 16px: no iOS zoom-on-focus */
    min-height: 2.6rem;
}

/* filter chips scroll rather than wrap into a wall on mobile */
.filters {
    display: flex; gap: .5rem;
    margin-top: var(--space-md);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .2rem;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
    flex: none;
    min-height: 2.25rem; padding: .4rem 1rem;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
    background: transparent; color: var(--text-muted);
    font-family: var(--font-ui); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
}
.chip:hover { color: var(--gold); border-color: var(--border-gold); }
.chip.active { background: rgba(230,193,90,.12); border-color: var(--border-gold); color: var(--gold); }

/* JS-rendered card grid */
.app-section { margin-top: var(--space-xl); }
.app-section > h2 {
    font-family: var(--font-ui); font-size: .7rem; font-weight: 400;
    letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
    margin-bottom: var(--space-sm);
}
.app-grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
.app-card {
    display: block; padding: var(--space-md);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--bg-1); text-decoration: none; color: inherit;
    transition: border-color .2s ease, transform .2s ease;
}
.app-card:hover, .app-card:focus-visible { border-color: var(--border-gold); transform: translateY(-2px); }
.app-card h3 { font-size: var(--step-0); margin-bottom: .3rem; }
.app-card p { font-size: var(--step--1); color: var(--text-muted); line-height: 1.6; }
.app-card.disabled { opacity: .55; pointer-events: none; }
.badge {
    display: inline-block; margin-bottom: .5rem;
    padding: .2rem .6rem; border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--hairline-strong); color: var(--text-muted);
}
.badge.public  { border-color: rgba(63,208,201,.4); color: #6fd8d2; }
.badge.private { border-color: var(--border-gold); color: var(--gold); }
.badge.planned { border-color: var(--hairline-strong); color: var(--text-muted); }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.tag {
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .08em;
    padding: .15rem .5rem; border-radius: 6px;
    border: 1px solid var(--hairline); color: var(--text-muted);
}

/* --- >=60rem: the desktop enhancement ------------------------------------- */
@media (min-width: 60rem) {
    .nav-toggle { display: none; }
    .app-body { flex-direction: row; }
    .app-sidebar {
        display: block;
        flex: 0 0 16rem;
        border-bottom: 0;
        border-right: 1px solid var(--hairline);
        padding: var(--space-lg) var(--space-md);
    }
    .app-main { padding: var(--space-xl) var(--space-lg) var(--space-2xl); }
    .searchbar { max-width: 26rem; }
    .app-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
}

/* --- Argus monitoring section, native in the dashboard (R24) --------------- */

.mon-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin-bottom: var(--space-sm);
}
.mon-status {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-ui); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.mon-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-muted); flex: none; }
.mon-dot.online   { background: #4ad08a; box-shadow: 0 0 10px rgba(74,208,138,.5); }
.mon-dot.degraded { background: var(--ember); box-shadow: 0 0 10px rgba(255,154,60,.5); }
.mon-dot.offline  { background: #e05252; box-shadow: 0 0 10px rgba(224,82,82,.5); }
.mon-time { font-family: var(--font-ui); font-size: .66rem; color: rgba(184,177,170,.6); }

.mon-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.mon-stat {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--bg-1);
}
.mon-stat .k {
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); display: block;
}
.mon-stat .v {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--step-1); color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.mon-stat .sub { font-size: .7rem; color: rgba(184,177,170,.6); }

/* R-fix-7 (Round 12): `display: block` is load-bearing here, not decoration.
   monitor.js renders .mon-bar as a <span>, and its parent .mon-stat is a plain
   block -- nothing blockifies it. On an INLINE box `height`, vertical `margin`
   and `overflow` are all inert (CSS 2.1 §10.6.1, §8.3, §11.1.1), so every
   declaration in this rule except the colours was being discarded. The child
   <i> is `display:block`, which split the inline box and let the block escape
   into .mon-stat's block formatting context, where its `height: 100%` resolved
   against the STRETCHED grid item instead of against 4px -- a full-card-height
   gold slab, unclipped because `overflow: hidden` was inert too. That is the
   "bars floating outside their cards".
   .mon-dot is the control that proves it: same kind of <span>, but its parent
   .mon-service IS `display: flex`, so it gets blockified automatically and has
   always rendered correctly. */
.mon-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: .5rem; overflow: hidden; }
.mon-bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.mon-bar i.warn { background: var(--ember); }
.mon-bar i.crit { background: #e05252; }

/* .mon-chart-wrap / canvas sizing: superseded by the Round-9 R-fix-2 block below. */

.mon-services { display: grid; gap: .5rem; margin-top: var(--space-md); grid-template-columns: 1fr; }
.mon-service {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .9rem;
    border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--bg-1);
    font-size: var(--step--1);
}
.mon-service .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-service .st { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.mon-note {
    margin-top: var(--space-sm);
    font-size: .74rem; color: rgba(184,177,170,.6);
}

@media (min-width: 40rem) { .mon-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 60rem) {
    /* .mon-services columns and the canvas height are set in the R-fix-2 block below. */
}

/* Card thumbnail — dashboard.js renders this inside .app-card. */
.app-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-sm);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    background: var(--bg-2);
}
.app-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-thumb .badge { position: absolute; top: .6rem; left: .6rem; margin: 0; background: rgba(12,11,10,.82); }
.app-card__body > * + * { margin-top: .3rem; }

/* --- admin: create form + responsive users table -------------------------- */

.create-form {
    display: grid; gap: var(--space-sm);
    grid-template-columns: 1fr;
    padding: var(--space-md);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--bg-1);
    margin-bottom: var(--space-lg);
}
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field label {
    font-family: var(--font-ui); font-size: .66rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-muted);
}
.form-field input, .form-field select {
    font-size: 1rem;                 /* 16px: no iOS zoom */
    font-family: inherit;
    min-height: 2.75rem; padding: .6rem .8rem;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg);
    background: rgba(0,0,0,.3); color: var(--text-main); width: 100%;
}
.form-field input:focus-visible, .form-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.submit-btn {
    min-height: 2.75rem; padding: .7rem 1.4rem;
    border: 1px solid var(--border-gold); border-radius: var(--radius-pill);
    background: rgba(230,193,90,.12); color: var(--gold);
    font-family: var(--font-ui); font-size: var(--step--1);
    letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.submit-btn:hover { background: rgba(230,193,90,.22); }

/* Mobile: each row becomes a card. Desktop: a real table. */
.table-wrap { overflow-x: auto; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table thead { display: none; }
.users-table tr {
    display: block;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--bg-1);
}
.users-table td {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
    padding: .3rem 0; font-size: var(--step--1); border: 0;
}
.users-table td::before {
    content: attr(data-label);
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-muted); flex: none;
}
.users-table td[data-label="Actions"] { flex-wrap: wrap; justify-content: flex-start; margin-top: .5rem; }
.users-table td[data-label="Actions"]::before { flex-basis: 100%; margin-bottom: .3rem; }

.role-badge, .status-badge {
    display: inline-block; padding: .18rem .6rem; border-radius: var(--radius-pill);
    font-family: var(--font-ui); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--hairline-strong); color: var(--text-muted);
}
.role-badge.admin { border-color: var(--border-gold); color: var(--gold); }
.status-badge.active { border-color: rgba(74,208,138,.45); color: #6fd9a4; }
.status-badge.inactive { border-color: rgba(224,82,82,.4); color: #e8837f; }

.action-btn {
    min-height: 2.5rem; padding: .45rem .9rem; margin: .15rem .3rem .15rem 0;
    border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
    background: transparent; color: var(--text-muted);
    font-family: var(--font-ui); font-size: .66rem; letter-spacing: .08em;
    text-transform: uppercase; cursor: pointer;
}
.action-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--border-gold); }
.action-btn.danger { border-color: rgba(224,82,82,.35); color: #e8837f; }
.action-btn.danger:hover:not(:disabled) { background: rgba(224,82,82,.12); border-color: rgba(224,82,82,.7); color: #e8837f; }
.action-btn.promote { border-color: rgba(63,208,201,.35); color: #6fd8d2; }
.action-btn:disabled { opacity: .4; cursor: not-allowed; }

.toast {
    position: fixed; left: 50%; bottom: 1.25rem;
    transform: translateX(-50%) translateY(150%);
    max-width: 90vw; padding: .8rem 1.2rem;
    border: 1px solid var(--border-gold); border-radius: var(--radius-lg);
    background: rgba(20,16,14,.97); color: var(--text-main);
    font-size: var(--step--1); box-shadow: var(--shadow-soft);
    transition: transform .3s ease; z-index: 200;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.err { border-color: rgba(224,82,82,.6); color: #e8837f; }

.dash-legal { display: flex; gap: var(--space-md); margin-top: var(--space-xl); }
.dash-legal a {
    font-family: var(--font-ui); font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); text-decoration: none;
}
.dash-legal a:hover { color: var(--gold); }

@media (min-width: 48rem) { .create-form { grid-template-columns: 1fr 1fr auto auto; align-items: end; } }

@media (min-width: 60rem) {
    .users-table thead { display: table-header-group; }
    .users-table tr { display: table-row; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--hairline); background: none; border-radius: 0; }
    .users-table th {
        text-align: left; padding: .6rem .75rem;
        font-family: var(--font-ui); font-size: .64rem; letter-spacing: .12em;
        text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--hairline);
    }
    .users-table td { display: table-cell; padding: .7rem .75rem; vertical-align: middle; }
    .users-table td::before { content: none; }
    .users-table td[data-label="Actions"] { margin: 0; white-space: nowrap; }
}

/* ============================================================================
   NAVBAR MOBILE FIX — Round 9 (R-fix-1)
   Round 8 added the auth affordance to the public nav (Dashboard, username,
   Logout) and a Menu toggle + user block to the dashboard topbar. Neither had
   a wrap or a narrow-width treatment, so both overflowed 360px:
     .site-nav  logged out 328px, LOGGED IN 507px  (inner width is 320px)
     .app-topbar                  456px
   That is a Round-8 regression, and the logged-in homepage was the worst case —
   which is the state the dev was in when he saw it.

   Fix: wrapping as the structural guarantee (no single item is wider than the
   viewport, so overflow becomes impossible rather than unlikely), plus tighter
   tracking and gaps at narrow widths so the common cases still fit one line.
   Desktop is untouched — every rule here is inside a max-width query except the
   two flex-wrap declarations, which only take effect when something would have
   overflowed anyway.
   ========================================================================= */

.site-nav { flex-wrap: wrap; }
.nav-list { flex-wrap: wrap; min-width: 0; }
.nav-list .user-name,
.nav-list .logout-link { white-space: nowrap; }

.app-topbar { flex-wrap: wrap; }
.app-brand { min-width: 0; flex: 1 1 auto; }
.app-brand b, .app-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.app-user { flex: 0 1 auto; min-width: 0; }

@media (max-width: 46rem) {
    /* public nav */
    .site-nav {
        gap: .55rem 1rem;
        padding-block: 1rem;
    }
    .brand { letter-spacing: .16em; }        /* 0.28em costs ~20px of a 320px line */
    .nav-list { gap: .5rem 1rem; }
    /* The username comes from /auth/me and has no length bound, so unlike every
       fixed nav item it can still overflow. Clamp it the way .app-user .name
       already is, rather than calling the layout safe by structure alone. */
    .nav-list .user-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
    .nav-list .user-nav { gap: .5rem; }

    /* dashboard topbar */
    .app-topbar { gap: .5rem .75rem; padding: .65rem var(--gutter); }
    .app-brand b { letter-spacing: .12em; }
    .app-user { gap: .4rem; }
    .btn.small { padding: .45rem .9rem; }
}

/* Very narrow (≈320px and the logged-in worst case): let the nav take its own
   full-width row under the brand rather than fighting for the same line. */
@media (max-width: 26rem) {
    .site-nav > .nav-list { flex-basis: 100%; }
    .nav-list .user-name { max-width: 9rem; }
    .app-topbar > .app-user { flex-basis: 100%; justify-content: flex-end; }
}

/* ============================================================================
   DASHBOARD TABS + PROJECT-FAMILY CARDS + MONITOR SIZING — Round 9
   ========================================================================= */

/* --- tab bar (R-fix-3) ---------------------------------------------------- */

.tabbar {
    display: flex; gap: .4rem;
    margin-top: var(--space-md);
    border-bottom: 1px solid var(--hairline);
}
.tab {
    min-height: 2.75rem;
    display: inline-flex; align-items: center;
    padding: .6rem 1.1rem;
    border: 1px solid transparent; border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-family: var(--font-ui); font-size: var(--step--1);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted); text-decoration: none;
    margin-bottom: -1px;
}
.tab:hover { color: var(--gold); }
.tab.active {
    color: var(--gold);
    border-color: var(--hairline);
    background: var(--bg-1);
}

#panel-projects > .searchbar { margin-top: var(--space-md); }

/* --- project-family cards (R28) ------------------------------------------- */

.app-card__body h3 { font-size: var(--step-1); }

.app-links {
    list-style: none; padding: 0;
    margin: var(--space-sm) 0 0;
    display: flex; flex-direction: column; gap: .35rem;
}
.app-links li {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    padding: .4rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.02);
    min-height: 2.5rem;
}
.app-link {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--step--1); color: var(--text-main); text-decoration: none;
}
a.app-link:hover, a.app-link:focus-visible { color: var(--gold); }
.app-link.disabled { color: var(--text-muted); }

.chip-status, .chip-note {
    flex: none;
    font-family: var(--font-ui); font-size: .6rem;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .12rem .5rem; border-radius: var(--radius-pill);
    border: 1px solid var(--hairline-strong); color: var(--text-muted);
}
.chip-status.live { border-color: rgba(74,208,138,.4); color: #6fd9a4; }
.chip-status.planned { border-color: var(--hairline-strong); color: var(--text-muted); }
.chip-note { border-color: var(--border-gold); color: var(--gold); }

.app-empty { color: var(--text-muted); font-size: var(--step--1); padding: var(--space-md) 0; }

/* --- Monitor sizing (R-fix-2) ---------------------------------------------
   The Round-8 version set the canvas with `height: 220px !important` and left
   the container unsized, so Chart.js's responsive resize fought the override
   and the chart came out wrong on both form factors. Correct shape: give the
   CONTAINER an explicit height, let the canvas fill it, and let Chart.js do the
   rest with maintainAspectRatio:false (which monitor.js already sets).
   -------------------------------------------------------------------------- */

.mon-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md); }

.mon-chart-wrap {
    margin-top: 0;
    padding: var(--space-md);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--bg-1);
    /* the container owns the height; the canvas fills it */
    height: 260px;
    min-width: 0;
}
.mon-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.mon-services { margin-top: 0; align-content: start; }

@media (min-width: 40rem) { .mon-chart-wrap { height: 300px; } }

@media (min-width: 60rem) {
    /* desktop gets a real two-column layout instead of stretched mobile
       proportions: chart takes the room, services stack beside it */
    .mon-layout { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
    .mon-chart-wrap { height: 340px; }
    .mon-services { grid-template-columns: 1fr; }
}


/* ==================================================================
   PROJECT-PAGE ANATOMY  (the "Neptune anatomy", n-*)
   ------------------------------------------------------------------
   Round 9 (R30/R32). These components were authored page-local on
   /projects/Neptune/ and are promoted here now that three pages want
   them: Neptune, Heimdall and Emberbound.

   The components are palette-agnostic: they consume --n-* custom
   properties, and each page supplies its own values through a theme
   class on <body> (see .heimdall below). That is the seam that lets
   one anatomy carry three different-looking pages.

   Round 10 (OQ #32, ruled): the duplication is GONE. Neptune's page-local
   <style> block was removed and it now rides these components with a .neptune
   theme class, exactly as Heimdall and Emberbound do. All three pages are
   themed the same way; there is no second copy of these rules anywhere.
   ================================================================== */

/* ---- hero ---- */
        .n-hero {
            position: relative;
            min-height: 72vh;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
        }
        .n-hero__media { position: absolute; inset: 0; }
        .n-hero__media picture { display: block; width: 100%; height: 100%; }
        .n-hero__media img { width: 100%; height: 100%; object-fit: cover; }
        .n-hero__scrim {
            position: absolute; inset: 0;
            background:
                linear-gradient(180deg, rgba(var(--n-abyss-rgb, 5,9,15),.55) 0%, rgba(var(--n-abyss-rgb, 5,9,15),.18) 38%, rgba(var(--n-abyss-rgb, 5,9,15),.97) 100%),
                radial-gradient(ellipse 70% 60% at 20% 100%, rgba(var(--n-teal-rgb, 63,208,201),.14), transparent 70%);
        }
        .n-hero__body { position: relative; width: 100%; padding-block: var(--space-2xl) var(--space-xl); }

        .n-eyebrow {
            display: inline-flex; align-items: center; gap: .65rem;
            margin-bottom: var(--space-md);
            font-family: var(--font-ui); font-size: var(--step--1);
            letter-spacing: .24em; text-transform: uppercase; color: var(--n-teal);
        }
        .n-eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }

        .n-hero h1 {
            font-size: clamp(3rem, 12vw, 7rem);
            line-height: .92; letter-spacing: .04em;
            margin-bottom: var(--space-sm);
            color: #fff;
            text-shadow: 0 6px 44px rgba(0,0,0,.65);
        }
        .n-tagline {
            font-size: var(--step-1); color: var(--n-foam);
            font-family: var(--font-body); max-width: 40ch;
        }

        /* ---- the disclaimer: mandatory, near the top, not a footnote ---- */
        .n-disclaimer {
            margin-top: var(--space-lg);
            max-width: 62ch;
            padding: var(--space-md) var(--space-md) var(--space-md) 1.25rem;
            border: 1px solid var(--n-line);
            border-left: 3px solid var(--n-teal);
            border-radius: 0 var(--radius) var(--radius) 0;
            background: rgba(var(--n-deep-rgb, 10,20,32),.82);
            backdrop-filter: blur(6px);
            color: var(--n-foam);
            font-size: var(--step-0);
            line-height: 1.7;
        }
        .n-disclaimer strong { color: var(--n-teal); }

        /* ---- sections ---- */
        .n-section { padding-block: var(--space-2xl); border-top: 1px solid var(--n-line-soft); }
        .n-section:first-of-type { border-top: 0; }

        .n-section h2 {
            font-family: var(--font-ui);
            font-size: var(--step--1);
            font-weight: 400;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--n-teal);
            margin-bottom: var(--space-md);
        }
        .n-lead { max-width: 62ch; font-size: var(--step-1); line-height: 1.75; color: var(--n-foam); }
        .n-body { max-width: 68ch; color: var(--n-muted); line-height: 1.8; }
        .n-body > * + * { margin-top: var(--space-md); }
        .n-body strong { color: var(--n-foam); }
        .n-body em { color: var(--n-foam); font-style: italic; }

        /* ---- pipeline diagram ---- */
        .n-pipeline {
            display: grid;
            gap: var(--space-sm);
            margin-block: var(--space-lg);
            list-style: none; padding: 0;
        }
        @media (min-width: 60rem) {
            .n-pipeline { grid-template-columns: repeat(6, 1fr); gap: 0; }
        }
        .n-stage {
            position: relative;
            padding: var(--space-md);
            border: 1px solid var(--n-line);
            border-radius: var(--radius);
            background: linear-gradient(180deg, var(--n-panel), var(--n-deep));
        }
        @media (min-width: 60rem) {
            .n-stage { border-radius: 0; border-left-width: 0; }
            .n-stage:first-child { border-left-width: 1px; border-radius: var(--radius) 0 0 var(--radius); }
            .n-stage:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
            /* the flow arrow */
            .n-stage + .n-stage::before {
                content: ""; position: absolute; left: -1px; top: 50%;
                width: 10px; height: 10px; margin-top: -5px;
                border-top: 1px solid var(--n-teal); border-right: 1px solid var(--n-teal);
                transform: rotate(45deg); background: var(--n-abyss);
            }
        }
        .n-stage__n {
            font-family: var(--font-ui); font-size: .68rem; letter-spacing: .18em;
            color: var(--n-blue); display: block; margin-bottom: .5rem;
        }
        .n-stage__t {
            font-family: var(--font-display); font-weight: 700;
            font-size: var(--step-0); color: var(--n-foam); margin-bottom: .35rem;
        }
        .n-stage__d { font-size: .82rem; line-height: 1.55; color: var(--n-muted); }

        /* ---- feature cards ---- */
        .n-features {
            display: grid; gap: var(--space-md);
            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
            list-style: none; padding: 0; margin-top: var(--space-md);
        }
        .n-feature {
            padding: var(--space-md);
            border: 1px solid var(--n-line-soft);
            border-radius: var(--radius);
            background: var(--n-deep);
            transition: border-color .2s ease, transform .2s ease;
        }
        .n-feature:hover { border-color: var(--n-line); transform: translateY(-2px); }
        .n-feature h3 {
            font-family: var(--font-display); font-size: var(--step-0);
            color: var(--n-foam); margin-bottom: .4rem;
        }
        .n-feature p { font-size: .87rem; line-height: 1.6; color: var(--n-muted); }

        /* ---- callout ---- */
        .n-callout {
            margin-top: var(--space-lg);
            padding: var(--space-md) var(--space-md) var(--space-md) 1.25rem;
            border-left: 2px solid var(--n-blue);
            background: rgba(var(--n-blue-rgb, 74,159,224),.06);
            border-radius: 0 var(--radius) var(--radius) 0;
            max-width: 68ch; color: var(--n-foam);
        }

        /* ---- screenshot placeholders ---- */
        .n-shots {
            display: grid; gap: var(--space-md);
            grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
            list-style: none; padding: 0; margin-top: var(--space-md);
        }
        .n-shot {
            display: flex; flex-direction: column;
            border: 1px solid var(--n-line);
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--n-deep);
        }
        .n-shot picture { display: block; }
        .n-shot img {
            display: block; width: 100%; height: auto;
            border-bottom: 1px solid var(--n-line-soft);
        }
        .n-shot figcaption { padding: var(--space-sm) var(--space-md) var(--space-md); }
        .n-shot b {
            display: block; margin-bottom: .25rem;
            font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em;
            text-transform: uppercase; color: var(--n-teal);
        }
        .n-shot span { font-size: .82rem; line-height: 1.5; color: var(--n-muted); }

        /* ---- tech strip ---- */
        .n-stack {
            display: flex; flex-wrap: wrap; gap: .6rem;
            list-style: none; padding: 0; margin-top: var(--space-md);
        }
        .n-stack li {
            font-family: var(--font-ui); font-size: .78rem; letter-spacing: .06em;
            padding: .4rem .8rem;
            border: 1px solid var(--n-line-soft); border-radius: var(--radius-pill);
            background: var(--n-deep); color: var(--n-muted);
        }

        /* ---- CTA ---- */
        .n-cta { text-align: center; padding-block: var(--space-2xl); border-top: 1px solid var(--n-line-soft); }
        .n-cta__btn {
            display: inline-block;
            padding: 1rem 2.4rem;
            border-radius: var(--radius-pill);
            font-family: var(--font-ui); font-size: .8rem;
            letter-spacing: .14em; text-transform: uppercase;
            border: 1px solid var(--n-line);
            background: rgba(var(--n-teal-rgb, 63,208,201),.08);
            color: var(--n-muted);
            cursor: not-allowed;
        }
        .n-cta__note {
            margin-top: var(--space-sm);
            font-family: var(--font-ui); font-size: .76rem;
            letter-spacing: .1em; color: var(--n-teal);
        }
        .n-slot {
            display: inline-flex; align-items: center; gap: .5rem;
            margin-top: var(--space-lg);
            padding: .6rem 1.1rem;
            border: 1px dashed var(--n-line);
            border-radius: var(--radius-pill);
            font-family: var(--font-ui); font-size: .76rem;
            letter-spacing: .08em; color: var(--n-muted);
        }

        .n-footnote {
            margin-top: var(--space-xl);
            font-size: .82rem; color: var(--n-muted); text-align: center;
            font-style: italic;
        }

        @media (max-width: 46rem) {
            .n-hero { min-height: 60vh; }
            .n-hero__body { padding-block: var(--space-xl) var(--space-lg); }
        }


/* ---- Neptune theme: the deep ocean. Round 10, OQ #32 closed.
   These are byte-for-byte the values Neptune carried in its own page-local
   <style> block, including the four RGB triplets, which equal the literals the
   shared components use as their var() fallbacks -- so the computed result is
   identical to what shipped before the dedup. ---- */
.neptune {
    --n-abyss: #05090f;
    --n-deep:  #0a1420;
    --n-panel: #0e1b2a;
    --n-teal:  #3fd0c9;
    --n-blue:  #4a9fe0;
    --n-foam:  #cfe9f2;
    --n-muted: #8fa8ba;
    --n-line:      rgba(63, 208, 201, 0.22);
    --n-line-soft: rgba(207, 233, 242, 0.08);
    --n-abyss-rgb: 5,9,15;
    --n-deep-rgb:  10,20,32;
    --n-teal-rgb:  63,208,201;
    --n-blue-rgb:  74,159,224;
}
.neptune { background: var(--n-abyss); color: var(--n-foam); }
.neptune .wrap { max-width: 72rem; }

/* ---- Heimdall theme: the forge. Iron and ember against the site's gold. ---- */
.heimdall {
    --n-abyss: #0b0908;
    --n-deep:  #171210;
    --n-panel: #201814;
    --n-teal:  #e8a33d;   /* ember — the accent the components treat as primary */
    --n-blue:  #c2703a;   /* forge copper — the secondary accent */
    --n-foam:  #f2e6d8;   /* warm off-white body text */
    --n-line:      rgba(232, 163, 61, 0.24);   /* hairlines, ember-tinted */
    --n-line-soft: rgba(242, 230, 216, 0.09);  /* the quieter divider */
    --n-muted:     #b09a86;                    /* captions and secondary text */
    /* RGB triplets, for the components that lay alpha over the palette */
    --n-abyss-rgb: 11,9,8;
    --n-deep-rgb:  23,18,16;
    --n-teal-rgb:  232,163,61;
    --n-blue-rgb:  194,112,58;
}
.heimdall { background: var(--n-abyss); color: var(--n-foam); }
.heimdall .wrap { max-width: 72rem; }

/* The console CTA is a real link here, not Neptune's disabled button, so the
   shared .n-cta__btn rule needs anchor-appropriate box behaviour. */
/* The shared .n-cta__btn was authored for Neptune's DISABLED <button> -- muted
   colour, cursor:not-allowed, no states. Heimdall and Emberbound use a real <a>,
   so anchors must undo the disabled treatment and get live-link states. The `a.`
   prefix cannot reach Neptune's <button>, so Neptune is unaffected. */
a.n-cta__btn {
    display: inline-block;
    text-decoration: none;
    color: var(--n-teal);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
a.n-cta__btn:hover,
a.n-cta__btn:focus-visible {
    background: rgba(var(--n-teal-rgb, 63,208,201), .16);
    border-color: var(--n-teal);
    color: var(--n-foam);
}
a.n-cta__btn:focus-visible { outline: 2px solid var(--n-teal); outline-offset: 3px; }

/* ---- Emberbound theme: the Long Dusk. Dark violet dusk, ember gold. ---- */
.emberbound {
    --n-abyss: #0a0710;
    --n-deep:  #150e1d;
    --n-panel: #1d1428;
    --n-teal:  #f0a93c;   /* ember -- the primary accent */
    --n-blue:  #a06ad4;   /* dusk violet -- the secondary accent */
    --n-foam:  #efe6f2;
    --n-line:      rgba(240, 169, 60, 0.22);
    --n-line-soft: rgba(239, 230, 242, 0.08);
    --n-muted:     #a294af;
    --n-abyss-rgb: 10,7,16;
    --n-deep-rgb:  21,14,29;
    --n-teal-rgb:  240,169,60;
    --n-blue-rgb:  160,106,212;
}
.emberbound { background: var(--n-abyss); color: var(--n-foam); }
.emberbound .wrap { max-width: 72rem; }

/* ============================================================================
   LIGHTBOX — click/tap a screenshot for a bigger view (Round 10, R35).
   The trigger is a real <a> to the full-size master, so this is styling on top
   of a feature that already works without JavaScript.
   ========================================================================= */

.n-shot__link { display: block; cursor: zoom-in; text-decoration: none; }
.n-shot__link:focus-visible { outline: 2px solid var(--n-teal); outline-offset: 3px; }

.lb {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-md);
    background: rgba(0, 0, 0, .88);
}
.lb[hidden] { display: none; }          /* [hidden] must beat display:flex */
body.lb-open { overflow: hidden; }      /* no scrolling behind the overlay */

.lb__fig { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lb__img {
    max-width: 100%;
    max-height: 82vh;
    width: auto; height: auto;
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.lb__cap {
    margin-top: var(--space-sm);
    font-family: var(--font-ui); font-size: .8rem; letter-spacing: .06em;
    text-transform: uppercase; color: #cfd6dd;
}
.lb__close {
    position: absolute; top: var(--space-md); right: var(--space-md);
    width: 2.75rem; height: 2.75rem;      /* >= the 44px touch floor */
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; line-height: 1;
    color: #fff; background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
    cursor: pointer;
}
.lb__close:hover { background: rgba(255, 255, 255, .2); }
.lb__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .lb { animation: lb-in .16s ease-out; }
    @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================================
   THREE-FLAGSHIP HERO SWITCHER (Round 10, R33)

   No-JS / script-failed state: .hero-switch is a plain stack of full heroes,
   Emberbound first. Everything that collapses that stack is scoped to
   `.is-switcher`, which hero.js adds only once it is actually running.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   HERO PANEL — the literal project-page overlay (R43, Round 13)

   Round 12 built these art-forward (art in its own band, text on solid below).
   The dev resolved the flagged premise the OTHER way: he wants the project-page
   look he approved -- text OVER the art, the project pages' own scrim doing the
   legibility work. So each panel now IS an .n-hero:

     .hero-panel  == .n-hero      (positioned stage, art-cover, text at flex-end)
     .n-hero__media / .n-hero__scrim   reused VERBATIM -- the same class rules the
                                       project pages use; not re-implemented here
     .hero-panel__body == .n-hero__body

   Each panel carries its project's THEME class (.emberbound / .neptune /
   .heimdall), exactly as the project pages carry it on <body>. That gives the
   reused .n-hero__scrim its per-project tint (the scrim reads --n-abyss-rgb /
   --n-teal-rgb) and the text its --n-foam colour -- so the panel matches its
   own project page, not a generic default.

   THE MURK LAYERS STAY DEAD (dev's explicit instruction, and the Round-12
   lesson: count the layers over the art TOGETHER). The ONLY thing painting over
   the plate is .n-hero__scrim -- the project pages' own gradient, one layer.
   There is no .hero__media img opacity, no .hero__body::before slab, no feather.
   Enumerated and verified in REPORT-13 §3.
--------------------------------------------------------------------------- */

.hero-panel {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.hero-panel__body {
    position: relative;      /* above the absolutely-positioned media + scrim */
    width: 100%;
    padding-block: var(--space-2xl) var(--space-xl);
}
.hero-panel__title {
    /* the project pages' own display-face hero scale */
    font-size: clamp(2.6rem, 10vw, 6rem);
    line-height: .95;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-sm);
    color: #fff;
}

@media (max-width: 46rem) {
    .hero-panel { min-height: 64vh; }
    .hero-panel__body { padding-block: var(--space-xl) var(--space-lg); }
}

/* ---- enhanced: one panel at a time -------------------------------------- */

.hero-switch.is-switcher { position: relative; }
.hero-switch.is-switcher .hero-switch__track {
    display: grid;
    grid-template-areas: "panel";      /* all three panels in ONE cell, so the
                                          track is as tall as the tallest and
                                          switching cannot shift the layout;
                                          equal min-height already makes them
                                          the same height */
}
.hero-switch.is-switcher .hero-panel {
    grid-area: panel;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.hero-switch.is-switcher .hero-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;                        /* the incoming panel fades in ON TOP */
}
/* R-fix-6 (retained from Round 12): the outgoing panel stays FULLY OPAQUE
   underneath for the transition, so the crossfade never composites two
   translucent layers to <1 alpha and dips to the page background. */
.hero-switch.is-switcher .hero-panel.is-leaving {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .hero-switch.is-switcher .hero-panel.is-active { transition: opacity .45s ease; }
}

/* ---- controls (built by hero.js) ---------------------------------------- */

.hero-nav {
    position: absolute; left: 0; right: 0; bottom: var(--space-md);
    z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
    padding-inline: var(--gutter);
}
.hero-arrow, .hero-dot { cursor: pointer; border: 1px solid rgba(255,255,255,.34); background: rgba(0,0,0,.34); color: #fff; }
.hero-arrow {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; line-height: 1;
}
.hero-arrow:hover, .hero-dot:hover { background: rgba(0,0,0,.6); }
.hero-arrow:focus-visible, .hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hero-dots { display: flex; gap: .5rem; }
.hero-dot {
    width: .7rem; height: .7rem; padding: 0; border-radius: 50%;
    text-indent: -9999px; overflow: hidden;
}
.hero-dot.is-on { background: var(--gold); border-color: var(--gold); }

/* Directional hooks: the arrows sit either side of the dots and lean their
   glyph very slightly toward the direction they travel. */
.hero-arrow--prev { padding-right: .12em; }
.hero-arrow--next { padding-left: .12em; }

@media (max-width: 46rem) {
    .hero-panel { min-height: 72vh; }
    .hero-arrow { width: 2.5rem; height: 2.5rem; }
}

/* ---- Gilgamesh theme: clay and lapis. Dark earth ground, lapis-blue accent,
   bronze secondary — the tablet and the seal. Added with /projects/Gilgamesh/
   (TASK-40 of that project). Same seam as the other three themes: values only,
   the n-* anatomy stays untouched. ---- */
.gilgamesh {
    --n-abyss: #0f0c07;
    --n-deep:  #1b1610;
    --n-panel: #251e15;
    --n-teal:  #5aa7e8;   /* lapis — the accent the components treat as primary */
    --n-blue:  #cf9250;   /* bronze — the secondary accent */
    --n-foam:  #eee6d9;   /* warm off-white body text */
    --n-muted: #ab9d89;
    --n-line:      rgba(90, 167, 232, 0.22);
    --n-line-soft: rgba(238, 230, 217, 0.08);
    --n-abyss-rgb: 15,12,7;
    --n-deep-rgb:  27,22,16;
    --n-teal-rgb:  90,167,232;
    --n-blue-rgb:  207,146,80;
}
.gilgamesh { background: var(--n-abyss); color: var(--n-foam); }
.gilgamesh .wrap { max-width: 72rem; }