/* ==========================================================================
   The Miris Project — styles.css
   Cold-climate fairycore. Drift Spine + asymmetric alcoves + bubbles.
   Palette and fonts taken straight from DESIGN.md.
   ========================================================================== */

:root {
    /* Palette — exact hex values from DESIGN.md */
    --paper: #E8ECEE;          /* base background — old enamel basin */
    --paper-deep: #D4DADE;     /* alcove insets, recessed cards */
    --graphite: #2B313A;       /* primary text, drift spine */
    --ink-warm: #3F4651;       /* secondary text */
    --mist: #9AA3AC;           /* marginalia, captions */
    --mussel: #5C6B74;         /* accent, links */
    --frost-blue: #A8B8C2;     /* bubble strokes */
    --moss-cool: #6F7E73;      /* live links, dragonfly motif */
    --candle: #E4D9B8;         /* the single warm word */

    /* Additional palette tones from DESIGN.md header */
    --tone-1: #6F7E73;
    --tone-2: #8A929A;
    --tone-3: #6E7780;

    /* Spine */
    --spine-x: 38.2vw;
    --spine-color: #6E7780;

    /* Type scale */
    --display-size: clamp(4.5rem, 12vw, 9.5rem);
    --display-size-small: clamp(3rem, 7vw, 5.5rem);
    --quote-size: clamp(1.6rem, 3.2vw, 2.4rem);
    --body-size: 1.0625rem;
    --margin-size: 0.95rem;

    /* Easing */
    --ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html, body {
    background: var(--paper);
    color: var(--graphite);
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: var(--body-size);
    line-height: 1.65;
    font-feature-settings: "onum", "kern", "liga";
    overflow-x: hidden;
}

body {
    cursor: none; /* custom cursor takes over */
    position: relative;
    min-height: 100vh;
}

@media (pointer: coarse) {
    body { cursor: auto; }
}

/* ---------- Dust noise overlay ---------- */
.dust {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: 0.08;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.17  0 0 0 0 0.19  0 0 0 0 0.23  0 0 0 0.55 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='1'/></svg>");
    background-size: 240px 240px;
}

/* ---------- Drift Spine ---------- */
.drift-spine {
    position: fixed;
    top: 0;
    left: var(--spine-x);
    width: 1px;
    height: 100vh;
    background: var(--spine-color);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

/* ---------- Bubble canvas ---------- */
#bubble-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
}

/* ---------- Cathedral bubble field ---------- */
.cathedral-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.cathedral-bubble {
    position: fixed;
    border-radius: 50%;
    border: 1.5px solid var(--frost-blue);
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.0) 35%), transparent;
    opacity: 0.25;
    pointer-events: auto;
    cursor: none;
    transition: opacity 380ms ease, transform 380ms ease, border-color 280ms ease;
    overflow: visible;
}

.cathedral-bubble::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 22%;
    width: 30%;
    height: 18%;
    border-top: 1px solid rgba(255,255,255,0.55);
    border-left: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    opacity: 0.7;
    transform: rotate(-20deg);
    pointer-events: none;
}

.cathedral-bubble .epigraph {
    position: absolute;
    inset: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Cormorant Garamond", "Cormorant", "Lora", serif;
    font-style: italic;
    color: var(--mussel);
    opacity: 0;
    transition: opacity 480ms var(--ease-reveal);
    line-height: 1.32;
    font-size: 0.86rem;
    pointer-events: none;
    padding: 6%;
}

.cathedral-bubble:hover {
    opacity: 0.85;
    border-color: var(--mussel);
}

.cathedral-bubble:hover .epigraph {
    opacity: 1;
}

.cathedral-bubble.popped {
    transform: scale(0.18);
    opacity: 0;
    transition: transform 220ms ease-in, opacity 220ms ease-in;
}

