/* ===========================================================
   archetype.moe — a botanical leather journal
   Palette: #F5E6D0 #2A1810 #1C0F08 #6B4C3B #B8706A #C4A265 #5E7A56 #3B2414
   Fonts: Playfair Display (display), Cormorant Garamond (body/italic)
   Compliance typography language: IntersectionObserver` vine "grows" as you scroll; Playfair Display and Cormorant Garamond creates an immediately distinctive typographic voice. The pairing — one display serif for impact. Playfair Display at massive scale. Playfair Display italic: "Every archetype begins as a seed." Below it. Playfair Display" (Google Fonts Playfair. Used for all body text at `1.0625rem` / `17px`.
   Easing: cubic-bezier(0.34, 1.56, 0.64, 1) — spring
   =========================================================== */

:root {
    --c-linen: #F5E6D0;
    --c-leather: #2A1810;
    --c-leather-deep: #1C0F08;
    --c-umber: #3B2414;
    --c-walnut: #6B4C3B;
    --c-rose: #B8706A;
    --c-pollen: #C4A265;
    --c-ivy: #5E7A56;

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-slow: cubic-bezier(0.22, 0.61, 0.36, 1);

    --body-size: 1.0625rem;
    --body-lh: 1.85;
    --letter-body: 0.005em;

    --max: 1320px;
    --pad-lg: clamp(1.5rem, 5vw, 5rem);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: "Cormorant Garamond", "Lora", Georgia, serif;
    font-size: var(--body-size);
    line-height: var(--body-lh);
    letter-spacing: var(--letter-body);
    color: var(--c-leather-deep);
    background-color: var(--c-linen);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color 900ms var(--ease-slow);
}

