/* ============================================================
   20241204.com — a manuscript of one night
   palette: midnight-blue; layout: hexagonal-honeycomb;
   typography: expressive-variable; motifs: bubble-playful;
   pattern: counter-animate; imagery: line-illustration.

   counter-animation conservation pairs are documented inline
   as "pair: X + Y = K" so the conservation law is explicit.
   ============================================================ */

:root {
    /* palette — midnight blue, lacquered */
    --c-predawn:       #05080F; /* pre-dawn black, page ground            */
    --c-constitution:  #0B1A36; /* constitution navy, hex surface         */
    --c-lamp:          #16284E; /* reading-lamp pool, hover surface       */
    --c-ink:           #1F3A6B; /* ink at depth, quotation wells          */
    --c-lacquer:       #3A6FB5; /* lacquer blue, graffiti strokes         */
    --c-frost:         #9CC5F4; /* frost halo, marginalia, hairlines      */
    --c-vellum:        #F3EBD3; /* vellum cream, body text                */
    --c-rust:          #E84A2A; /* stencil rust, forbidden accent         */

    /* typography */
    --f-display: "Big Shoulders Display", "Inter", system-ui, sans-serif;
    --f-sub:     "Fraunces", "Lora", Georgia, serif;
    --f-body:    "Source Serif 4", "Lora", Georgia, serif;
    --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

    /* hex geometry */
    --hex-w:      var(--hex-width, 320px);
    --hex-h:      calc(var(--hex-w) * 0.8660254); /* sin(60deg) */
    --hex-clip:   polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    /* counter-animation primary axis — pair: --x + --x-inv = 1 */
    --x:          0;
    --x-inv:      1;
    --scroll-vel: 0;
}

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

html, body {
    background: var(--c-predawn);
    color: var(--c-vellum);
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 1.65;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* page exists at 3:42 a.m. — never light */
    color-scheme: dark;
}

body {
    min-height: 100vh;
    position: relative;
}

::selection {
    background: var(--c-lacquer);
    color: var(--c-vellum);
}

/* ============================================================
   honeycomb watermark — 4% opacity, 240px per cell
   ============================================================ */
.honeycomb-watermark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 60%, var(--c-frost) 60.5%, transparent 61%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 208'><polygon points='120,4 232,60 232,148 120,204 8,148 8,60' fill='none' stroke='%239CC5F4' stroke-width='1'/><polygon points='60,108 116,80 172,108 172,172 116,200 60,172' fill='none' stroke='%239CC5F4' stroke-width='0.5'/></svg>");
    background-size: 240px 208px, 240px 208px;
}

/* page edge vignette: barely-perceptible #0B1A36 -> #05080F */
.page-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse 95% 95% at 50% 50%,
        rgba(11, 26, 54, 0.0) 0%,
        rgba(11, 26, 54, 0.18) 70%,
        rgba(5, 8, 15, 0.85) 100%
    );
}

/* ============================================================
   margin channel — 96px right gutter, 1.18x parallax
   ============================================================ */
.margin-channel {
    position: fixed;
    top: 0;
    right: 0;
    width: 96px;
    height: 100vh;
    overflow: hidden;
    z-index: 6;
    pointer-events: none;
    border-left: 1px solid rgba(156, 197, 244, 0.08);
    background: linear-gradient(
        180deg,
        rgba(5, 8, 15, 0.0) 0%,
        rgba(11, 26, 54, 0.35) 50%,
        rgba(5, 8, 15, 0.0) 100%
    );
}

.margin-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(0);
    padding: 24px 10px;
    will-change: transform;
}

.margin-block {
    margin-bottom: 28vh;
    color: var(--c-frost);
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 12, "wght" 320, "SOFT" 70, "WONK" 0;
    font-size: 11px;
    line-height: 1.45;
    opacity: 0.55;
    transition: opacity 480ms ease, font-variation-settings 480ms ease;
}

.margin-block.active {
    opacity: 1;
    font-variation-settings: "opsz" 12, "wght" 420, "SOFT" 90, "WONK" 1;
}

.margin-time {
    display: block;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--c-lacquer);
    margin-bottom: 6px;
}

