/* ============================================================
   monopole.style — A Pastoral Glass Cathedral
   Frutiger Aero · Monochrome Silver-Glass · Art-Deco Display
   ============================================================ */

/* -----------------------------------------------------------
   Tokens
   ----------------------------------------------------------- */
:root {
    /* Monochrome silver-glass palette */
    --cloud-milk:    #FAFBFC;  /* lightest */
    --morning-frost: #E8ECF0;
    --polished-pewter: #C4CCD6;
    --wet-stone:     #8E99A4;
    --slate-water:   #5A6570;
    --deep-basin:    #2D3339;  /* darkest */
    --glass-surface: #F0F3F6;

    /* RGBA forms */
    --pewter-60: rgba(196, 204, 214, 0.6);
    --pewter-30: rgba(196, 204, 214, 0.3);
    --milk-80:   rgba(250, 251, 252, 0.8);
    --slate-10:  rgba(93, 101, 112, 0.10);
    --basin-08:  rgba(45, 51, 57, 0.08);
    --basin-14:  rgba(45, 51, 57, 0.14);
    --white-30:  rgba(255, 255, 255, 0.30);
    --white-50:  rgba(255, 255, 255, 0.50);

    /* Type */
    --display: 'Poiret One', 'Inter', sans-serif;
    --sub:     'Josefin Sans', 'Inter', sans-serif;
    --body:    'Questrial', 'Inter', sans-serif;

    /* Easing */
    --ease-glass: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-soft:  cubic-bezier(0.33, 0.0, 0.2, 1);
}

/* -----------------------------------------------------------
   Reset
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cloud-milk);
    color: var(--slate-water);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 1200px 800px at 20% 10%, var(--cloud-milk) 0%, var(--glass-surface) 55%, var(--morning-frost) 100%);
    background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; margin: 0; }

/* -----------------------------------------------------------
   Atmospheric backdrop (persistent, fixed)
   ----------------------------------------------------------- */
.atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.atmosphere-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: normal;
    opacity: 0.65;
    will-change: transform;
}

.atmosphere-glow-1 {
    width: 70vw; height: 70vw;
    top: -20vw; left: -20vw;
    background: radial-gradient(circle, var(--cloud-milk) 0%, var(--glass-surface) 40%, transparent 70%);
    animation: glow-drift-a 28s var(--ease-glass) infinite alternate;
}
.atmosphere-glow-2 {
    width: 60vw; height: 60vw;
    bottom: -15vw; right: -15vw;
    background: radial-gradient(circle, var(--morning-frost) 0%, var(--polished-pewter) 60%, transparent 80%);
    opacity: 0.45;
    animation: glow-drift-b 36s var(--ease-glass) infinite alternate;
}
.atmosphere-glow-3 {
    width: 50vw; height: 50vw;
    top: 40vh; left: 50vw;
    background: radial-gradient(circle, var(--glass-surface) 0%, transparent 65%);
    opacity: 0.55;
    animation: glow-drift-c 32s var(--ease-glass) infinite alternate;
}

@keyframes glow-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(8vw, 6vh) scale(1.08); }
}
@keyframes glow-drift-b {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-7vw, -5vh) scale(1.10); }
}
@keyframes glow-drift-c {
    from { transform: translate(-50%, 0) scale(1); }
    to   { transform: translate(-58%, -8vh) scale(1.06); }
}

/* -----------------------------------------------------------
   Wordmark (top-left)
   ----------------------------------------------------------- */
.wordmark {
    position: fixed;
    top: 32px; left: 40px;
    z-index: 50;
    font-family: var(--sub);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--wet-stone);
    mix-blend-mode: multiply;
    transition: color 1.2s var(--ease-glass);
}

.wordmark-text::before {
    content: "◇  ";
    color: var(--polished-pewter);
}

/* -----------------------------------------------------------
   Site index nav (right side)
   ----------------------------------------------------------- */
.site-index {
    position: fixed;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 50;
}

.site-index ul {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.index-link {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sub);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wet-stone);
    opacity: 0.55;
    transition: opacity 0.8s var(--ease-glass), color 0.8s var(--ease-glass);
    cursor: pointer;
}

.index-num {
    display: inline-block;
    width: 24px;
    text-align: right;
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: 0.10em;
    color: var(--slate-water);
}

.index-name {
    position: relative;
    padding-bottom: 3px;
}
.index-name::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px;
    width: 0;
    background: var(--deep-basin);
    transition: width 0.9s var(--ease-glass);
}
.index-link:hover { opacity: 1; color: var(--deep-basin); }
.index-link:hover .index-name::after { width: 100%; }

.index-link.active {
    opacity: 1;
    color: var(--deep-basin);
}
.index-link.active .index-name::after { width: 100%; }

/* -----------------------------------------------------------
   Scroll container & sections
   ----------------------------------------------------------- */
.scroll-container {
    position: relative;
    z-index: 1;
    scroll-snap-type: y proximity;
}

.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
}

.scene-garden { min-height: 120vh; }

.scene-refraction {
    background:
        radial-gradient(ellipse at 50% 70%, var(--slate-water) 0%, var(--deep-basin) 70%, var(--deep-basin) 100%);
    color: var(--cloud-milk);
}

/* Layers */
.layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.layer-foreground, .layer-hero { pointer-events: auto; }

.layer-background { z-index: 1; }
.layer-midground  { z-index: 2; }
.layer-foreground { z-index: 4; }
.layer-hero       { z-index: 4; }

/* Background drifting shapes */
.bg-shape, .bg-geo {
    position: absolute;
    will-change: transform;
}
.bg-shape-1 {
    width: 55vw; height: 55vw;
    top: -10vw; right: -12vw;
    animation: slow-drift-a 38s var(--ease-glass) infinite alternate;
}
.bg-shape-2 {
    width: 70vw; height: 70vw;
    top: -15vw; left: -20vw;
    animation: slow-drift-b 42s var(--ease-glass) infinite alternate;
}
.bg-shape-3 {
    width: 80vw; height: 80vw;
    bottom: -25vw; right: -25vw;
    animation: slow-drift-a 50s var(--ease-glass) infinite alternate;
}

.bg-geo-1 {
    width: 30vw; height: 30vw;
    top: 10vh; left: 8vw;
    animation: rotate-slow 90s linear infinite;
}
.bg-geo-2 {
    width: 22vw; height: 22vw;
    top: 55vh; right: 12vw;
    animation: rotate-slow 120s linear infinite reverse;
}
.bg-geo-3 {
    width: 28vw; height: 28vw;
    bottom: 6vh; left: 38vw;
    animation: rotate-slow 110s linear infinite;
}

@keyframes slow-drift-a {
    from { transform: translate(0, 0) scale(1) rotate(0deg); }
    to   { transform: translate(3vw, 2vh) scale(1.05) rotate(6deg); }
}
@keyframes slow-drift-b {
    from { transform: translate(0, 0) scale(1) rotate(0deg); }
    to   { transform: translate(-3vw, 3vh) scale(1.06) rotate(-4deg); }
}
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Midground blobs */
.blob {
    position: absolute;
    will-change: transform;
}
.blob-surface-a {
    width: 75vw; height: 75vw;
    top: -8vw; left: -18vw;
    animation: blob-breathe-a 11s var(--ease-glass) infinite alternate;
}
.blob-surface-b {
    width: 60vw; height: 60vw;
    bottom: -20vw; right: -10vw;
    animation: blob-breathe-b 13s var(--ease-glass) infinite alternate;
}
.blob-meadow-a {
    width: 90vw; height: 90vw;
    top: -20vw; right: -25vw;
    animation: blob-breathe-a 12s var(--ease-glass) infinite alternate;
}
.blob-meadow-b {
    width: 70vw; height: 70vw;
    bottom: -15vw; left: -18vw;
    animation: blob-breathe-b 14s var(--ease-glass) infinite alternate;
}
.blob-garden-a {
    width: 85vw; height: 85vw;
    top: -10vw; right: -25vw;
    animation: blob-breathe-a 13s var(--ease-glass) infinite alternate;
}
.blob-garden-b {
    width: 70vw; height: 70vw;
    bottom: -15vw; left: -20vw;
    animation: blob-breathe-b 15s var(--ease-glass) infinite alternate;
}
.blob-refraction-a {
    width: 90vw; height: 90vw;
    top: -10vw; left: -25vw;
    animation: blob-breathe-a 12s var(--ease-glass) infinite alternate;
}
.blob-refraction-b {
    width: 80vw; height: 80vw;
    bottom: -20vw; right: -25vw;
    animation: blob-breathe-b 14s var(--ease-glass) infinite alternate;
}

