@font-face {
  font-family: "Lady Serif";
  src: url("assets/NotoSerifKR-VF.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #eee7d8;
  --paper-light: #f7f1e5;
  --ink: #28231f;
  --ink-soft: #625b53;
  --rust: #85594d;
  --brass: #9a7a48;
  --gray: #77736b;
  --line: rgba(40, 35, 31, .28);
  --shadow: 0 18px 60px rgba(43, 33, 25, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.46), transparent 28rem),
    repeating-linear-gradient(91deg, rgba(70,55,40,.015) 0 1px, transparent 1px 6px),
    var(--paper);
  font-family: "Lady Serif", "Noto Serif KR", "Batang", "바탕", serif;
  font-size: 1rem;
  line-height: 1.85;
  overflow-x: clip;
}
body.modal-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 200; transform: translateY(-120%); padding: .7rem 1rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { transform: translateY(0); }

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: .25rem 7.5rem .25rem 1rem;
  background: rgba(238,231,216,.93);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  transform: translateY(-110%);
  transition: transform .5s ease;
}
body.opened .site-nav { transform: translateY(0); }
.site-nav nav { display: flex; align-items: center; gap: 0; }
.site-nav a { position: relative; padding: .25rem .85rem; text-decoration: none; font-size: .88rem; letter-spacing: .04em; white-space: nowrap; }
.site-nav a + a::before { content: ""; position: absolute; left: 0; top: 28%; height: 44%; border-left: 1px solid var(--line); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--rust); }
.menu-toggle { display: none; }
.ost-toggle {
  position: fixed;
  z-index: 110;
  top: .55rem;
  right: 1rem;
  min-width: 104px;
  min-height: 36px;
  padding: .35rem .8rem;
  border: 1px solid #6e512b;
  border-radius: 999px;
  color: #f7edda;
  background: linear-gradient(#9b7947, #6f512e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 3px 12px rgba(40,35,31,.25);
  letter-spacing: .06em;
  cursor: pointer;
}
.ost-toggle:hover, .ost-toggle:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 2px; filter: brightness(1.08); }

