/* gabs.quest — goblincore gossip burrow */

:root {
    --loam-black: #1a1208;
    --burnt-umber: #3a2e1c;
    --butterfat: #c5b18a;
    --tannin-ink: #5e3a14;
    --moss-lichen: #7a8c4a;
    --toadstool-red: #b8431f;
    --vellum-highlight: #d6c8a8;
    --moss-deep: #5d6a36;
    --moss-margin: 36px;
}

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

html, body {
    background: var(--loam-black);
    color: var(--butterfat);
    font-family: 'Sorts Mill Goudy', 'Lora', Georgia, serif;
    font-size: 17px;
    line-height: 1.68;
    overflow-x: hidden;
}

body {
    padding: var(--moss-margin);
    min-height: 100vh;
    background-color: var(--loam-black);
    background-image:
        radial-gradient(ellipse at 12% 8%, rgba(214,200,168,0.04) 0%, transparent 35%),
        radial-gradient(ellipse at 88% 50%, rgba(122,140,74,0.03) 0%, transparent 50%);
}

/* Vellum/charcoal noise texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.15;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 23% 17%, rgba(0,0,0,0.4) 0%, transparent 0.5%),
        radial-gradient(circle at 71% 43%, rgba(0,0,0,0.3) 0%, transparent 0.4%),
        radial-gradient(circle at 38% 71%, rgba(0,0,0,0.5) 0%, transparent 0.45%),
        radial-gradient(circle at 89% 12%, rgba(0,0,0,0.35) 0%, transparent 0.5%),
        radial-gradient(circle at 11% 88%, rgba(0,0,0,0.4) 0%, transparent 0.4%),
        radial-gradient(circle at 56% 91%, rgba(0,0,0,0.3) 0%, transparent 0.5%);
    background-size: 280px 280px, 220px 220px, 340px 340px, 200px 200px, 300px 300px, 240px 240px;
}

/* MOSS BORDER FRAME */
.moss-frame {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    border: var(--moss-margin) solid transparent;
    border-image-slice: 18;
    border-image-repeat: round;
    animation: moss-sway 9s ease-in-out infinite;
}

.moss-tile {
    position: fixed;
    pointer-events: none;
}

.moss-frame .moss-tile {
    display: none;
}

/* Use the SVG via background to render a full-frame border */
.moss-frame {
    background:
        linear-gradient(var(--loam-black), var(--loam-black)) content-box content-box,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'><defs><pattern id='m' x='0' y='0' width='200' height='36' patternUnits='userSpaceOnUse'><path d='M0,18 Q10,8 20,18 T40,18 T60,18 T80,18 T100,18 T120,18 T140,18 T160,18 T180,18 T200,18' fill='none' stroke='%237a8c4a' stroke-width='1.4'/><circle cx='14' cy='14' r='3.2' fill='%237a8c4a'/><circle cx='34' cy='20' r='2.6' fill='%235d6a36'/><circle cx='56' cy='12' r='3.6' fill='%237a8c4a'/><circle cx='78' cy='22' r='2.8' fill='%235d6a36'/><circle cx='102' cy='14' r='3.0' fill='%237a8c4a'/><circle cx='124' cy='20' r='2.4' fill='%235d6a36'/><circle cx='148' cy='12' r='3.4' fill='%237a8c4a'/><circle cx='172' cy='22' r='2.7' fill='%235d6a36'/><ellipse cx='92' cy='8' rx='3.4' ry='2' fill='%23b8431f'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23m)'/></svg>") 0 0 / 200px 36px repeat-x;
    background-clip: border-box;
    padding: var(--moss-margin);
}

