/* =================================================================== */
/* ipjosim.com - Art Deco Magazine                                     */
/* Aesthetic: Art Deco / Magazine Spreads / Whimsical Precision        */
/* =================================================================== */

:root {
    /* Color palette from DESIGN.md */
    --c-gold: #C9A84C;          /* Burnished Gold */
    --c-jade: #2A9D8F;          /* Jade Glass */
    --c-verdigris: #5BB5A2;     /* Verdigris Mist */
    --c-onyx: #121219;          /* Midnight Onyx */
    --c-charcoal: #1E1E2A;      /* Charcoal Deco */
    --c-ivory: #F0EAD6;         /* Ivory Linen */
    --c-silver: #8A8A7B;        /* Tarnished Silver */
    --c-amber: #D4A030;         /* Amber Glow */

    /* Type scale */
    --f-display: 'Commissioner', 'Inter', system-ui, sans-serif;
    --f-numeral: 'Playfair Display', 'Lora', Georgia, serif;

    /* Layout */
    --margin: 80px;
    --grid-base: 40px;

    /* Animation */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);

    --cursor-x: 50vw;
    --cursor-y: 50vh;
    --grid-light-radius: 160px;
}

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

html, body {
    background: var(--c-onyx);
    color: var(--c-ivory);
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

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

/* =================================================================== */
/* GRID OVERLAY                                                        */
/* =================================================================== */
.grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.6s var(--ease-smooth);
    opacity: 1;
}

.grid-overlay.hidden {
    opacity: 0;
}

.grid-base {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(201, 168, 76, 0.08) 1px, transparent 1px);
    background-size: calc(100vw / 16) 100%;
}

.grid-major {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(201, 168, 76, 0.22) 2px, transparent 2px);
    background-size: calc(100vw / 4) 100%;
}

.grid-baseline {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to bottom, rgba(201, 168, 76, 0.05) 1px, transparent 1px);
    background-size: 100% var(--grid-base);
}

.grid-cursor-light {
    position: absolute;
    width: var(--grid-light-radius);
    height: var(--grid-light-radius);
    left: 0;
    top: 0;
    transform: translate(calc(var(--cursor-x) - 50%), calc(var(--cursor-y) - 50%));
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 157, 143, 0.35) 0%, rgba(42, 157, 143, 0.1) 40%, transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 0.4s ease;
}

/* =================================================================== */
/* BLUEPRINT TOGGLE                                                    */
/* =================================================================== */
.blueprint-toggle {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(18, 18, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201, 168, 76, 0.45);
    color: var(--c-gold);
    cursor: pointer;
    font-family: var(--f-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: all 0.4s var(--ease-spring);
}

.blueprint-toggle:hover {
    border-color: var(--c-amber);
    color: var(--c-amber);
    transform: translateY(-2px);
    box-shadow: 0 4px 24px rgba(201, 168, 76, 0.25);
}

.blueprint-toggle.off {
    color: var(--c-silver);
    border-color: rgba(138, 138, 123, 0.4);
}

.blueprint-toggle svg {
    transition: transform 0.6s var(--ease-spring);
}

.blueprint-toggle:hover svg {
    transform: rotate(45deg);
}

.blueprint-label {
    font-size: 10px;
}

/* =================================================================== */
/* PAGE COUNTER                                                        */
/* =================================================================== */
.page-counter {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(18, 18, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: var(--c-ivory);
    font-family: var(--f-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
}

.counter-prefix {
    color: var(--c-silver);
    font-size: 10px;
    letter-spacing: 0.18em;
}

.counter-current {
    position: relative;
    font-family: var(--f-numeral);
    font-weight: 700;
    font-size: 26px;
    color: var(--c-gold);
    line-height: 1;
    height: 28px;
    overflow: hidden;
    display: inline-block;
    min-width: 22px;
    text-align: center;
}

.counter-digit {
    display: block;
    line-height: 28px;
    transition: transform 0.6s var(--ease-spring), opacity 0.6s var(--ease-smooth);
}

.counter-digit.slide-out {
    transform: translateY(-100%);
    opacity: 0;
}

.counter-digit.slide-in {
    animation: digitSlideIn 0.6s var(--ease-spring);
}

@keyframes digitSlideIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.counter-divider {
    color: var(--c-silver);
    font-family: var(--f-numeral);
    font-size: 18px;
}

.counter-total {
    font-family: var(--f-numeral);
    font-size: 18px;
    color: var(--c-silver);
}

/* =================================================================== */
/* PAGE CONTAINER & SPREADS                                            */
/* =================================================================== */
.page-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.spread {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: var(--margin);
    background: var(--c-onyx);
    overflow: hidden;
    scroll-snap-align: start;
}

.spread-frame {
    position: relative;
    width: 100%;
    height: calc(100vh - calc(var(--margin) * 2));
    min-height: 600px;
    background: var(--c-charcoal);
    background-image:
        radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.04), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(42, 157, 143, 0.04), transparent 60%);
    border: 1px solid rgba(201, 168, 76, 0.25);
    padding: 56px 64px;
    display: flex;
    flex-direction: column;
}

/* Stepped corner brackets */
.spread-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 5;
    transition: transform 0.5s var(--ease-spring);
}
.spread-corner-tl { top: -1px; left: -1px; }
.spread-corner-tr { top: -1px; right: -1px; }
.spread-corner-bl { bottom: -1px; left: -1px; }
.spread-corner-br { bottom: -1px; right: -1px; }

