/* WillForge welcome page — design system */

:root {
    --bg-paper:        #F6EFE3;
    --bg-veil:         #EDE3D2;
    --ink-deep:        #1B130B;
    --ink-soft:        #4A3A2A;
    --ink-mute:        #8A7763;
    --accent-ember:    #C8541C;
    --accent-ember-dk: #9C3F12;
    --rule:            rgba(27,19,11,0.12);
    --shadow-warm:     0 24px 60px -28px rgba(89,55,20,0.35);

    /* Forest palette — sampled from the hero imagery for cool-tone accents
       woven through the lower sections of the page. */
    --forest-deep:     #1F4438;
    --forest-night:    #152838;
    --forest-light:    #9DD2DC;
    --forest-moss:     #5E7B5C;
    --forest-bronze:   #9B8654;

    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, "JetBrains Mono", monospace;

    --container-max: 1440px;
    --container-pad: clamp(1.5rem, 5vw, 5rem);

    --eyebrow-letter: 0.18em;
    --headline-letter: -0.02em;
}

html, body.welcome {
    background: var(--bg-paper);
    color: var(--ink-deep);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Both html and body must clip — Chrome only propagates body overflow when
   the html element doesn't have its own scroll container, and full-bleed
   chapter sections push briefly past the viewport on narrow screens. */
html { overflow-x: clip; }

body.welcome {
    margin: 0;
    overflow-x: clip;
}

.welcome-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Typography primitives */
.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-letter);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-mute);
    margin: 0 0 1.25rem;
}

.display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: var(--headline-letter);
    line-height: 0.95;
    color: var(--ink-deep);
    margin: 0;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}

.display-xxl {
    font-size: clamp(3.5rem, 8vw, 7.5rem);
}

.display-xl {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.display-l {
    font-size: clamp(2rem, 3.5vw, 3rem);
}

.lede {
    font-size: 1.125rem;
    color: var(--ink-soft);
    max-width: 56ch;
    line-height: 1.6;
}

.body-text {
    color: var(--ink-soft);
    max-width: 62ch;
    line-height: 1.65;
}

a {
    color: var(--accent-ember);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

a:hover {
    border-bottom-color: var(--accent-ember);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    will-change: transform;
}

.btn-primary {
    background: var(--ink-deep);
    color: var(--bg-paper);
    border-color: var(--ink-deep);
}

.btn-primary:hover {
    background: var(--accent-ember-dk);
    border-color: var(--accent-ember-dk);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-deep);
    border-color: rgba(27,19,11,0.25);
}

.btn-ghost:hover {
    border-color: var(--accent-ember);
    color: var(--accent-ember);
}

.btn:active {
    transform: translateY(1px);
}

.btn .arrow {
    display: inline-block;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .arrow {
    transform: translateX(3px);
}

/* Nav — during the hero, essentially invisible. No saturate (which amplifies
   any colour shift in the imagery underneath), only a whisper of blur to
   soften high-frequency detail. The mask-image fades the whole thing to
   nothing at the bottom edge. */
.welcome-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding-block: 1.25rem 1.75rem;
    background: transparent;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    transition: background 320ms cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stuck — proper frosted bar once we're past the forest scenes */
.welcome-nav.is-stuck {
    background: linear-gradient(
        to bottom,
        rgba(246, 239, 227, 0.55) 0%,
        rgba(246, 239, 227, 0.25) 65%,
        rgba(246, 239, 227, 0)    100%
    );
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    backdrop-filter: saturate(170%) blur(16px);
}

/* Static stand-alone pages (Subscribe, Contact, Unsubscribe) — the nav sits
   above paper, not the hero. Skip the bottom-edge fade mask. */
.welcome-nav.is-static {
    -webkit-mask-image: none;
    mask-image: none;
}

.welcome-nav__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}

.wordmark {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-deep);
    border: none;
}

.wordmark:hover {
    border: none;
    color: var(--accent-ember);
}

/* Section links — quiet text in the middle of the bar, gain a hairline
   underline on hover/active so they read as a navigation, not a row of CTAs. */
.welcome-nav__sections {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2.6vw, 2.4rem);
}

.welcome-nav__link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: none;
    padding-block: 0.35rem;
    position: relative;
    transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent-ember);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-nav__link:hover,
.welcome-nav__link.is-active {
    color: var(--ink-deep);
    border: none;
}

.welcome-nav__link:hover::after,
.welcome-nav__link.is-active::after {
    transform: scaleX(1);
}

/* Sign-in — the most subtle thing on the bar. Plain text, mute colour,
   only the faintest hairline underline on hover. */
.welcome-nav__signin {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border: none;
    padding-block: 0.35rem;
    transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-nav__signin:hover {
    color: var(--ink-deep);
    border-bottom-color: rgba(27,19,11,0.25);
}

/* Admin shortcut — same scale as sign-in but ember-tinted so it reads as a tool. */
.welcome-nav__signin--admin {
    color: var(--accent-ember);
    margin-right: 0.85rem;
}

.welcome-nav__signin--admin:hover {
    color: var(--accent-ember-dk);
}

.welcome-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 720px) {
    .welcome-nav__inner {
        grid-template-columns: auto auto;
    }

    .welcome-nav__sections {
        display: none;
    }
}

/* Chapters */
.chapter {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-block: clamp(4rem, 10vh, 8rem);
}

.chapter--veil {
    background: var(--bg-veil);
    overflow: hidden;
    isolation: isolate;
}

.chapter--veil > .welcome-container {
    position: relative;
    z-index: 2;
}

@keyframes forest-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-1.5%, 2.5%, 0) scale(1.03); }
}

/* Thin moss-and-bronze accent line at chapter transitions */
.chapter + .chapter {
    box-shadow:
        inset 0 1px 0 rgba(155, 134, 84, 0.30),
        inset 0 2px 0 rgba(94, 123, 92, 0.18);
}

/* ─── Vines: animated SVG botanical accents that draw themselves on scroll ─── */
.vine {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
    will-change: transform;
}