/* Simpler: draw moss as four absolute strips */
.moss-frame {
    background: none;
    padding: 0;
    border: none;
}
.moss-frame::before,
.moss-frame::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: var(--moss-margin);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 36' preserveAspectRatio='none'><path d='M0,18 Q10,8 20,18 T40,18 T60,18 T80,18 T100,18 T120,18 T140,18 T160,18 T180,18 T200,18' fill='none' stroke='%237a8c4a' stroke-width='1.4'/><circle cx='14' cy='14' r='3.2' fill='%237a8c4a'/><circle cx='34' cy='20' r='2.6' fill='%235d6a36'/><circle cx='56' cy='12' r='3.6' fill='%237a8c4a'/><circle cx='78' cy='22' r='2.8' fill='%235d6a36'/><circle cx='102' cy='14' r='3.0' fill='%237a8c4a'/><circle cx='124' cy='20' r='2.4' fill='%235d6a36'/><circle cx='148' cy='12' r='3.4' fill='%237a8c4a'/><circle cx='172' cy='22' r='2.7' fill='%235d6a36'/><ellipse cx='92' cy='8' rx='3.4' ry='2' fill='%23b8431f'/><path d='M48,16 q3,-6 6,0 t6,0' fill='none' stroke='%237a8c4a' stroke-width='0.9'/></svg>");
    background-repeat: repeat-x;
    background-size: 200px 36px;
    animation: moss-sway 9s ease-in-out infinite;
}
.moss-frame::before { top: 0; }
.moss-frame::after { bottom: 0; transform: scaleY(-1); }

/* Vertical moss strips */
.moss-side-l,
.moss-side-r {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--moss-margin);
    pointer-events: none;
    z-index: 91;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 200' preserveAspectRatio='none'><path d='M18,0 Q8,10 18,20 T18,40 T18,60 T18,80 T18,100 T18,120 T18,140 T18,160 T18,180 T18,200' fill='none' stroke='%237a8c4a' stroke-width='1.4'/><circle cx='14' cy='14' r='3.2' fill='%237a8c4a'/><circle cx='20' cy='34' r='2.6' fill='%235d6a36'/><circle cx='12' cy='56' r='3.6' fill='%237a8c4a'/><circle cx='22' cy='78' r='2.8' fill='%235d6a36'/><circle cx='14' cy='102' r='3.0' fill='%237a8c4a'/><circle cx='20' cy='124' r='2.4' fill='%235d6a36'/><circle cx='12' cy='148' r='3.4' fill='%237a8c4a'/><circle cx='22' cy='172' r='2.7' fill='%235d6a36'/></svg>");
    background-repeat: repeat-y;
    background-size: 36px 200px;
    animation: moss-sway-v 11s ease-in-out infinite;
}
.moss-side-l { left: 0; }
.moss-side-r { right: 0; transform: scaleX(-1); }

@keyframes moss-sway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1.5px); }
}
@keyframes moss-sway-v {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(1.5px); }
}