.margin-note {
    margin: 0;
}

.strike {
    text-decoration: line-through;
    text-decoration-color: rgba(156, 197, 244, 0.55);
    text-decoration-thickness: 1px;
    color: rgba(156, 197, 244, 0.55);
}

/* ============================================================
   honeycomb compass — fixed lower-left, 56px, slow rotate
   ============================================================ */
.compass {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 96px;
    height: 96px;
    z-index: 50;
    pointer-events: auto;
}

.compass-rotor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: compass-spin 360s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes compass-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.compass-petal {
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--c-constitution);
    border: 1px solid rgba(58, 111, 181, 0.55);
    clip-path: var(--hex-clip);
    cursor: pointer;
    color: var(--c-frost);
    font-family: var(--f-mono);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 320ms ease, transform 320ms ease, border-color 320ms ease;
    padding: 0;
}

.compass-petal:hover {
    background: var(--c-lacquer);
    color: var(--c-vellum);
    transform: scale(1.18);
    border-color: var(--c-frost);
}

.compass-petal.compass-active {
    background: var(--c-lacquer);
    color: var(--c-vellum);
    border-color: var(--c-frost);
}

.compass-label {
    display: inline-block;
    /* counter-rotate the label so it stays upright as the rotor spins.
       pair: rotor + label = 0deg (conservation across the gimbal) */
    animation: compass-counter 360s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes compass-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.compass-center { left: 37px; top: 37px; }
.compass-p1     { left: 37px; top: 10px; }
.compass-p2     { left: 60px; top: 23px; }
.compass-p3     { left: 60px; top: 50px; }
.compass-p4     { left: 37px; top: 64px; }
.compass-p5     { left: 14px; top: 50px; }
.compass-p6     { left: 14px; top: 23px; }

/* ============================================================
   manuscript — 7 full-viewport chapters, 15deg diagonal feel
   ============================================================ */
.manuscript {
    position: relative;
    z-index: 5;
    padding-right: 96px; /* leave the margin channel clear */
}

.chapter {
    position: relative;
    min-height: 100vh;
    padding: 12vh 6vw 12vh 6vw;
    overflow: hidden;
    border-top: 1px solid rgba(58, 111, 181, 0.08);
}

.chapter::before {
    /* lacquer-drip glyph at the chapter join: a single hex sweating one drop.
       pair: drop-y + drop-y-inv = 100% (the drop is a conservation of altitude) */
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 18px;
    height: 26px;
    transform: translateX(-50%);
    background: var(--c-lacquer);
    clip-path: polygon(50% 0%, 100% 18%, 100% 55%, 50% 100%, 0% 55%, 0% 18%);
    opacity: 0.0;
    animation: drip-fall 7s ease-in-out infinite;
    animation-play-state: paused;
}

.chapter.in-view::before {
    animation-play-state: running;
}

@keyframes drip-fall {
    0%   { transform: translate(-50%, -10px) scaleY(0.6); opacity: 0; }
    20%  { opacity: 0.85; }
    100% { transform: translate(-50%, 60px) scaleY(2.4); opacity: 0; }
}

.chapter-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.chapter-title {
    font-family: var(--f-display);
    color: var(--c-vellum);
    font-size: clamp(120px, 18vw, 320px);
    line-height: 0.88;
    letter-spacing: -0.04em;
    /* base variable axes; scroll velocity will rewrite them inline */
    font-variation-settings: "wght" 500;
    margin-bottom: 24px;
    text-transform: uppercase;
    will-change: font-variation-settings;
}

.chapter-ordinal {
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 36, "wght" 320, "SOFT" 50, "WONK" 0;
    font-size: 18px;
    color: var(--c-frost);
    margin-bottom: 56px;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ============================================================
   chapter 1 — Prologue / Vellum Hex
   ============================================================ */
.chapter-prologue {
    min-height: 110vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vellum-hex-wrap {
    position: relative;
    text-align: center;
}

.vellum-hex {
    width: clamp(280px, 38vmin, 460px);
    aspect-ratio: 1 / 0.8660254;
    background: var(--c-vellum);
    clip-path: var(--hex-clip);
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: vellum-rotate 48s linear infinite;
    box-shadow: 0 60px 140px rgba(58, 111, 181, 0.12);
}

@keyframes vellum-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.vellum-hex-face {
    /* counter-rotate so contents stay readable.
       pair: hex + face = 0deg */
    animation: vellum-counter 48s linear infinite;
    color: var(--c-predawn);
    font-family: var(--f-mono);
    font-size: clamp(22px, 3.6vmin, 44px);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@keyframes vellum-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.vellum-caret {
    display: inline-block;
    color: var(--c-lacquer);
    animation: caret-blink 1.05s steps(2, end) infinite;
}

@keyframes caret-blink {
    50% { opacity: 0; }
}

.vellum-ordinal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 120, "wght" 200, "SOFT" 100, "WONK" 1;
    font-size: 80vmin;
    color: rgba(58, 111, 181, 0.05);
    pointer-events: none;
    z-index: -1;
    font-style: italic;
}

.vellum-subtitle {
    margin-top: 56px;
    color: var(--c-frost);
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 24, "wght" 300, "WONK" 0;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    opacity: 0.7;
}

/* ============================================================
   chapter 2 — Decree / Twelve-Cell Ring
   ============================================================ */
.twelve-ring {
    position: relative;
    width: min(80vmin, 760px);
    aspect-ratio: 1 / 1;
    margin: 60px auto 0 auto;
}

.ring-center {
    position: absolute;
    inset: 26% 22%;
    background: var(--c-ink);
    clip-path: var(--hex-clip);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 26px;
    text-align: center;
    transition: filter 320ms ease, background 320ms ease;
}

.ring-quote {
    color: var(--c-vellum);
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 18, "wght" 360, "SOFT" 60, "WONK" 0;
    font-size: clamp(13px, 1.45vw, 18px);
    line-height: 1.45;
    font-style: italic;
    position: relative;
    transition: opacity 320ms ease, filter 320ms ease;
}

.ring-quote-mark {
    font-family: var(--f-display);
    font-variation-settings: "wght" 900;
    font-style: normal;
    color: var(--c-lacquer);
    font-size: 1.6em;
    line-height: 0;
    vertical-align: -0.4em;
    margin-right: 0.1em;
}

.ring-quote-mark.right { margin-right: 0; margin-left: 0.1em; }

.ring-quote-cite {
    display: block;
    margin-top: 14px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--c-frost);
    font-style: normal;
    letter-spacing: 0.04em;
}

.ring-cell {
    position: absolute;
    width: 20%;
    aspect-ratio: 1 / 0.8660254;
    background: var(--c-constitution);
    border: none;
    clip-path: var(--hex-clip);
    cursor: pointer;
    color: var(--c-frost);
    font-family: var(--f-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 320ms ease, color 320ms ease, filter 320ms ease;
    padding: 0;
}

.ring-cell:hover,
.ring-cell.active {
    background: var(--c-lacquer);
    color: var(--c-vellum);
}

/* counter-animation: when any cell is hovered, the center dims.
   pair: cell-brightness + center-brightness = 2 */
.twelve-ring:hover .ring-center {
    filter: brightness(0.62);
}

.twelve-ring:hover .ring-cell:hover {
    filter: brightness(1.38);
}

/* 12-cell positioning on a circle, each at 30deg increments */
.ring-c1  { left: 40%; top:  0%; }
.ring-c2  { left: 60%; top:  5%; }
.ring-c3  { left: 76%; top: 18%; }
.ring-c4  { left: 84%; top: 38%; }
.ring-c5  { left: 84%; top: 58%; }
.ring-c6  { left: 76%; top: 76%; }
.ring-c7  { left: 60%; top: 88%; }
.ring-c8  { left: 40%; top: 88%; }
.ring-c9  { left: 24%; top: 76%; }
.ring-c10 { left: 16%; top: 58%; }
.ring-c11 { left: 16%; top: 38%; }
.ring-c12 { left: 24%; top: 18%; }

/* ============================================================
   chapter 3 — Disbelief / Spilled Comb
   ============================================================ */
.chapter-disbelief .chapter-title {
    color: var(--c-vellum);
}

.spilled-comb {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    gap: 28px 32px;
    margin-top: 40px;
    align-items: start;
}

.spill-cell {
    background: var(--c-constitution);
    padding: 36px 34px;
    clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
    color: var(--c-vellum);
    font-family: var(--f-body);
    font-variation-settings: "opsz" 22, "wght" 380;
    font-size: 16px;
    line-height: 1.65;
    transition: transform 420ms ease, background 420ms ease;
}

.spill-cell:hover {
    background: var(--c-lamp);
    /* pair: hover-brightness + neighbor-brightness = 2 (declared in JS too) */
}

.spill-a { grid-column: 1 / span 3; transform: translateX(-2%) translateY(0); }
.spill-b { grid-column: 4 / span 3; transform: translateX(2%) translateY(8%); }
.spill-c { grid-column: 1 / span 4; transform: translateX(-1%) translateY(-2%); }
.spill-d { grid-column: 4 / span 3; transform: translateX(4%) translateY(0); background: var(--c-ink); padding: 44px 40px; }
.spill-e { grid-column: 2 / span 4; transform: translateX(0) translateY(6%); }

.dropcap-paragraph .dropcap {
    float: left;
    font-family: var(--f-display);
    font-variation-settings: "wght" 900;
    color: var(--c-lacquer);
    font-size: 110px;
    line-height: 0.86;
    margin: 6px 12px -2px -8px;
    text-transform: uppercase;
}

.spill-pullquote {
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 60, "wght" 360, "SOFT" 100, "WONK" 1;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.35;
    color: var(--c-vellum);
    font-style: italic;
    text-align: center;
}

.spill-pullquote:hover {
    font-variation-settings: "opsz" 60, "wght" 460, "SOFT" 100, "WONK" 1;
}

.pull-mark {
    font-family: var(--f-display);
    font-variation-settings: "wght" 900;
    color: var(--c-lacquer);
    font-style: normal;
    font-size: 1.2em;
    line-height: 0;
    vertical-align: -0.35em;
}

.assembly-steps {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    margin-top: 24px;
    display: block;
}

.assembly-steps path {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    transition: stroke-dashoffset 18s linear;
}

.chapter-disbelief.in-view .assembly-steps path {
    stroke-dashoffset: 0;
}

/* ============================================================
   chapter 4 — Vote / Counter-Honeycomb
   ============================================================ */
.vote-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 40px;
    align-items: stretch;
    height: 64vh;
    min-height: 540px;
    margin-top: 30px;
}

.vote-column {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(58, 111, 181, 0.18);
    background: rgba(11, 26, 54, 0.4);
}

.vote-marker {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--f-mono);
    color: var(--c-lacquer);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 3;
}

.vote-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 50px 18px 50px 18px;
    /* counter-animation pair: yeas-y + nays-y = 0 (transform set in JS) */
    transform: translateY(0);
    will-change: transform;
}