@keyframes blob-breathe-a {
    from { transform: scale(0.98) rotate(0deg); }
    to   { transform: scale(1.02) rotate(2deg); }
}
@keyframes blob-breathe-b {
    from { transform: scale(1.00) rotate(0deg); }
    to   { transform: scale(1.04) rotate(-3deg); }
}

/* -----------------------------------------------------------
   SECTION 1: Surface Tension — hero blob
   ----------------------------------------------------------- */
.hero-blob-wrap {
    position: relative;
    width: min(70vw, 700px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.hero-blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 30px 80px rgba(45,51,57,0.10));
    will-change: transform, filter;
    animation: hero-pulse 9s var(--ease-glass) infinite alternate;
}

@keyframes hero-pulse {
    from {
        transform: scale(1);
        filter: drop-shadow(0 30px 80px rgba(45,51,57,0.08));
    }
    to {
        transform: scale(1.025);
        filter: drop-shadow(0 40px 100px rgba(45,51,57,0.12));
    }
}

.hero-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(72%, 520px);
    text-align: center;
    z-index: 2;
}

.eyebrow {
    font-family: var(--sub);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--wet-stone);
    margin: 0 0 28px 0;
}

.hero-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(48px, 9vw, 112px);
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--deep-basin);
    margin: 0;
}

.hero-dot {
    color: var(--polished-pewter);
    font-style: normal;
}

.hero-sub {
    font-family: var(--sub);
    font-weight: 300;
    font-size: clamp(14px, 1.6vw, 18px);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wet-stone);
    margin: 18px 0 26px 0;
}

.hero-rule {
    width: 220px;
    margin: 0 auto 28px auto;
}
.rule-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.hero-prose {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--slate-water);
    margin: 0 auto;
    max-width: 440px;
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--sub);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.40em;
    text-transform: uppercase;
    color: var(--wet-stone);
}
.cue-line {
    display: block;
    width: 1px;
    height: 38px;
    background: linear-gradient(to bottom, var(--wet-stone), transparent);
    animation: cue-pulse 2.6s var(--ease-glass) infinite;
}
@keyframes cue-pulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.5; transform-origin: top; }
    50%      { transform: scaleY(1);   opacity: 1;   transform-origin: top; }
}

/* -----------------------------------------------------------
   SECTION 2: Meadow — glass panels grid
   ----------------------------------------------------------- */
.meadow-grid {
    position: relative;
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding-top: 18vh;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px;
}

.glass-panel {
    background: rgba(240, 243, 246, 0.62);
    backdrop-filter: blur(24px) saturate(1.10);
    -webkit-backdrop-filter: blur(24px) saturate(1.10);
    border: 1px solid var(--white-30);
    border-radius: 22px;
    box-shadow: 0 8px 32px var(--basin-08), inset 0 1px 0 var(--white-50);
    padding: 38px 40px;
    color: var(--slate-water);
    transition: transform 1.4s var(--ease-glass), box-shadow 1.4s var(--ease-glass);
}
.glass-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 44px var(--basin-14), inset 0 1px 0 var(--white-50);
}

.panel-meadow-1 {
    grid-column: 1; grid-row: 1 / span 2;
    padding: 48px 50px;
}
.panel-meadow-2 {
    grid-column: 2; grid-row: 1;
}
.panel-meadow-3 {
    grid-column: 2; grid-row: 2;
}

.panel-eyebrow {
    font-family: var(--sub);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--wet-stone);
    margin: 0 0 18px 0;
}

.panel-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--deep-basin);
    margin: 0 0 20px 0;
}

.panel-rule {
    width: 200px;
    margin: 0 0 22px 0;
}

.panel-subtitle {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--deep-basin);
    margin: 0 0 22px 0;
}

.panel-prose {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--slate-water);
    margin: 0;
    max-width: 480px;
}

.panel-quote {
    font-family: var(--sub);
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--deep-basin);
    margin: 0;
    font-style: normal;
}

.annotation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.annotation-list li {
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: baseline;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--pewter-30);
}
.annotation-list li:last-child { border-bottom: none; }

.ann-key {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.10em;
    color: var(--wet-stone);
}
.ann-val {
    font-family: var(--sub);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate-water);
}

/* -----------------------------------------------------------
   SECTION 3: Submerged Garden — asymmetric composition
   ----------------------------------------------------------- */
.garden-content {
    position: relative;
    width: min(720px, 92vw);
    margin: 0;
    padding: 32vh 0 8vh 18vw;
    z-index: 5;
}

@media (max-width: 900px) {
    .garden-content { padding-left: 8vw; }
}

.eyebrow-dark {
    color: var(--wet-stone);
}

.garden-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 92px);
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--deep-basin);
    margin: 22px 0 28px 0;
}

.garden-rule {
    width: 380px;
    max-width: 80%;
    margin: 0 0 32px 0;
}

.garden-prose {
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.78;
    color: var(--slate-water);
    margin: 0 0 22px 0;
    max-width: 580px;
}
.garden-prose-secondary {
    color: var(--wet-stone);
    font-size: 16px;
}

.garden-meta {
    display: flex;
    gap: 38px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--pewter-30);
}
.meta-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.meta-key {
    font-family: var(--sub);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--wet-stone);
}
.meta-val {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--deep-basin);
}

/* -----------------------------------------------------------
   SECTION 4: Refraction — convergence, dark
   ----------------------------------------------------------- */
.refraction-stage {
    position: relative;
    width: min(900px, 92vw);
    margin: 0 auto;
    padding-top: 32vh;
    text-align: center;
    color: var(--cloud-milk);
}

.refraction-eyebrow {
    font-family: var(--sub);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--polished-pewter);
    margin: 0 0 28px 0;
}

.refraction-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(44px, 7vw, 96px);
    line-height: 1.1;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--cloud-milk);
    margin: 0 0 32px 0;
}

.refraction-rule {
    width: min(520px, 80vw);
    margin: 0 auto 36px auto;
}

.refraction-prose {
    font-family: var(--sub);
    font-weight: 300;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.7;
    letter-spacing: 0.10em;
    color: var(--polished-pewter);
    max-width: 600px;
    margin: 0 auto;
    text-transform: none;
}

.refraction-footer {
    margin-top: 80px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sub);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--wet-stone);
}
.footer-mark { color: var(--polished-pewter); }
.footer-stamp { font-family: var(--display); font-size: 13px; letter-spacing: 0.16em; }
.footer-sep { opacity: 0.6; }

/* -----------------------------------------------------------
   Bubbles
   ----------------------------------------------------------- */
.bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--pewter-60);
    background:
        radial-gradient(circle at 30% 25%, rgba(250,251,252,0.85) 0%, rgba(250,251,252,0.0) 50%),
        radial-gradient(circle at 70% 75%, rgba(93,101,112,0.10) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(240,243,246,0.20) 0%, rgba(196,204,214,0.05) 100%);
    box-shadow: inset 0 0 20px rgba(200,210,220,0.18), 0 4px 12px rgba(45,51,57,0.04);
    will-change: transform, opacity;
    opacity: 0;
}

.bubble.is-running {
    animation:
        bubble-rise var(--rise-dur, 24s) linear var(--rise-delay, 0s) infinite,
        bubble-wobble var(--wob-dur, 5s) var(--ease-glass) var(--wob-delay, 0s) infinite alternate;
}

@keyframes bubble-rise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    8%   { opacity: var(--bubble-opacity, 0.55); }
    92%  { opacity: var(--bubble-opacity, 0.55); }
    100% { transform: translate3d(0, calc(-100vh - 240px), 0); opacity: 0; }
}

@keyframes bubble-wobble {
    0%   { margin-left: -16px; }
    25%  { margin-left:  -6px; }
    50%  { margin-left:  10px; }
    75%  { margin-left:  -2px; }
    100% { margin-left:  16px; }
}

