/* ═══════════════════════════════════════════════
   ANASTASIA BAULA — base.css
   Design tokens · reset · typography
   ═══════════════════════════════════════════════ */

:root {
  /* Palette — teal anchored to the portrait backdrop */
  --ink:         #0B0F10;
  --teal-900:    #082F32;   /* hero bg = photo backdrop */
  --teal-700:    #164243;
  --bone:        #EFE9DF;
  --bone-dim:    rgba(239, 233, 223, .62);
  /* project section colors — muted, harmonious neighbors */
  --cobalt:      #24466E;   /* denim */
  --vermilion:   #B94A2C;   /* terracotta */
  --amber:       #D6A348;   /* ochre */
  --violet:      #4A5178;   /* dusty indigo */
  --periwinkle:  #9FA7D4;   /* dusty periwinkle-violet */
  --graphite:    #23272C;   /* deep charcoal — a breath above black */
  --pine:        #124A38;
  --plum:        #96436B;   /* rosy plum — bright against the dark F8 boards */

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Archivo", Helvetica, sans-serif;
  --font-mono:    "Spline Sans Mono", monospace;

  /* Scale */
  --step--1: clamp(.78rem,  .72rem + .2vw,   .88rem);
  --step-0:  clamp(1rem,    .95rem + .3vw,   1.15rem);
  --step-1:  clamp(1.25rem, 1.1rem + .8vw,   1.7rem);
  --step-2:  clamp(1.8rem,  1.4rem + 2vw,    3rem);
  --step-3:  clamp(2.6rem,  1.8rem + 4.2vw,  5.2rem);
  --step-4:  clamp(3.4rem,  1.6rem + 9vw,    9.5rem);

  /* Rhythm */
  --space-s:  clamp(1rem, 2vw, 1.5rem);
  --space-m:  clamp(1.75rem, 3.5vw, 3rem);
  --space-l:  clamp(3rem, 7vw, 6.5rem);
  --space-xl: clamp(5rem, 11vw, 10rem);
  --gutter:   clamp(1.25rem, 4vw, 4rem);

  /* Motion */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .15, 1);
  --dur: .6s;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--bone);
  background: var(--teal-900); /* JS tweens this between section colors */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

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

/* ── Typography helpers ────────────────────── */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 380;
  line-height: .96;
  letter-spacing: -.015em;
}
h1 em, h2 em {
  font-style: italic;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.eyebrow, .mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Split-text line masking */
.st-line-mask { overflow: hidden; display: block; }

/* ── Grain overlay ─────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .05;
  transform: translateZ(0); /* own GPU layer — never repaints on scroll */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Accessibility ─────────────────────────── */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}