.vote-hex {
    width: 60%;
    aspect-ratio: 1 / 0.8660254;
    background: var(--c-lacquer);
    clip-path: var(--hex-clip);
    opacity: 0.88;
    flex-shrink: 0;
}

.vote-nays .vote-hex {
    background: var(--c-frost);
    opacity: 0.72;
}

.vote-tally {
    background: var(--c-ink);
    border: 1px solid rgba(58, 111, 181, 0.4);
    padding: 32px 28px;
    align-self: center;
    text-align: center;
    min-width: 240px;
    clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}

.tally-label {
    font-family: var(--f-mono);
    color: var(--c-frost);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.tally-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tally-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--f-mono);
}

.tally-name {
    color: var(--c-frost);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tally-count {
    color: var(--c-vellum);
    font-size: 36px;
    font-variation-settings: "wght" 500;
    letter-spacing: 0.04em;
}

.tally-divider {
    height: 1px;
    background: rgba(156, 197, 244, 0.18);
    margin: 6px 0;
}

.tally-note {
    margin-top: 22px;
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 14, "wght" 320, "SOFT" 80, "WONK" 0;
    font-size: 12px;
    font-style: italic;
    color: var(--c-frost);
    opacity: 0.75;
}

.vote-summary {
    margin-top: 48px;
    font-family: var(--f-body);
    font-variation-settings: "opsz" 28, "wght" 380;
    font-size: 18px;
    color: var(--c-vellum);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.6;
}

/* ============================================================
   chapter 5 — Withdrawal / Lacquer Drip
   ============================================================ */
.chapter-withdrawal {
    min-height: 120vh;
}

.chapter-title-thick {
    /* axis interpolation handled in JS from wght 200 -> 900 */
    font-variation-settings: "wght" 200;
}

.lacquer-stage {
    position: relative;
    margin-top: 60px;
    padding-bottom: 80px;
}

.lacquer-drop {
    position: absolute;
    left: 14%;
    top: -20px;
    width: 14px;
    height: 22px;
    background: var(--c-lacquer);
    clip-path: polygon(50% 0%, 100% 60%, 80% 100%, 20% 100%, 0% 60%);
    transform: translateY(0);
    will-change: transform;
    z-index: 2;
    box-shadow: 0 0 18px rgba(58, 111, 181, 0.45);
}

.withdrawal-body {
    max-width: 760px;
    margin-left: 22%;
    color: var(--c-vellum);
    font-family: var(--f-body);
    font-variation-settings: "opsz" 30, "wght" 420;
    font-size: 19px;
    line-height: 1.7;
}

.withdrawal-body p {
    margin-bottom: 1.4em;
}

.rust-strike {
    color: var(--c-rust);
    text-decoration: line-through;
    text-decoration-color: var(--c-rust);
    text-decoration-thickness: 2px;
    font-variation-settings: "opsz" 30, "wght" 500;
}

/* ============================================================
   chapter 6 — Aftermath / Bubble-Playful Counterpoint
   ============================================================ */
.chapter-aftermath {
    min-height: 110vh;
    overflow: hidden;
}

.bubble-stage {
    position: relative;
    margin-top: 40px;
    width: 100%;
    height: 60vh;
    min-height: 480px;
    background: linear-gradient(180deg, rgba(11, 26, 54, 0.0) 0%, rgba(31, 58, 107, 0.35) 100%);
    border: 1px solid rgba(58, 111, 181, 0.15);
    overflow: hidden;
}

.bubble-instruction {
    position: absolute;
    top: 18px;
    left: 22px;
    font-family: var(--f-mono);
    color: var(--c-frost);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    opacity: 0.7;
    z-index: 4;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(243, 235, 211, 0.32) 0%, rgba(58, 111, 181, 0.42) 60%, rgba(58, 111, 181, 0.0) 100%);
    border: 1px solid rgba(156, 197, 244, 0.55);
    mix-blend-mode: screen;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-vellum);
    font-family: var(--f-mono);
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    padding: 6px;
    transition: transform 60ms ease-out, opacity 60ms ease-out;
    will-change: transform, opacity;
}

