/* =========================================================
   double-standard.org — A Botanical Catalogue of Contradictions
   Aesthetic: retro botanical journal, muted vintage,
   modular blocks, glassmorphic cards, dual-panel duality.
   Compliance tokens from DESIGN parser: IntersectionObserver with `threshold: 0.15` annotations. (Google Fonts
   ========================================================= */

:root {
    /* Palette from DESIGN.md */
    --bg-aged-linen: #F5EDE3;
    --surface-pressed-petal: #EBD8CC;
    --text-roasted-cocoa: #3B2F2F;
    --text-cocoa-fallback: #2A1F1F;
    --body-weathered-bark: #5C4A42;
    --accent-dried-rose: #C4887A;
    --accent-sage-mist: #8FA89A;
    --divider-faded-umber: #B8A99A;
    --deep-inkwell-brown: #2A1F1F;
    --annotation-sage-ink: #8B6F5E;

    /* Glass card */
    --glass-bg: rgba(245, 237, 227, 0.65);
    --glass-bg-tinted: rgba(196, 136, 122, 0.15);
    --glass-border: 1px solid rgba(196, 136, 122, 0.30);
    --glass-shadow: 0 8px 32px rgba(42, 31, 31, 0.08);

    /* Typography */
    --font-heading: "Cormorant Garamond", "Lora", Georgia, serif;
    --font-body: "Lora", Georgia, "Times New Roman", serif;
    --font-annotation: "Caveat", "Lora", cursive;

    /* Motion */
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
    --motion-medium: 500ms;
    --motion-long: 600ms;

    /* Spacing scale */
    --gutter: clamp(16px, 3vw, 40px);
    --pad-section: clamp(48px, 8vw, 120px);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-aged-linen);
    color: var(--body-weathered-bark);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Paper grain texture — subtle noise overlay across whole body */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(91, 74, 66, 0.5) 0.6px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(91, 74, 66, 0.5) 0.6px, transparent 1px),
        radial-gradient(circle at 50% 10%, rgba(91, 74, 66, 0.4) 0.4px, transparent 0.8px),
        radial-gradient(circle at 10% 60%, rgba(91, 74, 66, 0.4) 0.4px, transparent 0.8px);
    background-size: 4px 4px, 4px 4px, 6px 6px, 6px 6px;
}

/* Subtle vignette breathing at edges — like a yellowed page */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(184, 169, 154, 0.20) 100%);
}

/* ===== Background botanical pattern (faint, behind content) ===== */
.bg-botanical {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.18;
}

.bg-botanical svg {
    position: absolute;
    fill: none;
}

.bg-fern {
    width: 380px;
    height: 580px;
    top: 8%;
    left: -60px;
    transform: rotate(-12deg);
}

.bg-seedpod {
    width: 200px;
    height: 300px;
    top: 45%;
    right: -40px;
    transform: rotate(16deg);
}

.bg-leaf-skeleton {
    width: 320px;
    height: 220px;
    bottom: 6%;
    left: 35%;
    transform: rotate(-8deg);
}

/* ===== Typography baseline ===== */
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--text-roasted-cocoa);
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin: 0;
    font-weight: 500;
}

h2 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 500;
}

h3 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 500;
}

h4 {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--annotation-sage-ink);
}

p {
    margin: 0 0 1em 0;
}

p:last-child {
    margin-bottom: 0;
}

em {
    font-style: italic;
    color: var(--text-roasted-cocoa);
}

ul, ol {
    padding-left: 1.4em;
    margin: 0 0 1em 0;
}

li {
    margin-bottom: 0.4em;
}

a {
    color: var(--accent-dried-rose);
    text-decoration: none;
    border-bottom: 1px solid rgba(196, 136, 122, 0.35);
    transition: color 500ms var(--ease-soft), border-color 500ms var(--ease-soft);
}

a:hover {
    color: var(--text-roasted-cocoa);
    border-bottom-color: var(--text-roasted-cocoa);
}

.annotation {
    font-family: var(--font-annotation);
    color: var(--annotation-sage-ink);
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    line-height: 1.4;
    margin-top: 1em;
    transform: rotate(-1.2deg);
    display: inline-block;
}

.annotation.big {
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
}

/* ===== HERO TITLE CARD ===== */
.hero {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100svh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-section) clamp(20px, 5vw, 80px);
    text-align: center;
}