/* TWINE NAV — vertical strip of leaf-tags */
.twine-nav {
    position: fixed;
    left: calc(var(--moss-margin) + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 700px;
    z-index: 80;
    pointer-events: none;
}

.twine-nav .twine {
    position: absolute;
    inset: 0;
    width: 60px;
    height: 700px;
    pointer-events: none;
}

.leaf-tag {
    position: absolute;
    left: 6px;
    width: 56px;
    height: 56px;
    pointer-events: auto;
    text-decoration: none;
    transform-origin: 50% -8px;
    animation: tag-swing 5.4s ease-in-out infinite;
    transform: rotate(0deg) translateY(-30px);
    opacity: 0;
}

.twine-nav.loaded .leaf-tag {
    animation: tag-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               tag-swing 5.4s ease-in-out 1s infinite;
}

@keyframes tag-drop {
    0% { transform: rotate(-30deg) translateY(-50px); opacity: 0; }
    70% { transform: rotate(8deg) translateY(0); opacity: 1; }
    100% { transform: rotate(0deg) translateY(0); opacity: 1; }
}

@keyframes tag-swing {
    0%, 100% { transform: rotate(-2.4deg); }
    50% { transform: rotate(2.4deg); }
}

.leaf-tag[data-stagger="0"] { top: 14px; animation-delay: 0s, 0s; }
.leaf-tag[data-stagger="1"] { top: 110px; animation-delay: 0.2s, 0.4s; }
.leaf-tag[data-stagger="2"] { top: 206px; animation-delay: 0.4s, 0.8s; }
.leaf-tag[data-stagger="3"] { top: 302px; animation-delay: 0.6s, 1.2s; }
.leaf-tag[data-stagger="4"] { top: 398px; animation-delay: 0.8s, 1.6s; }
.leaf-tag[data-stagger="5"] { top: 494px; animation-delay: 1.0s, 2.0s; }
.leaf-tag[data-stagger="6"] { top: 590px; animation-delay: 1.2s, 2.4s; }

.leaf-tag svg {
    width: 100%;
    height: 100%;
    transition: transform 600ms cubic-bezier(0.61, 0.01, 0.42, 1), filter 600ms;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}

.leaf-tag:hover svg {
    transform: scale(1.12) rotate(-6deg);
    filter: drop-shadow(0 3px 0 rgba(0,0,0,0.5)) brightness(1.1);
}

.tag-label {
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Caveat', 'Sorts Mill Goudy', cursive;
    font-size: 16px;
    color: var(--butterfat);
    background: var(--burnt-umber);
    padding: 2px 8px;
    border: 1px solid var(--tannin-ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
    white-space: nowrap;
}

.leaf-tag:hover .tag-label {
    opacity: 1;
}

/* MAIN BURROW */
.burrow {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 100px;
    padding-right: 24px;
    position: relative;
    z-index: 5;
}

/* CHAMBER (generic) */
.chamber {
    min-height: 100vh;
    padding: 80px 40px;
    position: relative;
    transform: rotate(calc(var(--rot, 0) * 1deg));
}

.chamber[data-rot] { transform: rotate(calc(var(--rot, 0) * 1deg)); }

.chamber-head {
    margin-bottom: 48px;
    transform: rotate(-1.2deg);
}

.chamber-title {
    font-family: 'IM Fell English', 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.08;
    color: var(--butterfat);
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.chamber-sub {
    font-style: italic;
    color: var(--vellum-highlight);
    font-size: 0.95rem;
    margin-top: 8px;
    opacity: 0.78;
}

/* ANTECHAMBER */
.chamber-antechamber {
    background: var(--loam-black);
    display: grid;
    grid-template-columns: 1fr 0.61fr 1.31fr 0.4fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    transform: rotate(-0.8deg);
}

.lantern {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    width: 140px;
    height: 200px;
    margin-left: 4%;
    margin-top: 6vh;
    align-self: start;
    animation: lantern-flicker 4.2s ease-in-out infinite;
}

.lantern svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lantern-glow {
    transform-origin: center;
    animation: glow-breathe 5.8s ease-in-out infinite;
}

@keyframes lantern-flicker {
    0%, 100% { transform: translateY(0) rotate(-0.6deg); }
    25% { transform: translateY(-2px) rotate(0.4deg); }
    50% { transform: translateY(0) rotate(-0.2deg); }
    75% { transform: translateY(1px) rotate(0.6deg); }
}

@keyframes glow-breathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

.firefly {
    animation: firefly-bob 3.6s ease-in-out infinite;
}
.firefly.f1 { animation-delay: 0s; }
.firefly.f2 { animation-delay: 0.6s; }
.firefly.f3 { animation-delay: 1.2s; }
.firefly.f4 { animation-delay: 1.8s; }
.firefly.f5 { animation-delay: 2.4s; }

@keyframes firefly-bob {
    0%, 100% { opacity: 0.5; transform: translate(0, 0); }
    33% { opacity: 1; transform: translate(2px, -3px); }
    66% { opacity: 0.7; transform: translate(-2px, 2px); }
}

.antechamber-inner {
    grid-column: 2 / 6;
    grid-row: 2 / 3;
    transform: rotate(-2.4deg);
    padding: 0 24px;
    max-width: 720px;
}

.site-title {
    font-family: 'IM Fell English', 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 1.08;
    color: var(--butterfat);
    text-transform: lowercase;
    letter-spacing: 0;
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
    opacity: 0;
    animation: title-fade-in 1.6s ease-out 0.2s forwards;
}

@keyframes title-fade-in {
    0% { opacity: 0.08; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.title-text {
    display: inline-block;
    color: var(--butterfat);
}

.title-underline {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: -4px;
    overflow: visible;
}

.antechamber-tagline {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-style: italic;
    color: var(--vellum-highlight);
    font-size: 1.05rem;
    margin-top: 18px;
    margin-bottom: 32px;
    opacity: 0;
    animation: title-fade-in 1.6s ease-out 0.8s forwards;
}

.antechamber-paragraph {
    color: var(--butterfat);
    font-size: 17px;
    line-height: 1.7;
    max-width: 580px;
    opacity: 0;
    animation: title-fade-in 1.8s ease-out 1.2s forwards;
}

.opener {
    font-variant: small-caps;
    color: var(--butterfat);
    letter-spacing: 0.04em;
}

.goblin-aside {
    font-family: 'Caveat', cursive;
    color: var(--toadstool-red);
    font-size: 0.95rem;
    margin-left: 4px;
    display: inline-block;
    transform: rotate(-1.5deg);
}

.specimen-marginalia {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transform: rotate(2.1deg);
    opacity: 0;
    animation: title-fade-in 1.8s ease-out 1.6s forwards;
}

.specimen-mini {
    width: 60px;
    height: 40px;
}

.specimen-label {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--vellum-highlight);
    font-size: 0.9rem;
}

/* TUNNEL DIVIDER */
.tunnel-divider {
    width: 100%;
    height: 80px;
    margin: 24px 0;
    overflow: hidden;
    position: relative;
}

.tunnel-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tunnel-walker {
    transform: translateX(-40px);
    opacity: 0;
}

.tunnel-divider.in-view .tunnel-walker {
    animation: walker-march 12s linear infinite;
    opacity: 1;
}

.tunnel-divider.in-view .tw1 { animation-delay: 0s; }
.tunnel-divider.in-view .tw2 { animation-delay: 3.2s; }
.tunnel-divider.in-view .tw3 { animation-delay: 6.4s; }

@keyframes walker-march {
    0% { transform: translateX(-40px) translateY(0); }
    50% { transform: translateX(600px) translateY(-2px); }
    100% { transform: translateX(1240px) translateY(0); }
}

.tunnel-root {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.61, 0.01, 0.42, 1);
}

.tunnel-divider.in-view .tunnel-root {
    stroke-dashoffset: 0;
}

/* CATALOGUE / CORKBOARD */
.chamber-catalogue {
    background: var(--burnt-umber);
    background-image:
        radial-gradient(circle at 18% 28%, rgba(94,58,20,0.5) 0%, transparent 1.5%),
        radial-gradient(circle at 62% 71%, rgba(94,58,20,0.4) 0%, transparent 1.2%),
        radial-gradient(circle at 38% 81%, rgba(94,58,20,0.55) 0%, transparent 1.6%),
        radial-gradient(circle at 84% 14%, rgba(94,58,20,0.45) 0%, transparent 1.4%);
    background-size: 120px 120px, 90px 90px, 140px 140px, 110px 110px;
    border: 2px solid var(--tannin-ink);
    margin: 36px 0;
    padding: 48px 36px;
    position: relative;
    transform: rotate(0.4deg);
}

.corkboard {
    position: relative;
    min-height: 700px;
    width: 100%;
    margin-top: 24px;
}

.string-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.red-string {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 2.2s cubic-bezier(0.61, 0.01, 0.42, 1);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3));
}

.chamber-catalogue.in-view .red-string {
    stroke-dashoffset: 0;
}
.chamber-catalogue.in-view .red-string:nth-of-type(2) { transition-delay: 0.4s; }
.chamber-catalogue.in-view .red-string:nth-of-type(3) { transition-delay: 0.8s; }
.chamber-catalogue.in-view .red-string:nth-of-type(4) { transition-delay: 1.2s; }

.rumour-card {
    position: absolute;
    left: var(--card-x);
    top: var(--card-y);
    width: clamp(220px, 26%, 320px);
    background: var(--butterfat);
    background-image:
        radial-gradient(circle at 30% 40%, rgba(94,58,20,0.04) 0%, transparent 60%);
    color: var(--tannin-ink);
    padding: 20px 22px 22px;
    border: 1px solid var(--tannin-ink);
    box-shadow: 4px 6px 0 rgba(0,0,0,0.35), 0 0 0 1px rgba(94,58,20,0.4);
    transform: rotate(calc(var(--rot, 0) * 1deg));
    z-index: 2;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rumour-card[data-rot="-7.4"] { --rot: -7.4; }
.rumour-card[data-rot="5.1"]  { --rot:  5.1; }
.rumour-card[data-rot="-3.8"] { --rot: -3.8; }
.rumour-card[data-rot="8.2"]  { --rot:  8.2; }
.rumour-card[data-rot="-2.4"] { --rot: -2.4; }
.rumour-card[data-rot="6.7"]  { --rot:  6.7; }

.rumour-card:hover {
    transform: rotate(calc(var(--rot, 0) * 1deg)) translateY(-4px) scale(1.03);
    z-index: 3;
}

.pin {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 35% 30%, #d6c8a8 10%, #5e3a14 60%, #1a1208 100%);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(0,0,0,0.4);
}

.pin.pin-red {
    background: radial-gradient(circle at 35% 30%, #d6c8a8 10%, #b8431f 50%, #5e3a14 100%);
}

.rumour-no {
    font-family: 'IM Fell English', Georgia, serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--tannin-ink);
    line-height: 1.1;
    margin-bottom: 4px;
}

.dot-i {
    color: var(--toadstool-red);
}

.rumour-meta {
    font-family: 'IM Fell English', Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--tannin-ink);
    opacity: 0.78;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--tannin-ink);
    padding-bottom: 6px;
}

