/* ============================================================
   gamelicensor.pro — under-burrow ledger-room
   Goblincore, candle-lit, hand-drawn. Eight-pigment palette.
   ============================================================ */

:root {
    --peat:        #1A1308;  /* peat-darkness */
    --root-loam:   #3B2814;  /* root-loam */
    --bark:        #5D4423;  /* bark-brown */
    --honey:       #A88B4E;  /* aged-honey */
    --parchment:   #E8DDC2;  /* parchment-cream */
    --parchment-2: #D5C39E;  /* deeper paper */
    --moss:        #A8C683;  /* moss-jade */
    --iron-red:    #7A2218;  /* iron-red */
    --candle:      #F2C46B;  /* candle-flame */
    --soot:        #4B3017;  /* soot-brown — title-shadow ink */

    --f-display: 'Caveat Brush', cursive;
    --f-script:  'Caveat', cursive;
    --f-body:    'Cormorant Garamond', serif;
    --f-plaque:  'IM Fell DW Pica SC', serif;
    --f-mono:    'JetBrains Mono', monospace;
}

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

html, body {
    background: var(--peat);
    color: var(--parchment);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.62;
    overflow-x: hidden;
}

body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M16 2 q-12 4 -14 16 q4 -1 9 -6 q4 -4 5 -10 q-1 -2 0 -2 z' fill='%235D4423' stroke='%231A1308' stroke-width='0.7'/><path d='M2 18 l3 -3' stroke='%231A1308' stroke-width='1.1'/></svg>") 2 18, auto;
    min-height: 100vh;
    position: relative;
}

img, svg { display: block; max-width: 100%; }

/* ===================== Halo (lantern light) ===================== */
.halo {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 6;
    background:
        radial-gradient(circle 320px at var(--lx, 90%) var(--ly, 12%),
            rgba(242,196,107,0.30) 0%,
            rgba(242,196,107,0.18) 28%,
            rgba(168,139,78,0.08) 52%,
            transparent 72%);
    mix-blend-mode: screen;
    transition: background 0.35s ease-out;
}

/* ===================== Ink canvas ===================== */
.ink-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 5;
    opacity: 0.62;
}

/* ===================== Cobweb overlay ===================== */
.cobweb-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    z-index: 2;
}

/* ===================== Root ribbon ===================== */
.root-ribbon {
    position: fixed;
    left: 0;
    top: 0;
    width: 120px;
    height: 100vh;
    z-index: 7;
    pointer-events: none;
}
.root-ribbon .root-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.root-ribbon .nodule {
    fill: var(--bark);
    stroke: var(--honey);
    stroke-width: 1.4;
    cursor: pointer;
    pointer-events: auto;
    transition: fill 0.4s, filter 0.4s, stroke 0.4s, r 0.3s;
}
.root-ribbon .nodule:hover { r: 11; }
.root-ribbon .nodule.active {
    fill: var(--moss);
    filter: drop-shadow(0 0 8px rgba(168,198,131,0.85));
    stroke: var(--candle);
}
.ribbon-numerals text {
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
    letter-spacing: 0.16em;
}

/* ===================== Lantern ===================== */
.lantern {
    position: fixed;
    top: -10px;
    right: 60px;
    width: 80px;
    height: 200px;
    z-index: 8;
    pointer-events: none;
    transform-origin: 50% 0%;
}
.lantern-pivot {
    transform-origin: 50% 0%;
    animation: pendulum 4.4s ease-in-out infinite;
    will-change: transform;
}
.lantern-flame {
    transform-origin: 40px 68px;
    animation: lamp-flame 1.7s ease-in-out infinite;
}
@keyframes pendulum {
    0%   { transform: rotate(-2.4deg); }
    50%  { transform: rotate(2.4deg); }
    100% { transform: rotate(-2.4deg); }
}
@keyframes lamp-flame {
    0%, 100% { transform: scale(1, 1); opacity: 0.85; }
    32%      { transform: scale(0.94, 1.08); opacity: 0.78; }
    64%      { transform: scale(1.05, 0.96); opacity: 0.92; }
}

