/* speciai design tokens and shared atoms. Paper, plaster, terracotta and navy come from the prototype. */
:root {
  --paper: #f4efe6;
  --paper-2: #ebe3d5;
  --paper-3: #e2d8c6;
  --plaster: #fdfcf9;
  --ink: #1b2730;
  --ink-2: #33434e;
  --muted: #66727a;
  --navy: #1f3a4a;
  --terracotta: #d9693e;
  --terracotta-deep: #b4512b;
  --ochre: #e9b86c;
  --sage: #a9c48a;
  --cypress: #3e6a4c;
  --line: rgba(27, 39, 48, 0.12);
  --line-strong: rgba(27, 39, 48, 0.22);
  --shadow-soft: 0 1px 2px rgba(27, 39, 48, 0.06), 0 8px 24px rgba(27, 39, 48, 0.08);
  --shadow-lift: 0 2px 4px rgba(27, 39, 48, 0.06), 0 24px 60px rgba(27, 39, 48, 0.16);
  --font-display: "Fraunces", "Hahmlet", "Noto Serif KR", Georgia, serif;
  --font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans KR", ui-monospace, Menlo, monospace;
  --radius: 14px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* Brand mark: a cube whose right face has been painted. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { width: 28px; height: 28px; }
.brand b {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--ink-2); background: rgba(253, 252, 249, 0.7);
}
/* Monospace spaces are wide next to Hangul; tighten them for Korean pages. */
:lang(ko) .pill, :lang(ko) .eyebrow, :lang(ko) .mono { letter-spacing: 0.02em; word-spacing: -0.3em; }
.pill.concept::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--terracotta); transform: rotate(45deg); }