.vine-stem,
.vine-tendril {
    fill: none;
    stroke: url(#vineGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: var(--vine-len, 1600);
    stroke-dashoffset: var(--vine-len, 1600);
    transition: stroke-dashoffset 3.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.vine-tendril {
    stroke-width: 1.8;
    transition-delay: 2.6s;
    transition-duration: 1s;
}

.vine-leaf {
    transform-origin: center;
    transform-box: fill-box;
    transform: scale(0) rotate(-12deg);
    opacity: 0;
    transition:
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s ease;
    transition-delay: var(--leaf-delay, 0s);
}

.vine.is-growing .vine-stem,
.vine.is-growing .vine-tendril {
    stroke-dashoffset: 0;
}

.vine.is-growing .vine-leaf {
    transform: scale(1) rotate(0);
    opacity: 0.92;
}

/* Position variants */
.vine--tl { top: -3rem;   left: -2rem;  width: 14rem; height: 60vh; }
.vine--tr { top: -3rem;   right: -2rem; width: 14rem; height: 60vh; transform: scaleX(-1); }
.vine--bl { bottom: -3rem; left: -2rem; width: 14rem; height: 50vh; transform: scaleY(-1); }
.vine--br { bottom: -3rem; right: -2rem; width: 14rem; height: 50vh; transform: scale(-1, -1); }

.vine--horizontal {
    top: -1.5rem;
    left: 5%;
    right: 5%;
    width: auto;
    height: 6rem;
}

@media (max-width: 900px) {
    .vine--tl, .vine--tr, .vine--bl, .vine--br {
        width: 8rem;
        height: 36vh;
    }
}

/* Chapter 1 — Hero (layered enchanted-forest stack)
   ─────────────────────────────────────────────────
   svh (small viewport) instead of dvh — locks the hero to the smallest
   the viewport ever gets (URL bar visible). Critical because GSAP captures
   the pin spacer height at trigger creation; if we used dvh the spacer
   stays sized for "URL bar visible" but the hero element grows when the
   bar collapses, leaving an awkward gap. With svh, the hero is stable and
   when the URL bar collapses you simply see a thin slice of the next
   chapter peek through — natural cue to keep scrolling. */
.chapter--hero {
    padding: 0;
    overflow: hidden;
    min-height: 100svh;
}

.hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    isolation: isolate;
}

/* Image layers */
.hero__layers {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero__layer {
    position: absolute;
    top: -6%;
    left: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    object-position: center 60%;
    will-change: transform, opacity;
    pointer-events: none;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.hero__layer--back  { z-index: 1; }
.hero__layer--mid   { z-index: 2; }
.hero__layer--front { z-index: 3; }

/* Particle canvases — back layer ambient throughout, front layer interweaves above parchments */
.hero__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

.hero__particles--back {
    z-index: 4;
    transition: opacity 1.2s ease;
}

.hero__particles--front {
    z-index: 8;
    opacity: 0;
    /* No CSS transition on the front canvas — GSAP scrub controls its opacity
       directly during the timeline; a CSS transition would lag and fight scrub. */
    transition: none;
}

.hero__particles.is-active { opacity: 1; }
.hero__particles--front.is-active { opacity: 0; /* GSAP overrides via inline */ }

/* Hide the global Blazor error UI by default — the scaffolded rule lives inside
   MainLayout's scoped CSS so it doesn't apply to WelcomeLayout. Without this,
   the error pane shows on the welcome page even when no error occurred. */
#blazor-error-ui {
    display: none;
}

/* Veil — subtle dark vignette so the parchment reads on bright forest scenes */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 5;
    background:
        radial-gradient(ellipse at 50% 70%, rgba(8,16,12,0.55) 0%, rgba(8,16,12,0) 55%),
        linear-gradient(180deg, rgba(8,16,12,0.0) 40%, rgba(8,16,12,0.45) 100%);
    pointer-events: none;
}

/* Parchment frame — three phase containers stacked in the same slot.
   Each phase has its own internal layout. */
.hero__copy-frame {
    position: absolute;
    inset: 0 0 0 0;
    z-index: 6;
    pointer-events: none;
}

.hero__phase {
    position: absolute;
    inset: auto 0 8% 0;
    padding-inline: clamp(1rem, 4vw, 3rem);
    pointer-events: none;
}

.hero__phase > *,
.hero__phase .hero__parchment-stack {
    pointer-events: auto;
}

/* Phase A: single centered parchment, anchored toward bottom (current) */
.hero__phase--a {
    display: grid;
    place-items: center;
    inset: auto 0 8% 0;
}

/* Phase B: split — primary parchment left, "quest board" pin stack right.
   Anchored higher in the viewport, uses more vertical space. */
.hero__phase--b {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: stretch;
    max-width: min(1180px, 96vw);
    margin-inline: auto;
    inset: 13% 0 13% 0;
}

/* "Quest board" pin stack — pins absolute-positioned, expanding doesn't shift siblings */
.hero__parchment-stack {
    position: relative;
    height: 100%;
    min-height: 360px;
}

.hero__pin {
    position: absolute;
    width: 88%;
    transform-origin: top center;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        z-index 0s;
    will-change: transform;
}

.hero__pin--1 { top: 0;   left: 0;    transform: rotate(-1.2deg); z-index: 1; }
.hero__pin--2 { top: 32%; left: 12%;  transform: rotate(1.6deg);  z-index: 2; }
.hero__pin--3 { top: 64%; left: 4%;   transform: rotate(-0.8deg); z-index: 3; }

/* Parchments inside pins are always "open" — the pin wrapper's opacity
   (animated by the timeline) controls visibility for tack + parchment together. */
.hero__pin .hero__parchment {
    transform: none;
    opacity: 1;
}

.hero__pin:hover,
.hero__pin:focus-visible {
    z-index: 20;
    transform: rotate(0deg) scale(1.04) translateY(-2px);
    outline: none;
}

/* Thumbtack on each pin */
.hero__pin-tack {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d4361a 0%, #8a1a08 70%, #4a0904 100%);
    box-shadow:
        0 3px 5px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,200,180,0.45);
    z-index: 30;
    pointer-events: none;
}