/* ---------- Custom cursor ---------- */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--mussel);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    transition: width 220ms var(--ease-reveal),
                height 220ms var(--ease-reveal),
                border-color 200ms ease,
                opacity 200ms ease;
    mix-blend-mode: multiply;
}
.cursor.hover { width: 22px; height: 22px; }
.cursor.down  { transform: translate(-50%, -50%) scale(0.4); border-color: var(--mussel); }

@media (pointer: coarse) {
    .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body { cursor: auto; }
    .cursor { display: none; }
}

/* ---------- Journal main flow ---------- */
.journal {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 100vw;
}

/* ---------- Alcove base ---------- */
.alcove {
    position: relative;
    min-height: 90vh;
    padding: 14vh 6vw 14vh 6vw;
    display: block;
}

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

.alcove[data-alcove="1"] { min-height: 110vh; padding-top: 18vh; }
.alcove[data-alcove="2"] { min-height: 105vh; }
.alcove[data-alcove="3"] { min-height: 110vh; }
.alcove[data-alcove="4"] { min-height: 70vh; padding-top: 22vh; padding-bottom: 22vh; }
.alcove[data-alcove="5"] { min-height: 95vh; }
.alcove[data-alcove="6"] { min-height: 105vh; }
.alcove[data-alcove="7"] { min-height: 100vh; }
.alcove[data-alcove="8"] { min-height: 60vh; padding-top: 20vh; padding-bottom: 24vh; }

.alcove-sparse {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 65%, var(--paper) 100%);
}

.alcove[data-alcove="3"] {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 50%, var(--paper) 100%);
}

/* ---------- Hero ---------- */
.alcove-hero { padding-top: 22vh; }

.hero-prelude {
    position: absolute;
    left: calc(var(--spine-x) + 1.4rem);
    top: 6vh;
    font-family: "Caveat", "Kalam", cursive;
    color: var(--mist);
    font-size: var(--margin-size);
    letter-spacing: 0.04em;
}

.smallcaps {
    font-variant: small-caps;
    letter-spacing: 0.06em;
    color: var(--ink-warm);
}

.hero-display {
    position: relative;
    margin-top: 10vh;
    margin-left: calc(var(--spine-x) - 18vw);
    width: min(70vw, 1100px);
    color: var(--graphite);
    font-family: "Fraunces", "Cormorant", "Lora", serif;
    font-weight: 350;
    font-size: var(--display-size);
    line-height: 0.92;
    letter-spacing: -0.035em;
    font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 0;
}

.hero-display .line,
.alcove-display .line {
    display: block;
    will-change: transform, opacity;
}

