/* ============================================================
   sofalost.tech — design tokens + base
   Palette: ink / ember (single accent) / bone
   Type: Clash Display (display) · Satoshi (body) · JetBrains Mono (data)
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* surfaces: one dark theme, locked */
  --ink-000: #0b0a09;
  --ink-050: #121110;
  --ink-100: #1a1817;
  --ink-200: #232120;
  --ink-300: #34302e;

  /* single accent: ember */
  --ember:      #ff6a1f;
  --ember-soft: #ff8f4d;
  --ember-deep: #c2410c;

  /* text on ink */
  --bone:      #f2ece4;
  --bone-mid:  #b3aaa1;
  --bone-dim:  #7d746c;

  /* radii: one system — soft 14px surfaces, pill interactive */
  --r-surface: 14px;
  --r-inset:   10px;
  --r-pill:    999px;

  /* type scale */
  --fs-display: clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 3.1rem);
  --fs-h3:      clamp(1.15rem, 1.6vw, 1.45rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.09rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* rhythm */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --maxw: 1280px;

  /* motion: Apple-style springs, critically damped by default */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-both: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  380ms;
  --dur-slow:  620ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-000);
  color: var(--bone);
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Sticky footer, site-wide. Short pages (/reseaux, /clips) used to leave the
     footer floating mid-screen with bare background under it. The column plus
     `flex: 1` on <main> pushes it to the bottom of the viewport without
     pinning it there: on a long page it still scrolls away normally. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Grain and skip-link are absolute/visually-hidden, but as flex children they
   would still claim a row. Neither should take part in the column. */
body > main { flex: 1 0 auto; }
body > .footer { flex: 0 0 auto; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* focus: always visible, never removed */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ember); color: var(--ink-000); }

/* ---------- typography primitives ---------- */
.display {
  font-family: 'Clash Display', 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.035em;   /* negative tracking as size grows */
  margin: 0;
}

h2 {
  font-family: 'Clash Display', 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.6em;
}

h3 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
}

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.lede { color: var(--bone-mid); font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.6; }
.muted { color: var(--bone-mid); }
.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;      /* positive tracking at small sizes */
  font-variant-numeric: tabular-nums;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }

/* ---------- grain: fixed overlay, never on a scrolling container ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { .grain { display: none; } }

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ember);
  color: var(--ink-000);
  font-weight: 700;
  border-radius: 0 0 var(--r-inset) 0;
}
.skip:focus { left: 0; }