/* eesugi.com — a living typographic memoir
   palette: library-at-dusk octet
   #f3ecdb · #e6dcc1 · #3d2a1a · #7a4a25 · #a87a3c · #1a1208 · #9a7848 · #c4b08a
*/

:root {
    --paper-primary: #f3ecdb;     /* unbleached oat paper */
    --paper-secondary: #e6dcc1;   /* aged cartridge paper */
    --ink: #3d2a1a;               /* iron-gall ink, oxidized */
    --ink-foxed: #7a4a25;         /* foxed margin */
    --gilt: #a87a3c;              /* tarnished gilt */
    --umbra: #1a1208;             /* deep umbra */
    --ochre: #9a7848;             /* late-light ochre */
    --speckle: #c4b08a;           /* foxing speckle */

    --serif-body: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    --serif-display: 'DM Serif Display', 'Playfair Display', Georgia, serif;
    --serif-title: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --hand: 'Caveat', 'Inter', cursive;
    --plex-italic: 'IBM Plex Serif', 'EB Garamond', serif;

    --paper-curve: cubic-bezier(0.32, 0.04, 0.30, 1.00);
}

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

html, body {
    background: var(--paper-primary);
    color: var(--ink);
    font-family: var(--serif-body);
    font-size: 19.5px;
    line-height: 1.74;
    font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    overflow-x: hidden;
    hyphens: auto;
}

body {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 12%, rgba(154, 120, 72, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 78%, rgba(168, 122, 60, 0.05) 0%, transparent 50%),
        var(--paper-primary);
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* —— Foxing layer —— */
.foxing-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.foxing-layer .speck {
    position: absolute;
    background: var(--speckle);
    border-radius: 50% 40% 60% 30%;
    opacity: 0.5;
    filter: blur(0.3px);
}

/* —— Persistent gutter —— */
.gutter {
    position: fixed;
    top: 0;
    left: 38%;
    width: 14%;
    height: 100vh;
    z-index: 4;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gutter::before {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(122, 74, 37, 0.18) 12%,
        rgba(122, 74, 37, 0.18) 88%,
        transparent 100%);
}

.gutter-track {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--plex-italic);
    font-style: italic;
    font-size: 11px;
    color: var(--ink-foxed);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    padding: 14px 10px;
    background: rgba(243, 236, 219, 0.55);
    backdrop-filter: blur(0.5px);
}

.folio-current {
    font-size: 13px;
    color: var(--ink);
    font-feature-settings: "onum" 1;
}

.folio-current.gilt-mark {
    color: var(--gilt);
}

.folio-tick {
    color: var(--ink-foxed);
    opacity: 0.6;
}

.folio-secondary {
    font-size: 10px;
    color: var(--ink-foxed);
    opacity: 0.78;
}

/* —— Manuscript stack —— */
.manuscript {
    position: relative;
    z-index: 2;
    width: 100%;
}

.leaf {
    position: relative;
    width: 100%;
    min-height: 140vh;
    padding: 6vh 4vw;
    margin: -2vh 0;
    transform-origin: center center;
    transition: transform 1.4s var(--paper-curve);
}

.leaf-01 { transform: rotate(-1.4deg); }
.leaf-02 { transform: rotate(1.6deg); }
.leaf-03 { transform: rotate(-2.2deg); }
.leaf-04 { transform: rotate(0.8deg); }
.leaf-05 { transform: rotate(-1.0deg); }
.leaf-06 { transform: rotate(1.4deg); }
.leaf-07 { transform: rotate(-1.8deg); }
.leaf-08 { transform: rotate(0.6deg); }
.leaf-09 { transform: rotate(-0.5deg); }

.leaf-paper {
    position: relative;
    background: var(--paper-primary);
    padding: 8vh 7vw;
    min-height: 130vh;
    box-shadow:
        0 1px 0 rgba(122, 74, 37, 0.08),
        0 18px 48px -28px rgba(26, 18, 8, 0.18),
        inset 0 0 80px rgba(168, 122, 60, 0.04);
    border-radius: 2px;
    overflow: hidden;
}

.leaf-paper.paper-secondary {
    background: var(--paper-secondary);
}

/* deckled edge — radial-clip illusion via SVG-ish border-image fallback */
.leaf-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(122, 74, 37, 0.14);
    border-radius: 2px;
    pointer-events: none;
}

