/* Hallmark · genre: editorial · design-system: design.md · designed-as-app
 * scope: whole site — masthead, browse, deck, archive, categories, digests
 * theme: custom (vibe: "broadsheet, azure ink, hairline rules")
 * paper oklch(97.5% 0.006 252) · accent oklch(50% 0.152 252) cool
 * axes: light paper / roman-serif display / cool accent
 * macrostructure: Index-First (browse) · Split Studio (deck)
 * type: Newsreader (display) + IBM Plex Sans (body) + JetBrains Mono (outlier)
 *       outlier role: machine metadata only — mastnav, kickers, meta lines, folios, numerals
 *       Korean rides the same display/body stacks as a script fallback (Noto Serif KR / Noto Sans KR)
 * nav: N6 newspaper masthead · footer: Ft4 dense colophon (deck keeps Ft2 inline rule)
 * enrichment: none (typography only)
 * bilingual: EN · 병기 · 한글 — 병기 leads with Korean at display size; English follows one step
 *            down and muted. The DOM keeps English canonical so the deck can read it by class;
 *            CSS `order` is what lifts Korean above it in the browse list.
 * contrast: pass (40–41) · slop: pass (42–45) · tokens: pass (48)
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=IBM+Plex+Sans:wght@400;600&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+KR:wght@400;500&family=Noto+Sans+KR:wght@400;500&display=swap");

/* ---- Design tokens (site-wide; mirrored in tokens.css and design.md) ----
   Korean is a script fallback inside the same two role stacks, not a fourth and fifth
   family: Latin resolves to Newsreader / IBM Plex Sans, Hangul falls through to Noto. */
:root{
--font-display:"Newsreader",ui-serif,"Noto Serif KR",Cambria,Georgia,serif;
--font-body:"IBM Plex Sans",ui-sans-serif,"Noto Sans KR","Segoe UI",Helvetica,sans-serif;
--font-outlier:"JetBrains Mono",ui-monospace,Consolas,monospace;
--color-paper:oklch(97.5% 0.006 252);
--color-paper-2:oklch(94.6% 0.009 252);
--color-paper-3:oklch(91.8% 0.011 252);
--color-rule:oklch(87% 0.014 252);
--color-rule-strong:oklch(72% 0.022 252);
/* Interactive boundaries need 3:1; decorative hairlines legitimately sit below it. */
--color-control:oklch(60% 0.028 252);
--color-muted:oklch(52% 0.024 252);
--color-ink-2:oklch(38% 0.026 252);
--color-ink:oklch(23% 0.028 252);
--color-accent:oklch(50% 0.152 252);
--color-focus:oklch(50% 0.152 252);
--color-cover:oklch(26% 0.055 252);
--color-cover-ink:oklch(95% 0.012 252);
--color-cover-muted:oklch(74% 0.03 252);
--color-cover-rule:oklch(45% 0.05 252);
--color-cover-rule-2:oklch(35% 0.05 252);
--color-stage-ga:oklch(45% 0.12 150);
--color-stage-pv:oklch(50% 0.11 70);
--color-stage-pp:oklch(45% 0.15 300);
--color-stage-rt:oklch(48% 0.16 25);
--color-stage-dv:oklch(46% 0.09 235);
--space-2xs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;
--space-lg:1.5rem;--space-xl:2.5rem;--space-2xl:4rem;--space-3xl:6rem;
--text-xs:0.75rem;--text-sm:0.8125rem;--text-base:0.9375rem;--text-md:1.0625rem;
--text-lg:1.375rem;--text-xl:1.875rem;
--text-display:clamp(1.9rem,2.6vw + 1rem,3rem);
--rule-hair:1px;--rule-heavy:2px;
--ease-out:cubic-bezier(.16,1,.3,1);--dur-short:220ms;--dur-mid:380ms}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--color-paper);color:var(--color-ink);
font:var(--text-base)/1.6 var(--font-body);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* ---------- N6 newspaper masthead ---------- */
header{background:var(--color-paper);padding:var(--space-xl) var(--space-md) 0}
header .wrap,nav,main,footer{width:min(1720px,94vw);margin:0 auto}
header h1{margin:0;font-family:var(--font-display);font-size:var(--text-display);
font-weight:500;line-height:1.02;letter-spacing:-.025em;color:var(--color-ink);
overflow-wrap:anywhere;min-width:0}
header p{margin:var(--space-sm) 0 0;max-width:68ch;font-family:var(--font-display);
font-size:var(--text-md);line-height:1.5;color:var(--color-ink-2)}
header .wrap{padding-bottom:var(--space-md);
border-bottom:var(--rule-hair) solid var(--color-rule-strong)}

