/* ============================================================
   domain — The Atrium of Domain
   Blobitecture · light-academia · jewel-tones
   ============================================================ */

/* ---------- Custom properties ---------- */
:root {
    /* Cabinet of Jewels palette */
    --vellum: #F4ECD8;
    --vellum-deep: #E8DCBE;
    --ink: #2A1E1A;
    --ink-soft: #4A3A30;
    --amethyst: #5B3B7A;
    --emerald: #2D5A3D;
    --citrine: #C49A2C;
    --oxblood: #6B1E2C;
    --sapphire: #1E3A6B;
    --topaz: #B07A2E;
    --rose-quartz: #C89DA3;
    --midnight: #0F1A2E;
    --gold-leaf: #D9B45B;
    --lapis: #1B3F8B;

    /* Easings & rhythm */
    --ease-vellum: cubic-bezier(0.32, 0.04, 0.18, 0.98);
    --dur-slow: 740ms;
    --dur-mid: 480ms;
    --dur-tap: 320ms;

    /* Type stack */
    --display: 'Cormorant Garamond', 'EB Garamond', 'Lora', serif;
    --body: 'EB Garamond', 'Cormorant Garamond', 'Lora', serif;
    --gothic: 'UnifrakturMaguntia', 'Cormorant Garamond', serif;
    --smallcaps: 'IM Fell English SC', 'EB Garamond', serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--vellum);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.74;
    font-variation-settings: 'opsz' 11;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    overflow-x: hidden;
}

body {
    /* No scroll-snap. The reader's cadence is their own. */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="22" viewBox="0 0 20 22"><path d="M2 2 L2 17 L7 13 L10 19 L13 18 L10 12 L17 12 Z" fill="%232A1E1A" stroke="%23D9B45B" stroke-width="0.6"/></svg>') 2 2, default;
    min-height: 100vh;
    position: relative;
}

a { color: var(--oxblood); text-decoration: underline wavy var(--oxblood); text-underline-offset: 3px; }
em { font-style: italic; }

/* SVG defs container */
.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ---------- Vellum ground ---------- */
.vellum-ground {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 30% 25%, #F8F0DD 0%, var(--vellum) 65%, var(--vellum-deep) 100%);
}

.vellum-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.45;
    mix-blend-mode: multiply;
}

.foxing-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.marginalia {
    position: fixed;
    width: 200px;
    height: 80px;
    pointer-events: none;
    opacity: 0.55;
    z-index: 1;
}
.marginalia-1 { top: 8vh; right: 2vw; transform: rotate(-6deg); }
.marginalia-2 { bottom: 14vh; left: 2vw; transform: rotate(8deg); }
.marginalia-3 { top: 48vh; right: 1.5vw; transform: rotate(-3deg); }

/* ---------- Cursor trail blob ---------- */
.cursor-trail {
    position: fixed;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 9000;
    background: radial-gradient(circle, rgba(217,180,91,0.55), rgba(217,180,91,0));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 240ms var(--ease-vellum);
    mix-blend-mode: multiply;
    will-change: transform;
}

/* ---------- Traveling pebble ---------- */
.traveling-pebble {
    position: fixed;
    left: 28px;
    top: 50vh;
    width: 6px;
    height: 6px;
    background: var(--amethyst);
    z-index: 8000;
    pointer-events: none;
    transition: background 1200ms var(--ease-vellum), width var(--dur-slow) var(--ease-vellum), height var(--dur-slow) var(--ease-vellum), top 320ms var(--ease-vellum);
    box-shadow: 0 0 8px rgba(217,180,91,0.55);
    /* Biomorphic blob shape via clip-path */
    clip-path: path('M 3,0 C 4.6,0 6,1.5 6,3.2 C 6,4.8 4.4,6 3,6 C 1.4,6 0,4.6 0,3 C 0,1.4 1.4,0 3,0 Z');
}

/* ---------- Chamber stage ---------- */
.chamber-stage {
    position: relative;
    z-index: 2;
    transform-origin: 50% 50%;
    transition: transform 280ms var(--ease-vellum);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .chamber-stage { transition: transform 0ms; }
}

/* ---------- Chamber base ---------- */
.chamber {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 4vw;
    overflow: visible;
}

