/* ==========================================================================
   bcd.day — Blockchain Day
   Fairycore × Marble × Retro · Tilt-3D · Gradient palette · Sidebar layout
   ========================================================================== */

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

/* ============================ TOKENS ============================ */
@layer tokens {
    :root {
        /* Spec hex anchors */
        --c-amber:      #E8B76B;
        --c-magenta:    #E26FB6;
        --c-apricot:    #FFB27A;
        --c-periwinkle: #C9B8FF;
        --c-rose:       #FFD6E8;
        --c-seafoam:    #8EE0E0;
        --ink:          #1A1530;
        --c-violet:     #6A4CE0;

        /* Extended */
        --pale-gold: #F7E7A1;
        --bronze:    #B5763A;
        --vellum:    #F7F1E8;
        --vellum-2:  #EFE6D5;
        --plum-deep: #2B1F4D;

        /* Gradients */
        --grad-dawn: linear-gradient(135deg, #FFD6E8 0%, #C9B8FF 50%, #8EE0E0 100%);
        --grad-dusk: linear-gradient(135deg, #FFB27A 0%, #E26FB6 50%, #6A4CE0 100%);
        --grad-gild: linear-gradient(135deg, #F7E7A1 0%, #E8B76B 55%, #B5763A 100%);
        --grad-marble-base: linear-gradient(135deg, #F7F1E8 0%, #EFE6D5 60%, #E8DEC8 100%);

        /* Type */
        --font-display: "Fraunces", "Newsreader", Georgia, serif;
        --font-body:    "Newsreader", "Fraunces", Georgia, serif;
        --font-ui:      "Space Grotesk", "Inter", system-ui, sans-serif;
        --font-stamp:   "Special Elite", "Space Grotesk", monospace;

        /* Tilt + spacing */
        --tilt-base: 9deg;
        --tilt-rest: 4deg;
        --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
        --space-1: 0.5rem;
        --space-2: 1rem;
        --space-3: 1.5rem;
        --space-4: 2.25rem;
        --space-5: 3.5rem;
        --space-6: 5rem;

        --sidebar-w: 240px;
    }
}

/* ============================ RESET ============================ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }
    img, svg { display: block; max-width: 100%; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    input, button, textarea, select { font: inherit; color: inherit; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
}

/* ============================ BASE ============================ */
@layer base {
    html, body {
        min-height: 100%;
    }

    body {
        font-family: var(--font-body);
        font-size: 18px;
        line-height: 1.6;
        color: var(--ink);
        background: var(--vellum);
        background-image:
            radial-gradient(ellipse at 12% 8%,  rgba(255, 178, 122, 0.18), transparent 55%),
            radial-gradient(ellipse at 88% 94%, rgba(106, 76, 224, 0.14), transparent 55%),
            radial-gradient(ellipse at 78% 22%, rgba(142, 224, 224, 0.18), transparent 60%),
            radial-gradient(ellipse at 18% 82%, rgba(255, 214, 232, 0.18), transparent 60%),
            var(--vellum);
        background-attachment: fixed;
        overflow-x: hidden;
    }

    h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; }
    h1 { font-size: clamp(3.5rem, 9vw, 8rem); letter-spacing: -0.02em; }
    h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.012em; }
    h3 { font-size: 1.25rem; letter-spacing: -0.005em; }

    p { font-size: 1.07rem; line-height: 1.7; }
    em { font-style: italic; }
    strong { font-weight: 600; }
}

/* ============================ LAYOUT ============================ */
@layer layout {
    .canvas-wrap {
        display: grid;
        grid-template-columns: var(--sidebar-w) 1fr;
        min-height: 100vh;
    }

    /* ----- Sidebar ----- */
    .sidebar {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        padding: var(--space-4) var(--space-3);
        border-right: 1px solid rgba(26, 21, 48, 0.08);
        background:
            linear-gradient(180deg, rgba(247, 241, 232, 0.94), rgba(239, 230, 213, 0.86));
        backdrop-filter: blur(6px);
        z-index: 50;
    }

    .sidebar-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: var(--space-4);
    }

    .brand .wordmark {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 2rem;
        letter-spacing: -0.02em;
        font-variation-settings: "SOFT" 80, "WONK" 1;
    }
    .brand .wordmark .dot {
        background: var(--grad-dusk);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .brand .tagline {
        margin-top: 0.2rem;
        font-family: var(--font-ui);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.66);
    }

    .primary-nav {
        display: flex;
        flex-direction: column;
        gap: 0.18rem;
    }

    .nav-item {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 0.85rem;
        padding: 0.65rem 0.85rem 0.65rem 1.1rem;
        border-radius: 8px;
        font-family: var(--font-ui);
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.78);
        transition: color 220ms var(--easing), background-color 220ms var(--easing);
    }
    .nav-item .num {
        font-family: var(--font-stamp);
        font-size: 0.66rem;
        color: var(--bronze);
        letter-spacing: 0.1em;
    }
    .nav-item .label { font-weight: 500; }
    .nav-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 0;
        background: var(--grad-gild);
        border-radius: 2px;
        transform: translateY(-50%);
        transition: height 240ms var(--easing);
    }
    .nav-item::after {
        content: "";
        position: absolute;
        left: 1.1rem;
        right: 0.85rem;
        bottom: 0.5rem;
        height: 1px;
        background: var(--grad-gild);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 220ms var(--easing);
    }
    .nav-item:hover { color: var(--ink); }
    .nav-item:hover::after { transform: scaleX(1); }
    .nav-item.is-active { color: var(--ink); background: rgba(247, 231, 161, 0.18); }
    .nav-item.is-active::before { height: 70%; }

    .sidebar-foot {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .event-date {
        padding: 0.9rem 1rem;
        border: 1px dashed rgba(26, 21, 48, 0.2);
        border-radius: 6px;
        background: rgba(247, 241, 232, 0.5);
    }
    .date-label {
        font-family: var(--font-ui);
        font-size: 0.66rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.6);
    }
    .date-value {
        margin-top: 0.2rem;
        font-family: var(--font-stamp);
        font-size: 1.55rem;
        letter-spacing: 0.04em;
        color: var(--ink);
    }

    .ticker {
        padding: 0.9rem 1rem;
        border-radius: 6px;
        background: var(--grad-dawn);
        background-size: 220% 220%;
        animation: shimmer 9s ease-in-out infinite;
    }
    .ticker-label {
        font-family: var(--font-ui);
        font-size: 0.66rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink);
        opacity: 0.7;
    }
    .ticker-time {
        margin-top: 0.15rem;
        font-family: var(--font-stamp);
        font-size: 1.4rem;
        letter-spacing: 0.06em;
        color: var(--ink);
    }

    /* ----- Main canvas ----- */
    .canvas {
        position: relative;
        padding: var(--space-5) clamp(1.5rem, 4vw, 4rem) var(--space-6);
        perspective: 1600px;
        perspective-origin: 50% 30%;
    }

    .dust-field {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
    }
    .dust-field .mote {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(247, 231, 161, 0.9) 0%, rgba(247, 231, 161, 0) 70%);
        opacity: 0.55;
        will-change: transform;
    }

    /* ----- Block + tilt system ----- */
    .block {
        position: relative;
        margin-bottom: var(--space-6);
        z-index: 2;
    }
    .block:last-child { margin-bottom: 0; }

    .block[data-tilt="left"]  { padding-right: 6vw; padding-left: 0; }
    .block[data-tilt="right"] { padding-left: 6vw; padding-right: 0; }

    .block .marble-plate {
        --rx: 4deg;
        --ry: -8deg;
        transform-style: preserve-3d;
        transform:
            perspective(1500px)
            rotateX(var(--rx))
            rotateY(var(--ry))
            translateZ(0);
        transition: transform 600ms var(--easing);
        opacity: 0;
    }
    .block[data-tilt="right"] .marble-plate {
        --ry: 8deg;
    }
    .block.is-visible .marble-plate {
        --rx: 1.2deg;
        --ry: -3deg;
        opacity: 1;
    }
    .block[data-tilt="right"].is-visible .marble-plate {
        --ry: 3deg;
    }
    .block .marble-plate:hover {
        --rx: 0.6deg;
        --ry: -1.5deg;
    }
    .block[data-tilt="right"] .marble-plate:hover {
        --ry: 1.5deg;
    }
}

