/* ============================================================
   munju.org — Munju Rubbings Association
   Wabi-sabi inverted-monochrome scholarship.
   Eight named pigments, dim register, no gradients, no warm.
   ============================================================ */

/* --- pigments --- */
:root {
    --seokmyeok: #0B0B0E;   /* page void */
    --byeokjeo:  #15161A;   /* inset frame surface */
    --banhwa:    #2A2722;   /* sumi-border warm shadow */
    --injuhong:  #A4291F;   /* seal-red */
    --baekji:    #D8D2C2;   /* rubbing impression */
    --somuk:     #7A7468;   /* secondary prose / faded ink */
    --jiyeong:   #3F3A33;   /* impression halftone */
    --chu:       #C4B89A;   /* dust-warm hover highlight */

    --frame-w:    752px;
    --margin:     88px;
    --frame-outer: 928px;   /* 752 + 88 + 88 */
    --unit:       18px;     /* 18 px vertical rhythm */
}

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

html, body {
    background: var(--seokmyeok);
    color: var(--baekji);
    min-height: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

body {
    font-family: "Noto Serif KR", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: -0.005em;
    color: var(--baekji);
    background: var(--seokmyeok);
    min-width: var(--frame-outer);
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum" 1;
}

/* --- ambient dust field, drifts upward, parallax-locked --- */
.dust-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.dust-field .mote {
    position: absolute;
    width: 1px;
    height: 1px;
    background: var(--chu);
    opacity: 0.12;
    border-radius: 50%;
    will-change: transform;
    animation-name: motedrift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes motedrift {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    8%   { opacity: 0.12; }
    92%  { opacity: 0.12; }
    100% { transform: translate3d(0, -110vh, 0); opacity: 0; }
}

/* ============================================================
   page-frame — 752 px fixed, centered, inside void
   88 px inked margin around inset frame on all sides
   ============================================================ */

.page-frame {
    position: relative;
    width: var(--frame-outer);
    margin: 96px auto 96px;
    padding: var(--margin);
    transform: perspective(2400px) rotateX(0deg);
    transform-origin: 50% 12%;
    transition: transform 520ms ease-in;
    z-index: 2;
}

.page-frame.tilt {
    transform: perspective(2400px) rotateX(2.4deg);
    transition: transform 380ms ease-out;
}

/* hand-painted sumi border, lives outside the inset frame box-shadow */
.sumi-border {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--frame-outer);
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* inset frame — the sheet of paper laid on darker stone */
.frame-inset {
    position: relative;
    width: var(--frame-w);
    background: var(--byeokjeo);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px var(--byeokjeo);
    z-index: 2;
    padding: calc(var(--unit) * 3) calc(var(--unit) * 2.6) calc(var(--unit) * 5);
    min-height: 1144px;
    /* z-pattern reading frame */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: calc(var(--unit) * 2);
    row-gap: calc(var(--unit) * 5);
    grid-template-areas:
        "seal cata"
        "rubbing rubbing"
        "colophon colophon"
        "date date";
}

/* (1) seal mark — top-left */
.seal-stamp {
    grid-area: seal;
    display: inline-block;
    width: 56px;
    height: 56px;
    transform: rotate(-1.6deg);
    transform-origin: 30% 30%;
    text-decoration: none;
    margin-top: 4px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

.seal-stamp svg {
    display: block;
}

/* (2) catalogue-number — top-right, set in Recursive */
.catalogue-number {
    grid-area: cata;
    justify-self: end;
    text-align: right;
    font-family: "Recursive", monospace;
    font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -8, "wght" 420;
    color: var(--injuhong);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.04em;
    margin-top: 8px;
    text-transform: uppercase;
}

.catalogue-number .cat-prefix {
    display: inline-block;
    margin-right: 4px;
    color: var(--somuk);
}

.catalogue-number .cat-numeral {
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--baekji);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: -2px;
    margin-left: 2px;
}

.catalogue-number .cat-stamp {
    display: block;
    margin-top: 3px;
    color: var(--injuhong);
    font-size: 11px;
}

/* (3) rubbing impression mid-band, full bleed */
.rubbing-band {
    grid-area: rubbing;
    width: 100%;
    margin-top: calc(var(--unit) * 1);
    text-align: center;
    opacity: 0;
    animation: throughTheePaper 1200ms ease-in-out forwards;
}

@keyframes throughTheePaper {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rubbing-impression {
    display: block;
    width: 100%;
    max-width: var(--frame-w);
    height: auto;
    margin: 0 auto;
}

.rubbing-caption {
    margin-top: calc(var(--unit) * 1.5);
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: var(--somuk);
    text-align: center;
    letter-spacing: 0.01em;
}

.rubbing-caption em[lang="ko"] {
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 600;
    color: var(--baekji);
    border-bottom: 1px solid var(--somuk);
    padding-bottom: 1px;
    margin: 0 2px;
}

.hairline-sub {
    color: var(--somuk);
    font-style: normal;
    font-family: "Noto Serif KR", serif;
    font-size: 12px;
}

/* (4) colophon — bottom-left, prose, dense */
.colophon {
    grid-area: colophon;
    width: 100%;
    max-width: 568px;
}

.colophon-head {
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    color: var(--baekji);
    margin-bottom: calc(var(--unit) * 1.5);
    letter-spacing: 0.005em;
}

.colophon-prose {
    font-family: "Noto Serif KR", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: -0.005em;
    color: var(--baekji);
    margin-bottom: calc(var(--unit) * 1.6);
}

.colophon-list {
    color: var(--somuk);
}

.colophon-tail {
    color: var(--somuk);
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 0;
}

.cat-link {
    color: var(--injuhong);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    padding-bottom: 1px;
    transition: border-color 220ms ease;
}

.cat-link:hover {
    border-bottom-color: var(--injuhong);
}

/* date-stamp — bottom-right, Recursive, per-artifact tuning */
.date-stamp {
    grid-area: date;
    justify-self: end;
    text-align: right;
    font-family: "Recursive", monospace;
    font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -8, "wght" 420;
    color: var(--injuhong);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: calc(var(--unit) * 2);
}

.date-stamp .ds-line {
    display: block;
}

.date-stamp .ds-line + .ds-line {
    margin-top: 2px;
}

/* ============================================================
   foliation — vertical chain of stamped hexagons, right margin
   ============================================================ */

.foliation {
    position: absolute;
    top: calc(var(--margin) + var(--unit) * 6);
    right: calc(var(--margin) - 64px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.foliation .hex {
    display: block;
    width: 44px;
    height: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 280ms ease, filter 280ms ease;
}

.foliation .hex svg {
    display: block;
    width: 44px;
    height: 50px;
    transition: filter 280ms ease;
}

.foliation .hex:hover svg polygon {
    stroke: var(--chu);
}

.foliation .hex:hover svg text {
    fill: var(--chu);
}

.foliation .hex.active svg polygon {
    fill: var(--injuhong);
    stroke: var(--injuhong);
}

.foliation .hex.active svg text {
    fill: var(--byeokjeo);
}

.foliation .hex.active:hover svg text {
    fill: var(--byeokjeo);
}

/* ============================================================
   rubbing-page — the single-stone narrative below the index
   ============================================================ */

.rubbing-page {
    grid-column: 1 / -1;
    grid-row: 5;
    grid-area: auto;
    width: 100%;
    max-width: 568px;
    border-top: 1px solid var(--banhwa);
    margin-top: calc(var(--unit) * 5);
    padding-top: calc(var(--unit) * 3);
}

.frame-inset {
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
        "seal cata"
        "rubbing rubbing"
        "colophon colophon"
        "rpage rpage"
        "date date";
}

.rubbing-page {
    grid-area: rpage;
    margin-top: 0;
}

.rp-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: calc(var(--unit) * 1.5);
}

.rp-folio {
    font-family: "Recursive", monospace;
    font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -8, "wght" 420;
    font-size: 11px;
    color: var(--injuhong);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rp-title {
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    color: var(--baekji);
    margin: 0;
}

.rp-foundwhen {
    font-family: "Noto Serif KR", serif;
    font-size: 12px;
    color: var(--somuk);
    line-height: 18px;
    margin-top: 2px;
}

.rp-prose {
    font-family: "Noto Serif KR", serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: -0.005em;
    color: var(--baekji);
    margin-bottom: calc(var(--unit) * 1.4);
}

.rp-prose:last-child {
    margin-bottom: 0;
}

.orig-text {
    font-family: "Cormorant Infant", serif;
    font-style: italic;
    font-weight: 600;
    color: var(--baekji);
    border-bottom: 1px solid var(--somuk);
    padding-bottom: 1px;
}

.trans {
    color: var(--somuk);
    font-size: 14px;
}

/* ============================================================
   typographic minutiae — Recursive variable-font fingerprint
   different per artifact; here held for vol.001
   ============================================================ */

.frame-inset[data-rubbing="001"] .catalogue-number,
.frame-inset[data-rubbing="001"] .date-stamp,
.frame-inset[data-rubbing="001"] .rp-folio {
    font-variation-settings: "MONO" 1, "CASL" 1, "slnt" -8, "wght" 420;
}