.rumour-body {
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tannin-ink);
}

.rumour-body .opener {
    font-variant: small-caps;
    color: var(--tannin-ink);
}

/* READING NOOK */
.chamber-nook {
    background: var(--loam-black);
    padding: 80px 24px;
    transform: rotate(-0.4deg);
}

.ivy-frame {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    background: var(--butterfat);
    background-image:
        radial-gradient(circle at 24% 18%, rgba(94,58,20,0.06) 0%, transparent 0.8%),
        radial-gradient(circle at 78% 64%, rgba(94,58,20,0.05) 0%, transparent 0.6%),
        radial-gradient(circle at 12% 88%, rgba(94,58,20,0.07) 0%, transparent 0.7%);
    background-size: 220px 220px, 180px 180px, 260px 260px;
    color: var(--tannin-ink);
    padding: 60px 80px 80px;
    border: 1px solid var(--tannin-ink);
}

.ivy-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ivy-cluster {
    animation: ivy-drift 14s ease-in-out infinite;
}
.ivy-tl { animation-delay: 0s; }
.ivy-tr { animation-delay: 3.5s; }
.ivy-bl { animation-delay: 7s; }
.ivy-br { animation-delay: 10.5s; }

@keyframes ivy-drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, -1px); }
}

.reading-column {
    position: relative;
    z-index: 2;
    max-width: 580px;
    margin: 0 auto;
}

