/* ==========================================================================
   gabs.review — inflated-3d × aurora-gradient × full-bleed scholarly review
   ========================================================================== */

:root {
    /* Palette (from DESIGN.md) */
    --aurora-violet: #6B3FA0;
    --aurora-rose: #D96BA0;
    --aurora-cyan: #5DC2D0;
    --aurora-mint: #8FD9B6;
    --ink-deep: #1A1530;
    --parchment: #F5EFE4;
    --vellum: #E8DFCF;
    --botanical-green: #556B4E;
    --highlight-gold: #D7A54A;

    /* Typography */
    --font-display: 'Fraunces', 'Lora', Georgia, serif;
    --font-prose:   'Spectral', 'Lora', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Inter', ui-monospace, Menlo, monospace;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
    width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-prose);
    color: var(--ink-deep);
    background: var(--parchment);
    line-height: 1.8;
    font-size: clamp(17px, 1.35vw, 19px);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
}

/* --------------------------------------------------------------------------
   Aurora mesh backdrop (fixed, drifting)
   -------------------------------------------------------------------------- */
.aurora-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, rgba(245,239,228,0.0), rgba(245,239,228,0.0));
}

.aurora-mesh .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.42;
    mix-blend-mode: multiply;
    will-change: transform;
}

.aurora-mesh .blob-violet {
    width: 62vmax;
    height: 62vmax;
    background: radial-gradient(circle, var(--aurora-violet) 0%, rgba(107,63,160,0) 65%);
    top: -14vmax;
    left: -16vmax;
    animation: drift-violet 44s ease-in-out infinite alternate;
}

.aurora-mesh .blob-rose {
    width: 58vmax;
    height: 58vmax;
    background: radial-gradient(circle, var(--aurora-rose) 0%, rgba(217,107,160,0) 65%);
    top: -8vmax;
    right: -18vmax;
    animation: drift-rose 52s ease-in-out infinite alternate;
}

.aurora-mesh .blob-cyan {
    width: 66vmax;
    height: 66vmax;
    background: radial-gradient(circle, var(--aurora-cyan) 0%, rgba(93,194,208,0) 65%);
    bottom: -22vmax;
    left: -10vmax;
    animation: drift-cyan 60s ease-in-out infinite alternate;
}

.aurora-mesh .blob-mint {
    width: 54vmax;
    height: 54vmax;
    background: radial-gradient(circle, var(--aurora-mint) 0%, rgba(143,217,182,0) 65%);
    bottom: -14vmax;
    right: -16vmax;
    animation: drift-mint 48s ease-in-out infinite alternate;
}

@keyframes drift-violet {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6vw, 8vh, 0) scale(1.08); }
    100% { transform: translate3d(-4vw, 10vh, 0) scale(0.96); }
}
@keyframes drift-rose {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-8vw, 6vh, 0) scale(1.1); }
    100% { transform: translate3d(-2vw, -4vh, 0) scale(0.94); }
}
@keyframes drift-cyan {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(10vw, -6vh, 0) scale(1.04); }
    100% { transform: translate3d(-6vw, -10vh, 0) scale(0.98); }
}
@keyframes drift-mint {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-8vw, -8vh, 0) scale(1.08); }
    100% { transform: translate3d(4vw, -2vh, 0) scale(0.95); }
}

/* --------------------------------------------------------------------------
   Botanical corner flourishes
   -------------------------------------------------------------------------- */
.botanical {
    position: fixed;
    width: clamp(120px, 14vw, 220px);
    height: clamp(120px, 14vw, 220px);
    color: var(--botanical-green);
    z-index: 2;
    pointer-events: none;
    opacity: 0.85;
}

.botanical.corner-tl { top: clamp(12px, 2vw, 36px); left: clamp(12px, 2vw, 36px); }
.botanical.corner-br { bottom: clamp(12px, 2vw, 36px); right: clamp(12px, 2vw, 36px); }

.bot-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: bot-draw 1.4s var(--ease-out) 0.4s forwards;
}

.botanical.corner-br .bot-path {
    animation-delay: 0.6s;
}

