/* =====================================================
   PPADDL.com — Nocturnal Pastoralism
   Dark-mode luxury + watercolor washes + crystalline seams
   Design compliance language: IntersectionObserver on the hero element with threshold: 0.2; JetBrains Mono; Lora (Google Fonts; Lora (contemporary serif with roots in calligraphy; Space Grotesk (geometric sans; Space Grotesk (Google Fonts.
   ===================================================== */

:root {
    /* Core palette */
    --obsidian: #0b0b0f;
    --cavern: #16151d;
    --gold: #d4a843;
    --gold-bright: #e8c965;
    --bronze: #a89260;
    --frost: #8ec8d4;
    --parchment: #c8c0b4;
    --stone: #7a7265;

    /* Watercolor translucents */
    --rose-quartz: #c4789055;
    --amethyst: #8b6fae44;
    --frost-wash: #8ec8d422;
    --gold-wash: #d4a84322;
    --gold-rule: #b8960c44;
    --gold-divider: #d4a84366;
    --diamond-gold: #c9a03622;
    --diamond-gold-strong: #d4a84355;

    /* Typography */
    --font-display: "Cormorant Garamond", "Lora", Georgia, serif;
    --font-label: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Lora", "Cormorant Garamond", Georgia, serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

    /* Rhythm */
    --max-content: 1400px;
    --tableau-gap: 20vh;
    --edge-offset: 10vw;

    /* Motion */
    --bloom-ease: cubic-bezier(0.16, 0.84, 0.3, 1);
    --curtain-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html {
    scroll-behavior: smooth;
    background: var(--obsidian);
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--parchment);
    background-color: var(--obsidian);
    background-image:
        radial-gradient(ellipse at 20% 0%, #1a1725 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, #14141c 0%, transparent 60%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.66 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-blend-mode: screen, screen, normal;
    overflow-x: hidden;
    letter-spacing: 0.005em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.paper-noise-svg { position: absolute; width: 0; height: 0; pointer-events: none; }

/* =====================================================
   FROST PARTICLES (global, drifting)
   ===================================================== */
.frost-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.frost {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 3px;
    height: 3px;
    background: var(--frost);
    opacity: 0.18;
    box-shadow: 0 0 6px rgba(142, 200, 212, 0.25);
    transform: rotate(45deg);
    animation: frostDrift var(--d, 45s) linear var(--delay, 0s) infinite;
}

.frost:nth-child(3n) {
    width: 2px; height: 2px; opacity: 0.12;
}
.frost:nth-child(5n) {
    width: 4px; height: 4px; opacity: 0.22;
    background: var(--gold);
    box-shadow: 0 0 8px rgba(212, 168, 67, 0.3);
}

@keyframes frostDrift {
    0%   { transform: translate(0, 0)         rotate(45deg); }
    25%  { transform: translate(18px, -22px)  rotate(60deg); }
    50%  { transform: translate(-14px, -40px) rotate(30deg); }
    75%  { transform: translate(20px, -60px)  rotate(50deg); }
    100% { transform: translate(0, -88px)     rotate(45deg); opacity: 0; }
}

/* =====================================================
   NAVIGATION — hidden until past hero
   ===================================================== */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    opacity: 0;
    transform: translateY(-100%);
    transition:
        opacity 400ms var(--curtain-ease),
        transform 400ms var(--curtain-ease);
    background: rgba(11, 11, 15, 0.62);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid rgba(212, 168, 67, 0.14);
}
.site-nav.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-inner {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 14px clamp(18px, 4vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-mark, .nav-stamp {
    font-family: var(--font-label);
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}
.nav-stamp { color: var(--bronze); letter-spacing: 0.2em; }

.nav-links {
    list-style: none;
    display: flex;
    gap: clamp(14px, 2.4vw, 32px);
}

.nav-links a {
    font-family: var(--font-label);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bronze);
    text-decoration: none;
    padding: 6px 2px;
    position: relative;
    transition: color 320ms ease;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--gold);
    transition: right 420ms var(--curtain-ease);
}
.nav-links a:hover {
    color: var(--gold-bright);
}
.nav-links a:hover::after { right: 0; }

/* =====================================================
   HERO — full viewport watercolor bloom
   ===================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 10vh, 140px) clamp(20px, 6vw, 80px);
    overflow: hidden;
    isolation: isolate;
}

.hero-bloom {
    position: absolute;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
}

.bloom {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    transform: scale(0.7);
    opacity: 0;
    transition:
        opacity 2.4s var(--bloom-ease),
        transform 2.4s var(--bloom-ease);
    will-change: opacity, transform;
}
.hero.is-bloomed .bloom { opacity: 1; transform: scale(1); }
.hero.is-bloomed .bloom-mid { transition-delay: 220ms; }
.hero.is-bloomed .bloom-hi  { transition-delay: 440ms; }
.hero.is-bloomed .bloom-vein{ transition-delay: 660ms; }

.bloom-base {
    background:
        radial-gradient(circle at 50% 52%,
            #c4789066 0%,
            #c478904d 12%,
            #c478902b 26%,
            transparent 55%);
    filter: blur(80px);
}
.bloom-mid {
    background:
        radial-gradient(circle at 42% 38%,
            #8b6faecc 0%,
            #8b6fae55 18%,
            transparent 50%),
        radial-gradient(circle at 63% 65%,
            #5e6f8044 0%,
            transparent 45%);
    filter: blur(70px);
    mix-blend-mode: screen;
}
.bloom-hi {
    background:
        radial-gradient(circle at 51% 47%,
            #8ec8d455 0%,
            #8ec8d422 20%,
            transparent 40%);
    filter: blur(40px);
    mix-blend-mode: screen;
}
.bloom-vein {
    background:
        linear-gradient(112deg, transparent 40%, #d4a84344 49%, #e8c96566 50%, #d4a84344 51%, transparent 60%);
    filter: blur(3px);
    mix-blend-mode: screen;
    opacity: 0.0;
}
.hero.is-bloomed .bloom-vein { opacity: 0.85; }

.hero-content {
    position: relative;
    max-width: min(1100px, 92vw);
    text-align: left;
    z-index: 2;
}

.eyebrow {
    font-family: var(--font-label);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: clamp(26px, 5vh, 48px);
}
.eyebrow span {
    color: var(--gold);
    font-style: italic;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 1.05em;
}

.display {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0.06em;
    line-height: 1.02;
    color: var(--gold);
}

.display-hero {
    font-size: clamp(2.5rem, 7vw, 6.5rem);
}

.display-hero .reveal {
    display: block;
    overflow: hidden;
    position: relative;
}

.display-hero .reveal > * {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--curtain-ease);
    background: linear-gradient(90deg, #d4a843 0%, #e8c965 50%, #d4a843 100%);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: goldShimmer 6s linear infinite;
    font-style: italic;
}

/* mixing inline styling — first reveal is non-italic text */
.display-hero .reveal:first-child > *,
.display-hero .reveal:last-child > * {
    font-style: normal;
}

.hero.is-bloomed .display-hero .reveal > * { clip-path: inset(0 0 0 0); }
.hero.is-bloomed .display-hero .reveal-delay-1 > * { transition-delay: 300ms; }
.hero.is-bloomed .display-hero .reveal-delay-2 > * { transition-delay: 600ms; }

.display-hero em {
    font-style: italic;
    font-weight: 300;
}

@keyframes goldShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.hero-subtitle {
    margin-top: clamp(28px, 4vh, 48px);
    max-width: 56ch;
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    line-height: 1.78;
    color: var(--parchment);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.1s ease 1.1s, transform 1.1s ease 1.1s;
}
.hero.is-bloomed .hero-subtitle { opacity: 0.9; transform: translateY(0); }

.hero-meta {
    margin-top: clamp(26px, 3.5vh, 40px);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--stone);
    letter-spacing: 0.14em;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 1s ease 1.4s;
}
.hero.is-bloomed .hero-meta { opacity: 1; }