.chamber-shell {
    position: relative;
    width: 92vw;
    max-width: 1400px;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    filter: drop-shadow(0 24px 60px rgba(15,26,46,0.18));
    opacity: 0;
    transform: scale(0.97);
    transition: opacity var(--dur-slow) var(--ease-vellum), transform var(--dur-slow) var(--ease-vellum);
}

.chamber.in-view .blob {
    opacity: 1;
    transform: scale(1);
}

.cartouche {
    position: absolute;
    width: 96px;
    height: 48px;
    z-index: 4;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.chamber-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    letter-spacing: -0.012em;
    line-height: 0.96;
    color: var(--ink);
    margin: 0 0 1.6rem;
    text-align: center;
    z-index: 3;
}

.chamber-title-light { color: var(--vellum); }

.chamber-lede {
    font-family: var(--body);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: center;
    max-width: 56ch;
    margin: 0 auto 2.2rem;
    color: var(--ink);
    z-index: 3;
}

.chamber-lede-light { color: var(--vellum); }

/* ============================================================
   §I — The Vestibule
   ============================================================ */
.chamber-i .chamber-shell { justify-content: flex-end; align-items: flex-end; padding-bottom: 8vh; padding-right: 6vw; }

.blob-i { width: 78%; height: 88%; left: 22%; top: 8%; }

.astrolabe {
    position: absolute;
    width: clamp(160px, 22vw, 280px);
    height: clamp(160px, 22vw, 280px);
    left: 6vw;
    top: 12vh;
    z-index: 3;
    opacity: 0.85;
}

.astrolabe-rings {
    transform-origin: 50% 50%;
    animation: astrolabe-spin 240s linear infinite;
}
.astrolabe-ring-outer { transform-origin: 100px 100px; animation: astrolabe-spin 360s linear infinite reverse; }
.astrolabe-ring-mid { transform-origin: 100px 100px; animation: astrolabe-spin 180s linear infinite; }
.astrolabe-ring-inner { transform-origin: 100px 100px; animation: astrolabe-spin 120s linear infinite reverse; }

@keyframes astrolabe-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .astrolabe-rings, .astrolabe-ring-outer, .astrolabe-ring-mid, .astrolabe-ring-inner { animation: none; }
}

.content-i {
    position: relative;
    z-index: 5;
    max-width: 580px;
    text-align: left;
    color: var(--vellum);
    padding: 2rem 3rem;
}

.chamber-eyebrow {
    font-family: var(--smallcaps);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--gold-leaf);
    margin: 0 0 1.4rem;
    text-transform: uppercase;
}

.wordmark {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(3.4rem, 8.4vw, 7.2rem);
    letter-spacing: -0.012em;
    line-height: 0.94;
    color: var(--vellum);
    margin: 0 0 1.6rem;
}