@keyframes bot-draw {
    to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Panels (full-bleed, 100vh)
   -------------------------------------------------------------------------- */
.panel {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    padding: clamp(80px, 12vh, 160px) clamp(24px, 6vw, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
    transition: background-color 1200ms var(--ease-out);
}

.panel-inner {
    width: 100%;
    max-width: 1400px;
    position: relative;
}

/* Tints per panel (aurora variations) */
.panel[data-tint="opening"]  { background: linear-gradient(180deg, rgba(245,239,228,0.88) 0%, rgba(232,223,207,0.82) 100%); }
.panel[data-tint="atrium"]   { background: linear-gradient(180deg, rgba(232,223,207,0.82) 0%, rgba(245,239,228,0.88) 100%); }
.panel[data-tint="price"]    { background: linear-gradient(180deg, rgba(245,239,228,0.86) 0%, rgba(217,107,160,0.14) 100%); }
.panel[data-tint="cost"]     { background: linear-gradient(180deg, rgba(217,107,160,0.14) 0%, rgba(93,194,208,0.16) 100%); }
.panel[data-tint="worth"]    { background: linear-gradient(180deg, rgba(93,194,208,0.16) 0%, rgba(143,217,182,0.18) 100%); }
.panel[data-tint="merit"]    { background: linear-gradient(180deg, rgba(143,217,182,0.18) 0%, rgba(107,63,160,0.14) 100%); }
.panel[data-tint="verdict"]  { background: linear-gradient(180deg, rgba(107,63,160,0.14) 0%, rgba(26,21,48,0.25) 100%); }
.panel[data-tint="colophon"] { background: linear-gradient(180deg, rgba(26,21,48,0.88) 0%, rgba(26,21,48,0.98) 100%); color: var(--parchment); }

/* --------------------------------------------------------------------------
   Opening panel
   -------------------------------------------------------------------------- */
.panel-opening .panel-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 4vh, 56px);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--botanical-green);
    opacity: 0;
    transform: translateY(8px);
    animation: rise 800ms var(--ease-out) 0.2s forwards;
}

.eyebrow .sep {
    color: var(--highlight-gold);
    margin: 0 0.5em;
    opacity: 0.7;
}

.wordmark {
    font-family: var(--font-display);
    font-size: clamp(52px, 11vw, 148px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink-deep);
    position: relative;
    display: inline-block;
    transform: scale(0.3);
    opacity: 0;
    animation: inflate 900ms var(--ease-spring) 0.4s forwards;
    padding: 0.1em 0.15em;
    /* inflated-3D feel */
    text-shadow:
        0 2px 0 rgba(255,255,255,0.7),
        0 -2px 0 rgba(26,21,48,0.12),
        0 18px 40px rgba(26,21,48,0.22),
        0 34px 60px rgba(107,63,160,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 55%);
    -webkit-background-clip: text;
    background-clip: text;
}

.wordmark .word { display: inline-block; }
.wordmark .word-gabs { color: var(--ink-deep); }
.wordmark .word-review {
    background: linear-gradient(92deg, var(--aurora-violet) 0%, var(--aurora-rose) 48%, var(--aurora-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.wordmark .dot {
    color: var(--highlight-gold);
    display: inline-block;
    transform: translateY(-0.06em);
}

@keyframes inflate {
    0%   { transform: scale(0.3); opacity: 0; }
    70%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.epigraph {
    font-family: var(--font-prose);
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 400;
    font-style: italic;
    color: var(--ink-deep);
    max-width: 52ch;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(12px);
    animation: rise 900ms var(--ease-out) 1.3s forwards;
}

.scroll-hint {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--botanical-green);
    opacity: 0;
    animation: rise 800ms var(--ease-out) 2.2s forwards;
}

.scroll-hint-arrow {
    display: block;
    font-size: 22px;
    color: var(--highlight-gold);
    animation: pulse-arrow 1800ms ease-in-out infinite;
}

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

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

/* --------------------------------------------------------------------------
   Underline-draw (hand-drawn highlight on key terms)
   -------------------------------------------------------------------------- */
.mark {
    position: relative;
    display: inline-block;
    color: inherit;
    font-weight: 600;
}

.mark::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -3px;
    height: 7px;
    background:
        linear-gradient(180deg, transparent 0 2px, var(--highlight-gold) 2px 5px, transparent 5px 7px);
    transform-origin: left center;
    transform: scaleX(0) rotate(-0.6deg);
    transition: transform 520ms var(--ease-out);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.85;
}

.mark.is-drawn::after {
    transform: scaleX(1) rotate(-0.6deg);
}

/* --------------------------------------------------------------------------
   Atrium panel (two-column with marginalia)
   -------------------------------------------------------------------------- */
.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
}

.main-column {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vh, 40px);
}