.spread:hover .spread-corner-tl { transform: translate(-2px, -2px); }
.spread:hover .spread-corner-tr { transform: translate(2px, -2px); }
.spread:hover .spread-corner-bl { transform: translate(-2px, 2px); }
.spread:hover .spread-corner-br { transform: translate(2px, 2px); }

.spread-corner svg rect {
    transform-origin: center;
    transform-box: fill-box;
    animation: cornerAssemble 0.7s var(--ease-spring) backwards;
}

.spread-corner svg rect:nth-child(1),
.spread-corner svg rect:nth-child(2) { animation-delay: 0.6s; }
.spread-corner svg rect:nth-child(3),
.spread-corner svg rect:nth-child(4) { animation-delay: 0.75s; }
.spread-corner svg rect:nth-child(5),
.spread-corner svg rect:nth-child(6) { animation-delay: 0.9s; }

@keyframes cornerAssemble {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Spread numeral & archetype */
.spread-numeral {
    position: absolute;
    bottom: 24px;
    right: 28px;
    font-family: var(--f-numeral);
    font-weight: 700;
    font-size: 88px;
    line-height: 1;
    color: var(--c-gold);
    opacity: 0.85;
    pointer-events: none;
    letter-spacing: 0.02em;
    z-index: 4;
}

.spread-numeral-light {
    color: var(--c-gold);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.spread-archetype {
    position: absolute;
    bottom: 36px;
    left: 36px;
    font-size: 11px;
    font-weight: 200;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-silver);
    z-index: 4;
}

.spread-archetype::before {
    content: '\2756  ';
    color: var(--c-gold);
}

.spread-archetype-light {
    color: var(--c-ivory);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* =================================================================== */
/* SPREAD HEADER                                                       */
/* =================================================================== */
.spread-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-shrink: 0;
}

.header-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-gold) 20%, var(--c-gold) 80%, transparent);
    opacity: 0.5;
}

.section-header {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-jade);
    white-space: nowrap;
    font-variation-settings: "FLAR" 50;
}

/* =================================================================== */
/* SPREAD 1: HERALD / MASTHEAD                                         */
/* =================================================================== */
.herald-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 16px 0;
}

.herald-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-gold), transparent);
    opacity: 0.6;
}

.eyebrow-text {
    font-size: 11px;
    font-weight: 200;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-silver);
}

.herald-stage {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 24px 0;
}

