/* ============================================================
   causality.club — styles.css
   A digital salon for structured debate.
   "Every claim is a node. Every because is a wire."
   ============================================================ */

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

/* ---------- 1. Reset ---------- */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        min-height: 100vh;
        line-height: 1.6;
    }

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

    a {
        color: inherit;
        text-decoration: none;
    }

    button {
        font: inherit;
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
    }

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

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

/* ---------- 2. Tokens ---------- */
@layer tokens {
    :root {
        /* Color palette */
        --ink: #0B1220;
        --ink-muted: #3A4558;
        --paper: #F4F6FB;
        --paper-deep: #0E1422;

        --frost-100: rgba(255, 255, 255, 0.55);
        --frost-200: rgba(255, 255, 255, 0.28);
        --frost-300: rgba(255, 255, 255, 0.72);
        --frost-dark-100: rgba(20, 28, 44, 0.55);

        --signal-cyan: #5EEAD4;
        --signal-magenta: #F472B6;
        --signal-amber: #FCD34D;
        --trace: rgba(94, 234, 212, 0.35);
        --trace-dim: rgba(94, 234, 212, 0.18);

        /* Fonts */
        --font-display: 'Fraunces', 'Lora', Georgia, serif;
        --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --font-mono: 'JetBrains Mono', 'Space Grotesk', ui-monospace, monospace;

        /* Type scale (modular 1.25) */
        --fs-xs: 0.8rem;
        --fs-sm: 0.9375rem;
        --fs-base: 1.0625rem;
        --fs-md: 1.25rem;
        --fs-lg: 1.563rem;
        --fs-xl: 1.953rem;
        --fs-2xl: 2.441rem;
        --fs-3xl: 3.052rem;
        --fs-4xl: 4.5rem;

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

        /* Geometry */
        --radius-sm: 6px;
        --radius-md: 14px;
        --radius-lg: 22px;
        --radius-xl: 34px;

        --content-max: 68ch;
        --graph-max: 1200px;

        /* Motion */
        --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
        --motion-fast: 220ms;
        --motion-base: 480ms;
        --motion-slow: 720ms;
    }
}

/* ---------- 3. Base ---------- */
@layer base {
    body {
        font-family: var(--font-body);
        font-size: var(--fs-base);
        line-height: 1.7;
        color: var(--ink);
        background:
            radial-gradient(ellipse at top left, rgba(94, 234, 212, 0.08), transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(244, 114, 182, 0.06), transparent 55%),
            var(--paper);
        background-attachment: fixed;
        overflow-x: hidden;
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--ink);
    }

    p {
        max-width: var(--content-max);
    }

    em {
        font-style: italic;
        font-family: var(--font-display);
    }

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

