:root {
    --twilight-lapis: #2b4c7e;
    --frost-lichen: #8baac4;
    --bioluminescent: #a8d8ea;
    --wet-bark: #2d1f14;
    --mycelium-tan: #8b7355;
    --vellum-cream: #f0ebe1;
    --moss-verdigris: #5a7a63;
    --spore-gold: #c4a35a;
    --earth-mid: #6b5b4b;
    --earth-clay: #7a6a5a;
    --earth-deep: #5a4a3a;
    --aged-cream: #e8e3d9;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--vellum-cream);
    color: var(--wet-bark);
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 400;
    line-height: 1.72;
    overflow-x: hidden;
}

/* ================================
   SPECIMEN INDEX NAVIGATION
   ================================ */
#specimen-index {
    position: fixed;
    top: clamp(1.5rem, 4vh, 3rem);
    left: clamp(1rem, 3vw, 2rem);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.index-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--frost-lichen);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0.6;
}

.index-entry:hover {
    color: var(--twilight-lapis);
    border-color: var(--frost-lichen);
    opacity: 1;
}

.index-entry.active {
    color: var(--twilight-lapis);
    border-color: var(--twilight-lapis);
    opacity: 1;
}

/* ================================
   JOURNAL PAGE BASE
   ================================ */
.journal-page {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 6vw, 6rem);
    padding-left: clamp(3rem, 8vw, 8rem);
    overflow: hidden;
}

/* Page texture overlay */
.page-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
}

.texture-aged {
    opacity: 0.7;
}

/* Water stain effects */
.water-stain {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.stain-1 {
    width: 300px;
    height: 280px;
    top: 15%;
    right: 20%;
    background: radial-gradient(ellipse at 50% 50%, rgba(139, 170, 196, 0.06), transparent 65%);
}

.stain-2 {
    width: 200px;
    height: 220px;
    bottom: 25%;
    left: 30%;
    background: radial-gradient(ellipse at 40% 60%, rgba(139, 170, 196, 0.05), transparent 60%);
}

.stain-3 {
    width: 350px;
    height: 300px;
    top: 10%;
    left: 15%;
    background: radial-gradient(ellipse at 55% 45%, rgba(139, 170, 196, 0.07), transparent 55%);
}

.stain-4 {
    width: 280px;
    height: 260px;
    bottom: 20%;
    right: 15%;
    background: radial-gradient(ellipse at 60% 40%, rgba(139, 170, 196, 0.05), transparent 60%);
}

.stain-5 {
    width: 320px;
    height: 290px;
    top: 30%;
    right: 25%;
    background: radial-gradient(ellipse at 45% 55%, rgba(139, 170, 196, 0.06), transparent 58%);
}

.stain-6 {
    width: 250px;
    height: 230px;
    top: 20%;
    left: 25%;
    background: radial-gradient(ellipse at 50% 50%, rgba(196, 163, 90, 0.06), transparent 55%);
}

.stain-7 {
    width: 180px;
    height: 200px;
    bottom: 30%;
    right: 30%;
    background: radial-gradient(ellipse at 45% 55%, rgba(139, 170, 196, 0.07), transparent 50%);
}

/* Foxing spots */
.foxing-spots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(196, 163, 90, 0.06) 2px, transparent 3px),
        radial-gradient(circle at 45% 15%, rgba(196, 163, 90, 0.05) 1.5px, transparent 2.5px),
        radial-gradient(circle at 72% 35%, rgba(196, 163, 90, 0.04) 2px, transparent 3px),
        radial-gradient(circle at 88% 65%, rgba(196, 163, 90, 0.06) 1px, transparent 2px),
        radial-gradient(circle at 35% 78%, rgba(196, 163, 90, 0.05) 2px, transparent 3px),
        radial-gradient(circle at 62% 88%, rgba(196, 163, 90, 0.04) 1.5px, transparent 2.5px);
}

.foxing-heavy {
    background-image:
        radial-gradient(circle at 15% 25%, rgba(196, 163, 90, 0.09) 2px, transparent 3px),
        radial-gradient(circle at 45% 15%, rgba(196, 163, 90, 0.08) 1.5px, transparent 2.5px),
        radial-gradient(circle at 72% 35%, rgba(196, 163, 90, 0.07) 2px, transparent 3px),
        radial-gradient(circle at 88% 65%, rgba(196, 163, 90, 0.09) 1px, transparent 2px),
        radial-gradient(circle at 35% 78%, rgba(196, 163, 90, 0.08) 2px, transparent 3px),
        radial-gradient(circle at 62% 88%, rgba(196, 163, 90, 0.07) 1.5px, transparent 2.5px),
        radial-gradient(circle at 22% 55%, rgba(196, 163, 90, 0.06) 2.5px, transparent 3.5px),
        radial-gradient(circle at 78% 82%, rgba(196, 163, 90, 0.08) 2px, transparent 3px),
        radial-gradient(circle at 50% 45%, rgba(196, 163, 90, 0.05) 1.5px, transparent 2.5px);
}