nav{display:flex;gap:var(--space-lg);flex-wrap:wrap;align-items:baseline;
padding:var(--space-sm) var(--space-md);
border-bottom:var(--rule-hair) solid var(--color-rule);
font-family:var(--font-outlier);font-size:var(--text-xs);letter-spacing:.16em;
text-transform:uppercase}
nav a{color:var(--color-muted);text-decoration:none;padding-block:var(--space-2xs);
white-space:nowrap;box-shadow:inset 0 -1px 0 transparent;
transition:color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
nav a:hover{color:var(--color-accent);box-shadow:inset 0 -2px 0 var(--color-accent)}
nav a:active{color:var(--color-ink)}

main{padding:var(--space-lg) var(--space-md) var(--space-3xl)}

/* ---------- Section heads — stacked, never label-beside-heading ---------- */
h2{margin:0 0 var(--space-md);font-family:var(--font-display);font-size:var(--text-lg);
font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--color-ink);
padding-bottom:var(--space-xs);border-bottom:var(--rule-heavy) solid var(--color-ink)}
h2 small{display:block;margin-top:var(--space-2xs);font-family:var(--font-body);
font-size:var(--text-sm);font-weight:400;letter-spacing:0;text-transform:none;
color:var(--color-muted)}

/* ---------- Panels — hairline, square ---------- */
.card{background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);
padding:var(--space-lg);margin-bottom:var(--space-lg)}

/* ---------- Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:0;margin:0 0 var(--space-lg);
border-top:var(--rule-heavy) solid var(--color-ink);
border-bottom:var(--rule-hair) solid var(--color-rule-strong)}
.stat{padding:var(--space-md);min-width:0;
border-right:var(--rule-hair) solid var(--color-rule)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:none}
.stat b{display:block;font-family:var(--font-display);font-size:var(--text-xl);
font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--color-ink);
font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:var(--space-xs);font-family:var(--font-outlier);
font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted)}

/* ---------- Filters ---------- */
.filters .row{display:flex;gap:var(--space-xs);flex-wrap:wrap;align-items:center;
margin:0 0 var(--space-sm)}
.filters .row:last-child{margin-bottom:0}
.filters .lbl{font-family:var(--font-outlier);font-size:var(--text-xs);text-transform:uppercase;
letter-spacing:.14em;color:var(--color-muted);min-width:104px}
.filters .hint{font-size:var(--text-xs);color:var(--color-muted)}