.reading-column .chamber-title {
    color: var(--tannin-ink);
    text-shadow: none;
    margin-bottom: 6px;
}

.reading-meta {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--tannin-ink);
    opacity: 0.7;
    font-size: 0.95rem;
    margin-bottom: 32px;
    border-bottom: 1px dotted var(--tannin-ink);
    padding-bottom: 12px;
}

.reading-column p {
    color: var(--tannin-ink);
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 17px;
    line-height: 1.68;
    margin-bottom: 22px;
}

.reading-column .opener {
    color: var(--tannin-ink);
    font-variant: small-caps;
}

.reading-column .goblin-aside {
    color: var(--toadstool-red);
}

.reading-end {
    text-align: center;
    color: var(--tannin-ink);
    opacity: 0.7;
    margin-top: 32px;
    border-top: 1px dotted var(--tannin-ink);
    padding-top: 16px;
}

.specimen-plate {
    margin: 28px auto;
    text-align: center;
    transform: rotate(calc(var(--rot, 0) * 1deg));
    position: relative;
    padding: 12px;
    background: rgba(214,200,168,0.4);
    border: 1px dashed var(--tannin-ink);
    width: max-content;
    max-width: 100%;
}

.specimen-plate[data-rot="-2.6"] { --rot: -2.6; }
.specimen-plate[data-rot="1.8"]  { --rot:  1.8; }
.specimen-plate[data-rot="-1.4"] { --rot: -1.4; }