/* Torn edge divider */
.torn-edge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background-color: var(--twilight-lapis);
    clip-path: polygon(
        0% 60%, 3% 30%, 6% 70%, 9% 20%, 12% 55%,
        15% 35%, 18% 80%, 21% 25%, 24% 65%, 27% 40%,
        30% 75%, 33% 15%, 36% 60%, 39% 30%, 42% 70%,
        45% 20%, 48% 55%, 51% 85%, 54% 25%, 57% 60%,
        60% 40%, 63% 75%, 66% 15%, 69% 50%, 72% 35%,
        75% 70%, 78% 20%, 81% 55%, 84% 80%, 87% 30%,
        90% 65%, 93% 40%, 96% 75%, 100% 50%,
        100% 100%, 0% 100%
    );
    opacity: 0.15;
}

/* ================================
   Z-PATTERN GRID
   ================================ */
.journal-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "specimen-label data-annotation"
        "central-matter central-matter"
        "provenance-note field-action";
    min-height: calc(100vh - clamp(4rem, 12vw, 12rem));
    gap: clamp(1rem, 3vw, 2.5rem);
    z-index: 1;
}

.specimen-label {
    grid-area: specimen-label;
}

.data-annotation {
    grid-area: data-annotation;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.central-matter {
    grid-area: central-matter;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.provenance-note {
    grid-area: provenance-note;
    align-self: end;
}

.field-action {
    grid-area: field-action;
    text-align: right;
    align-self: end;
}

/* ================================
   TYPOGRAPHY
   ================================ */
.tanso-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(4rem, 15vw, 10rem);
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--twilight-lapis);
    line-height: 1;
    margin-bottom: 0.2em;
}

.subtitle-latin {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--frost-lichen);
    margin-bottom: 1rem;
}

.specimen-line {
    width: 60px;
    height: 1px;
    background-color: var(--mycelium-tan);
    margin-bottom: 0.8rem;
}

.specimen-subtext {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--earth-mid);
}

.page-roman {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--frost-lichen);
    display: block;
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--twilight-lapis);
    line-height: 1.15;
    margin-bottom: 0.3em;
}

.section-subtitle {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--frost-lichen);
}

/* Data annotations */
.data-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--frost-lichen);
    text-transform: uppercase;
    display: block;
    margin-top: 0.6rem;
}

.data-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--wet-bark);
    display: block;
}

/* Body text */
.body-text {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    color: var(--wet-bark);
    max-width: 45ch;
}

/* Caveat notes */
.caveat-note {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    color: var(--earth-mid);
    transform: rotate(-1.5deg);
    max-width: 35ch;
    line-height: 1.5;
}

/* Mono data */
.mono-data {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--earth-mid);
    display: block;
    line-height: 1.6;
}

/* Page number */
.page-number {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--frost-lichen);
    display: block;
    margin-top: 1rem;
}

/* ================================
   REVEAL ANIMATIONS
   ================================ */