/* ===================== Ambient toggle ===================== */
.ambient-toggle {
    position: fixed;
    bottom: 20px;
    left: 18px;
    z-index: 10;
    background: transparent;
    border: 1px dashed rgba(168,139,78,0.6);
    border-radius: 18px;
    padding: 10px 16px 10px 12px;
    color: var(--honey);
    font-family: var(--f-script);
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.ambient-toggle svg { width: 18px; height: 24px; }
.ambient-toggle:hover {
    color: var(--candle);
    border-color: var(--candle);
    background: rgba(242,196,107,0.06);
}
.ambient-toggle.lit {
    color: var(--candle);
    border-color: var(--candle);
    box-shadow: 0 0 22px rgba(242,196,107,0.25);
}

/* ===================== Ledger counter ===================== */
.ledger-counter {
    position: fixed;
    bottom: 18px;
    right: 22px;
    z-index: 10;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    color: var(--bark);
    background: rgba(232,221,194,0.92);
    padding: 8px 14px;
    border: 1px solid var(--honey);
    border-radius: 2px;
    letter-spacing: 0.1em;
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    box-shadow: 0 2px 0 rgba(0,0,0,0.4);
    transform: rotate(-1.4deg);
}
.lc-label { font-size: 0.62rem; }
.lc-num { font-family: var(--f-plaque); font-size: 1rem; color: var(--iron-red); }

/* ===================== Burrow main ===================== */
.burrow {
    position: relative;
    margin-left: 120px;
    z-index: 3;
}

.chamber {
    position: relative;
    padding: 6vh 6vw 6vh;
    overflow: hidden;
}

.chamber-num {
    font-family: var(--f-plaque);
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    color: var(--honey);
    margin-bottom: 12px;
}

.chamber-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    color: var(--parchment);
    letter-spacing: -0.005em;
    line-height: 1;
    margin-bottom: 18px;
    text-shadow:
        0 1px 0 var(--root-loam),
        0 0 22px rgba(150,93,40,0.22);
    transform: rotate(-0.7deg);
}

.chamber-blurb {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--parchment-2);
    max-width: 56ch;
    margin-bottom: 32px;
}

/* ===================== Margin notes (script) ===================== */
.margin-note {
    position: absolute;
    font-family: var(--f-script);
    font-size: 1.4rem;
    color: var(--honey);
    opacity: 0.85;
    transform: rotate(var(--rot, 0deg));
    pointer-events: none;
    z-index: 4;
    max-width: 240px;
    line-height: 1.05;
}
.mn-1 { top: 32%; right: 8vw; color: var(--moss); }
.mn-2 { bottom: 18%; left: 8vw; }
.mn-3 { top: 26%; right: 10vw; color: var(--candle); }
.mn-4 { bottom: 8%; right: 8vw; }
.mn-5 { top: 14%; left: 4vw; color: var(--moss); }
.mn-6 { top: 6%; right: 10vw; color: var(--iron-red); }

.annotation {
    font-family: var(--f-script);
    font-size: 1.2rem;
    color: var(--iron-red);
    transform: rotate(var(--rot, 0deg));
    margin: 6px 0 6px 14px;
    line-height: 1.1;
    opacity: 0.9;
}

/* ============================================================
   CHAMBER I — THE THRESHOLD
   ============================================================ */
.threshold {
    min-height: 110vh;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(168,139,78,0.18), transparent 60%),
        radial-gradient(ellipse at 50% 0%, rgba(168,198,131,0.06), transparent 50%),
        var(--peat);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 14vh;
}

.threshold-curtain {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14vh;
    background:
        repeating-linear-gradient(
            92deg,
            rgba(168,198,131,0.0) 0px,
            rgba(168,198,131,0.18) 6px,
            rgba(168,198,131,0.04) 14px,
            rgba(91,68,35,0.18) 22px),
        linear-gradient(180deg, rgba(26,19,8,1), rgba(26,19,8,0));
    filter: blur(0.4px);
    z-index: 1;
}

.threshold-candles {
    position: absolute;
    bottom: 6vh;
    left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    z-index: 2;
    pointer-events: none;
}
.threshold-candles .candle {
    width: 50px;
    height: 150px;
    transform-origin: 50% 100%;
}
.candle-a { transform: rotate(-1.7deg) translateY(8px); }
.candle-b { transform: rotate(0.4deg); }
.candle-c { transform: rotate(2.1deg) translateY(14px); }
.candle .flame {
    transform-origin: 20px 40px;
    animation: flicker 2.4s steps(7,end) infinite;
}
.candle-b .flame { animation-duration: 2.7s; animation-delay: -0.4s; }
.candle-c .flame { animation-duration: 2.1s; animation-delay: -1.3s; }
@keyframes flicker {
    0%, 100% { opacity: 1; transform: scaleY(1) translateX(0); }
    20%  { opacity: 0.78; transform: scaleY(0.94) translateX(-1px); }
    40%  { opacity: 0.94; transform: scaleY(1.06) translateX(0.5px); }
    60%  { opacity: 0.85; transform: scaleY(0.98) translateX(-0.4px); }
    80%  { opacity: 0.92; transform: scaleY(1.04) translateX(0.7px); }
}