/* Phase C: three taller columns side by side */
.hero__phase--c {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: stretch;
    max-width: min(1240px, 96vw);
    margin-inline: auto;
    inset: 13% 0 13% 0;
}

/* Base parchment — rolled-up by default; the JS timeline (or .is-active) reveals. */
.hero__parchment {
    position: relative;
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
    color: var(--ink-deep);
    background:
        radial-gradient(ellipse at 30% 0%, rgba(252,243,224,0.97), rgba(244,228,196,0.93) 60%, rgba(232,209,170,0.9) 100%);
    border: 1px solid rgba(120,80,40,0.35);
    box-shadow:
        0 30px 80px -32px rgba(0,0,0,0.7),
        0 4px 16px -8px rgba(80,50,20,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.35),
        inset 0 0 100px rgba(220,180,120,0.35);
    clip-path: polygon(
        1.5% 2%, 8% 0.5%, 22% 1.8%, 38% 0.8%, 56% 2%, 72% 0.6%, 88% 1.5%, 98% 0.4%,
        99.5% 8%, 99.2% 24%, 99.6% 42%, 99% 60%, 99.5% 78%, 99% 92%,
        98% 99.5%, 88% 98.5%, 72% 99.2%, 56% 98%, 38% 99.5%, 22% 98.4%, 8% 99.5%, 1% 98%,
        0.5% 88%, 0.8% 72%, 0.4% 56%, 0.6% 38%, 0.4% 24%, 0.5% 10%
    );
    transform: scaleY(0.06);
    transform-origin: top center;
    opacity: 0;
    will-change: transform, opacity;
}

/* CSS-driven initial reveal for Phase A (so it's visible before JS boots). */
.hero__parchment.is-active {
    transform: scaleY(1);
    opacity: 1;
    transition:
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.0s ease;
}

/* Center variant (Phase A) sizing */
.hero__parchment--center {
    max-width: min(640px, 92vw);
    width: min(640px, 92vw);
    padding: clamp(2.25rem, 4vh, 3.5rem) clamp(2rem, 4vw, 3.25rem);
}

/* Main left parchment in Phase B */
.hero__parchment--main {
    align-self: end;
}

/* Side parchments inside pins — compact summary, expand-down on hover (no sibling shift). */
.hero__parchment--side {
    text-align: left;
    padding: 0.95rem 1.15rem 1rem;
    cursor: pointer;
    box-shadow:
        0 24px 48px -28px rgba(0,0,0,0.65),
        0 4px 12px -6px rgba(80,50,20,0.5),
        inset 0 0 0 1px rgba(255,255,255,0.4),
        inset 0 0 90px rgba(220,180,120,0.35);
}

.hero__pin:hover .hero__parchment--side,
.hero__pin:focus-visible .hero__parchment--side {
    box-shadow:
        0 40px 90px -28px rgba(0,0,0,0.8),
        0 8px 22px -8px rgba(80,50,20,0.55),
        inset 0 0 0 1px rgba(255,255,255,0.5),
        inset 0 0 110px rgba(232,189,140,0.45);
}

.hero__parchment--side .eyebrow {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
}

.hero__side-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
    color: var(--ink-deep);
    font-variation-settings: "opsz" 96, "SOFT" 50;
}

.hero__parchment-detail {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease,
                margin-top 0.4s ease;
}

.hero__parchment-detail p {
    margin: 0;
    color: rgba(50,30,12,0.85);
    font-size: 0.92rem;
    line-height: 1.5;
}

.hero__pin:hover .hero__parchment-detail,
.hero__pin:focus-within .hero__parchment-detail,
.hero__pin:focus-visible .hero__parchment-detail {
    max-height: 9rem;
    opacity: 1;
    margin-top: 0.55rem;
}

/* Column parchments (Phase C) — taller, with content vertically centered */
.hero__parchment--column {
    text-align: center;
    padding: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 2.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: clamp(360px, 50vh, 460px);
}

.hero__column-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0 0 0.4rem;
    color: var(--ink-deep);
    font-variation-settings: "opsz" 144, "SOFT" 60;
}

.hero__column-body {
    color: rgba(50,30,12,0.85);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 0.75rem;
    max-width: 28ch;
}

.hero__parchment--column-cta {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(252,236,200,0.97), rgba(244,218,170,0.93) 60%, rgba(232,189,140,0.92) 100%);
}

.hero__parchment::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(120,80,40,0.025) 0px,
            rgba(120,80,40,0.025) 1px,
            transparent 1px,
            transparent 5px
        ),
        radial-gradient(ellipse at 25% 35%, rgba(180,120,60,0.08), transparent 55%),
        radial-gradient(ellipse at 75% 65%, rgba(140,90,50,0.06), transparent 50%);
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}

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

/* Legacy hook (kept harmless) */
.hero__parchment.is-unfurled {
    transform: scaleY(1);
    opacity: 1;
}

/* Scroll rods — horizontal bars suggesting a parchment scroll */
.hero__parchment-rod {
    position: absolute;
    left: -6px;
    right: -6px;
    height: 8px;
    background:
        linear-gradient(180deg, #6b4a2a 0%, #4a3018 50%, #2c1c0c 100%);
    border-radius: 4px;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,200,140,0.25);
    z-index: 2;
}

.hero__parchment-rod--top    { top: -4px; }
.hero__parchment-rod--bottom { bottom: -4px; }

.hero__parchment-rod::before,
.hero__parchment-rod::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: radial-gradient(circle, #8a5e36 0%, #4a3018 70%, #1c1006 100%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.hero__parchment-rod::before { left: -8px; }
.hero__parchment-rod::after  { right: -8px; }

/* Brand mark inside Phase A's parchment */
.hero__logo {
    display: block;
    width: clamp(120px, 14vw, 180px);
    height: auto;
    margin: -0.5rem auto 0.75rem;
    filter: drop-shadow(0 4px 14px rgba(140, 50, 10, 0.3));
}

/* Parchment content */
.hero__eyebrow {
    margin-block: 0 1rem;
    color: rgba(80,50,20,0.7);
}

.hero__headline {
    color: #1a1004;
    margin-block: 0 1.25rem;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.hero__lede {
    color: rgba(50,30,12,0.85);
    font-size: 1.05rem;
    margin: 0 auto 1.75rem;
    max-width: 48ch;
    line-height: 1.6;
}

.hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

/* (Per-item stagger removed — parchments now swap as whole units via the pinned timeline.) */

/* Scroll cue */
.hero__scroll-cue {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    width: 22px;
    height: 36px;
    border: 1px solid rgba(244,228,196,0.55);
    border-radius: 12px;
    pointer-events: none;
    opacity: 0.7;
}

.hero__scroll-cue span {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 2px;
    height: 8px;
    background: rgba(244,228,196,0.9);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scroll-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-cue {
    0%   { transform: translateX(-50%) translateY(0); opacity: 0.9; }
    60%  { transform: translateX(-50%) translateY(14px); opacity: 0; }
    61%  { transform: translateX(-50%) translateY(0); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0); opacity: 0.9; }
}

/* Chapter 2 — Ethos */
.ethos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
    width: 100%;
}

.ethos__heading {
    grid-column: 1 / -1;
    margin-bottom: clamp(2rem, 5vh, 4rem);
}

.tenet {
    border-top: 1px solid var(--rule);
    padding-top: 1.5rem;
    max-width: 36ch;
}

.tenet__num {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink-mute);
    margin: 0 0 0.5rem;
    letter-spacing: 0.15em;
}

