/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* Hallmark · route: custom (bespoke) · structure: one chamber, one aperture, a calendar of light, a typographic index · idea: "every release enters as light through the artist's own square window"
 * paper: oklch(16% 0.014 <release hue>) · accent: oklch(82% 0.13 78) · display: EB Garamond · body: Hanken Grotesk
 * axes: dark / roman-serif / warm (golden-hour gold) · gates: all-pass · studied: no
 */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Romanian letters only (ă ș ț and their cedilla forms), so "Brașov" never pulls a whole extended font. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/hanken-grotesk-normal-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B;
}
/* EB Garamond is only ever set at 400 roman; the italic only carries the logotype's "m" and short emphasis, at 500. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/eb-garamond-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/eb-garamond-400-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/eb-garamond-italic-500-basic.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+2018-201D, U+2026;
}

/* Metric-matched fallbacks so the swap does not shift the layout. */
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99%;
  ascent-override: 100%;
  descent-override: 29%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Garamond Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88%;
  ascent-override: 102%;
  descent-override: 31%;
  line-gap-override: 0%;
}

/* The room's hue is set by the release in the room; lightness never moves, so contrast never moves. */
@property --room-h {
  syntax: "<number>";
  inherits: true;
  initial-value: 62;
}
@property --wash {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(70% 0.06 70);
}
@property --wash-mix {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 14%;
}
@property --room-c {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.014;
}

:root {
  color-scheme: dark;

  /* Colour: the chamber, the ink, the one accent. */
  --room-h: 62;
  --room-c: 0.014;
  --color-chamber:   oklch(16% var(--room-c) var(--room-h));
  --color-chamber-2: oklch(20% calc(var(--room-c) + 0.004) var(--room-h));
  --color-chamber-3: oklch(25% calc(var(--room-c) + 0.006) var(--room-h));
  --color-rule:      oklch(34% calc(var(--room-c) + 0.004) var(--room-h));
  --color-rule-2:    oklch(26% var(--room-c) var(--room-h));
  --color-ink:       oklch(95% 0.012 82);
  --color-ink-2:     oklch(81% 0.016 76);
  --color-ink-3:     oklch(66% 0.016 72);
  --color-accent:    oklch(82% 0.13 78);
  --color-accent-ink: oklch(20% 0.03 70);
  --color-focus:     oklch(86% 0.16 82);
  --color-glass:     oklch(96% 0.02 80 / 0.10);
  --color-glass-hi:  oklch(96% 0.02 80 / 0.18);
  --color-glass-edge: oklch(98% 0.01 80 / 0.28);
  --color-rim:       oklch(98% 0.012 85 / 0.62);
  --color-shade:     oklch(8% 0.01 60 / 0.55);
  --color-selection: oklch(82% 0.13 78 / 0.35);
  --wash: oklch(70% 0.06 70);        /* replaced at runtime by the sky of the release in the room */
  --mask-solid: oklch(16% 0.014 62);  /* mask alpha only, never painted */

  /* Type */
  --font-display: "EB Garamond", "Garamond Fallback", Garamond, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.8125rem;   /* 13px: calendar scale, footnotes */
  --text-sm: 0.9375rem;   /* 15px: meta, links, UI */
  --text-md: 1.25rem;     /* 20px: release titles in lists, the player, the caption */
  --text-lg: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);   /* section titles */
  --text-display: clamp(3rem, 1.6rem + 5.2vw, 5.25rem); /* the release in the room */

  /* Space: 4pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);

  /* Shape: windows are rounded squares whose radius is a share of their side, like the covers' */
  --radius-window: 12%;
  --radius-tile: 18%;
  --radius-thumb: 22%;
  --radius-cell: 24%;
  --radius-round: 50%;
  /* Controls nest: an outer shell, the tile inside it, the player well inside the dock */
  --radius-focus: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-well: 0.625rem;
  --radius-tile-inner: 0.8125rem;
  --radius-control: 0.875rem;
  --radius-pill: 1.0625rem;
  --radius-dock: 1.125rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-light: 2400ms;   /* how long the room takes to change its light */
  --dur-open: 1600ms;    /* the aperture opening, once */

  /* Layers */
  --z-room: -1;
  --z-raised: 10;
  --z-header: 20;
  --z-dock: 30;
  --z-skip: 40;

  --rule-hair: 1px;
}