.threshold-inner {
    position: relative;
    z-index: 3;
    max-width: 980px;
    padding: 0 6vw;
}

.dignifier {
    font-family: var(--f-plaque);
    font-size: 0.84rem;
    letter-spacing: 0.16em;
    color: var(--honey);
    margin-bottom: 18px;
    opacity: 0.92;
}

.wordmark {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(3.8rem, 9vw, 7.2rem);
    line-height: 0.92;
    letter-spacing: -0.005em;
    color: var(--parchment);
    text-shadow:
        0 1px 0 var(--root-loam),
        0 0 18px rgba(150,93,40,0.22),
        0 0 40px rgba(242,196,107,0.10);
    transform: rotate(-1.7deg);
    margin-bottom: 28px;
}
.wordmark span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotate(-3deg);
    animation: word-letter 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.wordmark .dot { color: var(--iron-red); }
@keyframes word-letter {
    to { opacity: 1; transform: translateY(0) rotate(0); }
}

.byline {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--parchment-2);
    line-height: 1.5;
    margin-bottom: 20px;
}

.threshold-flourish {
    width: 240px;
    height: 28px;
    margin: 0 auto;
}

.threshold-arrow {
    margin-top: 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.arrow-note {
    font-family: var(--f-script);
    font-size: 1.4rem;
    color: var(--honey);
}
.threshold-arrow svg {
    animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ============================================================
   CHAMBER II — THE READING-STUMP
   ============================================================ */
.reading-stump {
    min-height: 120vh;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(91,68,35,0.55), rgba(26,19,8,1) 80%),
        var(--peat);
    padding: 8vh 6vw 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.stump-wrapper {
    position: relative;
    width: min(90vw, 880px);
    margin: 30px auto 0;
}
.stump-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.4));
}
.rings .ring {
    transform-origin: center;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: ring-draw 1.6s ease-out forwards;
}
.rings .ring:nth-child(1)  { animation-delay: 1.44s; }
.rings .ring:nth-child(2)  { animation-delay: 1.32s; }
.rings .ring:nth-child(3)  { animation-delay: 1.20s; }
.rings .ring:nth-child(4)  { animation-delay: 1.08s; }
.rings .ring:nth-child(5)  { animation-delay: 0.96s; }
.rings .ring:nth-child(6)  { animation-delay: 0.84s; }
.rings .ring:nth-child(7)  { animation-delay: 0.72s; }
.rings .ring:nth-child(8)  { animation-delay: 0.60s; }
.rings .ring:nth-child(9)  { animation-delay: 0.48s; }
.rings .ring:nth-child(10) { animation-delay: 0.36s; }
.rings .ring:nth-child(11) { animation-delay: 0.24s; }
.rings .ring:nth-child(12) { animation-delay: 0.12s; }
.rings .ring:nth-child(13) { animation-delay: 0.06s; }
.rings .ring:nth-child(14) { animation-delay: 0s;    }
@keyframes ring-draw {
    to { stroke-dashoffset: 0; }
}
.beetle-svg {
    transform-origin: center;
    animation: beetle-scuttle 18s linear infinite;
    opacity: 0.85;
}
@keyframes beetle-scuttle {
    0%   { transform: translate(0, 0) rotate(0); opacity: 0.9; }
    14%  { transform: translate(80px, -30px) rotate(8deg); }
    28%  { transform: translate(160px, -10px) rotate(-4deg); }
    42%  { transform: translate(240px, 30px) rotate(12deg); }
    60%  { transform: translate(180px, 80px) rotate(-12deg); }
    78%  { transform: translate(60px, 60px) rotate(8deg); }
    90%  { transform: translate(0, 0) rotate(0); opacity: 0.9; }
    96%  { opacity: 0; }
    100% { transform: translate(0, 0); opacity: 0; }
}