/* C1 outlined chip — ink inversion on press, never a coloured fill */
.chip{cursor:pointer;user-select:none;border:var(--rule-hair) solid var(--color-control);
background:none;border-radius:0;padding:var(--space-2xs) var(--space-sm);
font:var(--text-sm)/1.4 var(--font-body);color:var(--color-ink-2);white-space:nowrap;
transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.chip:active{color:var(--color-ink)}
.chip[aria-pressed="true"]{border-color:var(--color-ink);color:var(--color-paper);
background:var(--color-ink);font-weight:600}
.chip .n{margin-left:var(--space-xs);font-family:var(--font-outlier);font-size:var(--text-xs);
font-variant-numeric:tabular-nums;opacity:.72}
.chip.zero{opacity:.42}
.chip.zero:hover{border-color:var(--color-control);color:var(--color-ink-2)}
.chip[aria-pressed="true"] .n{opacity:.85}
/* Release-stage chips keep their semantic hue on the rule and the label, not as a fill */
.chip.s-ga[aria-pressed="true"]{background:var(--color-stage-ga);border-color:var(--color-stage-ga)}
.chip.s-public-preview[aria-pressed="true"]{background:var(--color-stage-pv);border-color:var(--color-stage-pv)}
.chip.s-private-preview[aria-pressed="true"]{background:var(--color-stage-pp);border-color:var(--color-stage-pp)}
.chip.s-retirement[aria-pressed="true"]{background:var(--color-stage-rt);border-color:var(--color-stage-rt)}
.chip.s-in-development[aria-pressed="true"]{background:var(--color-stage-dv);border-color:var(--color-stage-dv)}

input[type=search],input[type=date],input[type=email]{font:var(--text-sm)/1.4 var(--font-body);
padding:var(--space-2xs) var(--space-sm);border:var(--rule-hair) solid var(--color-control);
border-radius:0;color:var(--color-ink);background:var(--color-paper);
outline:2px solid transparent;outline-offset:1px;
transition:border-color var(--dur-short) var(--ease-out)}
input[type=search]{min-width:260px;flex:1}
input[type=search]:hover,input[type=date]:hover,input[type=email]:hover{border-color:var(--color-ink-2)}
input[type=search]:focus-visible,input[type=date]:focus-visible,input[type=email]:focus-visible{
outline:2px solid var(--color-focus);border-color:var(--color-accent)}
input::placeholder{color:var(--color-muted)}

.btn{cursor:pointer;background:none;border:var(--rule-hair) solid var(--color-control);
border-radius:0;padding:var(--space-2xs) var(--space-sm);
font:var(--text-sm)/1.4 var(--font-body);color:var(--color-ink);
transition:border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn:active{color:var(--color-ink);border-color:var(--color-ink)}
.btn:disabled{color:var(--color-control);border-color:var(--color-rule);cursor:not-allowed}
.result{margin-left:auto;font-family:var(--font-outlier);font-size:var(--text-xs);
letter-spacing:.06em;color:var(--color-muted)}
.result b{color:var(--color-ink);font-variant-numeric:tabular-nums}

/* ---------- F3 tabular spec sheet ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.summary{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--text-sm);
font-variant-numeric:tabular-nums}
table.summary th{text-align:left;padding:var(--space-xs) var(--space-sm);
border-bottom:var(--rule-heavy) solid var(--color-ink);color:var(--color-muted);
font-family:var(--font-outlier);font-size:var(--text-xs);font-weight:400;
text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
table.summary td{padding:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule);
vertical-align:top}
table.summary tbody tr:hover{background:var(--color-paper-2)}
table.summary td.num,table.summary th.num{text-align:right;white-space:nowrap}
table.summary tfoot td{font-weight:600;border-top:var(--rule-heavy) solid var(--color-ink);
border-bottom:none;background:var(--color-paper-2)}
a.cat{font-family:var(--font-display);font-size:var(--text-md);font-weight:500;
color:var(--color-ink);text-decoration:none;
box-shadow:inset 0 -1px 0 transparent;
transition:box-shadow var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
a.cat:hover{color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent)}
.bar{display:block;width:100%;height:var(--rule-heavy);background:var(--color-rule-strong);
margin-top:var(--space-xs);transform:scaleX(0);transform-origin:left center;
transition:transform var(--dur-short) var(--ease-out)}
tr:hover .bar{background:var(--color-accent)}
.top{font-size:var(--text-sm);line-height:1.5;color:var(--color-muted)}

/* ---------- Stage marks — square swatch + small caps, never a filled oval ---------- */
.pill{display:inline-flex;align-items:center;gap:var(--space-xs);border-radius:0;
font-family:var(--font-outlier);font-size:var(--text-xs);font-weight:500;
letter-spacing:.12em;text-transform:uppercase}
.pill::before{content:"";flex:none;width:.62em;height:.62em;background:currentColor}
.pill.ga{color:var(--color-stage-ga)}
.pill.pv{color:var(--color-stage-pv)}
.pill.pp{color:var(--color-stage-pp)}
.pill.rt{color:var(--color-stage-rt)}
.pill.dv{color:var(--color-stage-dv)}
.pill.muted{color:var(--color-muted)}
/* Inside the table a pill carries a count, so the swatch would read as decoration */
table.summary .pill{display:inline;font-size:var(--text-sm);letter-spacing:0;font-weight:600}
table.summary .pill::before{content:none}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:end;
margin:var(--space-2xl) 0 var(--space-md)}
.toolbar h2{border:none;margin:0;padding:0;flex:1;min-width:0}

/* ---------- Category panels ---------- */
.columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:var(--space-lg);align-items:start;grid-auto-rows:8px}
.columns>details{background:var(--color-paper);
border:var(--rule-hair) solid var(--color-rule);border-top:var(--rule-heavy) solid var(--color-ink);
margin:0;overflow:hidden;align-self:start}
details>summary{cursor:pointer;list-style:none;padding:var(--space-sm) var(--space-md);
font-family:var(--font-display);font-weight:500;font-size:var(--text-md);
background:var(--color-paper-2);
border-bottom:var(--rule-hair) solid var(--color-rule);display:flex;
justify-content:space-between;align-items:baseline;gap:var(--space-xs);user-select:none;
transition:background var(--dur-short) var(--ease-out)}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"+";font-family:var(--font-outlier);font-size:var(--text-sm);
color:var(--color-muted);transition:color var(--dur-short) var(--ease-out)}
details[open]>summary::after{content:"\2212"}
details>summary:hover{background:var(--color-paper-3)}
details>summary:hover::after{color:var(--color-accent)}
summary .count{font-family:var(--font-outlier);font-weight:400;color:var(--color-muted);
font-size:var(--text-xs);letter-spacing:.08em;white-space:nowrap}
.body{padding:0 var(--space-md) var(--space-sm);max-height:clamp(320px,52vh,640px);
overflow-y:auto;overscroll-behavior:contain}

