/* ==========================================================================
   LEUR — base.css
   Design tokens, reset, self-hosted typography.
   Palette is sampled directly from the film: near-black with a slate
   undertone, cool blue-grey mist, warm platinum/champagne metal.
   ========================================================================== */

/* ---------- Fonts (local, no network dependency) ---------- */
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-300-italic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../assets/fonts/jost-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --ink-900: #030405;
  --ink-800: #050607;
  --ink-700: #080A0C;
  --ink-600: #0C0F13;
  --ink-500: #12161B;

  /* Light / metal */
  --platinum:     #DAD4C6;
  --platinum-mid: #A8A296;
  --platinum-dim: #6E6A62;
  --champagne:    #C7B99C;
  --mist:         #7E8894;

  /* Type */
  --font-display: 'Cormorant', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-ui: 'Jost', 'Futura', 'Avenir Next', system-ui, -apple-system, sans-serif;

  /* Rhythm — large cinematic spacing */
  --space-xs: clamp(0.5rem, 0.8vw, 0.75rem);
  --space-sm: clamp(1rem, 1.6vw, 1.5rem);
  --space-md: clamp(2rem, 4vw, 3.5rem);
  --space-lg: clamp(4rem, 9vw, 9rem);
  --space-xl: clamp(7rem, 16vw, 17rem);

  --gutter: clamp(1.5rem, 5vw, 6.5rem);
  --maxw: 1560px;

  /* Motion */
  --ease-out-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-lux: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Chrome */
  --hairline: rgba(218, 212, 198, 0.13);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling */
}

body {
  margin: 0;
  background: var(--ink-800);
  color: var(--platinum);
  font-family: var(--font-ui);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, blockquote, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, canvas, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }

/* Scroll lock while the sequence loads */
body.is-loading { overflow: hidden; height: 100vh; }

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--platinum-dim);
}

/* Line-reveal masking primitive: .ln clips, inner span translates. */
.ln {
  display: block;
  overflow: hidden;
  /* Descenders need breathing room or the mask crops them. */
  padding-block: 0.08em;
  margin-block: -0.08em;
}
.ln > span { display: block; will-change: transform, opacity; }

/* ---------- Accessibility ---------- */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  padding: 0.9rem 1.6rem;
  background: var(--ink-500);
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.skip-link:focus-visible { top: 1rem; }

:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 6px;
}

::selection { background: rgba(199, 185, 156, 0.22); color: #fff; }

/* Native scrollbar stays out of the way of the composition. */
::-webkit-scrollbar { width: 0; height: 0; }
html { scrollbar-width: none; }