.hero-meta-label { text-transform: uppercase; }
.hero-meta-dot {
    display: inline-block;
    width: 4px; height: 4px;
    background: var(--gold);
    transform: rotate(45deg);
}

.scroll-hint {
    margin-top: clamp(48px, 8vh, 90px);
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--stone);
    opacity: 0;
    transition: opacity 900ms ease 1.8s;
}
.hero.is-bloomed .scroll-hint { opacity: 0.85; }

.scroll-line {
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    width: 30%;
    height: 100%;
    background: var(--gold-bright);
    animation: scrollGlow 3.4s linear infinite;
}
@keyframes scrollGlow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(400%); }
}

/* =====================================================
   CRYSTAL SEAM DIVIDERS
   ===================================================== */
.crystal-seam {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vw, 26px);
    padding: clamp(60px, 12vh, 140px) clamp(20px, 6vw, 80px);
    max-width: var(--max-content);
    margin: 0 auto;
    opacity: 0.75;
}

.crystal-seam-wide {
    gap: clamp(14px, 3vw, 40px);
    padding-top: clamp(100px, 16vh, 180px);
    padding-bottom: clamp(60px, 8vh, 100px);
}

.diamond {
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--diamond-gold-strong), transparent);
    border: 1px solid var(--diamond-gold);
    position: relative;
    opacity: 0;
    transform: rotate(45deg) scale(0.6);
    transition: opacity 1.4s ease, transform 1.4s var(--bloom-ease);
}