.alcove-display .line:nth-child(odd)  { font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
.alcove-display .line:nth-child(even) { font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; }

.hero-display .line-1 { transform: translateX(-1.2%); }
.hero-display .line-2 { transform: translateX(2.0%); margin-left: 9%; }
.hero-display .line-3 { transform: translateX(-0.6%); margin-left: 3%; }
.hero-display .line-4 { transform: translateX(1.4%); margin-left: 14%; }

.ital {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

.candle {
    color: var(--candle);
    font-style: italic;
}

.hero-sub {
    margin-top: 4.5vh;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 48ch;
    color: var(--ink-warm);
    font-size: 1.05rem;
    line-height: 1.7;
}

.hero-tail {
    margin-top: 1.6rem;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 48ch;
    color: var(--ink-warm);
}

/* ---------- General alcove text ---------- */
.alcove-eyebrow {
    position: absolute;
    top: 2vh;
    left: calc(var(--spine-x) + 1.4rem);
    font-family: "Caveat", "Kalam", cursive;
    color: var(--mist);
    font-size: var(--margin-size);
    letter-spacing: 0.04em;
}

.alcove-eyebrow-right {
    left: auto;
    right: 6vw;
    top: 4vh;
}

.alcove-display {
    position: relative;
    margin-top: 8vh;
    margin-left: calc(var(--spine-x) - 16vw);
    width: min(72vw, 1100px);
    color: var(--graphite);
    font-family: "Fraunces", "Cormorant", "Lora", serif;
    font-weight: 380;
    font-size: var(--display-size);
    line-height: 0.92;
    letter-spacing: -0.035em;
    font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
}

.alcove-display-small { font-size: var(--display-size-small); }

.alcove-display .line:nth-child(1) { transform: translateX(0.8%); }
.alcove-display .line:nth-child(2) { transform: translateX(-1.5%); margin-left: 5%; }
.alcove-display .line:nth-child(3) { transform: translateX(1.2%); margin-left: 11%; }
.alcove-display .line:nth-child(4) { transform: translateX(-0.4%); margin-left: 16%; }

.alcove-body {
    position: relative;
    margin-top: 3.6vh;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 50ch;
    color: var(--ink-warm);
}

.alcove-body em {
    font-style: italic;
    color: var(--graphite);
}

/* ---------- Reveal affordances ---------- */
.reveal-affordance {
    cursor: none;
    color: var(--mussel);
    font-family: "Caveat", "Kalam", cursive;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    margin-right: 0.4em;
    border-bottom: 1px dotted var(--mussel);
    padding-bottom: 1px;
    transition: color 220ms ease, opacity 220ms ease;
    user-select: none;
}

.reveal-affordance:hover { color: var(--moss-cool); }

.reveal .reveal-content {
    display: inline-block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 480ms var(--ease-reveal),
                opacity 480ms var(--ease-reveal),
                transform 480ms var(--ease-reveal),
                margin 480ms var(--ease-reveal);
    margin-top: 0;
    pointer-events: none;
}

.reveal.is-open .reveal-affordance {
    opacity: 0.4;
    pointer-events: none;
}

.reveal.is-open .reveal-content {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.4rem;
    pointer-events: auto;
}

/* ---------- Pull quotes ---------- */
.pull-quote {
    position: relative;
    margin-top: 5.5vh;
    margin-left: calc(var(--spine-x) + 4vw);
    max-width: 36ch;
    padding: 2.6rem 2.4rem;
    background: var(--paper-deep);
    color: var(--graphite);
    font-family: "Cormorant Garamond", "Cormorant", "Lora", serif;
    font-style: italic;
    font-size: var(--quote-size);
    line-height: 1.32;
}

.pull-quote cite {
    display: block;
    margin-top: 1.2rem;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--mist);
    font-family: "Caveat", "Kalam", cursive;
    font-variant: normal;
}

.pull-quote-cross {
    margin-left: calc(var(--spine-x) - 26vw);
    max-width: 38ch;
    border-left: 1px solid var(--mist);
    background: transparent;
    padding-left: 2.2rem;
    padding-right: 1rem;
}

/* Cartouche ornaments */
.cartouche {
    position: absolute;
    width: 60px;
    height: 60px;
    color: var(--mist);
    pointer-events: none;
}
.cartouche.small { width: 40px; height: 40px; }
.cartouche-tl { top: -8px; left: -8px; }
.cartouche-br { bottom: -8px; right: -8px; transform: rotate(0deg); }

.cartouche-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.6, 0.05, 0.3, 0.95);
}

.alcove.is-visible .cartouche-path {
    stroke-dashoffset: 0;
}

/* ---------- Marginalia ---------- */
.marginalia {
    position: absolute;
    right: 4vw;
    width: 20vw;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    font-family: "Caveat", "Kalam", cursive;
    color: var(--mist);
    font-size: var(--margin-size);
    letter-spacing: 0.01em;
    line-height: 1.45;
    transform: translateX(40px);
    opacity: 0;
    transition: transform 720ms var(--ease-reveal), opacity 720ms var(--ease-reveal);
}

.alcove.is-visible .marginalia {
    transform: translateX(0);
    opacity: 1;
}