.tenet__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--ink-deep);
    margin-block: 0 1rem;
    font-variation-settings: "opsz" 96, "SOFT" 50;
}

.tenet__body {
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}

.tenet--01 { grid-column: 1 / 2; }
.tenet--02 { grid-column: 2 / 3; margin-top: 4rem; }
.tenet--03 { grid-column: 1 / 2; margin-top: 6rem; margin-left: clamp(0rem, 4vw, 4rem); }

/* Chapter 3 — Flagship (Silvaril Quest)
   ──────────────────────────────────────
   Full-bleed image fills the entire chapter; overlay sits in the lower-left.
   The cinematic 1.02 → 1.12 scale animation (welcome.js) keeps working as-is
   since it's targeting the same .flagship__band-img element. */
.chapter--flagship {
    padding: 0;
    overflow: hidden;
    /* Override .chapter's `align-items: center` so the welcome-container
       stretches the full chapter height; otherwise the image wouldn't
       fill above/below its content box. */
    align-items: stretch;
}

.chapter--flagship .welcome-container {
    max-width: 100%;
    padding: 0;
    width: 100%;
}

.flagship {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.flagship__band {
    position: absolute;
    inset: 0;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.flagship__band-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    will-change: transform;
}

.flagship__band::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Stronger bottom-left vignette so the overlay text reads cleanly against
       any part of the underlying scene. */
    background:
        linear-gradient(110deg, rgba(8, 12, 14, 0.78) 0%, rgba(8, 12, 14, 0.20) 55%, transparent 80%),
        linear-gradient(180deg, rgba(8, 12, 14, 0) 55%, rgba(8, 12, 14, 0.55) 100%);
    pointer-events: none;
}

.flagship__overlay {
    position: absolute;
    inset: auto auto clamp(2rem, 8vh, 6rem) clamp(1.5rem, 6vw, 5rem);
    color: var(--bg-paper);
    max-width: 32ch;
    z-index: 1;
}

.flagship__overlay .eyebrow {
    color: rgba(246,239,227,0.7);
}

.flagship__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-block: 0.5rem 1rem;
    color: var(--bg-paper);
    font-variation-settings: "opsz" 144, "SOFT" 60;
}

.flagship__tagline {
    font-size: 1.1rem;
    color: rgba(246,239,227,0.85);
    margin-block: 0 1.5rem;
    line-height: 1.5;
}

.flagship__cta {
    color: var(--bg-paper);
    border-bottom-color: rgba(246,239,227,0.4);
    font-weight: 500;
}

.flagship__cta:hover {
    color: var(--bg-paper);
    border-bottom-color: var(--bg-paper);
}

/* Chapter 4 — What's Next */
.next {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.next__heading {
    grid-column: 1 / -1;
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.next__col {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.next__col + .next__col {
    border-left: 1px solid var(--rule);
    padding-left: clamp(2rem, 4vw, 4rem);
}

.next__col h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-block: 0 1rem;
    color: var(--ink-deep);
}

.next__col p {
    color: var(--ink-soft);
    margin-block: 0 1.5rem;
    max-width: 36ch;
}

.signup-form {
    display: flex;
    gap: 0.5rem;
    max-width: 28rem;
}

.signup-form input[type="email"] {
    flex: 1;
    padding: 0.85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--bg-paper);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-deep);
    transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.signup-form input[type="email"]:focus {
    outline: none;
    border-color: var(--accent-ember);
}

.signup-success,
.signup-error {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.signup-success { color: var(--ink-deep); }
.signup-error { color: var(--accent-ember-dk); }

.next__privacy {
    grid-column: 1 / -1;
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--ink-mute);
    max-width: 64ch;
}

/* About panel — small studio note + subscribe + contact */
.about {
    width: 100%;
    display: grid;
    gap: clamp(2rem, 5vh, 3.5rem);
}

.about__heading {
    max-width: 56ch;
}

.about__lede {
    margin-block: 1rem 0;
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.55;
    max-width: 56ch;
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.about__col {
    padding-block: 1rem;
}

.about__col + .about__col {
    border-left: 1px solid var(--rule);
    padding-left: clamp(1.5rem, 3vw, 3rem);
}

.about__col-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 1.85rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--ink-deep);
}