.stump-prose {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    text-align: left;
    pointer-events: none;
}
.ring-line {
    font-family: var(--f-body);
    color: var(--parchment);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 6px 0;
    opacity: 0;
    transform: translateX(-10px);
    animation: ring-fade 700ms ease-out forwards;
    text-shadow: 0 0 8px rgba(26,19,8,0.85);
}
.ring-line.ring-1 { animation-delay: 1.7s; font-size: 1.05rem; }
.ring-line.ring-2 { animation-delay: 1.85s; }
.ring-line.ring-3 { animation-delay: 2.0s; }
.ring-line.ring-4 { animation-delay: 2.15s; }
.ring-line.ring-5 { animation-delay: 2.3s; font-style: italic; color: var(--honey); }
@keyframes ring-fade {
    to { opacity: 1; transform: translateX(0); }
}

.quill-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 12%;
    right: 10%;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quill-icon:hover { transform: rotate(-12deg) translateY(-3px); }

/* ============================================================
   CHAMBER III — THE SPICE-RACK
   ============================================================ */
.spice-rack {
    min-height: 140vh;
    background:
        linear-gradient(180deg, var(--peat), #261a0c 30%, #2d2010 70%, var(--peat));
    padding: 8vh 6vw 10vh;
}
.spice-shelves {
    position: relative;
    margin: 4vh auto 0;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px 18px;
    padding: 36px 24px;
    background:
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 144px,
            rgba(168,139,78,0.18) 144px,
            rgba(168,139,78,0.45) 148px,
            rgba(91,68,35,0.32) 152px,
            transparent 156px);
    border-top: 4px solid var(--bark);
    border-bottom: 4px solid var(--bark);
}

.jar {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.5;
    cursor: pointer;
    transform: rotate(var(--tilt, 0deg)) translateY(var(--jitter, 0px));
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s;
}
.jar::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 1px;
    height: 14px;
    border-left: 1px dotted rgba(168,198,131,0.6);
    transform: translateX(-50%);
}
.jar:hover {
    transform: rotate(var(--tilt, 0deg)) translateY(calc(var(--jitter, 0px) - 6px));
    filter: brightness(1.18);
    z-index: 4;
}
.jar:hover .jar-label-tooltip {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-1.4deg);
}
.jar-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.jar-label-tooltip {
    position: absolute;
    top: 105%;
    left: 50%;
    transform: translate(-50%, 8px) rotate(-2.6deg);
    background: var(--parchment);
    color: var(--bark);
    font-family: var(--f-body);
    font-size: 0.84rem;
    line-height: 1.3;
    padding: 8px 10px;
    width: 168px;
    border: 1px solid var(--honey);
    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s, transform 0.32s;
    z-index: 6;
}
.jar-label-tooltip strong {
    display: block;
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--iron-red);
    margin-bottom: 2px;
}
.jar-label-tooltip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: var(--honey);
}

/* ============================================================
   CHAMBER IV — THE LEDGER-SPREAD
   ============================================================ */