.leaf-paper::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(122, 74, 37, 0.08);
    pointer-events: none;
}

/* —— Dropped glyph —— */
.dropped-glyph {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.8s var(--paper-curve), transform 1.8s var(--paper-curve);
    will-change: opacity, transform;
}

.leaf.in-view .dropped-glyph {
    opacity: 1;
    transform: translateY(0);
}

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

.glyph-text {
    fill: var(--ink);
    font-feature-settings: "onum" 1, "swsh" 1, "salt" 1, "dlig" 1;
    animation: ink-breathe 6s var(--paper-curve) infinite;
}

@keyframes ink-breathe {
    0%, 100% { filter: drop-shadow(0 0 0.4px rgba(154, 120, 72, 0.5)); }
    50%      { filter: drop-shadow(0 0 0.7px rgba(154, 120, 72, 0.7)); }
}

.glyph-eb         { font-family: 'EB Garamond', serif; font-weight: 500; }
.glyph-eb-italic  { font-family: 'EB Garamond', serif; font-weight: 500; font-style: italic; }
.glyph-cormorant-italic { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; }
.glyph-dm         { font-family: 'DM Serif Display', serif; font-weight: 400; }
.glyph-playfair   { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; }
.glyph-gilt       { fill: var(--gilt); }

/* leaf-specific dropped glyph placement */
.dropped-e        { width: 540px; height: 540px; top: 14vh; left: -3vw; }
.dropped-pilcrow  { width: 480px; height: 540px; top: 18vh; right: -2vw; }
.dropped-eszett   { width: 580px; height: 700px; top: 6vh; left: -2vw; }
.dropped-manicule { width: 600px; height: 600px; top: 10vh; right: -3vw; cursor: pointer; pointer-events: auto; }
.dropped-fleuron  { width: 520px; height: 520px; top: 18vh; left: 30vw; }
.dropped-ampersand{ width: 640px; height: 660px; top: 8vh; right: -4vw; }
.dropped-interrobang { width: 460px; height: 540px; top: 12vh; left: -2vw; }
.dropped-section  { width: 580px; height: 700px; top: 4vh; right: -1vw; }
.dropped-end      { width: 720px; height: 720px; top: 22vh; left: 50%; transform: translateX(-50%) translateY(8px); }

.leaf.in-view .dropped-end { transform: translateX(-50%) translateY(0); }

/* —— Leaf titles —— */
.leaf-title {
    font-family: var(--serif-title);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-transform: lowercase;
    margin-bottom: 4vh;
    position: relative;
    z-index: 3;
}

.leaf-title em {
    font-style: italic;
}

.leaf-title-final {
    font-style: italic;
    color: var(--umbra);
    font-size: clamp(3rem, 7vw, 5.4rem);
    text-align: center;
    margin-top: 14vh;
    margin-bottom: 4vh;
}

/* —— Body prose —— */
.body-prose {
    font-family: var(--serif-body);
    font-size: 19.5px;
    line-height: 1.74;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 1.4em;
    font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "dlig" 1, "hlig" 1, "calt" 1;
    text-align: justify;
    hyphens: auto;
}

.body-prose em {
    font-style: italic;
}

.body-prose .lead {
    font-size: 22px;
    line-height: 1.6;
}

.body-prose .intro-line {
    font-style: italic;
    color: var(--ink-foxed);
    margin-bottom: 2em;
    font-size: 17px;
}

.body-prose .hint {
    font-family: var(--hand);
    font-size: 17px;
    color: var(--ink-foxed);
    font-style: normal;
}

/* —— Broadside / pillar layouts —— */
.broadside {
    position: relative;
    max-width: 62ch;
    margin-left: 6vw;
    z-index: 3;
}

.broadside.narrow {
    max-width: 48ch;
}

.pillar {
    position: relative;
    width: 38ch;
    z-index: 3;
}

.pillar-left {
    margin-left: 4vw;
    margin-bottom: 4vh;
}

.pillar-right {
    margin-left: auto;
    margin-right: 6vw;
    transform: rotate(-0.6deg);
    margin-top: 4vh;
}

/* —— Annotation pillars (Caveat) —— */
.annotation {
    position: absolute;
    width: 22ch;
    font-family: var(--hand);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
    transform: rotate(var(--tilt, 3deg));
    transform-origin: top left;
    z-index: 5;
    padding: 4px 8px;
}