.sunburst-stage {
    position: relative;
    width: min(560px, 70vh);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sunburst-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(42, 157, 143, 0.25) 0deg 5deg, transparent 5deg 10deg,
        rgba(201, 168, 76, 0.20) 10deg 15deg, transparent 15deg 20deg,
        rgba(42, 157, 143, 0.25) 20deg 25deg, transparent 25deg 30deg,
        rgba(201, 168, 76, 0.20) 30deg 35deg, transparent 35deg 40deg,
        rgba(42, 157, 143, 0.25) 40deg 45deg, transparent 45deg 50deg,
        rgba(201, 168, 76, 0.20) 50deg 55deg, transparent 55deg 60deg,
        rgba(42, 157, 143, 0.25) 60deg 65deg, transparent 65deg 70deg,
        rgba(201, 168, 76, 0.20) 70deg 75deg, transparent 75deg 80deg,
        rgba(42, 157, 143, 0.25) 80deg 85deg, transparent 85deg 90deg,
        rgba(201, 168, 76, 0.20) 90deg 95deg, transparent 95deg 100deg,
        rgba(42, 157, 143, 0.25) 100deg 105deg, transparent 105deg 110deg,
        rgba(201, 168, 76, 0.20) 110deg 115deg, transparent 115deg 120deg,
        rgba(42, 157, 143, 0.25) 120deg 125deg, transparent 125deg 130deg,
        rgba(201, 168, 76, 0.20) 130deg 135deg, transparent 135deg 140deg,
        rgba(42, 157, 143, 0.25) 140deg 145deg, transparent 145deg 150deg,
        rgba(201, 168, 76, 0.20) 150deg 155deg, transparent 155deg 160deg,
        rgba(42, 157, 143, 0.25) 160deg 165deg, transparent 165deg 170deg,
        rgba(201, 168, 76, 0.20) 170deg 175deg, transparent 175deg 180deg,
        rgba(42, 157, 143, 0.25) 180deg 185deg, transparent 185deg 190deg,
        rgba(201, 168, 76, 0.20) 190deg 195deg, transparent 195deg 200deg,
        rgba(42, 157, 143, 0.25) 200deg 205deg, transparent 205deg 210deg,
        rgba(201, 168, 76, 0.20) 210deg 215deg, transparent 215deg 220deg,
        rgba(42, 157, 143, 0.25) 220deg 225deg, transparent 225deg 230deg,
        rgba(201, 168, 76, 0.20) 230deg 235deg, transparent 235deg 240deg,
        rgba(42, 157, 143, 0.25) 240deg 245deg, transparent 245deg 250deg,
        rgba(201, 168, 76, 0.20) 250deg 255deg, transparent 255deg 260deg,
        rgba(42, 157, 143, 0.25) 260deg 265deg, transparent 265deg 270deg,
        rgba(201, 168, 76, 0.20) 270deg 275deg, transparent 275deg 280deg,
        rgba(42, 157, 143, 0.25) 280deg 285deg, transparent 285deg 290deg,
        rgba(201, 168, 76, 0.20) 290deg 295deg, transparent 295deg 300deg,
        rgba(42, 157, 143, 0.25) 300deg 305deg, transparent 305deg 310deg,
        rgba(201, 168, 76, 0.20) 310deg 315deg, transparent 315deg 320deg,
        rgba(42, 157, 143, 0.25) 320deg 325deg, transparent 325deg 330deg,
        rgba(201, 168, 76, 0.20) 330deg 335deg, transparent 335deg 340deg,
        rgba(42, 157, 143, 0.25) 340deg 345deg, transparent 345deg 350deg,
        rgba(201, 168, 76, 0.20) 350deg 355deg, transparent 355deg 360deg
    );
    mask: radial-gradient(circle, transparent 28%, black 30%, black 95%, transparent 100%);
    -webkit-mask: radial-gradient(circle, transparent 28%, black 30%, black 95%, transparent 100%);
    animation: heraldRayBloom 1.4s var(--ease-spring) backwards, sunburstSpin 240s linear infinite;
    transform-origin: center;
}

@keyframes heraldRayBloom {
    from { transform: scale(0.3) rotate(-30deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

.sunburst-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--c-gold);
    pointer-events: none;
    transform-origin: center;
    animation: ringDraw 1s var(--ease-spring) backwards;
}

.sunburst-ring-outer {
    inset: 0;
    border-color: rgba(201, 168, 76, 0.35);
    border-width: 1.5px;
    animation-delay: 0.3s;
}

.sunburst-ring-mid {
    inset: 14%;
    border-color: rgba(42, 157, 143, 0.55);
    border-width: 1px;
    border-style: dashed;
    animation: ringDraw 1s var(--ease-spring) 0.5s backwards, ringSpin 80s linear infinite reverse;
}

.sunburst-ring-inner {
    inset: 30%;
    border-color: rgba(201, 168, 76, 0.7);
    border-width: 2px;
    animation-delay: 0.7s;
}

@keyframes ringDraw {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

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

.sunburst-curved-text {
    position: absolute;
    inset: 7%;
    pointer-events: none;
    animation: textFadeIn 1.6s var(--ease-smooth) 1s backwards;
}

.curved-text {
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.4em;
    fill: var(--c-gold);
    text-transform: uppercase;
}

@keyframes textFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.herald-cartouche {
    position: relative;
    width: 38%;
    aspect-ratio: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.cartouche-frame {
    position: absolute;
    inset: -4%;
    border: 1px solid var(--c-gold);
    background: var(--c-onyx);
    box-shadow: 0 0 60px rgba(18, 18, 25, 0.9), inset 0 0 20px rgba(201, 168, 76, 0.08);
    animation: cartoucheReveal 0.8s var(--ease-spring) 1.4s backwards;
}

.cartouche-frame::before,
.cartouche-frame::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(201, 168, 76, 0.6);
}

.cartouche-frame::before {
    inset: 6px;
}

.cartouche-frame::after {
    inset: 12px;
    border-color: rgba(42, 157, 143, 0.4);
}

@keyframes cartoucheReveal {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

.masthead-title {
    position: relative;
    z-index: 2;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 88px);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--c-gold);
    font-variation-settings: "FLAR" 100;
    text-shadow: 0 2px 0 rgba(201, 168, 76, 0.15);
    display: flex;
    gap: 0;
}

.title-letter {
    display: inline-block;
    animation: letterSettle 0.6s var(--ease-spring) backwards;
}

.title-letter:nth-child(1) { animation-delay: 1.6s; }
.title-letter:nth-child(2) { animation-delay: 1.7s; }
.title-letter:nth-child(3) { animation-delay: 1.8s; }
.title-letter:nth-child(4) { animation-delay: 1.9s; }
.title-letter:nth-child(5) { animation-delay: 2.0s; }
.title-letter:nth-child(6) { animation-delay: 2.1s; }
.title-letter:nth-child(7) { animation-delay: 2.2s; }

@keyframes letterSettle {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.masthead-domain {
    position: relative;
    z-index: 2;
    font-family: var(--f-numeral);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--c-jade);
    margin-top: 8px;
    letter-spacing: 0.16em;
    animation: textFadeIn 0.8s var(--ease-smooth) 2.4s backwards;
}

.herald-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 24px;
}

.herald-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.herald-meta-right {
    text-align: right;
}

.meta-label {
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-silver);
    font-weight: 200;
}

.meta-value {
    font-family: var(--f-numeral);
    font-style: italic;
    font-size: 16px;
    color: var(--c-ivory);
}

.herald-fan {
    transition: transform 0.6s var(--ease-spring);
}

.fan-shell .fan-rays line,
.fan-shell .fan-arc {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawStroke 1.2s var(--ease-smooth) forwards;
}

.fan-shell .fan-rays line:nth-child(1) { animation-delay: 0.6s; }
.fan-shell .fan-rays line:nth-child(2) { animation-delay: 0.7s; }
.fan-shell .fan-rays line:nth-child(3) { animation-delay: 0.8s; }
.fan-shell .fan-rays line:nth-child(4) { animation-delay: 0.9s; }
.fan-shell .fan-rays line:nth-child(5) { animation-delay: 1.0s; }
.fan-shell .fan-rays line:nth-child(6) { animation-delay: 1.1s; }
.fan-shell .fan-rays line:nth-child(7) { animation-delay: 1.2s; }
.fan-shell .fan-arc { animation-delay: 1.3s; }

@keyframes drawStroke {
    to { stroke-dashoffset: 0; }
}

.herald-fan:hover {
    transform: rotate(8deg) scale(1.08);
}

/* =================================================================== */
/* PAGE BREAK DIVIDER                                                  */
/* =================================================================== */
.page-break {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 var(--margin);
    background: var(--c-onyx);
}

.break-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-gold), transparent);
    opacity: 0.6;
}

.break-diamond {
    width: 12px;
    height: 12px;
    background: var(--c-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}

.break-fan {
    position: relative;
    width: 36px;
    height: 18px;
    background:
        radial-gradient(circle at 50% 100%, transparent 18%, rgba(201, 168, 76, 0.7) 19%, rgba(201, 168, 76, 0.7) 20%, transparent 21%),
        radial-gradient(circle at 50% 100%, transparent 30%, rgba(201, 168, 76, 0.5) 31%, rgba(201, 168, 76, 0.5) 32%, transparent 33%),
        radial-gradient(circle at 50% 100%, transparent 42%, rgba(201, 168, 76, 0.4) 43%, rgba(201, 168, 76, 0.4) 44%, transparent 45%);
}

.break-fan-left {
    background: linear-gradient(60deg, transparent 49%, var(--c-gold) 49.5%, var(--c-gold) 50.5%, transparent 51%),
                linear-gradient(75deg, transparent 49%, var(--c-gold) 49.5%, var(--c-gold) 50.5%, transparent 51%),
                linear-gradient(90deg, transparent 49%, var(--c-gold) 49.5%, var(--c-gold) 50.5%, transparent 51%),
                linear-gradient(105deg, transparent 49%, var(--c-gold) 49.5%, var(--c-gold) 50.5%, transparent 51%),
                linear-gradient(120deg, transparent 49%, var(--c-gold) 49.5%, var(--c-gold) 50.5%, transparent 51%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
    border-bottom: 1px solid var(--c-gold);
}

.break-fan-right {
    transform: scaleX(-1);
}

/* =================================================================== */
/* SPREAD 2: COLUMN / MANIFESTO                                        */
/* =================================================================== */
.column-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 30px 3fr 24px 7fr 24px 4fr 30px;
    gap: 8px 16px;
    align-items: stretch;
    min-height: 0;
}

/* Pilasters */
.pilaster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    height: 100%;
}

.pilaster-cap {
    flex-shrink: 0;
    display: block;
}

.pilaster-flutes {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    padding: 8px 0;
}

.pilaster-flutes span {
    display: block;
    width: 1px;
    background: linear-gradient(to bottom, rgba(201, 168, 76, 0.3), rgba(201, 168, 76, 0.7), rgba(201, 168, 76, 0.3));
    transition: all 0.4s var(--ease-spring);
}

.pilaster:hover .pilaster-flutes span {
    background: linear-gradient(to bottom, rgba(91, 181, 162, 0.5), rgba(91, 181, 162, 0.9), rgba(91, 181, 162, 0.5));
}

/* Chevron gutters */
.chevron-gutter {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 100%;
}

.chevron-chain {
    width: 12px;
    height: 100%;
    background-image:
        linear-gradient(135deg, transparent 45%, rgba(201, 168, 76, 0.5) 46%, rgba(201, 168, 76, 0.5) 54%, transparent 55%),
        linear-gradient(45deg, transparent 45%, rgba(201, 168, 76, 0.5) 46%, rgba(201, 168, 76, 0.5) 54%, transparent 55%);
    background-size: 12px 12px;
    background-repeat: repeat-y;
    transition: background-position 0.5s var(--ease-spring);
}

.chevron-gutter:hover .chevron-chain {
    background-position: 0 4px;
}

/* Columns */
.column {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.column-left {
    gap: 24px;
    padding-right: 8px;
}

.column-center {
    padding: 0 8px;
    overflow: hidden;
}

.column-right {
    gap: 24px;
    padding-left: 8px;
}

/* Pull quotes */
.pull-quote {
    position: relative;
    padding: 24px 18px 22px;
    background: rgba(18, 18, 25, 0.5);
    border-top: 1px solid rgba(201, 168, 76, 0.4);
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    transition: all 0.5s var(--ease-spring);
}

.pull-quote.spotlit {
    border-color: var(--c-gold);
    background: rgba(201, 168, 76, 0.06);
    box-shadow: 0 0 40px rgba(201, 168, 76, 0.15);
}

.pq-bracket {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--c-gold);
    border-style: solid;
    border-width: 0;
    transition: all 0.4s var(--ease-spring);
}

.pq-bracket-tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.pq-bracket-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.pq-bracket-bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.pq-bracket-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.pull-quote:hover .pq-bracket-tl,
.pull-quote.spotlit .pq-bracket-tl { transform: translate(-3px, -3px); }
.pull-quote:hover .pq-bracket-tr,
.pull-quote.spotlit .pq-bracket-tr { transform: translate(3px, -3px); }
.pull-quote:hover .pq-bracket-bl,
.pull-quote.spotlit .pq-bracket-bl { transform: translate(-3px, 3px); }
.pull-quote:hover .pq-bracket-br,
.pull-quote.spotlit .pq-bracket-br { transform: translate(3px, 3px); }

.pull-quote-text {
    font-family: var(--f-numeral);
    font-style: italic;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    color: var(--c-gold);
    text-align: left;
}

.pull-quote-secondary .pull-quote-text {
    font-size: 17px;
    color: var(--c-verdigris);
}

.pull-quote-cite {
    display: block;
    margin-top: 12px;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-silver);
}

.marginalia {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 0;
    border-left: 1px dashed rgba(138, 138, 123, 0.4);
    padding-left: 14px;
}

.marginalia-marker {
    font-family: var(--f-numeral);
    font-size: 22px;
    color: var(--c-jade);
    line-height: 1;
    margin-top: -2px;
}

.marginalia p {
    font-size: 13px;
    font-weight: 200;
    line-height: 1.6;
    color: var(--c-silver);
    font-style: italic;
}

/* Article body */
.kicker {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-jade);
    font-weight: 500;
    margin-bottom: 8px;
}

.article-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--c-ivory);
    margin-bottom: 22px;
    font-variation-settings: "FLAR" 30;
}

.body-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-ivory);
    margin-bottom: 14px;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.dropcap-paragraph {
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-ivory);
    margin-bottom: 14px;
    font-weight: 300;
}

.dropcap {
    font-family: var(--f-numeral);
    font-weight: 700;
    font-size: 56px;
    line-height: 0.9;
    color: var(--c-gold);
    float: left;
    margin: 4px 10px 0 0;
    padding: 4px 8px 0 0;
    border-right: 1px solid rgba(201, 168, 76, 0.3);
}

.inline-fan {
    display: flex;
    justify-content: center;
    margin: 12px 0;
    opacity: 0.85;
}

/* Sidebar */
.sidebar-card {
    position: relative;
    padding: 18px 16px 20px;
    background: var(--c-onyx);
    border: 1px solid rgba(201, 168, 76, 0.3);
    transition: all 0.5s var(--ease-spring);
}

.sidebar-card::before,
.sidebar-card::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(201, 168, 76, 0.5);
    transition: all 0.4s var(--ease-spring);
}

.sidebar-card::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.sidebar-card::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

.sidebar-card:hover {
    border-color: var(--c-gold);
    background: rgba(30, 30, 42, 0.95);
}

