/* ============================================================
   chika.monster — botanical monograph of an unclassified being
   Palette:
     #f1ece1  Mounting Card (bg)
     #1f1d18  Iron-Gall Ink (body text)
     #5a4b34  Sepia Annotation (sidenotes, numerals)
     #7a8b6f  Pressed-Leaf Olive (drop-cap, leaves, hairline)
     #b85a3a  Madder Red (only "monster" + colophon stamp)
     #d8c79a  Foxed Edge (gradient inner stop)
     #e8d9b8  Dawn Press (gradient outer stop)
   Type: EB Garamond + Cormorant Garamond — garamond-classic discipline
   ============================================================ */

:root {
    --card: #f1ece1;
    --ink: #1f1d18;
    --sepia: #5a4b34;
    --olive: #7a8b6f;
    --madder: #b85a3a;
    --foxed: #d8c79a;
    --dawn: #e8d9b8;
    --measure: 64ch;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* misted edge-only ribbon: glow at top/bottom, flat cream in the reading band */
    background: linear-gradient(180deg,
        var(--dawn) 0%,
        var(--foxed) 18%,
        var(--card) 35%,
        var(--card) 65%,
        var(--foxed) 82%,
        var(--dawn) 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: "EB Garamond", Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.65;
    font-feature-settings: 'onum', 'kern', 'liga';
    font-variant-numeric: oldstyle-nums;
    min-height: 100vh;
    overflow-x: hidden;
}

/* mimeograph paper grain — 4% over a multiply layer */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    opacity: 0.045;
    mix-blend-mode: multiply;
    filter: url(#paper-grain);
    background: #fff;
}

/* ---------------- The herbarium sheet: 12-col grid ---------------- */
.sheet {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 4vw, 3rem) 6rem;
    position: relative;
}

.folio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1rem, 2.4vw, 2.2rem);
    position: relative;
    padding-block: clamp(1.6rem, 4vw, 3rem);
}

/* content sits in cols 2–7 (the specimen mount) */
.folio__mount {
    grid-column: 2 / 8;
    max-width: var(--measure);
}

/* gutter in cols 8–9; cols 10–12 are deliberate margin air */
.folio__gutter {
    grid-column: 8 / 10;
    position: relative;
    padding-left: clamp(0.75rem, 1.6vw, 1.4rem);
    /* the thin vertical hairline running the full reading length */
    border-left: 0.5px solid var(--ink);
    font-family: "Cormorant Garamond", Georgia, serif;
}

/* head folio: full reading width for the wordmark */
.folio--head {
    border-bottom: 0.5px solid var(--olive);
    margin-bottom: 1.5rem;
}

/* ---------------- F-bar 1: wordmark + species line ---------------- */
.kicker {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: var(--sepia);
    margin: 0 0 1.4rem;
}

.wordmark {
    font-family: "EB Garamond", Georgia, serif;
    font-weight: 500;
    font-size: clamp(2.6rem, 4.8vw, 4.4rem);
    letter-spacing: -0.012em;
    line-height: 1.05;
    margin: 0 0 0.5rem;
    color: var(--ink);
}
.wordmark__dot { color: var(--sepia); }
.wordmark__monster { color: var(--madder); }   /* the ONLY mass of madder besides the colophon stamp */

.species-line {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--sepia);
    margin: 0 0 1.6rem;
}

.lede {
    font-size: 1.18rem;
    line-height: 1.6;
    margin: 0;
    max-width: 60ch;
}

/* ---------------- Slide-reveal section banners ---------------- */
.banner {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 0 0 1.6rem;
    padding: 0.3rem 0 0.6rem;
    border-bottom: 0.5px solid var(--ink);
    overflow: hidden;
    /* slide in from the right gutter */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.banner.is-revealed {
    clip-path: inset(0 0 0 0);
}

.banner__cap {
    font-family: "EB Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 5.6rem;
    line-height: 0.85;
    color: var(--olive);
    align-self: flex-start;
    padding: 0.4rem 0.6rem 0 0;
}

.banner__num {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: var(--sepia);
}

.banner__title {
    font-family: "EB Garamond", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}

/* ---------------- Prose: typeset like a printed book ---------------- */
.prose {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.prose.is-visible { opacity: 1; }

.prose p {
    margin: 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* 1em first-line indent on every paragraph after the first; no inter-para margin */
.prose p + p { text-indent: 1em; }

.prose em {
    font-style: italic;
    color: var(--sepia);
}

/* drop-cap after the section banner */
.prose > p:first-of-type::first-letter {
    font-family: "EB Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 3.4rem;
    line-height: 0.85;
    float: left;
    padding: 0.18rem 0.55rem 0 0;
    color: var(--olive);
}

/* ---------------- Right gutter: sidenotes, plate numbers, leaves, pins --- */
.plate-no {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--sepia);
    margin-bottom: 1rem;
}

.sidenote {
    font-family: "EB Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--sepia);
    margin: 0 0 0.7rem;
}

.pin-tape {
    display: block;
    width: 18px;
    height: 0.5px;
    background: var(--olive);
    margin-top: 1.4rem;
}

/* pressed-leaf silhouettes — outline only, hand-pinned angles */
.leaf {
    display: block;
    fill: none;
    stroke: var(--olive);
    stroke-width: 0.6;
    height: 120px;
    width: auto;
    margin: 1.2rem 0 0.3rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.leaf.is-visible { opacity: 1; }
.leaf--lanceolate { height: 140px; transform: rotate(-7deg); }
.leaf--cordate    { height: 100px; transform: rotate(12deg); }
.leaf--pinnate    { height: 130px; transform: rotate(-3deg); }

.leaf-label {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--sepia);
    margin: 0 0 0.9rem;
}

/* ---------------- Plate V: geometric-abstract specimen ---------------- */
.folio--plate .folio__mount { max-width: none; grid-column: 2 / 8; }

.specimen-plate {
    margin: 0.5rem 0 0;
}
.specimen-plate__art {
    display: block;
    width: 100%;
    height: auto;
    background: var(--card);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.specimen-plate__art.is-visible { opacity: 1; }

.specimen-plate__cap {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--sepia);
    margin-top: 0.8rem;
}

/* ---------------- Colophon ---------------- */
.folio--colophon { padding-bottom: 1rem; }

.colophon__sign {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.6rem;
    text-indent: 0 !important;
}
.wax-stamp { flex: 0 0 auto; width: 28px; height: 28px; display: block; }
.wax-stamp svg { display: block; width: 28px; height: 28px; }
.colophon__imprint {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--sepia);
}

/* ---------------- Mobile: F-pattern degrades to single column ---------------- */
@media (max-width: 760px) {
    .folio {
        display: block;
        padding-block: 2.2rem;
    }
    .folio__mount { max-width: none; }
    .folio--plate .folio__mount { grid-column: auto; }

    /* gutter collapses underneath as small italic captions */
    .folio__gutter {
        border-left: none;
        border-top: 0.5px solid var(--olive);
        padding-left: 0;
        padding-top: 1rem;
        margin-top: 1.6rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.4rem;
        align-items: baseline;
    }
    .folio__gutter .sidenote,
    .folio__gutter .plate-no,
    .folio__gutter .leaf-label { margin-bottom: 0; }
    .pin-tape { display: none; }
    .leaf { height: 80px; margin: 0.4rem 0; }

    .banner__cap { font-size: 3.8rem; }
    .prose p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .banner, .prose, .leaf, .specimen-plate__art { transition: none; }
}