.specimen-plate::before,
.specimen-plate::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 30%, #d6c8a8 10%, #5e3a14 60%, #1a1208 100%);
    border-radius: 50%;
    box-shadow: 0 2px 2px rgba(0,0,0,0.4);
}
.specimen-plate::before { top: -4px; left: 12px; }
.specimen-plate::after { top: -4px; right: 12px; }

.specimen-svg {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.specimen-plate figcaption {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    color: var(--tannin-ink);
    font-size: 0.85rem;
    margin-top: 8px;
}

/* Specimen animations */
.specimen-svg[data-spec="moth"] .moth-wings {
    transform-origin: 110px 80px;
    animation: moth-flap 4s ease-in-out infinite;
}

@keyframes moth-flap {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.78); }
}

.specimen-svg[data-spec="beetle"] .beetle-antennae {
    transform-origin: 100px 48px;
    animation: antenna-twitch 3.2s ease-in-out infinite;
}

@keyframes antenna-twitch {
    0%, 80%, 100% { transform: rotate(0deg); }
    85% { transform: rotate(3deg); }
    90% { transform: rotate(-2deg); }
    95% { transform: rotate(1deg); }
}

.spore-particle {
    fill: var(--vellum-highlight);
    opacity: 0;
}

/* GOBLIN MARGINALIA */
.goblin {
    position: absolute;
    width: 60px;
    height: 80px;
    z-index: 3;
    pointer-events: none;
}

.goblin-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.goblin-head {
    transition: transform 600ms cubic-bezier(0.61, 0.01, 0.42, 1);
}

.goblin-1 { top: 80px; left: -36px; }
.goblin-2 { top: 280px; right: -36px; }
.goblin-3 { top: 540px; left: -42px; }
.goblin-4 { bottom: 60px; right: -28px; }

/* PICKLE PANTRY */
.chamber-pantry {
    background: var(--burnt-umber);
    transform: rotate(0.6deg);
    padding: 80px 40px;
}

.pantry-content {
    display: grid;
    grid-template-columns: 1fr 0.4fr;
    gap: 60px;
    align-items: start;
}

.pantry-prose {
    color: var(--butterfat);
    max-width: 580px;
}

.pantry-prose p {
    color: var(--butterfat);
    margin-bottom: 18px;
}

.pantry-prose .opener {
    color: var(--butterfat);
}

.pantry-shelf {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 16px;
    background: var(--loam-black);
    border: 2px solid var(--tannin-ink);
    border-top: 6px solid var(--tannin-ink);
    box-shadow: inset 0 0 0 1px rgba(94,58,20,0.4);
    position: relative;
}

.pantry-shelf::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--tannin-ink);
}

.jar-item {
    position: relative;
    transform: rotate(calc(var(--rot, 0) * 1deg));
    transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jar-item[data-rot="-1.4"] { --rot: -1.4; }
.jar-item[data-rot="2.1"]  { --rot:  2.1; }
.jar-item[data-rot="-2.7"] { --rot: -2.7; }
.jar-item[data-rot="1.4"]  { --rot:  1.4; }
.jar-item[data-rot="-2.0"] { --rot: -2.0; }

.jar-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 100%;
    display: block;
    position: relative;
    color: inherit;
}