.sidebar-card:hover::before { transform: translate(-3px, -3px); }
.sidebar-card:hover::after { transform: translate(3px, 3px); }

.sidebar-card-warm {
    border-color: rgba(212, 160, 48, 0.4);
}

.sidebar-card-warm::before,
.sidebar-card-warm::after {
    border-color: rgba(212, 160, 48, 0.6);
}

.sidebar-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(201, 168, 76, 0.3);
}

.sidebar-eyebrow {
    display: block;
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-silver);
    font-weight: 200;
    margin-bottom: 6px;
}

.sidebar-title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--c-gold);
    letter-spacing: 0.04em;
}

.principle-list {
    list-style: none;
    counter-reset: principles;
}

.principle-list li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-ivory);
    padding: 8px 0;
    border-bottom: 1px dotted rgba(138, 138, 123, 0.2);
    display: flex;
    gap: 10px;
}

.principle-list li:last-child {
    border-bottom: 0;
}

.principle-num {
    font-family: var(--f-numeral);
    font-style: italic;
    color: var(--c-jade);
    min-width: 22px;
    font-size: 14px;
}

.sidebar-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--c-ivory);
    font-weight: 300;
}

/* =================================================================== */
/* SPREAD 3: CENTERFOLD                                                */
/* =================================================================== */
.spread-centerfold {
    padding: 0;
}

.centerfold-stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.duotone-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.duotone-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 25%, #5BB5A2 0%, transparent 45%),
        radial-gradient(ellipse at 70% 80%, #C9A84C 0%, transparent 50%),
        linear-gradient(135deg, #5BB5A2 0%, #2A9D8F 30%, #1E1E2A 60%, #121219 100%);
    filter: contrast(1.15);
}

.duotone-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(91, 181, 162, 0.9), rgba(18, 18, 25, 1));
    mix-blend-mode: multiply;
}

.duotone-highlight {
    position: absolute;
    inset: 0;
    background-color: var(--c-verdigris);
    mix-blend-mode: screen;
    opacity: 0.18;
}

.ken-burns-element {
    position: absolute;
    inset: -5%;
    background:
        repeating-linear-gradient(45deg, transparent 0 60px, rgba(201, 168, 76, 0.04) 60px 62px),
        repeating-linear-gradient(-45deg, transparent 0 80px, rgba(42, 157, 143, 0.05) 80px 82px);
    animation: kenBurns 24s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, -1%); }
}

.centerfold-geometry {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.centerfold-rays line {
    transform-origin: 500px 300px;
    animation: rayDraw 1.4s var(--ease-smooth) backwards;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.centerfold-rays line:nth-child(odd) { animation-delay: 0.4s; }
.centerfold-rays line:nth-child(even) { animation-delay: 0.6s; }

@keyframes rayDraw {
    to { stroke-dashoffset: 0; }
}

.centerfold-content {
    position: relative;
    z-index: 4;
    max-width: 880px;
    padding: 60px;
    text-align: center;
}

.centerfold-eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--c-gold);
    font-weight: 500;
    margin-bottom: 36px;
    padding: 8px 20px;
    border-top: 1px solid rgba(201, 168, 76, 0.5);
    border-bottom: 1px solid rgba(201, 168, 76, 0.5);
}

.centerfold-quote {
    position: relative;
    margin: 0 auto;
    padding: 16px 0;
}

.cf-mark {
    position: absolute;
    font-family: var(--f-numeral);
    font-size: 110px;
    font-weight: 900;
    color: var(--c-gold);
    line-height: 0.6;
    opacity: 0.85;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.cf-mark-open {
    top: -10px;
    left: -20px;
}

.cf-mark-close {
    bottom: -40px;
    right: -20px;
}

.centerfold-quote p {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.18;
    letter-spacing: 0.02em;
    color: var(--c-ivory);
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.7), 0 0 80px rgba(201, 168, 76, 0.15);
    font-variation-settings: "FLAR" 60;
}

.centerfold-caption {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.caption-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-verdigris), transparent);
}

.caption-text {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-ivory);
    font-weight: 300;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* =================================================================== */
/* SPREAD 4: CATALOGUE                                                 */
/* =================================================================== */
.catalogue-lede {
    flex-shrink: 0;
    text-align: center;
    margin-bottom: 24px;
    font-family: var(--f-numeral);
    font-style: italic;
    font-size: 16px;
    color: var(--c-silver);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.catalogue-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
    min-height: 0;
}

.cat-cell {
    position: relative;
    background: var(--c-onyx);
    border: 1px solid rgba(201, 168, 76, 0.25);
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.5s var(--ease-spring);
    overflow: hidden;
    min-height: 0;
}

