/* ============================================================
   20241203.com — Light-Academia Chronicle / Illuminated Codex
   Palette — Jewel-Tones on Parchment
   ============================================================ */

:root {
  --vellum:   #F4ECDC;  /* primary background */
  --aged:     #EADBC0;  /* secondary surface */
  --ink:      #1F1B17;  /* primary text */
  --walnut:   #6B4F2D;  /* rules, hairlines */
  --emerald:  #0E5246;  /* codex spine */
  --garnet:   #7A1F2B;  /* declaration emphasis */
  --amethyst: #3B2E66;  /* citizen voices */
  --sapphire: #1B3A6B;  /* annotations, links */
  --citrine:  #B8862F;  /* gilt details */
  --sage:     #928569;  /* background washes */

  --ease-codex: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --spine-w: 6vw;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--vellum);
  color: var(--ink);
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

::selection { background: rgba(184, 134, 47, 0.32); }

.svg-defs { position: absolute; }

/* -------- Paper noise overlays -------- */
.paper-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-color: transparent;
}
.paper-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: url(#paper-grain);
}
.paper-overlay--warm {
  opacity: 0.06;
  z-index: 59;
  animation: subtle-grain 24s steps(8) infinite;
}
.paper-overlay--warm::after { filter: url(#paper-grain-warm); }

@keyframes subtle-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-1%, 1%); }
  25%  { transform: translate(1%, -1%); }
  37%  { transform: translate(-1.5%, -0.5%); }
  50%  { transform: translate(1%, 1%); }
  62%  { transform: translate(-0.5%, 1.5%); }
  75%  { transform: translate(1.5%, -1%); }
  87%  { transform: translate(-1%, 0.5%); }
  100% { transform: translate(0, 0); }
}

/* -------- The codex spine -------- */
.spine {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--spine-w);
  background: linear-gradient(100deg, #0a3d34 0%, var(--emerald) 45%, #0b4339 70%, #073029 100%);
  box-shadow: inset -8px 0 16px rgba(0,0,0,0.28), 4px 0 14px rgba(31,27,23,0.18);
  z-index: 40;
}
.spine__gilt {
  position: absolute;
  top: 0; bottom: 0;
  right: 0.9vw;
  width: 2px;
  background: linear-gradient(var(--citrine), rgba(184,134,47,0.2) 50%, var(--citrine));
  opacity: 0.7;
}
.spine__rule {
  position: absolute;
  top: 0; bottom: 0;
  /* the timeline hair-rule, on the page side just past the spine */
  left: calc(var(--spine-w) + 2.6vw);
  width: 1px;
  background: var(--walnut);
  opacity: 0.55;
}

@media (max-width: 760px) {
  :root { --spine-w: 16px; }
  .spine__rule { left: calc(var(--spine-w) + 14px); }
}

/* -------- Ribbon bookmark -------- */
.ribbon {
  position: fixed;
  top: 0;
  left: calc(var(--spine-w) + 2.6vw - 1.5px);
  width: 4px;
  height: 0;
  z-index: 45;
  background: linear-gradient(180deg, var(--garnet), #5d141d 60%, #4a0f17);
  box-shadow: 0 0 6px rgba(122,31,43,0.35);
}
.ribbon::after {
  content: "";
  position: absolute;
  bottom: -8px; left: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 8px solid #4a0f17;
}
@media (max-width: 760px) {
  .ribbon { left: calc(var(--spine-w) + 14px - 1.5px); }
}

/* -------- Codex layout -------- */
.codex {
  position: relative;
  z-index: 10;
  padding-left: calc(var(--spine-w) + 6vw);
  padding-right: 6vw;
  max-width: 1180px;
}
@media (max-width: 760px) {
  .codex { padding-left: calc(var(--spine-w) + 24px); padding-right: 22px; }
}

/* -------- Folio base -------- */
.folio {
  position: relative;
  padding: 18vh 0 18vh;
  /* blur-focus default state: anticipated */
  filter: blur(6px);
  opacity: 0.35;
  transform: translateY(-8px);
  transition:
    filter 700ms var(--ease-codex),
    opacity 700ms var(--ease-codex),
    transform 700ms var(--ease-codex);
  will-change: filter, opacity, transform;
}
.folio.is-focused {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}
.folio.is-remembered {
  filter: blur(2px);
  opacity: 0.7;
  transform: translateY(4px);
}

/* -------- Frontispiece -------- */
.folio--frontispiece {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6vh;
}
.frontispiece__inner { max-width: 760px; }
.frontispiece__kicker {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 0.98rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--walnut);
  margin: 0 0 1.2rem;
}
.frontispiece__title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(3.6rem, 8vw, 7rem);
  line-height: 1.04;
  letter-spacing: 0.06em;
  margin: 0 0 1.6rem;
  color: var(--ink);
}
.frontispiece__title .dot { color: var(--citrine); font-weight: 400; }
.ornament-rule { width: min(360px, 60%); margin: 0 0 2rem; }
.ornament-rule svg { width: 100%; height: 18px; display: block; }
.frontispiece__sub {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--ink);
  max-width: 540px;
}

