/* =============================================================
   DDAZZL.com — Brutalist Elegance, Gilded Chrome
   Palette: strictly metallic + single warm accent
   Design lexicon: Interaction Guidance**: Guidance*: Guidanc: Guidance: Interactive elements (cards use 200ms stagger between lines. Easing: cubic-bezier(0.16, 1, 0.3, 1). Source Serif 4" (Google Fonts) and Space Mono" (Google Fonts). Ma-Negative-Space as Brutalist Void**: Void*: Voi: Void: The 40% viewport gutters and 30vh terminal whitespace sections are not decorative minimalism but intentional brutalist voids — oppressively empty spaces that make the content blocks feel like monoliths emerging from silence. Space Mono" at 0.75rem. They provide additional context without interrupting the main text flow. Space Mono" in a large faded roman watermark.
   ============================================================= */

:root {
    --bg-primary:   #e8e8ec; /* Polished Steel */
    --bg-deep:      #1c1c24; /* Gunmetal Void */
    --text-primary: #0a0a0f; /* Carbon Black */
    --text-inv:     #d4d4dc; /* Bright Chrome */
    --mercury:      #b8b8c8; /* Liquid Mercury */
    --gold:         #c9a84c; /* Antique Gold */
    --flare:        #f5f0e8; /* White Flare */
    --pewter:       #28283a; /* Deep Pewter (card reverse) */
    --rule-mid:     #8888a0; /* Rule-line mid tone */

    --chrome-gradient: linear-gradient(90deg, #8888a0 0%, #d4d4dc 50%, #8888a0 100%);
    --chrome-v-gradient: linear-gradient(180deg, #8888a0 0%, #d4d4dc 50%, #8888a0 100%);

    --ff-display: "Poiret One", "Space Grotesk", serif;
    --ff-sub:     "Josefin Sans", "Inter", sans-serif;
    --ff-body:    "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --ff-mono:    "Space Mono", "Courier New", monospace;

    --gutter-w: 60px;
    --plate-pad-x: 10vw;

    --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --ease-quint:   cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--ff-body);
    font-weight: 400;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(212,212,220,0.35) 0%, rgba(232,232,236,0) 60%),
        radial-gradient(ellipse at 85% 80%, rgba(184,184,200,0.25) 0%, rgba(232,232,236,0) 55%),
        /* subtle brushed-metal noise */
        repeating-linear-gradient(90deg, rgba(10,10,15,0.03) 0px, rgba(10,10,15,0.03) 1px, transparent 1px, transparent 3px),
        var(--bg-primary);
}

/* ---------------- custom scrollbar (thin chrome) --------------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
    background: var(--chrome-v-gradient);
    border-radius: 0;
}
html { scrollbar-width: thin; scrollbar-color: #8888a0 #e8e8ec; }

/* ---------------- Load curtain (initial fade) ------------------ */
.load-curtain {
    position: fixed;
    inset: 0;
    background: var(--bg-deep);
    z-index: 9999;
    pointer-events: none;
    animation: curtainLift 1.5s var(--ease-quint) 0.1s forwards;
}
@keyframes curtainLift {
    0%   { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---------------- Persistent book gutter ----------------------- */
.book-gutter {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--gutter-w);
    height: 100vh;
    background: linear-gradient(90deg, rgba(28,28,36,0.08) 0%, rgba(28,28,36,0) 100%);
    border-right: 1px solid var(--rule-mid);
    z-index: 40;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gutter-embossed {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--rule-mid);
    transform: rotate(-90deg);
    white-space: nowrap;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.6),
        0 -1px 0 rgba(10,10,15,0.15);
    opacity: 0.7;
    transition: opacity 500ms var(--ease-quint);
}
.gutter-line {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--gutter-w) - 1px);
    width: 1px;
    background: var(--rule-mid);
}

/* ---------------- Folio index (roman numerals) ----------------- */
.folio-index {
    position: fixed;
    top: 3vh;
    right: 3vw;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-end;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(136,136,160,0.5);
    background: rgba(232,232,236,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.folio-num {
    font-family: var(--ff-mono);
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--text-primary);
    opacity: 0.55;
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    position: relative;
    transition: opacity 300ms var(--ease-quint), color 300ms;
}
.folio-num::before {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 0.9rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--rule-mid);
    opacity: 0;
    transition: opacity 300ms var(--ease-quint);
    white-space: nowrap;
}
.folio-num:hover,
.folio-num.active {
    opacity: 1;
    color: var(--gold);
}
.folio-num:hover::before,
.folio-num.active::before {
    opacity: 1;
}
.folio-num.active::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--gold);
}

