/* Selva design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..400,0,0&family=Schibsted+Grotesk:wght@400;500&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #FFFFFF;            /* page: white, most bands */
  --surface: #F2EEE7;       /* stone paper: studio band, footer band, contact band */
  --surface-2: #E7E2D9;     /* stone deeper: gallery grounds on project pages, image placeholders */
  --night: #141412;         /* the one dark ground: inset gallery frames on project pages */
  --white: #FFFFFF;

  /* ── Text ── */
  --text: #1C1B19;          /* ink: every headline and body */
  --text-2: #3A3835;        /* secondary ink (long body on project pages) */
  --muted: #8E8A84;         /* links, inactive nav, list-view header row, captions under illustrations */
  --muted-ink: #6F6B66;     /* grey that must pass 4.5:1 (small 12px grey on white) */
  --on-photo: #FFFFFF;      /* captions on photos */
  --on-photo-soft: rgba(255, 255, 255, .78);

  /* ── Lines ── */
  --line: #C9C5BE;          /* hairline rules that open each block, table rows */
  --line-2: #E2DED7;        /* lighter rows inside tables */
  --line-on-photo: rgba(255, 255, 255, .5);

  /* ── Brand / accent (brand slots — see palette/slots.json). Always small: never a fill, a band or a headline. ── */
  --accent: #4E6A5B;        /* eucalyptus: active nav dot, list hover dot, counter, focus ring */
  --accent-rgb: 78, 106, 91;
  --accent-ink: #44604F;    /* accent as text on white / stone (passes 4.5:1) */
  --accent-soft: #E4EBE6;   /* list-row hover tint */
  --on-accent: #FFFFFF;

  /* ── Data / status (forms only) ── */
  --success: #4E7A55; --warning: #B5852F; --danger: #B3443A; --info: #4A6A8A;

  /* ── Fonts ── */
  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii (square design: only the input focus ring and tiny tags round) ── */
  --r-xs: 2px;
  --r-sm: 0px;      /* photos, plates */
  --r: 0px;         /* inputs, panels */
  --r-lg: 0px;
  --r-pill: 9999px; /* the 6px accent dot only */

  /* ── Spacing / layout ── */
  --container: 1408px;      /* content width at 1440 (16px gutters) */
  --gutter: 16px;           /* page side padding, column gap, photo gap */
  --col: calc((100% - var(--gutter)) / 2);
  --s-xs: 45px;             /* small block padding */
  --s-sm: 65px;
  --s-md: 75px;
  --section: 110px;         /* the big pause after a photo pair */
  --head-h: 52px;           /* header height */
  --rule-gap: 32px;         /* hairline rule → content */

  /* ── Shadows (none: the design is flat) ── */
  --shadow-1: none;
  --shadow-2: 0 18px 40px rgba(20, 20, 18, .10); /* only the open sub-menu on phones */

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .9s;
  --dur-fast: .3s;
  --hero-hold: 4.8s;        /* each hero frame */
  --hero-fade: 1.4s;        /* crossfade between hero frames */
}

/* ── Type scale (desktop, from the source; phone sizes in selva.css) ── */
.t-display { font-family: var(--font-display); font-weight: 300; font-size: 280px; line-height: .8; letter-spacing: -6px; font-variation-settings: "SOFT" 0, "WONK" 0; font-optical-sizing: auto; }
.t-h1 { font-family: var(--font-display); font-weight: 300; font-size: 60px; line-height: 1.05; letter-spacing: -1.8px; font-variation-settings: "SOFT" 0, "WONK" 0; font-optical-sizing: auto; }
.t-h2 { font-family: var(--font-display); font-weight: 300; font-size: 60px; line-height: 1.05; letter-spacing: -1.8px; font-variation-settings: "SOFT" 0, "WONK" 0; font-optical-sizing: auto; }
.t-h3 { font-family: var(--font-display); font-weight: 300; font-size: 38px; line-height: 1.12; letter-spacing: -.9px; font-variation-settings: "SOFT" 0, "WONK" 0; font-optical-sizing: auto; }
.t-lead { font-family: var(--font); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.48px; }
.t-body { font-family: var(--font); font-weight: 400; font-size: 17px; line-height: 1.42; letter-spacing: -.17px; }
.t-small { font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.32; letter-spacing: -.1px; }
.t-label { font-family: var(--font); font-weight: 400; font-size: 12px; line-height: 1.2; letter-spacing: .5px; text-transform: uppercase; }
.t-nav { font-family: var(--font); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.44px; }

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }