/* ZenLoaf — generated from tokens.json */
:root, [data-theme="paper"] {
  --paper: #ffffff; /* Page ground. Keep about half of every screen this colour. */
  --paper-raised: #ffffff; /* Cards and panels that sit on paper: host cards, step panels. */
  --rule: #ece7e1; /* Hairlines: card borders and section rules. Decorative; never the only thing that separates controls. */
  --ink: #231f1c; /* Text, pen lines, the primary button. 16.4:1 on paper and paper-raised (day); 14.6:1 on paper, 12.8:1 on paper-raised (dusk). */
  --ink-muted: #5f5853; /* Secondary text: the lead under a headline, descriptions, gallery-label details. 7.0:1 on paper (day); 8.3:1 on paper, 7.3:1 on paper-raised (dusk). */
  --ink-quiet: #948c85; /* Large text only, 24 px and up: the quiet half of a two-tone headline, struck-through ‘before’ copy. 3.3:1 on paper (day); 5.1:1 on paper, 4.5:1 on paper-raised (dusk). */
  --on-ink: #ffffff; /* Label on an ink fill (the primary button). 16.4:1 (day), 14.6:1 (dusk). */
  --sail: #e8862e; /* The one accent, as paint: washes, the painted full stop, chips. Never text on paper in day (2.7:1); use sienna for orange text. */
  --sienna: #a8521f; /* Orange text: links and secondary actions. 5.4:1 on paper (day); 7.6:1 on paper (dusk). */
  --sand: #d9b98c; /* Washes only: grounds under drawings and marks, warmth in a background. */
  --river: #8fa6b8; /* Washes only: water and distance; the river lines in a dusk section. */
  --matcha: #9daa6e; /* Washes only, and at most one per screen. */
  --sheet: #ffffff; /* Ground of an instruction drawing (the step panels). Always light, in both themes, because the drawings are ink on paper. */
  --sheet-ink: #231f1c; /* Text and lines on sheet: the step number. 16.4:1 on sheet (day), 14.6:1 (dusk). */
  --dusk: #161d2b; /* Ground of a dusk section (night moments, CS Outpost). In the dusk theme it goes darker than the page so the band still reads. */
  --dusk-raised: #1f2838; /* A raised surface inside a dusk section: the phone screen. */
  --dusk-frame: #2c3648; /* The phone frame's border inside a dusk section. Decorative. */
  --dusk-ink: #f3eee6; /* Text on dusk and dusk-raised. 14.6:1 on dusk (day), 15.7:1 (dusk); 12.8:1 on dusk-raised. */
  --dusk-muted: #aeb6c6; /* Secondary text on dusk. 8.3:1 (day), 8.9:1 (dusk); 7.3:1 on dusk-raised. */
  --lantern: #f2994a; /* Links and the painted sun on dusk. 7.6:1 on dusk (day), 8.2:1 (dusk). */
  --shadow-card: 0 6px 24px #231f1c0f; /* Host cards, with a rule border. */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #231f1c; /* Keyboard focus on every control: a 2 px paper gap, then 2 px of solid ink (16:1 on paper). */
}
[data-theme="dusk"] {
  --paper: #161d2b;
  --paper-raised: #1f2838;
  --rule: #2c3648;
  --ink: #f3eee6;
  --ink-muted: #aeb6c6;
  --ink-quiet: #858ea1;
  --on-ink: #161d2b;
  --sail: #f2994a;
  --sienna: #f2994a;
  --river: #5c7394;
  --sheet: #f3eee6;
  --dusk: #10161f;
  --dusk-raised: #1a2230;
  --shadow-card: 0 8px 28px #00000066;
  --focus-ring: 0 0 0 2px #161d2b, 0 0 0 4px #f3eee6;
}
:root {
  --space-1: 4px; /* Between a gallery label's lines. */
  --space-2: 8px; /* Rule to title in a gallery label; small gaps. */
  --space-3: 12px; /* Inside a host card's text column. */
  --space-4: 16px; /* Step number inset; card text gaps. */
  --space-5: 24px; /* Between a headline and its lead; button groups. */
  --space-6: 28px; /* Grid gutter between panels, tags and cards. */
  --space-7: 40px; /* Card padding; heading to grid. */
  --space-8: 72px; /* Page side margin at desktop width. */
  --space-9: 120px; /* From the hero to the first section. */
  --space-10: 140px; /* Between sections. */
  --radius-panel: 3px; /* Step panels and price chips: the assembly-sheet look. */
  --radius-sm: 4px; /* Small labels on dusk. */
  --radius-card: 24px; /* Host cards and other cards about people. */
  --radius-device: 50px; /* The phone frame. */
  --radius-pill: 999px; /* Buttons. */
  --stroke-panel: 1.5px; /* Step-panel borders. */
  --stroke-tag: 2px; /* The rule over a price tag; the gallery-label rule. */
  --stroke-pen: 4px; /* Drawing lines at the 290 × 210 drawing size. */
  --font-sans: Outfit, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --text-hero: 600 104px/0.95 var(--font-sans); /* The homepage headline. Two lines at most; ends with the painted full stop. */
  --text-section: 600 56px/1 var(--font-sans); /* Section headings. */
  --text-title: 600 32px/1.1 var(--font-sans); /* Names on host cards, prices on price tags, card titles. */
  --text-lead: 400 22px/1.5 var(--font-sans); /* The line under the hero headline, in ink-muted. */
  --text-item: 600 22px/1.3 var(--font-sans); /* Step titles and other short item names. */
  --text-body: 400 17px/1.5 var(--font-sans); /* Paragraphs and bios. */
  --text-body-sm: 400 15px/1.5 var(--font-sans); /* Menu descriptions and notes under drawings. */
  --text-tag: 600 20px/1.2 var(--font-sans); /* Price-tag names, in capitals. */
  --text-nav: 400 16px/1.4 var(--font-sans); /* Navigation links. */
  --text-label: 400 13px/1.55 var(--font-mono); /* Gallery-label details, ‘Fixed price’, stat captions. */
  --text-eyebrow: 400 13px/1.4 var(--font-mono); /* One line above a headline, in capitals. */
}
.hero {
  font-family: var(--font-sans);
  font-size: 104px;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.section {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.title {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.item {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.tag {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.12em;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/dm-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}