.crystal-seam.is-visible .diamond {
    opacity: 0.9;
    transform: rotate(45deg) scale(1);
}

.crystal-seam .diamond:nth-child(odd) { transition-delay: 0ms; }
.crystal-seam .diamond:nth-child(even) { transition-delay: 140ms; }
.crystal-seam .diamond:nth-child(3n) { transition-delay: 280ms; }
.crystal-seam .diamond:nth-child(4n) { transition-delay: 420ms; }

.diamond-lg {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--gold-divider), transparent 80%);
    border-color: rgba(212, 168, 67, 0.28);
}

.diamond::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, rgba(232, 201, 101, 0.2), transparent 70%);
}

/* =====================================================
   TABLEAUX — staggered asymmetric panels
   ===================================================== */
.tableau {
    position: relative;
    max-width: var(--max-content);
    margin: 0 auto var(--tableau-gap);
    padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 60px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
    min-height: 70vh;
}

.tableau-left  { padding-inline: clamp(20px, 4vw, 60px) clamp(40px, 10vw, 160px); }
.tableau-right { padding-inline: clamp(40px, 10vw, 160px) clamp(20px, 4vw, 60px); }

/* Visual zone */
.tableau-visual {
    flex: 0 0 62%;
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
    background: var(--cavern);
    clip-path: polygon(
        2% 0%, 98% 1%, 100% 3%, 99% 97%, 97% 100%,
        3% 99%, 1% 98%, 0% 4%
    );
}

.tableau-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 168, 67, 0.08);
    pointer-events: none;
    clip-path: polygon(
        2% 0%, 98% 1%, 100% 3%, 99% 97%, 97% 100%,
        3% 99%, 1% 98%, 0% 4%
    );
}

.wash {
    position: absolute;
    inset: 0;
    overflow: hidden;
    will-change: transform;
}

.wash-layer {
    position: absolute;
    inset: -10%;
    opacity: 0;
    transform: scale(0.7);
    transition:
        opacity 1.8s var(--bloom-ease),
        transform 1.8s var(--bloom-ease);
    will-change: opacity, transform;
}

.tableau.is-visible .wash-base { opacity: 1; transform: scale(1); }
.tableau.is-visible .wash-mid  { opacity: 1; transform: scale(1); transition-delay: 200ms; }
.tableau.is-visible .wash-hi   { opacity: 1; transform: scale(1); transition-delay: 400ms; }
.tableau.is-visible .wash-vein { opacity: 0.9; transform: scale(1); transition-delay: 600ms; }