/* pressed leaves */
.pressed-leaf { position: absolute; pointer-events: none; }
.pressed-leaf--frontispiece {
  right: 2vw; bottom: 6vh;
  width: clamp(110px, 14vw, 200px);
}
.pressed-leaf--small {
  width: clamp(90px, 10vw, 140px);
  margin-top: 2rem;
  display: block;
}

/* -------- Hour seals on the spine -------- */
.hour-seal {
  position: absolute;
  left: calc(-1 * (var(--spine-w) * 0 + 2.6vw) - 1.6vw);
  /* place seal centered over the timeline rule which sits at codex left edge minus 3.4vw */
  left: -3.4vw;
  top: 18vh;
  width: clamp(40px, 4.6vw, 64px);
  height: clamp(40px, 4.6vw, 64px);
  transform: translateX(-50%) scale(0.7);
  opacity: 0;
}
.hour-seal svg { width: 100%; height: 100%; display: block; }
.hour-seal--major {
  width: clamp(56px, 6vw, 86px);
  height: clamp(56px, 6vw, 86px);
  top: 14vh;
}
.hour-seal.seal-set {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: wax-press 600ms var(--ease-codex);
}
.hour-seal--major.seal-set { animation: wax-press 1400ms var(--ease-codex); }
@keyframes wax-press {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
  55%  { opacity: 1; transform: translateX(-50%) scale(1.08); filter: drop-shadow(0 0 10px currentColor); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.0); filter: none; }
}

@media (max-width: 760px) {
  .hour-seal { left: -22px; width: 30px; height: 30px; }
  .hour-seal--major { width: 38px; height: 38px; }
}

/* seal jewel tints via data-seal */
[data-seal="amethyst"] .hour-seal { color: var(--amethyst); }
[data-seal="garnet"]   .hour-seal { color: var(--garnet); }
[data-seal="emerald"]  .hour-seal { color: var(--emerald); }
[data-seal="sapphire"] .hour-seal { color: var(--sapphire); }
[data-seal="citrine"]  .hour-seal { color: var(--citrine); }

.seal__wax  { fill: currentColor; opacity: 0.92; }
.seal__ring { fill: none; stroke: rgba(31,27,23,0.35); stroke-width: 1.2; }
.seal__glyph { fill: none; stroke: rgba(244,236,220,0.85); stroke-width: 1.4; }
.seal__glyph circle { fill: rgba(244,236,220,0.9); stroke: none; }
.seal__glyph--draw path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.hour-seal--major.seal-set .seal__glyph--draw path {
  animation: draw-glyph 1.4s var(--ease-codex) forwards;
}
@keyframes draw-glyph {
  to { stroke-dashoffset: 0; }
}

/* -------- Hour stamps & labels -------- */
.hour-stamp {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--walnut);
  margin: 0 0 0.4rem;
  text-transform: lowercase;
}
.hour-stamp--right { text-align: right; }
.margin-note--inline { color: var(--garnet); font-style: italic; }

.hour-label {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 1.6rem;
  color: var(--ink);
}
.hour-label--garnet { color: var(--garnet); }

/* -------- Manuscript body -------- */
.manuscript { max-width: 640px; }
.manuscript p {
  margin: 0 0 1.2rem;
  text-indent: 1.6em;
  hyphens: auto;
}
.manuscript p.lead { text-indent: 0; }
.manuscript p.lead::first-line { letter-spacing: 0.01em; }
.manuscript em { font-style: italic; }

/* drop-cap (inline SVG) */
.dropcap {
  float: left;
  width: clamp(3.6rem, 6vw, 5.4rem);
  height: clamp(3.6rem, 6vw, 5.4rem);
  margin: 0.15em 0.5em 0 0;
  shape-outside: margin-box;
}
.dropcap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dropcap__letter {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: 86px;
  fill: var(--citrine);
  stroke: var(--walnut);
  stroke-width: 1.1;
  paint-order: stroke;
}
.dropcap__letter--garnet { fill: var(--garnet); }
.dropcap .vine {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: 0.85;
}
.folio.is-focused .dropcap .vine {
  animation: grow-vine 1.2s ease-out forwards;
}
@keyframes grow-vine { to { stroke-dashoffset: 0; } }

/* margin notes */
.margin-note {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--amethyst);
  text-indent: 0 !important;
  border-left: 1px solid rgba(107,79,45,0.4);
  padding-left: 0.9em;
  margin-top: 1.4rem;
}
.margin-note--right {
  border-left: none;
  border-right: 1px solid rgba(107,79,45,0.4);
  padding-left: 0;
  padding-right: 0.9em;
  text-align: right;
}

/* Korean block quote */
.ko-quote {
  font-family: "Noto Serif KR", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--ink);
  text-align: center;
  margin: 2.2rem 0;
  text-indent: 0;
}
.ko-quote__gloss {
  display: block;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 0.96rem;
  color: var(--walnut);
  margin-top: 0.5rem;
  font-weight: 400;
}

/* pull-quote (declaration spreads) */
.pullquote {
  margin: 2.4rem 0 1rem;
  text-align: center;
}
.pullquote p[lang="ko"] {
  font-family: "Noto Serif KR", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.6;
  color: var(--garnet);
  text-indent: 0;
  margin: 0;
}
.pullquote__gloss {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--walnut);
  text-indent: 0;
  margin: 0.4rem 0 0.6rem;
}
.pullquote__rule { width: min(320px, 80%); height: 12px; display: inline-block; }

/* -------- Margin-side decorative glyph (odd / marginalia folios) -------- */
.folio--margin { }
.folio--margin .manuscript { margin-left: clamp(0px, 22vw, 200px); }
.folio--margin__glyph {
  position: absolute;
  left: 0;
  top: 24vh;
  width: clamp(120px, 18vw, 200px);
  pointer-events: none;
}
.folio--margin__glyph svg { width: 100%; height: auto; display: block; }
.margin-hand { opacity: 0.8; }
@media (max-width: 860px) {
  .folio--margin .manuscript { margin-left: 0; }
  .folio--margin__glyph { display: none; }
}

/* -------- Floating ephemera -------- */
.ephemera { position: absolute; pointer-events: none; }
.ephemera--stamp {
  width: clamp(80px, 9vw, 110px);
  right: 4vw;
  bottom: 12vh;
  transform: rotate(-3deg);
  filter: drop-shadow(2px 4px 6px rgba(31,27,23,0.18));
}
.ephemera--stamp svg { width: 100%; height: auto; display: block; }
.stamp__cap {
  font-family: "EB Garamond", serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--walnut);
}
.ephemera--clip {
  max-width: 280px;
  right: 2vw;
  bottom: 8vh;
  transform: rotate(2deg);
  background: var(--aged);
  border: 1px solid rgba(107,79,45,0.3);
  padding: 0.9rem 1.1rem;
  box-shadow: 2px 4px 8px rgba(31,27,23,0.14);
}
.clip__text {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  text-indent: 0;
}
@media (max-width: 980px) {
  .ephemera { position: relative; right: auto; bottom: auto; margin-top: 2rem; display: block; }
  .ephemera--stamp { transform: rotate(-3deg); }
}

/* -------- Two-page spreads -------- */
.folio--spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  background: linear-gradient(180deg, rgba(234,219,192,0.35), transparent 30%, transparent 70%, rgba(234,219,192,0.3));
  margin: 0 -2vw;
  padding-left: 2vw;
  padding-right: 2vw;
}
.spread__binding {
  position: absolute;
  left: 50%;
  top: 12vh; bottom: 12vh;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--walnut) 12%, var(--walnut) 88%, transparent);
  opacity: 0.45;
  box-shadow: 0 0 12px rgba(31,27,23,0.12);
}
.spread__page--left { padding-right: 2vw; }
.spread__page--right { padding-left: 2vw; }
@media (max-width: 920px) {
  .folio--spread { grid-template-columns: 1fr; gap: 0; }
  .spread__binding { display: none; }
  .spread__page--right { margin-top: 6vh; padding-left: 0; }
  .spread__page--left { padding-right: 0; }
}

/* -------- Lawmaker grid (190 silhouettes, 19 x 10) -------- */
.lawmakers {
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  gap: 5px;
  margin: 1.2rem 0;
  max-width: 460px;
}
.lawmakers .lm {
  width: 100%;
  aspect-ratio: 3 / 5;
}
.lawmakers .lm svg { width: 100%; height: 100%; display: block; }
.lawmakers .lm path { fill: var(--ink); opacity: 0.78; }
.lawmakers .lm:nth-child(3n) path { opacity: 0.62; }
.lawmakers .lm:nth-child(5n) path { fill: var(--walnut); }
.lawmakers__caption {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--walnut);
  text-indent: 0;
  margin-top: 0.8rem;
}
@media (max-width: 540px) {
  .lawmakers { grid-template-columns: repeat(19, 1fr); gap: 2px; }
}

/* -------- Sister link (the only link) -------- */
.sister-link {
  color: var(--sapphire);
  text-decoration: none;
  border-bottom: 1px solid rgba(27,58,107,0.4);
  font-style: italic;
}
.sister-link:hover { border-bottom-color: var(--sapphire); }

/* -------- Colophon -------- */
.folio--colophon {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 14vh;
}
.colophon__inner { max-width: 560px; }
.wax-envelope { width: clamp(200px, 26vw, 280px); height: auto; display: block; margin: 0 auto 2rem; }
.envelope__addr {
  font-family: "Caveat", cursive;
  font-size: 18px;
  fill: var(--sapphire);
}
.colophon__line {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--ink);
  margin: 0 0 2.6rem;
}

/* library catalog card */
.catalog-card {
  background: #fbf6ea;
  border: 1px solid rgba(107,79,45,0.35);
  box-shadow: 3px 5px 12px rgba(31,27,23,0.16);
  padding: 1.4rem 1.6rem;
  text-align: left;
  transform: rotate(-4deg);
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}
.catalog-card::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: rgba(107,79,45,0.25);
}
.catalog-card p {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 0.5rem;
  text-indent: 0;
}
.catalog-card__call { font-weight: 700; letter-spacing: 0.04em; }
.catalog-card__title { font-style: italic; }
.catalog-card__note { color: var(--walnut); }
.catalog-card__sig {
  font-family: "Caveat", cursive;
  font-size: 1.1rem;
  color: var(--sapphire);
  margin-top: 1rem;
  margin-bottom: 0.6rem;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .folio, .folio.is-remembered { filter: none !important; transform: none !important; }
  .paper-overlay--warm { animation: none; }
  .hour-seal.seal-set { animation: none; }
  .dropcap .vine { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}