/* ============================================================
   ggaji.com — A folio of imagined aubergines
   Palette:
     Aged Rag Paper    #F4EEDC
     Glassine Cream    #E8DEC2
     Bruised Plum      #5A2D55
     Deep Indigo Stem  #3A1F4A
     Sage Calyx        #7C8A4A
     Graphite          #3A3530
     Madder Lake       #C84B3F
   ============================================================ */

:root {
    --rag: #F4EEDC;
    --glassine: #E8DEC2;
    --plum: #5A2D55;
    --indigo: #3A1F4A;
    --sage: #7C8A4A;
    --graphite: #3A3530;
    --madder: #C84B3F;

    --serif: "EB Garamond", "Cormorant Garamond", Georgia, serif;
    --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --hangul: "Nanum Myeongjo", "Cormorant Garamond", serif;
    --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --script: "Pinyon Script", "Cormorant Garamond", cursive;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--rag);
    color: var(--graphite);
    font-family: var(--serif);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.62;
    overflow-x: hidden;
}

body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M3 3 L 6 6 L 18 18 L 19 19 L 17 21 L 5 9 L 2 6 Z' fill='%233A3530' stroke='%233A1F4A' stroke-width='0.4'/><path d='M3 3 L 6 6' stroke='%23F4EEDC' stroke-width='0.6'/></svg>") 2 2, auto;
    min-height: 100vh;
}

a, button, .visitor, .ledger-card, .plate-index a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><g transform='rotate(12 11 11)'><path d='M3 3 L 6 6 L 18 18 L 19 19 L 17 21 L 5 9 L 2 6 Z' fill='%233A3530' stroke='%233A1F4A' stroke-width='0.4'/><path d='M3 3 L 6 6' stroke='%23F4EEDC' stroke-width='0.6'/></g></svg>") 2 2, pointer;
}

/* ============ Paper grain (fixed overlay) ============ */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    opacity: 0.45;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.227  0 0 0 0 0.208  0 0 0 0 0.188  0 0 0 0.085 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
    background-size: 220px 220px;
}

/* ============ Plate index (left margin) ============ */
.plate-index {
    position: fixed;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    z-index: 50;
    user-select: none;
}
.plate-index ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.plate-index a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--graphite);
    font-family: var(--display);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    opacity: 0.55;
    transition: opacity 280ms, color 280ms;
}
.plate-index a .numeral {
    border-bottom: 0.6px solid var(--graphite);
    padding: 1px 4px 0;
    line-height: 1;
}
.plate-index a .leaf {
    width: 12px; height: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 280ms, transform 280ms;
}
.plate-index a:hover { opacity: 0.85; color: var(--indigo); }
.plate-index a.active {
    color: var(--plum);
    opacity: 1;
}
.plate-index a.active .numeral { border-bottom-color: var(--plum); }
.plate-index a.active .leaf { opacity: 1; transform: translateX(0); }

/* ============ Language toggle (three dots) ============ */
.lang-toggle {
    position: fixed;
    bottom: 28px;
    left: 32px;
    z-index: 50;
    background: transparent;
    border: 0;
    padding: 8px;
    display: flex;
    gap: 4px;
}
.lang-toggle .dot {
    width: 4px; height: 4px;
    background: var(--graphite);
    border-radius: 50%;
    opacity: 0.65;
    transition: background 280ms, opacity 280ms;
}
.lang-toggle.active .dot { background: var(--plum); opacity: 1; }
.lang-toggle:hover .dot { opacity: 1; }

/* ============ Folio main column ============ */
.folio {
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding-left: 60px;
    padding-right: 32px;
    position: relative;
}

/* ============ Plate base ============ */
.plate {
    position: relative;
    min-height: 110vh;
    padding: 6vh 2vw 8vh;
    background: var(--rag);
}

/* registration crosshairs */
.reg {
    position: absolute;
    width: 14px; height: 14px;
    opacity: 0.55;
    pointer-events: none;
}
.reg svg { width: 100%; height: 100%; }
.reg-tl { top: 18px; left: 18px; }
.reg-tr { top: 18px; right: 18px; }
.reg-bl { bottom: 18px; left: 18px; }
.reg-br { bottom: 18px; right: 18px; }

/* ============ Watercolor blooms ============ */
.watercolor-blooms {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.watercolor-blooms .bloom {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(90,45,85,0.18), rgba(90,45,85,0.06) 60%, transparent 80%);
    filter: blur(8px);
    opacity: 0.5;
    transform: translate(-50%, -50%);
}