body.at-leather { background-color: var(--c-leather); color: var(--c-linen); }
body.at-garden  { background-color: #E8CFA8; }
body.at-passage { background-color: #EAD0A8; }

h1, h2, h3, h4 {
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Parchment grain overlay (global, light sections only) ---- */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    mix-blend-mode: multiply;
    opacity: 0.10;
    transition: opacity 800ms var(--ease-slow);
}
body.at-leather .grain-overlay { opacity: 0; }

/* ---- Vine scroll indicator (right edge) ---- */
.vine-indicator {
    position: fixed;
    top: 8vh;
    right: 1.6rem;
    height: 84vh;
    width: 40px;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 900ms var(--spring), transform 900ms var(--spring);
}
.vine-indicator.is-visible { opacity: 1; transform: translateY(0); }

.vine-stem {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    transition: stroke-dashoffset 600ms var(--spring);
}
.vine-leaves .leaf {
    transform-origin: 20px 50%;
    transform: scale(0);
    transition: transform 620ms var(--spring);
}
.vine-leaves .leaf.is-grown { transform: scale(1); }
.vine-buds circle {
    transform: scale(0);
    transform-origin: 20px 50%;
    transition: transform 520ms var(--spring);
}
.vine-buds circle.is-grown { transform: scale(1); }

/* ============================================================
   Folio base
   ============================================================ */
.folio {
    position: relative;
    width: 100%;
    padding: clamp(4rem, 9vw, 8rem) var(--pad-lg);
    overflow: hidden;
}

/* ===============================
   FOLIO 1 — Opening
   =============================== */
.folio-opening {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.folio-opening .folio-inner {
    position: relative;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    min-height: 80vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.hero-mark {
    font-size: clamp(2.6rem, 9vw, 7.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.005em;
    color: var(--c-leather-deep);
    position: relative;
    z-index: 3;
    transform: translateX(-2vw);
    max-width: 60vw;
    opacity: 0;
    animation: hero-rise 1400ms var(--spring) 180ms forwards;
}
.hero-name { display: inline-block; }
.hero-dot  { color: var(--c-rose); display: inline-block; transform: translateY(-0.04em); }
.hero-tld  {
    display: inline-block;
    font-style: italic;
    font-weight: 400;
    color: var(--c-walnut);
    margin-left: 0.02em;
}

@keyframes hero-rise {
    0%   { opacity: 0; transform: translate(-2vw, 24px); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(-2vw, 0); }
}

.hero-whisper {
    position: absolute;
    left: 0;
    bottom: -2.4rem;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--c-walnut);
    transform: translateX(-2vw);
    opacity: 0;
    animation: fade-in 1200ms var(--ease-slow) 1200ms forwards;
}

@keyframes fade-in {
    from { opacity: 0; transform: translate(-2vw, 10px); }
    to   { opacity: 1; transform: translate(-2vw, 0); }
}

/* Peony */
.peony-wrap {
    position: absolute;
    top: 50%;
    right: clamp(-2rem, 4vw, 6rem);
    transform: translateY(-50%);
    width: clamp(260px, 34vw, 520px);
    aspect-ratio: 1 / 1;
    z-index: 2;
    filter: drop-shadow(0 18px 40px rgba(66, 30, 20, 0.18));
}

.peony {
    width: 100%;
    height: 100%;
    transform: rotate(-6deg);
}

.peony .peony-outer .petal,
.peony .peony-inner .inner-petal {
    transform-origin: 0px 0px;
    transform: rotateX(90deg) scale(0.75);
    opacity: 0;
    animation: petal-unfurl 1500ms var(--spring) forwards;
}

.peony .peony-inner .inner-petal { animation-duration: 1300ms; }

.peony .petal-1 { animation-delay: 0.30s; }
.peony .petal-2 { animation-delay: 0.40s; }
.peony .petal-3 { animation-delay: 0.50s; }
.peony .petal-4 { animation-delay: 0.60s; }
.peony .petal-5 { animation-delay: 0.72s; }
.peony .petal-6 { animation-delay: 0.82s; }
.peony .petal-7 { animation-delay: 0.92s; }
.peony .petal-8 { animation-delay: 1.02s; }
.peony .ip-1 { animation-delay: 1.15s; }
.peony .ip-2 { animation-delay: 1.22s; }
.peony .ip-3 { animation-delay: 1.30s; }
.peony .ip-4 { animation-delay: 1.38s; }

@keyframes petal-unfurl {
    0%   { transform: rotateX(90deg) scale(0.65); opacity: 0; }
    70%  { opacity: 1; }
    100% { transform: rotateX(0deg) scale(1);    opacity: var(--op, 0.78); }
}

.peony .petal-5, .peony .petal-6 { --op: 0.72; }
.peony .petal-7, .peony .petal-8 { --op: 0.68; }
.peony .inner-petal              { --op: 0.85; }

.peony-core, .peony-stamens {
    opacity: 0;
    animation: fade-in-core 900ms var(--ease-slow) 1.6s forwards;
}
@keyframes fade-in-core {
    from { opacity: 0; } to { opacity: 1; }
}

.peony .peony-core { animation: core-breath 5600ms ease-in-out 1.8s infinite; }
@keyframes core-breath {
    0%,100% { transform: scale(1); opacity: 1; }
    50%     { transform: scale(1.08); opacity: 0.9; }
}

/* Idle sway */
.peony-wrap {
    animation: peony-sway 9s ease-in-out 2s infinite;
}
@keyframes peony-sway {
    0%,100% { transform: translateY(-50%) rotate(0deg); }
    50%     { transform: translateY(-51%) rotate(1.2deg); }
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    opacity: 0;
    animation: fade-in-static 1400ms var(--ease-slow) 2s forwards;
}
.scroll-hint-line {
    width: 1px;
    height: 58px;
    background: linear-gradient(to bottom, transparent, var(--c-walnut));
    animation: line-grow 2400ms ease-in-out 2.2s infinite;
    transform-origin: top;
}
.scroll-hint-word {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 0.82rem;
    letter-spacing: 0.32em;
    color: var(--c-walnut);
    text-transform: lowercase;
}
@keyframes fade-in-static { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes line-grow {
    0%,100% { transform: scaleY(0.4); opacity: 0.3; }
    50%     { transform: scaleY(1);   opacity: 0.9; }
}

/* ===============================
   FOLIO 2 — Botanical Passage
   =============================== */
.folio-passage {
    background: linear-gradient(to bottom, var(--c-linen) 0%, #EAD0A8 38%, #C49A70 72%, var(--c-umber) 100%);
    padding-bottom: 14rem;
}

.passage-inner {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    min-height: 140vh;
}

.fragment {
    position: relative;
    max-width: 480px;
    padding: 1.4rem 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1100ms var(--spring), transform 1100ms var(--spring);
}
.fragment.is-revealed { opacity: 1; transform: translateY(0); }

.fragment-marker {
    display: inline-block;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--c-rose);
    margin-bottom: 0.6rem;
    letter-spacing: 0.04em;
}

.fragment-title {
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
    color: var(--c-leather-deep);
    margin-bottom: 1rem;
}

.fragment-body {
    font-size: 1.125rem;
    color: var(--c-walnut);
}

.fragment-a {
    margin-left: auto;
    margin-right: 4vw;
    margin-top: 6vh;
    text-align: right;
}
.fragment-b {
    margin-left: auto;
    margin-right: auto;
    margin-top: 12vh;
    text-align: left;
    transform: translate(calc(-4vw + 40px), 40px);
}
.fragment-b.is-revealed { transform: translate(-4vw, 0); }

.fragment-c {
    margin-left: 3vw;
    margin-top: 14vh;
    text-align: left;
    color: var(--c-linen);
}
.fragment-c .fragment-title { color: var(--c-linen); }
.fragment-c .fragment-body  { color: #E4C9A4; }
.fragment-c .fragment-marker { color: var(--c-pollen); }

/* Sprouts between fragments */
.vine-sprout {
    position: absolute;
    width: 140px;
    height: 260px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 900ms var(--spring), transform 900ms var(--spring);
}
.vine-sprout.is-revealed { opacity: 0.95; transform: translateY(0); }

.sprout-a { top: 14vh; left: 8vw; }
.sprout-b { top: 52vh; right: 10vw; }

.vine-sprout .sprout-path {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    transition: stroke-dashoffset 1800ms var(--spring);
}
.vine-sprout.is-revealed .sprout-path { stroke-dashoffset: 0; }

.vine-sprout .sprout-leaf,
.vine-sprout .sprout-bud,
.vine-sprout .rose-bloom {
    transform-origin: center;
    transform: scale(0);
    transition: transform 900ms var(--spring);
    transition-delay: 600ms;
}
.vine-sprout.is-revealed .sprout-leaf,
.vine-sprout.is-revealed .sprout-bud,
.vine-sprout.is-revealed .rose-bloom { transform: scale(1); }

/* Wax seal */
.wax-seal {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    opacity: 0;
    transition: opacity 1000ms var(--ease-slow), transform 1000ms var(--spring);
}
.wax-seal.is-revealed { opacity: 1; }

.seal-dome {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #D7938C 0%, #B8706A 45%, #8A4B46 100%);
    box-shadow:
        inset 0 2px 6px rgba(255, 220, 200, 0.35),
        inset 0 -8px 18px rgba(60, 20, 15, 0.6),
        0 10px 22px rgba(40, 18, 10, 0.35);
    display: grid;
    place-items: center;
    transform: scale(0);
    animation: seal-pulse 6s ease-in-out infinite;
}
.wax-seal.is-revealed .seal-dome {
    transform: scale(1);
    transition: transform 900ms var(--spring);
}

.seal-monogram {
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--c-pollen);
    text-shadow:
        1px 1px 0 rgba(60, 20, 10, 0.6),
        -1px -1px 0 rgba(255, 220, 180, 0.3);
    z-index: 3;
}

.seal-ring-inner, .seal-ring-outer {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(196, 162, 101, 0.55);
    pointer-events: none;
}
.seal-ring-inner { inset: 10px; }
.seal-ring-outer { inset: 4px; border-style: dashed; opacity: 0.45; }

@keyframes seal-pulse {
    0%, 100% { box-shadow: inset 0 2px 6px rgba(255,220,200,0.35), inset 0 -8px 18px rgba(60,20,15,0.6), 0 10px 22px rgba(40,18,10,0.35); }
    50%      { box-shadow: inset 0 2px 6px rgba(255,220,200,0.45), inset 0 -8px 22px rgba(60,20,15,0.7), 0 14px 30px rgba(40,18,10,0.5); }
}

.seal-caption {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.3em;
    color: var(--c-pollen);
    text-transform: lowercase;
}

/* ===============================
   FOLIO 3 — Garden Room
   =============================== */
.folio-garden {
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--c-umber) 0%, #5A3520 55%, #B88258 100%);
    display: flex;
    align-items: center;
}

.garden-inner {
    position: relative;
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
}

.arch-stage {
    position: relative;
    width: min(520px, 84vw);
    aspect-ratio: 440 / 620;
    filter: drop-shadow(0 30px 50px rgba(10, 4, 2, 0.5));
}

.garden-arch {
    width: 100%;
    height: 100%;
}

.arch-keywords {
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    pointer-events: none;
}
.keyword {
    grid-column: 1;
    grid-row: 1;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    color: var(--c-leather-deep);
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 900ms var(--spring), transform 900ms var(--spring);
}
.keyword.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.trailing-left, .trailing-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 520px;
    pointer-events: none;
    opacity: 0.95;
}
.trailing-left  { left: clamp(-4rem, 2vw, 4rem); animation: trail-sway-l 7s ease-in-out infinite; }
.trailing-right { right: clamp(-4rem, 2vw, 4rem); animation: trail-sway-r 8s ease-in-out infinite; }

@keyframes trail-sway-l {
    0%,100% { transform: translateY(-50%) rotate(0deg); }
    50%     { transform: translateY(-50%) rotate(-1.8deg); }
}
@keyframes trail-sway-r {
    0%,100% { transform: translateY(-50%) rotate(0deg); }
    50%     { transform: translateY(-50%) rotate(1.8deg); }
}

.garden-epigraph {
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.18em;
    color: var(--c-pollen);
    text-transform: lowercase;
    white-space: nowrap;
}

/* ===============================
   FOLIO 4 — Leather
   =============================== */
.folio-leather {
    position: relative;
    background-color: var(--c-leather);
    color: var(--c-linen);
    padding: clamp(6rem, 10vw, 10rem) var(--pad-lg);
    isolation: isolate;
}

.leather-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.leather-fill {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    mix-blend-mode: soft-light;
}
.leather-grain {
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(from 15deg at 50% 50%,
            rgba(59, 36, 20, 0.0) 0deg,
            rgba(59, 36, 20, 0.18) 1.4deg,
            rgba(59, 36, 20, 0.0) 2.8deg),
        radial-gradient(circle at 30% 40%, rgba(120, 70, 45, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(90, 50, 30, 0.45) 0%, transparent 60%),
        linear-gradient(145deg, #3a2418 0%, #20110a 100%);
    mix-blend-mode: normal;
    opacity: 1;
}
.leather-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 140px 20px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.leather-inner {
    position: relative;
    max-width: var(--max);
    margin: 0 auto;
    min-height: 80vh;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 6rem);
}

.panel {
    position: relative;
    max-width: 520px;
    padding: clamp(1.6rem, 2.4vw, 2.4rem);
    background:
        linear-gradient(180deg, rgba(60, 36, 22, 0.35) 0%, rgba(30, 14, 8, 0.4) 100%);
    border: 1px solid rgba(196, 162, 101, 0.22);
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 200, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 30px 50px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1200ms var(--spring), transform 1200ms var(--spring);
}
.panel.is-revealed { opacity: 1; transform: translateY(0); }

.panel-left  { justify-self: start; margin-left: 8%; }
.panel-right { justify-self: end;   margin-right: 8%; margin-top: -2rem; }

.panel-kicker {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--c-pollen);
    margin-bottom: 1.1rem;
    text-transform: lowercase;
}

.panel-title {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    margin-bottom: 1.1rem;
}

.panel-body {
    font-size: 1.0625rem;
    color: #E4C9A4;
    line-height: 1.9;
}

.embossed {
    color: rgba(245, 230, 208, 0.06);
    text-shadow:
        1px 1px 1px rgba(255, 230, 200, 0.18),
        -1px -1px 1px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(196, 162, 101, 0.08);
}

.leather-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0.75;
    z-index: 3;
}
.corner-tl { top: 1.4rem;    left: 1.4rem; }
.corner-tr { top: 1.4rem;    right: 1.4rem; }
.corner-bl { bottom: 1.4rem; left: 1.4rem; }
.corner-br { bottom: 1.4rem; right: 1.4rem; }

/* ===============================
   FOLIO 5 — Closing
   =============================== */
.folio-closing {
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--c-leather) 0%, #7A4A30 30%, var(--c-linen) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6rem;
}

.closing-inner {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.closing-line {
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    color: var(--c-leather-deep);
    line-height: 1.35;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1200ms var(--spring), transform 1200ms var(--spring);
}
.closing-line.is-revealed { opacity: 1; transform: translateY(0); }
.closing-line em {
    color: var(--c-rose);
    font-style: italic;
    font-weight: 700;
}

.pod-wrap {
    margin: 3rem auto 2rem;
    width: clamp(200px, 28vw, 340px);
    aspect-ratio: 1 / 1;
    filter: drop-shadow(0 18px 30px rgba(60, 30, 18, 0.25));
}

.pod-shell .pod-leaf {
    transform-origin: 0 80px;
    transition: transform 1400ms var(--spring);
}
.pod-left  { transform: rotate(0deg)    translateX(0); }
.pod-right { transform: rotate(0deg)    translateX(0); }
.pod-top   { transform: translateY(0)   scaleY(1); }

.pod-wrap.is-open .pod-left  { transform: rotate(-28deg) translateX(-30px); }
.pod-wrap.is-open .pod-right { transform: rotate(28deg)  translateX(30px); }
.pod-wrap.is-open .pod-top   { transform: translateY(-14px) scaleY(0.9); }

.pod-seeds .seed {
    transform: translate(0, 0);
    opacity: 0;
}
.pod-wrap.is-open .seed-1 { animation: seed-drift-1 3.6s var(--spring) 0.6s forwards infinite; }
.pod-wrap.is-open .seed-2 { animation: seed-drift-2 4.0s var(--spring) 1.0s forwards infinite; }
.pod-wrap.is-open .seed-3 { animation: seed-drift-3 3.8s var(--spring) 1.4s forwards infinite; }

@keyframes seed-drift-1 {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-24px, -170px) scale(1); opacity: 0; }
}
@keyframes seed-drift-2 {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(8px, -200px) scale(1); opacity: 0; }
}
@keyframes seed-drift-3 {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(28px, -180px) scale(1); opacity: 0; }
}