/* ---------- Update rows ----------
   The DOM keeps English canonical so the deck can read it by class. When a translation
   exists, `order` lifts Korean above its English counterpart and the two swap emphasis. */
.item{padding:var(--space-md) 0;border-bottom:var(--rule-hair) solid var(--color-rule)}
.item.bilingual{display:flex;flex-direction:column}
.item:last-child{border-bottom:none}
.item a.title{display:block;font-family:var(--font-display);font-weight:500;
font-size:var(--text-md);line-height:1.28;letter-spacing:-.01em;text-decoration:none;
color:var(--color-ink);overflow-wrap:anywhere;
box-shadow:inset 0 -1px 0 transparent;
transition:color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.item a.title:hover{color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent)}
.item .title-ko{margin:var(--space-2xs) 0 0;font-family:var(--font-display);
font-size:var(--text-base);line-height:1.45;color:var(--color-ink-2);word-break:keep-all}
/* Korean leads: it takes the display size, English steps down and mutes. */
.item.bilingual .title-ko{order:1;margin:0;font-size:var(--text-md);font-weight:500;
line-height:1.4;letter-spacing:-.005em;color:var(--color-ink)}
.item.bilingual a.title{order:2;margin-top:var(--space-2xs);font-size:var(--text-base);
font-weight:400;line-height:1.4;color:var(--color-ink-2)}
.item.bilingual .meta{order:3}
.item.bilingual .summary-line-ko{order:4}
.item.bilingual .summary-line{order:5}
.item.bilingual ul.points{order:6}
.item.bilingual .doclink{order:7}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-sm);
margin:var(--space-xs) 0;font-family:var(--font-outlier);font-size:var(--text-xs);
letter-spacing:.06em;color:var(--color-muted)}
.summary-line{margin:var(--space-xs) 0 0;font-size:var(--text-base);line-height:1.55;
color:var(--color-ink-2)}
.summary-line-ko{margin:var(--space-2xs) 0 0;font-size:var(--text-sm);line-height:1.6;
color:var(--color-muted);word-break:keep-all}
.item.bilingual .summary-line-ko{margin-top:var(--space-xs);font-size:var(--text-base);
line-height:1.62;color:var(--color-ink-2)}
.item.bilingual .summary-line{margin-top:var(--space-2xs);font-size:var(--text-sm);
line-height:1.5;color:var(--color-muted)}
ul.points{margin:var(--space-sm) 0 0;padding:0;list-style:none;counter-reset:pt}
ul.points li{counter-increment:pt;display:grid;grid-template-columns:2.2em minmax(0,1fr);
gap:0 var(--space-2xs);align-items:baseline;margin:0;padding:var(--space-2xs) 0;
font-size:var(--text-sm);line-height:1.5;color:var(--color-ink-2)}
ul.points li::before{content:counter(pt,decimal-leading-zero);font-family:var(--font-outlier);
font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--color-accent)}
ul.points li .en,ul.points li .ko{grid-column:2}
ul.points li .ko{display:block;margin-top:var(--space-2xs);
font-size:var(--text-xs);line-height:1.55;color:var(--color-muted);word-break:keep-all}
/* Korean first inside each point, English underneath. */
.item.bilingual ul.points li .ko{order:1;margin-top:0;font-size:var(--text-sm);
line-height:1.6;color:var(--color-ink-2)}
.item.bilingual ul.points li .en{order:2;display:block;margin-top:var(--space-2xs);
font-size:var(--text-xs);line-height:1.5;color:var(--color-muted)}
.doclink{margin-top:var(--space-xs);font-family:var(--font-outlier);font-size:var(--text-xs);
letter-spacing:.06em}
.doclink a{color:var(--color-accent);text-decoration:none;
box-shadow:inset 0 -1px 0 var(--color-rule-strong)}
.doclink a:hover{box-shadow:inset 0 -1px 0 var(--color-accent)}