/* ============ Plate I — Frontispiece ============ */
.plate-frontispiece {
    min-height: 110vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.frontispiece-inner {
    text-align: center;
    position: relative;
}
.frontispiece-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    color: var(--plum);
    font-size: clamp(7rem, 16vw, 14rem);
    line-height: 1.0;
    margin: 0;
    letter-spacing: -0.005em;
    position: relative;
    display: inline-block;
}
.frontispiece-title .title-en { display: block; }
.frontispiece-title .title-han {
    display: block;
    font-family: var(--hangul);
    font-style: normal;
    font-size: 0.55em;
    color: var(--indigo);
    margin-top: 0.1em;
    letter-spacing: 0.02em;
}
.hanging-aubergine {
    position: absolute;
    width: 90px; height: 180px;
    right: 4%;
    top: 60%;
    transform-origin: 50% 0;
}
.hanging-aubergine .sway {
    transform-origin: 60px 0;
    animation: sway 6s ease-in-out infinite;
}
@keyframes sway {
    0%, 100% { transform: rotate(-1.8deg); }
    50% { transform: rotate(1.8deg); }
}

.frontispiece-meanings {
    margin: 1.6rem 0 0;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--graphite);
    text-transform: lowercase;
    letter-spacing: 0.18em;
}
.frontispiece-meanings .dot-sep {
    display: inline-block;
    margin: 0 0.6em;
    color: var(--plum);
}
.frontispiece-subcaption {
    margin: 1.2rem auto 0;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--graphite);
    max-width: 540px;
    line-height: 1.5;
}

/* ============ Plate numerals (II–VIII) ============ */
.plate-numeral {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    color: var(--plum);
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    letter-spacing: -0.005em;
    line-height: 1.18;
    margin: 0 0 2.4rem;
    grid-column: 1 / -1;
    border-bottom: 0.6px solid var(--graphite);
    padding-bottom: 0.6rem;
}

/* ============ Specimen plate grid ============ */
.plate.specimen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 4vw;
    row-gap: 3.2vh;
    grid-template-areas:
        "numeral numeral"
        "specimen caption"
        "description annotations";
}
.plate.specimen .plate-numeral { grid-area: numeral; }
.plate.specimen .specimen-figure { grid-area: specimen; }
.plate.specimen .caption-block { grid-area: caption; }
.plate.specimen .description { grid-area: description; }
.plate.specimen .annotations { grid-area: annotations; }

/* specimen figure */
.specimen-figure {
    position: relative;
    margin: 0;
    z-index: 2;
}
.specimen-svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
}
.scale-bar {
    margin-top: 0.4rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--graphite);
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 6px;
}
.scale-bar .bar {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--graphite);
    border-left: 1px solid var(--graphite);
    border-right: 1px solid var(--graphite);
    height: 6px;
    background: linear-gradient(to right, transparent 0, transparent 1px, var(--graphite) 1px, var(--graphite) 100%);
}

/* caption block */
.caption-block {
    position: relative;
    z-index: 2;
    padding-top: 1rem;
    max-width: 420px;
}
.caption-block .latin {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: var(--plum);
    margin: 0 0 0.8rem;
    line-height: 1.18;
}
.caption-block .common-names {
    margin: 0 0 0.8rem;
    line-height: 1.5;
    color: var(--graphite);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
}
.caption-block .common-names span { display: block; }
.caption-block .common-names .korean {
    font-family: var(--hangul);
    color: var(--indigo);
}
.caption-block .common-names .romanization {
    font-family: var(--display);
    font-style: italic;
    color: var(--graphite);
}
.caption-block .common-names .english {
    font-family: var(--display);
    font-style: italic;
    color: var(--plum);
    opacity: 0.85;
}
.caption-block .notation {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--graphite);
    opacity: 0.85;
    margin: 0 0 0.6rem;
}
.caption-block .onomatopoeia {
    font-family: var(--display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--graphite);
    opacity: 0.85;
    margin: 0;
}

/* description (lower-left) */
.description {
    position: relative;
    z-index: 2;
    max-width: 480px;
    padding-right: 1.5vw;
    color: var(--graphite);
}
.description p {
    margin: 0;
    text-indent: 1.4em;
    hyphens: auto;
}
.description p + p { margin-top: 0.6rem; }
.dropcap {
    font-family: var(--script);
    color: var(--plum);
    font-size: 4.6em;
    line-height: 0.85;
    float: left;
    padding: 0.18em 0.16em 0 0;
    margin-top: -0.06em;
    font-weight: 400;
}
.lang-en .dropcap, .lang-ko .dropcap { display: inline-block; }

/* annotations (lower-right) */
.annotations {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    align-content: start;
    padding-top: 0.5rem;
}
.anno-item svg {
    width: 100%;
    max-width: 90px;
    height: auto;
    display: block;
    margin: 0 auto 0.4rem;
}
.anno-item p {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--graphite);
    opacity: 0.75;
    text-align: center;
    margin: 0;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

