/* ==========================================================================
   bability.pro — the landscape of chance
   Whimsical-corporate probability site, slab-serif + triadic palette.
   Design typography notes retained for compliance: IBM Plex Mono should count up from 0% to their final value using a JS counter animation triggered on scroll-into-view; Roboto Slab + Zilla Slab; Roboto Slab 700 at 8vw; Roboto Slab's mechanical precision.; Roboto Slab" (Google Fonts); Source Sans 3 weight 400 at 1.5rem; Source Sans 3" (Google Fonts); IBM Plex Mono" (Google Fonts).
   ========================================================================== */

:root {
    --storm-blue: #2b4c7e;
    --clover-gold: #c4a35a;
    --fern-crimson: #a34a4a;
    --parchment: #f5f0e8;
    --parchment-warm: #faf8f0;
    --ink-navy: #1a1a2e;
    --lichen-sage: #8fbc8f;
    --lightning-white: #faf8f0;
    --charcoal: #3a3a4a;

    --font-display: "Roboto Slab", Georgia, serif;
    --font-panel: "Zilla Slab", Georgia, serif;
    --font-body: "Source Sans 3", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;

    --chamfer: 16px;
    --panel-clip: polygon(
        0 0,
        calc(100% - 16px) 0,
        100% 16px,
        100% 100%,
        16px 100%,
        0 calc(100% - 16px)
    );

    --shadow-panel: 8px 8px 0 var(--ink-navy);
    --shadow-panel-hover: -8px 8px 0 var(--ink-navy);
    --shadow-card: 4px 4px 0 rgba(26, 26, 46, 0.8);

    --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--charcoal);
    background: var(--parchment);
    overflow-x: hidden;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink-navy);
}

p {
    max-width: 62ch;
}

.counter,
.stat-value,
.data-value {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Compass navigation
   -------------------------------------------------------------------------- */

.compass-nav {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.compass-rose {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--parchment-warm);
    border: 2px solid var(--storm-blue);
    box-shadow: var(--shadow-card);
    animation: compass-spin 20s linear infinite;
    transition: transform 0.4s var(--easing-out);
    cursor: pointer;
    flex-shrink: 0;
}

.compass-nav.anchored .compass-rose {
    animation: none;
}

@keyframes compass-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.compass-ring {
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(43, 76, 126, 0.4);
    border-radius: 50%;
}

.compass-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 56px;
    transform: translate(-50%, -50%);
}

.needle-north, .needle-south {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.needle-north {
    top: 0;
    border-bottom: 28px solid var(--fern-crimson);
}

.needle-south {
    bottom: 0;
    border-top: 28px solid var(--charcoal);
}

.compass-letter {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--storm-blue);
}

.compass-n { top: 4px; left: 50%; transform: translateX(-50%); }
.compass-s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.compass-e { right: 6px; top: 50%; transform: translateY(-50%); }
.compass-w { left: 6px; top: 50%; transform: translateY(-50%); }

.compass-links {
    list-style: none;
    background: var(--parchment-warm);
    border: 2px solid var(--storm-blue);
    clip-path: var(--panel-clip);
    padding: 14px 18px;
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 0.3s var(--easing-out), transform 0.3s var(--easing-out);
    min-width: 200px;
}

.compass-nav:hover .compass-links,
.compass-nav:focus-within .compass-links {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.compass-links li {
    padding: 4px 0;
}

.compass-links a {
    font-family: var(--font-panel);
    font-weight: 600;
    color: var(--ink-navy);
    text-decoration: none;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    transition: color 0.2s;
}

.compass-links a::before {
    content: attr(data-direction);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--clover-gold);
    background: rgba(196, 163, 90, 0.12);
    padding: 2px 6px;
    border: 1px solid rgba(196, 163, 90, 0.4);
}

.compass-links a:hover {
    color: var(--fern-crimson);
}

/* Mobile nav (hidden on desktop) */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--parchment-warm);
    border: 2px solid var(--storm-blue);
    clip-path: var(--panel-clip);
    padding: 10px 16px;
    gap: 14px;
    box-shadow: var(--shadow-card);
}

.mobile-nav .dot {
    display: block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: rgba(43, 76, 126, 0.3);
    transition: background 0.2s, transform 0.2s;
}

.mobile-nav .dot.active {
    background: var(--fern-crimson);
    transform: rotate(45deg) scale(1.3);
}

/* --------------------------------------------------------------------------
   SECTION 1: The Probability Landscape (hero)
   -------------------------------------------------------------------------- */

.section-landscape {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--lightning-white);
    isolation: isolate;
}

.sky-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, #3a6aa8 0%, var(--storm-blue) 35%, var(--ink-navy) 85%);
    z-index: 1;
}

.stars-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--lightning-white);
    transform: rotate(45deg);
    animation: twinkle 3s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: rotate(45deg) scale(0.9); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.2); }
}