.annotation-r {
    right: 4vw;
}

.annotation p {
    font-style: normal;
}

.annotation .anno-attrib {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-foxed);
}

/* default annotation top spread */
.leaf-01 .annotation-r { top: 50%; }

/* —— Leaf 01 specifics —— */
.colophon-line {
    margin-top: 6vh;
    margin-left: 6vw;
    font-family: var(--plex-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-foxed);
    letter-spacing: 0.06em;
    z-index: 3;
    position: relative;
}

.colophon-line .folio-mark {
    color: var(--ink);
    font-feature-settings: "onum" 1;
}

.colophon-line .sep {
    margin: 0 8px;
    color: var(--ink-foxed);
}

.colophon-line .date-stamp {
    font-feature-settings: "onum" 1, "smcp" 1;
}

/* —— Leaf 03: catalogue —— */
.catalogue {
    list-style: none;
    margin: 4vh 0 0 4vw;
    counter-reset: cat;
    max-width: 70ch;
    z-index: 3;
    position: relative;
}

.catalogue li {
    display: grid;
    grid-template-columns: 4ch 1fr;
    grid-template-rows: auto auto;
    column-gap: 1ch;
    padding: 0.45em 0;
    border-bottom: 1px dotted rgba(122, 74, 37, 0.22);
    font-family: var(--serif-body);
    font-size: 17px;
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
    transform: rotate(var(--tilt, 0deg));
    transform-origin: left center;
    font-feature-settings: "onum" 1, "kern" 1;
}

.catalogue .cat-num {
    grid-row: 1 / 3;
    font-family: var(--plex-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-foxed);
    letter-spacing: 0.04em;
    padding-top: 0.25em;
    text-align: right;
    padding-right: 0.6ch;
}

.catalogue .cat-title {
    color: var(--ink);
}

.catalogue .cat-meta {
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-foxed);
    grid-column: 2;
    line-height: 1.35;
    font-feature-settings: "onum" 1;
}

/* —— Leaf 05: catch-stitch —— */
.catch-stitch {
    position: absolute;
    left: 4%;
    right: 4%;
    width: 92%;
    height: 30px;
    top: 38%;
    z-index: 2;
    opacity: 0.85;
}

/* —— Leaf 06: pairings —— */
.pairings {
    list-style: none;
    margin: 4vh 0 0 8vw;
    max-width: 38ch;
    columns: 2;
    column-gap: 4ch;
    z-index: 3;
    position: relative;
}

.pairings li {
    break-inside: avoid;
    padding: 0.6em 0;
    border-bottom: 1px solid rgba(122, 74, 37, 0.14);
    font-family: var(--serif-body);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 0.6ch;
}

.pairings .pair-a, .pairings .pair-b {
    font-feature-settings: "smcp" 1, "kern" 1;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.pairings .amp {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--gilt);
    font-size: 1.4em;
    line-height: 0.8;
    padding: 0 0.2ch;
}

/* —— Leaf 08: citation —— */
.citation-block {
    margin: 4vh 0 3vh 6vw;
    max-width: 56ch;
    z-index: 3;
    position: relative;
}

.citation-line {
    font-family: var(--serif-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-foxed);
    font-feature-settings: "onum" 1;
    text-indent: -0.4em;
    padding-left: 0.4em;
}

.citation-line sup {
    font-size: 0.75em;
    color: var(--gilt);
    margin: 0 0.1em;
}

.footnotes {
    list-style: none;
    margin: 2vh 0 0 6vw;
    max-width: 64ch;
    counter-reset: fn;
    z-index: 3;
    position: relative;
}

.footnotes li {
    font-family: var(--serif-body);
    font-size: 19.5px;
    line-height: 1.74;
    color: var(--ink);
    margin-bottom: 1.2em;
    text-indent: -0.6em;
    padding-left: 0.6em;
    text-align: justify;
    font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "dlig" 1;
}

.footnotes li sup {
    font-size: 0.7em;
    color: var(--gilt);
    margin-right: 0.3em;
    vertical-align: super;
}

/* —— Leaf 09: explicit —— */
.explicit-line {
    font-style: italic;
    text-align: center;
    font-size: 22px;
    color: var(--umbra);
    margin-bottom: 2.2em;
}

.explicit-line .mmxxvi {
    font-feature-settings: "onum" 1, "smcp" 1;
    color: var(--gilt);
    letter-spacing: 0.08em;
}

