/* =====================================================================
   Base — fonts, tokens, reset, prose, motion
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Tarnac';
  src: url('../fonts/Tarnac-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tarnac';
  src: url('../fonts/Tarnac-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tarnac Sans';
  src: url('../fonts/TarnacSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tarnac Sans';
  src: url('../fonts/TarnacSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tarnac Sans';
  src: url('../fonts/TarnacSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg:          #F4F1EA;      /* off-white linen background */
  --bg-deep:     #ECE6DA;
  --ink:         #0F0F0E;
  --ink-soft:    #1A1A19;
  --ink-mute:    #6F6E6A;
  --rule:        rgba(15, 15, 14, .15);
  --link:        currentColor;

  --font-sans:   'Tarnac Sans', system-ui, sans-serif;
  --font-serif:  'Tarnac', Georgia, serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Modular type sizes (desktop). Mobile adjusts these. */
  --fs-xs:       11px;
  --fs-sm:       12px;
  --fs-md:       13px;
  --fs-lg:       15px;
  --fs-xl:       22px;

  --tracking:    .12em;
  --tracking-w:  .18em;

  --frame:       40px;         /* page padding (desktop) */
  --frame-sm:    20px;         /* page padding (mobile) */
  --header-pad:  160px;        /* clearance below fixed header */

  --t-fast:      120ms;
  --t-med:       320ms;
  --t-slow:      720ms;
  --ease:        cubic-bezier(.2, .7, .2, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Stop full-bleed (100vw) elements from creating a horizontal
     scrollbar when the page already has a vertical one. */
  overflow-x: clip;
}

html { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { opacity: .65; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul, ol { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Prose / error fallback ---------- */
.prose {
  padding: 100px var(--frame);
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-mono);
}
.prose h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  margin-bottom: 32px;
}

@media (max-width: 720px) {
  :root {
    --frame: var(--frame-sm);
    --header-pad: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}