.intro {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}
.intro::after { content: ""; position: absolute; inset: 1rem; z-index: -1; border: 1px solid rgba(40,35,31,.28); pointer-events: none; }
.intro-scene { position: absolute; inset: 0; z-index: -3; background: url("assets/hanseong-hero.png") center/cover no-repeat; filter: saturate(.72) contrast(.92); }
.intro-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,231,216,.97) 0%, rgba(238,231,216,.84) 34%, rgba(238,231,216,.17) 70%, rgba(238,231,216,.08)); }
.intro-copy { width: min(690px, 78vw); margin: 3rem 0 1rem clamp(2rem, 9vw, 10rem); }
.era-mark { display: inline-block; margin: 0 0 1rem; color: var(--rust); font-size: .82rem; letter-spacing: .3em; line-height: 1.6; border-bottom: 1px solid var(--rust); }
.era-mark span { letter-spacing: .6em; }
.title-image { width: min(610px, 72vw); filter: invert(13%) sepia(9%) saturate(1058%) hue-rotate(344deg) brightness(91%) contrast(91%); mix-blend-mode: multiply; }
.thesis { margin: 1rem 0 1.7rem; font-size: clamp(1.04rem, 1.5vw, 1.32rem); letter-spacing: .08em; line-height: 1.9; }
.seal-button { min-height: 48px; padding: .72rem 1.45rem; border: 1px solid #5f342c; background: #6f3f35; color: #f8efe2; box-shadow: inset 0 0 0 2px rgba(238,231,216,.18), 4px 5px 0 rgba(40,35,31,.11); cursor: pointer; letter-spacing: .08em; }
.seal-button:hover, .seal-button:focus-visible { background: #7f4b40; transform: translateY(-1px); outline: 2px solid var(--rust); outline-offset: 3px; }
.flower-corner { position: absolute; z-index: -2; top: -8rem; left: -4rem; width: min(34vw, 500px); height: 420px; object-fit: cover; object-position: 20% 6%; mix-blend-mode: multiply; opacity: .22; -webkit-mask-image: linear-gradient(140deg, #000 10%, transparent 72%); mask-image: linear-gradient(140deg, #000 10%, transparent 72%); }
.intro-note { position: absolute; right: 2.2rem; bottom: 1.3rem; margin: 0; color: var(--ink-soft); font-size: .75rem; letter-spacing: .16em; writing-mode: vertical-rl; }
body.opened .intro { animation: letterOpen .9s both; }
@keyframes letterOpen { from { opacity: .78; } to { opacity: 1; } }

.archive[hidden] { display: none; }
.archive { animation: archiveReveal .8s ease both; }
@keyframes archiveReveal { from { opacity: 0; } }
.section { position: relative; width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 8.5rem 0; scroll-margin-top: 60px; }
.section-number { position: absolute; top: 7rem; right: 2rem; color: var(--rust); font-size: .8rem; letter-spacing: .3em; }
.section-heading { max-width: 760px; margin-bottom: 3.5rem; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2, .mood-letter h2 { margin: .15rem 0 1rem; font-size: clamp(2rem, 4vw, 4.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.section-heading p:not(.eyebrow) { color: var(--ink-soft); }
.eyebrow, .memo-label { margin: 0; color: var(--rust); font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; }

.about-section { min-height: 88vh; display: grid; align-items: center; }
.book-spread { position: relative; width: min(940px, 100%); margin: auto; padding: clamp(2rem, 6vw, 5.5rem); background: rgba(247,241,229,.68); border: 1px solid var(--line); box-shadow: var(--shadow); }
.book-spread::before { content: ""; position: absolute; top: 4%; bottom: 4%; left: 50%; border-left: 1px solid rgba(40,35,31,.09); box-shadow: -8px 0 20px rgba(40,35,31,.05); }
.about-copy { columns: 2; column-gap: 5rem; color: var(--ink-soft); }
.about-copy p { margin: 0 0 1.5rem; break-inside: avoid; }
blockquote { box-sizing: border-box; width: 60%; max-width: 100%; margin: 3.5rem 0 0 auto; padding: 1.2rem .15rem 0 1rem; border-top: 1px solid var(--line); color: var(--rust); font-style: normal; letter-spacing: .035em; text-align: right; overflow-wrap: anywhere; }

.map-section { width: min(1500px, calc(100% - 24px)); }
.wide-heading { margin-left: max(1rem, calc((100% - 1260px)/2)); }
.map-tools { width: min(1180px, 100%); margin: -2.4rem auto 1rem; display: flex; justify-content: flex-end; }
.map-expand-button { min-height: 44px; padding: .55rem 1rem; border: 1px solid #6f512e; background: #8b6b3e; color: #f7edda; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); cursor: pointer; }
.map-expand-button:hover, .map-expand-button:focus-visible { background: #715432; outline: 2px solid var(--brass); outline-offset: 2px; }
.map-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1180px); justify-content: center; align-items: center; gap: 1.5rem; transition: grid-template-columns .38s ease; }
.map-layout.has-note { grid-template-columns: minmax(0, 1fr) 340px; }
.map-stage { position: relative; min-width: 0; }
.map-canvas { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #86765f; background: #d9cbb1; box-shadow: var(--shadow); }
.map-canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px rgba(59,43,29,.24); }
.map-canvas > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.08) brightness(.98); }
.map-markers { position: absolute; inset: 0; z-index: 2; }
.map-marker { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; transform: translate(-50%,-50%); border: 2px solid var(--paper-light); border-radius: 50% 50% 50% 0; background: var(--ink); color: white; box-shadow: 0 3px 8px rgba(0,0,0,.34); cursor: pointer; rotate: -45deg; }
.map-marker span { font-size: .62rem; rotate: 45deg; }
.map-marker:hover, .map-marker:focus-visible, .map-marker.active { z-index: 3; background: var(--rust); outline: 2px solid var(--paper-light); outline-offset: 2px; }
.map-marker::after { content: attr(data-name); position: absolute; left: 18px; top: 18px; min-width: max-content; padding: .15rem .4rem; border: 1px solid var(--line); background: rgba(238,231,216,.94); color: var(--ink); font-size: .68rem; letter-spacing: .02em; opacity: 0; pointer-events: none; rotate: 45deg; transition: opacity .2s; }
.map-marker:hover::after, .map-marker:focus-visible::after, .map-marker.active::after { opacity: 1; }
.map-note { position: relative; padding: 2.5rem 2rem; background: #f3ead7; border: 1px solid #b6a486; box-shadow: 8px 12px 30px rgba(48,39,29,.18); rotate: .7deg; animation: noteIn .28s ease both; }
.map-layout.has-note .map-note { grid-column: 2; }
.map-note::before, .map-modal-note::before, .article-note::before { content: ""; position: absolute; inset: .45rem; border: 1px solid rgba(133,89,77,.25); pointer-events: none; }
.note-frame, .article-note-frame { display: contents; }
.map-note h3, .map-modal-note h3 { margin: .45rem 0 1rem; color: var(--rust); font-size: 1.7rem; }
.note-body { color: var(--ink-soft); }
.note-quote { padding-top: 1rem; border-top: 1px solid var(--line); font-style: italic; }
.close-note { position: absolute; top: .65rem; right: .75rem; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.7rem; cursor: pointer; }
.map-index { width: min(1180px, 100%); margin: 1rem auto 0; padding: .9rem 1rem .8rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .15rem .75rem; border-top: 1px solid rgba(40,35,31,.2); border-bottom: 1px solid rgba(40,35,31,.12); background: rgba(247,241,229,.34); }
.map-index-button { min-width: 0; min-height: 32px; padding: .2rem .35rem; border: 0; background: transparent; color: var(--ink-soft); font-size: .73rem; line-height: 1.35; text-align: left; cursor: pointer; }
.map-index-button:hover, .map-index-button:focus-visible, .map-index-button.active { color: var(--rust); background: rgba(133,89,77,.08); outline: 1px solid rgba(133,89,77,.35); outline-offset: 0; }
.map-index-button.active { font-weight: 650; }
@keyframes noteIn { from { opacity: 0; transform: translateY(10px); } }

.modal-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(31,27,24,.72); backdrop-filter: blur(3px); }
.modal-backdrop[hidden] { display: none; }
.map-modal { position: fixed; inset: 2.5vh 2.5vw; z-index: 150; background: var(--paper); border: 1px solid var(--brass); box-shadow: 0 25px 90px rgba(0,0,0,.42); }
.map-modal[hidden] { display: none; }
.map-modal-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: 1rem; }
.map-modal-header { display: grid; grid-template-columns: 1fr auto 48px; align-items: center; gap: 1rem; padding: 0 .3rem .8rem; }
.map-modal-header h2 { margin: 0; font-size: clamp(1.35rem,2.2vw,2rem); font-weight: 500; }
.map-zoom-controls { display: flex; align-items: center; gap: .4rem; }
.map-zoom-controls button, .modal-close { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--paper-light); cursor: pointer; }
.map-zoom-controls button:hover, .map-zoom-controls button:focus-visible, .modal-close:hover, .modal-close:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
#map-zoom-level { min-width: 4rem; text-align: center; color: var(--rust); }
.modal-close { font-size: 1.6rem; }
.map-viewport { position: relative; min-height: 0; overflow: hidden; border: 1px solid #86765f; background: #d9cbb1; cursor: grab; touch-action: none; }
.map-viewport.dragging { cursor: grabbing; }
.map-transform { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.map-transform > img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; filter: saturate(.88) contrast(1.08) brightness(.98); }
.map-modal-note { position: absolute; right: 1.2rem; top: 1.2rem; z-index: 6; width: min(340px,calc(100% - 2rem)); max-height: calc(100% - 2.4rem); overflow: auto; padding: 2.2rem 1.8rem; background: #f3ead7; border: 1px solid #b6a486; box-shadow: var(--shadow); rotate: .5deg; cursor: default; }
.map-modal-note .close-modal-note, .article-note .close-article-note { position: absolute; right: .6rem; top: .55rem; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; }
.map-modal-help { margin: .55rem 0 0; color: var(--ink-soft); font-size: .78rem; text-align: center; }

.life-section { width: min(1260px, calc(100% - 40px)); }
.life-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem 1rem; }
.life-entry { position: relative; padding: 0 0 1.2rem; border-bottom: 1px solid var(--line); }
.life-entry:nth-child(even) { margin-top: 3.5rem; }
.life-image { aspect-ratio: 1.22; background-image: url("assets/daily-life-sheet-v2.png"); background-size: 400% 200%; filter: sepia(.12) saturate(.78) contrast(1.04); border: 7px solid rgba(247,241,229,.72); outline: 1px solid var(--line); }
.life-entry h3 { margin: .9rem 0 .2rem; font-size: 1.25rem; font-weight: 600; }
.life-entry p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.characters-section { width: min(1450px, calc(100% - 30px)); padding-bottom: 10rem; }
.character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.character-card { position: relative; min-width: 0; text-align: center; }
.portrait-frame { width: min(265px, 88%); aspect-ratio: .72; margin: 0 auto 1.2rem; padding: 7px; border: 1px solid var(--brass); border-radius: 50%; background: rgba(247,241,229,.65); box-shadow: inset 0 0 0 3px var(--paper), 0 10px 26px rgba(40,35,31,.09); overflow: hidden; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(.82) sepia(.07); }
.character-card[data-character="gijun"] .portrait-frame img { transform: translateY(14px) scale(1.18); transform-origin: 48% 28%; }
.character-card[data-character="gyuhwa"] .portrait-frame img { transform: translateY(15px) scale(1.2); transform-origin: 48% 30%; }
.character-card h3 { margin: 0; font-size: 1.55rem; font-weight: 600; }
.character-meta { margin: .15rem 0 .7rem; color: var(--rust); font-size: .86rem; letter-spacing: .08em; }
.character-quote { min-height: 5rem; white-space: pre-line; font-size: .94rem; }
.character-intro { color: var(--ink-soft); font-size: .92rem; text-align: left; }
.record-toggle { min-height: 44px; width: 100%; margin-top: .8rem; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--rust); cursor: pointer; }
.record-toggle:hover, .record-toggle:focus-visible { background: rgba(154,122,72,.09); outline: 2px solid var(--rust); outline-offset: 2px; }
.character-details { margin-top: .8rem; padding: 1rem; background: rgba(247,241,229,.7); border: 1px solid var(--line); text-align: left; }
.character-details dl { margin: 0; display: grid; grid-template-columns: 5rem 1fr; gap: .3rem .8rem; font-size: .86rem; }
.character-details dt { color: var(--rust); }
.character-details dd { margin: 0; }

.supporting-section { width: min(1260px, calc(100% - 40px)); }
.supporting-heading { max-width: 820px; }
.supporting-heading > p:not(.eyebrow) { margin-block: .7rem; }
.supporting-groups { display: grid; gap: 4.5rem; }
.supporting-group > header { display: grid; grid-template-columns: 3.2rem 1fr; align-items: end; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: .65rem; border-bottom: 3px double var(--line); }
.supporting-group > header span { color: var(--rust); font-size: .78rem; letter-spacing: .18em; }
.supporting-group > header h3 { margin: 0; font-size: 1.7rem; font-weight: 500; }
.supporting-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; align-items: start; }
.supporting-card { position: relative; padding: 1.5rem 1.35rem 1.2rem; background: rgba(247,241,229,.62); border: 1px solid #bca98b; box-shadow: 5px 7px 18px rgba(40,35,31,.08); }
.supporting-card::before { content: ""; position: absolute; inset: .35rem; border: 1px solid rgba(133,89,77,.16); pointer-events: none; }
.supporting-index { position: relative; margin: 0 0 .45rem; color: var(--rust); font-size: .65rem; letter-spacing: .16em; }
.supporting-card h4 { position: relative; margin: 0 0 .65rem; font-size: 1.55rem; font-weight: 600; }
.supporting-role, .supporting-traits, .supporting-short, .supporting-detail { position: relative; }
.supporting-role { min-height: 3rem; margin: 0; font-size: .9rem; }
.supporting-traits { display: inline-block; margin: .75rem 0; padding: .18rem .45rem; background: rgba(133,89,77,.08); color: var(--rust); font-size: .78rem; }
.supporting-short { margin: .15rem 0 .9rem; color: var(--ink-soft); font-size: .88rem; }
.supporting-toggle { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: .45rem .15rem; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--rust); cursor: pointer; }
.supporting-toggle:hover, .supporting-toggle:focus-visible { background: rgba(154,122,72,.08); outline: 2px solid var(--rust); outline-offset: 2px; }
.supporting-detail { padding-top: .8rem; border-top: 1px dotted var(--line); color: var(--ink-soft); font-size: .88rem; }
.supporting-detail p { margin: 0 0 .7rem; }
.supporting-related { color: var(--rust); font-size: .76rem; letter-spacing: .03em; }

.stories-section { width: min(1120px, calc(100% - 40px)); }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.story-card { position: relative; min-height: 300px; padding: 2.4rem 2rem 2rem; background: #f3ead7; border: 1px solid #bca98b; box-shadow: 8px 10px 24px rgba(40,35,31,.12); }
.story-card:nth-child(2) { rotate: -.7deg; }
.story-card:nth-child(3) { rotate: .5deg; }
.story-num { position: absolute; top: .8rem; right: 1rem; color: var(--rust); font-size: 2rem; opacity: .55; }
.story-card h3 { margin: 0 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); font-size: 1.4rem; }
.story-card p { color: var(--ink-soft); }
.story-tags { position: absolute; left: 2rem; right: 2rem; bottom: 1.3rem; color: var(--rust) !important; font-size: .78rem; }

.newspaper-section { position: relative; width: min(1440px, calc(100% - 24px)); padding: 4rem clamp(1rem, 3vw, 3rem); background: rgba(244,237,223,.72); border: 1px solid var(--ink); box-shadow: var(--shadow); }
.newspaper-masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding: .7rem 0; border-block: 4px double var(--ink); text-align: center; }
.newspaper-masthead p { margin: 0; font-size: .75rem; }
.newspaper-masthead p:last-child { text-align: right; }
.newspaper-masthead h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3.4rem); letter-spacing: .25em; white-space: nowrap; }
.newspaper-masthead h2 span { display: block; font-size: .72rem; letter-spacing: .5em; }
.newspaper-guide { max-width: 760px; margin: 1.5rem auto 2.5rem; text-align: center; color: var(--ink-soft); }
.article-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 280px; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.article { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-type { display: inline-block; padding: .1rem .45rem; border: 1px solid var(--ink); font-size: .7rem; letter-spacing: .15em; }
.article button { display: grid; grid-template-rows: auto 76px minmax(3.7rem,auto) 1fr; gap: .55rem; width: 100%; height: 100%; padding: 1rem; border: 0; background: transparent; text-align: left; cursor: pointer; }
.article button:hover h3, .article button:focus-visible h3 { color: var(--rust); }
.article button:hover { background: rgba(154,122,72,.06); }
.article button:focus-visible, .article button[aria-expanded="true"] { outline: 2px solid var(--rust); outline-offset: -3px; }
.article-illustration { width: 100%; background-image: url("assets/daily-life-sheet.png"); background-size: 400% 200%; border: 1px solid var(--line); filter: sepia(.35) saturate(.55) contrast(.9); opacity: .82; }
.article h3 { margin: 0; min-height: 3.5rem; font-size: 1.08rem; line-height: 1.45; overflow: hidden; }
.article-summary { margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.6; }
.article-note { position: fixed; z-index: 160; right: 1rem; top: 4.5rem; width: min(520px,calc(100% - 2rem)); max-height: calc(100vh - 6rem); overflow: auto; padding: clamp(2rem,4vw,3.2rem); background: #f3ead7; border: 1px solid #b6a486; box-shadow: 0 28px 90px rgba(0,0,0,.32); animation: noteIn .24s ease both; }
.article-note[hidden] { display: none; }
.article-note-type { display: inline-block; margin: 0 0 .7rem; padding: .15rem .55rem; border: 1px solid var(--ink); color: var(--rust); font-size: .75rem; letter-spacing: .16em; }
.article-note h3 { margin: 0 0 1.4rem; padding-bottom: 1rem; border-bottom: 3px double var(--ink); font-size: clamp(1.5rem,3vw,2.4rem); line-height: 1.35; }
.article-note-body { white-space: pre-line; color: var(--ink-soft); font-size: 1rem; line-height: 2; }

.mood-section { min-height: 96vh; display: grid; place-items: center; }
.mood-letter { position: relative; width: min(700px, 94%); padding: clamp(3rem, 8vw, 7rem); background: rgba(247,241,229,.5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.mood-letter::after { content: ""; position: absolute; right: -6rem; bottom: -2rem; width: 210px; height: 250px; background: url("assets/flower-reference.png") 73% 18%/540px auto no-repeat; opacity: .14; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse at center,#000 5%,transparent 69%); mask-image: radial-gradient(ellipse at center,#000 5%,transparent 69%); }
.mood-letter p:not(.eyebrow) { margin: 2rem 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 2.1; }

.personas-section { width: min(1280px, calc(100% - 40px)); }
.personas-section .section-heading h3 { margin-top: 2.2rem; font-size: 1.1rem; }
.persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.persona { border-bottom: 1px solid var(--line); }
.persona:nth-child(odd) { border-right: 1px solid var(--line); }
.persona button { display: grid; grid-template-columns: 3rem 1fr auto; gap: .8rem; align-items: center; width: 100%; min-height: 92px; padding: 1rem 1.2rem; border: 0; background: transparent; text-align: left; cursor: pointer; }
.persona button:hover, .persona button:focus-visible { background: rgba(154,122,72,.08); outline: 2px solid var(--rust); outline-offset: -3px; }
.persona-num { color: var(--rust); font-size: .8rem; }
.persona-title { display: block; font-size: 1.12rem; }
.persona-quote { display: block; color: var(--ink-soft); font-size: .83rem; }
.persona-chevron { font-size: 1.3rem; transition: rotate .2s; }
.persona button[aria-expanded="true"] .persona-chevron { rotate: 180deg; }
.persona-detail { padding: 0 4rem 1.6rem; color: var(--ink-soft); }
.persona-detail strong { color: var(--rust); font-size: .82rem; letter-spacing: .08em; }

.ending { position: relative; min-height: 92vh; display: grid; place-items: center; padding: 8rem 2rem; overflow: hidden; border-top: 1px solid var(--line); background: linear-gradient(rgba(238,231,216,.92),rgba(238,231,216,.94)), url("assets/hanseong-hero.png") center bottom/cover no-repeat; }
.ending-copy { width: min(650px, 100%); text-align: center; }
.ending-copy > p:not(.thesis) { margin: 2.5rem 0; font-size: 1.1rem; line-height: 2.1; }
.ending-copy img { width: min(520px, 90vw); margin: 4rem auto 1.5rem; filter: invert(13%) sepia(9%) saturate(1058%) hue-rotate(344deg) brightness(91%) contrast(91%); mix-blend-mode: multiply; }

@media (max-width: 1050px) {
  .site-nav { justify-content: flex-start; padding-right: 7rem; }
  .site-nav nav { overflow-x: auto; scrollbar-width: none; }
  .site-nav nav::-webkit-scrollbar { display: none; }
  .map-layout { grid-template-columns: minmax(0,1fr); }
  .map-layout.has-note { grid-template-columns: minmax(0,1fr) 300px; }
  .map-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .life-grid { grid-template-columns: repeat(2, 1fr); }
  .character-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem 1rem; }
  .supporting-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .site-nav { min-height: 50px; padding: 0 6.8rem 0 .5rem; }
  .menu-toggle { display: inline-flex; align-items: center; gap: .55rem; min-width: 88px; min-height: 44px; padding: 0 .45rem; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-toggle::after { content: ""; width: 19px; height: 13px; background: linear-gradient(var(--ink),var(--ink)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--ink),var(--ink)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--ink),var(--ink)) 0 100% / 100% 1px no-repeat; opacity: .88; }
  .site-nav nav { display: none; position: fixed; top: 50px; left: 0; right: 0; padding: .5rem 1rem 1rem; background: rgba(238,231,216,.98); border-bottom: 1px solid var(--line); overflow-x: auto; }
  .site-nav nav.open { display: flex; }
  .site-nav a { font-size: .82rem; padding: .5rem .75rem; }
  .ost-toggle { top: .4rem; right: .5rem; min-width: 96px; min-height: 40px; font-size: .78rem; }
  .intro { min-height: min(100svh, 760px); align-items: start; }
  .intro::after { inset: .65rem; }
  .intro-scene { background-position: 67% center; }
  .intro-scene::after { background: linear-gradient(180deg, rgba(238,231,216,.72), rgba(238,231,216,.94) 62%, rgba(238,231,216,.98)); }
  .intro-copy { align-self: start; width: auto; margin: clamp(7.2rem, 18vh, 10rem) 1.35rem 2rem; }
  .era-mark { margin-bottom: .45rem; }
  .thesis { margin: .55rem 0 1rem; line-height: 1.75; }
  .title-image { width: 100%; max-width: 520px; }
  .flower-corner { width: 70vw; height: 320px; opacity: .16; }
  .intro-note { display: none; }
  .section { width: min(100% - 28px, 1320px); padding: 6.5rem 0; }
  .section-number { top: 5.3rem; right: .5rem; }
  .section-heading { margin-bottom: 2.4rem; }
  .section-heading h2, .mood-letter h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .book-spread { padding: 2.2rem 1.3rem; }
  .book-spread::before { display: none; }
  .about-copy { columns: 1; }
  blockquote { width: 100%; margin-top: 2rem; }
  #about blockquote { width: calc(100% + 1.65rem); max-width: none; margin-left: -.825rem; padding: 1rem .1rem 0; font-size: clamp(.75rem, 3.25vw, .86rem); letter-spacing: -.055em; line-height: 1.55; text-align: center; white-space: nowrap; overflow-wrap: normal; }
  .map-section { width: 100%; }
  .wide-heading { margin-inline: 1rem; }
  .map-tools { width: auto; margin: -1.7rem 1rem 1rem; }
  .map-layout, .map-layout.has-note { display: block; }
  .map-stage { position: relative; }
  .map-canvas { aspect-ratio: 1 / .82; overflow: auto; }
  .map-canvas > img { min-width: 760px; object-fit: cover; }
  .map-canvas .map-markers { min-width: 760px; }
  .map-marker::after { display: none; }
  .map-note { position: absolute; z-index: 8; left: auto; right: .75rem; top: auto; bottom: 4%; width: min(84%, 360px); max-height: none; overflow: visible; box-sizing: border-box; padding: .45rem; rotate: -.4deg; background: rgba(243,234,215,.94); backdrop-filter: blur(2px); }
  .map-note::before, .map-modal-note::before { display: none; }
  .map-note .note-frame, .map-modal-note .note-frame { display: block; box-sizing: border-box; width: 100%; padding: 1.05rem .65rem .85rem; border: 1px solid rgba(133,89,77,.25); }
  .map-note h3, .map-modal-note h3 { margin: .3rem 0 .65rem; font-size: clamp(1.28rem, 5.7vw, 1.6rem); }
  .map-note .note-body, .map-note .note-quote, .map-modal-note .note-body, .map-modal-note .note-quote { overflow-wrap: anywhere; }
  .map-note .note-body, .map-modal-note .note-body { margin-bottom: .55rem; font-size: .86rem; line-height: 1.65; }
  .map-note .note-quote, .map-modal-note .note-quote { margin-bottom: 0; padding-top: .6rem; font-size: .78rem; line-height: 1.55; }
  .map-note.note-left { left: .75rem; right: auto; }
  .map-note.note-top { top: 7%; bottom: auto; }
  .map-layout.has-note .map-note { grid-column: auto; }
  .map-index { width: calc(100% - 2rem); grid-template-columns: repeat(2, minmax(0,1fr)); gap: .2rem .45rem; padding-inline: .6rem; }
  .map-index-button { min-height: 38px; font-size: .76rem; }
  .map-modal { inset: .5rem; }
  .map-modal-shell { padding: .55rem; }
  .map-modal-header { grid-template-columns: 1fr 44px; gap: .4rem; }
  .map-modal-header > div:first-child { grid-column: 1; }
  .map-zoom-controls { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .map-modal-header .modal-close { grid-column: 2; grid-row: 1; }
  .map-zoom-controls button { font-size: .82rem; }
  .map-modal-note { top: .7rem; right: .7rem; width: calc(100% - 1.4rem); max-height: 72%; box-sizing: border-box; padding: .45rem; }
  .life-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .life-entry:nth-child(even) { margin-top: 0; }
  .character-grid { grid-template-columns: 1fr; gap: 4.5rem; }
  .portrait-frame { width: min(290px, 84vw); }
  .character-card { max-width: 420px; margin-inline: auto; }
  .supporting-grid { grid-template-columns: 1fr; }
  .supporting-role { min-height: 0; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card { min-height: 270px; }
  .newspaper-section { width: calc(100% - 16px); padding-inline: 1rem; }
  .newspaper-masthead { display: block; }
  .newspaper-masthead h2 { margin: .5rem 0; font-size: 1.9rem; }
  .newspaper-masthead p:last-child { text-align: center; }
  .article-grid { grid-template-columns: 1fr; grid-auto-rows: 270px; }
  .article-note { left: .5rem; right: .5rem; top: calc(50px + .5rem); bottom: auto; width: auto; height: auto; max-height: calc(100svh - 50px - 1rem); box-sizing: border-box; overflow-y: auto; padding: .45rem; border-radius: .8rem .8rem .2rem .2rem; overscroll-behavior: contain; }
  .article-note::before { display: none; }
  .article-note-frame { display: block; box-sizing: border-box; min-height: 100%; padding: 2.15rem 1rem 1.25rem; border: 1px solid rgba(133,89,77,.25); }
  .article-note h3 { font-size: clamp(1.35rem, 6.1vw, 1.85rem); overflow-wrap: anywhere; }
  .article-note-body { padding-bottom: .35rem; overflow-wrap: anywhere; }
  .mood-letter { padding: 3rem 1.1rem; }
  .mood-letter::after { right: -4rem; }
  .persona-grid { grid-template-columns: 1fr; }
  .persona:nth-child(odd) { border-right: 0; }
  .persona button { grid-template-columns: 2.3rem 1fr auto; padding-inline: .6rem; }
  .persona-detail { padding: 0 1rem 1.4rem 3.5rem; }
  #personas-title { max-width: none; font-size: clamp(1.52rem, 7.25vw, 1.95rem); letter-spacing: -.055em; line-height: 1.18; white-space: nowrap; }
  .ending { min-height: 88svh; padding-inline: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}