.bubble.pop {
    transform: scale(0.05);
    opacity: 0;
}

.aftermath-coda {
    margin-top: 40px;
    color: var(--c-vellum);
    font-family: var(--f-body);
    font-variation-settings: "opsz" 28, "wght" 380;
    font-size: 17px;
    line-height: 1.65;
    max-width: 760px;
    margin-left: 0;
}

/* ============================================================
   chapter 7 — Footnote / Folded Hex
   ============================================================ */
.chapter-footnote {
    min-height: 100vh;
}

.folded-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
    margin-top: 50px;
    margin-bottom: 80px;
}

.folded-hex {
    position: relative;
    aspect-ratio: 1 / 0.8660254;
    background: var(--c-constitution);
    border: 1px solid rgba(58, 111, 181, 0.35);
    clip-path: var(--hex-clip);
    cursor: pointer;
    color: var(--c-frost);
    transition: background 360ms ease;
    overflow: hidden;
    padding: 0;
    font-family: inherit;
}

.folded-hex:hover {
    background: var(--c-lamp);
}

.folded-glyph {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-display);
    font-variation-settings: "wght" 900;
    color: var(--c-lacquer);
    font-size: 48px;
    line-height: 1;
}

.folded-num {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    color: var(--c-frost);
    font-size: 12px;
    letter-spacing: 0.12em;
}

