/* ============= TOKENS ============= */
:root {
  --bg: #faf8f3;
  --bg-soft: #f4f1e8;
  --bg-elev: #ffffff;
  --bg-tint: #fff8e8;
  --hairline: #e8e2d3;
  --hairline-strong: #d8d0bd;
  --ink: #1a1a1a;
  --ink-2: #3a3a3a;
  --ink-3: #6b6b6b;
  --ink-4: #9b9b9b;
  --accent: #b8451e;
  --accent-deep: #8b3315;
  --accent-soft: #fde8de;
  --accent-line: #e8c0ad;
  --navy: #1e3a5f;
  --navy-soft: #dde7f0;
  --gold: #b8860b;
  --gold-soft: #fdf1c4;
  --green: #2d6a4f;
  --red: #8b2c2c;
  --serif: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* Progress bar */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--accent); z-index: 100; transition: width 0.1s linear; }

/* Masthead */
.masthead { border-bottom: 1px solid var(--hairline); padding: var(--sp-4) 0; background: rgba(250,248,243,0.92); backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 50; }
.masthead-in { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.pub { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: -0.5px; color: var(--ink); line-height: 1; text-decoration: none; }
.pub .am { font-style: italic; font-weight: 500; color: var(--accent); }
.masthead-nav { display: flex; gap: var(--sp-5); align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin-left: auto; }
.masthead-nav a { color: var(--ink-3); text-decoration: none; padding: 4px 8px; border-radius: var(--r-sm); transition: color 0.15s, background 0.15s; }
.masthead-nav a:hover { color: var(--accent); }
.masthead-nav a.active { color: var(--accent); background: var(--accent-soft); }

/* Article container */
article { max-width: 740px; margin: 0 auto; padding: 0 var(--sp-5); }
article.wide { max-width: 1080px; }

.a-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; margin: var(--sp-8) 0 var(--sp-4); font-weight: 500; }
.a-eyebrow .dot { color: var(--ink-4); margin: 0 var(--sp-2); }

h1.head { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 var(--sp-4); color: var(--ink); }
h1.head .em { font-style: italic; font-weight: 500; color: var(--accent); }
.deck { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.45; color: var(--ink-2); margin: 0 0 var(--sp-7); max-width: 640px; }

.byline { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-7); font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.byline .b-item .k { color: var(--ink-4); display: block; margin-bottom: 2px; }
.byline .b-item .v { color: var(--ink); font-weight: 500; }

/* TL;DR */
.tldr { background: var(--bg-tint); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); margin: 0 0 var(--sp-7); }
.tldr .label { font-family: var(--mono); font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--sp-2); font-weight: 600; }
.tldr p { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.tldr p strong { color: var(--accent); font-weight: 600; }

/* Beginner notice */
.beginner { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5); margin: 0 0 var(--sp-7); display: flex; gap: var(--sp-4); align-items: flex-start; }
.beginner .ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 14px; font-style: italic; }
.beginner .text { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.beginner .text strong { color: var(--ink); }
.beginner .text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.beginner .text .sample { border-bottom: 1px dashed var(--accent); color: var(--accent); cursor: help; }

/* TOC */
.toc { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--sp-5) 0; margin: var(--sp-7) 0; }
.toc h3 { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 var(--sp-4); font-weight: 500; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; columns: 2; column-gap: var(--sp-6); }
.toc li { counter-increment: toc; padding: 6px 0; font-family: var(--serif); font-size: 15px; break-inside: avoid; display: flex; align-items: baseline; gap: var(--sp-3); }
.toc li::before { content: counter(toc, upper-roman) "."; color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 13px; flex-shrink: 0; min-width: 28px; }
.toc a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border 0.15s; }
.toc a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Body */
.body { padding-bottom: var(--sp-9); }
.body section { padding: var(--sp-8) 0 var(--sp-5); border-top: 1px solid var(--hairline); }
.body section:first-of-type { border-top: none; padding-top: var(--sp-5); }
.s-num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14px; color: var(--accent); letter-spacing: 0.04em; margin-bottom: var(--sp-2); display: block; }
h2.sec { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--sp-6); color: var(--ink); }
h3.sub { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; margin: var(--sp-7) 0 var(--sp-3); color: var(--ink); }
h4.minor { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin: var(--sp-6) 0 var(--sp-3); font-weight: 600; }
.body p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); margin: 0 0 var(--sp-4); }
.body p.mute { color: var(--ink-3); font-size: 1rem; }