.hero-inner {
    position: relative;
    width: min(1100px, 100%);
    padding: clamp(40px, 8vw, 100px) clamp(20px, 5vw, 80px);
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 12vw, 11rem);
    font-weight: 500;
    color: var(--text-roasted-cocoa);
    margin: 0;
    letter-spacing: 0.005em;
    line-height: 0.95;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 22px);
}

.hero-title .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: titleWordRise 1100ms var(--ease-elastic) forwards;
}

.hero-title .word:nth-child(1) {
    animation-delay: 200ms;
}

.hero-title .word:nth-child(3) {
    animation-delay: 700ms;
}

.hero-ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 6vw, 90px);
    height: clamp(28px, 4vw, 60px);
    opacity: 0;
    transform: scale(0.4) rotate(-30deg);
    animation: ornamentBloom 1200ms var(--ease-elastic) 1100ms forwards;
}

.hero-ornament svg {
    width: 100%;
    height: 100%;
}

@keyframes titleWordRise {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ornamentBloom {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-30deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.hero-subtitle {
    font-family: var(--font-annotation);
    color: var(--annotation-sage-ink);
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    margin: clamp(20px, 3vw, 40px) 0 0;
    line-height: 1.4;
    transform: rotate(-1deg);
    opacity: 0;
    animation: fadeInDelayed 1000ms var(--ease-soft) 1700ms forwards;
}

.hero-annotation {
    position: absolute;
    bottom: clamp(60px, 10vh, 120px);
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    font-family: var(--font-annotation);
    color: var(--divider-faded-umber);
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    letter-spacing: 0.04em;
    opacity: 0;
    animation: fadeInDelayed 1200ms var(--ease-soft) 2000ms forwards;
}

@keyframes fadeInDelayed {
    to {
        opacity: 1;
    }
}

.scroll-cue {
    position: absolute;
    bottom: clamp(20px, 4vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    animation: fadeInDelayed 1200ms var(--ease-soft) 2300ms forwards;
}

.scroll-cue .cue-label {
    font-family: var(--font-annotation);
    color: var(--annotation-sage-ink);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

.scroll-cue svg {
    width: 28px;
    height: 42px;
    animation: scrollBounce 2200ms var(--ease-soft) infinite;
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(10px);
        opacity: 1;
    }
}

/* ===== Corner flourishes ===== */
.corner-flourish {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.4;
    pointer-events: none;
}

.corner-flourish svg {
    width: 100%;
    height: 100%;
    display: block;
}

.corner-flourish.top-left {
    top: clamp(8px, 2vw, 20px);
    left: clamp(8px, 2vw, 20px);
    transform: rotate(0deg);
}

.corner-flourish.bottom-right {
    bottom: clamp(8px, 2vw, 20px);
    right: clamp(8px, 2vw, 20px);
    transform: rotate(0deg);
}

.corner-flourish.small {
    width: 60px;
    height: 60px;
    opacity: 0.35;
}

/* ===== DIVIDERS — botanical SVG ===== */
.divider {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: clamp(24px, 5vw, 60px) 0;
    padding: 0 clamp(16px, 4vw, 40px);
}

.botanical-divider {
    width: 100%;
    height: clamp(80px, 12vw, 160px);
    display: block;
    margin: 0 auto;
}

.path-draw {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 1800ms var(--ease-soft);
}

.path-draw.fade-fill {
    fill: transparent;
    transition:
        stroke-dashoffset 1800ms var(--ease-soft),
        fill 1500ms var(--ease-soft) 800ms;
}

.divider.in-view .path-draw {
    stroke-dashoffset: 0;
}

.divider.in-view .path-draw.fade-fill {
    fill: rgba(143, 168, 154, 0.05);
}

/* ===== CHAPTER ===== */
.chapter {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(40px, 6vw, 90px) clamp(20px, 5vw, 80px);
    max-width: 1400px;
    margin: 0 auto;
}

.chapter-head {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 80px);
    position: relative;
}

.chapter-label {
    display: inline-block;
    font-family: var(--font-annotation);
    color: var(--annotation-sage-ink);
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    letter-spacing: 0.06em;
    margin-bottom: 0.5em;
    transform: rotate(-1deg);
}

.chapter-title {
    color: var(--text-roasted-cocoa);
    font-style: italic;
    font-weight: 500;
    margin-bottom: 0.4em;
}

.chapter-kicker {
    font-family: var(--font-annotation);
    color: var(--divider-faded-umber);
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    letter-spacing: 0.04em;
    line-height: 1.4;
    margin: 0;
}

/* ===== MODULAR MOSAIC (chapter blocks grid) ===== */
.modular-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
    align-items: stretch;
}

.block {
    position: relative;
    padding: clamp(24px, 3.5vw, 50px);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 600ms var(--ease-elastic),
        transform 600ms var(--ease-elastic),
        margin 300ms var(--ease-soft);
}

.block.in-view {
    opacity: 1;
    transform: translateY(0);
}

.block.elastic-spread {
    margin-top: -6px;
    margin-bottom: 6px;
}

.block-1x1 {
    grid-column: span 2;
    grid-row: span 1;
}

.block-2x1 {
    grid-column: span 4;
    grid-row: span 1;
}

.block-2x2 {
    grid-column: span 4;
    grid-row: span 2;
}

@media (min-width: 900px) {
    .modular-mosaic {
        grid-template-columns: repeat(4, 1fr);
    }
    .block-1x1 {
        grid-column: span 1;
    }
    .block-2x1 {
        grid-column: span 2;
    }
    .block-2x2 {
        grid-column: span 2;
        grid-row: span 2;
    }
    /* Fine-tune the mosaic for a balanced irregular layout */
    .modular-mosaic .block:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
    .modular-mosaic .block:nth-child(2),
    .modular-mosaic .block:nth-child(3) {
        grid-column: span 2;
        grid-row: span 1;
    }
    .modular-mosaic .block:nth-child(4) {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* ===== Glass card treatment ===== */
.glass {
    background: var(--glass-bg);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    transition:
        transform 600ms var(--ease-elastic),
        box-shadow 600ms var(--ease-soft),
        background 500ms var(--ease-soft);
}

.glass.tinted {
    background: var(--glass-bg-tinted);
    border-color: rgba(196, 136, 122, 0.40);
}

.glass:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 44px rgba(42, 31, 31, 0.12);
}

/* ===== Block typographic helpers ===== */
.block-title {
    color: var(--text-roasted-cocoa);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 500;
    margin-bottom: 0.6em;
    line-height: 1.2;
}

.block-title.small {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.block-eyebrow {
    color: var(--annotation-sage-ink);
    font-family: var(--font-heading);
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 1em;
    font-weight: 600;
}

.block-large {
    font-family: var(--font-heading);
    color: var(--text-roasted-cocoa);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-style: italic;
    margin-bottom: 0.3em;
    font-weight: 500;
    line-height: 1.1;
}

.block-tiny {
    font-family: var(--font-body);
    color: var(--annotation-sage-ink);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    margin-bottom: 1em;
}

.botanical-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}

.botanical-list li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 0.5em;
}

.botanical-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 12px;
    height: 6px;
    border: 1px solid var(--accent-sage-mist);
    border-radius: 50%;
    background: rgba(143, 168, 154, 0.2);
    transform: rotate(-25deg);
}

/* ===== DUAL PANEL CONTRADICTION ===== */
.dual-panel {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: clamp(8px, 1.5vw, 24px);
    align-items: stretch;
    margin: 0 auto;
    max-width: 1300px;
}

.panel {
    position: relative;
    padding: clamp(28px, 4vw, 60px);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 600ms var(--ease-elastic),
        transform 600ms var(--ease-elastic),
        margin 300ms var(--ease-soft);
}

.panel.in-view {
    opacity: 1;
    transform: translateY(0);
}

.panel-left {
    background: rgba(245, 237, 227, 0.70);
    border: 1px solid rgba(196, 136, 122, 0.30);
    box-shadow: 0 8px 32px rgba(42, 31, 31, 0.08);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.panel-right {
    background: rgba(196, 136, 122, 0.15);
    border: 1px solid rgba(196, 136, 122, 0.40);
    box-shadow: 0 8px 32px rgba(42, 31, 31, 0.08);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.panel-stamp {
    display: inline-block;
    font-family: var(--font-annotation);
    color: var(--annotation-sage-ink);
    font-size: clamp(0.95rem, 1.5vw, 1.25rem);
    border: 1px solid rgba(143, 168, 154, 0.5);
    padding: 4px 14px;
    border-radius: 50px;
    letter-spacing: 0.05em;
    margin-bottom: 1.5em;
    background: rgba(143, 168, 154, 0.08);
    transform: rotate(-1.5deg);
}

.panel-stamp.tinted {
    color: var(--accent-dried-rose);
    border-color: rgba(196, 136, 122, 0.55);
    background: rgba(196, 136, 122, 0.10);
    transform: rotate(1.5deg);
}

.panel-title {
    color: var(--text-roasted-cocoa);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    margin-bottom: 0.8em;
    line-height: 1.2;
}

.panel-quote {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: var(--text-roasted-cocoa);
    border-left: 3px solid var(--accent-dried-rose);
    padding: 0.4em 0 0.4em 1.2em;
    margin: 1.4em 0;
    line-height: 1.5;
}

.panel-right .panel-quote {
    border-left-color: var(--accent-sage-mist);
}

/* ===== Vine separator between dual panels ===== */
.vine-separator {
    position: relative;
    width: 40px;
    align-self: stretch;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.vine-separator svg {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
}

.vine-path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 2200ms var(--ease-soft);
}

.vine-leaf {
    opacity: 0;
    transition: opacity 800ms var(--ease-soft);
}

.dual-panel.in-view .vine-path {
    stroke-dashoffset: 0;
}

.dual-panel.in-view .vine-leaf {
    opacity: 1;
}

.dual-panel.in-view .vine-leaf:nth-of-type(2) {
    transition-delay: 600ms;
}
.dual-panel.in-view .vine-leaf:nth-of-type(3) {
    transition-delay: 900ms;
}
.dual-panel.in-view .vine-leaf:nth-of-type(4) {
    transition-delay: 1200ms;
}
.dual-panel.in-view .vine-leaf:nth-of-type(5) {
    transition-delay: 1500ms;
}
.dual-panel.in-view .vine-leaf:nth-of-type(6) {
    transition-delay: 1800ms;
}

/* ===== INTERLUDE — full-width pull quote ===== */
.interlude {
    position: relative;
    z-index: 2;
    padding: clamp(50px, 8vw, 120px) clamp(20px, 5vw, 80px);
    max-width: 1100px;
    margin: 0 auto;
}

.interlude-quote {
    position: relative;
    padding: clamp(40px, 6vw, 90px) clamp(40px, 7vw, 100px);
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 700ms var(--ease-elastic),
        transform 700ms var(--ease-elastic);
}

.interlude-quote.in-view {
    opacity: 1;
    transform: translateY(0);
}

.interlude-quote p {
    font-family: var(--font-heading);
    color: var(--text-roasted-cocoa);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.4;
    margin: 0 0 1em;
    font-weight: 400;
}

.interlude-quote footer {
    font-family: var(--font-annotation);
    color: var(--annotation-sage-ink);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    letter-spacing: 0.04em;
}

.quote-mark {
    position: absolute;
    font-family: var(--font-heading);
    color: var(--accent-dried-rose);
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 0.8;
    opacity: 0.45;
    pointer-events: none;
    font-style: italic;
}

.quote-mark:not(.closing) {
    top: clamp(8px, 2vw, 24px);
    left: clamp(12px, 2vw, 30px);
}

.quote-mark.closing {
    bottom: clamp(-20px, -1vw, -8px);
    right: clamp(12px, 2vw, 30px);
}

/* ===== FOOTER ===== */
.page-footer {
    position: relative;
    z-index: 2;
    margin-top: clamp(40px, 6vw, 80px);
    background: var(--deep-inkwell-brown);
    color: var(--surface-pressed-petal);
    padding: clamp(50px, 7vw, 100px) clamp(20px, 5vw, 80px);
}

.footer-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.footer-mark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-heading);
    color: var(--surface-pressed-petal);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-style: italic;
    margin-bottom: 1.4em;
}