/* Section 4 dark bubbles — invert highlight */
.scene-refraction .bubble {
    border-color: rgba(196,204,214,0.45);
    background:
        radial-gradient(circle at 30% 25%, rgba(250,251,252,0.55) 0%, rgba(250,251,252,0.0) 50%),
        radial-gradient(circle at 70% 75%, rgba(0,0,0,0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(196,204,214,0.10) 0%, transparent 100%);
    box-shadow: inset 0 0 22px rgba(196,204,214,0.18), 0 4px 14px rgba(0,0,0,0.20);
}

/* -----------------------------------------------------------
   Underline-draw animation triggered by IntersectionObserver
   ----------------------------------------------------------- */
.rule-svg path,
.rule-svg line,
.rule-svg circle,
.rule-svg rect {
    transition:
        stroke-dashoffset 1.6s var(--ease-glass),
        opacity 0.6s var(--ease-glass);
}

.rule-svg.in-view path:not(.rule-ornament),
.rule-svg.in-view line:not(.rule-ornament) {
    stroke-dashoffset: 0;
}

.rule-svg.in-view .rule-ornament {
    transition-delay: 0.40s;
    stroke-dashoffset: 0;
}

/* -----------------------------------------------------------
   Scroll reveal — for prose & panels
   ----------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 1.4s var(--ease-glass),
        transform 1.4s var(--ease-glass);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------
   Section accent state via JS (driven from observer)
   ----------------------------------------------------------- */
body[data-active-scene="4"] .wordmark { color: var(--polished-pewter); }
body[data-active-scene="4"] .index-link { color: var(--polished-pewter); }
body[data-active-scene="4"] .index-num { color: var(--cloud-milk); }
body[data-active-scene="4"] .index-link.active { color: var(--cloud-milk); }
body[data-active-scene="4"] .index-name::after { background: var(--cloud-milk); }

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .meadow-grid { grid-template-columns: 1fr; }
    .panel-meadow-1, .panel-meadow-2, .panel-meadow-3 {
        grid-column: 1; grid-row: auto;
    }
    .site-index { display: none; }
}

@media (max-width: 768px) {
    .scroll-container { scroll-snap-type: none; }
    .wordmark { top: 18px; left: 20px; font-size: 11px; }

    .hero-blob-wrap { width: 92vw; }
    .hero-content { width: 80%; }
    .hero-title { font-size: clamp(40px, 11vw, 64px); }

    .meadow-grid {
        padding-top: 14vh;
        gap: 18px;
    }
    .glass-panel { padding: 28px 26px; }

    .garden-content { padding: 20vh 6vw 8vh 6vw; }
    .garden-title { font-size: clamp(40px, 11vw, 60px); }
    .garden-meta { gap: 22px; }

    .refraction-stage { padding-top: 22vh; }
    .refraction-title { font-size: clamp(38px, 11vw, 60px); }

    /* Reduce blob scale on mobile (~40%) */
    .blob, .bg-shape, .bg-geo {
        transform: scale(0.6);
        transform-origin: center;
    }
    .blob-surface-a, .blob-surface-b,
    .blob-meadow-a, .blob-meadow-b,
    .blob-garden-a, .blob-garden-b,
    .blob-refraction-a, .blob-refraction-b {
        animation: none;
    }
}

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

/* -----------------------------------------------------------
   Dark mode — invert monochrome scale
   ----------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    body {
        background:
            radial-gradient(ellipse 1200px 800px at 20% 10%, var(--deep-basin) 0%, var(--slate-water) 80%, var(--deep-basin) 100%);
        color: var(--cloud-milk);
    }
    .hero-title, .panel-title, .panel-subtitle, .garden-title, .meta-val {
        color: var(--cloud-milk);
    }
    .hero-prose, .panel-prose, .garden-prose, .panel-quote { color: var(--polished-pewter); }
    .eyebrow, .panel-eyebrow, .meta-key, .ann-val, .index-link, .wordmark {
        color: var(--polished-pewter);
    }
    .glass-panel {
        background: rgba(45, 51, 57, 0.55);
        border-color: rgba(196, 204, 214, 0.20);
        box-shadow: 0 10px 40px rgba(0,0,0,0.40), inset 0 1px 0 rgba(196,204,214,0.10);
    }
    .rule-svg path, .rule-svg line, .rule-svg circle, .rule-svg rect {
        stroke: var(--cloud-milk) !important;
    }
}