.jar-svg {
    width: 90px;
    height: 130px;
    display: block;
    margin: 0 auto;
    transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jar-item:hover .jar-svg .jar-content {
    animation: jar-jiggle 0.7s ease-in-out;
}

@keyframes jar-jiggle {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-2px); }
    50% { transform: translateY(1px); }
    75% { transform: translateY(-1px); }
}

.jar-item:hover .jar-lid {
    transform: translateY(-4px);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jar-lid {
    transform-origin: center;
    transition: transform 400ms ease;
}

.jar-tag {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-family: 'Caveat', cursive;
    font-size: 14px;
    color: var(--vellum-highlight);
    background: var(--butterfat);
    color: var(--tannin-ink);
    padding: 2px 6px;
    border: 1px solid var(--tannin-ink);
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(-2deg);
    line-height: 1.1;
    position: relative;
}

.jar-tag::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 1px;
    height: 8px;
    background: var(--tannin-ink);
}

/* Jar tipped state */
.jar-item.tipped .jar-svg {
    transform: rotate(28deg) translateY(-4px);
}

.jar-scrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 700ms cubic-bezier(0.61, 0.01, 0.42, 1), padding 400ms ease;
    background: var(--butterfat);
    color: var(--tannin-ink);
    padding: 0 14px;
    border: 0 solid var(--tannin-ink);
    margin-top: 8px;
    font-family: 'Caveat', cursive;
    font-size: 16px;
    transform-origin: top center;
    transform: rotate(-1.2deg);
}

.jar-item.tipped .jar-scrap {
    max-height: 240px;
    padding: 12px 14px;
    border-width: 1px;
}

.jar-scrap p {
    color: var(--tannin-ink);
    font-family: 'Caveat', cursive;
    font-size: 16px;
    line-height: 1.5;
}

.jar-scrap .goblin-aside {
    color: var(--toadstool-red);
    font-size: 0.95em;
}

.jar-vapor circle {
    fill: var(--vellum-highlight);
    opacity: 0;
}

/* BRAMBLE / RUMOR JAR INSET */
.chamber-bramble {
    background: var(--loam-black);
    transform: rotate(-0.6deg);
    padding: 80px 40px;
}

.bramble-prose {
    max-width: 640px;
    margin: 0 auto;
    color: var(--butterfat);
}

.bramble-prose p {
    color: var(--butterfat);
    margin-bottom: 22px;
}

.bramble-prose .opener {
    color: var(--butterfat);
}

.rumour-jar-inset {
    margin: 42px auto;
    padding: 28px;
    background: var(--burnt-umber);
    border: 1px dashed var(--tannin-ink);
    text-align: center;
    max-width: 480px;
}

.inset-jar-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.inset-jar-svg {
    width: 200px;
    height: 240px;
    display: block;
    margin: 0 auto;
    transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inset-jar-btn:hover .inset-jar-svg {
    transform: rotate(-3deg) translateY(-2px);
}

.rumour-jar-inset.tipped .inset-jar-svg {
    transform: rotate(32deg) translateY(-6px);
}

.folded-paper {
    transition: transform 800ms cubic-bezier(0.61, 0.01, 0.42, 1);
    transform-origin: 100px 200px;
}

.rumour-jar-inset.tipped .folded-paper {
    transform: scale(1.05) translate(2px, -4px);
}

.inset-scrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 800ms cubic-bezier(0.61, 0.01, 0.42, 1), opacity 600ms ease, padding 400ms ease;
    background: var(--butterfat);
    color: var(--tannin-ink);
    margin-top: 16px;
    padding: 0 18px;
    opacity: 0;
    border: 0 solid var(--tannin-ink);
    transform: rotate(-1.4deg);
}