/* ============================ COMPONENTS ============================ */
@layer components {
    /* ----- Marble plate ----- */
    .marble-plate {
        position: relative;
        padding: clamp(2rem, 4vw, 3.5rem);
        border-radius: 18px;
        background:
            radial-gradient(ellipse at 22% 18%, rgba(255, 214, 232, 0.55), transparent 60%),
            radial-gradient(ellipse at 78% 30%, rgba(201, 184, 255, 0.5), transparent 60%),
            radial-gradient(ellipse at 55% 85%, rgba(142, 224, 224, 0.45), transparent 65%),
            var(--grad-marble-base);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.7) inset,
            0 30px 60px -30px rgba(26, 21, 48, 0.32),
            0 8px 24px -10px rgba(106, 76, 224, 0.18);
        overflow: hidden;
        isolation: isolate;
    }

    .marble-veins {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.55;
        z-index: 0;
        background:
            repeating-linear-gradient(118deg,
                transparent 0px, transparent 22px,
                rgba(106, 76, 224, 0.06) 22px, rgba(106, 76, 224, 0.06) 23px,
                transparent 23px, transparent 64px,
                rgba(226, 111, 182, 0.05) 64px, rgba(226, 111, 182, 0.05) 65px),
            repeating-linear-gradient(28deg,
                transparent 0px, transparent 38px,
                rgba(232, 183, 107, 0.05) 38px, rgba(232, 183, 107, 0.05) 39px),
            radial-gradient(ellipse at 70% 15%, rgba(247, 231, 161, 0.35), transparent 55%);
        mix-blend-mode: multiply;
        transition: opacity 280ms var(--easing);
    }
    .marble-plate:hover .marble-veins { opacity: 0.7; }

    .veins-rose {
        background:
            repeating-linear-gradient(118deg,
                transparent 0 22px,
                rgba(226, 111, 182, 0.08) 22px 24px,
                transparent 24px 64px),
            radial-gradient(ellipse at 25% 80%, rgba(255, 214, 232, 0.6), transparent 60%);
    }
    .veins-seafoam {
        background:
            repeating-linear-gradient(122deg,
                transparent 0 22px,
                rgba(142, 224, 224, 0.1) 22px 24px,
                transparent 24px 60px),
            radial-gradient(ellipse at 80% 20%, rgba(142, 224, 224, 0.5), transparent 60%);
    }
    .veins-lilac {
        background:
            repeating-linear-gradient(112deg,
                transparent 0 22px,
                rgba(201, 184, 255, 0.1) 22px 24px,
                transparent 24px 60px),
            radial-gradient(ellipse at 30% 30%, rgba(201, 184, 255, 0.55), transparent 60%);
    }
    .veins-gold {
        background:
            repeating-linear-gradient(110deg,
                transparent 0 22px,
                rgba(232, 183, 107, 0.1) 22px 24px,
                transparent 24px 60px),
            radial-gradient(ellipse at 70% 70%, rgba(247, 231, 161, 0.6), transparent 65%);
    }
    .veins-dusk {
        background:
            repeating-linear-gradient(124deg,
                transparent 0 22px,
                rgba(106, 76, 224, 0.07) 22px 24px,
                transparent 24px 60px),
            radial-gradient(ellipse at 70% 30%, rgba(255, 178, 122, 0.5), transparent 55%),
            radial-gradient(ellipse at 30% 80%, rgba(106, 76, 224, 0.25), transparent 55%);
    }
    .veins-vellum {
        background:
            repeating-linear-gradient(118deg,
                transparent 0 22px,
                rgba(26, 21, 48, 0.04) 22px 24px,
                transparent 24px 60px),
            radial-gradient(ellipse at 50% 50%, rgba(247, 231, 161, 0.3), transparent 60%);
    }

    .marble-plate > *:not(.marble-veins) { position: relative; z-index: 1; }

    .block-stamp {
        font-family: var(--font-stamp);
        font-size: 0.78rem;
        letter-spacing: 0.18em;
        color: var(--bronze);
        margin-bottom: var(--space-2);
        display: inline-block;
        padding: 0.28rem 0.7rem;
        border: 1px solid rgba(181, 118, 58, 0.5);
        border-radius: 999px;
        background: rgba(247, 241, 232, 0.45);
    }

    .block-title {
        margin-bottom: var(--space-3);
        max-width: 22ch;
    }

    /* ----- Hero ----- */
    .block-00 .marble-plate {
        min-height: 78vh;
        padding: clamp(2.5rem, 5vw, 5rem);
    }
    .display-h {
        font-family: var(--font-display);
        font-weight: 700;
        font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
        line-height: 0.95;
    }
    .display-h .line {
        display: block;
    }
    .display-h .line:nth-child(2) {
        margin-left: clamp(1rem, 4vw, 4rem);
        font-style: italic;
        font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    }

    .gradient-text {
        background: var(--grad-dawn);
        background-size: 220% 220%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: shimmer 6s linear infinite;
    }

    .hero-promise {
        margin-top: var(--space-3);
        max-width: 38ch;
        font-size: clamp(1.05rem, 1.4vw, 1.3rem);
        line-height: 1.55;
        font-style: italic;
        color: rgba(26, 21, 48, 0.84);
    }

    .hero-meta {
        margin-top: var(--space-4);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-4);
        padding-top: var(--space-3);
        border-top: 1px solid rgba(26, 21, 48, 0.12);
    }
    .meta-cell {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    .meta-label {
        font-family: var(--font-ui);
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.55);
    }
    .meta-value {
        font-family: var(--font-stamp);
        font-size: 1.05rem;
        letter-spacing: 0.04em;
        color: var(--ink);
    }

    .sunburst {
        position: absolute;
        width: 120px;
        height: 120px;
        opacity: 0.5;
        color: var(--bronze);
    }
    .sunburst-tr { top: 1.5rem; right: 1.5rem; }

    /* ----- CTA pill ----- */
    .cta-pill {
        --hr: 0deg;
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        margin-top: var(--space-4);
        padding: 1rem 1.6rem;
        font-family: var(--font-ui);
        font-size: 0.84rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink);
        background: var(--vellum);
        border-radius: 999px;
        cursor: pointer;
        overflow: hidden;
        transition: transform 240ms var(--easing), filter 280ms var(--easing);
        isolation: isolate;
    }
    .cta-pill::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 999px;
        background: var(--grad-dusk);
        background-size: 220% 220%;
        z-index: -1;
        filter: hue-rotate(var(--hr));
        transition: filter 320ms var(--easing);
        animation: shimmer 8s linear infinite;
    }
    .cta-pill::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 999px;
        background: var(--vellum);
        z-index: -1;
    }
    .cta-pill:hover {
        --hr: 25deg;
        transform: translateY(-1px);
    }
    .cta-pill .cta-arrow { font-size: 1.05rem; transition: transform 200ms var(--easing); }
    .cta-pill:hover .cta-arrow { transform: translateX(3px); }
    .sparkle {
        position: absolute;
        top: 6px; right: 12px;
        width: 10px; height: 10px;
        background:
            linear-gradient(transparent 4px, var(--bronze) 4px 6px, transparent 6px),
            linear-gradient(90deg, transparent 4px, var(--bronze) 4px 6px, transparent 6px);
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 220ms var(--easing), transform 220ms var(--easing);
    }
    .cta-pill:hover .sparkle { opacity: 1; transform: scale(1) rotate(15deg); }

    /* ----- Manifesto ----- */
    .manifesto-body {
        max-width: 60ch;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    .lede { font-size: 1.18rem; line-height: 1.7; }

    .pull-quote {
        margin: var(--space-3) 0;
        padding: var(--space-3) var(--space-4);
        border-left: 4px solid;
        border-image: var(--grad-gild) 1;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(2rem, 4vw, 3rem);
        font-style: italic;
        line-height: 1.05;
        font-variation-settings: "SOFT" 100, "WONK" 1;
    }
    .pull-quote .gradient-text {
        background: var(--grad-dusk);
        background-size: 220% 220%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .scallop-divider {
        margin-top: var(--space-4);
        width: 100%;
        height: 16px;
        color: var(--bronze);
        opacity: 0.7;
    }

    /* ----- Schedule ----- */
    .schedule-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 0.5rem;
        margin-top: var(--space-2);
    }
    .schedule-table thead th {
        text-align: left;
        font-family: var(--font-ui);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.6);
        padding: 0.5rem 1rem;
        border-bottom: 1px solid rgba(26, 21, 48, 0.18);
    }
    .schedule-row {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(247, 241, 232, 0.6));
        transition: transform 240ms var(--easing), box-shadow 240ms var(--easing);
    }
    .schedule-row th, .schedule-row td {
        padding: 1rem;
        vertical-align: middle;
        font-family: var(--font-body);
    }
    .schedule-row th[scope="row"] {
        font-family: var(--font-stamp);
        font-size: 1.1rem;
        letter-spacing: 0.04em;
        color: var(--bronze);
        white-space: nowrap;
    }
    .schedule-row td.local-time {
        font-family: var(--font-ui);
        font-size: 0.85rem;
        color: rgba(26, 21, 48, 0.6);
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .schedule-row .row-title {
        font-size: 1.05rem;
    }
    .schedule-row td:last-child {
        font-family: var(--font-ui);
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.7);
        text-align: right;
        white-space: nowrap;
    }
    .schedule-row th:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    .schedule-row td:last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .schedule-row:hover {
        transform: translateX(4px);
        box-shadow: 0 6px 18px -10px rgba(106, 76, 224, 0.35);
    }

    /* ----- Speakers ----- */
    .speaker-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--space-3);
        margin-top: var(--space-2);
    }
    .speaker-card {
        position: relative;
        padding: var(--space-2);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(247, 241, 232, 0.55));
        border-radius: 12px;
        border: 1px solid rgba(26, 21, 48, 0.08);
        transition: transform 280ms var(--easing), box-shadow 280ms var(--easing);
    }
    .speaker-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 30px -18px rgba(106, 76, 224, 0.4);
    }
    .portrait {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        margin-bottom: 0.7rem;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(26, 21, 48, 0.1);
    }
    .portrait::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            repeating-linear-gradient(118deg,
                transparent 0 14px,
                rgba(26, 21, 48, 0.05) 14px 15px,
                transparent 15px 36px);
        mix-blend-mode: multiply;
    }
    .portrait .initials {
        font-family: var(--font-display);
        font-size: 2.4rem;
        font-weight: 700;
        font-variation-settings: "SOFT" 100, "WONK" 1;
        color: var(--ink);
        z-index: 1;
        letter-spacing: -0.02em;
    }
    .portrait-a { background: var(--grad-dawn); }
    .portrait-b { background: var(--grad-dusk); }
    .portrait-c { background: var(--grad-gild); }
    .portrait-d { background: linear-gradient(135deg, #8EE0E0 0%, #C9B8FF 100%); }
    .portrait-e { background: linear-gradient(135deg, #FFD6E8 0%, #FFB27A 100%); }
    .portrait-f { background: linear-gradient(135deg, #C9B8FF 0%, #6A4CE0 100%); }
    .portrait-g { background: linear-gradient(135deg, #FFB27A 0%, #E26FB6 100%); }
    .portrait-h { background: linear-gradient(135deg, #F7E7A1 0%, #8EE0E0 100%); }

    .speaker-name {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }
    .speaker-role {
        font-family: var(--font-ui);
        font-size: 0.74rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.62);
    }

    /* ----- Field notes ----- */
    .essay-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-2);
    }
    .essay {
        position: relative;
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: var(--space-2);
        padding: var(--space-2);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.45);
        border: 1px solid rgba(26, 21, 48, 0.06);
        transition: transform 240ms var(--easing), background-color 240ms var(--easing);
    }
    .essay:hover {
        transform: translateX(6px);
        background: rgba(255, 255, 255, 0.7);
    }
    .essay-num {
        font-family: var(--font-stamp);
        font-size: 1.6rem;
        background: var(--grad-gild);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        line-height: 1;
        padding-top: 0.1rem;
    }
    .essay-link { display: block; }
    .essay-title {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }
    .essay-meta {
        font-family: var(--font-ui);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.58);
        margin-bottom: 0.4rem;
    }
    .essay-blurb {
        font-size: 0.98rem;
        color: rgba(26, 21, 48, 0.78);
        line-height: 1.55;
    }
    .archive-tail {
        display: inline-block;
        margin-top: var(--space-3);
        font-family: var(--font-ui);
        font-size: 0.82rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink);
        border-bottom: 1px solid var(--bronze);
        padding-bottom: 2px;
        transition: color 220ms var(--easing), letter-spacing 220ms var(--easing);
    }
    .archive-tail:hover {
        color: var(--c-violet);
        letter-spacing: 0.18em;
    }

    /* ----- Register form ----- */
    .register-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-top: var(--space-2);
        max-width: 560px;
        transition: transform 280ms var(--easing);
    }
    .register-form.is-feedback { transform: rotate(-1.4deg); }
    .register-form.is-success  { transform: rotate(1.2deg); }
    .form-group {
        border: 1px solid rgba(26, 21, 48, 0.12);
        border-radius: 10px;
        padding: var(--space-3);
        background: rgba(255, 255, 255, 0.5);
    }
    .form-legend {
        padding: 0 0.5rem;
        font-family: var(--font-ui);
        font-size: 0.74rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--bronze);
    }
    .field {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        margin-top: var(--space-2);
    }
    .field label {
        font-family: var(--font-ui);
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.7);
    }
    .field input {
        padding: 0.7rem 0.9rem;
        border: 1px solid rgba(26, 21, 48, 0.18);
        border-radius: 8px;
        background: rgba(247, 241, 232, 0.7);
        font-family: var(--font-body);
        font-size: 1rem;
        transition: border-color 200ms var(--easing), background 200ms var(--easing);
    }
    .field input:focus {
        outline: none;
        border-color: var(--c-magenta);
        background: rgba(255, 255, 255, 0.85);
    }
    .field-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-2);
    }
    .radio, .checkbox {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--font-ui);
        font-size: 0.82rem;
        letter-spacing: 0.06em;
    }
    .checkbox { margin-top: var(--space-2); }
    .radio input, .checkbox input {
        accent-color: var(--c-violet);
        width: 16px;
        height: 16px;
    }
    .form-status {
        font-family: var(--font-ui);
        font-size: 0.85rem;
        color: var(--c-violet);
        min-height: 1em;
    }
    .form-status.is-error { color: #B5763A; }

    .social-row {
        margin-top: var(--space-3);
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-family: var(--font-ui);
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }
    .social-link {
        position: relative;
        padding: 0.2rem 0;
        transition: color 220ms var(--easing);
    }
    .social-link::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: -2px;
        height: 1px;
        background: var(--grad-gild);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 220ms var(--easing);
    }
    .social-link:hover { color: var(--c-violet); }
    .social-link:hover::after { transform: scaleX(1); }
    .social-sep { color: rgba(26, 21, 48, 0.35); }

    /* ----- Colophon ----- */
    .colophon-body {
        max-width: 60ch;
        font-size: 1rem;
        color: rgba(26, 21, 48, 0.82);
    }
    .grad-token {
        font-family: var(--font-display);
        font-weight: 700;
        font-variation-settings: "SOFT" 100, "WONK" 1;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .tok-dawn { background: var(--grad-dawn); -webkit-background-clip: text; background-clip: text; }
    .tok-dusk { background: var(--grad-dusk); -webkit-background-clip: text; background-clip: text; }
    .tok-gild { background: var(--grad-gild); -webkit-background-clip: text; background-clip: text; }

    .retro-flourish {
        margin: var(--space-3) 0;
        color: var(--bronze);
        opacity: 0.7;
    }
    .retro-flourish svg { width: 100%; max-width: 320px; height: auto; }

    .copyright {
        font-family: var(--font-ui);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(26, 21, 48, 0.55);
    }

    /* ----- Mobile hamburger + radial menu ----- */
    .hamburger {
        position: fixed;
        top: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--vellum);
        box-shadow: 0 8px 20px -12px rgba(26, 21, 48, 0.45);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        z-index: 100;
    }
    .hamburger span {
        display: block;
        width: 18px;
        height: 1.6px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform 240ms var(--easing), opacity 240ms var(--easing);
    }
    .hamburger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
    .hamburger.is-open span:nth-child(2) { opacity: 0; }
    .hamburger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

    .radial-menu {
        position: fixed;
        inset: 0;
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity 280ms var(--easing);
    }
    .radial-menu.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .radial-bg {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 85% 6%, var(--c-rose), transparent 45%),
            radial-gradient(circle at 12% 92%, var(--c-seafoam), transparent 50%),
            var(--vellum);
    }
    .radial-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
        font-size: 2rem;
        line-height: 1;
        color: var(--ink);
    }
    .radial-nav {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.2rem;
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        font-variation-settings: "SOFT" 100, "WONK" 1;
    }
    .radial-nav a {
        display: inline-flex;
        align-items: baseline;
        gap: 0.8rem;
    }
    .radial-nav .num {
        font-family: var(--font-stamp);
        font-size: 0.8rem;
        color: var(--bronze);
        letter-spacing: 0.1em;
    }
}

/* ============================ UTILITIES ============================ */
@layer utilities {
    .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ============================ ANIMATIONS ============================ */
@keyframes shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes mote-drift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(8px, -14px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
    .canvas-wrap {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: auto;
        padding: 0.85rem 1rem;
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid rgba(26, 21, 48, 0.1);
    }
    .sidebar-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        height: auto;
    }
    .primary-nav, .sidebar-foot { display: none; }
    .canvas {
        padding-top: calc(72px + var(--space-3));
    }
    .hamburger { display: flex; }

    .block[data-tilt="left"], .block[data-tilt="right"] {
        padding-left: 0;
        padding-right: 0;
    }
    .block .marble-plate {
        --rx: 1.5deg;
        --ry: -2deg;
    }
    .block.is-visible .marble-plate {
        --rx: 0deg;
        --ry: 0deg;
    }
    .display-h .line:nth-child(2) { margin-left: 1rem; }
    .schedule-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-text, .ticker, .cta-pill::before {
        animation: none;
    }
    .block .marble-plate {
        transition: opacity 200ms linear;
    }
    .dust-field { display: none; }
}