/* ---------- Subscribe ---------- */
.subscribe{margin-top:var(--space-2xl)}
.subscribe-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:var(--space-lg) var(--space-2xl);align-items:start}
.signup{min-width:0}
.signup .lbl{display:block;margin-bottom:var(--space-xs);font-family:var(--font-outlier);
font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted)}
.signup-row{display:flex;gap:var(--space-xs);flex-wrap:wrap;align-items:stretch}
.signup-row input[type=email]{flex:1;min-width:min(100%,16rem);min-height:2.5rem}
.signup-row .btn{min-height:2.5rem;padding-inline:var(--space-md);white-space:nowrap}
.signup-row .address{flex:1;min-width:min(100%,16rem);min-height:2.5rem;display:flex;
align-items:center;padding:var(--space-2xs) var(--space-sm);
border:var(--rule-hair) solid var(--color-control);background:var(--color-paper-2);
font-family:var(--font-outlier);font-size:var(--text-sm);color:var(--color-ink);
overflow-wrap:anywhere;user-select:all}
/* The help slot is always reserved, so an error never pushes the layout down. */
.signup-help{margin:var(--space-xs) 0 0;min-height:1lh;font-size:var(--text-sm);
line-height:1.5;color:var(--color-muted)}
.signup-help a{color:var(--color-accent);text-decoration:none;
box-shadow:inset 0 -1px 0 var(--color-rule-strong)}
.signup-help a:hover{box-shadow:inset 0 -1px 0 var(--color-accent)}
.signup-help--static{margin-top:0;max-width:52ch}
.signup[data-state="error"] input[type=email]{border-color:var(--color-stage-rt)}
.signup[data-state="error"] .signup-help{color:var(--color-stage-rt)}
.signup[data-state="success"] .signup-help{color:var(--color-stage-ga)}
.signup[data-state="success"] .address{border-color:var(--color-stage-ga)}
.signup[data-state="loading"] .signup-help{color:var(--color-ink-2)}
.signup input[type=email]:disabled,.signup .btn:disabled{opacity:.55;cursor:not-allowed;
background:var(--color-paper-2);border-color:var(--color-rule)}
.subscribe [lang="ko"],.subscribe[lang="ko"]{word-break:keep-all}
/* The small-caps tracking is tuned for Latin; on Hangul it just pulls the syllables apart. */
.subscribe [lang="ko"] .lbl,.subscribe [lang="ko"].signup .lbl,.subscribe [lang="ko"].feedbox .lbl{letter-spacing:.02em;text-transform:none;font-family:var(--font-body);
font-weight:600;font-size:var(--text-xs)}
.signup [lang="ko"],.subscribe [lang="ko"]{word-break:keep-all}

.feedbox{min-width:0;padding-left:var(--space-lg);
border-left:var(--rule-hair) solid var(--color-rule)}
.feedbox .lbl{display:block;margin-bottom:var(--space-xs);font-family:var(--font-outlier);
font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted)}
.feedbox-note{margin:0 0 var(--space-sm);max-width:40ch;font-size:var(--text-sm);
line-height:1.5;color:var(--color-ink-2)}
.feedbox .btn{display:inline-block;text-decoration:none;font-family:var(--font-outlier);
font-size:var(--text-xs);letter-spacing:.1em}
@media (max-width:780px){.subscribe-grid{grid-template-columns:minmax(0,1fr)}
.feedbox{padding-left:0;padding-top:var(--space-md);border-left:none;
border-top:var(--rule-hair) solid var(--color-rule)}}

/* ---------- Index lists (archive, categories) ---------- */
ul.list{list-style:none;padding:0;margin:0}
ul.list li{display:flex;align-items:baseline;gap:var(--space-sm);flex-wrap:wrap;
padding:var(--space-sm) 0;border-bottom:var(--rule-hair) solid var(--color-rule);
font-size:var(--text-base)}
ul.list li:last-child{border-bottom:none}
ul.list li a{font-family:var(--font-display);font-size:var(--text-md);font-weight:500;
color:var(--color-ink);text-decoration:none;
box-shadow:inset 0 -1px 0 var(--color-rule-strong)}
ul.list li a:hover{color:var(--color-accent);box-shadow:inset 0 -1px 0 var(--color-accent)}
ul.list li b{font-family:var(--font-display);font-weight:500;font-size:var(--text-md)}

/* ---------- Digest source ---------- */
.digest-source{margin:0;padding:var(--space-md);white-space:pre-wrap;
background:var(--color-paper-2);border-left:var(--rule-heavy) solid var(--color-rule-strong);
font:var(--text-sm)/1.65 var(--font-outlier);color:var(--color-ink-2);overflow-x:auto}

/* ---------- Ft4 dense colophon ---------- */
footer{padding:var(--space-lg) var(--space-md) var(--space-2xl);
border-top:var(--rule-hair) solid var(--color-rule-strong);
font-family:var(--font-outlier);font-size:var(--text-xs);line-height:1.7;
letter-spacing:.04em;color:var(--color-muted);max-width:none}
footer b{display:block;margin-bottom:var(--space-2xs);font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-ink)}

.empty{padding:var(--space-xl);text-align:center;font-family:var(--font-display);
font-size:var(--text-md);color:var(--color-muted)}
.hidden{display:none !important}

@media (max-width:780px){.filters .lbl{min-width:100%}
.stat{border-right:none;border-bottom:var(--rule-hair) solid var(--color-rule)}
.stat:last-child{border-bottom:none}}
@media (prefers-reduced-motion:reduce){
nav a,.chip,.btn,.bar,a.cat,.item a.title,details>summary{transition-duration:1ms}}

/* ---------- View switcher ---------- */
.chip[data-view][aria-pressed="true"]{background:var(--color-ink);border-color:var(--color-ink)}

/* ---------- Slide deck — Split Studio, editorial ---------- */
.deck{--fit:1;background:var(--color-paper);border:var(--rule-hair) solid var(--color-rule);
overflow:hidden;display:flex;flex-direction:column;height:var(--deck-h,72vh);min-height:340px}
.deck:fullscreen{height:100vh;border:none}
.deck:fullscreen .slide{padding:4.2vh clamp(40px,6.5vw,160px) 3vh}
.slide{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;
padding:clamp(20px,3.4vh,42px) clamp(24px,4.4vw,72px) clamp(14px,2vh,26px);
font-family:var(--font-body);color:var(--color-ink);
font-size:calc(var(--fit) * clamp(13.5px,0.62vw + 0.62vh + 6px,21px))}

