/* ============================================================
   Marcelle Lunam — font, tokens, reset, base
   Token values: BUILD-SPEC §3 (measured off the mockups, ±2 px).
   ============================================================ */

/* Inter v4.1 variable (rsms/inter, SIL OFL — see ../fonts/Inter-LICENSE.txt),
   subset to Latin + Latin Extended-A. Weights used: 300, 400, 500, 600. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour — the whole palette. Nothing else. */
  --c-black:  #000000;  /* headings, menu background */
  --c-ink:    #221F20;  /* body copy */
  --c-white:  #FFFFFF;
  --c-grey:   #939598;  /* inactive menu items */

  /* Type */
  --ff: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --track-display: -0.01em;   /* overlay-measured (spec estimated -0.03em) */
  --track-body: 0.015em;       /* Light copy sets slightly open in the mockups */

  /* Fluid sizes: mobile (414px) → desktop (1920px) */
  --fs-title:    clamp(1.9375rem, 1.096rem + 3.254vw, 5rem);
  --fs-logo:     clamp(1.375rem, 0.997rem + 1.461vw, 2.75rem);
  --fs-director: clamp(0.8125rem, 0.5878rem + 0.8685vw, 1.625rem); /* 13 → 26 (spec 12 → 23; overlay-measured) */
  --fs-menu-btn: clamp(0.8125rem, 0.417rem + 1.528vw, 2.25rem);
  --fs-h2:       clamp(1.9375rem, 1.439rem + 1.926vw, 3.75rem);
  --fs-body:     clamp(1rem, 0.8625rem + 0.531vw, 1.5rem);
  --fs-sub:      clamp(0.875rem, 0.7204rem + 0.5976vw, 1.4375rem); /* 14 → 23 (spec 24; overlay-measured) */
  --fs-synopsis: clamp(1.0625rem, 0.78rem + 1.10vw, 1.8125rem);
  --fs-details-h: clamp(1.0625rem, 0.75rem + 1.20vw, 1.875rem);
  --fs-name:     clamp(1.25rem, 0.8601rem + 1.5073vw, 2.375rem); /* 20 → 38, Medium (spec 36; overlay-measured) */
  --fs-value:    clamp(1.0625rem, 0.6831rem + 1.4661vw, 1.9375rem); /* 17 → 31  award/credit values (overlay-measured) */
  --fs-label-award: clamp(0.8125rem, 0.6063rem + 0.7968vw, 1.5625rem); /* 13 → 25 */
  --fs-label:    clamp(0.75rem, 0.5954rem + 0.5976vw, 1.3125rem); /* 12 → 21 */
  --fs-menu-item: 2.9375rem;  /* 47px (spec said 45; overlay-measured) */

  --lh-tight: 1;
  --lh-sub: 1.2;
  --lh-body: 1.42;
  --lh-synopsis: 1.17;

  /* Space */
  --gutter-hero: clamp(1.25rem, 0.5625rem + 2.656vw, 3.75rem); /* 20 → 60 (spec formula reached only 40) */
  --gutter:      clamp(1.25rem, -0.468rem + 6.640vw, 7.5rem); /* 20 → 120 (spec formula gave 30 at 414) */
  --space-xl:    clamp(4rem, 2.6rem + 5.3vw, 7.5rem);
  --space-l:     clamp(2rem, 1.3rem + 2.65vw, 3.75rem);
  --panel-gap:   4px;
  --measure:     44rem;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --fade: 700ms;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  overflow-x: hidden;
}
/* height:auto matters: wp_get_attachment_image() prints width/height attributes,
   and a presentational height would otherwise beat aspect-ratio / object-fit. */
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p { text-wrap: pretty; }

#about, #contact { scroll-margin-top: 2rem; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 200;
  transform: translateY(-300%);
  background: var(--c-white); color: var(--c-black);
  padding: .75em 1.25em; font-size: 1rem; font-weight: var(--fw-medium);
}
.skip-link:focus { transform: none; }

/* ---- Focus ---- (white on images, black on white sections: currentColor) */
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.screen-reader-text, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
[tabindex="-1"]:focus { outline: none; }