/* ===========================================================
   p9r.st  -- Field Studies in Botanical Taxonomy
   Victorian-era naturalist's field journal, hexagonal-honeycomb
   =========================================================== */

:root {
    /* Earth-Tones Herbarium Palette (per DESIGN.md) */
    --paper:        #F5ECD7;   /* Aged Cream  */
    --ink:          #3D3425;   /* Ink Brown   */
    --umber:        #6B4423;   /* Herbarium Umber */
    --dust:         #8B7355;   /* Field Dust */
    --leaf:         #5B7744;   /* Pressed Leaf */
    --gold:         #C4A235;   /* Specimen Gold */
    --loam:         #3A2F1E;   /* Deep Loam */
    --rule:         #C4A882;   /* Ruled Line */
    --sienna:       #A0522D;   /* Root Sienna */
    --margin:       #6B5B3E;   /* Annotation ink */

    /* Typography */
    --font-display: "Libre Baskerville", "Inter", Georgia, serif;
    --font-body:    "Source Serif 4", "Inter", Georgia, serif;
    --font-label:   "Alegreya Sans SC", "Inter", "Helvetica Neue", sans-serif;
    --font-hand:    "Caveat", "Inter", cursive;

    --hex-w: 320px;
    --hex-h: 360px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* ----------------------------------------------------------
   Background Paper Plane
   ---------------------------------------------------------- */
.paper-plane {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--paper);
    background-image:
        repeating-linear-gradient(
            132deg,
            rgba(107, 91, 62, 0.03) 0px,
            rgba(107, 91, 62, 0.03) 1px,
            transparent 1px,
            transparent 7px
        ),
        repeating-linear-gradient(
            48deg,
            rgba(107, 91, 62, 0.03) 0px,
            rgba(107, 91, 62, 0.03) 1px,
            transparent 1px,
            transparent 9px
        ),
        radial-gradient(
            ellipse at 22% 18%,
            rgba(196, 168, 130, 0.18) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at 82% 76%,
            rgba(160, 82, 45, 0.10) 0%,
            transparent 60%
        );
    pointer-events: none;
    will-change: transform;
}

/* ----------------------------------------------------------
   Annotation Plane (margins, ink lines)
   ---------------------------------------------------------- */
.annotation-plane {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}
.annotation-plane .ink-line {
    position: absolute;
    opacity: 0;
    transition: opacity 600ms ease-out;
}
.annotation-plane .ink-line path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1400ms ease-out;
}
.annotation-plane.visible .ink-line { opacity: 0.55; }
.annotation-plane.visible .ink-line path { stroke-dashoffset: 0; }

.ink-line-a { top: 18vh; left: 6vw; width: 200px; height: 80px; transform: rotate(-3deg); }
.ink-line-b { top: 56vh; right: 8vw; width: 160px; height: 90px; transform: rotate(2deg); }
.ink-line-c { top: 88vh; left: 14vw; width: 240px; height: 60px; transform: rotate(-1.5deg); }

.margin-note {
    position: absolute;
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--margin);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    white-space: nowrap;
}
.annotation-plane.visible .margin-note {
    opacity: 0.72;
    transform: translateY(0);
}
.margin-note-a { top: 14vh; left: 4vw;  transform: rotate(-2deg); }
.margin-note-b { top: 52vh; right: 6vw; transform: rotate(3deg); }
.margin-note-c { top: 86vh; left: 11vw; transform: rotate(-1deg); }
.margin-note-d { top: 132vh; right: 5vw; transform: rotate(2.5deg); }

/* ----------------------------------------------------------
   Vertical Progress Stem
   ---------------------------------------------------------- */
.progress-stem {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    z-index: 50;
    width: 30px;
    height: min(540px, 70vh);
    pointer-events: none;
}
.progress-stem .stem-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.65;
}
.stem-nodes {
    position: absolute;
    inset: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
}
.stem-node {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transform: translateX(0);
    transition: transform 200ms ease-out;
}
.stem-node:hover { transform: translateX(-3px); }
.stem-node .leaf {
    width: 14px;
    height: 9px;
    background: transparent;
    border: 1px solid var(--leaf);
    border-radius: 0 100% 0 100%;
    transform: rotate(-30deg);
    transition: background 250ms ease-out, transform 250ms ease-out;
    flex-shrink: 0;
}
.stem-node.active .leaf,
.stem-node:hover .leaf {
    background: var(--leaf);
    transform: rotate(-30deg) scale(1.1);
}
.stem-label {
    font-family: var(--font-label);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--dust);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.stem-node:hover .stem-label,
.stem-node.active .stem-label {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------------------------
   Content Plane
   ---------------------------------------------------------- */
.content-plane {
    position: relative;
    z-index: 2;
    will-change: transform;
}

.row {
    position: relative;
    min-height: 100vh;
    padding: 8vh clamp(24px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row-meta {
    align-self: flex-start;
    margin-bottom: 2.4vh;
}
.row-tag {
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--dust);
    text-transform: uppercase;
}

/* ----------------------------------------------------------
   Hex cell base (clip-path polygon)
   ---------------------------------------------------------- */
.hex-cell,
.hero-hex {
    position: relative;
    background: var(--paper);
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    transform-style: preserve-3d;
    perspective: 800px;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    filter: drop-shadow(0 8px 12px rgba(92, 71, 43, 0.15));
    opacity: 0;
    transform: scale(0.85) translate(var(--rand-x, 0px), var(--rand-y, 0px));
}
.hex-cell.assembled,
.hero-hex.assembled {
    opacity: 1;
    transform: scale(1.002) translate(0, 0) rotateX(var(--rest-rx, 0deg)) rotateY(var(--rest-ry, 0deg));
}

.hex-inner {
    width: 100%;
    height: 100%;
    padding: 12% 14%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.8rem;
    position: relative;
}

.hex-cell::before,
.hero-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
    border: 1px solid rgba(139, 115, 85, 0.30);
    pointer-events: none;
    z-index: 2;
}

/* Inner-paper texture for each hex */
.hex-cell::after,
.hero-hex::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(107, 91, 62, 0.025) 0px,
            rgba(107, 91, 62, 0.025) 1px,
            transparent 1px,
            transparent 5px
        );
    pointer-events: none;
    z-index: 1;
}

.hex-cell > *,
.hero-hex > * { position: relative; z-index: 2; }

/* ----------------------------------------------------------
   Hero hex (Row A)
   ---------------------------------------------------------- */
.hero-hex {
    width: min(1200px, 92vw);
    height: clamp(420px, 62vh, 640px);
    /* wider hexagon — flatter top/bottom for hero */
    clip-path: polygon(12% 2%, 88% 2%, 99% 50%, 88% 98%, 12% 98%, 1% 50%);
}
.hero-hex::before {
    clip-path: polygon(12% 2%, 88% 2%, 99% 50%, 88% 98%, 12% 98%, 1% 50%);
}
.hero-inner {
    flex-direction: row;
    gap: 5%;
    padding: 6% 9%;
    align-items: center;
}
.hero-collage {
    flex: 0 0 38%;
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    background: radial-gradient(circle, rgba(245, 236, 215, 0.95) 0%, rgba(245, 236, 215, 0) 72%);
}
.collage-central {
    width: 100%;
    height: 100%;
    display: block;
}
.collage-label {
    position: absolute;
    font-family: var(--font-label);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--umber);
    text-transform: uppercase;
}
.collage-label-a { top: 4%;  left: 50%; transform: translateX(-50%); }
.collage-label-b { top: 28%; right: -2%; }
.collage-label-c { bottom: 12%; left: -2%; }
.collage-leader {
    position: absolute;
    width: 28%;
    height: 14%;
    pointer-events: none;
}
.collage-leader-a { top: 22%; right: 6%; }
.collage-leader-b { bottom: 14%; left: 6%; transform: scaleX(-1); }

.hero-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hero-text h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--umber);
}
.hero-text h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink);
}
.hero-lede {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.7;
    color: var(--ink);
    min-height: 4.5rem;
    max-width: 38em;
}
.hero-imprint {
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--dust);
    text-transform: uppercase;
    margin-top: 0.4rem;
}

/* ----------------------------------------------------------
   Hex Grid (Rows B, D, F)
   ---------------------------------------------------------- */
.hex-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--hex-w));
    gap: 6px 18px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.hex-grid-3 .hex-cell {
    width: var(--hex-w);
    height: var(--hex-h);
}
.hex-offset-up   { transform: translateY(-44px) scale(0.85); }
.hex-offset-down { transform: translateY(44px)  scale(0.85); }
.hex-offset-up.assembled   { transform: translateY(-44px) scale(1.002) rotateX(var(--rest-rx, 0deg)) rotateY(var(--rest-ry, 0deg)); }
.hex-offset-down.assembled { transform: translateY(44px)  scale(1.002) rotateX(var(--rest-rx, 0deg)) rotateY(var(--rest-ry, 0deg)); }