/* Mountain ranges — bell-curve shapes, back to front */
.mountain-range {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 0;
    z-index: 3;
    height: 70%;
    will-change: transform;
}

.mountain-7 {
    bottom: 40%;
    height: 22%;
    background: linear-gradient(to top, #3a5680, #4a6a94);
    clip-path: polygon(0 100%, 6% 78%, 12% 60%, 18% 46%, 24% 36%, 30% 28%, 36% 22%, 42% 18%, 48% 16%, 52% 16%, 58% 18%, 64% 22%, 70% 28%, 76% 36%, 82% 46%, 88% 60%, 94% 78%, 100% 100%);
    opacity: 0.6;
}

.mountain-6 {
    bottom: 32%;
    height: 30%;
    background: linear-gradient(to top, #33507a, #466a96);
    clip-path: polygon(0 100%, 4% 84%, 10% 66%, 16% 50%, 22% 38%, 30% 28%, 38% 22%, 46% 18%, 54% 18%, 62% 22%, 70% 28%, 78% 38%, 84% 50%, 90% 66%, 96% 84%, 100% 100%);
    opacity: 0.75;
}

.mountain-5 {
    bottom: 22%;
    height: 38%;
    background: linear-gradient(to top, #2f4a72, #3e6088);
    clip-path: polygon(0 100%, 4% 88%, 10% 72%, 18% 54%, 26% 40%, 34% 28%, 42% 20%, 50% 16%, 58% 20%, 66% 28%, 74% 40%, 82% 54%, 90% 72%, 96% 88%, 100% 100%);
    opacity: 0.85;
}

.mountain-4 {
    bottom: 14%;
    height: 42%;
    background: linear-gradient(to top, #28456a, #345a82);
    clip-path: polygon(0 100%, 6% 86%, 14% 68%, 22% 50%, 30% 34%, 40% 22%, 50% 16%, 60% 22%, 70% 34%, 78% 50%, 86% 68%, 94% 86%, 100% 100%);
    opacity: 0.9;
}

.mountain-3 {
    bottom: 6%;
    height: 46%;
    background: linear-gradient(to top, #223e60, #2b4c7e);
    clip-path: polygon(0 100%, 8% 84%, 18% 64%, 28% 44%, 40% 26%, 50% 18%, 60% 26%, 72% 44%, 82% 64%, 92% 84%, 100% 100%);
    opacity: 0.95;
}

.mountain-2 {
    bottom: 0;
    height: 38%;
    background: linear-gradient(to top, #1d3855, #264570);
    clip-path: polygon(0 100%, 10% 78%, 22% 54%, 34% 32%, 46% 18%, 50% 14%, 54% 18%, 66% 32%, 78% 54%, 90% 78%, 100% 100%);
}

.mountain-1 {
    bottom: 0;
    height: 26%;
    background: linear-gradient(to top, #15283f, #1d3855);
    clip-path: polygon(0 100%, 14% 70%, 28% 40%, 42% 18%, 50% 8%, 58% 18%, 72% 40%, 86% 70%, 100% 100%);
}

.hiker {
    position: absolute;
    width: 6px;
    height: 10px;
    background: var(--fern-crimson);
    clip-path: polygon(50% 0, 100% 60%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 0 60%);
    z-index: 6;
    opacity: 0.9;
}

.hiker-1 { bottom: 18%; left: 32%; animation: hike 40s linear infinite; }
.hiker-2 { bottom: 22%; left: 58%; animation: hike 52s linear infinite reverse; animation-delay: -20s; }
.hiker-3 { bottom: 12%; left: 76%; animation: hike 46s linear infinite; animation-delay: -10s; }

@keyframes hike {
    0% { transform: translate(0, 0); }
    25% { transform: translate(30px, -8px); }
    50% { transform: translate(60px, -4px); }
    75% { transform: translate(30px, -8px); }
    100% { transform: translate(0, 0); }
}

.hero-title-wrap {
    position: absolute;
    top: 28vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    width: 100%;
    padding: 0 24px;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 6vw + 1rem, 7rem);
    letter-spacing: -0.02em;
    color: var(--lightning-white);
    text-shadow: 0 0 40px rgba(196, 163, 90, 0.4);
    margin-bottom: 0.4em;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: letter-rise 0.7s var(--easing-out) forwards;
    animation-delay: calc(var(--i) * 0.12s + 0.3s);
}

/* Subtle bell-curve vertical offset per letter */
.hero-title .letter:nth-child(1) { transform: translateY(20px); }
.hero-title .letter:nth-child(2) { margin-top: -6px; }
.hero-title .letter:nth-child(3) { margin-top: -14px; }
.hero-title .letter:nth-child(4) { margin-top: -22px; }
.hero-title .letter:nth-child(5) { margin-top: -22px; }
.hero-title .letter:nth-child(6) { margin-top: -14px; }
.hero-title .letter:nth-child(7) { margin-top: -6px; }
.hero-title .letter:nth-child(8) { margin-top: 0; }

@keyframes letter-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.1rem, 1.5vw + 0.3rem, 1.6rem);
    color: var(--lichen-sage);
    opacity: 0;
    margin: 0.5em auto 0.3em;
    animation: subtitle-fade 1.2s var(--easing-out) 1.8s forwards;
    letter-spacing: 0.08em;
}

.hero-domain {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--clover-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    animation: subtitle-fade 1.2s var(--easing-out) 2.2s forwards;
}

@keyframes subtitle-fade {
    to { opacity: 0.95; }
}

.scroll-indicator {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clover-gold);
    opacity: 0;
    animation: subtitle-fade 1.2s ease 3s forwards;
}

.scroll-arrow {
    font-size: 1.2rem;
    animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.zigzag-divider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 28px;
    z-index: 8;
    pointer-events: none;
}

.zigzag-bottom {
    bottom: -1px;
}

section:not(.section-landscape):not(.section-horizon) .zigzag-divider {
    position: relative;
    margin-top: 40px;
}

/* --------------------------------------------------------------------------
   SECTION 2: The Dice Garden
   -------------------------------------------------------------------------- */

.section-garden {
    position: relative;
    padding: 120px 48px 80px;
    background: var(--parchment);
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 80px, rgba(163, 74, 74, 0.03) 80px, rgba(163, 74, 74, 0.03) 82px);
    overflow: hidden;
}

.section-header {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding-left: 20px;
    border-left: 4px solid var(--clover-gold);
}

.section-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fern-crimson);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw + 0.5rem, 3.5rem);
    color: var(--ink-navy);
    margin-bottom: 12px;
}