.cat-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.cat-cell:hover {
    background: var(--c-charcoal);
    border-color: var(--c-gold);
    transform: translateY(-2px);
}

.cat-cell:hover::before {
    opacity: 1;
}

/* L-bracket corners (CSS-only) */
.cat-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--c-gold);
    border-style: solid;
    border-width: 0;
    transition: all 0.4s var(--ease-spring);
    pointer-events: none;
}

.cat-corner-tl { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }
.cat-corner-tr { top: 4px; right: 4px; border-top-width: 2px; border-right-width: 2px; }
.cat-corner-bl { bottom: 4px; left: 4px; border-bottom-width: 2px; border-left-width: 2px; }
.cat-corner-br { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; }

/* Inner step rings */
.cat-corner::before,
.cat-corner::after {
    content: '';
    position: absolute;
    border-color: rgba(201, 168, 76, 0.55);
    border-style: solid;
    border-width: 0;
    width: 10px;
    height: 10px;
    transition: inherit;
}

.cat-corner-tl::before { top: 3px; left: 3px; border-top-width: 1.5px; border-left-width: 1.5px; }
.cat-corner-tr::before { top: 3px; right: 3px; border-top-width: 1.5px; border-right-width: 1.5px; }
.cat-corner-bl::before { bottom: 3px; left: 3px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.cat-corner-br::before { bottom: 3px; right: 3px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.cat-corner-tl::after { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; width: 6px; height: 6px; border-color: rgba(201, 168, 76, 0.4); }
.cat-corner-tr::after { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; width: 6px; height: 6px; border-color: rgba(201, 168, 76, 0.4); }
.cat-corner-bl::after { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; width: 6px; height: 6px; border-color: rgba(201, 168, 76, 0.4); }
.cat-corner-br::after { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; width: 6px; height: 6px; border-color: rgba(201, 168, 76, 0.4); }

.cat-cell:hover .cat-corner-tl { transform: translate(-3px, -3px); }
.cat-cell:hover .cat-corner-tr { transform: translate(3px, -3px); }
.cat-cell:hover .cat-corner-bl { transform: translate(-3px, 3px); }
.cat-cell:hover .cat-corner-br { transform: translate(3px, 3px); }

.cat-thumb {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 12px 8px;
    background: rgba(30, 30, 42, 0.5);
    border: 1px solid rgba(138, 138, 123, 0.15);
    min-height: 0;
    overflow: hidden;
}

.cat-thumb svg {
    width: 80%;
    height: 80%;
    max-width: 100px;
    transition: transform 0.6s var(--ease-spring);
}

.cat-cell:hover .cat-thumb svg {
    transform: scale(1.1) rotate(5deg);
}

.cat-meta {
    position: relative;
    z-index: 2;
    padding: 8px 12px 4px;
    text-align: center;
    border-top: 1px dashed rgba(201, 168, 76, 0.25);
}

.cat-num {
    display: block;
    font-family: var(--f-numeral);
    font-style: italic;
    font-size: 11px;
    color: var(--c-jade);
    letter-spacing: 0.18em;
    margin-bottom: 4px;
}

.cat-label {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-gold);
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    line-height: 1.2;
}

.cat-detail {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-silver);
    font-weight: 200;
    line-height: 1.3;
}

/* =================================================================== */
/* SPREAD 5: COLOPHON                                                  */
/* =================================================================== */
.colophon-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Concentric pulsing rings */
.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid var(--c-gold);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    animation: rippleOut 6s linear infinite;
}

.ripple-1 { width: 360px; height: 360px; animation-delay: 0s; }
.ripple-2 { width: 360px; height: 360px; animation-delay: 1.5s; }
.ripple-3 { width: 360px; height: 360px; animation-delay: 3.0s; }
.ripple-4 { width: 360px; height: 360px; animation-delay: 4.5s; }

@keyframes rippleOut {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    20%  { opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.colophon-cartouche {
    position: relative;
    width: min(640px, 80%);
    background: var(--c-charcoal);
    border: 1px solid rgba(201, 168, 76, 0.5);
    padding: 56px 48px 48px;
    text-align: center;
    box-shadow:
        0 0 0 6px var(--c-onyx),
        0 0 0 7px rgba(201, 168, 76, 0.5),
        0 0 0 16px var(--c-onyx),
        0 0 0 17px rgba(201, 168, 76, 0.25),
        0 24px 80px rgba(0, 0, 0, 0.8);
}

.colophon-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--c-gold);
    border-style: solid;
    border-width: 0;
}

.colophon-corner-tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; }
.colophon-corner-tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; }
.colophon-corner-bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; }
.colophon-corner-br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; }

.colophon-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--c-jade);
    font-weight: 500;
}

.colophon-title {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--c-gold);
    margin-bottom: 28px;
    font-variation-settings: "FLAR" 80;
    text-transform: none;
}