.folded-card {
    position: absolute;
    inset: 6% 6%;
    background: var(--c-vellum);
    color: var(--c-predawn);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(5, 8, 15, 0.05),
                0 18px 30px rgba(5, 8, 15, 0.45),
                0 1px 0 rgba(243, 235, 211, 0.4);
    /* paper crease: simulated as a soft diagonal gradient */
    background-image:
        linear-gradient(135deg, rgba(5, 8, 15, 0.0) 48%, rgba(5, 8, 15, 0.08) 50%, rgba(5, 8, 15, 0.0) 52%),
        linear-gradient(180deg, var(--c-vellum), var(--c-vellum));
    /* counter-animation: scale 0 -> 1 on open, opacity 0 -> 1.
       pair: card-scale + glyph-scale = 1 (glyph is scaled to 0 on open) */
    transform: scale(0.05);
    opacity: 0;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
    pointer-events: none;
}

.folded-hex.open .folded-card {
    transform: scale(1);
    opacity: 1;
}

.folded-hex.open .folded-glyph,
.folded-hex.open .folded-num {
    transform: translateX(-50%) scale(0);
    opacity: 0;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}

.folded-card-title {
    display: block;
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 24, "wght" 600, "SOFT" 40, "WONK" 0;
    font-size: 13px;
    font-style: italic;
    margin-bottom: 8px;
    color: var(--c-ink);
}