/* Drop cap */
.body section.drop > p:first-of-type::first-letter { font-family: var(--serif); font-weight: 600; font-style: italic; float: left; font-size: 4.4rem; line-height: 0.95; margin: 0.2rem 0.5rem -0.2rem 0; color: var(--accent); }

/* Pull quote */
.pq { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink); margin: var(--sp-6) 0; padding-left: var(--sp-5); border-left: 2px solid var(--accent); }
.pq cite { display: block; margin-top: var(--sp-3); font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pq cite::before { content: "— "; }

/* Tooltip / term */
.term { border-bottom: 1px dashed var(--accent); cursor: help; position: relative; color: inherit; -webkit-tap-highlight-color: transparent; }
.term:hover, .term.active { color: var(--accent); }
.term::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--sans); font-size: 13px; font-weight: 400; font-style: normal; line-height: 1.5; width: max(280px, min(360px, 80vw)); z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,0.18); white-space: normal; text-align: left; letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; pointer-events: none; }
.term::before { content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; }
@media (hover: hover) and (pointer: fine) { .term:hover::after, .term:hover::before { opacity: 1; visibility: visible; } }
.term.active::after, .term.active::before { opacity: 1; visibility: visible; }
.term.tip-l::after { left: 0; transform: translateX(0); }
.term.tip-l::before { left: 20px; transform: translateX(0); }
.term.tip-r::after { left: auto; right: 0; transform: translateX(0); }
.term.tip-r::before { left: auto; right: 20px; transform: translateX(0); }

/* Lists */
ul.bullets { list-style: none; padding: 0; margin: var(--sp-4) 0; }
ul.bullets li { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); padding: 6px 0 6px 22px; position: relative; }
ul.bullets li::before { content: "·"; color: var(--accent); font-weight: 700; font-size: 1.4rem; position: absolute; left: 4px; top: -4px; }
ul.bullets li strong { color: var(--ink); font-weight: 600; }
ul.bullets li .lbl { font-family: var(--mono); color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-right: var(--sp-3); display: inline-block; min-width: 60px; }

/* Cards & grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-5) 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-5) 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
.card { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5); }
.card .c-eyebrow { font-family: var(--mono); font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--sp-3); font-weight: 600; }
.card h5 { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; margin: 0 0 var(--sp-2); line-height: 1.3; color: var(--ink); }
.card p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55; font-family: var(--sans); }
.card.link { text-decoration: none; color: inherit; display: block; transition: transform 0.15s, border-color 0.15s; }
.card.link:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.card.link .arrow { font-family: var(--serif); color: var(--accent); margin-left: 4px; font-style: italic; }

/* KPI */
.kpi { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-4); text-align: left; }
.kpi .k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.kpi .v { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum"; line-height: 1; }
.kpi .v.acc { color: var(--accent); }
.kpi .sub { font-family: var(--mono); font-size: 10px; color: var(--ink-4); margin-top: var(--sp-1); letter-spacing: 0.04em; }

/* Table */
.tbl-wrap { overflow-x: auto; margin: var(--sp-5) 0; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; font-feature-settings: "tnum"; }
.tbl th { text-align: left; font-family: var(--mono); font-weight: 600; color: var(--ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; padding: var(--sp-3); border-bottom: 2px solid var(--ink); background: transparent; }
.tbl td { padding: var(--sp-3); border-bottom: 1px solid var(--hairline); color: var(--ink); vertical-align: top; font-family: var(--sans); line-height: 1.5; }
.tbl td.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.tbl td.acc { color: var(--accent); font-family: var(--serif); font-weight: 600; font-size: 15px; }
.tbl tr:hover td { background: rgba(184,69,30,0.03); }

/* Code excerpt */
pre.excerpt { background: var(--ink); color: #d8d8d8; border-radius: var(--r-md); padding: var(--sp-5); font-family: var(--mono); font-size: 12.5px; overflow-x: auto; margin: var(--sp-5) 0; line-height: 1.7; -webkit-overflow-scrolling: touch; }

/* Scenario */
.scenario { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5); margin: var(--sp-4) 0; }
.scenario .s-tag { font-family: var(--mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: var(--r-xs); text-transform: uppercase; letter-spacing: 0.1em; margin-right: var(--sp-3); font-weight: 600; }
.scenario h5 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: 0; display: inline; color: var(--ink); line-height: 1.4; }
.scenario .s-body { margin-top: var(--sp-3); font-size: 14px; color: var(--ink-2); line-height: 1.6; font-family: var(--sans); }
.scenario .s-body strong { color: var(--ink); }

/* Do/Don't */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-5) 0; }
.dodont .dd { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5); }
.dodont .dd.do { border-top: 3px solid var(--green); }
.dodont .dd.dont { border-top: 3px solid var(--red); }
.dodont h5 { font-family: var(--mono); font-size: 11px; margin: 0 0 var(--sp-3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.dodont .do h5 { color: var(--green); }
.dodont .dont h5 { color: var(--red); }
.dodont .dd ul.bullets li { font-size: 0.95rem; padding: 4px 0 4px 22px; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0; }
.pill { font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--hairline-strong); padding: 4px 10px; border-radius: 999px; font-weight: 500; }
.pill.acc { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pill.btn { cursor: pointer; transition: background 0.15s, color 0.15s; }
.pill.btn:hover { background: var(--accent-soft); color: var(--accent); }
.pill.btn.active { background: var(--accent); color: white; border-color: var(--accent); }

/* Conclusion */
.conclusion { background: var(--ink); color: var(--bg); border-radius: var(--r-md); padding: var(--sp-6); margin: var(--sp-5) 0; }
.conclusion .label { font-family: var(--mono); font-size: 10px; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--sp-3); font-weight: 600; }
.conclusion p { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; color: var(--bg); }
.conclusion p strong { color: var(--accent); font-weight: 600; }

/* Glossary */
.glossary { margin-top: var(--sp-5); }
.gl-grp { margin-bottom: var(--sp-7); border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.gl-grp .grp-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin-bottom: var(--sp-4); letter-spacing: -0.01em; }
.gl-grp .grp-title .num { font-family: var(--mono); font-style: italic; color: var(--accent); font-size: 0.85em; margin-right: var(--sp-2); }
.gl-grp dl { margin: 0; }
.gl-grp .row { display: grid; grid-template-columns: 160px 1fr; gap: var(--sp-5); padding: var(--sp-3) 0; border-bottom: 1px solid var(--hairline); }
.gl-grp .row:last-child { border-bottom: none; }
.gl-grp dt { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); padding-top: 2px; }
.gl-grp dd { margin: 0; font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.55; }
.gl-grp dd .eg { display: block; margin-top: var(--sp-2); color: var(--ink-3); font-size: 13px; font-style: italic; font-family: var(--serif); }