.marginalia .margin-note {
    display: block;
    transform-origin: left center;
    transition: transform 280ms var(--ease-reveal),
                color 280ms ease,
                margin-left 280ms var(--ease-reveal);
}

.marginalia .margin-note:hover {
    transform: scale(1.4);
    color: var(--mussel);
    margin-left: -12px;
}

.marginalia .margin-sketch {
    width: 60px;
    height: auto;
    color: var(--mist);
    margin-top: 0.5rem;
}

.margin-1 { top: 8vh; }
.margin-2 { top: 24vh; }
.margin-3 { top: 30vh; right: 5vw; }
.margin-4 { top: 38vh; right: 8vw; }
.margin-6 { top: 18vh; }
.margin-7 { top: 26vh; }

/* ---------- Margin link (in-line annotation target) ---------- */
.margin-link {
    color: var(--mussel);
    text-decoration: underline;
    text-decoration-color: var(--mist);
    text-decoration-thickness: from-font;
    text-underline-offset: 4px;
    cursor: none;
    transition: color 200ms ease, text-decoration-color 200ms ease;
}
.margin-link:hover { color: var(--moss-cool); text-decoration-color: var(--moss-cool); }

/* Connection line drawn dynamically by JS */
.connection-line {
    position: fixed;
    height: 1px;
    background: var(--mist);
    transform-origin: left center;
    pointer-events: none;
    opacity: 0;
    z-index: 60;
    transition: opacity 240ms ease;
}
.connection-line.is-on { opacity: 0.8; }

/* Desaturate sibling text on margin hover */
.alcove.margin-hover .alcove-body,
.alcove.margin-hover .hero-sub,
.alcove.margin-hover .hero-tail {
    filter: saturate(0.55) opacity(0.74);
    transition: filter 280ms ease;
}

/* ---------- Footnotes ---------- */
.dagger {
    cursor: none;
    color: var(--mussel);
    font-size: 0.86em;
    margin-left: 0.1em;
    user-select: none;
    transition: color 200ms ease;
}
.dagger:hover { color: var(--moss-cool); }

.footnote {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.6rem;
    margin: 0;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 48ch;
    color: var(--mist);
    font-family: "Caveat", "Kalam", cursive;
    font-size: var(--margin-size);
    line-height: 1.5;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 480ms var(--ease-reveal),
                opacity 480ms var(--ease-reveal),
                margin-top 480ms var(--ease-reveal),
                margin-bottom 480ms var(--ease-reveal);
}

.footnote.is-open {
    max-height: 240px;
    opacity: 1;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
}

.dagger-label {
    color: var(--mussel);
    font-family: "Source Serif 4", Georgia, serif;
    font-style: normal;
}

