/* ============================================================
   PROVENANCE — design system v0.1
   "Everything looks sourced." Warm bond paper · ink · pine · citation marks.
   Brand: Seunghyun Ryu — grounded RAG that cites or refuses.
   Reuse: <link rel="stylesheet" href="provenance.css"> + the font <link>s.
   Swap the whole identity from --pine / --paper below.
   ============================================================ */

:root {
  /* — surface: warm bond paper — */
  --paper:        #F3EFE6;
  --paper-raised: #FAF7F0;
  --paper-sunken: #EAE3D4;

  /* — ink — */
  --ink:        #1B1A17;
  --ink-muted:  #585245;
  --ink-faint:  #8C8678;

  /* — structure — */
  --line:        #DDD6C6;
  --line-strong: #C8C0AD;

  /* — signature: deep pine (← change this one line to re-skin) — */
  --pine:        #1F4D3F;
  --pine-bright: #2F6B57;
  --pine-wash:   rgba(31, 77, 63, 0.06);

  /* — rare highlight: burnt ochre (citation marks, live dot) — */
  --ochre:       #B26A1E;
  --ochre-wash:  rgba(178, 106, 30, 0.10);

  /* — inverted "regulated" band — */
  --panel:      #181C19;
  --panel-ink:  #EDE9DE;

  /* — type — */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-kr:      "Pretendard", var(--font-sans);

  /* — scale — */
  --step-0: 1rem;        /* 16 body */
  --step-1: 1.1875rem;   /* 19 lede */
  --step-2: 1.5rem;      /* 24 h3 */
  --step-3: 2rem;        /* 32 h2 */
  --step-4: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem); /* display */

  /* — rhythm — */
  --space-section: clamp(4rem, 8vw, 7rem);
  --measure: 60ch;
  --radius:    10px;
  --radius-sm: 6px;

  --shadow-paper: 0 1px 0 var(--line), 0 14px 34px -22px rgba(40, 30, 10, 0.35);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv05";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--pine); color: var(--paper-raised); }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 3px; }

/* ---------- type primitives ---------- */
.pv-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
.pv-display em { font-style: italic; color: var(--pine); }
.pv-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.pv-lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 0;
}

/* mono label with a leading pine tick — the recurring "section marker" */
.pv-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
}
.pv-label::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--pine);
  border-radius: 50%;
  flex: none;
}

/* ---------- the signature primitive: a citation mark ---------- */
.pv-cite {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8A4F12;
  background: var(--ochre-wash);
  border: 1px solid color-mix(in srgb, var(--ochre) 35%, transparent);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  vertical-align: 0.15em;
  white-space: nowrap;
}

/* ---------- card ---------- */
.pv-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  position: relative;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pv-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pv-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  margin: 0.1rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.pv-card p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.6; }

/* ---------- tag ---------- */
.pv-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.2em 0.7em;
  background: transparent;
  white-space: nowrap;
}

/* ---------- link button ---------- */
.pv-btn {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.55em 0.95em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--paper-raised);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.pv-btn:hover { border-color: var(--pine); color: var(--pine); }
.pv-btn--primary { background: var(--pine); color: var(--paper-raised); border-color: var(--pine); }
.pv-btn--primary:hover { background: var(--pine-bright); color: #fff; border-color: var(--pine-bright); }

/* ---------- blueprint grid background utility ---------- */
.pv-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 55%, transparent 100%);
  opacity: 0.55;
}

/* ---------- divider rule ---------- */
.pv-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- staggered entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pv-rise { opacity: 0; transform: translateY(14px); animation: pv-rise 0.7s var(--ease) forwards; }
  @keyframes pv-rise { to { opacity: 1; transform: none; } }
}

/* ---------- layout shell ---------- */
.pv-shell { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }