/* =========================================================================
   monopole.cloud — zen rock garden, watercolor on washi paper
   Palette: earth tones. Typography: Bebas Neue + Cormorant Garamond.
   ========================================================================= */

:root {
    --shoji-cream: #F2EAD3;
    --warm-parchment: #E8DCC8;
    --deep-umber: #3B3128;
    --charcoal-earth: #4A4038;
    --warm-stone: #6B5B4F;
    --weathered-stone: #8B7D6B;
    --moss-patina: #7A8B6A;
    --burnt-sienna: #A0764A;
    --ink-wash: #2E261E;
    --dusty-rose-earth: #C4A882;

    --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --gentle-out: cubic-bezier(0.16, 1, 0.3, 1);

    --gutter: 32px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 400;
    color: var(--charcoal-earth);
    background-color: var(--shoji-cream);
    background-image:
        radial-gradient(ellipse at 20% 10%, rgba(196, 168, 130, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(122, 139, 106, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(160, 118, 74, 0.04) 0%, transparent 70%),
        linear-gradient(180deg, #F2EAD3 0%, #EFE6CB 50%, #F2EAD3 100%);
    background-blend-mode: multiply, soft-light, normal, normal;
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
    min-height: 100vh;
}

/* Hidden SVG defs container */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =========================================================================
   PAPER GRAIN OVERLAY
   ========================================================================= */
.paper-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.25;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(178deg,
            transparent 0%,
            rgba(196, 168, 130, 0.025) 18%,
            transparent 32%,
            rgba(122, 139, 106, 0.02) 48%,
            transparent 64%,
            rgba(160, 118, 74, 0.025) 82%,
            transparent 100%);
}

/* =========================================================================
   CONSTELLATION NAVIGATION
   ========================================================================= */
.constellation-nav {
    position: fixed;
    top: 36px;
    right: 36px;
    z-index: 100;
    width: 240px;
    height: 240px;
    pointer-events: none;
}

.constellation-nav .nav-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: var(--warm-stone);
    border-radius: 50%;
    transition: opacity 480ms var(--elastic);
    pointer-events: auto;
    box-shadow: 0 0 8px rgba(107, 91, 79, 0.25);
    cursor: pointer;
}

.constellation-map {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.4);
    transition: transform 600ms var(--elastic), opacity 480ms ease-out;
    pointer-events: none;
}

.constellation-nav.expanded .nav-dot {
    opacity: 0;
}
.constellation-nav.expanded .constellation-map {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.nav-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.nav-node-circle {
    cursor: pointer;
    transition: r 320ms var(--elastic), fill 280ms ease-out;
}
.nav-node-circle:hover {
    fill: var(--moss-patina);
}

.nav-labels text {
    text-transform: uppercase;
    pointer-events: none;
}

.nav-hover-zone {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

/* =========================================================================
   SCROLL CONTAINER & SCENES
   ========================================================================= */
.scroll-container {
    position: relative;
    z-index: 3;
    scroll-snap-type: y proximity;
}

.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 80px 64px;
    scroll-snap-align: start;
    display: flex;
    overflow: hidden;
}

/* =========================================================================
   GENERIC TYPOGRAPHY UTILITIES
   ========================================================================= */
.domain-title,
.scene-title,
.block-heading,
.garden-heading,
.block-label,
.void-line {
    font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--deep-umber);
}

.domain-title {
    font-size: clamp(56px, 9vw, 96px);
    letter-spacing: 0.15em;
    margin-top: 28px;
    text-align: center;
    color: var(--deep-umber);
}

.scene-title {
    font-size: clamp(40px, 5vw, 64px);
    letter-spacing: 0.12em;
}

.block-heading {
    font-size: clamp(32px, 3.6vw, 52px);
    letter-spacing: 0.12em;
    margin-bottom: 28px;
}

.garden-heading {
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: 0.14em;
    margin-bottom: 22px;
    color: var(--warm-stone);
}

.block-label {
    display: inline-block;
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: 0.32em;
    color: var(--weathered-stone);
    margin-bottom: 34px;
}

.block-paragraph {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--charcoal-earth);
    margin-bottom: 24px;
}

.block-caption {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    color: var(--weathered-stone);
    margin-top: 18px;
}

.block-caption-italic {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    color: var(--warm-stone);
    text-align: center;
    display: block;
    padding: 16px 22px;
}

.opening-tagline,
.closing-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    color: var(--warm-stone);
    letter-spacing: 0.06em;
    text-align: center;
    margin-top: 22px;
}

/* =========================================================================
   BLOCK COMMON STYLES (modular blocks)
   ========================================================================= */
.block {
    position: relative;
    background-color: var(--warm-parchment);
    overflow: visible;
    isolation: isolate;
    transition:
        opacity 800ms var(--elastic),
        transform 800ms var(--elastic);
}

/* Anchor / satellite / void are all .block; soften default to true parchment */
.block .block-content {
    position: relative;
    z-index: 2;
    padding: 48px 52px;
}

/* Watercolor wash inside each block */
.block-wash {
    position: absolute;
    inset: -8px;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 28% 22%, rgba(196, 168, 130, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 38%, rgba(122, 139, 106, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 60% 78%, rgba(160, 118, 74, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 18% 82%, rgba(196, 168, 130, 0.14) 0%, transparent 60%);
    background-blend-mode: multiply, soft-light, multiply, soft-light;
    filter: blur(2px);
    opacity: 0.85;
}

/* Ink-bleed border via secondary pseudo */
.block::before {
    content: "";
    position: absolute;
    inset: -12px -16px -18px -10px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(232, 220, 200, 0.95) 30%, rgba(232, 220, 200, 0.6) 60%, transparent 88%);
    filter: blur(12px);
    opacity: 0.85;
}

.block::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 100% 100%, rgba(160, 118, 74, 0.06) 0%, transparent 30%),
        radial-gradient(ellipse at 0% 0%, rgba(122, 139, 106, 0.04) 0%, transparent 40%);
    mix-blend-mode: multiply;
}

/* Reveal state */
[data-reveal] {
    opacity: 0;
    transform: translateY(34px);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   SCENE 1: OPENING FIELD
   ========================================================================= */
.scene-opening {
    align-items: center;
    justify-content: center;
}

.opening-composition {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-top: calc(40vh - 80px);
    z-index: 4;
}

.monopole-glyph {
    display: block;
    margin: 0 auto;
    width: 160px;
    height: 160px;
    position: relative;
    z-index: 5;
}
.monopole-glyph svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.glyph-field-lines path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke-dashoffset 1800ms var(--gentle-out);
}
.monopole-glyph.is-revealed .glyph-field-lines path {
    stroke-dashoffset: 0;
}
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(2) { transition-delay: 80ms; }
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(3) { transition-delay: 160ms; }
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(4) { transition-delay: 240ms; }
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(5) { transition-delay: 320ms; }
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(6) { transition-delay: 400ms; }
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(7) { transition-delay: 480ms; }
.monopole-glyph.is-revealed .glyph-field-lines path:nth-child(8) { transition-delay: 560ms; }

.opening-field-arcs {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.arc-path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 3000ms var(--gentle-out);
}
.scene-opening.is-active .arc-path {
    stroke-dashoffset: 0;
}
.scene-opening.is-active .arc-1 { transition-delay: 600ms; }
.scene-opening.is-active .arc-2 { transition-delay: 800ms; }
.scene-opening.is-active .arc-3 { transition-delay: 1000ms; }
.scene-opening.is-active .arc-4 { transition-delay: 1200ms; }
.scene-opening.is-active .arc-5 { transition-delay: 1400ms; }

/* =========================================================================
   SCENE 2: FIRST STONE
   ========================================================================= */
.scene-first-stone {
    align-items: center;
    justify-content: center;
}

.modular-grid {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 55px auto 55px auto 89px;
    gap: 32px;
}

.anchor-block.anchor-left {
    grid-column: 1 / span 4;
    grid-row: 2 / span 3;
    margin-left: 2.5%;
    transform-origin: left center;
}