.ledger-spread {
    min-height: 160vh;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(91,68,35,0.4), transparent 60%),
        var(--peat);
    padding: 8vh 4vw 8vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ledger-page {
    position: relative;
    width: min(94vw, 1100px);
    margin: 32px auto 0;
    background: var(--parchment);
    background-image:
        radial-gradient(ellipse at top left, rgba(122,34,24,0.08), transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(91,68,35,0.18), transparent 50%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.92' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.42'/></svg>");
    color: var(--bark);
    font-family: var(--f-body);
    border: 1px solid var(--honey);
    box-shadow:
        inset 0 0 60px rgba(91,68,35,0.2),
        0 18px 40px rgba(0,0,0,0.5);
    padding: 60px 50px 80px;
    filter: hue-rotate(-3deg) sepia(0.06);
    clip-path: polygon(
        0% 1%, 2% 0%, 100% 0.5%, 99% 99%, 1% 100%, 0% 50%
    );
}
.ledger-page::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid var(--honey);
    opacity: 0.45;
    pointer-events: none;
}
.ledger-page::after {
    content: "the burrow ledger — chamber IV — folio 0094";
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-plaque);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: var(--honey);
}
.ledger-cols {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    margin-top: 18px;
}
.ledger-col {
    padding: 12px 16px;
    color: var(--bark);
    font-family: var(--f-body);
    font-size: 1.02rem;
    line-height: 1.62;
}
.ledger-col p { margin-bottom: 14px; max-width: 56ch; }
.ledger-col em { color: var(--iron-red); font-style: italic; }
.dropcap span {
    font-family: var(--f-display);
    font-size: 3rem;
    color: var(--iron-red);
    float: left;
    line-height: 0.85;
    padding: 4px 6px 0 0;
}
.ledger-gutter {
    position: relative;
    border-left: 1px solid var(--bark);
    border-right: 1px solid var(--bark);
}
.marg {
    position: absolute;
    width: 38px;
    height: 38px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    color: var(--bark);
    opacity: 0.78;
}
.marg[viewBox*="60 36"] { height: 22px; }
.marg[viewBox*="40 60"] { width: 28px; height: 42px; }
.marg[viewBox*="80 50"] { width: 56px; height: 36px; }
.marg[viewBox*="80 100"] { width: 50px; height: 64px; }
.proprietor-label {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    font-family: var(--f-script);
    font-size: 0.92rem;
    color: var(--honey);
    white-space: nowrap;
}
.ledger-figures {
    position: absolute;
    bottom: 28px;
    right: 36px;
    display: flex;
    gap: 14px;
}
.figure {
    font-family: var(--f-mono);
    font-size: 0.74rem;
    color: var(--bark);
    letter-spacing: 0.06em;
}

/* ============================================================
   CHAMBER V — THE DEWDROP CLEARING
   ============================================================ */
.dewdrop-clearing {
    min-height: 140vh;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(168,198,131,0.10), transparent 60%),
        radial-gradient(ellipse at 50% 80%, rgba(91,68,35,0.40), transparent 70%),
        var(--peat);
    padding: 8vh 6vw 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dew-ring {
    position: relative;
    width: min(90vw, 760px);
    height: min(90vw, 760px);
    max-height: 760px;
    margin: 4vh auto 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(168,198,131,0.06), transparent 60%);
}
.dew-ring::before {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px dashed rgba(168,139,78,0.4);
    border-radius: 50%;
}
.dewdrop {
    position: absolute;
    width: 130px;
    height: 170px;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    cursor: pointer;
    transition: filter 0.3s;
}
.dewdrop[data-i="1"] { transform: translate(-50%, -50%) translate(0px, -260px); }
.dewdrop[data-i="2"] { transform: translate(-50%, -50%) translate(225px, -130px); }
.dewdrop[data-i="3"] { transform: translate(-50%, -50%) translate(225px, 130px); }
.dewdrop[data-i="4"] { transform: translate(-50%, -50%) translate(0px, 260px); }
.dewdrop[data-i="5"] { transform: translate(-50%, -50%) translate(-225px, 130px); }
.dewdrop[data-i="6"] { transform: translate(-50%, -50%) translate(-225px, -130px); }