/* Search input */
.search-box { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); align-items: center; flex-wrap: wrap; }
.search-input { flex: 1; min-width: 240px; font-family: var(--sans); font-size: 15px; padding: 12px 16px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--bg-elev); color: var(--ink); transition: border-color 0.15s; }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* Posts list */
.posts-list { margin: var(--sp-5) 0; }
.post-row { display: grid; grid-template-columns: 90px 90px 1fr 80px 60px; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; transition: background 0.1s; }
.post-row:hover { background: rgba(184,69,30,0.025); }
.post-row .p-cat { font-family: var(--mono); font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.post-row .p-cat.kr { color: var(--navy); }
.post-row .p-cat.us { color: var(--accent); }
.post-row .p-cat.tk { color: var(--gold); }
.post-row .p-cat.info { color: var(--green); }
.post-row .p-date { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-feature-settings: "tnum"; }
.post-row .p-title { font-family: var(--serif); font-size: 1rem; color: var(--ink); font-weight: 500; line-height: 1.4; text-decoration: none; }
.post-row .p-title:hover { color: var(--accent); }
.post-row .p-title.deep-read::after { content: " ●"; color: var(--accent); font-size: 10px; vertical-align: middle; }
.post-row .p-views { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; font-feature-settings: "tnum"; }
.post-row .p-recs { font-family: var(--mono); font-size: 12px; color: var(--ink-2); text-align: right; font-weight: 600; font-feature-settings: "tnum"; }
.post-row .p-recs.hot { color: var(--accent); }

/* Footer */
footer { margin-top: var(--sp-9); border-top: 2px solid var(--ink); padding: var(--sp-6) var(--sp-5) var(--sp-7); background: var(--bg-soft); }
footer .f-in { max-width: 740px; margin: 0 auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
footer .f-row { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
footer .f-pub { font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: -0.01em; }
footer .f-pub .am { font-style: italic; color: var(--accent); font-weight: 500; }
footer .f-note { margin-top: var(--sp-3); line-height: 1.6; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink-4); }
footer .f-nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4); }
footer .f-nav a { color: var(--ink-3); text-decoration: none; }
footer .f-nav a:hover { color: var(--accent); }