.cell-tag {
    font-family: var(--font-label);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    color: var(--dust);
    text-transform: uppercase;
    align-self: center;
}
.hex-cell h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.2;
    color: var(--umber);
    text-align: center;
    letter-spacing: -0.01em;
}
.hex-cell h2 em {
    font-style: italic;
    color: var(--ink);
}
.hex-cell p {
    font-family: var(--font-body);
    font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    line-height: 1.6;
    color: var(--ink);
    text-align: left;
    min-height: 4.2rem;
}
.cell-foot {
    font-family: var(--font-hand);
    font-size: 0.95rem;
    color: var(--margin);
    align-self: flex-end;
    transform: rotate(-2deg);
    margin-top: 0.3rem;
}

.cell-sketch,
.cell-radial,
.cell-spiral,
.cell-scatter,
.cell-microscope,
.cell-colophon {
    width: 100%;
    height: auto;
    max-height: 140px;
    align-self: center;
    display: block;
}

.hex-bars { width: 100%; align-self: center; }
.bars-svg { width: 100%; height: auto; max-height: 130px; display: block; }
.bar rect { transition: width 1100ms cubic-bezier(0.23, 1, 0.32, 1); }

/* ----------------------------------------------------------
   Classification Bar (Rows C, E)
   ---------------------------------------------------------- */
.classification-bar {
    min-height: auto;
    padding: 6vh clamp(20px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    justify-content: center;
}
.classification-bar .cb-rule {
    display: block;
    width: min(800px, 80vw);
    height: 1px;
    background: var(--rule);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 800ms ease-out;
}
.classification-bar.visible .cb-rule { transform: scaleX(1); }
.cb-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.7rem 1rem;
    font-family: var(--font-label);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--dust);
    text-transform: uppercase;
    text-align: center;
}
.cb-segment {
    color: var(--umber);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.classification-bar.visible .cb-segment { opacity: 1; transform: translateY(0); }
.classification-bar.visible .cb-segment:nth-child(2)  { transition-delay: 100ms; }
.classification-bar.visible .cb-segment:nth-child(4)  { transition-delay: 200ms; }
.classification-bar.visible .cb-segment:nth-child(6)  { transition-delay: 300ms; }
.classification-bar.visible .cb-segment:nth-child(8)  { transition-delay: 400ms; }
.cb-dot { color: var(--gold); font-size: 1rem; line-height: 1; }

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.footer-rule {
    min-height: 30vh;
    padding: 8vh clamp(20px, 6vw, 96px) 6vh;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
}
.footer-rule .cb-rule {
    display: block;
    width: min(600px, 70vw);
    height: 1px;
    background: var(--rule);
}
.footer-imprint {
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--dust);
    text-transform: uppercase;
    text-align: center;
}

/* ----------------------------------------------------------
   Reveal animations
   ---------------------------------------------------------- */
.reveal-fade {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal-fade.shown {
    opacity: 1;
    transform: translateY(0);
}

/* Typewriter cursor */
.typewriter {
    position: relative;
    white-space: pre-wrap;
}
.typewriter .tw-cursor {
    display: inline-block;
    width: 1px;
    height: 1.05em;
    background: var(--umber);
    margin-left: 1px;
    transform: translateY(0.18em);
    animation: cursorBlink 1.06s steps(2, start) infinite;
}
.typewriter.tw-done .tw-cursor {
    animation: cursorFade 800ms ease-out forwards;
}
@keyframes cursorBlink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes cursorFade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 980px) {
    :root { --hex-w: 260px; --hex-h: 300px; }
    .hex-grid-3 {
        grid-template-columns: var(--hex-w);
        gap: 24px;
    }
    .hex-offset-up,
    .hex-offset-down { transform: scale(0.85); }
    .hex-offset-up.assembled,
    .hex-offset-down.assembled { transform: scale(1.002) rotateX(var(--rest-rx, 0deg)) rotateY(var(--rest-ry, 0deg)); }
    .hero-inner { flex-direction: column; padding: 8% 8%; gap: 1rem; }
    .hero-collage { flex: 0 0 auto; max-width: 220px; }
    .progress-stem { right: 8px; transform: translateY(-50%) scale(0.85); }
    .row { padding: 6vh clamp(16px, 5vw, 48px); }
}

@media (max-width: 540px) {
    :root { --hex-w: 230px; --hex-h: 270px; }
    .hero-text h1 { font-size: clamp(1.75rem, 8vw, 2.3rem); }
    .hex-cell p { font-size: 0.78rem; }
    .stem-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hex-cell, .hero-hex {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .typewriter .tw-cursor { animation: none; opacity: 0; }
    .ink-line path { stroke-dashoffset: 0; }
    .reveal-fade { opacity: 1; transform: none; }
}