/* HAIFOTO — generated from tokens.json (local build copy) */
:root, [data-theme="cinema"] {
  --grey-50: #f6f4f1;
  --grey-100: #ebe9e6;
  --grey-200: #d8d5d2;
  --grey-300: #c0bdba;
  --grey-400: #a5a3a0;
  --grey-500: #83817f;
  --grey-600: #666462;
  --grey-700: #4e4d4b;
  --grey-800: #363533;
  --grey-900: #1f1e1d;
  --grey-950: #0d0c0b;
  --black: #000000;
  --white: #ffffff;
  --surface: var(--grey-950);
  --surface-alt: var(--grey-900);
  --frame: var(--black);
  --ink: var(--grey-50);
  --ink-muted: var(--grey-300);
  --ink-subtle: var(--grey-400);
  --line: var(--grey-800);
  --line-strong: var(--grey-500);
  --focus: var(--grey-50);
  --on-frame: var(--grey-50);
  --on-frame-muted: var(--grey-300);
  --scrim: #0d0c0bb3;
  --record: #f45343;
  --on-record: var(--grey-950);
}
[data-theme="paper"] {
  --surface: var(--grey-50);
  --surface-alt: var(--grey-100);
  --frame: var(--black);
  --ink: var(--grey-950);
  --ink-muted: var(--grey-700);
  --ink-subtle: var(--grey-600);
  --line: var(--grey-200);
  --line-strong: var(--grey-500);
  --focus: var(--grey-950);
  --on-frame: var(--grey-50);
  --on-frame-muted: var(--grey-300);
  --record: #c1291f;
  --on-record: var(--grey-50);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --space-11: 216px;
  --radius-0: 0px;
  --radius-1: 1px;
  --radius-full: 9999px;
  --border-hair: 1px;
  --border-bold: 2px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --grid-columns: 12;
  --grid-columns-m: 4;
  --grid-gutter: 24px;
  --grid-gutter-m: 16px;
  --grid-margin: clamp(20px, 5.6cqi, 96px);
  --grid-max: 1680px;
  --ratio-scope: 2.39 / 1;
  --ratio-wide: 16 / 9;
  --ratio-vertical: 9 / 16;
  --ratio-feed: 4 / 5;
  --ratio-square: 1 / 1;
  --ratio-panel: 16 / 9;
  --fluid-display-xl: clamp(52px, 9.17cqi, 132px);
  --fluid-display-l: clamp(42px, 6.11cqi, 88px);
  --fluid-display-m: clamp(34px, 4.17cqi, 60px);
  --fluid-display-s: clamp(28px, 2.78cqi, 40px);
  --fluid-quote-l: clamp(32px, 3.61cqi, 52px);
  --fluid-lede: clamp(20px, 1.81cqi, 26px);
  --dur-instant: 120ms;
  --dur-quick: 240ms;
  --dur-calm: 480ms;
  --dur-title: 900ms;
  --dur-iris: 1100ms;
  --dur-reduced: 200ms;
  --ease-title: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-iris: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-linear: linear;
  --logo-header: 116px;
  --logo-header-m: 96px;
  --logo-footer: 120px;
  --logo-max: 160px;
  --logo-min: 72px;
  --layer-sticky: 10;
  --layer-header: 50;
  --layer-menu: 80;
  --layer-iris: 100;
  --font-display: "Archivo ExtraCondensed", "Arial Narrow", sans-serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 132px; line-height: 0.88; font-weight: 900; letter-spacing: 0em; }
.display-l { font-family: var(--font-display); font-size: 88px; line-height: 0.9; font-weight: 900; letter-spacing: 0em; }
.display-m { font-family: var(--font-display); font-size: 60px; line-height: 0.94; font-weight: 900; letter-spacing: 0em; }
.display-s { font-family: var(--font-display); font-size: 40px; line-height: 0.98; font-weight: 800; letter-spacing: 0.005em; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 1.0; font-weight: 800; letter-spacing: 0.01em; }
.title-s { font-family: var(--font-display); font-size: 20px; line-height: 1.05; font-weight: 800; letter-spacing: 0.02em; }
.lede { font-family: var(--font-sans); font-size: 26px; line-height: 36px; font-weight: 400; letter-spacing: -0.01em; }
.body-l { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.quote-l { font-family: var(--font-serif); font-size: 52px; line-height: 1.06; font-weight: 400; letter-spacing: -0.01em; font-style: italic; }
.quote { font-family: var(--font-serif); font-size: 34px; line-height: 1.12; font-weight: 400; font-style: italic; }
.serif-body { font-family: var(--font-serif); font-size: 22px; line-height: 30px; font-weight: 400; }
.meta { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0.02em; }
.meta-s { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.06em; }
.slate { font-family: var(--font-mono); font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 0.01em; }
@font-face { font-family: "Archivo ExtraCondensed"; src: url("fonts/ArchivoExtraCondensed-Variable.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }