/* ============================================================================
   STEF VAN DEN OEVER - DESIGN TOKENS
   Editorial Cream - a single, committed direction.
   ============================================================================ */

/* ---------- Fonts (local - variable font files in /fonts) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./fonts/Fraunces-Italic-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-VF.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Italic-VF.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Base palette ─────────────────────────────────────────── */
  --bone:        #F4EFE6;
  --bone-2:      #ECE5D6;
  --paper:       #FBF8F2;
  --linen:       #EFEAE0;

  --ink:         #1F1812;
  --ink-brown:   #1F1812;

  --claret:      #7A1C2F;
  --claret-deep: #5A0E1F;

  /* ── Type scale ───────────────────────────────────────────── */
  --display-1:   clamp(56px, 8vw, 128px);   /* hero name */
  --display-2:   clamp(40px, 5.5vw, 80px);  /* major section */
  --h1:          clamp(28px, 3.6vw, 44px);
  --h2:          clamp(22px, 2.4vw, 30px);
  --h3:          18px;
  --body:        17px;
  --body-sm:     15px;
  --small:       13px;
  --eyebrow:     11px;

  --leading-tight:   0.98;
  --leading-snug:    1.18;
  --leading-normal:  1.55;
  --leading-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: -0.005em;
  --tracking-eyebrow: 0.14em;

  /* ── Spacing (8px base) ───────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-doc: 0;
  --radius-card: 2px;
  --radius-pill: 999px;

  /* ── Rules ────────────────────────────────────────────────── */
  --rule: 1px;
  --rule-bold: 2px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-reveal: 400ms;
  --dur-cross: 600ms;

  /* ── Semantic tokens ──────────────────────────────────────── */
  --surface:        var(--bone);
  --surface-2:      var(--bone-2);
  --surface-raised: var(--paper);
  --fg:             var(--ink-brown);
  --fg-2:           #4A3D33;
  --fg-3:           #7A6B5E;
  --rule-color:     rgba(31, 24, 18, 0.14);
  --rule-strong:    rgba(31, 24, 18, 0.32);
  --accent:         var(--claret);
  --accent-deep:    var(--claret-deep);
  --accent-fg:      var(--paper);
  --selection:      rgba(122, 28, 47, 0.20);

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-feature: "ss01", "ss02";
}

/* ============================================================================
   SEMANTIC BASE STYLES - apply automatically to bare HTML
   ============================================================================ */
html, body {
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  font-feature-settings: var(--display-feature);
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: var(--leading-tight); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }

.display-1 {
  font-family: var(--font-display);
  font-size: var(--display-1);
  font-weight: 320;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--display-feature);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--display-2);
  font-weight: 360;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: var(--display-feature);
  font-variation-settings: "opsz" 96;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lead {
  font-size: 20px;
  line-height: var(--leading-loose);
  color: var(--fg-2);
  max-width: 56ch;
}

.meta {
  font-size: var(--small);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: opacity var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
a:hover { opacity: 0.66; border-bottom-color: var(--accent); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 1px; }

hr {
  border: 0;
  border-top: 1px solid var(--rule-color);
  margin: var(--s-7) 0;
}

/* The signature wordmark detail - used in logos and the hero name.
   "van den" rendered lighter and a touch smaller, sat slightly higher. */
.tussenvoegsel {
  font-weight: 300;
  font-style: italic;
  font-size: 0.56em;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  display: inline;
  vertical-align: baseline;
  margin: 0 0.08em 0 0.18em;
  position: relative;
  top: -0.32em;
}