/* Index page specific */
.hero-index { padding: var(--sp-9) 0 var(--sp-7); }
.hero-index .hero-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.03em; margin: var(--sp-5) 0 var(--sp-5); color: var(--ink); }
.hero-index .hero-title .em { font-style: italic; font-weight: 500; color: var(--accent); }
.hero-index .hero-deck { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.5vw, 1.55rem); line-height: 1.45; color: var(--ink-2); max-width: 660px; margin: 0 0 var(--sp-6); }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-7) 0 var(--sp-5); padding: var(--sp-5) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.hero-stats .hs-item { }
.hero-stats .hs-item .k { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.hero-stats .hs-item .v { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: var(--ink); line-height: 1; letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.hero-stats .hs-item .v .em { color: var(--accent); font-style: italic; font-weight: 500; }

.nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: var(--sp-7) 0; }
.nav-card { display: block; background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-6); text-decoration: none; color: var(--ink); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; }
.nav-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 12px 30px rgba(184,69,30,0.08); }
.nav-card .nc-num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--accent); letter-spacing: 0.04em; margin-bottom: var(--sp-3); display: block; }
.nav-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 var(--sp-3); color: var(--ink); }
.nav-card p { font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 var(--sp-4); }
.nav-card .nc-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; justify-content: space-between; align-items: center; }
.nav-card .nc-meta .arrow { color: var(--accent); font-family: var(--serif); font-size: 18px; font-style: italic; transition: transform 0.15s; }
.nav-card:hover .nc-meta .arrow { transform: translateX(4px); }

/* Concept map / clusters */
.concept-cluster { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-5); margin: var(--sp-3) 0; }
.concept-cluster h4 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0 0 var(--sp-3); color: var(--ink); }
.concept-cluster h4 .num { font-family: var(--mono); color: var(--accent); font-size: 0.8em; margin-right: var(--sp-2); font-weight: 500; font-style: italic; }
.concept-cluster .c-pills { display: flex; flex-wrap: wrap; gap: 5px; }

/* Responsive */
@media (max-width: 800px) {
  .masthead-in { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .pub { font-size: 18px; }
  .masthead-nav { font-size: 10px; gap: var(--sp-2); }
  .masthead-nav .hide-sm { display: none; }
  article { padding: 0 var(--sp-4); }
  h1.head { font-size: 2rem; }
  .deck { font-size: 1.05rem; }
  .body p { font-size: 1rem; }
  .toc ol { columns: 1; }
  .grid-2, .grid-3, .grid-4, .dodont, .nav-grid, .hero-stats { grid-template-columns: 1fr; }
  .grid-4, .hero-stats { grid-template-columns: 1fr 1fr; }
  .gl-grp .row { grid-template-columns: 1fr; gap: var(--sp-1); padding: var(--sp-3) 0; }
  .gl-grp dt { padding-top: 0; font-size: 12px; }
  .gl-grp dd { font-size: 14px; }
  .byline { gap: var(--sp-3) var(--sp-4); font-size: 10px; }
  .pq { font-size: 1.15rem; padding-left: var(--sp-4); }
  .body section.drop > p:first-of-type::first-letter { font-size: 3.4rem; }
  .conclusion { padding: var(--sp-5); }
  .conclusion p { font-size: 1.02rem; }
  .term::after { width: calc(100vw - 32px); max-width: 320px; font-size: 13px; }
  .post-row { grid-template-columns: 70px 70px 1fr; gap: var(--sp-2); padding: var(--sp-3) 0; }
  .post-row .p-views, .post-row .p-recs { display: none; }
  .post-row .p-title { font-size: 0.95rem; grid-column: 1 / -1; }
  .nav-card { padding: var(--sp-5); }
  .nav-card h3 { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .grid-4, .hero-stats { grid-template-columns: 1fr; }
  .kpi .v, .hero-stats .hs-item .v { font-size: 1.4rem; }
}

@media print {
  .progress, .masthead, .toc, .beginner, .search-box, footer .f-nav { display: none; }
  body { background: white; color: black; font-size: 11pt; }
  article { max-width: none; padding: 0; }
  .body p { font-size: 11pt; line-height: 1.5; }
  .term { border-bottom: none; color: black; }
  .term::after, .term::before { display: none; }
  .conclusion { background: white; color: black; border: 2px solid black; }
  .conclusion p, .conclusion .label { color: black; }
  .pq { color: black; border-left-color: black; }
  .card, .scenario, .tldr { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .progress, .term::after, .term::before, .nav-card { transition: none; }
}