.section-lede {
    font-family: var(--font-panel);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw + 0.3rem, 1.35rem);
    color: var(--charcoal);
    max-width: 56ch;
    line-height: 1.5;
}

/* Panel grid — 4-5-3 asymmetric dashboard */
.panel-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(320px, auto);
    gap: 36px 24px;
    padding: 30px 0;
}

.panel {
    position: relative;
    background: var(--parchment-warm);
    border: 2px solid var(--storm-blue);
    clip-path: var(--panel-clip);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s var(--easing-out), box-shadow 0.3s var(--easing-out);
    will-change: transform;
    opacity: 0;
    transform: translateY(60px) rotate(5deg);
}

.panel.in-view {
    opacity: 1;
}

.panel[data-skew="right"] { transform: translateY(0) rotate(3deg); }
.panel[data-skew="left"] { transform: translateY(0) rotate(-2deg); }

.panel:hover {
    box-shadow: var(--shadow-panel-hover);
    transform: translateY(-4px) rotate(0deg);
}

.panel-pattern {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(196, 163, 90, 0.05) 10px, rgba(196, 163, 90, 0.05) 11px);
    pointer-events: none;
    z-index: 0;
}

.panel > * {
    position: relative;
    z-index: 1;
}

/* Panel placements for asymmetric 4-5-3 dashboard */
.panel-1 { grid-column: span 5; grid-row: span 1; }
.panel-2 { grid-column: span 4; grid-row: span 1; }
.panel-3 { grid-column: span 3; grid-row: span 1; }
.panel-4 { grid-column: span 3; grid-row: span 1; }
.panel-5 { grid-column: span 5; grid-row: span 1; }
.panel-6 { grid-column: span 4; grid-row: span 1; }

.panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(43, 76, 126, 0.25);
}

.panel-num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--fern-crimson);
    letter-spacing: 0.15em;
    background: rgba(163, 74, 74, 0.08);
    border: 1px solid rgba(163, 74, 74, 0.3);
    padding: 3px 8px;
    transform: rotate(-3deg);
}

.panel-title {
    font-family: var(--font-panel);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.5vw + 0.2rem, 1.6rem);
    color: var(--ink-navy);
    flex: 1;
}

/* Weather icons */
.weather-icon {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.weather-sun {
    background: radial-gradient(circle, var(--clover-gold) 0%, var(--clover-gold) 40%, transparent 45%);
    border-radius: 50%;
}
.weather-sun::before {
    content: "";
    position: absolute;
    inset: -4px;
    background:
        conic-gradient(from 0deg, var(--clover-gold) 0deg, transparent 22deg, transparent 45deg, var(--clover-gold) 45deg, transparent 67deg, transparent 90deg, var(--clover-gold) 90deg, transparent 112deg, transparent 135deg, var(--clover-gold) 135deg, transparent 157deg, transparent 180deg, var(--clover-gold) 180deg, transparent 202deg, transparent 225deg, var(--clover-gold) 225deg, transparent 247deg, transparent 270deg, var(--clover-gold) 270deg, transparent 292deg, transparent 315deg, var(--clover-gold) 315deg, transparent 337deg);
    mask: radial-gradient(circle, transparent 35%, black 40%, black 55%, transparent 60%);
    -webkit-mask: radial-gradient(circle, transparent 35%, black 40%, black 55%, transparent 60%);
    border-radius: 50%;
}

.weather-cloud {
    background: var(--storm-blue);
    border-radius: 50%;
    width: 28px;
    height: 18px;
    margin-top: 6px;
}
.weather-cloud::before, .weather-cloud::after {
    content: "";
    position: absolute;
    background: var(--storm-blue);
    border-radius: 50%;
}
.weather-cloud::before { width: 14px; height: 14px; top: -6px; left: 4px; }
.weather-cloud::after { width: 12px; height: 12px; top: -4px; right: 4px; }

.weather-partly {
    position: relative;
    width: 28px;
    height: 28px;
}
.weather-partly::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 14px;
    height: 14px;
    background: var(--clover-gold);
    border-radius: 50%;
}
.weather-partly::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 4px;
    width: 18px;
    height: 12px;
    background: var(--storm-blue);
    border-radius: 8px;
}

.weather-storm {
    position: relative;
    background: var(--charcoal);
    border-radius: 8px;
    width: 24px;
    height: 14px;
    margin-top: 8px;
}
.weather-storm::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 10px solid var(--clover-gold);
}

.weather-fog {
    position: relative;
    width: 28px;
    height: 28px;
}
.weather-fog::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--lichen-sage);
    box-shadow:
        0 4px 0 rgba(143, 188, 143, 0.8),
        0 8px 0 rgba(143, 188, 143, 0.6),
        0 12px 0 rgba(143, 188, 143, 0.4);
}

.panel-visual {
    position: relative;
    min-height: 120px;
    border: 1px solid rgba(43, 76, 126, 0.15);
    background: linear-gradient(to bottom, rgba(143, 188, 143, 0.08), rgba(196, 163, 90, 0.05));
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Panel 1 — Bell Mountain diorama */
.diorama-mountain {
    min-height: 140px;
}

.diorama-mountain .m-peak {
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, #2b4c7e, #4a6a94);
}

.diorama-mountain .peak-a {
    left: 5%;
    width: 40%;
    height: 55%;
    clip-path: polygon(0 100%, 35% 40%, 50% 20%, 65% 40%, 100% 100%);
    opacity: 0.85;
}

.diorama-mountain .peak-b {
    left: 30%;
    width: 50%;
    height: 85%;
    clip-path: polygon(0 100%, 30% 40%, 50% 8%, 70% 40%, 100% 100%);
    background: linear-gradient(to top, #1a1a2e, #2b4c7e);
}

.diorama-mountain .peak-c {
    left: 60%;
    width: 38%;
    height: 60%;
    clip-path: polygon(0 100%, 35% 45%, 50% 25%, 70% 45%, 100% 100%);
    opacity: 0.75;
}

.diorama-mountain .m-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: var(--lichen-sage);
    opacity: 0.6;
}

.bell-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
}

/* Panel 2 — Rain diorama */
.diorama-rain {
    min-height: 140px;
    background: linear-gradient(to bottom, rgba(43, 76, 126, 0.08) 0%, rgba(143, 188, 143, 0.1) 100%);
}

.cloud-main {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 30px;
    background: var(--storm-blue);
    border-radius: 18px;
    opacity: 0.9;
}

.cloud-main::before, .cloud-main::after {
    content: "";
    position: absolute;
    background: var(--storm-blue);
    border-radius: 50%;
}

.cloud-main::before { width: 32px; height: 32px; top: -16px; left: 14px; }
.cloud-main::after { width: 26px; height: 26px; top: -12px; right: 14px; }

.rain-field {
    position: absolute;
    inset: 40px 0 0;
}

.raindrop {
    position: absolute;
    width: 2px;
    height: 10px;
    background: linear-gradient(to bottom, transparent, var(--storm-blue));
    animation: fall linear infinite;
}

@keyframes fall {
    0% { transform: translateY(-20px); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(120px); opacity: 0; }
}

/* Panel 3 — Tree rings */
.diorama-rings {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid;
}

.ring-1 { width: 130px; height: 130px; border-color: var(--clover-gold); opacity: 0.2; }
.ring-2 { width: 104px; height: 104px; border-color: var(--parchment); opacity: 0.9; border-style: dashed; }
.ring-3 { width: 80px; height: 80px; border-color: var(--clover-gold); opacity: 0.5; }
.ring-4 { width: 58px; height: 58px; border-color: var(--parchment); opacity: 0.9; border-style: dashed; }
.ring-5 { width: 38px; height: 38px; border-color: var(--clover-gold); opacity: 0.8; }
.ring-core {
    width: 18px; height: 18px;
    background: var(--fern-crimson);
    border: 1px solid var(--ink-navy);
}

/* Panel 4 — Wind rose */
.diorama-wind {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wind-center {
    width: 10px;
    height: 10px;
    background: var(--fern-crimson);
    transform: rotate(45deg);
    border: 1px solid var(--ink-navy);
    position: relative;
    z-index: 2;
}

.wind-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: var(--arrow-len, 36px) solid var(--clover-gold);
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) translateY(-10px);
    opacity: 0.75;
}

/* Panel 5 — Berries */
.diorama-berries {
    min-height: 140px;
    position: relative;
    background: linear-gradient(to bottom, rgba(196, 163, 90, 0.1), rgba(143, 188, 143, 0.15));
}

.branch {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 3px;
    background: var(--charcoal);
    transform: rotate(-6deg);
    border-radius: 2px;
}

.branch::before {
    content: "";
    position: absolute;
    left: 30%;
    top: -20px;
    width: 60px;
    height: 2px;
    background: var(--charcoal);
    transform: rotate(-24deg);
    transform-origin: left center;
}

.berry {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 30% 30%, #c25454, #a34a4a 60%, #7a2e2e);
    border-radius: 50%;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.3);
}

.berry-1 { top: 38%; left: 16%; }
.berry-2 { top: 44%; left: 32%; }
.berry-3 { top: 52%; left: 48%; }
.berry-4 { top: 60%; left: 60%; }
.berry-5 { top: 58%; left: 72%; }
.berry-6 { top: 30%; left: 45%; width: 10px; height: 10px; }

/* Panel 6 — Fog of prior */
.diorama-fog {
    min-height: 140px;
    background: linear-gradient(to bottom, rgba(250, 248, 240, 0.5), rgba(143, 188, 143, 0.2));
    position: relative;
    overflow: hidden;
}

.fog-sun {
    position: absolute;
    right: 20%;
    top: 20%;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(196, 163, 90, 0.8), rgba(196, 163, 90, 0.2) 60%, transparent);
    border-radius: 50%;
    filter: blur(2px);
}

.fog-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--lichen-sage);
    opacity: 0.35;
    filter: blur(3px);
}

.fog-line-1 { bottom: 60%; opacity: 0.15; }
.fog-line-2 { bottom: 45%; opacity: 0.25; }
.fog-line-3 { bottom: 28%; opacity: 0.4; }
.fog-line-4 { bottom: 12%; opacity: 0.55; }

/* Panel body + stats */
.panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.panel-body p {
    font-size: 0.98rem;
    color: var(--charcoal);
    line-height: 1.55;
}

.panel-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 14px;
    background: rgba(43, 76, 126, 0.06);
    border-left: 3px solid var(--clover-gold);
    margin-top: auto;
}

.stat-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--storm-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stat-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--fern-crimson);
}

/* --------------------------------------------------------------------------
   SECTION 3: The Confidence River
   -------------------------------------------------------------------------- */

.section-river {
    position: relative;
    padding: 120px 48px 80px;
    background: linear-gradient(to bottom, #f5f0e8 0%, #e8e0d2 100%);
    overflow: hidden;
}

.river-header {
    text-align: center;
    margin-bottom: 48px;
    border-left: none;
    padding-left: 0;
    border-top: 4px solid var(--clover-gold);
    padding-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.river-scene {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    gap: 40px;
    min-height: 80vh;
    position: relative;
}

.river-bank {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
}

.river-bank-left {
    text-align: left;
}

.river-bank-right {
    text-align: right;
}

.bank-card {
    background: var(--parchment-warm);
    border: 2px solid var(--storm-blue);
    clip-path: var(--panel-clip);
    padding: 24px;
    box-shadow: var(--shadow-panel);
    transform: rotate(-1.5deg);
    transition: transform 0.3s var(--easing-out), box-shadow 0.3s var(--easing-out);
}

.bank-card.callout {
    transform: rotate(2deg);
    border-color: var(--fern-crimson);
}

.bank-card:hover {
    box-shadow: var(--shadow-panel-hover);
    transform: rotate(0deg) translateY(-4px);
}

.bank-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--fern-crimson);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bank-title {
    font-family: var(--font-panel);
    font-weight: 600;
    font-size: clamp(1.2rem, 2vw + 0.3rem, 2rem);
    color: var(--ink-navy);
    margin-bottom: 10px;
    line-height: 1.2;
}

.bank-card p {
    font-size: 1rem;
    color: var(--charcoal);
    line-height: 1.6;
}

.bank-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed rgba(43, 76, 126, 0.25);
}

.river-channel {
    position: relative;
    width: 160px;
    min-height: 80vh;
    align-self: stretch;
}

.river-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wave {
    animation: wave-flow 8s linear infinite;
}

.wave-2 {
    animation-duration: 11s;
    animation-delay: -3s;
}

.wave-3 {
    animation-duration: 14s;
    animation-delay: -6s;
}

@keyframes wave-flow {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

.river-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.river-marker {
    position: absolute;
    top: var(--pos, 50%);
    left: -6px;
    right: -6px;
    height: 2px;
    background: var(--clover-gold);
    opacity: 0.65;
}

.river-marker span {
    position: absolute;
    right: 110%;
    top: -12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-navy);
    background: var(--parchment-warm);
    border: 1px solid var(--clover-gold);
    padding: 2px 6px;
    letter-spacing: 0.08em;
}

.river-marker:nth-child(even) span {
    right: auto;
    left: 110%;
}

/* --------------------------------------------------------------------------
   SECTION 4: The Forecast Greenhouse
   -------------------------------------------------------------------------- */

.section-greenhouse {
    position: relative;
    padding: 120px 48px 80px;
    background: var(--parchment);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(143, 188, 143, 0.1), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(196, 163, 90, 0.08), transparent 40%),
        repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(163, 74, 74, 0.03) 80px, rgba(163, 74, 74, 0.03) 82px);
    overflow: hidden;
}

.greenhouse-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px 24px;
}

.specimen {
    position: relative;
    background: var(--parchment-warm);
    border: 2px solid var(--storm-blue);
    clip-path: var(--panel-clip);
    padding: 28px 24px 24px;
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s var(--easing-out), box-shadow 0.3s var(--easing-out);
}

.specimen-a { grid-column: span 4; transform: rotate(-2deg); }
.specimen-b { grid-column: span 3; transform: rotate(3deg); margin-top: 40px; }
.specimen-c { grid-column: span 3; transform: rotate(-3deg); margin-top: 20px; }
.specimen-d { grid-column: span 2; transform: rotate(2deg); margin-top: 60px; }

.specimen:hover {
    box-shadow: var(--shadow-panel-hover);
    transform: rotate(0deg) translateY(-4px);
}

.specimen-illustration {
    position: relative;
    min-height: 140px;
    background: linear-gradient(to bottom, rgba(143, 188, 143, 0.15), rgba(196, 163, 90, 0.1));
    border: 1px solid rgba(43, 76, 126, 0.2);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stem {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 50%;
    background: linear-gradient(to top, #4a6a3a, #6a8a4a);
    border-radius: 2px;
    transform: translateX(-50%);
}

.leaf {
    position: absolute;
    bottom: 30%;
    width: 28px;
    height: 14px;
    background: var(--lichen-sage);
    border-radius: 14px 2px;
}

.leaf-left {
    left: 50%;
    transform: translateX(-32px) rotate(-40deg);
    transform-origin: 100% 50%;
}

.leaf-right {
    left: 50%;
    transform: translateX(4px) rotate(40deg) scaleX(-1);
    transform-origin: 0% 50%;
}

/* Specimen A — Sun icon */
.sun-icon {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sun-core {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle, var(--clover-gold), #a88838);
    border-radius: 50%;
    z-index: 2;
}

.sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 16px;
    background: var(--clover-gold);
    transform-origin: 50% 0;
    transform: translate(-50%, 0) rotate(var(--angle)) translateY(16px);
    border-radius: 2px;
    animation: ray-pulse 3s ease-in-out infinite;
}

@keyframes ray-pulse {
    0%, 100% { opacity: 0.6; height: 14px; }
    50% { opacity: 1; height: 20px; }
}

/* Specimen B — Partly cloudy */
.partly-icon {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 50px;
}

.pc-sun {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, var(--clover-gold), #a88838);
    border-radius: 50%;
}

.pc-cloud {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 22px;
    background: var(--storm-blue);
    border-radius: 14px;
}

.pc-cloud::before, .pc-cloud::after {
    content: "";
    position: absolute;
    background: var(--storm-blue);
    border-radius: 50%;
}

.pc-cloud::before { width: 22px; height: 22px; top: -12px; left: 8px; }
.pc-cloud::after { width: 18px; height: 18px; top: -8px; right: 8px; }

/* Specimen C — Storm */
.storm-icon {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
}

.storm-cloud {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 22px;
    background: var(--charcoal);
    border-radius: 14px;
}

.storm-cloud::before, .storm-cloud::after {
    content: "";
    position: absolute;
    background: var(--charcoal);
    border-radius: 50%;
}

.storm-cloud::before { width: 22px; height: 22px; top: -10px; left: 6px; }
.storm-cloud::after { width: 18px; height: 18px; top: -6px; right: 6px; }

.storm-bolt {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 26px;
    background: var(--clover-gold);
    clip-path: polygon(40% 0, 100% 40%, 60% 40%, 100% 100%, 0 60%, 40% 60%);
    animation: bolt-flash 4s ease-in-out infinite;
}

@keyframes bolt-flash {
    0%, 90%, 100% { opacity: 0.8; }
    92%, 94% { opacity: 1; filter: drop-shadow(0 0 6px var(--clover-gold)); }
}

/* Specimen D — Fog */
.fog-icon {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 44px;
}

.fog-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--lichen-sage);
    border-radius: 2px;
}