/* Running head — N6 masthead, double rule */
.slide .slide-head{flex:none;display:flex;align-items:baseline;justify-content:space-between;
gap:var(--space-md);padding-bottom:.5em;border-bottom:var(--rule-hair) solid var(--color-rule-strong);
box-shadow:0 3px 0 -2px var(--color-rule);font-family:var(--font-outlier);
font-size:.6em;letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted)}
.slide .slide-head .mast{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slide .slide-head .folio{font-variant-numeric:tabular-nums;letter-spacing:.1em;white-space:nowrap}
.slide .slide-head .folio b{color:var(--color-ink);font-weight:500}

/* Diptych — lede half / notes half, gutter only, no divider rule */
.slide .slide-main{flex:1 0 auto;display:grid;align-content:center;align-content:safe center;
grid-template-columns:1.06fr 0.94fr;column-gap:clamp(28px,4vw,68px);row-gap:var(--space-lg);
padding:1.6em 0 1.2em}
.slide .slide-main.single{grid-template-columns:minmax(0,1fr) minmax(0,.3fr)}
.slide .lede{min-width:0}
.slide .notes{min-width:0}

.slide .kicker{margin:0 0 .9em;font-family:var(--font-outlier);font-size:.63em;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent)}
.slide h3{margin:0;font-family:var(--font-display);font-size:2.35em;font-weight:500;
line-height:1.08;letter-spacing:-.02em;color:var(--color-ink);overflow-wrap:anywhere;min-width:0}
.slide.long h3{font-size:1.85em}
.slide h3 a{color:inherit;text-decoration:none;box-shadow:inset 0 -.06em 0 transparent;
transition:box-shadow var(--dur-short) var(--ease-out)}
.slide h3 a:hover{box-shadow:inset 0 -.06em 0 var(--color-accent)}
.slide h3 a:active{box-shadow:inset 0 -.06em 0 var(--color-ink)}
.slide h3 a:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
/* Korean now leads at display size, so it relaxes the Latin tracking and opens the leading. */
.slide h3:lang(ko){letter-spacing:-.005em;line-height:1.26;word-break:keep-all}
.slide h3 .alt{display:block;margin-top:.3em;font-size:.6em;font-weight:400;line-height:1.26;
letter-spacing:-.015em;color:var(--color-ink-2)}
.slide .lead{margin:.85em 0 0;max-width:46ch;font-family:var(--font-display);font-size:1.06em;
font-weight:400;line-height:1.5;color:var(--color-ink-2)}
.slide .lead:lang(ko){line-height:1.62;word-break:keep-all}
.slide .lead.alt{margin-top:.32em;font-size:.86em;line-height:1.5;color:var(--color-muted)}
.slide .byline{display:flex;align-items:center;flex-wrap:wrap;gap:.55em 1.1em;margin:1.5em 0 0;
padding-top:.85em;border-top:var(--rule-hair) solid var(--color-rule);
font-family:var(--font-outlier);font-size:.66em;letter-spacing:.06em;color:var(--color-muted)}
.slide .byline .stage{display:inline-flex;align-items:center;gap:.5em;font-weight:500;
letter-spacing:.12em;text-transform:uppercase}
.slide .byline .stage::before{content:"";width:.62em;height:.62em;background:currentColor}
.slide .byline .stage.ga{color:var(--color-stage-ga)}
.slide .byline .stage.pv{color:var(--color-stage-pv)}
.slide .byline .stage.pp{color:var(--color-stage-pp)}
.slide .byline .stage.rt{color:var(--color-stage-rt)}
.slide .byline .stage.dv{color:var(--color-stage-dv)}
.slide .byline .stage.muted{color:var(--color-muted)}

/* Notes half — numbered, hanging figures */
.slide ol.deck-points{margin:0;padding:.9em 0 0;list-style:none;counter-reset:pt;
border-top:var(--rule-heavy) solid var(--color-ink)}
.slide ol.deck-points li{counter-increment:pt;display:grid;grid-template-columns:2.6em minmax(0,1fr);
align-items:baseline;gap:0 .4em;padding:.72em 0;border-bottom:var(--rule-hair) solid var(--color-rule);
font-size:.92em;line-height:1.5;color:var(--color-ink-2)}
.slide ol.deck-points li:last-child{border-bottom:none}
.slide ol.deck-points li:lang(ko){word-break:keep-all}
.slide ol.deck-points li .alt{display:block;grid-column:2;margin-top:.22em;font-size:.8em;
line-height:1.5;color:var(--color-muted)}
.slide ol.deck-points li::before{content:counter(pt,decimal-leading-zero);
font-family:var(--font-outlier);font-size:.66em;font-weight:500;letter-spacing:.08em;
font-variant-numeric:tabular-nums;color:var(--color-accent)}

/* Bilingual slides carry roughly twice the copy, so they tighten their own rhythm
   before the auto-fit has to shrink the type. */
.slide.bilingual .slide-main{padding:1em 0 .8em;row-gap:var(--space-md)}
.slide.bilingual ol.deck-points li{padding:.5em 0}
.slide.bilingual .lead{margin-top:.6em}
.slide.bilingual .byline{margin-top:1.1em;padding-top:.65em}

