/* Rebate Ledger: an archive page on pale ledger paper, serif headings, ruled tables. */
:root {
  --paper: #f9fbf6;
  --card: #fdfefa;
  --band: #eef0e9;
  --line: #d3d5cd;
  --rule-soft: #a1a59c;
  --edge: #71746a;
  --muted: #53554b;
  --ink-3: #363830;
  --ink-2: #242721;
  --ink: #191b16;
  --on-ink: #e5e7e1;
  --void: #0d0e0a;
  --mark: #efe0bc;
  --serif: "Iowan Old Style", "Palatino Linotype", "Nanum Myeongjo", "AppleMyungjo", "Hiragino Mincho ProN", "Noto Serif KR", serif;
  --sans: -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Hiragino Sans", "Noto Sans KR", sans-serif;
}
html { background: var(--paper); -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: var(--rule-soft) var(--paper); }
body { margin: 0; color: var(--ink); font: 17px/1.75 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: clip; }
:lang(ko) { word-break: keep-all; }
:lang(ja) { word-break: auto-phrase; line-break: strict; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
/* a line holds at most 40 Korean or Japanese glyphs, or about 75 English characters */
.archive :is(p, li, dd, figcaption, blockquote) { max-width: 40em; }
:lang(en) .archive :is(p, li, dd, figcaption, blockquote) { max-width: 30em; }
a { color: var(--ink); text-decoration-color: var(--rule-soft); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.masthead :focus-visible { outline-color: var(--paper); }
a:active, summary:active { color: var(--muted); text-decoration-thickness: 2px; }
::selection { background: var(--mark); color: var(--ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.3; text-wrap: balance; }
:lang(ko) :is(h1, h2, h3, .qa-list dt, .sheet-index b, .entry-body td:first-child), :lang(ja) :is(h1, h2, h3, .qa-list dt, .sheet-index b, .entry-body td:first-child) { font-family: var(--sans); letter-spacing: -.02em; }

.masthead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px max(24px, calc((100% - 1040px) / 2)); background: var(--ink); color: var(--paper); }
.masthead-title { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font: 700 18px/1 var(--serif); text-decoration: none; }
.masthead-mark svg { display: block; width: 22px; height: 22px; fill: var(--paper); }
.masthead-stamp { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; padding: 5px 8px; border: 1px solid var(--edge); color: var(--on-ink); }
.lang-switch { list-style: none; display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; }
.lang-switch a { display: block; padding: 4px 9px; color: var(--on-ink); font-size: 12px; font-weight: 700; text-decoration: none; }
.lang-switch a[aria-current] { background: var(--paper); color: var(--ink); }
.lang-switch a:active { background: var(--edge); color: var(--paper); }

.archive { max-width: 728px; margin: 0 auto; padding: 56px 24px 64px; }
:lang(en) .archive { max-width: 558px; }
.entry-head h1, .archive > h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.18; margin: 0 0 20px; }
.entry-lead { font-size: 20px; line-height: 1.65; color: var(--ink-3); margin: 0 0 24px; }
.entry-meta { border-collapse: collapse; font-size: 15px; margin: 0 0 32px; }
.entry-meta th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 18px 4px 0; vertical-align: top; }
.entry-meta td { padding: 4px 0; }
.entry-art { display: block; width: 100%; height: auto; border: 1px solid var(--line); }