.reveal-tl,
.reveal-tr,
.reveal-bl,
.reveal-br {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-tl {
    transform: translate(-20px, -20px);
}

.reveal-tr {
    transform: translate(20px, -20px);
}

.reveal-bl {
    transform: translate(-20px, 20px);
}

.reveal-br {
    transform: translate(20px, 20px);
}

.reveal-tl.visible,
.reveal-tr.visible,
.reveal-bl.visible,
.reveal-br.visible {
    opacity: 1;
    transform: translate(0, 0);
}

.reveal-stratum {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-stratum.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   PAGE I: SOIL CROSS-SECTION
   ================================ */
.soil-crosssection {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
}

.soil-layer {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.leaf-litter {
    height: clamp(50px, 8vh, 80px);
    background: var(--mycelium-tan);
    clip-path: polygon(
        0% 20%, 5% 10%, 10% 25%, 15% 5%, 20% 18%,
        25% 8%, 30% 22%, 35% 12%, 40% 28%, 45% 6%,
        50% 20%, 55% 10%, 60% 24%, 65% 8%, 70% 18%,
        75% 12%, 80% 26%, 85% 5%, 90% 15%, 95% 8%,
        100% 22%, 100% 100%, 0% 100%
    );
}

.humus {
    height: clamp(60px, 10vh, 100px);
    background: var(--earth-deep);
    clip-path: polygon(
        0% 5%, 8% 12%, 16% 3%, 24% 10%, 32% 6%,
        40% 15%, 48% 4%, 56% 11%, 64% 7%, 72% 14%,
        80% 3%, 88% 9%, 96% 5%, 100% 8%,
        100% 100%, 0% 100%
    );
}

.mineral-soil {
    height: clamp(70px, 12vh, 120px);
    background: var(--earth-mid);
    clip-path: polygon(
        0% 8%, 7% 4%, 14% 10%, 21% 5%, 28% 12%,
        35% 3%, 42% 9%, 49% 6%, 56% 11%, 63% 4%,
        70% 8%, 77% 5%, 84% 10%, 91% 3%, 100% 7%,
        100% 100%, 0% 100%
    );
}

.clay {
    height: clamp(55px, 9vh, 90px);
    background: var(--earth-clay);
    clip-path: polygon(
        0% 6%, 10% 3%, 20% 8%, 30% 4%, 40% 9%,
        50% 5%, 60% 7%, 70% 3%, 80% 8%, 90% 4%,
        100% 6%, 100% 100%, 0% 100%
    );
}

.bedrock {
    height: clamp(60px, 10vh, 100px);
    background: var(--wet-bark);
}

.mycelium-thread {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.mycelium-thread path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.journal-page.in-view .mycelium-thread path {
    stroke-dashoffset: 0;
}

/* ================================
   PAGE II: CREDIT CERTIFICATES
   ================================ */
.credit-certificates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    max-width: 600px;
    width: 100%;
}

.certificate {
    position: relative;
    background: var(--vellum-cream);
    border: 1px solid var(--mycelium-tan);
    padding: clamp(1.2rem, 2.5vw, 2rem);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.cert-1 { transform: rotate(-0.5deg); }
.cert-2 { transform: rotate(0.8deg); }
.cert-3 { transform: rotate(-1deg); }
.cert-4 { transform: rotate(0.3deg); }

.certificate:hover {
    filter: brightness(1.08);
}

.cert-inner {
    position: relative;
}

.cert-header {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--frost-lichen);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.cert-amount {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--twilight-lapis);
    display: block;
    font-variant: small-caps;
}

.specimen-pin {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--spore-gold);
    border: 1.5px solid var(--wet-bark);
    box-shadow: 2px 2px 4px rgba(45, 31, 20, 0.3);
}

/* Specimen card (Page II header) */
.specimen-card {
    background: var(--vellum-cream);
    border: 1px solid var(--mycelium-tan);
    padding: clamp(1rem, 2vw, 1.5rem);
    transform: rotate(-0.5deg);
    max-width: 280px;
    position: relative;
}

.card-header {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--frost-lichen);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.card-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--twilight-lapis);
    margin-bottom: 0.3rem;
}

.card-ref {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--earth-mid);
}

/* ================================
   ANNOTATION FOLDS (Details)
   ================================ */
.annotation-fold {
    margin-top: 0.5rem;
}

.annotation-fold summary {
    cursor: pointer;
    list-style: none;
}

.annotation-fold summary::-webkit-details-marker {
    display: none;
}

.examine-link {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    color: var(--spore-gold);
    transition: filter 0.2s ease;
}

.examine-link:hover {
    filter: brightness(1.08);
}

.pin-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--spore-gold);
    cursor: pointer;
    transition: filter 0.2s ease;
}

.pin-label:hover {
    filter: brightness(1.08);
}

.fold-content {
    margin-top: 0.5rem;
    padding: 0.8rem;
    background: rgba(240, 235, 225, 0.9);
    border-left: 2px solid var(--frost-lichen);
}

/* ================================
   PAGE III: MYCELIUM NETWORK
   ================================ */
.mycelium-svg {
    width: 100%;
    max-width: 800px;
    height: auto;
    max-height: 60vh;
}

.mycelium-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2s cubic-bezier(0.23, 1, 0.32, 1);
}

.mycelium-path.trunk {
    transition-duration: 3s;
}

.mycelium-path.branch-1,
.mycelium-path.branch-2,
.mycelium-path.branch-3,
.mycelium-path.branch-4 {
    transition-delay: 0.8s;
    transition-duration: 2s;
}

.mycelium-path.sub-1,
.mycelium-path.sub-2,
.mycelium-path.sub-3,
.mycelium-path.sub-4,
.mycelium-path.sub-5,
.mycelium-path.sub-6,
.mycelium-path.sub-7,
.mycelium-path.sub-8 {
    transition-delay: 1.6s;
    transition-duration: 1.8s;
}