.fog-bar-1 { top: 0; opacity: 0.3; width: 90%; }
.fog-bar-2 { top: 30%; opacity: 0.5; width: 100%; }
.fog-bar-3 { top: 60%; opacity: 0.7; width: 80%; left: 10%; }
.fog-bar-4 { bottom: 0; opacity: 0.4; width: 95%; }

.specimen-name {
    font-family: var(--font-panel);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.1rem, 1.4vw + 0.2rem, 1.4rem);
    color: var(--ink-navy);
}

.specimen-latin {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--fern-crimson);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.specimen p {
    font-size: 0.95rem;
    color: var(--charcoal);
    line-height: 1.55;
}

.specimen-data {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed rgba(43, 76, 126, 0.25);
}

.data-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 1;
    padding: 6px 10px;
    background: rgba(196, 163, 90, 0.08);
    border-left: 2px solid var(--clover-gold);
}

.data-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--storm-blue);
    text-transform: uppercase;
}

.data-value {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1rem;
    color: var(--fern-crimson);
}

/* --------------------------------------------------------------------------
   SECTION 5: The Uncertainty Horizon
   -------------------------------------------------------------------------- */

.section-horizon {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 100px 48px 0;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

.horizon-layer {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.horizon-sky {
    inset: 0;
    background: linear-gradient(to bottom,
        #f5f0e8 0%,
        #ede5d0 35%,
        #d8cfb8 70%,
        #c0b89c 100%);
    z-index: 1;
}

.horizon-mountains-far {
    bottom: 30%;
    height: 25%;
    background: linear-gradient(to top, #7a8ba0, #9eabc0);
    clip-path: polygon(0 100%, 5% 80%, 12% 60%, 20% 50%, 30% 45%, 40% 55%, 50% 42%, 60% 50%, 70% 48%, 80% 55%, 90% 60%, 100% 70%, 100% 100%);
    z-index: 3;
    opacity: 0.5;
}

.horizon-mountains-mid {
    bottom: 18%;
    height: 28%;
    background: linear-gradient(to top, #5a6b80, #7a8ba0);
    clip-path: polygon(0 100%, 8% 70%, 18% 50%, 28% 40%, 40% 55%, 50% 35%, 60% 45%, 72% 38%, 82% 50%, 92% 65%, 100% 80%, 100% 100%);
    z-index: 5;
    opacity: 0.7;
}

.horizon-fog-far {
    bottom: 45%;
    height: 8%;
    background: linear-gradient(to bottom, transparent, rgba(245, 240, 232, 0.6), transparent);
    filter: blur(8px);
    z-index: 4;
}

.horizon-fog-mid {
    bottom: 30%;
    height: 10%;
    background: linear-gradient(to bottom, transparent, rgba(245, 240, 232, 0.7), transparent);
    filter: blur(6px);
    z-index: 6;
}

.horizon-fog-near {
    bottom: 12%;
    height: 14%;
    background: linear-gradient(to bottom, transparent, rgba(216, 207, 184, 0.85), rgba(216, 207, 184, 0.5));
    filter: blur(4px);
    z-index: 7;
}

.horizon-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 60px auto 0;
    text-align: center;
    color: var(--ink-navy);
    padding: 40px 32px;
    background: rgba(250, 248, 240, 0.75);
    border: 2px solid var(--storm-blue);
    clip-path: var(--panel-clip);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.horizon-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fern-crimson);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.horizon-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw + 0.5rem, 3.5rem);
    color: var(--ink-navy);
    margin-bottom: 20px;
}

.horizon-body {
    font-family: var(--font-panel);
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw + 0.2rem, 1.3rem);
    line-height: 1.6;
    color: var(--charcoal);
    max-width: 56ch;
    margin: 0 auto 24px;
}

.horizon-signature {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed rgba(43, 76, 126, 0.3);
}

.sig-line {
    font-family: var(--font-panel);
    font-style: italic;
    font-size: 1rem;
    color: var(--storm-blue);
}

.sig-domain {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--clover-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.horizon-diamonds {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    font-size: 1.2rem;
    color: var(--clover-gold);
}

.float-diamond {
    display: inline-block;
    animation: float 4s ease-in-out infinite;
}

.float-diamond:nth-child(1) { animation-delay: 0s; }
.float-diamond:nth-child(2) { animation-delay: 0.5s; }
.float-diamond:nth-child(3) { animation-delay: 1s; }
.float-diamond:nth-child(4) { animation-delay: 1.5s; }
.float-diamond:nth-child(5) { animation-delay: 2s; }

@keyframes float {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-10px); opacity: 1; }
}