.satellite-top {
    grid-column: 5 / span 2;
    grid-row: 2 / span 1;
    align-self: end;
    padding: 24px;
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.satellite-bottom {
    grid-column: 5 / span 2;
    grid-row: 4 / span 1;
    align-self: start;
    padding: 32px 28px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.satellite-constellation {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 14px;
    overflow: visible;
}

.satellite-constellation g circle {
    transition: r 420ms var(--elastic), fill 320ms ease-out;
}

/* Satellite wash variants — bias certain hues */
.satellite-wash-moss {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(122, 139, 106, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse at 25% 80%, rgba(196, 168, 130, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 90%, rgba(160, 118, 74, 0.10) 0%, transparent 60%) !important;
    background-blend-mode: multiply, soft-light, multiply !important;
}

.satellite-wash-sienna {
    background:
        radial-gradient(ellipse at 60% 50%, rgba(160, 118, 74, 0.30) 0%, transparent 58%),
        radial-gradient(ellipse at 20% 30%, rgba(196, 168, 130, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(122, 139, 106, 0.08) 0%, transparent 60%) !important;
    background-blend-mode: multiply, soft-light, multiply !important;
}

.field-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.connector-path {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 2400ms var(--gentle-out);
}
.scene.is-active .connector-path {
    stroke-dashoffset: 0;
}

/* =========================================================================
   SCENE 3: GARDEN ARRANGEMENT
   ========================================================================= */
.scene-garden {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 64px;
}

.scene-header {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding-top: 24px;
}

.scene-numeral {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    color: var(--burnt-sienna);
    font-size: 26px;
    letter-spacing: 0.05em;
}

.garden-arrangement {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto;
    gap: 34px;
    padding: 0 0 89px;
}

.garden-stone-1 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    margin-top: 0;
}

.garden-stone-2 {
    grid-column: 5 / span 2;
    grid-row: 1 / span 2;
    margin-top: 89px;
    transform-origin: top right;
}

.garden-stone-3 {
    grid-column: 2 / span 4;
    grid-row: 3 / span 1;
    margin-left: 12%;
    margin-top: 34px;
}

.garden-stone .block-content {
    padding: 38px 42px;
}

.garden-wash-moss {
    background:
        radial-gradient(ellipse at 35% 30%, rgba(122, 139, 106, 0.32) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(196, 168, 130, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(160, 118, 74, 0.10) 0%, transparent 60%) !important;
    background-blend-mode: multiply, soft-light, multiply !important;
}

.garden-wash-sienna {
    background:
        radial-gradient(ellipse at 60% 50%, rgba(160, 118, 74, 0.34) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 30%, rgba(196, 168, 130, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(122, 139, 106, 0.10) 0%, transparent 60%) !important;
    background-blend-mode: multiply, soft-light, multiply !important;
}

.garden-wash-neutral {
    background:
        radial-gradient(ellipse at 40% 40%, rgba(196, 168, 130, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse at 75% 70%, rgba(122, 139, 106, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 25% 80%, rgba(160, 118, 74, 0.10) 0%, transparent 55%) !important;
    background-blend-mode: multiply, soft-light, multiply !important;
}

.garden-field-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

/* =========================================================================
   SCENE 4: VOID
   ========================================================================= */
.scene-void {
    align-items: flex-start;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(196, 168, 130, 0.10) 0%, transparent 70%);
    background-blend-mode: soft-light;
}

.void-fragment {
    position: absolute;
    top: 61.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 1200ms var(--gentle-out), transform 1200ms var(--gentle-out);
    text-align: center;
    width: 90%;
    max-width: 900px;
}

.void-line {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(28px, 3.6vw, 36px);
    font-weight: 400;
    color: var(--warm-stone);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.25;
}

/* =========================================================================
   SCENE 5: CONSTELLATION MAP
   ========================================================================= */
.scene-constellation {
    flex-direction: column;
    align-items: stretch;
}

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

.constellation-svg {
    width: 100%;
    height: auto;
    max-height: 70vh;
    overflow: visible;
}

.const-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 2200ms var(--gentle-out);
}

.scene-constellation.is-active .const-line {
    stroke-dashoffset: 0;
}

.scene-constellation.is-active .const-line:nth-child(1)  { transition-delay: 100ms; }
.scene-constellation.is-active .const-line:nth-child(2)  { transition-delay: 250ms; }
.scene-constellation.is-active .const-line:nth-child(3)  { transition-delay: 400ms; }
.scene-constellation.is-active .const-line:nth-child(4)  { transition-delay: 550ms; }
.scene-constellation.is-active .const-line:nth-child(5)  { transition-delay: 700ms; }
.scene-constellation.is-active .const-line:nth-child(6)  { transition-delay: 850ms; }
.scene-constellation.is-active .const-line:nth-child(7)  { transition-delay: 1000ms; }
.scene-constellation.is-active .const-line:nth-child(8)  { transition-delay: 1150ms; }
.scene-constellation.is-active .const-line:nth-child(9)  { transition-delay: 1300ms; }
.scene-constellation.is-active .const-line:nth-child(10) { transition-delay: 1450ms; }
.scene-constellation.is-active .const-line:nth-child(11) { transition-delay: 1600ms; }
.scene-constellation.is-active .const-line:nth-child(12) { transition-delay: 1750ms; }
.scene-constellation.is-active .const-line:nth-child(13) { transition-delay: 1900ms; }
.scene-constellation.is-active .const-line:nth-child(14) { transition-delay: 2050ms; }
.scene-constellation.is-active .const-line:nth-child(15) { transition-delay: 2200ms; }
.scene-constellation.is-active .const-line:nth-child(16) { transition-delay: 2350ms; }

.const-node circle {
    transform-origin: center;
    transform-box: fill-box;
    animation: nodePulse 3s ease-in-out infinite;
}
.const-node:nth-child(1) circle { animation-delay: 0s; }
.const-node:nth-child(2) circle { animation-delay: 0.4s; }
.const-node:nth-child(3) circle { animation-delay: 0.8s; }
.const-node:nth-child(4) circle { animation-delay: 1.2s; }
.const-node:nth-child(5) circle { animation-delay: 1.6s; }
.const-node:nth-child(6) circle { animation-delay: 2.0s; }
.const-node:nth-child(7) circle { animation-delay: 2.4s; }
.const-node:nth-child(8) circle { animation-delay: 0.2s; }
.const-node:nth-child(9) circle { animation-delay: 0.6s; }
.const-node:nth-child(10) circle { animation-delay: 1.0s; }

@keyframes nodePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* =========================================================================
   SCENE 6: CLOSING FIELD
   ========================================================================= */
.scene-closing {
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding-top: 0;
}

.closing-composition {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-top: calc(60vh - 80px);
}

.closing-footer {
    margin-top: 80px;
    text-align: center;
}

.footer-line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    color: var(--weathered-stone);
    letter-spacing: 0.15em;
}

/* =========================================================================
   STAR SCATTER
   ========================================================================= */
.star-scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.star-scatter .star-dot {
    position: absolute;
    border-radius: 50%;
    background-color: var(--burnt-sienna);
    opacity: 0;
    transition: opacity 1400ms ease-in;
}

.star-scatter .star-dot.lit {
    opacity: var(--star-opacity, 0.45);
}

/* =========================================================================
   HOVER INTERACTIONS — elastic
   ========================================================================= */
.block,
.garden-stone {
    transition:
        opacity 800ms var(--elastic),
        transform 800ms var(--elastic),
        box-shadow 400ms var(--elastic);
}

.block.is-visible:hover,
.garden-stone.is-visible:hover {
    transform: translateY(0) scale(1.018);
    box-shadow: 0 18px 38px -22px rgba(46, 38, 30, 0.22);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
    .scene { padding: 64px 28px; }

    .modular-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 34px;
    }
    .anchor-block.anchor-left,
    .satellite-top,
    .satellite-bottom {
        grid-column: 1;
        grid-row: auto;
        margin: 0;
    }

    .garden-arrangement {
        grid-template-columns: 1fr;
    }
    .garden-stone-1, .garden-stone-2, .garden-stone-3 {
        grid-column: 1;
        grid-row: auto;
        margin: 0;
    }
    .garden-stone-2 { margin-top: 0; }
    .garden-stone-3 { margin-top: 0; margin-left: 0; }

    .constellation-nav {
        top: 18px;
        right: 18px;
        width: 200px;
        height: 200px;
    }
    .domain-title {
        font-size: clamp(40px, 12vw, 64px);
    }
    .opening-composition,
    .closing-composition {
        padding-top: 30vh;
    }
}

@media (max-width: 560px) {
    .scene { padding: 56px 18px; }
    .block .block-content { padding: 32px 28px; }
    .garden-stone .block-content { padding: 28px 24px; }
    .scene-header { flex-direction: column; gap: 8px; }
    .domain-title { letter-spacing: 0.1em; }
}

/* Hide field-line decorative SVGs on small viewports */
@media (max-width: 1024px) {
    .field-connectors,
    .opening-field-arcs,
    .garden-field-lines {
        display: none;
    }
}