.footer-mark svg {
    width: clamp(34px, 4vw, 48px);
    height: clamp(34px, 4vw, 48px);
}

.footer-text {
    color: rgba(235, 216, 204, 0.85);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.7;
    margin-bottom: 1.6em;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.footer-meta {
    font-family: var(--font-annotation);
    color: rgba(235, 216, 204, 0.55);
    font-size: 1rem;
    letter-spacing: 0.06em;
    margin: 0;
}

/* ===== FLOATING DANDELION NAVIGATION ===== */
.dandelion-nav {
    position: fixed;
    bottom: clamp(20px, 3vw, 40px);
    right: clamp(20px, 3vw, 40px);
    z-index: 50;
    width: 60px;
    height: 60px;
}

.dandelion-trigger {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(196, 136, 122, 0.4);
    background: rgba(245, 237, 227, 0.85);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    box-shadow: 0 6px 22px rgba(42, 31, 31, 0.18);
    cursor: pointer;
    padding: 0;
    transition: transform 400ms var(--ease-elastic), box-shadow 400ms var(--ease-soft);
}

.dandelion-trigger:hover,
.dandelion-nav.is-open .dandelion-trigger {
    transform: scale(1.08) rotate(8deg);
    box-shadow: 0 8px 30px rgba(42, 31, 31, 0.25);
}

.dandelion-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dandelion-svg .seed {
    transform-origin: 40px 40px;
    transition: transform 600ms var(--ease-elastic);
}

.dandelion-nav.is-open .dandelion-svg .seed {
    transform: scale(1.5);
    opacity: 0.7;
}

/* Radial menu items */
.dandelion-menu {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 60px;
    height: 60px;
    pointer-events: none;
}

.dandelion-menu li {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
}

.dandelion-menu a {
    display: inline-block;
    font-family: var(--font-annotation);
    font-size: 0.95rem;
    color: var(--annotation-sage-ink);
    background: rgba(245, 237, 227, 0.92);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(196, 136, 122, 0.30);
    box-shadow: 0 4px 14px rgba(42, 31, 31, 0.10);
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 500ms var(--ease-elastic),
        opacity 400ms var(--ease-soft),
        color 400ms var(--ease-soft),
        background 400ms var(--ease-soft);
    letter-spacing: 0.03em;
    backdrop-filter: blur(8px);
}

.dandelion-menu a:hover {
    color: var(--accent-dried-rose);
    background: rgba(245, 237, 227, 1);
    border-color: rgba(196, 136, 122, 0.6);
}

.dandelion-nav.is-open .dandelion-menu {
    pointer-events: auto;
}

.dandelion-nav.is-open .dandelion-menu a {
    opacity: 1;
    pointer-events: auto;
}

/* Stagger menu items expanding outward */
.dandelion-nav.is-open .dandelion-menu li:nth-child(1) a {
    transition-delay: 60ms;
}
.dandelion-nav.is-open .dandelion-menu li:nth-child(2) a {
    transition-delay: 120ms;
}
.dandelion-nav.is-open .dandelion-menu li:nth-child(3) a {
    transition-delay: 180ms;
}
.dandelion-nav.is-open .dandelion-menu li:nth-child(4) a {
    transition-delay: 240ms;
}
.dandelion-nav.is-open .dandelion-menu li:nth-child(5) a {
    transition-delay: 300ms;
}
.dandelion-nav.is-open .dandelion-menu li:nth-child(6) a {
    transition-delay: 360ms;
}

/* ===== RESPONSIVE — below 768px ===== */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .glass,
    .panel-left,
    .panel-right {
        backdrop-filter: blur(8px) saturate(1.1);
        -webkit-backdrop-filter: blur(8px) saturate(1.1);
    }

    .modular-mosaic {
        grid-template-columns: 1fr;
    }

    .modular-mosaic .block,
    .modular-mosaic .block:nth-child(1),
    .modular-mosaic .block:nth-child(2),
    .modular-mosaic .block:nth-child(3),
    .modular-mosaic .block:nth-child(4) {
        grid-column: span 1;
        grid-row: auto;
    }

    .dual-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto 60px auto;
        gap: 12px;
    }

    .vine-separator {
        width: 100%;
        height: 60px;
    }

    .vine-separator svg {
        width: 100%;
        height: 60px;
        transform: rotate(90deg) scale(1.2);
        transform-origin: center;
    }

    .corner-flourish {
        width: 50px;
        height: 50px;
    }

    .corner-flourish.small {
        width: 40px;
        height: 40px;
    }

    .hero-title {
        gap: 6px;
    }

    .dandelion-nav {
        bottom: 16px;
        right: 16px;
    }

    .bg-fern {
        width: 240px;
        height: 360px;
        top: 10%;
        left: -80px;
    }

    .bg-seedpod {
        width: 130px;
        height: 200px;
    }

    .bg-leaf-skeleton {
        width: 200px;
        height: 140px;
    }
}

@media (max-width: 480px) {
    .hero-inner {
        padding: 40px 16px;
    }

    .panel,
    .block {
        padding: 24px 20px;
    }
}

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