/* Bitter Moon — generated from tokens.json */
:root, [data-theme="paper"] {
  --bm-lunar-blue-100: #dfe4fa; /* Lunar Blue tint. Exists only for the mark in motion — never UI. */
  --bm-lunar-blue-200: #b9c6f3; /* Lunar Blue tint. Mark in motion only. */
  --bm-lunar-blue-300: #8ba0ec; /* Lunar Blue tint. Mark in motion only. */
  --bm-lunar-blue-400: #5372e2; /* Lunar Blue tint. Mark in motion only. */
  --bm-lunar-blue-500: #1741d8; /* Lunar Blue — the main colour, #1741D8 · 23 65 216. The mark only (6.9:1 on Paper). Use through bm-mark-primary. */
  --bm-lunar-blue-600: #1538b9; /* Lunar Blue shade. Mark in motion only. */
  --bm-lunar-blue-700: #122e96; /* Lunar Blue shade. Mark in motion only. */
  --bm-lunar-blue-800: #0f2473; /* Lunar Blue shade. Mark in motion only. */
  --bm-lunar-blue-900: #0d1a50; /* Lunar Blue shade. Mark in motion only. */
  --bm-regolith-0: #fcfaf7; /* Warm stone neutral, lightest. Behind bm-bg-surface. */
  --bm-regolith-50: #f8f5f1; /* Paper, #F8F5F1 · 248 245 241. The ground of every page; behind bm-bg-canvas. */
  --bm-regolith-100: #f0ebe4; /* Stone. Behind bm-bg-sunken (media placeholders) and bm-border-subtle. */
  --bm-regolith-200: #e3dcd2; /* Stone. Behind bm-border-default — every 1 px rule. */
  --bm-regolith-300: #cfc6ba; /* Stone ramp step. Grounds and rules only. */
  --bm-regolith-400: #ada498; /* Stone ramp step. Grounds and rules only — 2.3:1 on Paper, not for text. */
  --bm-regolith-500: #8c8479; /* Stone. Behind bm-text-tertiary. */
  --bm-regolith-600: #6b645b; /* Stone. Behind bm-text-secondary. */
  --bm-regolith-700: #4a453f; /* Stone ramp step, dark. */
  --bm-regolith-800: #2a2724; /* Stone ramp step, darkest. */
  --bm-ink-900: #16140f; /* Ink, #16140F · 22 20 15 — a warm black that carries every word. Behind bm-text-primary and bm-bg-inverse. */
  --bm-ink-700: #2b2823; /* Ink, softened. Secondary dark surfaces. */
  --bm-mineral-200: #d3d8d3; /* Mineral — cool grey-green neutral. Defined in the file; no usage drawn yet. */
  --bm-mineral-400: #a7afa9; /* Mineral neutral. No usage drawn yet. */
  --bm-mineral-600: #76817c; /* Mineral neutral. No usage drawn yet. */
  --bm-mineral-800: #46504c; /* Mineral neutral. No usage drawn yet. */
  --bm-signal-orange: #ff6f00; /* Signal orange, #FF6F00. Raw value behind bm-signal-now. Estimated from photographs. */
  --bm-signal-green: #7ccb2f; /* Signal green (corrected from the Enter-key green #66EC59). Behind bm-signal-enter. Estimated. */
  --bm-signal-teal: #43c6b9; /* Coffee-filter teal. Behind bm-signal-process. Estimated. */
  --bm-signal-purple: #9a84e3; /* Keycap lavender. Behind bm-signal-lab. Estimated. */
  --bm-signal-yellow: #ffd21a; /* Yellow coffee filter. Behind bm-signal-now-glow — highlight of Now only. Estimated. */
  --bm-bg-canvas: var(--bm-regolith-50); /* Paper — the page ground. Text: bm-text-primary, -secondary (5.4:1); tertiary only at 3.4:1. */
  --bm-bg-surface: var(--bm-regolith-0); /* Raised paper for panels and specimen boxes. Same text pairs as canvas. */
  --bm-bg-sunken: var(--bm-regolith-100); /* Media placeholder ground (Site / Media) while an image loads. */
  --bm-bg-inverse: var(--bm-ink-900); /* Ink fill: the one primary action and a selected chip. Text on it is bm-bg-canvas (16.9:1). */
  --bm-text-primary: var(--bm-ink-900); /* Every word that matters: titles, body, links, active nav. On canvas 16.9:1, surface 17.7:1. */
  --bm-text-secondary: var(--bm-regolith-600); /* Supporting copy, inactive nav, years, captions. On canvas 5.4:1, surface 5.6:1. */
  --bm-text-tertiary: var(--bm-regolith-500); /* Index numbers (BM—000), field labels, colophon. Source value: 3.4:1 on canvas — below 4.5:1 for its 11 px use; kept exact, flagged. */
  --bm-text-link: var(--bm-ink-900); /* Links: ink, underlined. Never coloured. 16.9:1 on canvas. */
  --bm-border-default: var(--bm-regolith-200); /* Every 1 px rule: row dividers, field underlines, chip outlines, footer rule. Decorative (1.25:1), never the only cue. */
  --bm-border-subtle: var(--bm-regolith-100); /* Quieter rule inside a panel. */
  --bm-mark-primary: var(--bm-lunar-blue-500); /* Lunar Blue. Reserved for the Bitter Moon mark only — never UI, never over imagery. */
  --bm-signal-now: var(--bm-signal-orange); /* Now — live, current project, playhead, cursor. Small solid marks only, never text; one signal per view; never on or beside renders. 2.6:1 on Paper. */
  --bm-signal-enter: var(--bm-signal-green); /* Enter — ready, available for work, done / shipped. Small solid marks only, never text; one per view. 1.8:1 on Paper, so always pair with a caption. */
  --bm-signal-process: var(--bm-signal-teal); /* Process — research, prototyping, in production. Small solid marks only, never text; one per view. 1.9:1 on Paper. */
  --bm-signal-lab: var(--bm-signal-purple); /* Lab — personal experiments, concept work. Small solid marks only, never text; one per view. 2.8:1 on Paper. */
  --bm-signal-now-glow: var(--bm-signal-yellow); /* Warm highlight of Now. Only as glow or gradient on a moving Now signal; never on its own. */
  --bm-observed-hero: #a8833f; /* Sampled from the hero photograph — dry mountain grass (estimated). Placeholder grounds for imagery only. */
  --bm-observed-ground: #e6e2db; /* Sampled — morning fog (estimated). Imagery placeholder only. */
  --bm-observed-shadow: #35383c; /* Sampled — charred timber cabin (estimated). Imagery placeholder only. */
}
:root {
  --bm-space-8: 8px; /* Within a group — index → label. */
  --bm-space-16: 16px; /* Media → caption. */
  --bm-space-24: 24px; /* Gutter; label → content. */
  --bm-space-48: 48px; /* Inside a block — text → label, image → text. */
  --bm-space-72: 72px; /* Page margin at desktop 1440. */
  --bm-space-96: 96px; /* Image → statement column; between groups in a block. */
  --bm-space-160: 160px; /* Between every section. */
  --bm-radius-none: 0px; /* Everything: media, buttons, fields, panels are square. */
  --bm-radius-pill: 999px; /* Chips only. */
  --bm-grid-columns: 12; /* Twelve columns; images snap to whole spans. */
  --bm-grid-column: 86px; /* One column at 1440. */
  --bm-grid-gutter: 24px; /* Gutter between columns (= bm-space-24). */
  --bm-grid-content: 1296px; /* Content width — 12 spans inside 72 px margins. */
  --bm-grid-page: 1440px; /* Desktop frame width; the hero is 1440 × 900. */
  --bm-stroke-rule: 1px; /* Every rule and border. */
  --bm-focus-width: 1px; /* Keyboard focus outline, primary ink (proposed in the file). */
  --bm-focus-offset: 4px; /* Focus outline offset (proposed). */
  --bm-ease-out: cubic-bezier(0, 0, 0.58, 1); /* State changes (row rule and ink, chip border, field underline), image load and content reveal. The VIS's 'ease-out'. */
  --bm-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* Appear-and-disappear and whole-page motion: the hover preview reveal and the page entrance. Symmetric, slow at both ends. */
  --bm-duration-fast: 200ms; /* State changes: row hover rule and text colour, chip border, field focus underline. With bm-ease-out. */
  --bm-duration-reveal: 240ms; /* Hover preview fade in / fade out (opacity 0 ↔ 1). With bm-ease-in-out. */
  --bm-duration-image: 300ms; /* Image fade-in once loaded. With bm-ease-out. */
  --bm-duration-page: 1200ms; /* Page entrance: the whole page fades in from Paper when it opens. With bm-ease-in-out. */
  --bm-duration-content: 900ms; /* Content reveal: each image and text block fades in as it first scrolls into view. With bm-ease-out. */
  --bm-stagger-content: 120ms; /* Delay between blocks revealed together, in reading order (top to bottom, then left to right); at most 6 steps. */
  --bm-rise-distance: 24px; /* Text reveal: text blocks rise this far, from below to their place, while they fade in (part 03). Images never move. */
  --font-serif: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-sans: "PP Neue Montreal", Jost, "Helvetica Neue", Arial, sans-serif;
  --text-serif-display: 400 72px/1.1 var(--font-serif); /* Case and article titles, page names, the slogan. Roman. */
  --text-serif-statement: italic 400 28px/1.8 var(--font-serif); /* Long-form voice: statements, About, contact values. 8 columns or narrower. */
  --text-serif-accent: italic 400 26px/1 var(--font-serif); /* The year after a title, in parentheses, secondary ink; ledes; the signature. */
  --text-serif-body: italic 400 20px/1.65 var(--font-serif); /* Serif running text and the slogan in the colophon. */
  --text-serif-label: 400 18px/1 var(--font-serif); /* Section words, set in caps. One of only two caps styles. */
  --text-sans-title: 400 32px/1 var(--font-sans); /* A work's name in rows and lists (Book). */
  --text-sans-body: 400 15px/1.7 var(--font-sans); /* Practical copy — brief, approach, credits. */
  --text-sans-link: 400 13px/1 var(--font-sans); /* Standalone links such as “View all work”; primary ink, underlined. */
  --text-sans-caption: 400 11px/1 var(--font-sans); /* Metadata, nav, chips, buttons — set in caps. The other caps style. */
  --text-sans-index: 600 11px/1 var(--font-sans); /* Index numbers (BM—000), row labels, field labels. Semibold (replaces the file's Medium). */
}
.serif-display {
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.serif-statement {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
.serif-accent {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
.serif-body {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
}
.serif-label {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.2em;
}
.sans-title {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.sans-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.sans-link {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.sans-caption {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.sans-index {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.06em;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Variable.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Italic-Variable.woff") format("woff");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}