.signature {
    text-align: center;
    margin-top: 8vh;
    z-index: 3;
    position: relative;
}

.sig-line {
    margin-bottom: 1em;
}

.signature .caveat {
    font-family: var(--hand);
    font-size: 28px;
    color: var(--umbra);
    transform: rotate(-2deg);
    display: inline-block;
}

.sig-folio {
    font-family: var(--plex-italic);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-foxed);
    letter-spacing: 0.06em;
}

.sig-folio .latin {
    font-style: italic;
}

/* —— Decorative absolute elements —— */
.bookworm {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--paper-secondary);
    border-radius: 50% 40% 55% 45%;
    box-shadow:
        0 0 0 0.6px rgba(122, 74, 37, 0.45),
        inset 0 0 2px rgba(26, 18, 8, 0.4);
    z-index: 2;
    pointer-events: none;
}

.leaf-paper.paper-secondary .bookworm {
    background: var(--paper-primary);
}

.coffee-ring {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.botanical {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0.85;
}

.botanical.fern {
    width: 60px;
    height: 200px;
    bottom: 5vh;
    right: 3vw;
}

.botanical.artemisia {
    width: 80px;
    height: 220px;
    top: 6vh;
    left: 2vw;
}

.botanical.yarrow {
    width: 80px;
    height: 220px;
    bottom: 4vh;
    right: 4vw;
}

/* —— Manicule hover/tap effect (only interactive element) —— */
.dropped-manicule {
    transition: transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dropped-manicule:hover,
.dropped-manicule.poked {
    transform: rotate(0deg);
}

.leaf-04.poked {
    transform: rotate(1.6deg) !important;
    transition: transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* —— Body text fade in —— */
.broadside, .pillar, .catalogue, .pairings, .citation-block, .footnotes, .signature {
    opacity: 0.6;
    transition: opacity 1.8s var(--paper-curve);
}

.leaf.in-view .broadside,
.leaf.in-view .pillar,
.leaf.in-view .catalogue,
.leaf.in-view .pairings,
.leaf.in-view .citation-block,
.leaf.in-view .footnotes,
.leaf.in-view .signature {
    opacity: 1;
}

.annotation {
    opacity: 0;
    transition: opacity 2s var(--paper-curve);
}

.leaf.in-view .annotation {
    opacity: 1;
}

/* —— Responsive: smaller screens —— */
@media (max-width: 900px) {
    html, body { font-size: 17px; }

    .gutter {
        left: 88%;
        width: 12%;
    }

    .leaf {
        padding: 4vh 3vw;
    }

    .leaf-paper {
        padding: 6vh 6vw;
    }

    .broadside {
        margin-left: 0;
        max-width: 100%;
    }

    .pillar {
        width: 100%;
    }

    .pillar-right {
        margin-right: 0;
        margin-left: 0;
    }

    .annotation {
        position: relative;
        right: auto;
        top: auto !important;
        margin: 1.6em 0;
        width: auto;
        max-width: 90%;
    }

    .dropped-e, .dropped-pilcrow, .dropped-eszett, .dropped-manicule,
    .dropped-fleuron, .dropped-ampersand, .dropped-interrobang, .dropped-section {
        width: 320px;
        height: 360px;
        opacity: 0.55;
    }

    .dropped-end {
        width: 280px;
        height: 280px;
    }

    .pairings {
        columns: 1;
        margin-left: 0;
    }

    .catalogue {
        margin-left: 0;
    }

    .catalogue li {
        font-size: 15px;
    }

    .catch-stitch {
        height: 24px;
    }

    .leaf-title {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
    }

    .leaf-01 { transform: rotate(-0.6deg); }
    .leaf-02 { transform: rotate(0.7deg); }
    .leaf-03 { transform: rotate(-0.9deg); }
    .leaf-04 { transform: rotate(0.4deg); }
    .leaf-05 { transform: rotate(-0.5deg); }
    .leaf-06 { transform: rotate(0.6deg); }
    .leaf-07 { transform: rotate(-0.7deg); }
    .leaf-08 { transform: rotate(0.3deg); }
    .leaf-09 { transform: rotate(-0.2deg); }
}

/* —— Print —— */
@media print {
    .gutter, .foxing-layer { display: none; }
    .leaf { transform: none !important; page-break-after: always; }
}