/* D2Coding (mono) - machine truth: folio numbers, Binding keys/values, versions, and
   the lowercase wordmark. Vendored subsets; provenance in assets/fonts/PROVENANCE.md.
   Wanted Sans (sans) is wired by its own vendored CSS, linked from the page head. */
@font-face {
  font-family: "D2Coding";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/d2coding/d2coding-latin.woff2") format("woff2");
  unicode-range: U+0020-00FF, U+2010-2027, U+2030-203A, U+20A9;
}
@font-face {
  font-family: "D2Coding";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/d2coding/d2coding-hangul.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3;
}
@font-face {
  font-family: "D2Coding";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/d2coding/d2coding-bold-latin.woff2") format("woff2");
  unicode-range: U+0020-00FF, U+2010-2027, U+2030-203A, U+20A9;
}
@font-face {
  font-family: "D2Coding";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/d2coding/d2coding-bold-hangul.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3;
}

/* Tokens are quoted verbatim from DESIGN.md, which owns them and records the WCAG
   ratio behind each one. Never mix a new value by eye: add it there first and
   recompute. The machine-read conformance test enforces this file against DESIGN.md's
   table from both ends - a change here or there that the other does not match goes red. */
:root {
  /* The committed type stack (DESIGN.md, "Type"): Wanted Sans for display and reading,
     D2Coding for machine truth. Both cover Latin and Hangul; no network fallback. */
  --font-sans:
    "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono: "D2Coding", ui-monospace, "SF Mono", Menlo, monospace;

  /* Grounds and their derived neutrals - warm greyscale, the images carry the color. */
  --bone: #f2f1ee;
  --ink: #16140f;
  --surface-light: #faf9f6;
  --surface-dark: #1a1813;
  --muted-light: #6e6a62;
  --muted-dark: #928c81;
  --hairline-light: #dddad2;
  --hairline-dark: #2c2922;

  /* Signature: oxblood. Identity moments only; text takes the per-ground token. */
  --signature: #c4524a;
  --signature-text-light: #7c2d2d;
  --signature-text-dark: #cb625c;

  /* Thread: waxed walnut. Structure only - not a second accent. */
  --thread-light: #7d6a5a;
  --thread-dark: #bda58f;

  /* The seam: dash 7.5, gap 3. */
  --seam-dasharray: 7.5 3;

  /* Paper is the default ground; the dark block below swaps the same seven roles. */
  --ground: var(--bone);
  --surface: var(--surface-light);
  --text: var(--ink);
  --muted: var(--muted-light);
  --hairline: var(--hairline-light);
  --signature-text: var(--signature-text-light);
  --thread: var(--thread-light);

  color-scheme: light dark;
  color: var(--text);
  background: var(--ground);
  font-family: var(--font-sans);
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: var(--ink);
    --surface: var(--surface-dark);
    --text: var(--bone);
    --muted: var(--muted-dark);
    --hairline: var(--hairline-dark);
    --signature-text: var(--signature-text-dark);
    --thread: var(--thread-dark);
  }
}

/* Korean prose never breaks mid-word; Hangul has no true italic - don't fake one. */
:lang(ko) {
  word-break: keep-all;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.shell {
  min-height: 100vh;
  padding: 48px 24px;
}

.shell__inner {
  width: min(960px, 100%);
  margin: 0 auto;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mark {
  display: block;
  width: 24px;
  height: 24px;
}

/* The wordmark: the studio's hand, and the page's one signature moment. Machine truth,
   so it renders in mono (DESIGN.md, "Type"). */
.wordmark {
  margin: 0;
  color: var(--signature-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.title {
  margin: 12px 0;
  color: var(--text);
  /* Display weight, locked to 600-650 in DESIGN.md; without this the h1 falls to the
     UA default (700), outside the range. */
  font-weight: 650;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

.lead {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.7;
}

.folio-number {
  margin: 48px 0 8px;
  color: var(--signature-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.folio-number + .title {
  margin-top: 0;
}

.binding {
  max-width: 720px;
  margin-top: 48px;
}

.binding__rule {
  display: block;
  width: 100%;
  height: 1px;
  overflow: visible;
}

.binding__rule line {
  stroke: var(--thread);
  stroke-width: 1;
  stroke-dasharray: var(--seam-dasharray);
}

.binding__label {
  margin: 20px 0 16px;
  color: var(--thread);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.binding__entries {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 24px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
}

.binding__entries dt {
  color: var(--muted);
}

.binding__entries dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.binding__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--thread);
}