.about__col-body {
    color: var(--ink-soft);
    margin: 0 0 1.25rem;
    max-width: 36ch;
}

.about__form { margin-top: 0.75rem; }

.about__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.about__contacts a {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--ink-deep);
    border-bottom: 1px solid rgba(27, 19, 11, 0.18);
}

.about__contacts a:hover {
    color: var(--accent-ember);
    border-bottom-color: var(--accent-ember);
}

@media (max-width: 900px) {
    .about__grid { grid-template-columns: 1fr; }
    .about__col + .about__col {
        border-left: none;
        border-top: 1px solid var(--rule);
        padding-left: 0;
        padding-top: 1.5rem;
    }
}

/* Footer — fades from warm paper into forest depth */
.welcome-footer {
    position: relative;
    border-top: 1px solid rgba(155, 134, 84, 0.35);
    padding-block: clamp(3rem, 7vh, 5rem);
    background:
        linear-gradient(180deg,
            var(--bg-paper) 0%,
            #E4DAC2 35%,
            rgba(94, 123, 92, 0.18) 75%,
            rgba(31, 68, 56, 0.22) 100%);
    overflow: hidden;
    isolation: isolate;
}

.welcome-footer::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse 700px 360px at 25% 100%, rgba(31, 68, 56, 0.32), transparent 65%),
        radial-gradient(ellipse 500px 280px at 80% 90%, rgba(157, 210, 220, 0.18), transparent 60%);
    animation: forest-drift-a 56s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.welcome-footer__inner {
    position: relative;
    z-index: 1;
}

.welcome-footer__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: end;
}

.welcome-footer__brand p {
    margin: 0.4rem 0 0;
    color: var(--ink-mute);
}

.welcome-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: right;
    color: var(--ink-mute);
    font-size: 0.9rem;
}

.welcome-footer__meta a {
    color: var(--ink-soft);
    border-bottom: none;
}

.welcome-footer__meta a:hover {
    color: var(--accent-ember);
}

/* Stand-alone page shell — Subscribe, Contact, Unsubscribe.
   Generous top padding so content clears the fixed nav; single column,
   paper backdrop, no chapter-scrolling machinery. */
.welcome-page {
    min-height: 100dvh;
    padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 8vh, 6rem);
    background: var(--bg-paper);
}

.welcome-page__inner {
    max-width: 38rem;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.welcome-page__eyebrow { margin-bottom: 0.75rem; }

.welcome-page__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--ink-deep);
    margin: 0 0 1rem;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}

.welcome-page__lede {
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 2.5rem;
    max-width: 48ch;
}

.welcome-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.welcome-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.welcome-form__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    color: var(--ink-mute);
}

.welcome-form input[type="email"],
.welcome-form input[type="text"],
.welcome-form textarea {
    padding: 0.85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-paper);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-deep);
    transition: border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-sizing: border-box;
}

.welcome-form textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.55;
}

.welcome-form input:focus,
.welcome-form textarea:focus {
    outline: none;
    border-color: var(--accent-ember);
}

.welcome-form__captcha {
    margin-block: 0.25rem;
    min-height: 65px; /* avoid layout shift while widget mounts */
}

.welcome-form__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.welcome-form__hint,
.welcome-page__meta {
    color: var(--ink-mute);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-block: 1rem 0;
}

.welcome-page__meta a {
    color: var(--ink-soft);
    border-bottom: 1px solid rgba(27,19,11,0.18);
}