/* Ft2 — inline rule, single line */
.slide .slide-foot{flex:none;display:flex;gap:1.6em;flex-wrap:wrap;align-items:baseline;
padding-top:.85em;border-top:var(--rule-hair) solid var(--color-rule-strong);
font-family:var(--font-outlier);font-size:.64em;letter-spacing:.08em;color:var(--color-muted)}
.slide .slide-foot a{color:var(--color-accent);text-decoration:none;white-space:nowrap;
box-shadow:inset 0 -1px 0 var(--color-rule-strong);
transition:box-shadow var(--dur-short) var(--ease-out)}
.slide .slide-foot a:hover{box-shadow:inset 0 -1px 0 var(--color-accent)}
.slide .slide-foot a:active{color:var(--color-ink);box-shadow:inset 0 -1px 0 var(--color-ink)}
.slide .slide-foot a:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.slide .empty{font-family:var(--font-display);color:var(--color-muted)}

/* Slide change — one quiet entrance */
@keyframes dk-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.slide .slide-main{animation:dk-enter var(--dur-mid) var(--ease-out) both}

/* Deck controls — typographic, square, hairline */
.deckbar{display:flex;align-items:center;gap:var(--space-md);
padding:var(--space-sm) var(--space-md);
background:var(--color-paper-2);border-top:var(--rule-hair) solid var(--color-rule);flex-wrap:wrap;
font-family:var(--font-outlier);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.deckbar .btn{background:none;border:none;border-radius:0;padding:.5em .1em;color:var(--color-ink-2);
font:inherit;cursor:pointer;box-shadow:inset 0 -1px 0 var(--color-control);
transition:box-shadow var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.deckbar .btn:hover{color:var(--color-accent);box-shadow:inset 0 -2px 0 var(--color-accent)}
.deckbar .btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.deckbar .btn:active{color:var(--color-ink)}
.deckbar .btn:disabled{color:var(--color-control);box-shadow:none;cursor:not-allowed}
.deckbar .btn.step{padding:.5em .9em;box-shadow:none;
border:var(--rule-hair) solid var(--color-control);color:var(--color-ink)}
.deckbar .btn.step:hover{border-color:var(--color-accent);color:var(--color-accent);box-shadow:none}
.deckbar .btn.step:disabled{border-color:var(--color-rule);color:var(--color-control)}
.deckbar .counter{font-variant-numeric:tabular-nums;letter-spacing:.14em;color:var(--color-ink);
min-width:5.5em;text-align:center}
.deckbar .langs{display:inline-flex;align-items:center;gap:var(--space-sm);
padding-left:var(--space-md);margin-left:var(--space-2xs);
border-left:var(--rule-hair) solid var(--color-control)}
.deckbar .btn.lang{color:var(--color-muted);box-shadow:inset 0 -1px 0 transparent}
.deckbar .btn.lang:hover{color:var(--color-accent);box-shadow:inset 0 -2px 0 var(--color-accent)}
.deckbar .btn.lang[aria-pressed="true"]{color:var(--color-ink);
box-shadow:inset 0 -2px 0 var(--color-ink)}
.deckbar .spacer{flex:1}
.deckbar .hint{font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--color-muted)}
.progress{height:var(--rule-heavy);background:var(--color-rule)}
.progress span{display:block;height:100%;width:100%;background:var(--color-accent);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--dur-short) var(--ease-out)}

@media (max-width:900px){.deckbar .hint{display:none}
.slide .slide-main,.slide .slide-main.single{grid-template-columns:minmax(0,1fr);
align-content:start;row-gap:var(--space-md)}
.slide h3{font-size:1.9em}.slide.long h3{font-size:1.6em}}
@media (max-width:620px){.deckbar{gap:var(--space-xs);padding:var(--space-sm)}
.deckbar .btn.step{padding:.5em .6em}.deckbar .counter{min-width:4.6em;letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){
.slide .slide-main{animation-duration:140ms;animation-name:dk-fade}
@keyframes dk-fade{from{opacity:0}to{opacity:1}}
.progress span,.deckbar .btn,.slide h3 a,.slide .slide-foot a{transition-duration:1ms}}