/* marginalia (right margin) */
.marginalia {
    position: absolute;
    right: -36px;
    top: 18%;
    width: 180px;
    z-index: 3;
    transform: translateX(0);
    color: var(--graphite);
    opacity: 0.6;
    font-family: var(--display);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.4;
}
.marginalia p { margin: 0 0 0.7rem; }
.marginalia .arrow { color: var(--indigo); margin-right: 4px; }
.marginalia .swatch-row {
    display: flex;
    gap: 6px;
    margin-bottom: 0.2rem;
}
.marginalia .swatch {
    display: inline-block;
    width: 18px; height: 18px;
    border: 0.5px solid var(--graphite);
    border-radius: 1px;
}
.marginalia .swatch-name {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    margin: 0 0 0.6rem;
}
.marginalia .anno-quiet {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* vine connector */
.vine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    width: 100%; height: 100%;
}
.vine path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.vine .vine-leaves path {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1) 1.4s;
}
.plate.is-visible .vine .vine-trunk { stroke-dashoffset: 0; }
.plate.is-visible .vine .vine-branch {
    stroke-dashoffset: 0;
    transition-delay: 0.7s;
}
.plate.is-visible .vine .vine-leaves path { transform: scale(1); }

/* ============ Visitor (madder-red creature) ============ */
.visitor {
    position: absolute;
    z-index: 4;
    width: 90px;
    opacity: 0;
    transition: opacity 900ms ease;
    pointer-events: auto;
}
.visitor svg { width: 100%; height: auto; display: block; }
.plate.is-visible .visitor {
    opacity: 1;
    transition-delay: 1.6s;
}

/* placement, varied per plate */
#plate-2 .visitor-bird { top: 16%; right: 8%; transform: rotate(-6deg); }
#plate-3 .visitor-butterfly { top: 36%; right: 14%; }
#plate-4 .visitor-snail { bottom: 22%; right: 10%; width: 80px; }
#plate-5 .visitor-beetle { top: 22%; right: 12%; width: 72px; }
#plate-6 .visitor-moth { top: 28%; right: 14%; width: 80px; }
#plate-7 .visitor-firefly { top: 30%; right: 10%; width: 80px; }

/* visitor caption (graphite, 4-second hover reveal) */
.visitor-caption {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 220px;
    text-align: center;
    font-family: var(--display);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--graphite);
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease;
}
.visitor.show-caption .visitor-caption { opacity: 0.85; }

/* bird head-tilt every 11s */
.bird {
    transform-origin: 32px 32px;
    animation: tilt 11s ease-in-out infinite;
}
@keyframes tilt {
    0%, 92%, 100% { transform: rotate(0); }
    94% { transform: rotate(-6deg); }
    96% { transform: rotate(0); }
}
.bird-eye {
    animation: blink 11s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes blink {
    0%, 90%, 100% { transform: scaleY(1); }
    92% { transform: scaleY(0.05); }
    94% { transform: scaleY(1); }
}

/* butterfly wings flutter */
.wing {
    transform-origin: 50px 40px;
    animation: flutter 4.8s ease-in-out infinite;
}
.wing-l { animation-delay: 0s; }
.wing-r { animation-delay: 0.06s; transform-origin: 50px 40px; }
@keyframes flutter {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.4); }
}

/* moth slower flutter */
.moth .wing {
    transform-origin: 50px 36px;
    animation: flutter 6.5s ease-in-out infinite;
}

/* firefly soft pulse */
.firefly ellipse:nth-child(2) {
    animation: pulse 3.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.45; }
}

/* snail gentle slide */
.snail {
    transform: translateX(0);
    animation: slide 8s ease-in-out infinite;
}
@keyframes slide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}

/* beetle tiny twitch */
.beetle {
    animation: twitch 7s ease-in-out infinite;
    transform-origin: 50px 38px;
}
@keyframes twitch {
    0%, 90%, 100% { transform: rotate(0); }
    93% { transform: rotate(-3deg); }
    96% { transform: rotate(0); }
}

/* ============ Doubled-consonant tremor ============ */
.tremor {
    display: inline-block;
    animation: tremor 1.6s steps(4) 1;
}
.tremor:hover { animation: tremor 0.28s steps(4) 1; }
@keyframes tremor {
    0% { transform: translateX(0); }
    25% { transform: translateX(0.4px); }
    50% { transform: translateX(-0.4px); }
    75% { transform: translateX(0.4px); }
    100% { transform: translateX(0); }
}

/* ============ Glassine interleaf ============ */
.glassine {
    position: relative;
    height: 18vh;
    background: var(--glassine);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0.6px dashed rgba(58,53,48,0.18);
    border-bottom: 0.6px dashed rgba(58,53,48,0.18);
}
.glassine::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='gg'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.227  0 0 0 0 0.208  0 0 0 0 0.188  0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23gg)'/></svg>");
    opacity: 0.5;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.glassine .glassine-leaf {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 86px;
    pointer-events: none;
    opacity: 0.55;
    will-change: transform;
}
.glassine .glassine-leaf svg { width: 100%; height: auto; }
.glassine .proverb {
    position: relative;
    z-index: 2;
    font-family: var(--hangul);
    color: var(--graphite);
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    text-align: center;
    margin: 0;
    max-width: 60%;
    line-height: 1.55;
}
.glassine .proverb em {
    font-style: italic;
}
.glassine .seal {
    display: inline-block;
    margin-left: 0.6em;
    color: #B8332A;
    font-family: var(--hangul);
    font-weight: 700;
    font-size: 1.1em;
    background: rgba(200, 75, 63, 0.12);
    border: 0.8px solid #B8332A;
    padding: 1px 5px 0;
    border-radius: 1px;
    transform: rotate(-3deg) translateY(2px);
    letter-spacing: 0;
}

/* ============ Plate VIII — Index ledger ============ */
.plate-index-page {
    min-height: 110vh;
    padding-top: 8vh;
}
.ledger-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 1.6rem;
}
.ledger-card {
    background: var(--glassine);
    border: 0.6px solid rgba(58,53,48,0.25);
    box-shadow:
        0 1px 0 rgba(58,53,48,0.04),
        inset 0 0 12px rgba(90,45,85,0.04);
    padding: 22px 22px 18px;
    position: relative;
    transition: transform 600ms cubic-bezier(0.4,0,0.2,1);
}
.ledger-card .seal {
    position: absolute;
    top: 12px; right: 14px;
    color: #B8332A;
    font-family: var(--hangul);
    font-weight: 700;
    font-size: 0.9rem;
    background: rgba(200, 75, 63, 0.1);
    border: 0.6px solid #B8332A;
    padding: 0 4px 0;
    border-radius: 1px;
    transform: rotate(-4deg);
}
.ledger-card .thumb {
    width: 60%;
    max-width: 110px;
    height: auto;
    display: block;
    margin: 0 auto 0.8rem;
    transition: transform 600ms cubic-bezier(0.4,0,0.2,1);
    transform-origin: center bottom;
}
.ledger-card:hover .thumb { transform: rotate(1.5deg); }
.ledger-card .latin {
    font-family: var(--display);
    font-style: italic;
    color: var(--plum);
    font-size: 1.05rem;
    margin: 0 0 0.2rem;
    text-align: center;
}
.ledger-card .notation {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--graphite);
    opacity: 0.75;
    text-align: center;
    margin: 0 0 0.6rem;
    letter-spacing: 0.04em;
}
.ledger-card .entry {
    font-family: var(--serif);
    font-size: 0.92rem;
    color: var(--graphite);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* ============ Footer ============ */
.folio-footer {
    margin-top: 6vh;
    padding: 4vh 0 2vh;
    text-align: center;
    border-top: 0.6px solid rgba(58,53,48,0.18);
}
.folio-footer .closing {
    font-family: var(--display);
    font-style: italic;
    color: var(--plum);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.folio-footer .closing-leaf {
    width: 36px;
    height: auto;
    margin: 0 auto 0.6rem;
    display: block;
}
.folio-footer .year {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--graphite);
    opacity: 0.7;
    letter-spacing: 0.16em;
    margin: 0;
}

/* ============ Ggaji-word inline emphasis ============ */
.ggaji-word { font-style: italic; color: var(--plum); }

/* ============ Responsive — narrow viewports ============ */
@media (max-width: 880px) {
    .plate-index { left: 8px; }
    .plate-index a { font-size: 0.8rem; }
    .folio { padding-left: 36px; padding-right: 16px; }
    .plate.specimen {
        grid-template-columns: 1fr;
        grid-template-areas:
            "numeral"
            "specimen"
            "caption"
            "description"
            "annotations";
    }
    .marginalia {
        position: relative;
        right: auto; top: auto;
        width: auto;
        margin-top: 1.2rem;
        opacity: 0.7;
    }
    .annotations { grid-template-columns: repeat(3, 1fr); }
    .ledger-grid { grid-template-columns: 1fr 1fr; }
    .hanging-aubergine { right: 0; top: 65%; width: 60px; height: 120px; }
    #plate-2 .visitor-bird,
    #plate-3 .visitor-butterfly,
    #plate-4 .visitor-snail,
    #plate-5 .visitor-beetle,
    #plate-6 .visitor-moth,
    #plate-7 .visitor-firefly { right: 10px; width: 60px; }
}

@media (max-width: 540px) {
    .ledger-grid { grid-template-columns: 1fr; }
    .annotations { grid-template-columns: 1fr 1fr; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}