.rumour-jar-inset.tipped .inset-scrap {
    max-height: 320px;
    opacity: 1;
    padding: 18px 22px;
    border-width: 1px;
}

.inset-scrap-text {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    line-height: 1.5;
    color: var(--tannin-ink);
}

.inset-scrap .goblin-aside {
    color: var(--toadstool-red);
}

/* COLOPHON */
.chamber-colophon {
    background: var(--burnt-umber);
    padding: 80px 40px;
    transform: rotate(0.2deg);
}

.colophon-grid {
    display: grid;
    grid-template-columns: 1fr 0.61fr 1.31fr 0.4fr;
    grid-auto-rows: minmax(180px, auto);
    gap: 28px;
    margin-top: 32px;
}

.colophon-block {
    padding: 22px 24px;
    background: var(--butterfat);
    color: var(--tannin-ink);
    border: 1px solid var(--tannin-ink);
    transform: rotate(calc(var(--rot, 0) * 1deg));
    box-shadow: 3px 4px 0 rgba(0,0,0,0.3);
    position: relative;
}

.colophon-block[data-rot="-1.2"] { --rot: -1.2; grid-column: 1 / 3; }
.colophon-block[data-rot="1.6"]  { --rot:  1.6; grid-column: 3 / 5; }
.colophon-block[data-rot="-0.6"] { --rot: -0.6; grid-column: 1 / 3; }
.colophon-block[data-rot="2.2"]  { --rot:  2.2; grid-column: 3 / 5; }

.colophon-h {
    font-family: 'IM Fell English', serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--tannin-ink);
    margin-bottom: 12px;
    border-bottom: 1px dotted var(--tannin-ink);
    padding-bottom: 6px;
}

.colophon-block p {
    color: var(--tannin-ink);
    margin-bottom: 12px;
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 16px;
    line-height: 1.6;
}

.scribe-list {
    list-style: none;
}

.scribe-list li {
    color: var(--tannin-ink);
    margin-bottom: 6px;
    padding-left: 16px;
    position: relative;
    font-family: 'Sorts Mill Goudy', Georgia, serif;
    font-size: 15px;
    line-height: 1.55;
}

.scribe-list li::before {
    content: '⁂';
    position: absolute;
    left: 0;
    color: var(--toadstool-red);
    font-size: 12px;
}

.scribe-list strong {
    font-family: 'IM Fell English', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--tannin-ink);
}

.colophon-meta {
    font-style: italic;
    opacity: 0.7;
    border-top: 1px dotted var(--tannin-ink);
    padding-top: 8px;
    margin-top: 8px;
}

.footer-line {
    text-align: center;
    color: var(--vellum-highlight);
    margin-top: 48px;
    font-style: italic;
    font-size: 1rem;
    opacity: 0.85;
}

/* Snail underline */
#snail {
    transition: none;
}

#snail-trail {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* Responsive */
@media (max-width: 880px) {
    .twine-nav {
        display: none;
    }
    .burrow {
        padding-left: 24px;
    }
    .chamber-antechamber {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .lantern {
        grid-column: 1;
        grid-row: 1;
        margin-left: 0;
        margin-top: 0;
    }
    .antechamber-inner {
        grid-column: 1;
        grid-row: 2;
    }
    .pantry-content {
        grid-template-columns: 1fr;
    }
    .corkboard {
        min-height: 0;
    }
    .rumour-card {
        position: relative;
        left: 0 !important;
        top: 0 !important;
        width: 100%;
        margin-bottom: 32px;
    }
    .colophon-grid {
        grid-template-columns: 1fr;
    }
    .colophon-block {
        grid-column: 1 !important;
    }
    .ivy-frame {
        padding: 40px 28px 60px;
    }
    .goblin {
        display: none;
    }
}

@media (max-width: 540px) {
    body {
        padding: 18px;
    }
    :root {
        --moss-margin: 18px;
    }
    .chamber {
        padding: 48px 16px;
    }
}