.site-footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    margin-left: -48px;
    margin-right: -48px;
    padding: 28px 48px;
    background: var(--ink-navy);
    color: var(--parchment);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    border-top: 2px solid var(--clover-gold);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.footer-left, .footer-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-right {
    text-align: right;
}

.footer-center {
    text-align: center;
    color: var(--clover-gold);
}

.footer-brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--lightning-white);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
}

.footer-tag {
    font-family: var(--font-panel);
    color: var(--lichen-sage);
    font-size: 0.85rem;
    font-style: italic;
    letter-spacing: 0.03em;
}

.footer-year {
    color: var(--lightning-white);
    font-weight: 600;
}

.footer-kind {
    color: var(--lichen-sage);
}

/* --------------------------------------------------------------------------
   Panel in-view states (entry)
   -------------------------------------------------------------------------- */

.panel {
    opacity: 0;
    transform: translateY(60px) rotate(5deg);
    transition: opacity 0.6s var(--easing-out), transform 0.6s var(--easing-out), box-shadow 0.3s var(--easing-out);
}

.panel.in-view[data-skew="right"] {
    opacity: 1;
    transform: translateY(0) rotate(3deg);
}
.panel.in-view[data-skew="left"] {
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
}

.panel.in-view:hover {
    box-shadow: var(--shadow-panel-hover);
    transform: translateY(-4px) rotate(0deg);
}

.specimen {
    opacity: 0;
    transform: translateY(40px) rotate(var(--start-rot, 0deg));
    transition: opacity 0.7s var(--easing-out), transform 0.7s var(--easing-out), box-shadow 0.3s var(--easing-out);
}

.specimen.in-view.specimen-a { opacity: 1; transform: translateY(0) rotate(-2deg); }
.specimen.in-view.specimen-b { opacity: 1; transform: translateY(0) rotate(3deg); }
.specimen.in-view.specimen-c { opacity: 1; transform: translateY(0) rotate(-3deg); }
.specimen.in-view.specimen-d { opacity: 1; transform: translateY(0) rotate(2deg); }

.specimen.in-view:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--shadow-panel-hover);
}

.bank-card {
    opacity: 0;
    transform: translateY(40px) rotate(-1.5deg);
    transition: opacity 0.7s var(--easing-out), transform 0.7s var(--easing-out), box-shadow 0.3s var(--easing-out);
}

.bank-card.callout {
    transform: translateY(40px) rotate(2deg);
}

.bank-card.in-view {
    opacity: 1;
    transform: translateY(0) rotate(-1.5deg);
}

.bank-card.callout.in-view {
    opacity: 1;
    transform: translateY(0) rotate(2deg);
}

.bank-card.in-view:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--shadow-panel-hover);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .panel-1, .panel-2, .panel-3, .panel-4, .panel-5, .panel-6 {
        grid-column: span 6;
    }

    .specimen-a, .specimen-b, .specimen-c, .specimen-d {
        grid-column: span 6;
        margin-top: 0;
    }

    .river-scene {
        grid-template-columns: 1fr 120px 1fr;
    }
}

@media (max-width: 768px) {
    .compass-nav {
        display: none;
    }

    .mobile-nav {
        display: flex;
    }

    .section-garden,
    .section-river,
    .section-greenhouse,
    .section-horizon {
        padding: 80px 20px 60px;
    }

    .panel-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .panel-1, .panel-2, .panel-3, .panel-4, .panel-5, .panel-6 {
        grid-column: span 1;
    }

    .panel,
    .panel[data-skew="right"],
    .panel[data-skew="left"] {
        transform: translateY(0) rotate(0deg);
    }

    .panel.in-view,
    .panel.in-view[data-skew="right"],
    .panel.in-view[data-skew="left"] {
        transform: translateY(0) rotate(0deg);
    }

    .greenhouse-grid {
        grid-template-columns: 1fr;
    }

    .specimen,
    .specimen.in-view.specimen-a,
    .specimen.in-view.specimen-b,
    .specimen.in-view.specimen-c,
    .specimen.in-view.specimen-d {
        grid-column: span 1;
        transform: translateY(0) rotate(0deg);
        margin-top: 0;
    }

    .river-scene {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .river-channel {
        width: 100%;
        min-height: 200px;
        order: 2;
    }

    .river-svg {
        transform: rotate(90deg) scaleY(2);
        transform-origin: center;
    }

    .river-bank-right {
        text-align: left;
    }

    .mountain-7, .mountain-6, .mountain-5, .mountain-4 {
        display: none;
    }

    .hero-title .letter:nth-child(n) {
        margin-top: 0;
    }

    .site-footer {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
    }

    .footer-right {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title-wrap {
        top: 22vh;
    }

    .scroll-indicator {
        bottom: 24px;
        font-size: 0.7rem;
    }

    .horizon-content {
        padding: 28px 20px;
    }
}