/* ---------- Specimens plate ---------- */
.specimen-plate {
    margin-top: 6vh;
    margin-left: calc(var(--spine-x) - 12vw);
    width: min(86vw, 1180px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4vw;
    align-items: end;
}

.specimen {
    color: var(--ink-warm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    transform: translateY(8px);
    opacity: 0;
    transition: transform 700ms var(--ease-reveal), opacity 700ms var(--ease-reveal);
}

.alcove.is-visible .specimen { transform: translateY(0); opacity: 1; }
.alcove.is-visible .specimen:nth-child(2) { transition-delay: 120ms; }
.alcove.is-visible .specimen:nth-child(3) { transition-delay: 240ms; }
.alcove.is-visible .specimen:nth-child(4) { transition-delay: 360ms; }

.specimen svg {
    width: 100%;
    height: auto;
    max-height: 220px;
}
.specimen-snail svg { max-height: 180px; }
.specimen-feather svg { max-height: 240px; }

.specimen figcaption {
    font-family: "Caveat", "Kalam", cursive;
    font-size: var(--margin-size);
    color: var(--mist);
    letter-spacing: 0.01em;
}

/* ---------- Sparse alcove ---------- */
.sparse-line {
    position: absolute;
    bottom: 14vh;
    right: 8vw;
    max-width: 32ch;
    font-family: "Cormorant Garamond", "Cormorant", "Lora", serif;
    font-style: italic;
    font-size: var(--quote-size);
    color: var(--graphite);
    line-height: 1.32;
    text-align: right;
}

.invitation-line {
    margin-top: 4vh;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 48ch;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.1rem;
    color: var(--graphite);
}

.invitation-trail {
    margin-top: 1.2rem;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 48ch;
    font-family: "Caveat", "Kalam", cursive;
    color: var(--mist);
    font-size: var(--margin-size);
}

.quiet-link {
    color: var(--moss-cool);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 5px;
    cursor: none;
    transition: color 220ms ease;
}
.quiet-link:hover { color: var(--mussel); }

/* ---------- Bubble field caption ---------- */
.bubble-field-caption {
    position: absolute;
    bottom: 14vh;
    left: calc(var(--spine-x) + 2vw);
    max-width: 36ch;
    font-family: "Cormorant Garamond", "Cormorant", "Lora", serif;
    font-style: italic;
    color: var(--ink-warm);
    font-size: 1.18rem;
    line-height: 1.45;
}

/* ---------- Practice list ---------- */
.practice-list {
    list-style: none;
    margin-top: 4vh;
    margin-left: calc(var(--spine-x) + 1.4rem);
    max-width: 50ch;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: var(--ink-warm);
    font-family: "Source Serif 4", Georgia, serif;
}

.practice-list li {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.4rem;
    align-items: baseline;
}

.practice-gloss {
    font-family: "Caveat", "Kalam", cursive;
    color: var(--mist);
    margin-left: 0.4rem;
}

/* ---------- Watermark ---------- */
.watermark {
    position: absolute;
    right: 2vw;
    bottom: 2vh;
    width: 64px;
    height: 64px;
    opacity: 0.08;
    color: var(--graphite);
    pointer-events: none;
}

.watermark svg { width: 100%; height: 100%; }

/* ---------- Footer ---------- */
.journal-footer {
    position: relative;
    z-index: 5;
    padding: 14vh 6vw 10vh 6vw;
    background: var(--paper-deep);
    border-top: 1px solid rgba(110, 119, 128, 0.3);
}

.footer-frame {
    margin-left: calc(var(--spine-x) - 8vw);
    max-width: 60ch;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    color: var(--ink-warm);
}

.footer-line {
    font-family: "Source Serif 4", Georgia, serif;
    color: var(--mist);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.ambient-toggle {
    align-self: flex-start;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--mussel);
    font-family: "Caveat", "Kalam", cursive;
    font-size: var(--margin-size);
    letter-spacing: 0.02em;
    cursor: none;
    padding: 0.3rem 0;
    border-bottom: 1px dotted var(--mist);
    transition: color 220ms ease, border-color 220ms ease;
}

.ambient-toggle:hover { color: var(--moss-cool); border-color: var(--moss-cool); }
.ambient-toggle[aria-pressed="true"] { color: var(--moss-cool); }

.footer-tail {
    font-family: "Cormorant Garamond", "Cormorant", "Lora", serif;
    color: var(--ink-warm);
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* ---------- Initial entry state for headings ---------- */
.alcove-display .line,
.hero-display .line {
    opacity: 0;
    transform: translate3d(var(--ix, 0), 6px, 0);
    transition: opacity 600ms var(--ease-reveal), transform 600ms var(--ease-reveal);
}

.alcove.is-visible .alcove-display .line,
.alcove.is-visible .hero-display .line {
    opacity: 1;
    transform: translate3d(var(--ix, 0), 0, 0);
}

.alcove-display .line:nth-child(1),
.hero-display .line:nth-child(1) { transition-delay: 80ms; }
.alcove-display .line:nth-child(2),
.hero-display .line:nth-child(2) { transition-delay: 160ms; }
.alcove-display .line:nth-child(3),
.hero-display .line:nth-child(3) { transition-delay: 240ms; }
.alcove-display .line:nth-child(4),
.hero-display .line:nth-child(4) { transition-delay: 320ms; }

/* Keep TX offsets after activation */
.hero-display .line-1 { --ix: -1.2%; }
.hero-display .line-2 { --ix: 2.0%; margin-left: 9%; }
.hero-display .line-3 { --ix: -0.6%; margin-left: 3%; }
.hero-display .line-4 { --ix: 1.4%; margin-left: 14%; }

.alcove-display .line:nth-child(1) { --ix: 0.8%; }
.alcove-display .line:nth-child(2) { --ix: -1.5%; margin-left: 5%; }
.alcove-display .line:nth-child(3) { --ix: 1.2%; margin-left: 11%; }
.alcove-display .line:nth-child(4) { --ix: -0.4%; margin-left: 16%; }

.alcove-body,
.hero-sub,
.hero-tail,
.sparse-line,
.bubble-field-caption,
.invitation-line,
.invitation-trail,
.practice-list,
.pull-quote {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 700ms var(--ease-reveal), transform 700ms var(--ease-reveal);
    transition-delay: 280ms;
}
.alcove.is-visible .alcove-body,
.alcove.is-visible .hero-sub,
.alcove.is-visible .hero-tail,
.alcove.is-visible .sparse-line,
.alcove.is-visible .bubble-field-caption,
.alcove.is-visible .invitation-line,
.alcove.is-visible .invitation-trail,
.alcove.is-visible .practice-list,
.alcove.is-visible .pull-quote {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.2s !important;
    }
    .cartouche-path { stroke-dashoffset: 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
    :root { --spine-x: 30vw; }

    .marginalia {
        position: relative;
        right: auto;
        width: auto;
        max-width: 100%;
        margin-top: 1.6rem;
        margin-left: calc(var(--spine-x) + 1.4rem);
        padding-left: 0.9rem;
        border-left: 1px solid var(--mist);
        transform: none;
        opacity: 1;
    }

    .specimen-plate {
        grid-template-columns: repeat(2, 1fr);
        margin-left: calc(var(--spine-x) - 4vw);
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    :root {
        --spine-x: 24vw;
        --display-size: clamp(2.6rem, 11vw, 4.6rem);
        --display-size-small: clamp(2.2rem, 8vw, 3.4rem);
        --quote-size: 1.3rem;
    }

    .drift-spine { display: none; }

    .alcove {
        padding: 12vh 6vw 12vh 6vw;
    }

    .hero-display,
    .alcove-display {
        margin-left: 0;
        width: auto;
    }

    .hero-display .line,
    .alcove-display .line {
        margin-left: 0 !important;
    }

    .hero-sub,
    .hero-tail,
    .alcove-body,
    .footnote,
    .invitation-line,
    .invitation-trail,
    .practice-list {
        margin-left: 0;
    }

    .alcove-eyebrow,
    .alcove-eyebrow-right,
    .hero-prelude {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin-bottom: 1.2rem;
    }

    .pull-quote,
    .pull-quote-cross {
        margin-left: 0;
        max-width: 100%;
    }

    .specimen-plate {
        margin-left: 0;
        grid-template-columns: repeat(2, 1fr);
    }

    .sparse-line {
        position: relative;
        right: auto;
        bottom: auto;
        text-align: left;
        max-width: 100%;
        margin-top: 6vh;
    }

    .bubble-field-caption {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 8vh;
    }

    .footer-frame {
        margin-left: 0;
    }

    .marginalia {
        position: relative;
        right: auto;
        top: auto !important;
        width: auto;
        max-width: 100%;
        margin-top: 1.6rem;
        padding-left: 0.9rem;
        border-left: 1px solid var(--mist);
        transform: none;
        opacity: 1;
    }
}