.welcome-callout {
    margin-top: 2rem;
    padding: 1.5rem 1.65rem;
    border: 1px solid var(--rule);
    border-radius: 18px;
    background: rgba(255,255,255,0.45);
    color: var(--ink-soft);
    line-height: 1.55;
}

.welcome-callout--success {
    border-color: rgba(94,123,92,0.45);
    background: rgba(212,224,199,0.55);
    color: var(--ink-deep);
}

.welcome-callout--error {
    border-color: rgba(200,84,28,0.4);
    background: rgba(232,197,170,0.4);
    color: var(--accent-ember-dk);
}

/* Reveal-on-scroll baseline (animated by welcome.js) */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    will-change: transform, opacity;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Mobile */
@media (max-width: 900px) {
    .hero__phase {
        inset: auto 0 4% 0;
        padding-inline: 1rem;
    }

    /* Phase B (pin board) and Phase C (column trio) collapse to single col,
       and we tighten the inset top/bottom so all rows fit a phone viewport. */
    .hero__phase--b {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .hero__phase--c {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        inset: 6% 0 6% 0;
    }

    .hero__parchment-stack {
        padding-top: 0.5rem;
    }

    .hero__parchment-stack > .hero__parchment--side:nth-child(2),
    .hero__parchment-stack > .hero__parchment--side:nth-child(3) {
        margin-left: 0;
    }

    .hero__parchment {
        padding: 1.25rem 1.1rem;
    }

    .hero__parchment--center {
        padding: 1.75rem 1.5rem;
    }

    /* Phase C cards on mobile — three column-parchments would stack to ~3×360px,
       far taller than a phone viewport. Drop the middle "Quieter things" card
       entirely and tighten the remaining two so they fit comfortably. */
    .hero__parchment--column {
        min-height: 0;
        padding: 1rem 1.15rem;
        gap: 0.35rem;
    }

    .hero__phase--c > .hero__parchment--column:nth-child(2) {
        display: none;
    }

    .hero__column-title {
        font-size: 1.15rem;
        margin-bottom: 0.2rem;
    }

    .hero__column-body {
        font-size: 0.85rem;
        line-height: 1.45;
        margin-bottom: 0.4rem;
        max-width: none;
    }

    .hero__lede {
        font-size: 0.98rem;
    }

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

    .tenet--01,
    .tenet--02,
    .tenet--03 {
        grid-column: 1 / -1;
        margin-top: 0;
        margin-left: 0;
    }

    .flagship__overlay {
        inset: auto auto clamp(1.5rem, 6vh, 3rem) clamp(1.25rem, 5vw, 2rem);
    }

    .flagship__title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

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

    .next__col + .next__col {
        border-left: none;
        border-top: 1px solid var(--rule);
        padding-left: 0;
        padding-top: 2rem;
    }

    .welcome-footer__inner {
        grid-template-columns: 1fr;
    }

    .welcome-footer__meta {
        text-align: left;
    }
}

/* Phones — corner vines become noisy and overlap section headings; hide them
   below 600px. Tablets keep the smaller variant from the 900px rule above. */
@media (max-width: 600px) {
    .vine--tl, .vine--tr, .vine--bl, .vine--br {
        display: none;
    }
}

/* Reduced motion — bypass all choreography, show all content statically */
@media (prefers-reduced-motion: reduce) {
    .hero__layer {
        transform: none !important;
    }

    /* Hide the layered "front" so the back image reads as the static backdrop */
    .hero__layer--front,
    .hero__layer--mid {
        display: none;
    }

    .chapter--hero {
        min-height: auto;
    }

    .hero {
        min-height: auto;
        padding-block: clamp(3rem, 8vh, 6rem);
    }

    .hero__copy-frame {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .hero__parchment {
        grid-column: auto;
        grid-row: auto;
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero__particles { display: none; }
    .hero__scroll-cue { display: none; }

    /* Forest drift backdrops freeze (palette stays, motion stops) */
    .chapter--veil::before,
    .chapter--veil::after,
    .welcome-footer::before {
        animation: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}