.dew-shape svg { overflow: visible; width: 100%; height: 100%; }
.dew-path {
    fill: var(--moss);
    stroke: rgba(91,68,35,0.6);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 14px rgba(168,198,131,0.6));
    transition: filter 0.4s;
}
.dewdrop:hover .dew-path { filter: drop-shadow(0 0 24px rgba(168,198,131,0.9)) brightness(1.12); }
.dew-icon { transform-origin: center; opacity: 0.85; }
.dew-shape::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 22%;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,250,220,0.85), transparent 70%);
    pointer-events: none;
}
.dewdrop.bursting .dew-path {
    animation: dew-burst 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes dew-burst {
    0%   { transform: scale(1) rotate(0); opacity: 1; }
    40%  { transform: scale(1.15) rotate(-4deg); opacity: 0.85; }
    100% { transform: scale(0) rotate(8deg); opacity: 0; }
}
.dewdrop .splash {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.dewdrop .splash circle {
    fill: var(--moss);
    opacity: 0.85;
}

.lookbook-spread {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(26,19,8,0.78);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 5vw;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.lookbook-spread.open { opacity: 1; }
.lookbook-spread[hidden] { display: none; }
.lookbook-inner {
    background: var(--parchment);
    color: var(--bark);
    max-width: 760px;
    width: 100%;
    padding: 60px 60px 70px;
    border: 1px solid var(--honey);
    box-shadow: 0 30px 60px rgba(0,0,0,0.7);
    transform: rotate(-0.6deg) translateY(20px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
    text-align: left;
    position: relative;
}
.lookbook-spread.open .lookbook-inner {
    transform: rotate(-0.6deg) translateY(0);
    opacity: 1;
}
.lb-prelude {
    font-family: var(--f-plaque);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: var(--honey);
    text-transform: uppercase;
}
.lb-title {
    font-family: var(--f-display);
    font-size: 3rem;
    line-height: 1;
    margin: 14px 0 18px;
    color: var(--iron-red);
    transform: rotate(-1.2deg);
}
.lb-text {
    font-family: var(--f-body);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 56ch;
    margin-bottom: 24px;
}
.lb-stamp {
    font-family: var(--f-script);
    font-size: 1.2rem;
    color: var(--bark);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: 0;
    font-family: var(--f-script);
    color: var(--iron-red);
    font-size: 1.1rem;
    cursor: pointer;
    transform: rotate(-2deg);
}

/* ============================================================
   CHAMBER VI — THE TRADE-BENCH
   ============================================================ */
.trade-bench {
    min-height: 120vh;
    background:
        linear-gradient(180deg, var(--peat) 0%, #2a1a0c 40%, #3b2814 100%);
    padding: 8vh 6vw 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bench-surface {
    position: relative;
    width: min(94vw, 1080px);
    margin: 32px auto 0;
    padding: 60px 40px 80px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(91,68,35,0.3) 0,
            rgba(91,68,35,0.3) 4px,
            rgba(59,40,20,0.5) 4px,
            rgba(59,40,20,0.5) 60px),
        var(--root-loam);
    border: 2px solid #2a1a0a;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.contract-parchment {
    position: relative;
    width: 70%;
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 48px 56px;
    background:
        radial-gradient(ellipse at bottom left, rgba(122,34,24,0.06), transparent 30%),
        linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
    color: var(--bark);
    font-family: var(--f-body);
    box-shadow:
        0 4px 0 rgba(0,0,0,0.45),
        0 28px 50px rgba(0,0,0,0.5);
    transform: rotate(-1.4deg);
    clip-path: polygon(
        2% 0%, 14% 1%, 30% 0%, 48% 1.2%, 64% 0%, 82% 1.8%, 98% 0.4%,
        100% 16%, 99% 32%, 100% 50%, 99% 68%, 100% 84%, 98% 100%,
        82% 99%, 64% 100%, 48% 98.6%, 30% 99.8%, 14% 99.2%, 2% 100%,
        0.5% 84%, 0% 68%, 1% 50%, 0.4% 32%, 1.2% 16%
    );
}
.awl {
    position: absolute;
    top: -32px;
    right: 56px;
    width: 30px;
    height: 90px;
    transform: rotate(8deg);
    z-index: 4;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6));
    transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.awl.stabbed { top: -8px; }

.contract-heading {
    font-family: var(--f-display);
    font-size: 2.4rem;
    color: var(--iron-red);
    text-align: center;
    margin-bottom: 22px;
    transform: rotate(-0.6deg);
}
.contract-body {
    font-size: 1.05rem;
    line-height: 1.62;
    margin-bottom: 14px;
    max-width: 56ch;
}
.contract-body em { color: var(--iron-red); font-style: italic; }
.circle-clause { position: relative; padding: 0 4px; font-weight: 500; }

.contract-figures {
    margin-top: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    border-top: 1px solid var(--bark);
    padding-top: 14px;
}
.cf-label {
    font-family: var(--f-mono);
    font-size: 0.74rem;
    color: var(--bark);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.cf-value {
    font-family: var(--f-script);
    font-size: 1.1rem;
    color: var(--bark);
}

.contract-annot {
    position: absolute;
    top: 12px;
    left: 32px;
    color: var(--iron-red);
}

.seal {
    position: absolute;
    bottom: 38px;
    right: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: rotate(-6deg);
}
.seal svg { filter: drop-shadow(0 1px 0 rgba(122,34,24,0.6)); }
.seal-label {
    font-family: var(--f-script);
    color: var(--iron-red);
    font-size: 1rem;
}
.water-stain {
    position: absolute;
    bottom: 36px;
    left: 60px;
    width: 120px;
    height: 70px;
    background: radial-gradient(ellipse, rgba(122,34,24,0.10), transparent 70%);
    pointer-events: none;
}

.circle-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.circle-path {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 1.4s ease-in-out;
}
.contract-parchment.activated .circle-path { stroke-dashoffset: 0; }

/* ============================================================
   CHAMBER VII — THE WHISTLE-TUBE
   ============================================================ */
.whistle-tube {
    min-height: 90vh;
    background:
        radial-gradient(ellipse at 50% 80%, rgba(168,139,78,0.12), transparent 60%),
        var(--peat);
    padding: 8vh 6vw 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tube-frame {
    position: relative;
    width: min(94vw, 720px);
    margin: 30px auto 0;
}
.tube-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.6));
}
.whistle-form {
    position: absolute;
    top: 14%;
    left: 24%;
    right: 24%;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 18px 18px;
}
.form-prelude {
    font-family: var(--f-script);
    color: var(--candle);
    font-size: 1.4rem;
    margin-bottom: 6px;
    text-align: center;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.field span {
    font-family: var(--f-plaque);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--honey);
    text-transform: uppercase;
}
.field input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(168,139,78,0.6);
    color: var(--parchment);
    font-family: var(--f-script);
    font-size: 1.2rem;
    padding: 6px 4px;
    outline: none;
    transition: border-color 0.3s;
}
.field input::placeholder {
    color: rgba(232,221,194,0.42);
    font-style: italic;
}
.field input:hover { border-bottom-color: var(--candle); }

.send-btn {
    margin-top: 12px;
    background: transparent;
    border: 1px dashed var(--candle);
    color: var(--candle);
    font-family: var(--f-script);
    font-size: 1.4rem;
    padding: 10px 20px;
    cursor: pointer;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.send-btn:hover {
    background: rgba(242,196,107,0.10);
    transform: translateY(-2px) rotate(-1.2deg);
}
.send-arrow { display: inline-block; transition: transform 0.6s; }
.send-btn:hover .send-arrow { transform: translateY(-3px); }

.scroll-message {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
}
.scroll-message[hidden] { display: none; }
.scroll-message.flying {
    animation: scroll-fly 800ms ease-in forwards;
    opacity: 1;
}
@keyframes scroll-fly {
    0%   { transform: translate(-50%, 0) rotate(0); opacity: 1; }
    100% { transform: translate(-50%, -680px) rotate(-12deg); opacity: 0; }
}
.thank-you {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    font-family: var(--f-script);
    font-size: 1.4rem;
    color: var(--candle);
    opacity: 0;
    transition: opacity 0.6s;
}
.thank-you[hidden] { display: none; }
.thank-you.visible { opacity: 1; }

.burrow-footer {
    margin-top: 4vh;
    text-align: center;
    color: var(--honey);
    font-family: var(--f-body);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.burrow-footer .copy {
    font-family: var(--f-plaque);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: var(--bark);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    .root-ribbon { width: 56px; }
    .burrow { margin-left: 56px; }
    .lantern { right: 18px; }
    .stump-prose { width: 80%; font-size: 0.9rem; }
    .ledger-cols { grid-template-columns: 1fr; gap: 24px; }
    .ledger-gutter { display: none; }
    .ledger-page { padding: 40px 22px 60px; }
    .spice-shelves { grid-template-columns: repeat(4, 1fr); }
    .dew-ring { transform: scale(0.78); transform-origin: center; }
    .contract-parchment { width: 90%; padding: 36px 24px; }
    .whistle-form { left: 14%; right: 14%; }
    .ambient-toggle { left: auto; right: 14px; bottom: 70px; }
    .ledger-counter { bottom: 14px; right: 14px; }
}
@media (max-width: 560px) {
    .spice-shelves { grid-template-columns: repeat(3, 1fr); }
    .wordmark { font-size: 3.2rem; }
    .chamber-title { font-size: 2.4rem; }
}

/* ============================================================
   IntersectionObserver chamber-state classes
   ============================================================ */
.chamber.visible .chamber-num { animation: fade-in 600ms ease-out forwards; }
.chamber.visible .chamber-title { animation: title-settle 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes title-settle {
    0%   { opacity: 0; transform: rotate(-3deg) translateY(20px); }
    60%  { opacity: 1; transform: rotate(0.4deg) translateY(-3px); }
    100% { opacity: 1; transform: rotate(-0.7deg) translateY(0); }
}