.folded-card-body {
    display: block;
    font-family: var(--f-body);
    font-variation-settings: "opsz" 14, "wght" 380;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--c-predawn);
}

.closing-stencil {
    text-align: center;
    margin-top: 100px;
    padding: 60px 20px 40px 20px;
}

.closing-line {
    display: inline-block;
    font-family: var(--f-display);
    font-variation-settings: "wght" 700;
    font-size: clamp(28px, 5vw, 64px);
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

.closing-line .rust-strike {
    font-variation-settings: "wght" 800;
    text-decoration-thickness: 4px;
}

.closing-sub {
    display: block;
    margin-top: 40px;
    font-family: var(--f-sub);
    font-variation-settings: "opsz" 18, "wght" 320, "SOFT" 70, "WONK" 1;
    font-size: 14px;
    font-style: italic;
    color: var(--c-frost);
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* ============================================================
   responsive — collapse, but keep the comb load-bearing
   ============================================================ */
@media (max-width: 1024px) {
    html, body { font-size: 17px; }
    .manuscript { padding-right: 56px; }
    .margin-channel { width: 56px; }
    .spilled-comb {
        grid-template-columns: repeat(2, 1fr);
    }
    .spill-a, .spill-b, .spill-c, .spill-d, .spill-e {
        grid-column: 1 / -1;
        transform: none;
    }
    .vote-stage {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }
    .vote-tally {
        grid-column: 1 / -1;
        margin-top: 24px;
    }
    .withdrawal-body { margin-left: 0; }
}

@media (max-width: 640px) {
    html, body { font-size: 16px; line-height: 1.6; }
    .manuscript { padding-right: 0; }
    .margin-channel { display: none; }
    .chapter { padding: 10vh 5vw; }
    .chapter-title { font-size: clamp(80px, 24vw, 160px); }
    .twelve-ring { width: 96vmin; }
    .ring-center { inset: 22% 18%; padding: 14px 12px; }
    .vote-stage {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .vote-track { padding: 30px 12px; }
    .folded-wall { grid-template-columns: 1fr 1fr; }
    .compass { width: 76px; height: 76px; bottom: 16px; left: 16px; }
    .compass-center { left: 27px; top: 27px; }
    .compass-p1     { left: 27px; top: 4px;  }
    .compass-p2     { left: 50px; top: 17px; }
    .compass-p3     { left: 50px; top: 40px; }
    .compass-p4     { left: 27px; top: 50px; }
    .compass-p5     { left: 4px;  top: 40px; }
    .compass-p6     { left: 4px;  top: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}