.badge-3d {
    align-self: flex-start;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 34px;
    border-radius: 26px;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    color: var(--ink-deep);
    background:
        radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(160deg, var(--aurora-mint) 0%, var(--aurora-cyan) 55%, var(--aurora-rose) 100%);
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.55),
        inset 0 -4px 0 rgba(26,21,48,0.12),
        0 18px 34px rgba(107,63,160,0.25),
        0 34px 60px rgba(26,21,48,0.12);
    transform: translateY(0);
    transition: transform 260ms var(--ease-spring), box-shadow 260ms var(--ease-out);
}

.badge-3d:hover {
    transform: translateY(-6px);
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.65),
        inset 0 -4px 0 rgba(26,21,48,0.14),
        0 26px 44px rgba(107,63,160,0.3),
        0 46px 72px rgba(26,21,48,0.14);
}

.badge-label { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.01em; }
.badge-sublabel { font-size: clamp(14px, 1.3vw, 18px); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-deep); opacity: 0.78; margin-top: 4px; }

.section-heading {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.06;
    color: var(--ink-deep);
}

.prose {
    font-family: var(--font-prose);
    font-size: clamp(17px, 1.35vw, 19px);
    font-weight: 400;
    line-height: 1.8;
    color: var(--ink-deep);
    max-width: 62ch;
}

.prose em {
    font-style: italic;
    color: var(--aurora-violet);
}

.marginalia {
    position: sticky;
    top: 14vh;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 22px;
    background: rgba(255,255,255,0.5);
    border-left: 3px solid var(--highlight-gold);
    border-radius: 4px 14px 14px 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.margin-entry {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
}

.footnote-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--parchment);
    background:
        radial-gradient(120% 120% at 30% 18%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 50%),
        linear-gradient(155deg, var(--aurora-violet) 0%, var(--aurora-rose) 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.5),
        inset 0 -2px 0 rgba(26,21,48,0.25),
        0 10px 20px rgba(107,63,160,0.35);
    transform: scale(0);
    transition: transform 360ms var(--ease-spring), box-shadow 240ms var(--ease-out);
}

.footnote-badge.is-in {
    transform: scale(1);
}

.footnote-badge:hover {
    transform: scale(1.1);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.6),
        inset 0 -2px 0 rgba(26,21,48,0.28),
        0 16px 28px rgba(107,63,160,0.45);
}

.fn-num { display: block; }

.margin-body {
    font-family: var(--font-mono);
    font-size: clamp(12px, 1vw, 13.5px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-deep);
    opacity: 0.82;
}

.margin-body em { font-style: normal; color: var(--aurora-violet); font-weight: 500; }

/* --------------------------------------------------------------------------
   Facet panels
   -------------------------------------------------------------------------- */
.facet-inner {
    display: grid;
    grid-template-columns: clamp(120px, 14vw, 180px) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "num num"
        "hero body";
    gap: clamp(30px, 4vw, 60px) clamp(40px, 6vw, 100px);
    align-items: center;
}

.facet-number {
    grid-area: num;
    font-family: var(--font-mono);
    font-size: clamp(12px, 1.1vw, 14px);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--botanical-green);
}

.facet-number-label {
    color: var(--highlight-gold);
    margin-left: 8px;
    opacity: 0.85;
}