.tally { list-style: none; margin: 40px 0 48px; padding: 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(4, 1fr); }
.tally li { padding: 16px 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tally b { display: block; margin-bottom: 6px; font: 700 34px/1.1 var(--serif); color: var(--ink); }

.queries { background: var(--band); padding: 32px 36px; margin: 0 0 56px; }
.queries h2 { font-size: 24px; margin: 0 0 16px; }
.queries ol { margin: 0; padding-left: 24px; }
.queries li { padding: 8px 0 8px 4px; }
.queries li::marker { font: 700 16px var(--serif); }
.queries h3 { font-size: 18px; margin: 0 0 4px; }
.queries p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

.entry-body h2 { font-size: clamp(25px, 3vw, 30px); line-height: 1.3; margin: 64px 0 18px; padding-top: 20px; border-top: 2px solid var(--ink); }
.entry-body h3 { font-size: 20px; margin: 32px 0 10px; }
.entry-body p, .entry-body li { color: var(--ink-2); }
.entry-body ul { padding-left: 22px; }
.entry-body blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 1px solid var(--ink); font-size: 15px; color: var(--muted); }
.entry-body table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.55; margin: 20px 0 28px; }
.entry-body th { text-align: left; background: var(--ink); color: var(--paper); font-weight: 600; padding: 9px 12px; white-space: nowrap; }
.entry-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 5.5em; }
:lang(en) .entry-body th { white-space: normal; }
.entry-body tr:nth-child(even) td { background: var(--band); }
.exhibit { margin: 22px 0 28px; }
.exhibit img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.exhibit figcaption { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.exhibit small { display: block; font: 12px/1.5 var(--sans); margin-top: 2px; }
.nw { white-space: nowrap; }

.cast-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: center; margin: 48px 0; padding: 20px; border: 1px solid var(--line); background: var(--card); }
.cast-card img { display: block; width: 100%; height: auto; }
.cast-card h2 { font-size: 20px; margin: 0 0 8px; }
.cast-card p { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.cast-card a:not([tabindex]) { font-weight: 700; }

.qa-list { margin: 48px 0 0; }
.qa-list h2 { font-size: clamp(25px, 3vw, 30px); padding-top: 20px; border-top: 2px solid var(--ink); }
.qa-list dt { font: 700 19px/1.45 var(--serif); margin: 28px 0 6px; }
.qa-list dd { margin: 0; color: var(--ink-2); }
.provenance { margin: 56px 0 0; padding: 24px 28px; border: 1px dashed var(--rule-soft); font-size: 15px; line-height: 1.65; color: var(--muted); }
.provenance h2 { font-size: 17px; margin: 0 0 8px; }
.provenance ul { margin: 0; padding-left: 20px; }

.trail-line { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.stamp-line { font: 12px/1.6 ui-monospace, Menlo, monospace; color: var(--muted); }
.contents-box { border: 1px solid var(--line); background: var(--card); padding: 12px 18px; margin: 20px 0 8px; font-size: 15px; }
.contents-box summary { cursor: pointer; font-weight: 700; }
.contents-box ol { margin: 10px 0 4px; }

.cast-page video { display: block; width: 100%; height: auto; background: var(--void); margin: 10px 0 24px; }
.return-link { font-size: 14px; }
.scene-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.scene-table caption { text-align: left; font: 700 18px var(--serif); padding-bottom: 10px; }
.scene-table th { text-align: left; border-bottom: 2px solid var(--ink); padding: 8px 10px; }
.scene-table td { border-bottom: 1px solid var(--line); padding: 10px; vertical-align: top; }

.imprint { border-top: 1px solid var(--line); padding: 28px 24px 44px; max-width: 760px; margin: 0 auto; font-size: 14px; line-height: 1.6; color: var(--muted); }
.imprint p { margin: 0 0 8px; }
.imprint-rg { color: var(--ink); font-weight: 700; }
.imprint-links { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; }

.sheet > h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.2; margin: 0 0 18px; }
.sheet-index { margin: 56px 0 0; padding-top: 20px; border-top: 2px solid var(--ink); }
.sheet-index h2 { font-size: 22px; margin: 0 0 14px; }
.sheet-index ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sheet-index a { display: block; height: 100%; box-sizing: border-box; padding: 16px 18px; border: 1px solid var(--line); background: var(--card); text-decoration: none; }
.sheet-index a:hover { border-color: var(--ink); }
.sheet-index a:active { background: var(--band); color: var(--ink); }
.sheet-index b { display: block; font: 700 17px/1.4 var(--serif); }
.sheet-index span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.entry-body .figure-note { font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .archive { padding: 36px 20px 48px; }
  .masthead { padding: 12px 20px; }
  .masthead-stamp { display: none; }
  .entry-lead { font-size: 18px; }
  .cast-card { grid-template-columns: minmax(0, 1fr); }
  .tally { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .tally b { font-size: 28px; }
  .queries { padding: 24px 20px; margin-left: -20px; margin-right: -20px; }
  .entry-body table { display: block; overflow: visible; font-size: 15px; }
  .entry-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .entry-body tbody, .entry-body tr { display: block; }
  .entry-body tr { border-top: 2px solid var(--ink); padding: 4px 0 12px; }
  .entry-body tr:nth-child(even) td { background: none; }
  .entry-body td { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 12px; min-width: 0; padding: 8px 0; }
  .entry-body td::before { content: attr(data-label); font-size: 13px; line-height: 1.6; color: var(--muted); }
  .entry-body td:first-child { display: block; padding: 10px 0 6px; border-bottom: 0; font: 700 18px/1.4 var(--serif); }
  .entry-body td:first-child::before { content: none; }
}