/* =============================================================================
   DIMITRI DAMANAKIS — PHOTOGRAPHER
   base.css — tokens, reset, typography, base elements
   Art direction: cold cinematic editorial / brutalist / atmospheric
   ============================================================================= */

:root {
  /* ---- cold palette: near-black → graphite → off-white ---- */
  --c-void:    #06070a;   /* deepest black, hero */
  --c-bg:      #08090d;   /* page ground */
  --c-panel:   #0c0e13;   /* raised surface */
  --c-ink:     #111319;   /* cards / wells */
  --c-stone:   #1a1e26;   /* hairline fills */
  --c-line:    rgba(232,230,224,0.11);
  --c-line-2:  rgba(232,230,224,0.20);

  --c-text:    #d8d6d0;   /* primary type, cold bone */
  --c-light:   #ecebe5;   /* headings / highest contrast */
  --c-muted:   #8b929b;   /* secondary, cold gray */
  --c-faint:   rgba(216,214,208,0.45);
  --c-ghost:   rgba(216,214,208,0.16);

  /* the only non-neutral "accent": cold steel, used sparingly */
  --c-steel:   #b9c0c8;

  /* ---- type families ----
     - display : the big name/headlines (brutalist grotesk, kept)
     - sans    : body + small/medium text — Apple-like humanist sans (Inter / SF)
     - mono    : metadata labels / nav / buttons — now an ELEGANT high-contrast serif (Cormorant)
     - serif   : repurposed to the Apple-like sans for paragraphs/lede (no more Fraunces) */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Spectral", "Spectral SC", Georgia, "Times New Roman", serif;  /* elegant but sturdy at small sizes */
  --f-serif:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Apple-like for body copy */

  /* ---- fluid scale (desktop-anchored, clamps down) ---- */
  --step--2: clamp(0.66rem, 0.62rem + 0.2vw, 0.74rem);
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.1rem, 1.0rem + 0.5vw, 1.3rem);
  --step-2:  clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.6vw, 5rem);
  --step-5:  clamp(3.4rem, 2.2rem + 6vw, 8rem);
  --step-6:  clamp(4.5rem, 2.6rem + 10vw, 13rem);   /* the name */
  --step-7:  clamp(6rem, 3rem + 16vw, 22rem);       /* oversized numerals */

  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  4rem;
  --space-xl: 8vw;
  --space-2xl: 14vw;

  --maxw: 1680px;
  --gutter: clamp(1.1rem, 4vw, 4.5rem);

  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out, cinematic */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.7s;

  --z-bg: 0; --z-content: 10; --z-nav: 60; --z-cursor: 90; --z-lightbox: 100;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-void);
  overflow-x: clip;
}
body {
  font-family: var(--f-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
  font: inherit; color: inherit; background: none;
  border: none; outline: none;
}
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1; }

/* ---- shared editorial type primitives ---- */
.serif   { font-family: var(--f-sans); }
.display { font-family: var(--f-display); }
.mono    { font-family: var(--f-mono); font-weight: 500; }

/* small brutalist metadata label */
.label {
  font-family: var(--f-mono); font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.label--light { color: var(--c-faint); }

/* oversized silent numeral */
.bignum {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--step-7);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--c-ghost);
  font-variant-numeric: tabular-nums;
}

/* section eyebrow: number + title + rule */
.eyebrow {
  display: flex; align-items: baseline; gap: 1.2rem;
  font-family: var(--f-mono); font-weight: 600;
  font-size: var(--step--2);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.eyebrow .idx { color: var(--c-faint); }
.eyebrow .rule {
  flex: 1; height: 1px; background: var(--c-line);
  transform-origin: left; transform: scaleX(0.0);
  transition: transform 1.1s var(--ease-cine);
}
.is-inview .eyebrow .rule { transform: scaleX(1); }

/* display heading */
.h-display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--step-4);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-light);
}
.h-serif {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--c-text);
  font-optical-sizing: auto;
}
.lede {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--c-text);
  max-width: 46ch;
}

/* ---- focus / a11y ---- */
:focus-visible {
  outline: 1px solid var(--c-steel);
  outline-offset: 3px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: var(--gutter); z-index: 200;
  padding: 0.7rem 1.1rem; background: var(--c-light); color: var(--c-void);
  font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.2em;
}
.skip-link:focus { top: 1rem; }

/* ---- reduced motion: kill the cinematic motion, keep the composition ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-up, .mask-line > span, .par, .drift { opacity: 1 !important; transform: none !important; }
}

/* ---- touch / coarse pointer: native cursor, no custom dot ---- */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none !important; }
  * { cursor: auto !important; }
}

/* ---- no-JS safety: reveal everything if JS never runs ---- */
.no-js .reveal, .no-js .reveal-up, .no-js .mask-line > span { opacity: 1 !important; transform: none !important; }
.no-js .plate__frame img { opacity: 1; filter: none; }