.facet-hero {
    grid-area: hero;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(180px, 26vh, 320px);
}

.facet-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vh, 32px);
    max-width: 62ch;
}

.facet-heading {
    font-family: var(--font-display);
    font-size: clamp(54px, 10vw, 148px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--ink-deep);
}

.facet-deck {
    font-family: var(--font-prose);
    font-style: italic;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.45;
    color: var(--aurora-violet);
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Inflated-3D puff shapes (facet heroes)
   -------------------------------------------------------------------------- */
.puff {
    position: relative;
    display: block;
    transition: transform 500ms var(--ease-out), filter 500ms var(--ease-out);
}

.puff::before {
    content: '';
    position: absolute;
    inset: 14% 22% -10% 22%;
    background: radial-gradient(ellipse at center, rgba(26,21,48,0.28) 0%, rgba(26,21,48,0) 70%);
    filter: blur(18px);
    z-index: -1;
}

/* Orb (facet 01 — price) */
.puff-orb {
    width: clamp(160px, 22vw, 280px);
    height: clamp(160px, 22vw, 280px);
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 42%),
        radial-gradient(120% 120% at 72% 78%, rgba(26,21,48,0.25) 0%, rgba(26,21,48,0) 52%),
        linear-gradient(155deg, var(--aurora-rose) 0%, var(--aurora-violet) 100%);
    box-shadow:
        inset 0 10px 24px rgba(255,255,255,0.45),
        inset 0 -18px 30px rgba(26,21,48,0.3),
        0 28px 54px rgba(107,63,160,0.3),
        0 50px 90px rgba(26,21,48,0.18);
}

/* Pill (facet 02 — cost) */
.puff-pill {
    width: clamp(260px, 34vw, 420px);
    height: clamp(120px, 16vw, 180px);
    border-radius: 999px;
    background:
        radial-gradient(120% 180% at 24% 22%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 42%),
        radial-gradient(120% 180% at 76% 78%, rgba(26,21,48,0.3) 0%, rgba(26,21,48,0) 55%),
        linear-gradient(155deg, var(--aurora-cyan) 0%, var(--aurora-violet) 100%);
    box-shadow:
        inset 0 10px 24px rgba(255,255,255,0.45),
        inset 0 -18px 30px rgba(26,21,48,0.32),
        0 28px 54px rgba(93,194,208,0.35),
        0 50px 90px rgba(26,21,48,0.18);
}

/* Prism (facet 03 — worth) */
.puff-prism {
    width: clamp(180px, 24vw, 300px);
    height: clamp(180px, 24vw, 300px);
    border-radius: 36% 64% 48% 52% / 56% 44% 56% 44%;
    background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 46%),
        radial-gradient(120% 120% at 70% 78%, rgba(26,21,48,0.28) 0%, rgba(26,21,48,0) 55%),
        conic-gradient(from 140deg at 50% 50%, var(--aurora-violet), var(--aurora-rose), var(--aurora-cyan), var(--aurora-mint), var(--aurora-violet));
    box-shadow:
        inset 0 10px 24px rgba(255,255,255,0.45),
        inset 0 -18px 30px rgba(26,21,48,0.3),
        0 28px 54px rgba(107,63,160,0.3),
        0 50px 90px rgba(26,21,48,0.18);
    animation: prism-sway 9s ease-in-out infinite;
}

@keyframes prism-sway {
    0%, 100% { border-radius: 36% 64% 48% 52% / 56% 44% 56% 44%; }
    50%      { border-radius: 54% 46% 60% 40% / 42% 58% 42% 58%; }
}

/* Bead (facet 04 — merit) */
.puff-bead {
    width: clamp(200px, 26vw, 340px);
    height: clamp(200px, 26vw, 340px);
    border-radius: 36px;
    transform: rotate(-8deg);
    background:
        radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 44%),
        radial-gradient(120% 120% at 72% 78%, rgba(26,21,48,0.28) 0%, rgba(26,21,48,0) 55%),
        linear-gradient(155deg, var(--aurora-mint) 0%, var(--aurora-cyan) 60%, var(--aurora-violet) 100%);
    box-shadow:
        inset 0 10px 24px rgba(255,255,255,0.45),
        inset 0 -18px 30px rgba(26,21,48,0.28),
        0 28px 54px rgba(93,194,208,0.35),
        0 50px 90px rgba(26,21,48,0.18);
}