.colophon-body {
    margin-bottom: 32px;
}

.colophon-body p {
    font-family: var(--f-numeral);
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-ivory);
    margin-bottom: 6px;
}

.colophon-marks {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid rgba(201, 168, 76, 0.3);
    border-bottom: 1px solid rgba(201, 168, 76, 0.3);
    margin-bottom: 24px;
}

.colophon-mark {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mark-label {
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-silver);
    font-weight: 200;
}

.mark-value {
    font-family: var(--f-numeral);
    font-style: italic;
    font-size: 15px;
    color: var(--c-gold);
}

.colophon-mark-divider {
    flex-direction: row;
    align-items: center;
}

.colophon-mark-divider svg {
    animation: colophonSpin 16s linear infinite;
}

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

.colophon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--f-numeral);
    font-style: italic;
    font-size: 12px;
    color: var(--c-silver);
    letter-spacing: 0.16em;
}

.colophon-footer span:nth-child(2) {
    font-family: var(--f-display);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

/* =================================================================== */
/* PAGE EDGE NAVIGATION                                                */
/* =================================================================== */
.page-edge {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 90;
}

.page-edge-frame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(18, 18, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201, 168, 76, 0.4);
    padding: 14px 8px;
    gap: 10px;
}

.page-edge-rule {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-gold), transparent);
    margin: 0 4px;
}

.filmstrip {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    background-image:
        linear-gradient(to bottom, rgba(201, 168, 76, 0.5) 50%, transparent 50%);
    background-size: 1px 6px;
    background-position: 6px 0;
    background-repeat: repeat-y;
}

.filmstrip-item {
    list-style: none;
}

.filmstrip-thumbnail {
    position: relative;
    width: 64px;
    padding: 8px 8px 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-silver);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    transition: all 0.4s var(--ease-spring);
    font-family: var(--f-display);
}

.thumb-marker {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-silver);
    transition: all 0.4s var(--ease-spring);
}

.thumb-num {
    font-family: var(--f-numeral);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--c-silver);
    transition: color 0.3s ease;
}

.thumb-name {
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-silver);
    font-weight: 300;
    transition: color 0.3s ease;
}

.filmstrip-item:hover .filmstrip-thumbnail {
    border-color: rgba(201, 168, 76, 0.4);
    background: rgba(201, 168, 76, 0.08);
}

.filmstrip-item:hover .thumb-num,
.filmstrip-item:hover .thumb-name {
    color: var(--c-verdigris);
}

.filmstrip-item:hover .thumb-marker {
    background: var(--c-verdigris);
}

.filmstrip-item.active .filmstrip-thumbnail {
    border-color: var(--c-gold);
    background: rgba(201, 168, 76, 0.12);
    transform: scale(1.08);
}

.filmstrip-item.active .thumb-num {
    color: var(--c-gold);
}

.filmstrip-item.active .thumb-name {
    color: var(--c-ivory);
}

.filmstrip-item.active .thumb-marker {
    background: var(--c-gold);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
    width: 8px;
    height: 8px;
}

/* =================================================================== */
/* TEXT REVEAL ANIMATION                                               */
/* =================================================================== */
.reveal-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.4s ease, transform 0.4s var(--ease-spring);
}

.reveal-char.shown {
    opacity: 1;
    transform: translateY(0);
}

/* =================================================================== */
/* RESPONSIVE                                                          */
/* =================================================================== */
@media (max-width: 1100px) {
    :root { --margin: 40px; }

    .spread-frame { padding: 36px 32px; min-height: 0; }
    .column-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 20px;
    }
    .pilaster { display: none; }
    .chevron-gutter { display: none; }
    .column-left, .column-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .catalogue-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
    .page-edge { right: 8px; }
    .filmstrip-thumbnail { width: 48px; }
    .thumb-name { display: none; }
}

@media (max-width: 720px) {
    :root { --margin: 20px; }
    body { font-size: 16px; }
    .spread { padding: var(--margin); }
    .spread-frame { padding: 24px 18px; }
    .blueprint-toggle { padding: 6px 10px; font-size: 9px; }
    .blueprint-label { display: none; }
    .page-counter { padding: 8px 12px; }
    .column-left, .column-right { grid-template-columns: 1fr; }
    .catalogue-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, 1fr); }
    .colophon-cartouche { padding: 36px 24px; }
    .colophon-marks { flex-direction: column; gap: 12px; }
    .colophon-footer { flex-direction: column; gap: 6px; }
    .herald-footer { flex-direction: column; gap: 14px; }
    .spread-numeral { font-size: 56px; }
    .article-title { font-size: 22px; }
    .centerfold-quote p { font-size: clamp(22px, 6vw, 36px); }
}