/*
 * Design tokens.
 * --u is one design pixel: it scales with the viewport and is capped at the
 * 1728px artboard (1px at a 16px root), so every design value N becomes
 * calc(N * var(--u)). Breakpoints override the tokens instead of shrinking
 * the desktop layout.
 *
 * Breakpoints: desktop (> 991), tablet portrait (≤ 991),
 * mobile landscape (≤ 767), mobile portrait (≤ 479).
 */
:root {
  /* colour: the paintings carry the colour, the page stays quiet */
  --c-canvas: #f4f1e9; /* warm ivory */
  --c-ink: #20201d; /* deep charcoal */
  --c-accent: #b54a33; /* burnt terracotta, used sparingly (4.66:1 on the canvas, AA for small text) */
  --c-stone: #dcd7cc; /* soft neutral */
  --c-muted: #6e6a63; /* muted text (darkened from #77736C for AA contrast) */
  --c-wall: #e7e2d7; /* the "gallery wall" behind a painting in the detail view */
  --c-line: rgba(32, 32, 29, 0.16);
  --c-preloader: #dcd7cc;
  --c-placeholder: #e4dfd3;

  /* scale */
  --u: min(calc(100vw / 1728), 0.0625rem);
  --page-max: 108rem; /* 1728px */
  --page-w: min(100vw, var(--page-max));

  /* grid */
  --cols: 12;
  --margin: max(1.25rem, calc(64 * var(--u)));
  --gutter: max(0.75rem, calc(24 * var(--u)));
  --col: calc((var(--page-w) - 2 * var(--margin) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  --header-h: max(3.75rem, calc(84 * var(--u)));

  /* type: Geist (variable, 100–900) */
  --font: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --tracking-tight: -0.065em; /* wordmark and display */
  --tracking-display: -0.05em;
  --tracking-text: -0.015em;

  /* the wordmark spans the content width: "KJ" + "ARTS" are ≈ 3.6em wide in
     Geist Bold, the rest is the gap between the two words */
  --fs-wordmark: calc((var(--page-w) - 2 * var(--margin)) / 3.92);
  --lh-wordmark: 0.8;
  --fs-display-xl: max(3.5rem, calc(176 * var(--u)));
  --lh-display-xl: 0.88;
  --fs-display-l: max(3rem, calc(128 * var(--u)));
  --lh-display-l: 0.9;
  --fs-display-m: max(2.5rem, calc(84 * var(--u)));
  --lh-display-m: 0.95;
  --fs-copy-l: max(1.625rem, calc(44 * var(--u)));
  --lh-copy-l: 1.06;
  --fs-copy-m: max(1.1875rem, calc(26 * var(--u)));
  --lh-copy-m: 1.4;
  --fs-body: max(1rem, calc(19 * var(--u)));
  --lh-body: 1.5;
  --fs-small: max(0.8125rem, calc(15 * var(--u)));
  --lh-small: 1.35;

  /* spacing */
  --sp-12: max(0.5rem, calc(12 * var(--u)));
  --sp-24: max(1rem, calc(24 * var(--u)));
  --sp-48: max(1.5rem, calc(48 * var(--u)));
  --sp-80: max(2.5rem, calc(80 * var(--u)));
  --sp-120: max(3.5rem, calc(120 * var(--u)));
  --sp-160: max(4.5rem, calc(160 * var(--u)));
  --sp-240: max(6rem, calc(240 * var(--u)));
  --section-gap: max(7rem, calc(260 * var(--u)));

  /* motion (CSS-driven transitions; GSAP timings live in config.js) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: ease;
  --dur-dim: 250ms;
  --dur-btn: 600ms;
  --dur-hover: 1200ms;

  /* layers */
  --z-header: 100;
  --z-menu: 90; /* under the header, so the Menu / Close button stays on top */
  --z-overlay: 900;
  --z-flip: 950;
  --z-preloader: 1000;
  --z-logo: 1001;
}

@media (max-width: 991px) {
  :root {
    --margin: 2rem;
    --gutter: 1rem;
    --fs-display-xl: clamp(3.5rem, 12vw, 7rem);
    --fs-display-l: clamp(3rem, 10vw, 5.5rem);
    --fs-display-m: clamp(2.5rem, 7.5vw, 4rem);
    --fs-copy-l: clamp(1.625rem, 4vw, 2.25rem);
    --fs-copy-m: 1.25rem;
    --fs-body: 1.0625rem;
    --fs-small: 0.875rem;
    --sp-80: 3rem;
    --sp-120: 4rem;
    --sp-160: 5rem;
    --sp-240: 6.5rem;
    --section-gap: 8rem;
  }
}

@media (max-width: 767px) {
  :root {
    --margin: 1.25rem;
    --gutter: 0.75rem;
    --fs-display-xl: clamp(3rem, 15vw, 5.5rem);
    --fs-display-l: clamp(2.75rem, 13vw, 4.5rem);
    --fs-display-m: clamp(2.25rem, 10vw, 3.25rem);
    --fs-copy-l: 1.625rem;
    --fs-copy-m: 1.1875rem;
    --fs-body: 1rem;
    --fs-small: 0.8125rem;
    --section-gap: 6.5rem;
  }
}

@media (max-width: 479px) {
  :root {
    --margin: 1rem;
    --fs-copy-l: 1.5rem;
  }
}