/* Seal (facet 05 — verdict) */
.puff-seal {
    width: clamp(200px, 26vw, 320px);
    height: clamp(200px, 26vw, 320px);
    border-radius: 50%;
    position: relative;
    background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 42%),
        radial-gradient(120% 120% at 72% 78%, rgba(26,21,48,0.36) 0%, rgba(26,21,48,0) 55%),
        radial-gradient(circle at 50% 50%, var(--highlight-gold) 0%, #B38938 60%, #8C6A27 100%);
    box-shadow:
        inset 0 10px 24px rgba(255,255,255,0.5),
        inset 0 -20px 32px rgba(26,21,48,0.38),
        0 28px 54px rgba(215,165,74,0.4),
        0 50px 90px rgba(26,21,48,0.25);
}

.puff-seal::after {
    content: 'VERDICT';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(22px, 3vw, 38px);
    letter-spacing: 0.18em;
    color: var(--ink-deep);
    text-shadow: 0 2px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(26,21,48,0.3);
}

.panel-facet.is-in .puff {
    animation: puff-pulse 1400ms var(--ease-out);
}

@keyframes puff-pulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */
.panel-colophon {
    color: var(--parchment);
}

.panel-colophon .panel-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.5vh, 36px);
}

.colophon-mark {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 92px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--parchment);
    text-shadow:
        0 2px 0 rgba(255,255,255,0.12),
        0 -1px 0 rgba(0,0,0,0.4),
        0 14px 28px rgba(107,63,160,0.4);
}

.colophon-mark .word-gabs { color: var(--parchment); }
.colophon-mark .word-review {
    background: linear-gradient(92deg, var(--aurora-mint) 0%, var(--aurora-cyan) 50%, var(--aurora-rose) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.colophon-mark .dot { color: var(--highlight-gold); }

.colophon-line {
    font-family: var(--font-prose);
    font-size: clamp(15px, 1.4vw, 19px);
    font-style: italic;
    color: var(--parchment);
    opacity: 0.82;
}

.colophon-line.colophon-small {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.58;
}

.colophon-flourish {
    width: clamp(220px, 30vw, 400px);
    height: auto;
    color: var(--highlight-gold);
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Progress rail
   -------------------------------------------------------------------------- */
.progress-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(26,21,48,0.08);
    z-index: 10;
}

.progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--aurora-violet) 0%, var(--aurora-rose) 50%, var(--aurora-cyan) 100%);
    transition: width 160ms linear;
}

/* --------------------------------------------------------------------------
   Enter animations for panels (IntersectionObserver)
   -------------------------------------------------------------------------- */
.panel {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}

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

/* Opening panel is visible from the start to accommodate its own entry
   sequence — class is added on DOMContentLoaded. */
.panel-opening {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .two-column {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .marginalia {
        position: static;
        border-left-width: 2px;
    }

    .facet-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "num"
            "hero"
            "body";
        text-align: left;
    }

    .facet-hero { justify-content: flex-start; }

    .botanical { display: none; }
}

@media (max-width: 560px) {
    .panel {
        padding: clamp(64px, 10vh, 100px) 20px;
    }

    .wordmark { font-size: clamp(44px, 14vw, 80px); }
    .facet-heading { font-size: clamp(44px, 16vw, 88px); }

    .puff-pill { width: 72vw; height: 28vw; }
    .puff-orb, .puff-prism, .puff-bead, .puff-seal { width: 58vw; height: 58vw; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .aurora-mesh .blob { animation: none; }
    .puff { animation: none !important; }
    .panel, .wordmark, .epigraph, .eyebrow, .scroll-hint, .footnote-badge {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mark::after { transition: none; }
    .bot-path { animation: none; stroke-dashoffset: 0; }
}