/* ---------------- Global lens-flare field ---------------------- */
.lens-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: screen;
    overflow: hidden;
}
.flare {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.55;
    will-change: transform, opacity;
}
.flare-a {
    width: 520px; height: 520px;
    top: 10%; left: 12%;
    background:
        radial-gradient(circle, rgba(245,240,232,0.8) 0%, rgba(201,168,76,0.2) 28%, rgba(245,240,232,0) 65%);
    animation: driftA 18s linear infinite;
}
.flare-b {
    width: 380px; height: 380px;
    top: 55%; left: 68%;
    background:
        radial-gradient(circle, rgba(245,240,232,0.7) 0%, rgba(184,184,200,0.15) 30%, rgba(245,240,232,0) 60%);
    animation: driftB 23s linear infinite;
}
.flare-c {
    width: 280px; height: 280px;
    top: 75%; left: 15%;
    background:
        radial-gradient(circle, rgba(201,168,76,0.35) 0%, rgba(245,240,232,0.25) 25%, rgba(245,240,232,0) 70%);
    animation: driftC 31s linear infinite;
}
.streak {
    border-radius: 0;
    filter: blur(8px);
    opacity: 0.4;
}
.streak-a {
    width: 60vw; height: 2px;
    top: 32%; left: -10vw;
    background: linear-gradient(90deg, rgba(245,240,232,0) 0%, rgba(245,240,232,0.6) 50%, rgba(245,240,232,0) 100%);
    animation: streakDrift 28s linear infinite;
    transform: rotate(-8deg);
}
.streak-b {
    width: 40vw; height: 1px;
    top: 68%; left: -10vw;
    background: linear-gradient(90deg, rgba(201,168,76,0) 0%, rgba(201,168,76,0.5) 50%, rgba(201,168,76,0) 100%);
    animation: streakDrift 36s linear infinite reverse;
    transform: rotate(5deg);
}

