/* Skin: splittone
   splittone.photo. Black-and-white photography on commission. Owner direction 2026-11-06: grainy, bold,
   film photography, with swissted.com as the reference for register (Swiss poster type, lowercase, flat shapes).
   Colors are the split tone itself: warm highlight paper, cool shadow ink, one safelight red accent.
   Hanken Grotesk 400 and 800, all lowercase display type, film grain on by default.
   Ship this file plus shared tokens, base and components. Nothing else per site. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk/HankenGrotesk-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

[data-skin="splittone"] {
  color-scheme: light dark;
  --paper: #EEE8DC;
  --ink: #10161D;
  --muted: #5C6168;
  --line: #D6CEC0;
  --accent: #B2301A;
  --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; /* no mono: figures use tabular numbers */
  --text-base: 18px;
  --leading-body: 1.55;
  --heading-weight: 800;
  --hero-size: clamp(3.25rem, 0.9rem + 7.6vw, 8.5rem);
  --hero-weight: 800;
  --hero-leading: 0.9;
  --hero-tracking: -0.055em;
  --hero-measure: 9ch; /* @kind spacing */
  --density: 1; /* @kind other */
  --radius: 0px;
  --link-color: var(--ink);
  --link-decoration-color: var(--accent);
  --link-thickness: 2px;
  --link-offset: 0.2em;
  --nav-font: var(--font-body);
  --nav-size: 17px;
  --nav-weight: 800;
  --nav-case: lowercase; /* @kind other */
  --nav-tracking: -0.01em;
  --card-rule-color: var(--ink);
  --card-title-font: var(--font-display);
  --card-title-weight: 800;
  --label-font: var(--font-body);
  --label-size: 14px;
  --label-weight: 800;
  --label-case: lowercase; /* @kind other */
  --label-tracking: 0;
  --grain-opacity: 0.14; /* @kind other */
}

@media (prefers-color-scheme: dark) {
  [data-skin="splittone"] {
    --paper: #10141A;
    --ink: #EDE6D8;
    --muted: #9CA1A8;
    --line: #272C34;
    --accent: #F0714F;
  }
}

[data-skin="splittone"][data-theme="dark"] {
  --paper: #10141A;
  --ink: #EDE6D8;
  --muted: #9CA1A8;
  --line: #272C34;
  --accent: #F0714F;
}

[data-skin="splittone"][data-theme="light"] {
  --paper: #EEE8DC;
  --ink: #10161D;
  --muted: #5C6168;
  --line: #D6CEC0;
  --accent: #B2301A;
}