.wordmark em {
    font-style: italic;
    background: linear-gradient(110deg, #F4ECD8 0%, #FFFFEE 50%, #F4ECD8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vestibule-blurb {
    font-family: var(--body);
    font-size: 1.06rem;
    line-height: 1.78;
    color: rgba(244,236,216,0.92);
    max-width: 44ch;
    margin: 0 0 2rem;
}

.manicule-btn {
    background: transparent;
    border: 1px solid rgba(217,180,91,0.5);
    color: var(--gold-leaf);
    font-family: var(--smallcaps);
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    padding: 0.7rem 1.3rem;
    cursor: pointer;
    transition: background var(--dur-tap) var(--ease-vellum), color var(--dur-tap) var(--ease-vellum), transform var(--dur-tap) var(--ease-vellum);
    /* No border-radius — but no chamber shape either; this is permitted via SVG-only rule, button uses subtle pebble shape: */
    clip-path: path('M 12,0 C 80,-2 180,0 220,4 C 240,12 240,28 220,36 C 180,40 80,42 12,40 C 0,32 0,8 12,0 Z');
    width: 240px;
    height: 40px;
}

.manicule-btn:hover {
    background: rgba(217,180,91,0.08);
    transform: scale(1.02);
}

.manicule {
    font-size: 1rem;
    margin-right: 0.6rem;
    color: var(--gold-leaf);
}

.hidden-toc {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(15,26,46,0.4);
    color: var(--vellum);
    font-family: var(--smallcaps);
    font-size: 0.86rem;
    border-left: 1px solid rgba(217,180,91,0.4);
}
.hidden-toc ol { margin: 0; padding-left: 1.2rem; }
.hidden-toc li { margin: 0.3rem 0; }
.hidden-toc a { color: var(--gold-leaf); text-decoration: none; }
.hidden-toc a:hover { color: #F4DD9A; }

/* ============================================================
   §II — The Etymology Cabinet
   ============================================================ */
.chamber-ii .chamber-shell { flex-direction: column; }
.chamber-ii .chamber-title { color: var(--ink); margin-top: 6vh; position: relative; z-index: 5; }

.blob-ii { width: 100%; height: 100%; }

.trefoil-emerald, .trefoil-citrine, .trefoil-oxblood {
    transform-origin: center;
    transition: transform var(--dur-slow) var(--ease-vellum);
}

.etymology-trio {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
    width: 100%;
    margin-top: 2rem;
}

.etym {
    padding: 2rem 2.2rem;
    color: var(--vellum);
    transition: transform var(--dur-slow) var(--ease-vellum), padding var(--dur-slow) var(--ease-vellum);
    cursor: default;
    /* Inside curved blob walls: clip-path with elliptical SVG paths */
    clip-path: ellipse(78% 86% at 50% 50%);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.etym-feudal { color: var(--vellum); }
.etym-math { color: var(--ink); }
.etym-internet { color: var(--vellum); }

.etym-marker {
    font-family: var(--smallcaps);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    margin: 0 0 0.8rem;
    opacity: 0.8;
}

.etym-head {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 2.2rem;
    line-height: 1;
    margin: 0 0 1rem;
}

.etym-body {
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
    hyphens: auto;
}

.etym:hover { transform: scale(1.04); }
.etymology-trio:hover .etym:not(:hover) { transform: scale(0.97); }

/* ============================================================
   §III — The Atlas of Demesnes
   ============================================================ */
.chamber-iii .chamber-shell { flex-direction: column; padding: 6vh 0; }
.chamber-iii .chamber-title { margin-top: 4vh; }

.blob-iii { width: 100%; height: 100%; }

.atlas {
    position: relative;
    z-index: 5;
    width: 78%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
}

.continent {
    cursor: default;
    transition: transform var(--dur-slow) var(--ease-vellum);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.continent:hover { transform: scale(1.04); }

.scroll-tooltip {
    pointer-events: none;
    transition: opacity var(--dur-mid) var(--ease-vellum);
}

/* ============================================================
   §IV — The Reading-Room
   ============================================================ */
.chamber-iv .chamber-shell { padding: 6vh 4vw; }

.blob-iv { width: 100%; height: 100%; }

.reading-spread {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3vw;
    align-items: start;
    color: var(--vellum);
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 3rem;
}

.illuminated-wrap {
    position: relative;
    width: 200px;
}

.illuminated-D {
    width: 200px;
    height: 240px;
    position: relative;
}

.capital-d-path {
    transition: stroke-dashoffset 2400ms var(--ease-vellum);
}

.chamber.drawn .capital-d-path { stroke-dashoffset: 0; }

.foil-sheen {
    -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 48%, #000 52%, transparent 70%);
            mask-image: linear-gradient(110deg, transparent 30%, #000 48%, #000 52%, transparent 70%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: -50% 0%;
            mask-position: -50% 0%;
    opacity: 0;
}
.chamber.drawn .foil-sheen {
    opacity: 0.55;
    animation: foil-sheen 9s linear infinite;
}

@keyframes foil-sheen {
    0%   { -webkit-mask-position: -150% 0%;        mask-position: -150% 0%; }
    100% { -webkit-mask-position:  150% 0%;        mask-position:  150% 0%; }
}

.reading-text {
    font-family: var(--body);
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--vellum);
    text-align: justify;
    hyphens: auto;
    max-width: 60ch;
}

.reading-para {
    margin: 0 0 1.4rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-vellum), transform var(--dur-slow) var(--ease-vellum);
}

.chamber-iv.in-view .reading-para:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.chamber-iv.in-view .reading-para:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.chamber-iv.in-view .reading-para:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 720ms; }

.reading-para em { color: #F4DD9A; }

.dropcap-spacer { display: none; }

/* ============================================================
   §V — The Mathematical Domain
   ============================================================ */
.chamber-v .chamber-shell { flex-direction: column; padding: 6vh 4vw; }

.blob-v { width: 100%; height: 100%; }

.chamber-v .chamber-title { color: var(--ink); margin-top: 4vh; }

.math-plate {
    position: relative;
    z-index: 5;
    width: min(720px, 88%);
    height: auto;
    margin: 0 auto;
    background: rgba(244,236,216,0.4);
    /* No border-radius. Use clip-path soft pebble. */
    clip-path: path('M 40,0 C 200,-4 600,-2 760,4 C 800,40 800,440 760,476 C 600,482 200,484 40,478 C 0,440 0,40 40,0 Z');
    padding: 1rem;
}

.function-curve {
    transition: stroke-dashoffset 3200ms var(--ease-vellum);
}

.chamber.drawn .function-curve { stroke-dashoffset: 0; }

.domain-clip { transition: width var(--dur-slow) var(--ease-vellum); }

.domain-restrictions {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    margin-top: 2rem;
}

.pebble-btn {
    background: rgba(244,236,216,0.6);
    border: 1px solid rgba(42,30,26,0.4);
    color: var(--ink);
    font-family: var(--smallcaps);
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: transform var(--dur-slow) var(--ease-vellum), background var(--dur-slow) var(--ease-vellum), border-color var(--dur-slow) var(--ease-vellum);
    /* Pebble shape via SVG path clip — no border-radius */
    clip-path: path('M 12,0 C 60,-2 140,0 168,4 C 184,12 184,28 168,36 C 140,40 60,42 12,40 C 0,32 0,8 12,0 Z');
    width: 180px;
    height: 40px;
}

.pebble-btn:hover {
    background: rgba(244,236,216,0.95);
    transform: scale(1.06);
    border-color: var(--oxblood);
}

.pebble-btn.active {
    background: var(--oxblood);
    color: var(--vellum);
    border-color: var(--oxblood);
}

/* ============================================================
   §VI — The Coda
   ============================================================ */
.chamber-vi { min-height: 100vh; }
.chamber-vi .chamber-shell { width: 88vw; max-width: 1100px; min-height: 86vh; }

.blob-vi { width: 100%; height: 100%; }

.coda-content {
    position: relative;
    z-index: 5;
    text-align: center;
    color: var(--vellum);
    max-width: 60ch;
    padding: 2rem;
}

.coda-quote {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.4;
    color: var(--vellum);
    margin: 0 0 2rem;
    letter-spacing: -0.008em;
}

.coda-attrib {
    font-family: var(--smallcaps);
    font-size: 0.86rem;
    letter-spacing: 0.18em;
    color: var(--gold-leaf);
    margin: 0 0 4rem;
}

.coda-end {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.2rem;
    color: rgba(244,236,216,0.6);
    letter-spacing: 0.4em;
    margin: 0;
}

/* ============================================================
   Threshold tunnel-shadow effect (between chambers)
   ============================================================ */
.threshold-shadow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 7000;
    background: rgba(15,26,46,0);
    transition: background 740ms var(--ease-vellum);
}
.threshold-shadow.active { background: rgba(15,26,46,0.08); }

/* Hairline gold-leaf flourish across threshold */
.threshold-flourish {
    position: fixed;
    left: 0;
    width: 100vw;
    height: 2px;
    pointer-events: none;
    z-index: 7100;
    opacity: 0;
}

/* ============================================================
   Responsive — narrower viewports
   ============================================================ */
@media (max-width: 900px) {
    .chamber-shell { width: 96vw; min-height: 90vh; }
    .etymology-trio { grid-template-columns: 1fr; gap: 1.4rem; }
    .etym { min-height: 200px; padding: 1.4rem 1.6rem; }
    .reading-spread { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem; }
    .illuminated-wrap { width: 160px; margin: 0 auto; }
    .illuminated-D { width: 160px; height: 192px; }
    .astrolabe { left: 4vw; top: 4vh; width: 130px; height: 130px; }
    .content-i { padding: 1.4rem 1.4rem; }
    .domain-restrictions { flex-direction: column; align-items: center; }
}

/* Hide marginalia on narrow screens */
@media (max-width: 600px) {
    .marginalia { display: none; }
    .traveling-pebble { display: none; }
}