/* ---------- 4. Components ---------- */
@layer components {

    /* ---- Frost utility (used as a class on panels) ---- */
    .frost {
        background: var(--frost-100);
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 1px 0 rgba(11, 18, 32, 0.04);
    }

    /* ---- Ambient circuit background ---- */
    .ambient-circuit {
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.9;
    }

    .ambient-circuit svg {
        width: 100%;
        height: 100%;
    }

    .blob {
        animation: blob-drift 32s var(--ease-in-out) infinite alternate;
    }

    .blob-b {
        animation-duration: 44s;
        animation-direction: alternate-reverse;
    }

    @keyframes blob-drift {
        0%   { transform: translate(0, 0) scale(1); }
        50%  { transform: translate(30px, -20px) scale(1.04); }
        100% { transform: translate(-20px, 30px) scale(0.98); }
    }

    /* ---- Header / atmospheric band ---- */
    .atmospheric-band {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: var(--space-4) var(--space-6);
        background: linear-gradient(180deg, rgba(244, 246, 251, 0.85), rgba(244, 246, 251, 0.55));
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border-bottom: 1px solid rgba(11, 18, 32, 0.06);
    }

    .header-inner {
        max-width: 1280px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-display);
        font-size: var(--fs-md);
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        transition: opacity var(--motion-fast) var(--ease-out-quart);
    }

    .brand-mark {
        color: var(--signal-cyan);
        transition: transform var(--motion-base) var(--ease-out-quart);
    }

    .brand:hover .brand-mark {
        transform: rotate(-12deg);
    }

    .brand-name {
        font-feature-settings: 'ss01' on;
    }

    .brand-dot {
        color: var(--signal-magenta);
    }

    .primary-nav {
        display: flex;
        gap: var(--space-5);
        align-items: center;
        font-size: var(--fs-sm);
        font-weight: 500;
    }

    .nav-link {
        position: relative;
        padding: var(--space-2) 0;
        color: var(--ink-muted);
        transition: color var(--motion-fast) var(--ease-out-quart);
    }

    .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 0;
        height: 1px;
        background: var(--signal-cyan);
        transition: width var(--motion-base) var(--ease-out-quart);
    }

    .nav-link:hover,
    .nav-link.is-active {
        color: var(--ink);
    }

    .nav-link:hover::after,
    .nav-link.is-active::after {
        width: 100%;
    }

    .nav-link.is-active::before {
        content: '';
        position: absolute;
        right: -8px;
        bottom: 1px;
        width: 4px;
        height: 4px;
        background: var(--signal-cyan);
        border-radius: 50%;
    }

    .nav-cta {
        padding: var(--space-2) var(--space-4);
        border: 1px solid rgba(11, 18, 32, 0.18);
        border-radius: var(--radius-xl);
        color: var(--ink);
        background: var(--frost-100);
    }

    .nav-cta::after {
        display: none;
    }

    .nav-cta:hover {
        border-color: var(--signal-cyan);
        background: var(--frost-300);
    }

    /* ---- Buttons ---- */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        font-family: var(--font-body);
        font-size: var(--fs-sm);
        font-weight: 500;
        letter-spacing: -0.005em;
        border-radius: var(--radius-xl);
        cursor: pointer;
        transition:
            backdrop-filter var(--motion-base) var(--ease-out-quart),
            background var(--motion-base) var(--ease-out-quart),
            border-color var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart);
        border: 1px solid rgba(11, 18, 32, 0.15);
        color: var(--ink);
    }

    .btn-primary.frost {
        background: var(--frost-100);
        border-color: rgba(11, 18, 32, 0.2);
        backdrop-filter: blur(12px) saturate(140%);
    }

    .btn-primary.frost:hover {
        backdrop-filter: blur(6px) saturate(140%);
        background: var(--frost-300);
        border-color: var(--ink);
    }

    .btn-ghost {
        background: transparent;
        border-color: rgba(11, 18, 32, 0.15);
    }

    .btn-ghost:hover {
        border-color: var(--ink);
        background: var(--frost-200);
    }

    .btn-small {
        padding: var(--space-2) var(--space-4);
        font-size: var(--fs-xs);
    }

    .btn svg {
        transition: transform var(--motion-fast) var(--ease-out-quart);
    }

    .btn:hover svg {
        transform: translateX(2px);
    }

    /* ---- Section heads ---- */
    .section-head {
        max-width: var(--content-max);
        margin: 0 auto var(--space-7);
        text-align: center;
    }

    .section-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--ink-muted);
        margin-bottom: var(--space-3);
    }

    .section-tag::before {
        content: '';
        width: 18px;
        height: 1px;
        background: var(--signal-cyan);
    }

    .section-title {
        font-family: var(--font-display);
        font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
        font-weight: 350;
        font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 350;
        letter-spacing: -0.025em;
        line-height: 1.05;
        margin-bottom: var(--space-4);
    }

    .section-sub {
        margin: 0 auto;
        max-width: 56ch;
        color: var(--ink-muted);
        font-size: var(--fs-md);
        line-height: 1.6;
    }

    /* ---- Atrium ---- */
    main {
        position: relative;
        z-index: 1;
    }

    .atrium {
        max-width: 1280px;
        margin: 0 auto;
        padding: var(--space-9) var(--space-6) var(--space-8);
        position: relative;
    }

    .atrium-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-7);
        align-items: end;
    }

    .atrium-eyebrow {
        grid-column: 1 / -1;
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--ink-muted);
        margin-bottom: var(--space-2);
    }

    .eyebrow-pulse {
        position: relative;
        width: 8px;
        height: 8px;
        background: var(--signal-cyan);
        border-radius: 50%;
    }

    .eyebrow-pulse::after {
        content: '';
        position: absolute;
        inset: -6px;
        border: 1px solid var(--signal-cyan);
        border-radius: 50%;
        opacity: 0;
        animation: pulse-ring 2.4s var(--ease-out-quart) infinite;
    }

    @keyframes pulse-ring {
        0%   { transform: scale(0.75); opacity: 0.6; }
        100% { transform: scale(1.6);  opacity: 0; }
    }

    .display-headline {
        grid-column: 1 / 2;
        font-family: var(--font-display);
        font-size: clamp(var(--fs-2xl), 6vw, var(--fs-4xl));
        line-height: 1.0;
        font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 350;
        letter-spacing: -0.035em;
        color: var(--ink);
        margin-bottom: var(--space-5);
        transition: font-variation-settings var(--motion-slow) var(--ease-out-quart);
    }

    .display-headline.is-sharp {
        font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 380;
    }

    .display-headline .line {
        display: block;
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart);
    }

    .display-headline .line.is-in {
        opacity: 1;
        transform: translateY(0);
    }

    .display-headline .line:nth-child(2) { transition-delay: 80ms; }
    .display-headline .line:nth-child(3) { transition-delay: 160ms; }
    .display-headline .line:nth-child(4) { transition-delay: 240ms; }

    .line-italic {
        font-style: italic;
        color: var(--ink-muted);
    }

    .display-headline em {
        color: var(--signal-cyan);
        font-style: italic;
        font-weight: 400;
    }

    .atrium-lede {
        grid-column: 1 / 2;
        font-size: var(--fs-md);
        color: var(--ink-muted);
        line-height: 1.65;
        max-width: 50ch;
        margin-bottom: var(--space-5);
    }

    .atrium-actions {
        grid-column: 1 / 2;
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    /* ---- Featured debate card ---- */
    .featured-debate {
        grid-column: 2 / 3;
        grid-row: 2 / 6;
        align-self: stretch;
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        border-color: rgba(11, 18, 32, 0.08);
        position: relative;
        overflow: hidden;
        transition:
            backdrop-filter var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart);
    }

    .featured-debate::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(94, 234, 212, 0.18), transparent 70%);
        pointer-events: none;
    }

    .featured-debate:hover {
        backdrop-filter: blur(6px) saturate(140%);
        transform: translateY(-2px);
    }

    .featured-head {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .featured-label {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--signal-cyan);
        filter: brightness(0.7);
    }

    .featured-meta {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        color: var(--ink-muted);
    }

    .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
        vertical-align: -1px;
    }

    .dot-cyan    { background: var(--signal-cyan); }
    .dot-magenta { background: var(--signal-magenta); }
    .dot-amber   { background: var(--signal-amber); }

    .featured-title {
        font-family: var(--font-display);
        font-size: var(--fs-xl);
        font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 380;
        line-height: 1.18;
        margin-bottom: var(--space-3);
    }

    .featured-desc {
        color: var(--ink-muted);
        font-size: var(--fs-sm);
        margin-bottom: var(--space-5);
    }

    .featured-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink);
        position: relative;
    }

    .link-trace {
        display: inline-block;
        width: 22px;
        height: 1px;
        position: relative;
        background: var(--ink);
        transition: width var(--motion-base) var(--ease-out-quart);
    }

    .link-trace::after {
        content: '';
        position: absolute;
        right: -3px;
        top: -2.5px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ink);
    }

    .featured-link:hover .link-trace,
    a:hover .link-trace,
    button:hover .link-trace {
        width: 36px;
        background: var(--signal-cyan);
    }

    .featured-link:hover .link-trace::after,
    a:hover .link-trace::after,
    button:hover .link-trace::after {
        background: var(--signal-cyan);
    }

    /* ---- Floor / debate index ---- */
    .floor {
        max-width: 1280px;
        margin: 0 auto;
        padding: var(--space-9) var(--space-6);
    }

    .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: center;
        margin-bottom: var(--space-7);
    }

    .chip {
        padding: var(--space-2) var(--space-4);
        font-size: var(--fs-xs);
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        border-radius: var(--radius-xl);
        border: 1px solid rgba(11, 18, 32, 0.12);
        background: var(--frost-200);
        color: var(--ink-muted);
        transition:
            color var(--motion-fast) var(--ease-out-quart),
            border-color var(--motion-fast) var(--ease-out-quart),
            background var(--motion-fast) var(--ease-out-quart);
    }

    .chip:hover {
        color: var(--ink);
        border-color: var(--ink);
    }

    .chip.is-active {
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
    }

    .debate-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--space-5);
    }

    .debate-card {
        position: relative;
        padding: var(--space-5);
        border-radius: var(--radius-md);
        border-color: rgba(11, 18, 32, 0.08);
        cursor: pointer;
        transition:
            backdrop-filter var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart),
            opacity var(--motion-base) var(--ease-out-quart),
            filter var(--motion-base) var(--ease-out-quart);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .debate-card:hover {
        backdrop-filter: blur(6px) saturate(140%);
        transform: translateY(-3px);
    }

    .debate-grid.has-focus .debate-card:not(:hover) {
        opacity: 0.7;
        filter: blur(2px);
    }

    .card-circuit {
        height: 60px;
        margin-bottom: var(--space-2);
        opacity: 0.85;
    }

    .card-circuit svg {
        width: 100%;
        height: 100%;
    }

    .card-topic {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink-muted);
    }

    .card-title {
        font-family: var(--font-display);
        font-size: var(--fs-lg);
        font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 380;
        line-height: 1.2;
    }

    .card-desc {
        font-size: var(--fs-sm);
        color: var(--ink-muted);
        flex: 1;
    }

    .card-foot {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px dashed rgba(11, 18, 32, 0.12);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        color: var(--ink-muted);
    }

    .card-stat {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .card-cta {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--ink);
    }

    /* ---- Circuit / graph view ---- */
    .circuit {
        max-width: 1280px;
        margin: 0 auto;
        padding: var(--space-9) var(--space-6);
    }

    .circuit-stage {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: var(--space-5);
        align-items: stretch;
    }

    .circuit-canvas {
        padding: var(--space-5);
        border-radius: var(--radius-lg);
        border-color: rgba(11, 18, 32, 0.08);
        position: relative;
        overflow: hidden;
        min-height: 480px;
    }

    .circuit-canvas::before {
        content: '';
        position: absolute;
        inset: 16px;
        border: 1px dashed rgba(11, 18, 32, 0.05);
        border-radius: var(--radius-md);
        pointer-events: none;
    }

    .circuit-graph {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 1;
    }

    .trace {
        transition:
            stroke var(--motion-base) var(--ease-out-quart),
            stroke-width var(--motion-base) var(--ease-out-quart),
            opacity var(--motion-base) var(--ease-out-quart);
    }

    .trace.is-active {
        stroke: var(--signal-cyan);
        stroke-width: 2;
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.5));
    }

    .trace.is-dimmed {
        opacity: 0.25;
    }

    .node {
        cursor: pointer;
        transition:
            transform var(--motion-base) var(--ease-out-quart),
            opacity var(--motion-base) var(--ease-out-quart),
            filter var(--motion-base) var(--ease-out-quart);
        transform-box: fill-box;
        transform-origin: center;
    }

    .node-ring {
        fill: var(--frost-300);
        stroke: rgba(11, 18, 32, 0.5);
        stroke-width: 1;
        transition:
            stroke var(--motion-base) var(--ease-out-quart),
            stroke-width var(--motion-base) var(--ease-out-quart),
            fill var(--motion-base) var(--ease-out-quart);
    }

    .node-label {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        fill: var(--ink-muted);
        transition: fill var(--motion-base) var(--ease-out-quart);
    }

    .node:hover .node-ring,
    .node.is-active .node-ring {
        stroke: var(--signal-cyan);
        stroke-width: 1.5;
    }

    .node:hover .node-label,
    .node.is-active .node-label {
        fill: var(--ink);
    }

    .node:hover {
        filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.4));
    }

    .nodes:hover .node:not(:hover):not(.is-active) {
        opacity: 0.55;
    }

    .nodes.has-focus .node:not(.is-active):not(.is-ancestor) {
        opacity: 0.4;
        filter: blur(0.5px);
    }

    .node.is-active {
        filter: drop-shadow(0 0 10px rgba(94, 234, 212, 0.6));
    }

    .node.is-active .node-ring {
        animation: focus-pulse 2s ease-in-out infinite;
    }

    @keyframes focus-pulse {
        0%, 100% { opacity: 0.7; }
        50%      { opacity: 0.35; }
    }

    .node-led {
        transition: fill var(--motion-base) var(--ease-out-quart);
    }

    .node-sink.is-lit .node-led {
        fill: var(--signal-cyan);
    }

    .node-sink.is-lit .node-ring-led {
        stroke: var(--signal-cyan);
        stroke-width: 1.5;
    }

    .circuit-detail {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        border-color: rgba(11, 18, 32, 0.08);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .detail-tag {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink-muted);
    }

    .detail-tag-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--signal-cyan);
    }

    .detail-title {
        font-family: var(--font-display);
        font-size: var(--fs-xl);
        font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 380;
        line-height: 1.18;
    }

    .detail-body {
        color: var(--ink-muted);
        font-size: var(--fs-sm);
        line-height: 1.65;
    }

    .detail-path {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding-top: var(--space-3);
        border-top: 1px dashed rgba(11, 18, 32, 0.12);
    }

    .path-step {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--ink-muted);
    }

    .path-step em {
        font-family: var(--font-body);
        font-style: normal;
        text-transform: none;
        letter-spacing: 0;
        color: var(--ink-muted);
        opacity: 0.7;
    }

    .step-marker {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid var(--ink-muted);
    }

    .path-step.is-active {
        color: var(--ink);
    }

    .path-step.is-active .step-marker {
        background: var(--signal-cyan);
        border-color: var(--signal-cyan);
    }

    .detail-cta {
        display: flex;
        gap: var(--space-2);
        margin-top: auto;
    }

    /* ---- Manifesto / rules ---- */
    .manifesto {
        max-width: 980px;
        margin: 0 auto;
        padding: var(--space-9) var(--space-6);
    }

    .rules-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .rule {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: var(--space-5);
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        border-color: rgba(11, 18, 32, 0.08);
        transition:
            backdrop-filter var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart);
    }

    .rule:hover {
        backdrop-filter: blur(6px) saturate(140%);
        transform: translateX(4px);
    }

    .rule-num {
        font-family: var(--font-mono);
        font-size: var(--fs-md);
        color: var(--signal-cyan);
        filter: brightness(0.7);
        position: relative;
    }

    .rule-num span {
        display: inline-block;
    }

    .rule-num::after {
        content: '';
        display: block;
        width: 28px;
        height: 1px;
        background: currentColor;
        margin-top: 8px;
        opacity: 0.5;
    }

    .rule-title {
        font-family: var(--font-display);
        font-size: var(--fs-lg);
        font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 380;
        line-height: 1.25;
        margin-bottom: var(--space-3);
    }

    .rule-text {
        color: var(--ink-muted);
        line-height: 1.65;
    }

    .rule-text em {
        color: var(--ink);
    }

    /* ---- Join / induction ---- */
    .join {
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--space-9) var(--space-6);
    }

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

    .join-copy .section-tag {
        margin-bottom: var(--space-3);
    }

    .join-copy .section-title {
        text-align: left;
    }

    .join-text {
        color: var(--ink-muted);
        font-size: var(--fs-md);
        line-height: 1.65;
        margin-bottom: var(--space-5);
        max-width: 50ch;
    }

    .join-bullets {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .join-bullets li {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--ink-muted);
    }

    .bullet-marker {
        width: 12px;
        height: 12px;
        border: 1px solid var(--signal-cyan);
        border-radius: 50%;
        position: relative;
    }

    .bullet-marker::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background: var(--signal-cyan);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .join-form {
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        border-color: rgba(11, 18, 32, 0.08);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .field-label {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink-muted);
    }

    .field input,
    .field textarea {
        padding: var(--space-3) var(--space-4);
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(11, 18, 32, 0.12);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: var(--fs-sm);
        color: var(--ink);
        resize: vertical;
        transition:
            border-color var(--motion-fast) var(--ease-out-quart),
            background var(--motion-fast) var(--ease-out-quart);
    }

    .field input::placeholder,
    .field textarea::placeholder {
        color: var(--ink-muted);
        opacity: 0.55;
    }

    .field input:focus,
    .field textarea:focus {
        outline: none;
        border-color: var(--signal-cyan);
        background: rgba(255, 255, 255, 0.65);
    }

    .btn-submit {
        align-self: flex-start;
        margin-top: var(--space-2);
    }

    .form-note {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--signal-cyan);
        filter: brightness(0.7);
    }

    /* ---- Continuity band ---- */
    .continuity {
        max-width: 1280px;
        margin: 0 auto;
        padding: var(--space-9) var(--space-6) var(--space-7);
    }

    .continuity-inner {
        padding-top: var(--space-6);
        border-top: 1px dashed rgba(11, 18, 32, 0.18);
    }

    .continuity-eyebrow {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--ink-muted);
        margin-bottom: var(--space-5);
    }

    .continuity-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    .continuity-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-5);
        border: 1px solid rgba(11, 18, 32, 0.08);
        border-radius: var(--radius-md);
        background: var(--frost-200);
        backdrop-filter: blur(8px) saturate(140%);
        transition:
            border-color var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart),
            background var(--motion-base) var(--ease-out-quart);
    }

    .continuity-card:hover {
        border-color: var(--ink);
        background: var(--frost-300);
        transform: translateY(-2px);
    }

    .continuity-num {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--signal-cyan);
        filter: brightness(0.7);
    }

    .continuity-label {
        font-family: var(--font-display);
        font-size: var(--fs-md);
        font-variation-settings: 'opsz' 72, 'SOFT' 50, 'wght' 380;
        line-height: 1.3;
    }

    /* ---- Footer ---- */
    .site-footer {
        max-width: 1280px;
        margin: 0 auto;
        padding: var(--space-5) var(--space-6) var(--space-7);
        border-top: 1px solid rgba(11, 18, 32, 0.08);
    }

    .footer-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink-muted);
        padding: var(--space-2) 0;
    }

    .footer-toggle-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid var(--ink-muted);
        border-radius: 50%;
        text-align: center;
        line-height: 16px;
        font-size: 14px;
        transition: transform var(--motion-base) var(--ease-out-quart);
    }

    .footer-toggle[aria-expanded="true"] .footer-toggle-icon {
        transform: rotate(45deg);
    }

    .footer-drawer {
        margin-top: var(--space-5);
    }

    .footer-drawer[hidden] {
        display: none;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
        margin-bottom: var(--space-5);
    }

    .footer-grid h4 {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--ink);
        margin-bottom: var(--space-3);
        font-weight: 500;
    }

    .footer-grid p,
    .footer-grid li {
        font-size: var(--fs-sm);
        color: var(--ink-muted);
        line-height: 1.6;
    }

    .footer-grid ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .footer-grid a:hover {
        color: var(--ink);
    }

    .footer-bottom {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--ink-muted);
        padding-top: var(--space-4);
        border-top: 1px dashed rgba(11, 18, 32, 0.12);
    }

    /* ---- Side drawer ---- */
    .side-drawer {
        position: fixed;
        inset: 0;
        z-index: 100;
    }

    .side-drawer[hidden] {
        display: none;
    }

    .drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(11, 18, 32, 0.35);
        backdrop-filter: blur(4px);
        animation: fade-in var(--motion-base) var(--ease-out-quart);
    }

    .drawer-panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(440px, 90vw);
        padding: var(--space-7) var(--space-6);
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        border-color: rgba(11, 18, 32, 0.08);
        animation: slide-in-right var(--motion-base) var(--ease-out-quart);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        background: rgba(244, 246, 251, 0.85);
        backdrop-filter: blur(20px) saturate(140%);
        overflow-y: auto;
    }

    @keyframes fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes slide-in-right {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .drawer-tag {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--signal-magenta);
        filter: brightness(0.85);
    }

    .drawer-close {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(11, 18, 32, 0.18);
        border-radius: 50%;
        font-size: 22px;
        line-height: 1;
        color: var(--ink);
        transition:
            border-color var(--motion-fast) var(--ease-out-quart),
            background var(--motion-fast) var(--ease-out-quart);
    }

    .drawer-close:hover {
        border-color: var(--ink);
        background: var(--frost-300);
    }

    .drawer-title {
        font-family: var(--font-display);
        font-size: var(--fs-xl);
        font-variation-settings: 'opsz' 96, 'SOFT' 30, 'wght' 380;
        line-height: 1.2;
    }

    .drawer-body {
        color: var(--ink-muted);
        font-size: var(--fs-base);
        line-height: 1.7;
    }

    .drawer-meta {
        font-family: var(--font-mono);
        font-size: var(--fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--ink-muted);
        padding-top: var(--space-3);
        border-top: 1px dashed rgba(11, 18, 32, 0.12);
    }

    .drawer-trace {
        margin-top: auto;
        padding: var(--space-4);
        background: var(--frost-200);
        border-radius: var(--radius-md);
    }

    .drawer-trace-path {
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
        animation: trace-draw 1.4s var(--ease-out-quart) forwards;
    }

    @keyframes trace-draw {
        to { stroke-dashoffset: 0; }
    }

    /* ---- Read-progress ---- */
    .read-progress {
        position: fixed;
        top: 96px;
        left: 22px;
        bottom: 60px;
        width: 8px;
        z-index: 30;
        pointer-events: none;
    }

    .read-progress-track {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(11, 18, 32, 0.12);
        transform: translateX(-50%);
    }

    .read-progress-fill {
        position: absolute;
        left: 50%;
        top: 0;
        width: 1px;
        height: 0;
        background: var(--signal-cyan);
        transform: translateX(-50%);
        transition: height var(--motion-fast) linear;
        box-shadow: 0 0 6px rgba(94, 234, 212, 0.5);
    }

    .read-progress-via {
        position: absolute;
        left: 50%;
        top: 0;
        width: 8px;
        height: 8px;
        background: var(--signal-cyan);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 8px rgba(94, 234, 212, 0.7);
        transition: top var(--motion-fast) linear;
    }

    /* Section animation reveal */
    .section-head,
    .featured-debate,
    .debate-card,
    .rule,
    .join-form,
    .join-copy,
    .continuity-card {
        opacity: 0;
        transform: translateY(24px);
        transition:
            opacity var(--motion-base) var(--ease-out-quart),
            transform var(--motion-base) var(--ease-out-quart),
            backdrop-filter var(--motion-base) var(--ease-out-quart);
    }

    .section-head.is-in,
    .featured-debate.is-in,
    .debate-card.is-in,
    .rule.is-in,
    .join-form.is-in,
    .join-copy.is-in,
    .continuity-card.is-in {
        opacity: 1;
        transform: translateY(0);
    }

    .display-headline.is-in .line {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 5. Utilities ---------- */
@layer utilities {
    .stack > * + * {
        margin-top: var(--space-4);
    }

    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

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

/* ---------- 6. Responsive ---------- */
@layer overrides {
    @media (max-width: 1024px) {
        .atrium-grid {
            grid-template-columns: 1fr;
        }

        .featured-debate {
            grid-column: 1;
            grid-row: auto;
        }

        .display-headline,
        .atrium-lede,
        .atrium-actions {
            grid-column: 1;
        }

        .circuit-stage {
            grid-template-columns: 1fr;
        }

        .join-grid {
            grid-template-columns: 1fr;
        }

        .footer-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .continuity-row {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 720px) {
        .atrium {
            padding: var(--space-7) var(--space-4) var(--space-7);
        }

        .floor,
        .circuit,
        .manifesto,
        .join,
        .continuity {
            padding-left: var(--space-4);
            padding-right: var(--space-4);
        }

        .header-inner {
            flex-wrap: wrap;
            gap: var(--space-3);
        }

        .primary-nav {
            gap: var(--space-3);
            font-size: var(--fs-xs);
            flex-wrap: wrap;
        }

        .rule {
            grid-template-columns: 60px 1fr;
            padding: var(--space-5);
        }

        .read-progress {
            display: none;
        }

        .footer-grid {
            grid-template-columns: 1fr;
        }

        .display-headline {
            font-size: clamp(2.2rem, 12vw, 3.4rem);
        }

        .section-title {
            font-size: clamp(1.7rem, 7vw, 2.2rem);
        }
    }
}