/* Castar blog — single dark theme, every color painted explicitly.
   Contrast (WCAG) on --bg #050505: ink 18:1, muted 9.7:1, faint 6.2:1. */

:root {
  color-scheme: dark;

  --bg: #050505;
  --surface: #101010;
  --surface-2: #161616;
  --ink: #f2f1ec;
  --ink-muted: #b4b3ac;
  --ink-faint: #8e8e88;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.24);
  --accent: #ffffff;
  --focus: #ffffff;
  --selection: rgba(255, 255, 255, 0.22);

  --font-display: 'Source Serif 4', 'Noto Serif KR', Georgia, serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', monospace;

  --measure: 42rem;      /* ~70 characters of body text */
  --wide: 60rem;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;   /* 17px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

::selection { background: var(--selection); color: var(--ink); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Korean inside an English page (e.g. the language switcher): break at spaces only. */
:lang(ko) { word-break: keep-all; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus-visible { top: 12px; outline-color: var(--accent); }

main { display: block; outline: none; }

.measure {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.wordmark {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center;
}
.wordmark__logo { display: block; width: 81px; height: 30px; }

.site-nav { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.03em; }
.site-nav a {
  color: var(--ink-muted); text-decoration: none;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover { color: var(--ink); border-color: var(--line-strong); }
.site-nav a[aria-current="page"] { color: var(--ink); border-color: var(--line-strong); }
.site-nav .lang-switch { margin-left: 6px; position: relative; }
.site-nav .lang-switch::before {
  content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: var(--line-strong);
}
@media (max-width: 400px) {
  .site-nav { gap: 2px; }
  .site-nav a { padding: 8px 10px; }
}

/* ---------- Index ---------- */

.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 56px;
  text-align: left;
}
/* The one accent: a restrained spotlight falling on the intro. */
.intro::before {
  content: '';
  position: absolute; z-index: -1;
  top: -220px; left: 50%; transform: translateX(-50%);
  width: 980px; max-width: 220vw; height: 560px;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 66%);
  pointer-events: none;
}
.intro__inner { max-width: var(--wide); margin: 0 auto; }
.intro__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.25rem, 6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
.intro__text {
  margin: 18px 0 0; max-width: 38rem;
  font-size: 1.125rem; line-height: 1.6; color: var(--ink-muted);
}

.post-index {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}
.post-index__empty { color: var(--ink-muted); padding: 36px 0; border-top: 1px solid var(--line); margin: 0; }
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-card { border-bottom: 1px solid var(--line); }
.post-card__link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 36px; align-items: center;
  padding: 36px 0;
  color: var(--ink); text-decoration: none;
  border-radius: 6px;
}
.post-card__media {
  display: block; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--line);
  background: #050505;
}
.post-card__media img { width: 100%; height: auto; transition: transform 0.4s ease; }
.post-card__body { display: flex; flex-direction: column; gap: 10px; }
.post-card__date { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ink-faint); }
.post-card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.18; letter-spacing: -0.005em;
  text-wrap: balance;
}
.post-card__summary { color: var(--ink-muted); font-size: 1rem; line-height: 1.6; max-width: 34rem; }
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.post-card__link:hover .post-card__media img { transform: scale(1.015); }
.post-card__link:focus-visible { outline-offset: 6px; }

@media (max-width: 720px) {
  .intro { padding: 48px var(--gutter) 36px; }
  .post-card__link { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
}

/* ---------- Post / page head ---------- */

.post-head, .page-head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 64px 0 36px;
}
.post-head::before {
  content: '';
  position: absolute; z-index: -1;
  top: -260px; left: 50%; transform: translateX(-50%);
  width: 900px; max-width: 220vw; height: 520px;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 66%);
  pointer-events: none;
}
.page-head { padding-inline: var(--gutter); }
.post-meta {
  margin: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.03em; color: var(--ink-faint);
}
.post-title, .page-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5.4vw, 2.875rem); line-height: 1.1; letter-spacing: -0.012em;
  text-wrap: balance; color: var(--ink);
}
.post-lede, .page-lede {
  margin: 20px 0 0;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.5; color: var(--ink-muted);
}

.post-foot { padding-top: 24px; padding-bottom: 96px; }
.back-link { font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-muted); text-decoration: none; }
.back-link:hover { color: var(--ink); }

/* ---------- Prose ---------- */

.prose { padding-bottom: 32px; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.25em; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display); color: var(--ink);
  text-wrap: balance; scroll-margin-top: 24px;
}
.prose h2 { font-size: 1.75rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.006em; }
.prose h3 { font-size: 1.3125rem; line-height: 1.3; font-weight: 600; }
.prose h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; }
.prose > * + h2 { margin-top: 2.6em; }
.prose > * + h3 { margin-top: 2em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }

.prose p, .prose li { color: var(--ink); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--ink-faint); }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.8em 0; }

.prose blockquote {
  margin-left: 0; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--line-strong); color: var(--ink-muted);
}

.prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.08em 0.36em;
}

/* Code blocks (kramdown + rouge) */
.prose div.highlighter-rouge, .prose figure.highlight, .prose pre {
  margin-inline: 0;
}
.prose pre {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 18px 20px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.65;
  tab-size: 2;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose pre:focus-visible { outline-offset: 2px; }

.highlight .c, .highlight .c1, .highlight .cm { color: var(--ink-faint); font-style: italic; }
.highlight .p, .highlight .o { color: var(--ink-faint); }
.highlight .nt, .highlight .na, .highlight .nl { color: var(--ink); }
.highlight .s, .highlight .s1, .highlight .s2 { color: #d9d4c7; }
.highlight .mi, .highlight .mf, .highlight .m { color: #ffffff; font-weight: 600; }
.highlight .kc, .highlight .k { color: #c9c7bf; font-style: italic; }
.highlight .err { color: var(--ink); background: none; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose th {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  background: var(--surface);
}
.prose td code { white-space: nowrap; }
.table-wrap--nums td:last-child, .table-wrap--nums th:last-child { white-space: nowrap; }

/* Figures */
.prose figure { margin-inline: 0; }
.figure { margin-top: 2em !important; margin-bottom: 0.4em; }
.figure__frame {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 18px;
}
.figure__frame svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.figure figcaption, .prose figcaption {
  margin-top: 12px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-faint);
}
.figure figcaption b { color: var(--ink-muted); font-weight: 600; }

.figure__scroll {
  background: #050505; border: 1px solid var(--line); border-radius: 10px;
  overflow-x: auto; overflow-y: hidden;
}
.figure__scroll img { width: 100%; height: auto; }
/* Figures fit the column at every width; "Open full size" covers zooming on phones. */
@media (max-width: 600px) {
  .figure__frame { padding: 16px 10px; }
}
.fig-capped { max-width: 520px; }

/* Call-out note */
.note {
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); padding: 16px 20px;
  font-size: 0.96875rem;
}
.note > * + * { margin-top: 0.7em; }
.note__label {
  display: block; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}

/* A casting call shown as a document */
.casting-call {
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 18px 20px; font-size: 0.96875rem; line-height: 1.75;
}
.casting-call dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; }
.casting-call dt { color: var(--ink-faint); }
.casting-call dd { margin: 0; color: var(--ink); }
@media (max-width: 480px) {
  .casting-call dl { grid-template-columns: 1fr; gap: 0; }
  .casting-call dd + dt { margin-top: 8px; }
}
.gloss { display: block; color: var(--ink-faint); font-size: 0.875rem; }

.footnote-note { font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- Korean pages (html[lang="ko"]) ----------
   Latin and digits keep the English faces; Hangul falls through to
   Noto Serif KR (Source Han Serif, the sibling of Source Serif) in headings and
   IBM Plex Sans KR (the sibling of IBM Plex Sans) in text. Both are loaded
   only on Korean pages (see _includes/head.html). */

html:lang(ko) {
  --font-display: 'Source Serif 4', 'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;
  --font-body: 'IBM Plex Sans', 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}
html:lang(ko) body {
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: -0.003em;
}
html:lang(ko) .intro__title { line-height: 1.2; letter-spacing: -0.02em; }
html:lang(ko) .intro__text { line-height: 1.75; }
html:lang(ko) .post-title,
html:lang(ko) .page-title { line-height: 1.3; letter-spacing: -0.02em; }
html:lang(ko) .post-card__title { line-height: 1.35; letter-spacing: -0.015em; }
html:lang(ko) .post-card__summary { line-height: 1.75; }
html:lang(ko) .post-lede,
html:lang(ko) .page-lede { font-size: 1.1875rem; line-height: 1.7; }
html:lang(ko) .prose h2 { line-height: 1.4; letter-spacing: -0.015em; }
html:lang(ko) .prose h3 { line-height: 1.45; letter-spacing: -0.01em; }
html:lang(ko) .prose li + li { margin-top: 0.55em; }
/* Hangul has no italic and synthesized slants read poorly: Latin keeps its real
   italic, Hangul stays upright. Korean text uses bold for emphasis instead. */
html:lang(ko) .prose em { font-synthesis: none; }
html:lang(ko) .figure figcaption, html:lang(ko) .prose figcaption { line-height: 1.7; }
html:lang(ko) .prose table { line-height: 1.6; }
html:lang(ko) .casting-call { line-height: 1.85; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto; padding: 28px var(--gutter) 40px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-faint);
}
.site-footer__links { display: flex; gap: 18px; }
.site-footer a { color: var(--ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .post-card__link:hover .post-card__media img { transform: none; }
}

/* ---------- Print ---------- */

@media print {
  :root { --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f4; --ink: #111111; --ink-muted: #333333; --ink-faint: #555555; --line: #cccccc; --line-strong: #999999; }
  .site-header, .site-footer, .skip-link, .post-foot { display: none; }
  .intro::before, .post-head::before { display: none; }
}