@keyframes driftA {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50%  { transform: translate(40vw, 15vh) scale(1.15); opacity: 0.65; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
}
@keyframes driftB {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.35; }
    50%  { transform: translate(-30vw, -18vh) scale(0.9); opacity: 0.6; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
}
@keyframes driftC {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
    50%  { transform: translate(25vw, -25vh) scale(1.25); opacity: 0.55; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
}
@keyframes streakDrift {
    0%   { transform: translateX(-20vw) rotate(-8deg); opacity: 0; }
    20%  { opacity: 0.4; }
    80%  { opacity: 0.4; }
    100% { transform: translateX(120vw) rotate(-8deg); opacity: 0; }
}

/* ---------------- Folio (main container) ---------------------- */
.folio {
    position: relative;
    z-index: 10;
    padding-left: var(--gutter-w);
}

/* ---------------- Plate (section) base ------------------------ */
.plate {
    position: relative;
    min-height: 100vh;
    padding: 10vh var(--plate-pad-x) 30vh var(--plate-pad-x);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.plate + .plate {
    border-top: 1px solid rgba(136,136,160,0.2);
}

/* Watermark roman numerals behind content */
.watermark {
    position: absolute;
    top: 4vh;
    left: 2vw;
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: 15vw;
    line-height: 0.8;
    color: var(--text-primary);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.02em;
    z-index: 1;
}

/* Folio tags (small caps labels above section titles) */
.folio-tag, .hero-folio-tag {
    font-family: var(--ff-mono);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0.55;
    margin: 0 0 2rem 0;
}
.folio-tag.center, .hero-folio-tag {
    text-align: center;
}

/* =========================================================
   PLATE I — HERO
   ========================================================= */
.plate-hero {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 15vh;
    padding-bottom: 15vh;
}

.deco-rule {
    width: 60vw;
    max-width: 800px;
    height: 10px;
    margin: 0 auto 2rem;
}
.deco-rule.bottom {
    margin: 2rem auto 0;
}
.rule-svg {
    width: 100%;
    height: 10px;
    display: block;
}
.rule-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawRule 1.8s var(--ease-quint) 1.4s forwards;
}
@keyframes drawRule {
    to { stroke-dashoffset: 0; }
}

.hero-stack {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.hero-title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(3rem, 14vw, 11rem);
    line-height: 1;
    letter-spacing: 0.15em;
    margin: 0;
    color: var(--text-primary);
    position: relative;
    display: flex;
    gap: 0.02em;
    /* chrome embossed effect */
    background: linear-gradient(180deg, #0a0a0f 0%, #28283a 50%, #0a0a0f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.25),
        0 -1px 0 rgba(10,10,15,0.2);
}
.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: letterReveal 900ms var(--ease-quint) forwards;
}
.hero-title .letter:nth-child(1) { animation-delay: 1.6s; }
.hero-title .letter:nth-child(2) { animation-delay: 1.75s; }
.hero-title .letter:nth-child(3) { animation-delay: 1.9s; }
.hero-title .letter:nth-child(4) { animation-delay: 2.05s; }
.hero-title .letter:nth-child(5) { animation-delay: 2.2s; }
.hero-title .letter:nth-child(6) { animation-delay: 2.35s; }

@keyframes letterReveal {
    to { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
    font-family: var(--ff-sub);
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.12em;
    color: var(--text-primary);
    opacity: 0;
    max-width: 38em;
    margin: 1rem auto 0;
    font-style: italic;
}

.hero-ornament {
    margin-top: 1rem;
    width: 320px;
    max-width: 80%;
}
.ornament-svg {
    width: 100%;
    height: auto;
    display: block;
}
.orn-line, .orn-poly {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: drawOrn 1.6s var(--ease-quint) 2.4s forwards;
}
.orn-diamond {
    opacity: 0;
    transform-origin: center;
    animation: gildReveal 600ms var(--ease-elastic) 3.4s forwards;
}
@keyframes drawOrn {
    to { stroke-dashoffset: 0; }
}
@keyframes gildReveal {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

.page-meta {
    position: absolute;
    bottom: 4vh;
    left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 var(--plate-pad-x);
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--rule-mid);
    opacity: 0;
    animation: fadeIn 800ms var(--ease-quint) 3s forwards;
}
.meta-right { animation: pulseDown 2s ease-in-out infinite; }
@keyframes fadeIn { to { opacity: 0.8; } }
@keyframes pulseDown {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* =========================================================
   PLATES — SPREADS (left/right weighted)
   ========================================================= */
.plate-spread {
    justify-content: center;
}
.spread-content {
    position: relative;
    z-index: 2;
    max-width: 60vw;
}
.plate-spread.left-weighted .spread-content {
    margin-right: auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 40vw;
}
.plate-spread.right-weighted .spread-content {
    margin-left: auto;
    margin-right: 0;
    padding-right: 0;
    padding-left: 40vw;
    text-align: right;
}

.spread-title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1.05;
    letter-spacing: 0.1em;
    margin: 0 0 2rem 0;
    color: var(--text-primary);
}
.spread-title em {
    font-style: italic;
    font-family: var(--ff-body);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--gold);
    font-size: 0.72em;
}
.spread-title.center {
    text-align: center;
}

.spread-body {
    max-width: 38em;
    font-family: var(--ff-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-primary);
}
.plate-spread.right-weighted .spread-body {
    margin-left: auto;
}

.body-paragraph + .body-paragraph {
    margin-top: 1.5rem;
}

.drop-cap {
    float: left;
    font-family: var(--ff-display);
    font-size: 4.2rem;
    line-height: 0.9;
    padding: 0.25rem 0.5rem 0 0;
    color: var(--gold);
    letter-spacing: 0;
}
.plate-spread.right-weighted .drop-cap {
    float: right;
    padding: 0.25rem 0 0 0.5rem;
}

/* Marginalia */
.marginalia {
    position: absolute;
    top: 20%;
    right: 4vw;
    width: 18vw;
    min-width: 180px;
    font-family: var(--ff-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: var(--rule-mid);
    border-left: 1px solid var(--rule-mid);
    padding-left: 1rem;
    opacity: 0.75;
}
.marginalia.right {
    right: auto;
    left: 4vw;
    border-left: none;
    border-right: 1px solid var(--rule-mid);
    padding-left: 0;
    padding-right: 1rem;
    text-align: right;
}
.marginalia sup {
    color: var(--gold);
    font-weight: 700;
}

/* Chapter separator */
.chapter-separator {
    position: absolute;
    bottom: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: 40vw;
    max-width: 420px;
}
.chapter-svg {
    width: 100%;
    height: 20px;
    display: block;
}

/* =========================================================
   PLATE III — CARD FLIP RACK
   ========================================================= */
.plate-cards {
    align-items: center;
    justify-content: center;
}
.cards-rack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
    width: 100%;
    max-width: 1200px;
    margin: 3rem auto 0;
    perspective: 1800px;
}

.flip-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    perspective: 1200px;
    position: relative;
    transition: transform 400ms var(--ease-quint);
}
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 800ms var(--ease-elastic);
    will-change: transform;
}
.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
}
.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--rule-mid);
    overflow: hidden;
}
.flip-front {
    background:
        repeating-linear-gradient(90deg, rgba(10,10,15,0.03) 0px, rgba(10,10,15,0.03) 1px, transparent 1px, transparent 4px),
        linear-gradient(145deg, #e8e8ec 0%, #d4d4dc 50%, #b8b8c8 100%);
    color: var(--text-primary);
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 1rem;
}
.flip-back {
    transform: rotateY(180deg);
    background:
        repeating-linear-gradient(45deg, rgba(245,240,232,0.02) 0px, rgba(245,240,232,0.02) 1px, transparent 1px, transparent 3px),
        linear-gradient(145deg, #28283a 0%, #1c1c24 60%, #28283a 100%);
    color: var(--text-inv);
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
}

.card-roman {
    font-family: var(--ff-mono);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--gold);
}
.card-headline {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    letter-spacing: 0.12em;
    margin: 0;
    color: var(--text-primary);
    text-transform: uppercase;
}
.card-ornament {
    width: 90px;
    height: 90px;
    margin: 0.5rem auto;
    display: block;
}
.card-hint {
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--rule-mid);
    opacity: 0.8;
}
.card-folio {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--gold);
}
.card-body {
    font-family: var(--ff-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-inv);
    margin: 0;
}
.card-page {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: var(--mercury);
    opacity: 0.7;
    align-self: flex-end;
}

/* =========================================================
   PLATE V — COLOPHON
   ========================================================= */
.plate-colophon {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.colophon-stack {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.colophon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 3rem;
    text-align: left;
}
.colophon-col {
    border-top: 1px solid var(--rule-mid);
    padding-top: 1.2rem;
}
.col-label {
    display: block;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--gold);
    margin-bottom: 0.75rem;
}
.col-body {
    font-family: var(--ff-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}
.imprint {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.imprint-svg {
    width: 220px;
    height: auto;
}
.colophon-finis {
    font-family: var(--ff-mono);
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    color: var(--rule-mid);
    margin: 0;
}

/* =========================================================
   Text Reveal (IntersectionObserver driven)
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 900ms var(--ease-quint),
        transform 900ms var(--ease-quint);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.hero-subtitle.in-view { opacity: 0.85; }

/* Stagger children of a reveal block */
.spread-body.reveal .body-paragraph {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 900ms var(--ease-quint),
        transform 900ms var(--ease-quint);
}
.spread-body.reveal.in-view .body-paragraph:nth-child(1) {
    opacity: 1; transform: translateY(0);
    transition-delay: 120ms;
}
.spread-body.reveal.in-view .body-paragraph:nth-child(2) {
    opacity: 1; transform: translateY(0);
    transition-delay: 320ms;
}

/* =========================================================
   Cursor-tracked sheen
   ========================================================= */
.cursor-sheen {
    position: fixed;
    top: 0; left: 0;
    width: 360px;
    height: 360px;
    margin: -180px 0 0 -180px;
    pointer-events: none;
    z-index: 60;
    background: radial-gradient(circle, rgba(245,240,232,0.28) 0%, rgba(245,240,232,0.1) 35%, rgba(245,240,232,0) 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 400ms var(--ease-quint);
    will-change: transform, opacity;
}
.cursor-sheen.active {
    opacity: 1;
}

/* =========================================================
   Responsive trims
   ========================================================= */
@media (max-width: 900px) {
    :root { --plate-pad-x: 8vw; --gutter-w: 40px; }
    .folio-index { padding: 0.6rem 0.8rem; }
    .folio-num::before { display: none; }
    .plate-spread.left-weighted .spread-content,
    .plate-spread.right-weighted .spread-content {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }
    .plate-spread.right-weighted .spread-body { margin-left: 0; }
    .marginalia { position: static; width: auto; margin-top: 2rem; }
    .marginalia.right { border-right: none; padding-right: 0; text-align: left; }
    .colophon-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .cards-rack { gap: 1.5rem; }
    .watermark { font-size: 32vw; }
}

@media (max-width: 600px) {
    .hero-title { font-size: clamp(2.6rem, 18vw, 6rem); letter-spacing: 0.12em; }
    .spread-title { font-size: clamp(2rem, 9vw, 3.5rem); }
    .deco-rule { width: 80vw; }
    html { scroll-snap-type: none; }
}