/* Meadow wash */
.wash-meadow .wash-base {
    background:
        radial-gradient(circle at 30% 55%, #c4789077 0%, #c4789033 18%, transparent 52%),
        radial-gradient(circle at 70% 35%, #8b6fae55 0%, transparent 45%);
    filter: blur(90px);
}
.wash-meadow .wash-mid {
    background:
        radial-gradient(ellipse at 55% 60%, #8b6fae77 0%, transparent 40%),
        radial-gradient(circle at 25% 25%, #6b7f9644 0%, transparent 45%);
    filter: blur(60px);
    mix-blend-mode: screen;
}
.wash-meadow .wash-hi {
    background:
        radial-gradient(circle at 40% 45%, #8ec8d444 0%, transparent 30%),
        radial-gradient(circle at 70% 70%, #8ec8d422 0%, transparent 28%);
    filter: blur(30px);
    mix-blend-mode: screen;
}
.wash-meadow .wash-vein {
    background: linear-gradient(108deg, transparent 42%, #d4a84355 49%, #e8c96588 50%, #d4a84355 51%, transparent 58%);
    filter: blur(1.5px);
    mix-blend-mode: screen;
}

/* River wash */
.wash-river .wash-base {
    background:
        radial-gradient(ellipse at 65% 50%, #8b6faeaa 0%, #8b6fae44 22%, transparent 55%),
        radial-gradient(circle at 28% 70%, #5f708966 0%, transparent 50%);
    filter: blur(100px);
}
.wash-river .wash-mid {
    background:
        radial-gradient(ellipse at 45% 50%, #c4789066 0%, transparent 40%),
        radial-gradient(circle at 78% 30%, #8b6fae66 0%, transparent 42%);
    filter: blur(70px);
    mix-blend-mode: screen;
}
.wash-river .wash-hi {
    background:
        radial-gradient(ellipse at 50% 55%, #8ec8d466 0%, transparent 32%),
        linear-gradient(180deg, transparent 35%, #8ec8d422 48%, transparent 65%);
    filter: blur(35px);
    mix-blend-mode: screen;
}
.wash-river .wash-vein {
    background: linear-gradient(95deg, transparent 20%, #d4a84344 49%, #e8c96588 50%, #d4a84344 51%, transparent 80%);
    filter: blur(1px);
    mix-blend-mode: screen;
}

/* Cavern wash */
.wash-cavern .wash-base {
    background:
        radial-gradient(circle at 50% 55%, #8b6faedd 0%, #8b6fae66 18%, transparent 50%),
        radial-gradient(circle at 25% 30%, #c4789088 0%, transparent 40%);
    filter: blur(110px);
}
.wash-cavern .wash-mid {
    background:
        radial-gradient(ellipse at 70% 40%, #c4789077 0%, transparent 35%),
        radial-gradient(circle at 35% 75%, #8b6fae66 0%, transparent 40%);
    filter: blur(65px);
    mix-blend-mode: screen;
}
.wash-cavern .wash-hi {
    background:
        radial-gradient(circle at 50% 50%, #8ec8d444 0%, transparent 25%),
        conic-gradient(from 45deg at 60% 40%, #d4a84322, transparent 30%, #8ec8d422 50%, transparent 80%);
    filter: blur(40px);
    mix-blend-mode: screen;
}
.wash-cavern .wash-vein {
    background:
        linear-gradient(125deg, transparent 35%, #d4a84366 49%, #e8c965aa 50%, #d4a84366 51%, transparent 65%),
        linear-gradient(55deg, transparent 60%, #d4a84322 69%, #e8c96544 70%, #d4a84322 71%, transparent 82%);
    filter: blur(1px);
    mix-blend-mode: screen;
}

/* Atelier wash */
.wash-atelier .wash-base {
    background:
        radial-gradient(ellipse at 38% 62%, #c47890aa 0%, #c4789044 22%, transparent 55%),
        radial-gradient(circle at 70% 25%, #d4a84344 0%, transparent 45%);
    filter: blur(95px);
}
.wash-atelier .wash-mid {
    background:
        radial-gradient(ellipse at 55% 35%, #8b6fae77 0%, transparent 42%),
        radial-gradient(circle at 30% 80%, #c4789055 0%, transparent 40%);
    filter: blur(70px);
    mix-blend-mode: screen;
}
.wash-atelier .wash-hi {
    background:
        radial-gradient(circle at 60% 48%, #8ec8d433 0%, transparent 30%),
        radial-gradient(circle at 25% 45%, #e8c96522 0%, transparent 28%);
    filter: blur(30px);
    mix-blend-mode: screen;
}
.wash-atelier .wash-vein {
    background: linear-gradient(78deg, transparent 35%, #d4a84355 49%, #e8c96599 50%, #d4a84355 51%, transparent 62%);
    filter: blur(1.5px);
    mix-blend-mode: screen;
}

/* Paper grain overlay */
.wash-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.66 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events: none;
}

/* Geode facets (cavern tableau) */
.geode {
    position: absolute;
    top: var(--gy);
    left: var(--gx);
    width: calc(90px * var(--gs, 1));
    height: calc(90px * var(--gs, 1));
    transform: translate(-50%, -50%) rotate(45deg);
    background:
        linear-gradient(135deg, #e8c965aa, #d4a84366 40%, transparent 70%),
        linear-gradient(45deg, #8ec8d444, transparent 60%);
    box-shadow:
        0 0 40px rgba(212, 168, 67, 0.18),
        inset 0 0 0 1px rgba(232, 201, 101, 0.35);
    opacity: 0;
    transition: opacity 1.4s ease 900ms, transform 1.4s ease 900ms;
    mix-blend-mode: screen;
}
.tableau.is-visible .geode {
    opacity: 0.85;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.geode::after {
    content: "";
    position: absolute;
    inset: 18%;
    background: linear-gradient(135deg, rgba(232, 201, 101, 0.4), transparent 70%);
    transform: rotate(45deg);
}

/* Vertical fading rule between visual & text */
.tableau-rule {
    flex: 0 0 1px;
    align-self: stretch;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--gold-rule) 18%,
        var(--gold-rule) 82%,
        transparent 100%);
    opacity: 0;
    transition: opacity 1.2s ease 300ms;
}
.tableau.is-visible .tableau-rule { opacity: 1; }

/* Text zone */
.tableau-text {
    flex: 1 1 auto;
    max-width: 38ch;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.chapter-index {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 800ms ease, transform 800ms ease;
}
.tableau.is-visible .chapter-index { opacity: 1; transform: translateY(0); }

.tableau-text .display {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    line-height: 1.04;
    color: var(--gold);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition:
        opacity 1.1s ease 150ms,
        clip-path 1.1s var(--curtain-ease) 150ms;
}
.tableau.is-visible .tableau-text .display {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
.tableau-text .display em {
    font-style: italic;
    color: var(--gold-bright);
    position: relative;
}
.tableau-text .display em::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    margin-bottom: 10px;
    transform: rotate(45deg);
    background: var(--gold);
    opacity: 0.4;
    vertical-align: middle;
}

.label {
    font-family: var(--font-label);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bronze);
    opacity: 0;
    transition: opacity 900ms ease 400ms;
}
.tableau.is-visible .label { opacity: 1; }

.tableau-text p {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--parchment);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease 500ms, transform 1s ease 500ms;
}
.tableau-text p + p { margin-top: 0.4rem; }
.tableau.is-visible .tableau-text p { opacity: 0.92; transform: translateY(0); }
.tableau.is-visible .tableau-text p:nth-of-type(2) { transition-delay: 700ms; }

/* Annotation list (tableau 1) */
.annotation {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px 26px;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(212, 168, 67, 0.15);
    opacity: 0;
    transition: opacity 1s ease 900ms;
}
.tableau.is-visible .annotation { opacity: 1; }
.annotation > div { display: flex; flex-direction: column; gap: 4px; }
.annotation dt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone);
}
.annotation dd {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--parchment);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Pull quote (tableau 2) */
.pull-quote {
    position: relative;
    margin-top: 1.4rem;
    padding: 1.4rem 1.6rem 1.4rem 2.2rem;
    background: linear-gradient(180deg,
        rgba(22, 21, 29, 0.65),
        rgba(22, 21, 29, 0.35));
    border-left: 1px solid rgba(212, 168, 67, 0.3);
    clip-path: polygon(0 2%, 98% 0%, 100% 2%, 99% 98%, 97% 100%, 2% 99%, 0% 97%);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 1s ease 900ms, transform 1s ease 900ms;
}
.tableau.is-visible .pull-quote { opacity: 1; transform: translateX(0); }
.pull-quote > span:first-child {
    position: absolute;
    top: -0.2rem;
    left: 0.4rem;
    font-family: var(--font-display);
    font-size: 3.2rem;
    color: var(--gold);
    opacity: 0.4;
    line-height: 1;
}
.pull-quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--gold-bright) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.pull-quote footer {
    margin-top: 0.8rem;
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bronze);
}

/* Inventory list (tableau 3) */
.inventory {
    list-style: none;
    margin-top: 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    opacity: 0;
    transition: opacity 1s ease 900ms;
}
.tableau.is-visible .inventory { opacity: 1; }
.inventory li {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas:
        "mark title"
        "mark note";
    column-gap: 12px;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(168, 146, 96, 0.15);
}
.inventory li:last-child { border-bottom: none; }
.inv-mark {
    grid-area: mark;
    align-self: start;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--gold);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}
.inv-title {
    grid-area: title;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--parchment);
    letter-spacing: 0.02em;
    font-style: italic;
}
.inv-note {
    grid-area: note;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stone);
}

/* Correspondence (tableau 4) */
.correspondence {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(212, 168, 67, 0.18);
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transition: opacity 1s ease 900ms;
}
.tableau.is-visible .correspondence { opacity: 1; }

.corr-label {
    font-family: var(--font-label);
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bronze);
}

.corr-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.02em;
    width: fit-content;
    transition: color 300ms ease, letter-spacing 400ms ease;
}
.corr-link:hover { color: var(--gold-bright); letter-spacing: 0.04em; }
.corr-line {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: var(--gold);
    transition: width 360ms var(--curtain-ease);
}
.corr-link:hover .corr-line { width: 90px; }

/* =====================================================
   COLOPHON / FOOTER
   ===================================================== */
.colophon {
    padding: clamp(60px, 12vh, 140px) clamp(20px, 6vw, 80px) clamp(80px, 14vh, 180px);
    max-width: var(--max-content);
    margin: 0 auto;
    text-align: center;
}

.colophon-inner {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    align-items: center;
}

.colophon-line {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    color: var(--bronze);
    letter-spacing: 0.04em;
    max-width: 72ch;
}

.colophon-mono {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    color: var(--stone);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.mono-key { color: var(--bronze); text-transform: uppercase; }
.mono-val { color: var(--parchment); }
.mono-sep { opacity: 0.5; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 880px) {
    .tableau {
        flex-direction: column !important;
        min-height: auto;
        padding-inline: clamp(18px, 5vw, 44px) !important;
        gap: 32px;
    }
    .tableau-right { flex-direction: column-reverse !important; }
    .tableau-visual {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .tableau-rule {
        width: 40%;
        height: 1px;
        flex-basis: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            var(--gold-rule) 18%,
            var(--gold-rule) 82%,
            transparent 100%);
    }
    .tableau-text { max-width: 100%; }
    .nav-links { display: none; }
}

@media (max-width: 520px) {
    .display-hero { font-size: clamp(2.2rem, 11vw, 3.6rem); }
    .colophon-mono { font-size: 0.68rem; letter-spacing: 0.14em; }
}

/* =====================================================
   INITIAL STATE HOOKS FOR JS
   ===================================================== */
.tableau .tableau-visual,
.tableau .tableau-text,
.tableau .tableau-rule {
    will-change: transform, opacity;
}