.mycelium-path.tendril {
    transition-delay: 2.2s;
    transition-duration: 1.5s;
}

.journal-page.in-view .mycelium-path {
    stroke-dashoffset: 0;
}

.network-node {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 1.5s;
}

.network-node.small {
    transition-delay: 2s;
}

.journal-page.in-view .network-node {
    opacity: 1;
}

.node-details {
    position: absolute;
    z-index: 2;
}

/* ================================
   PAGE IV: STRATA
   ================================ */
.strata-display {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    gap: 0;
}

.stratum {
    display: flex;
    align-items: stretch;
    gap: clamp(0.8rem, 2vw, 1.5rem);
}

.stratum-band {
    width: 100%;
    flex: 1;
}

.stratum-info {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stratum-label {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    font-variant: small-caps;
    color: var(--twilight-lapis);
    display: block;
}

.stratum-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--frost-lichen);
    display: block;
}

.stratum-carbon {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--wet-bark);
    display: block;
    margin-top: 0.2rem;
}

.stratum-surface .stratum-band {
    height: clamp(40px, 6vh, 60px);
    background: var(--mycelium-tan);
    clip-path: polygon(0% 30%, 5% 15%, 10% 35%, 15% 10%, 20% 28%, 25% 18%, 30% 40%, 35% 12%, 40% 32%, 45% 20%, 50% 38%, 55% 15%, 60% 30%, 65% 10%, 70% 35%, 75% 22%, 80% 40%, 85% 8%, 90% 25%, 95% 15%, 100% 30%, 100% 100%, 0% 100%);
}

.stratum-topsoil .stratum-band {
    height: clamp(55px, 8vh, 80px);
    background: var(--earth-deep);
}

.stratum-subsoil .stratum-band {
    height: clamp(50px, 7vh, 70px);
    background: var(--earth-mid);
}

.stratum-deep .stratum-band {
    height: clamp(60px, 9vh, 90px);
    background: var(--earth-clay);
}

.stratum-ancient .stratum-band {
    height: clamp(65px, 10vh, 100px);
    background: var(--wet-bark);
}

/* Tree rings */
.tree-rings-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.tree-rings {
    width: clamp(120px, 20vw, 250px);
    height: auto;
    opacity: 0.7;
}

.rings-annotation {
    text-align: center;
}

/* ================================
   PAGE V: EXCHANGE
   ================================ */
.page-final {
    background-color: var(--aged-cream);
}

.final-mycelium {
    width: 100%;
    max-width: 800px;
    height: auto;
    max-height: 50vh;
}

.final-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.journal-page.in-view .final-path {
    stroke-dashoffset: 0;
}

.exchange-inscription {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 50ch;
    text-align: center;
}

.inscription-text {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.72;
    color: var(--earth-mid);
}

.enter-exchange {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
    cursor: pointer;
}

.exchange-text {
    font-family: 'Crimson Pro', 'Georgia', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--wet-bark);
    transition: filter 0.2s ease;
}

.enter-exchange:hover .exchange-text {
    filter: brightness(1.08);
}

.underline-stroke {
    width: 180px;
    height: 10px;
    margin-top: 2px;
}

.underline-stroke path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.enter-exchange:hover .underline-stroke path {
    stroke-dashoffset: 0;
}

/* ================================
   LEAF WATERMARK
   ================================ */
.leaf-watermark {
    position: fixed;
    top: 0;
    right: 5%;
    width: 200px;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   ================================ */
@media (max-width: 768px) {
    .journal-page {
        padding: clamp(1.5rem, 4vw, 3rem);
        padding-left: clamp(2.5rem, 6vw, 4rem);
    }

    .journal-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
        grid-template-areas:
            "specimen-label"
            "data-annotation"
            "central-matter"
            "provenance-note"
            "field-action";
    }

    .data-annotation {
        text-align: left;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }

    .field-action {
        text-align: left;
    }

    .credit-certificates {
        grid-template-columns: 1fr;
    }

    .tree-rings-container {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 2rem;
    }

    .strata-display {
        max-width: 100%;
    }

    .stratum {
        flex-direction: column;
        gap: 0.3rem;
    }

    .stratum-info {
        min-width: auto;
        padding: 0 0 0.5rem;
    }

    .node-details {
        position: relative;
        left: auto !important;
        top: auto !important;
        margin-top: 0.5rem;
    }

    #specimen-index {
        top: auto;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 0.8rem;
    }

    .leaf-watermark {
        display: none;
    }

    .exchange-inscription {
        position: relative;
        left: auto;
        transform: none;
        margin-top: 2rem;
    }
}