.closing-kicker {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    color: var(--c-walnut);
    text-transform: lowercase;
    margin-top: 1rem;
}

.closing-mark {
    display: block;
    margin-top: 1.6rem;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.35em;
    color: var(--c-walnut);
    text-transform: lowercase;
}

/* ============================================================
   Responsive touches
   ============================================================ */
@media (max-width: 900px) {
    .peony-wrap {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: min(70vw, 360px);
        margin: 2rem auto 0;
    }
    @keyframes peony-sway {
        0%,100% { transform: rotate(0deg); }
        50%     { transform: rotate(1deg); }
    }
    .folio-opening .folio-inner {
        min-height: auto;
        padding-top: 6vh;
        padding-bottom: 10vh;
    }
    .hero-mark { transform: none; font-size: clamp(2.4rem, 12vw, 4.5rem); max-width: 90vw; }
    .hero-whisper { transform: none; left: 0; bottom: -1.8rem; }

    .fragment-a, .fragment-b, .fragment-c {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        margin-top: 8vh;
        text-align: left;
        transform: translateY(40px);
    }
    .fragment-b.is-revealed { transform: translateY(0); }
    .sprout-a, .sprout-b { display: none; }

    .panel-left, .panel-right {
        margin-left: 0;
        margin-right: 0;
        justify-self: stretch;
    }
    .vine-indicator { display: none; }
}

@media (max-width: 600px) {
    :root { --pad-lg: 1.2rem; }
    .garden-epigraph { white-space: normal; bottom: -4.5rem; width: 88%; text-align: center; }
    .trailing-left, .trailing-right { display: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}