/*
 * Breadwinner v3, "The Recipe Ledger": the whole visual system for the prototype.
 * Canonical source: DESIGN.md (tokens are normative), the Step 7 shape brief and copy deck,
 * Step 4 section 6 (motion), Step 3 section 6 (spacing rules). Markup contract: CONTRACT.md.
 *
 *  1. Fonts                 7. Controls (buttons, links, fields, status lines)
 *  2. Tokens and themes     8. Components (slips, receipt, loaf switch, licence, people,
 *  3. Base                     order desk, product row, photo print, story prints, doodles,
 *  4. Layout primitives        notes, story, manifesto, ingredients, progress line, footer,
 *  5. Type                     chat aside)
 *  6. Chrome (nav, menu,    9. Page sections (hero, label, story, pack, founders, manifesto,
 *     masthead, crumbs)        keeping, who, products header)
 *                          10. Motion (tiers, once-latch states, backups)
 *                          11. Restyles for js/utils.js (.bw-toast, .bw-card) and Lenis
 *                          12. Print
 *
 * House rules kept here: OKLCH only, no pure black or white, no gradient text, no glass,
 * no side-stripe borders, no card grids, every hover inside (hover: hover) and (pointer: fine),
 * no count-ups, loops or pulses, reduced motion respected.
 */

/* ======================================================================
   1. Fonts (FONTS.md). Only the roman is preloaded; the italic and Kalam
   load when text uses them. Fallbacks are metric-matched so the swap does
   not move the layout.
   ====================================================================== */
@font-face {
  font-family: "Literata";
  src: url(fonts/v3-literata-roman.woff2) format("woff2");
  font-weight: 250 650;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url(fonts/v3-literata-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url(fonts/v3-kalam-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Georgia's advances are about 94.8% of Literata's at weight 400 (measured on the body text of four pages,
   2026-10-23), so 105.5% sets the same lines; the overrides scale with size-adjust, so they are divided by
   it to keep Literata's 149% line box. 111.33% set every line about 5% wider and re-wrapped body text. */
@font-face {
  font-family: "Literata Fallback G";
  src: local("Georgia");
  size-adjust: 105.5%;
  ascent-override: 111.56%;
  descent-override: 29.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Literata Fallback N";
  src: local("Noto Serif"), local("NotoSerif-Regular"), local("Droid Serif");
  size-adjust: 101.22%;
  ascent-override: 116.28%;
  descent-override: 30.43%;
  line-gap-override: 0%;
}

/* ======================================================================
   2. Tokens. Palette values are the canonical OKLCH from
   .impeccable/design.json; roles below swap per theme.
   ====================================================================== */
:root {
  /* Ledger by day */
  --ledger-grey: oklch(0.935 0.005 85);
  --receipt-white: oklch(0.968 0.004 85);
  --graph-line: oklch(0.89 0.007 85);
  --ruled-line: oklch(0.78 0.008 80);
  --kitchen-ink: oklch(0.21 0.008 75);
  --pencil-grey: oklch(0.47 0.008 75);
  --haldi: oklch(0.797 0.163 88.1);
  --haldi-stain: oklch(0.735 0.15 82);
  --haldi-ink: oklch(0.505 0.105 72);
  --brick: oklch(0.5 0.16 30);
  /* Handwriting-only lightening (2026-10-11 owner review): the margin notes read a
     touch dark; --haldi-ink itself stays put because it also colours links, the
     swipe band and buttons. oklch(0.525 0.105 72) keeps 4.5:1 against --paper
     (the palest surface a mark sits on) with a small margin; the study's 0.53
     measured 4.45:1, just under the floor, so this file uses 0.525 instead. */
  --hand-ink: oklch(0.525 0.105 72);
  /* Ledger by lamplight */
  --lamplit-ledger: oklch(0.205 0.008 75);
  --lamplit-raised: oklch(0.245 0.008 75);
  --lamplit-grid: oklch(0.255 0.008 75);
  --lamplit-rule: oklch(0.38 0.008 75);
  --chalk: oklch(0.925 0.006 85);
  --chalk-pencil: oklch(0.72 0.008 80);
  --lamplit-brick: oklch(0.72 0.13 30);

  /* Roles (day) */
  --paper: var(--ledger-grey);
  --raised: var(--receipt-white);
  --grid: var(--graph-line);
  --rule: var(--ruled-line);
  --ink-text: var(--kitchen-ink);
  --pencil-text: var(--pencil-grey);
  --accent-text: var(--haldi-ink);      /* notes and accent text: Haldi Ink by day */
  --swipe: var(--haldi);                /* highlighter band and current-page band */
  --link-line: var(--ink-text);            /* resting underline of a standalone link */
  --inline-line: var(--haldi-ink);      /* resting underline of a link inside body text */
  --focus-ink: var(--kitchen-ink);
  --error: var(--brick);
  --field-border: var(--kitchen-ink);
  --lh-body: 1.6;
  --lh-lede: 1.45;
  --shadow-print: 0 1px 1px oklch(0.21 0.008 75 / 0.10), 0 14px 28px -14px oklch(0.21 0.008 75 / 0.35);
  --shadow-held: drop-shadow(0 18px 18px oklch(0.21 0.008 75 / 0.18));
  --shadow-print-set: 0 1px 1px oklch(0.21 0.008 75 / 0.10), 0 8px 16px -10px oklch(0.21 0.008 75 / 0.30);   /* a print pressed flat */
  color-scheme: light;

  /* Type */
  --font-print: "Literata", "Literata Fallback G", "Literata Fallback N", Georgia, serif;
  --font-hand: "Kalam", "Segoe Print", cursive;
  --t-display: clamp(2rem, 0.329rem + 6.857vw, 6.5rem);
  --t-statement: clamp(1.75rem, 0.729rem + 4.19vw, 4.5rem);
  --t-headline: clamp(1.75rem, 1.286rem + 1.905vw, 3rem);
  --t-lede: clamp(1.375rem, 1.05rem + 1.333vw, 2.25rem);
  --t-title: clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem);
  --t-body: clamp(1.125rem, 1.102rem + 0.095vw, 1.1875rem);
  --t-price: var(--t-body);
  --t-button: 1.0625rem;
  --t-label: 0.9375rem;
  --t-fine: 0.9375rem;
  --t-hand: clamp(1.25rem, 1.111rem + 0.571vw, 1.625rem);

  /* Space (4px base) */
  --s-2xs: 0.25rem;
  --s-xs: 0.5rem;
  --s-sm: 0.75rem;
  --s-md: 1rem;
  --s-lg: 1.5rem;
  --s-xl: 2rem;
  --s-2xl: 3rem;
  --s-3xl: 4rem;
  --s-4xl: 6rem;
  --s-5xl: 8rem;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --section: clamp(6rem, 4.51rem + 6.095vw, 10rem);       /* 96px at 390, 160px at 1440 */
  --breath: clamp(8rem, 5.4rem + 10.667vw, 15rem);        /* 128px at 390, 240px at 1440 */
  --breath-tight: clamp(2.75rem, 0.5rem + 6vw, 5.5rem);
  --page-top: clamp(2rem, 1.25rem + 3.05vw, 4rem);
  --tap: 2.75rem;
  --space-h: var(--s-md);               /* h2 or h3 to its first text: 16px, 24px from 900px */
  --page-max: clamp(90rem, 39.75rem + 51.25vw, 101.5rem);
  --art-gutter: 0rem;                   /* reserved for the motion workflow's floating-ingredient art layer */
  --nav-h: 3.5rem;                      /* 56px, 64px from 1200px */
  --masthead-h: 2.5rem;
  --crumbs-h: var(--tap);
  --slip-pad: var(--s-lg);
  --row-pad: 0.875rem;                  /* ledger-row: 14px 0 */
  --field-h: 3.25rem;
  --btn-h: 3rem;
  --cut: 2px;
  --line-w: 1px;

  /* Motion */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers */
  --z-sticky: 200;
  --z-chat: 250;
  --z-toast: 500;
}
@media (min-width: 900px) {
  :root { --space-h: var(--s-lg); }
}
@media (min-width: 1200px) {
  :root { --nav-h: 4rem; }
}
/* Phone reading scale: only the label steps up (16px) below 600px; body is
   the token's own 18px floor and fine stays 15px. Display, statement, headline,
   lede and every width from 600px up are untouched. */
@media (max-width: 599.98px) {
  :root {
    --t-label: 1rem;       /* 16px phone, 15px from 600px */
  }
}

/* Ledger by lamplight: the stored choice, or the system setting when nothing is stored. */
html[data-theme="dark"] {
  --paper: var(--lamplit-ledger);
  --raised: var(--lamplit-raised);
  --grid: var(--lamplit-grid);
  --rule: var(--lamplit-rule);
  --ink-text: var(--chalk);
  --pencil-text: var(--chalk-pencil);
  --accent-text: var(--haldi);          /* at night bright Haldi may be text */
  --swipe: var(--haldi-ink);            /* Chalk stays on top of the band (4.82:1) */
  --link-line: var(--ink-text);
  --inline-line: var(--haldi);
  --focus-ink: var(--chalk);
  --error: var(--lamplit-brick);
  --field-border: var(--chalk);
  --lh-body: 1.65;
  --lh-lede: 1.45;
  --shadow-print: 0 1px 1px oklch(0.13 0.004 70 / 0.5), 0 14px 28px -14px oklch(0.13 0.004 70 / 0.5);
  --shadow-held: drop-shadow(0 18px 18px oklch(0.13 0.004 70 / 0.5));
  --shadow-print-set: 0 1px 1px oklch(0.13 0.004 70 / 0.5), 0 8px 16px -10px oklch(0.13 0.004 70 / 0.5);
  color-scheme: dark;
  /* Dark theme has headroom either way (9-10.5:1 vs 7:1 floor), so lighten here too. */
  --hand-ink: oklch(0.83 0.163 88.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--lamplit-ledger);
    --raised: var(--lamplit-raised);
    --grid: var(--lamplit-grid);
    --rule: var(--lamplit-rule);
    --ink-text: var(--chalk);
    --pencil-text: var(--chalk-pencil);
    --accent-text: var(--haldi);
    --swipe: var(--haldi-ink);
    --link-line: var(--ink-text);
    --inline-line: var(--haldi);
    --focus-ink: var(--chalk);
    --error: var(--lamplit-brick);
    --field-border: var(--chalk);
    --lh-body: 1.65;
    --lh-lede: 1.45;
    --shadow-print: 0 1px 1px oklch(0.13 0.004 70 / 0.5), 0 14px 28px -14px oklch(0.13 0.004 70 / 0.5);
    --shadow-held: drop-shadow(0 18px 18px oklch(0.13 0.004 70 / 0.5));
    --shadow-print-set: 0 1px 1px oklch(0.13 0.004 70 / 0.5), 0 8px 16px -10px oklch(0.13 0.004 70 / 0.5);
    color-scheme: dark;
    --hand-ink: oklch(0.83 0.163 88.1);
  }
}

/* ======================================================================
   3. Base
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;                     /* 16px root at every width */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--paper);
  color: var(--ink-text);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-print);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  color: var(--ink-text);
  /* The graph paper: 24px cells of 1px Graph Line, zero bytes. */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul[role="list"], ol[role="list"], .list-plain { list-style: none; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* The Focus Is Ink Rule: 2px Kitchen Ink (Chalk at night), 3px offset, never removed. */
:focus-visible {
  outline: 2px solid var(--focus-ink);
  outline-offset: 3px;
}
/* Programmatic jump targets are not interactive: no ring when a heading or main takes focus. */
:where(main, section, h1, h2, h3, [data-jump-target])[tabindex="-1"]:focus { outline: none; }

::selection { background-color: var(--haldi); color: var(--kitchen-ink); }

main [id] { scroll-margin-top: calc(var(--nav-h) + var(--s-lg)); }
#main { scroll-margin-top: var(--nav-h); }   /* the skip link lands main just under the sticky bar, not beneath it */

.skip {
  position: absolute;
  top: var(--s-xs);
  left: var(--gutter);
  z-index: 1000;
  padding: var(--s-sm) var(--s-md);
  background-color: var(--raised);
  color: var(--ink-text);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.skip:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

/* Breakpoint visibility (600, 900, 1200). Combine: "from-md below-lg" = 900 to 1199. */
@media (max-width: 599.98px) { .from-sm { display: none !important; } }
@media (min-width: 600px) { .below-sm { display: none !important; } }
@media (max-width: 899.98px) { .from-md { display: none !important; } }
@media (min-width: 900px) { .below-md { display: none !important; } }
@media (max-width: 1199.98px) { .from-lg { display: none !important; } }
@media (min-width: 1200px) { .below-lg { display: none !important; } }

/* JavaScript on or off. The prepaint script adds .js to <html>. */
.js .if-nojs { display: none !important; }
html:not(.js) .if-js { display: none !important; }

/* ======================================================================
   4. Layout primitives
   ====================================================================== */
/* One gutter per band: 24px on phones rising to 72px at 1440px. */
.wrap {
  width: min(100% - 2 * (var(--gutter) + var(--art-gutter)), var(--page-max));
  margin-inline: auto;
}

/* Section rhythm: neighbours sit exactly one `section` apart. */
.section { padding-block: calc(var(--section) / 2); }
/* The story and the manifesto are held one `breath` from every neighbour. */
.breath-before { padding-top: calc(var(--breath) - var(--section) / 2); }
.breath-after { padding-bottom: calc(var(--breath) - var(--section) / 2); }
/* The manifesto's content is a few short display lines, not enough to fill a full `breath`.
   --breath-tight is itself the applied padding (unlike --breath, it isn't reduced by
   --section/2) — its own 44px/88px clamp range is small enough already. */
.manifesto-section.breath-before { padding-top: var(--breath-tight); }
.manifesto-section.breath-after { padding-bottom: var(--breath-tight); }
/* Inner page header (and the home hero): first line `page-top` below the chrome. */
.page-head {
  padding-top: var(--page-top);
  padding-bottom: calc(var(--section) / 2);
}

/* Flow: vertical rhythm between siblings. Utilities below override it. */
.flow > * + * { margin-top: var(--flow-space, var(--s-md)); }
.flow > :where(h1, .display) + * { margin-top: var(--s-lg); }
.flow > :where(h2, h3, .headline, .title) + * { margin-top: var(--space-h); }
.flow > * + :where(.group), .flow > :where(.group) + * { margin-top: var(--s-2xl); }
.flow-tight { --flow-space: var(--s-xs); }
.flow-list { --flow-space: var(--s-sm); }

/* Margin utilities (.mt-*) live at the end of this file so they beat component resets. */

/* Main column and right margin column (four fifths and one fifth) from 900px.
   A .note or .ledger__margin that follows a paragraph lands in that paragraph's row. */
@media (min-width: 900px) {
  .ledger {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }
  .ledger > * { grid-column: 1; }
  .ledger > :is(.ledger__margin, .note, .float-field) { grid-column: 2; margin-top: 0; }
  .ledger > .ledger__full { grid-column: 1 / -1; }
}

/* Seven and five columns from 900px. Everything sits in the left column in DOM order;
   one .split__aside spans the right column from the top (up to 20 left children). */
@media (min-width: 900px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: repeat(20, auto) 1fr;
    column-gap: var(--gutter);
    align-items: start;
  }
  .split > * { grid-column: 1; }
  .split > .split__aside { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}

/* ======================================================================
   5. Type. Literata prints, Kalam writes. Nothing below 15px, no capitals,
   italics only at 26px and below, weight 300 above 40px.
   ====================================================================== */
h1, .display {
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 15ch;
}
.statement {
  font-size: var(--t-statement);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 32ch;
  text-wrap: pretty;
}
h2, .headline {
  font-size: var(--t-headline);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* The Light When Large Rule: Headline passes 40px at 960px (1.3rem + 2vw), so it drops to 300. */
@media (min-width: 960px) {
  h2, .headline { font-weight: 300; }
}
.lede {
  font-size: var(--t-lede);
  font-weight: 350;
  line-height: var(--lh-lede);
  letter-spacing: -0.005em;
  max-width: 44ch;
  text-wrap: pretty;
}
h3, .title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
}
p { max-width: 34rem; text-wrap: pretty; }   /* about 65 characters; rem, not ch, so the column is the same width in Literata and its fallback */
.body { font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); }
.price {
  font-size: var(--t-price);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
}
.label {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.fine {
  font-size: var(--t-fine);
  font-weight: 400;
  line-height: 1.5;
}
.hand {
  font-family: var(--font-hand);
  font-size: var(--t-hand);
  font-weight: 400;
  line-height: 1.2;
  color: var(--hand-ink);
}
.pencil { color: var(--pencil-text); }
.accent { color: var(--accent-text); }
.num { font-variant-numeric: tabular-nums lining-nums; }
em, i { font-style: italic; }
strong, b { font-weight: 600; }

/* One sense phrase per line (The Sense Break Rule). Inline, so a wrapped phrase shows two rects. */
.line { display: inline; }
.line:not(:last-child)::after { content: "\A"; white-space: pre; }

/* Long-form text: inline links carry a Haldi Ink underline by day. */
.prose > * + * { margin-top: var(--s-md); }
.prose > :where(h2, h3) + * { margin-top: var(--space-h); }
.prose > * + :where(h2) { margin-top: var(--s-3xl); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-sm); }
/* Prose tables (terms/fssai-style reference tables) have no font-size of
   their own elsewhere, so phones would otherwise inherit --t-body's old
   18px floor at a 1.6 line-height; name the same phone body treatment
   explicitly since .prose td/th aren't plain flow text. */
@media (max-width: 599.98px) {
  .prose td, .prose th { font-size: var(--t-body); line-height: 1.5; font-weight: 400; }
}

/* ======================================================================
   6. Chrome: nav bar, menu sheet, masthead, breadcrumb
   ====================================================================== */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--nav-h);
  background-color: var(--paper);
  border-bottom: var(--line-w) solid var(--rule);   /* the one rule, inside the height */
}
.nav {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Wordmark: Literata 500 beside the brand mark (lockup below). */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 72;
  color: var(--ink-text);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 1200px) { .wordmark { font-size: 1.625rem; } }

/* Wordmark lockup (2026-10-20): the brand mark, an ink grain ear on a haldi sun, beside
   "Breadwinner" in Literata 500. Replaces the haldi grain that sat on the i. */
.wordmark__lockup { display: inline-flex; align-items: center; gap: 0.32em; }
.brandmark { flex: none; width: 1.2em; height: 1.2em; margin-block: -0.1em; overflow: visible; }
.brandmark__sun { fill: var(--haldi); }
.brandmark__stem { stroke: var(--kitchen-ink); stroke-width: 1.9; stroke-linecap: round; fill: none; }
.brandmark .mark-ear { fill: var(--kitchen-ink); }  /* ink on haldi in both themes */
/* The mark widens the lockup by about 1.5em: on the narrowest phones (320px) step the
   wordmark down so Cart and Menu keep their full tap targets. */
@media (max-width: 374.98px) { .wordmark { font-size: 1.1875rem; } .wordmark__lockup { gap: 0.25em; } .nav__controls { gap: var(--s-xs); } .nav__cart { min-width: 4.75em; } }

.nav__links {
  display: none;
  align-items: center;
  margin: 0 0 0 var(--s-2xl);
  padding: 0;
  list-style: none;
}
/* Each link sits on its own 44px row in Label type, so its baseline matches the controls
   (no 19px body strut) and its hit area matches theirs; the band stays on the text. */
.nav__links > li {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-label);
  line-height: 1.35;
}
/* Padding rounds up to whole pixels so sub-pixel line boxes never leave a row at 43.98px. */
.nav__links .link,
.nav__order {
  padding-block: max(0px, (var(--tap) - 1lh) / 2);
  padding-block: round(up, max(0px, (var(--tap) - 1lh) / 2), 1px);
}
.nav__links a,
.nav__control {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.nav__controls {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  margin-left: auto;
}
.nav__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}
.nav__cart { min-width: 5.25em; font-variant-numeric: tabular-nums lining-nums; }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  a.nav__control:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--link-line); text-underline-offset: 4px; }
}
a.nav__control:focus-visible { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--link-line); text-underline-offset: 4px; }
.nav__order { white-space: nowrap; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.01em; }
.nav__order--wide { margin-left: var(--s-xl); }

/* Phones: wordmark, Cart, Menu. 600 to 1199: plus the Order text link. 1200 and up: the full row. */
.nav__account, .theme-toggle, .nav__order--wide, .nav__order--mid { display: none; }
@media (min-width: 600px) and (max-width: 1199.98px) {
  .nav__order--mid { display: inline; }
}
@media (min-width: 1200px) {
  .nav__links { display: flex; gap: var(--s-lg); }
  .nav__account, .theme-toggle { display: inline-flex; }
  .nav__order--wide { display: inline; }
  .nav__menu { display: none; }
}

/* Menu sheet: a full-screen <dialog> of the same paper. Opens instantly, no slide. */
.menu-sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 0 calc(var(--s-2xl) + env(safe-area-inset-bottom));
  border: 0;
  background-color: var(--paper);
  color: var(--ink-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-sheet::backdrop { background-color: var(--paper); }
.menu-sheet__bar {
  height: var(--nav-h);
  border-bottom: var(--line-w) solid var(--rule);
}
.menu-sheet__bar > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.menu-sheet__body { padding-top: var(--s-lg); }
.menu-sheet__links {
  margin-top: var(--s-lg);
  padding: 0;
  list-style: none;
}
.menu-sheet__links a {
  display: flex;
  align-items: center;
  min-height: 4rem;
}
.menu-sheet__links .link {
  font-size: var(--t-headline);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (min-width: 960px) {
  .menu-sheet__links .link { font-weight: 300; }   /* above 40px, as h2 */
}
.menu-sheet__rows {
  margin-top: var(--s-lg);
  padding: var(--s-xs) 0 0;
  list-style: none;
  border-top: var(--line-w) solid var(--rule);
}
.menu-sheet__rows > li {
  display: flex;
  align-items: center;
  min-height: var(--tap);
}
.menu-sheet__rows .link {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;   /* Label's own line height, not Body's (which differs by theme) */
  letter-spacing: 0.01em;
}
.menu-sheet__contact { margin-top: var(--s-lg); }
.menu-sheet__contact > * + * { margin-top: var(--s-2xs); }
html.is-locked { overflow: hidden; }

/* Switch (the menu's "Dark theme"). Square, like cut paper; no bounce. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  touch-action: manipulation;
}
.switch__track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border: 1.5px solid currentColor;
  border-radius: var(--cut);
  background-color: var(--raised);
}
.switch__knob {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 160ms var(--ease-quart);
}
.switch[aria-checked="true"] .switch__track { background-color: var(--ink-text); }
.switch[aria-checked="true"] .switch__knob { background-color: var(--paper); transform: translateX(1.25rem); }

/* Masthead (home only): one 40px line of Fine type, like a letterhead. No rule under it. */
.masthead {
  display: flex;
  align-items: center;
  height: var(--masthead-h);
}
.masthead__line {
  max-width: none;
  font-size: var(--t-fine);
  line-height: 1.5;
  white-space: nowrap;
}

/* Breadcrumb bar (inner pages): 44px, Fine type. */
.crumbs {
  display: flex;
  align-items: center;
  height: var(--crumbs-h);
}
/* No margin here: .wrap's margin-inline: auto puts the list on the gutter (Part C test A). */
.crumbs__list {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 0;
  list-style: none;
  font-size: var(--t-fine);
  line-height: 1.5;
}
.crumbs__list > li { display: flex; align-items: center; gap: var(--s-xs); }
.crumbs__list .link { display: inline-flex; align-items: center; min-width: var(--tap); }
.crumbs__sep { color: var(--pencil-text); }

/* ======================================================================
   7. Controls
   ====================================================================== */
/* Buttons: cut paper, 2px radius, at least 48px. One Haldi button per screen. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  min-height: var(--btn-h);
  padding: 0.8125rem var(--s-lg);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  font-family: var(--font-print);
  font-size: var(--t-button);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease-quart), transform 160ms var(--ease-quart);
}
.btn--primary {
  background-color: var(--haldi);
  color: var(--kitchen-ink);
  border-color: var(--kitchen-ink);
}
.btn--secondary {
  background-color: var(--paper);
  color: var(--ink-text);
  border-color: var(--ink-text);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background-color: var(--haldi-stain); }
  .btn--secondary:hover { background-color: var(--raised); }
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn:disabled, .btn[aria-disabled="true"] {
  transform: none;
  cursor: default;
  color: var(--pencil-text);
  background-color: var(--paper);
  border-style: dashed;
  border-color: var(--pencil-text);
}
.btn--fill { width: 100%; }
@media (max-width: 599.98px) { .btn--fill-phone { width: 100%; } }
.btn--field { min-height: var(--field-h); }

/* Text button (for example "Cancel"): reads as a text link, behaves as a button. */
.text-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 4px;
  touch-action: manipulation;
}

/* Text links (interaction 2): Kitchen Ink, 2px Haldi underline 4px below, and a highlighter
   band behind the lower 55% that wipes in on fine-pointer hover and on keyboard focus.
   Padding gives a 44px hit area without moving the line; the band is clipped to the text. */
.link,
.prose a:not(.btn) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--link-line);
  text-underline-offset: 4px;
  background-image: linear-gradient(var(--swipe), var(--swipe));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 55%;
  transition: background-size 200ms var(--ease-quart);
}
.link {
  background-origin: content-box;
  background-clip: content-box;
}
/* On touch (and at any phone or tablet width, where a desktop-sized emulation reports a fine pointer),
   a standalone link gets a 44px hit area; the band stays clipped to the text. */
@media (pointer: coarse), (max-width: 899.98px) {
  .link { padding-block: max(0px, (var(--tap) - 1.3em) / 2); }
  /* Stacked link rows (footer facts and groups, contact rows, menu sheet rows) and the crumbs Home link:
     each link is a block-level item padded to exactly 44px around its one line box, so
     the row is 44px, neighbouring targets never overlap and the band stays on the text. */
  :is(.facts, .contact-rows, .foot-group ul) > li:has(> .link) {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding-block: 0;
  }
  :is(.facts, .contact-rows, .foot-group ul) > li > .link,
  .crumbs__list .link,
  .menu-sheet__rows .link {
    padding-block: max(0px, (var(--tap) - 1lh) / 2);
    padding-block: round(up, max(0px, (var(--tap) - 1lh) / 2), 1px);
  }
  .facts > li:has(> .link) + li:has(> .link) { margin-top: 0; }
}
.link--nav { text-decoration-line: none; }
.link--inline,
.prose a:not(.btn) { text-decoration-color: var(--inline-line); }
.link.link--inline { padding-block: 0; background-origin: padding-box; background-clip: padding-box; }
/* A link alone on its line that still wears the inline underline (a lone email or phone number, a
   "see also" line): at phone widths it gets the standalone 44px hit area back, the band on the text. */
@media (pointer: coarse), (max-width: 899.98px) {
  .link.link--tap { padding-block: max(0px, (var(--tap) - 1.3em) / 2); background-origin: content-box; background-clip: content-box; }
}
/* On the band the text turns Kitchen Ink (Chalk at night): grey or Haldi Ink text on it fell to
   3.61:1 by day and 2.42:1 at night. */
@media (hover: hover) and (pointer: fine) {
  .link:hover,
  .prose a:not(.btn):hover { background-size: 100% 55%; transition-duration: 280ms; color: var(--ink-text); }
}
.link:focus-visible,
.prose a:not(.btn):focus-visible { background-size: 100% 55%; transition-duration: 280ms; color: var(--ink-text); }
.link--nav[aria-current="page"] { background-size: 100% 55%; }

/* Fields: Receipt White, 1.5px ink border, 52px, Body type (18px, so phones never zoom). */
.field { display: grid; gap: var(--s-xs); }
.field > label, .field__label { font-size: var(--t-label); font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.input {
  display: block;
  width: 100%;
  height: var(--field-h);
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  color: var(--ink-text);
  font-size: var(--t-body);
  line-height: 1.3;
}
.input::placeholder { color: var(--pencil-text); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--error); }
.input:disabled {
  color: var(--pencil-text);
  background-color: var(--paper);
  border-style: dashed;
  border-color: var(--pencil-text);
}
.input--pin { font-variant-numeric: tabular-nums lining-nums; }
.field-row { display: flex; align-items: stretch; gap: var(--s-xs); }
.field-row > .input { flex: 1 1 auto; min-width: 0; }
.field-row > .btn { flex: none; min-height: var(--field-h); }
.field-row--notify { gap: var(--s-sm); }
@media (max-width: 599.98px) {
  .field-row--stack { flex-direction: column; }
  .field-row--stack > .btn { width: 100%; }
}
.hint {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
}
/* Status lines: plain text, never animated. data-tone="error" is Brick, always with words. */
.status {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--ink-text);
  overflow-wrap: anywhere;
}
.status[data-tone="busy"] { color: var(--pencil-text); }
.status[data-tone="error"] { color: var(--error); }
.status__line { display: block; }
.error-text { color: var(--error); }

/* notify.js markup (BW.notifyMe): restyled, not rewritten. */
.notify-form { display: grid; gap: var(--s-xs); }
.notify-form .notify-label,
.notify-form > label { font-size: var(--t-label); font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.notify-row { display: flex; align-items: stretch; gap: var(--s-sm); }
.notify-row > input { flex: 1 1 auto; min-width: 0; }
.notify-row > button { flex: none; }
@media (max-width: 599.98px) {
  .notify-row { flex-direction: column; }
  .notify-row > button { width: 100%; }
}
/* 900 to 1199px the order slip is only the 5/12 column: stack so the field keeps its width. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .order-slip .notify-row { flex-direction: column; }
  .order-slip .notify-row > button { width: 100%; }
}
.notify-email:not(.input) {
  height: var(--field-h);
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--field-border);
  border-radius: var(--cut);
  background-color: var(--raised);
  font-size: var(--t-body);
}
.notify-btn:not(.btn) {
  min-height: var(--field-h);
  padding: 0.8125rem var(--s-lg);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--paper);
  font-size: var(--t-button);
  font-weight: 600;
}
.notify-error {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--error);
  overflow-wrap: anywhere;
}
.notify-ok {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

/* ======================================================================
   8. Components
   ====================================================================== */
/* A slip: Receipt White laid on the paper, one 1px Ruled Line edge, no shadow, no tilt. */
.slip {
  background-color: var(--raised);
  border: var(--line-w) solid var(--rule);
  padding: var(--slip-pad);
}
.slip > :last-child { margin-bottom: 0; }

/* Ledger rows (generic two-column facts: nutrition, declarations, the loaf in numbers). */
.ledger-table { width: 100%; border-collapse: collapse; }
.ledger-table caption {
  caption-side: bottom;
  padding-top: var(--s-xs);
  text-align: left;
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
}
.ledger-table th,
.ledger-table td {
  padding: var(--row-pad) 0;
  border-bottom: var(--line-w) solid var(--rule);
  text-align: left;
  vertical-align: baseline;
  line-height: 1.3;
  font-weight: 400;
}
.ledger-table th { padding-right: var(--s-md); }
.ledger-table tr:last-child > * { border-bottom: 0; }
.ledger-table .ledger-table__fig,
.ledger-table td.fig {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  padding-left: var(--s-md);
}
.ledger-table .ledger-table__label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.01em; }
.ledger-table__source { display: block; margin-top: var(--s-2xs); font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }
@media (min-width: 600px) {
  .ledger-table--stack th { width: 13rem; }
}
@media (max-width: 599.98px) {
  /* Label above value on phones. */
  .ledger-table--stack,
  .ledger-table--stack tbody,
  .ledger-table--stack tr,
  .ledger-table--stack th,
  .ledger-table--stack td { display: block; }
  .ledger-table--stack tr { padding: var(--row-pad) 0; border-bottom: var(--line-w) solid var(--rule); }
  .ledger-table--stack tr:last-child { border-bottom: 0; }
  .ledger-table--stack th,
  .ledger-table--stack td { padding: 0; border: 0; }
  .ledger-table--stack td { margin-top: var(--s-2xs); }
}

/* ---- Ingredient receipt (the label slip) ---- */
.label-slip {
  --row-h: calc(var(--t-body) * 1.3 + 2 * var(--row-pad) + var(--line-w));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.label-slip > .receipt { grid-row: 2; }
/* Below 900px the row 1 note sits above the slip; 1.75rem off the right edge puts its down arrow
   over the 55% figure and keeps the tilted note inside the gutter. */
.label-slip > .note--r1 { grid-row: 1; justify-self: end; margin-right: 1.75rem; margin-bottom: var(--s-xs); }
.label-slip > :is(.note--r4, .note--r5) { display: none; }
@media (min-width: 900px) {
  .label-slip {
    grid-template-columns: var(--slip-w, 26rem) minmax(0, 1fr);
    column-gap: var(--s-lg);
  }
  .label-slip > .receipt { grid-row: 1; grid-column: 1; }
  /* The tilt widens a note's box by a few pixels: keep that inside the column. */
  .label-slip > .note { grid-row: 1; grid-column: 2; justify-self: start; margin-bottom: 0; max-width: calc(100% - 0.75rem); }
  .label-slip > .note--r1 { margin-top: calc(var(--slip-pad) + 0.125rem); margin-right: 0; }
  .label-slip > .note--r4 { display: flex; margin-top: calc(var(--slip-pad) + 3 * var(--row-h) - 1.375rem); }
  /* Daily Bread, row 5 (jaggery): a two-line note whose first line meets the 2% figure. */
  .label-slip > .note--r5 { display: flex; margin-top: calc(var(--slip-pad) + 4 * var(--row-h) + 0.125rem); }
}

.receipt__table { width: 100%; border-collapse: collapse; caption-side: bottom; }
.receipt__table caption {
  caption-side: bottom;
  padding-top: var(--s-xs);
  text-align: left;
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
}
.receipt__table th,
.receipt__table td {
  padding: var(--row-pad) 0;
  border-bottom: var(--line-w) solid var(--rule);
  line-height: 1.3;
  vertical-align: baseline;
}
.receipt__table thead th { padding: 0; border: 0; line-height: 0; }
.receipt__table tbody th { text-align: left; font-weight: 400; text-wrap: balance; }   /* a long name that must wrap (360px) splits evenly */
.receipt__table td {
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  padding-left: var(--s-md);
}
.receipt__table tbody tr:last-child > * { border-bottom-color: var(--ink-text); }
.receipt__table tfoot th,
.receipt__table tfoot td { font-weight: 600; border-bottom: 0; }
.receipt__table tfoot th { text-align: left; }
.receipt__contains {
  display: flex;
  flex-wrap: wrap;                      /* a sentence-long value (the pack's allergen line) drops under its label */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2xs) var(--s-md);
  margin-top: var(--s-md);
  padding-top: var(--row-pad);
  border-top: var(--line-w) solid var(--rule);
  max-width: none;
}

/* Native disclosure, 44px summary, works without JavaScript. */
.disclosure {
  margin-top: var(--s-md);
  border-top: var(--line-w) solid var(--rule);
}
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: var(--tap);
  list-style: none;
  cursor: pointer;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.disclosure[open] > summary::after { transform: translateY(25%) rotate(225deg); }
.disclosure__body { padding-bottom: var(--s-xs); }

/* ---- Loaf switch: two receipts behind two tabs (Daily Bread first, the loaf in the hero
   photo). Text tabs in Label type; the chosen one carries the still Haldi band, like the
   current nav link and the pack's pressed side. Both panels share one grid cell, so the box
   always reserves the taller receipt and a swap never moves the page. Without JavaScript the
   tabs hide and both receipts stack, each under its own name. ---- */
.loaf-switch__tabs {
  display: flex;
  align-items: stretch;
  gap: var(--s-lg);
  margin-bottom: var(--s-xs);
}
.loaf-tab {
  display: block;                       /* not flex: the text span must stay inline so the band follows each line */
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pencil-text);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.loaf-tab:last-child { flex: none; }
.loaf-tab__text {
  background-image: linear-gradient(var(--swipe), var(--swipe));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 55%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 200ms var(--ease-quart);
}
.loaf-tab[aria-selected="true"] { color: var(--ink-text); cursor: default; }
.loaf-tab[aria-selected="true"] .loaf-tab__text { background-size: 100% 55%; transition-duration: 280ms; }
@media (hover: hover) and (pointer: fine) {
  .loaf-tab[aria-selected="false"]:hover { color: var(--ink-text); }
  .loaf-tab[aria-selected="false"]:hover .loaf-tab__text {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--link-line);
    text-underline-offset: 4px;
  }
}
@media (forced-colors: active) {
  .loaf-tab[aria-selected="true"] .loaf-tab__text { text-decoration: underline 2px; text-underline-offset: 4px; }
}
.loaf-switch__panels { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.loaf-switch__panel { grid-area: 1 / 1; min-width: 0; container: loaf / inline-size; }
.js .loaf-switch__panel:not(.is-current) { visibility: hidden; }
.loaf-switch__panel.is-entering { animation: bw-panel-in 160ms var(--ease-quart); }
@keyframes bw-panel-in { from { opacity: 0; } }
.loaf-switch__name { margin-bottom: var(--s-sm); }
html:not(.js) .loaf-switch__panels { display: block; }
html:not(.js) .loaf-switch__panel + .loaf-switch__panel { margin-top: var(--s-2xl); }

/* ---- Licence slip: an 8rem Label column, name and place, the number right-aligned.
   Rows stack below 1200px, where the split column cannot hold three tracks. ---- */
.licence { width: 100%; border-collapse: collapse; }
.licence th,
.licence td {
  padding: var(--row-pad) 0;
  border-bottom: var(--line-w) solid var(--rule);
  text-align: left;
  vertical-align: baseline;
  line-height: 1.3;
  font-weight: 400;
}
.licence tr:first-child > * { padding-top: 0; }
.licence tr:last-child > * { border-bottom: 0; padding-bottom: 0; }
.licence th {
  width: 8rem;
  padding-right: var(--s-md);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.licence__num {
  text-align: right;
  white-space: nowrap;
  padding-left: var(--s-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.licence__extra { display: block; }
@media (max-width: 1199.98px) {
  .licence,
  .licence tbody,
  .licence tr,
  .licence th,
  .licence td { display: block; width: auto; }
  .licence tr { padding: var(--row-pad) 0; border-bottom: var(--line-w) solid var(--rule); }
  .licence tr:first-child { padding-top: 0; }
  .licence tr:last-child { padding-bottom: 0; border-bottom: 0; }
  .licence th,
  .licence td { padding: 0; border: 0; }
  .licence tr:first-child > *,
  .licence tr:last-child > * { padding: 0; }
  .licence td { margin-top: var(--s-2xs); }
  .licence__num { text-align: left; padding-left: 0; }
}

/* ---- People block: flat square portraits, never tilted, no shadow. ---- */
.people__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
@media (min-width: 900px) {
  .people__grid { grid-template-columns: repeat(2, 10rem); gap: var(--s-xl); }
}
/* Each person stacks photo, name and role independently (no shared subgrid rows): .person
   used grid-template-rows: subgrid with grid-row: span 3, but .people__grid never declared
   an explicit grid-template-rows for it to inherit, so the shared row tracks under-sized and
   a wrapped two-line name could sit under the role text. A plain single-column grid per
   person guarantees role always clears name, at any line count or width. */
.people__grid > .person {
  display: grid;
  align-content: start;
}
.person__photo,
.person__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background-color: var(--raised);
}
.person__name { margin-top: var(--s-sm); font-size: var(--t-title); font-weight: 600; line-height: 1.25; }
/* Every name breaks first name over surname, so no pair leaves an empty subgrid line. */
.people__grid .person__name { width: min-content; }
.person__role { margin-top: var(--s-2xs); font-size: var(--t-fine); line-height: 1.5; color: var(--pencil-text); }
.founder { max-width: 44ch; }
.founder__sign { margin-top: var(--s-xs); }
.founder__flag { margin-top: var(--s-2xs); color: var(--pencil-text); }
.contact-rows { margin: 0; padding: 0; list-style: none; }
.contact-rows > li { padding-block: max(0px, (var(--tap) - 1lh) / 2); }

/* ---- Order desk ---- */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th,
.price-table td {
  padding: var(--row-pad) 0;
  border-bottom: var(--line-w) solid var(--rule);
  text-align: left;
  vertical-align: baseline;
  line-height: 1.3;
  font-weight: 400;
}
.price-table tr:first-child > * { padding-top: 0; }
.price-table .fig {
  text-align: right;
  white-space: nowrap;
  padding-left: var(--s-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.price-table__tier td { color: var(--ink-text); }
.order-slip__taxes { margin-top: var(--s-xs); }
.order-slip__pin {
  margin-top: var(--s-md);
  padding-top: var(--s-md);
  border-top: var(--line-w) solid var(--rule);
}
@media (min-width: 900px) {
  .order-slip__pin { margin-top: var(--s-lg); padding-top: var(--s-lg); }
}
.order-slip__notify { margin-top: var(--s-xl); }
.order-slip__order { margin-top: var(--s-2xl); }
.pin-group > * + *,
.notify-group > * + * { margin-top: var(--s-xs); }
.pin-group > .field-row { margin-top: var(--s-xs); }
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: var(--line-w) solid var(--rule);
}
.steps > li {
  position: relative;
  padding-block: var(--s-lg);
  padding-left: 2.75rem;
  border-bottom: var(--line-w) solid var(--rule);
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--s-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.share { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-md); }

/* ---- Product ledger row: an entry in a ledger, never a card. ---- */
.product-list { border-bottom: var(--line-w) solid var(--rule); }
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "facts facts"
    "fee fee"
    "buy buy";
  column-gap: var(--s-md);
  align-items: start;
  padding-block: var(--s-lg);
  border-top: var(--line-w) solid var(--rule);
}
.product-row__name { grid-area: name; font-size: var(--t-title); font-weight: 600; line-height: 1.25; }
.product-row__price { grid-area: price; justify-self: end; text-align: right; }
.product-row__name,
.product-row__price { align-self: baseline; }   /* a ledger entry: the name and its figure share a baseline */
.product-row__facts { grid-area: facts; margin-top: var(--s-xs); }
.product-row__keep { display: block; margin-top: var(--s-2xs); }   /* a storage line under the facts (Daily Bread) */
.product-row__fee { grid-area: fee; margin-top: var(--s-2xs); color: var(--pencil-text); }
.product-row__buy { grid-area: buy; margin-top: var(--s-lg); }
.product-row__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-md); }
.product-row__add { min-width: 18rem; }
.product-row__notes { margin-top: var(--s-xs); }
.product-row__notes > * + * { margin-top: var(--s-2xs); }
@media (max-width: 599.98px) {
  .product-row__controls > .product-row__add { flex: 1 0 100%; min-width: 0; }
}
/* Three tracks only from 1200px: below that the fixed price and buy tracks leave the name
   column too narrow to hold a word. The fee spans name and price so it stays one line. */
@media (min-width: 1200px) {
  .product-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 27.5rem;   /* buy: 136px stepper, 16px, 288px Add */
    grid-template-areas:
      "name price buy"
      "facts facts buy"
      "fee fee buy";
    column-gap: var(--s-lg);
  }
  /* One Fine line under the price: the 575px sentence needs more than the 62ch paragraph cap. */
  .product-row__fee { text-align: right; justify-self: end; margin-top: var(--s-xs); max-width: none; }
  .product-row__buy { margin-top: 0; }
  .product-row__controls { flex-wrap: nowrap; }
}
/* A row with its pack photographed: a small 4:5 print. Below 1200px it sits beside the name
   and price only, and the facts and fee lines run the full width under it, so the text keeps
   its measure and the Add button stays high on phones. From 1200px it spans the name, facts
   and fee lines. Whole Wheat holds an ink drawing (data-placeholder="photo") until its pack
   is photographed. */
.product-row--pic {
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  grid-template-areas:
    "pic name price"
    "facts facts facts"
    "fee fee fee"
    "buy buy buy";
}
.product-row--pic > .product-row__facts { margin-top: var(--s-sm); }
.product-row__pic { grid-area: pic; width: 4rem; align-self: start; --print-edge: 0.1875rem; }
.product-row__pic .print__frame { aspect-ratio: 4 / 5; }
@media (min-width: 600px) {
  .product-row--pic { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .product-row__pic { width: 4.5rem; }
}
@media (min-width: 1200px) {
  .product-row--pic {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 15rem) 27.5rem;
    grid-template-areas:
      "pic name price buy"
      "pic facts facts buy"
      "pic fee fee buy";
  }
  .product-row__pic { width: 6rem; }
  .product-row--pic > .product-row__facts { margin-top: var(--s-xs); }
}
/* Coming-soon rows: name, "Coming soon", a secondary Notify me. No price, photo or count. */
.soon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-md);
  align-items: center;
  padding-block: var(--s-lg);
  border-top: var(--line-w) solid var(--rule);
}
.soon-row__status { color: var(--pencil-text); }
.soon-row > .btn { grid-column: 2; grid-row: 1 / span 2; }
.soon-list { border-bottom: var(--line-w) solid var(--rule); }   /* closes the ledger, like .product-list */
.notify-slot { padding-block: var(--s-lg); border-top: var(--line-w) solid var(--rule); }
.notify-slot > * + * { margin-top: var(--s-xs); }

/* Stepper: three joined 48px cells, 1 to 20. */
.stepper {
  display: inline-grid;
  grid-template-columns: 1fr 2.5rem 1fr;
  width: 8.5rem;
  height: var(--btn-h);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--paper);
}
.stepper__btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: var(--paper);
  color: var(--ink-text);
  touch-action: manipulation;
  transition: background-color 160ms var(--ease-quart);
}
.stepper__btn:first-child { border-right: 1.5px solid var(--ink-text); border-radius: 1px 0 0 1px; }
.stepper__btn:last-child { border-left: 1.5px solid var(--ink-text); border-radius: 0 1px 1px 0; }
.stepper__btn svg { width: 1rem; height: 1rem; }
.stepper__btn svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.stepper__btn:disabled { color: var(--pencil-text); cursor: default; }
.stepper__count {
  display: grid;
  place-items: center;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .stepper__btn:not(:disabled):hover { background-color: var(--raised); }
}
.stepper__btn:not(:disabled):active { background-color: var(--raised); }

/* ---- Photo print: the only interface-adjacent object that tilts and casts a shadow.
   A thin Receipt White margin, like a real print, so a photo shot on grey paper still reads
   as a print on the grey page. ---- */
.print { margin: 0; }
.print__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--print-edge, 0.375rem) solid var(--receipt-white);
  background-color: var(--receipt-white);   /* a print stays a light object at night */
  color: var(--kitchen-ink);                /* ink drawings inside stay ink */
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, 1deg));
}
/* A print that keeps its photograph's own shape (story prints): the img's width and height
   attributes set the box, so nothing is cropped and nothing shifts. */
.print--natural .print__frame { aspect-ratio: auto; }
.print--natural .print__frame > picture > img,
.print--natural .print__frame > img { height: auto; }
.print__frame > img,
.print__frame > picture,
.print__frame > picture > img,
.print__frame > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A natural print's frame is the photograph plus its border, so the caption sits inside the
   border width: never wider than the picture it names. */
.print--natural .print__caption { margin-inline: var(--print-edge, 0.375rem); }
.print__caption {
  margin-top: var(--s-sm);
  max-width: none;
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
}
.tilt-l2 { --tilt: -2deg; }
.tilt-l15 { --tilt: -1.5deg; }
.tilt-l1 { --tilt: -1deg; }
.tilt-0 { --tilt: 0deg; }
.tilt-r1 { --tilt: 1deg; }
.tilt-r15 { --tilt: 1.5deg; }
.tilt-r2 { --tilt: 2deg; }

/* ---- Doodles: one 1.5px ink line, round caps, at most one Haldi wash. Inline SVG, so
   the ink turns to Chalk at night through currentColor. ---- */
.doodle { margin: 0; color: var(--ink-text); }
.doodle > svg,
.doodle > img { display: block; width: 100%; height: auto; }
.doodle svg :is(path, line, polyline, polygon, circle, ellipse, rect) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.doodle svg .wash { fill: var(--haldi); stroke: none; }
.doodle-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-lg);
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .doodle-strip { max-width: 48rem; gap: var(--s-xl); } }
.doodle-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-lg);
  align-items: start;
}
.credit { margin-top: var(--s-sm); }
.order-desk__doodle { max-width: 15rem; }
.site-foot__art .credit { margin-top: var(--s-sm); }

/* ---- Margin notes (Kalam): Hand Ink by day (lighter than Haldi Ink), bright Haldi at
   night, rotated -2 to -4 degrees. .note-words never sets its own colour, so it inherits
   this. ---- */
.note {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2xs);
  width: max-content;
  max-width: 100%;
  font-family: var(--font-hand);
  font-size: var(--t-hand);
  font-weight: 400;
  line-height: 1.2;
  color: var(--hand-ink);
  transform: rotate(var(--note-tilt, -3deg));
  transform-origin: 0 50%;
}
/* Exception: this .note is a price (process.html "pr-pack__note", "₹58 for 250 g"), not an
   annotation fact, so it keeps the stronger --accent-text rather than the lighter hand tone. */
.note.pr-pack__note { color: var(--accent-text); }
.note--ink { color: var(--ink-text); }
.note--tilt-a { --note-tilt: -2deg; }
.note--tilt-b { --note-tilt: -4deg; }
.note-words { display: block; }
.note-arrow { flex: none; overflow: visible; }
.note-arrow path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.note-arrow--left { position: absolute; top: 0.3em; right: calc(100% + var(--s-2xs)); }
.note--r4 .note-arrow--left { top: 1.25em; }
.note-arrow--down { align-self: flex-end; margin-top: 0.6em; }
@media (min-width: 900px) { .note-arrow--down { display: none; } }
@media (max-width: 899.98px) { .note-arrow--left { display: none; } }
/* "Worth knowing:" lead-in, read aloud as part of the sentence. */
.lead-in { font-family: var(--font-hand); font-size: var(--t-hand); line-height: 1.2; color: var(--hand-ink); }
.callout { background-color: var(--raised); border: var(--line-w) solid var(--rule); padding: var(--s-md); }
@media (min-width: 900px) { .callout { padding: var(--s-lg); } }

/* ---- Story prints: real photographs laid loose on the page, each at its own shape and tilt,
   with a Fine caption 12px below and, at most on two, a Kalam aside that repeats the caption.
   Phones: two columns, the wide print across both. 900 to 1199: three columns. From 1200px:
   five prints across twelve columns, each dropped at its own height. Never a card grid: no
   frames around the items, no equal heights, align-items start. ---- */
.prints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2xl) var(--s-lg);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prints > li { min-width: 0; }
/* Phones: prints 1 and 2 side by side (2 dropped), 3 is the wide one across both, then 4 and 5 (5 dropped). */
.prints > li:nth-child(2),
.prints > li:nth-child(5) { margin-top: var(--s-2xl); }
.prints > .prints__wide { grid-column: 1 / -1; width: 85%; }
.prints .print__caption { max-width: 32ch; }
.print__aside {
  margin-top: var(--s-2xs);
  max-width: none;
  font-family: var(--font-hand);
  font-size: var(--t-hand);
  font-weight: 400;
  line-height: 1.2;
  color: var(--hand-ink);
  transform: rotate(-3deg);
  transform-origin: 0 50%;
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .prints { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-xl); }
  .prints > li:nth-child(n) { margin-top: 0; }
  .prints > .prints__wide { grid-column: auto; width: auto; }
  .prints > li:nth-child(2) { margin-top: var(--s-3xl); }
  .prints > li:nth-child(3) { margin-top: var(--s-lg); }
  .prints > li:nth-child(5) { margin-top: var(--s-2xl); }
}
@media (min-width: 1200px) {
  .prints { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-xl); }
  .prints > li:nth-child(n) { margin-top: 0; }
  .prints > .prints__wide { width: auto; }
  .prints > li:nth-child(1) { grid-column: 1 / span 3; }
  .prints > li:nth-child(2) { grid-column: 4 / span 2; margin-top: var(--s-3xl); }
  .prints > li:nth-child(3) { grid-column: 6 / span 3; margin-top: var(--s-lg); }
  .prints > li:nth-child(4) { grid-column: 9 / span 2; margin-top: var(--s-4xl); }
  .prints > li:nth-child(5) { grid-column: 11 / span 2; margin-top: 2.5rem; }
}

/* ---- Pull quote: a founder's own line, in Lede, with a hanging open quote in Haldi Ink. ---- */
.pull { margin: 0; max-width: 44ch; }
.pull blockquote { margin: 0; }
.pull .lede { text-indent: -0.42em; }
.pull__mark { color: var(--accent-text); }
.pull__by { margin-top: var(--s-sm); color: var(--pencil-text); }

/* ---- Story paragraph: Statement type, split by hand into clauses. ---- */
.story { font-size: var(--t-statement); font-weight: 300; line-height: 1.25; letter-spacing: -0.015em; max-width: 32ch; }
.story-doodle { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; color: var(--ink-text); }
.story-doodle :is(path, rect, line) { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.story-doodle .wash { fill: var(--haldi); stroke: none; }

/* ---- Manifesto: one sentence per line in Display. ---- */
.manifesto {
  --m-size: var(--t-display);
  font-size: var(--m-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: none;
}
.m-line { display: block; position: relative; }
.m-fill { display: none; user-select: none; -webkit-user-select: none; }

/* ---- Floating ingredients: CSS background spans on one sprite, decorative, aria-hidden.
   The sprite is requested only under lite and full; under none, lean and no JS the rule
   never matches, so it is never downloaded. Label order: wheat, water, oil, sugar, yeast, salt. ---- */
.ingredient {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 600% 100%;
  filter: var(--shadow-held);
}
html:is([data-motion="lite"], [data-motion="full"]) .ingredient { background-image: url(img/ingredients.svg); }
/* At night the sprite's ink is Chalk (a second file, fetched only when the night rule matches). */
html[data-theme="dark"]:is([data-motion="lite"], [data-motion="full"]) .ingredient { background-image: url(img/ingredients-night.svg); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):is([data-motion="lite"], [data-motion="full"]) .ingredient { background-image: url(img/ingredients-night.svg); }
}
.ingredient--wheat { background-position: 0% 0; --dy: 36px; --rx: 10deg; --rz: -8deg; }
.ingredient--water { background-position: 20% 0; --dy: 28px; --rx: -8deg; --rz: 6deg; }
.ingredient--oil { background-position: 40% 0; --dy: 44px; --rx: 12deg; --rz: 10deg; }
.ingredient--sugar { background-position: 60% 0; --dy: 32px; --rx: -10deg; --rz: -6deg; }
.ingredient--yeast { background-position: 80% 0; --dy: 40px; --rx: 8deg; --rz: 8deg; }
.ingredient--salt { background-position: 100% 0; --dy: 26px; --rx: -12deg; --rz: -10deg; }
/* Phones: a still row of three, 40px each, 16px apart. */
.ingredient-row { display: flex; gap: var(--s-md); margin: 0; padding: 0; list-style: none; }
.ingredient-row > .ingredient { width: 2.5rem; height: 2.5rem; }
html:not([data-motion="lite"]):not([data-motion="full"]) .ingredient-row { display: none; }
@media (min-width: 900px) { .ingredient-row { display: none; } }
/* From 900px: absolutely placed inside the margin column, staggered, never over text. */
.float-field { position: relative; align-self: stretch; min-height: 12rem; }
@media (max-width: 899.98px) { .float-field { display: none; } }
.float-field > .ingredient { position: absolute; }
.float-field > .ingredient:nth-child(1) { top: 6%; left: 18%; }
.float-field > .ingredient:nth-child(2) { top: 40%; left: 54%; }
.float-field > .ingredient:nth-child(3) { top: 72%; left: 10%; }

/* ---- Reading line: hidden unless the full tier turns it on (see the Reading line rule in section 10). ---- */
.read-line { display: none; }

/* ---- Footer ---- */
.site-foot {
  padding-top: calc(var(--section) / 2);
  padding-bottom: calc(var(--s-4xl) + env(safe-area-inset-bottom));   /* nothing under the chat aside */
  font-size: var(--t-fine);
  line-height: 1.5;
}
.site-foot__art { margin-bottom: var(--s-2xl); }
.foot-grid { display: grid; gap: var(--s-2xl); align-items: start; }
.facts { margin: var(--s-lg) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.site-foot .facts > li + li { margin-top: 0.75rem; }
/* Three groups (markup is shared by every page): company 1-6, contact 7-9, grievance and delivery 10-11. 12px inside, 32px between. */
.site-foot .facts > li:nth-child(7), .site-foot .facts > li:nth-child(10) { margin-top: var(--s-xl); }
.foot-links { display: grid; gap: 0; }
.foot-group { border-top: var(--line-w) solid var(--rule); }
.foot-group:last-child { border-bottom: var(--line-w) solid var(--rule); }
.foot-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.foot-group > summary::-webkit-details-marker { display: none; }
.foot-group > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}
.foot-group[open] > summary::after { transform: translateY(25%) rotate(225deg); }
.foot-group ul { margin: 0; padding: 0 0 var(--s-sm); list-style: none; }
.foot-group li { display: flex; align-items: center; min-height: var(--tap); }
.foot-group .link { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.01em; }
.site-foot__legal { margin-top: var(--s-2xl); color: var(--pencil-text); }
@media (min-width: 600px) {
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-2xl); row-gap: var(--s-xl); }
  .foot-group,
  .foot-group:last-child { border: 0; }
  .foot-group > summary { min-height: var(--tap); cursor: default; }
  .foot-group > summary::after { display: none; }
  .foot-group ul { padding: 0; }
}
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .foot-company { grid-column: 1 / span 5; }
  .foot-links { grid-column: 7 / span 6; }
}

/* ---- Chat aside: fixed bottom right inside the safe area; hidden by attribute. ---- */
.chat {
  position: fixed;
  right: calc(var(--s-md) + env(safe-area-inset-right));
  bottom: calc(var(--s-md) + env(safe-area-inset-bottom));
  z-index: var(--z-chat);
}
.js .chat[data-chat-autohide]:not(.is-ready) { display: none; }
/* A round 52px button with a chat icon at every width (since 2026-10-23: the 161px "WhatsApp us"
   pill covered words and table figures at the right of the reading column at 1280, 1366, 1440
   and 1920). The link text stays in the DOM, moved off-screen, so it is still the name. */
@media screen {
  .chat .btn {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
  }
  .chat .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a9.5 9.5 0 0 0-8.2 14.3L2.5 21.5l4.8-1.3A9.5 9.5 0 1 0 12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a9.5 9.5 0 0 0-8.2 14.3L2.5 21.5l4.8-1.3A9.5 9.5 0 1 0 12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* From 600px the round button sits in the middle of the page's right margin (the gutter), so it
   stays off the reading column wherever the gutter is wider than the button (from 1200px). */
@media (min-width: 600px) {
  .chat { right: calc(max(var(--s-xs), (var(--gutter) + var(--art-gutter) - 52px) / 2) + env(safe-area-inset-right)); }
}

/* ======================================================================
   9. Page sections (home, /process, /products)
   ====================================================================== */
/* Hero (#top). Phones and tablets: one column in the order h1, photo, caption, lede, button,
   Fine lines, pincode link, label. From 1200px: claim left (7fr), evidence right (5fr). */
.hero { padding-top: var(--page-top); padding-bottom: calc(var(--section) / 2); }
.hero__grid { display: flex; flex-direction: column; align-items: stretch; }
.hero__claim,
.hero__evidence,
.hero__actions { display: contents; }
.hero__title { order: 1; }
.hero__print { order: 2; margin-top: var(--s-lg); }
.hero__lede { order: 3; margin-top: var(--s-lg); }
.hero__order { order: 4; margin-top: var(--s-xl); }
.hero__fine { order: 5; margin-top: var(--s-xs); }
.hero__pin { order: 6; margin-top: var(--s-xs); align-self: flex-start; }
.hero__label { order: 7; margin-top: var(--s-2xl); }
.hero__fine > * + * { margin-top: 0; }
@media (min-width: 600px) {
  .hero__order { align-self: flex-start; }
  .hero__print { width: 100%; max-width: 35rem; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero__label .label-slip { max-width: 35rem; }
}
@media (min-width: 1200px) {
  .hero { padding-top: var(--s-3xl); }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--gutter);
    align-items: start;
  }
  .hero__claim,
  .hero__evidence { display: block; }
  .hero__actions { display: flex; align-items: center; gap: var(--s-lg); margin-top: var(--s-2xl); }
  .hero__title { font-size: var(--t-display); max-width: none; }
  .hero__order,
  .hero__pin { margin-top: 0; }
  .hero__fine > p { max-width: none; }
  /* 27rem keeps the photo a print laid on the page and leaves room for the loaf tabs, so the
     six rows and the Total stay above the fold at 1440 x 900. */
  .hero__print { max-width: 27rem; margin-top: 0; --tilt: 1.5deg; }
  .hero__print .print__frame { aspect-ratio: 2 / 1; }
  .hero__label { margin-top: var(--s-lg); }
  /* 22.5rem holds "Cold pressed sunflower oil" on one line (Daily Bread shows first). */
  .hero__label { --slip-w: 22.5rem; }
  /* The margin notes need about 7rem beside the slip; below that (1200 to about 1365px) they
     step aside rather than wrap word by word. They only repeat printed figures. */
  @container loaf (max-width: 30.99rem) {
    .hero .label-slip > .note { display: none; }
  }
}
@media (min-width: 1200px) and (min-height: 700px) {
  .hero__claim { position: sticky; top: calc(var(--nav-h) + var(--s-lg)); }
}

/* Label block under the slip: additives line then the link. */
.label-after { margin-top: var(--s-lg); }
.label-after > * + * { margin-top: var(--s-md); }

/* Turn ours over (#turn, home; optional on /process block 3): the words left, the pack you
   can turn in the right column from 900px; on phones the pack follows the words. */
.pack-section .pack3d { margin-inline: 0; }

/* How it started (#began, home): the story in the reading column and the pull quote beside it
   (a .split: the quote is the aside, its first line level with the first paragraph), then the
   prints laid loose across the full width. */
@media (min-width: 900px) {
  .founders-section .pull.split__aside { margin-top: calc(var(--t-headline) * 1.1 + var(--space-h)); }
}
.founders__prints { margin-top: var(--s-3xl); }
@media (min-width: 1200px) { .founders__prints { margin-top: var(--s-4xl); } }

/* /products header: h1, lede, and the delivery line (dated with JavaScript). */
.products-head__when { margin-top: var(--s-md); }

/* Story (#story): main column with the margin column for three ingredients. */
.story-link { margin-top: var(--s-2xl); }
.story-section .ingredient-row { margin-top: var(--s-lg); }

/* Manifesto (#manifesto): three ingredients to the right of lines 1 and 2 from 900px. */
.manifesto-box { position: relative; }
.manifesto-section .ingredient-row { margin-top: var(--s-lg); }
.manifesto-float {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: calc(2 * var(--t-display));
  min-height: 0;
}

/* ======================================================================
   10. Motion (Step 4 section 6). Tiers live on html[data-motion]:
   none (reduced motion), lean (slow or Save-Data), lite (phones), full
   (fine pointer, hover, 900px and up). No JS means no tier: the finished page.
   ====================================================================== */
/* Interaction 1 and 2 under reduced motion: state changes stay, movement goes. */

/* Interaction 3: a margin note writes itself in, once. */
.note-words { clip-path: inset(-25% -10% -25% -10%); transition: clip-path 700ms var(--ease-expo); }
.note.is-waiting .note-words { clip-path: inset(-25% 110% -25% -10%); transition: none; }
.note-arrow path { stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--ease-expo) 500ms; }
.note.is-waiting .note-arrow path { stroke-dashoffset: 1.5; transition: none; }

/* Story prints: a print below the fold waits a little lifted and turned, then is put down on
   the page once (transform only, 700ms). It is never hidden, so a reader who jumps past it
   still sees the photograph. Only the photograph moves: its caption and aside never wait.
   The hero print and product prints never move. */
.print[data-once] > .print__frame { transition: transform 700ms var(--ease-expo); }
.print[data-once].is-waiting > .print__frame {
  transform: translateY(1.5rem) rotate(calc(var(--tilt, 1deg) + 3deg));
  transition: none;
}

/* Story clauses: a clause below the fold rests in Pencil Grey (never lighter) and inks once. */
.clause { transition: color 700ms var(--ease-expo); }
.clause.is-waiting { color: var(--pencil-text); transition: none; }

/* Reading line (the only one, every page that carries .read-line): a quiet 1px Ruled Line,
   7.5rem tall, mid-height at the right edge; its fill is Haldi Ink (bright Haldi at night)
   and moves 1:1 with scroll, no JS. Full motion and 900px up only. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) {
    html[data-motion="full"] .read-line {
      display: block;
      position: fixed;
      top: 50%;
      right: calc(0.9rem + env(safe-area-inset-right));
      z-index: var(--z-sticky);
      width: 1px;
      height: 7.5rem;
      margin-top: -3.75rem;
      background-color: var(--rule);
      pointer-events: none;
    }
    html[data-motion="full"] .read-line::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--accent-text);
      transform-origin: top;
      transform: scaleY(0);
      animation: bw-read-line linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes bw-read-line { to { transform: scaleY(1); } }

/* Backups: a visitor who turns on reduced motion after load, the none tier, and print
   all see the finished, solid page. */
@media print {
  .read-line { animation: none !important; }
  .read-line { display: none !important; }
  .is-waiting .note-words { clip-path: none !important; animation: none !important; }
  .is-waiting .note-arrow path { stroke-dashoffset: 0 !important; }
  .clause.is-waiting { color: inherit !important; }
  .loaf-switch__panel.is-entering { animation: none !important; }
  .loaf-tab__text { transition: none !important; }
  .print.is-waiting > .print__frame { transform: rotate(var(--tilt, 1deg)) !important; }
}
html[data-motion="none"] .loaf-switch__panel.is-entering { animation: none !important; }
html[data-motion="none"] .loaf-tab__text { transition: none !important; }
html[data-motion="none"] .print.is-waiting > .print__frame { transform: rotate(var(--tilt, 1deg)) !important; }
html[data-motion="none"] .read-line { animation: none !important; }
html[data-motion="none"] .is-waiting .note-words { clip-path: none !important; animation: none !important; }
html[data-motion="none"] .is-waiting .note-arrow path { stroke-dashoffset: 0 !important; }
html[data-motion="none"] .clause.is-waiting { color: inherit !important; }

/* ---- Hover and scroll touches (fine pointer, mouse only; none of them carries a fact) ---- */

/* Ingredient label rows: the link highlighter's band (same --swipe, same lower 55%) wipes in
   left to right across the whole row, 200ms in, 160ms out. The band lives on the row, so one
   wipe crosses both cells. Rows are not focusable, so there is no keyboard twin. Receipt
   tables only: price, nutrition and ledger tables keep their rows still. */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="none"]) .receipt__table :is(tbody, tfoot) > tr {
    background-image: linear-gradient(var(--swipe), var(--swipe));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 55%;
    transition: background-size 160ms var(--ease-quart);
  }
  html:not([data-motion="none"]) .receipt__table :is(tbody, tfoot) > tr:hover {
    background-size: 100% 55%;
    transition-duration: 200ms;
  }
}

/* Photo prints with a tilt straighten under the pointer and tighten their shadow, 280ms.
   The turn uses the `rotate` property (undoing --tilt) so the 700ms entrance on
   `transform` is left alone; nothing scales or moves, so nothing shifts. Prints only:
   buttons, cards, cut-outs and portraits have no .print frame. */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="none"]) .print:is(.tilt-l2, .tilt-l15, .tilt-l1, .tilt-r1, .tilt-r15, .tilt-r2) > .print__frame {
    transition: transform 700ms var(--ease-expo), rotate 280ms var(--ease-quart), box-shadow 280ms var(--ease-quart);
  }
  html:not([data-motion="none"]) .print:is(.tilt-l2, .tilt-l15, .tilt-l1, .tilt-r1, .tilt-r15, .tilt-r2):not(.is-waiting):hover > .print__frame {
    rotate: calc(-1 * var(--tilt, 0deg));
    box-shadow: var(--shadow-print-set);
  }
}

/* The top nav's Ruled Line is absent at the top of the page and fades in over the first 48px
   of scroll, then stays. Without scroll timelines, and in the none and lean tiers, the
   border is simply always there. */
@supports (animation-timeline: scroll()) {
  html:is([data-motion="lite"], [data-motion="full"]) .site-head {
    border-bottom-color: transparent;   /* same 1px, so the nav keeps its height */
  }
  html:is([data-motion="lite"], [data-motion="full"]) .site-head::after {
    content: "";
    position: absolute;
    inset: auto 0 calc(-1 * var(--line-w)) 0;
    height: var(--line-w);
    background-color: var(--rule);
    opacity: 0;
    pointer-events: none;
    animation: bw-nav-rule linear both;
    animation-timeline: scroll(root);
    animation-range: 0 48px;
  }
}
@keyframes bw-nav-rule { to { opacity: 1; } }

/* ======================================================================
   11. Restyles: js/utils.js toasts and cards, and Lenis (vendor/lenis.css)
   ====================================================================== */
.bw-toast,
.bw-card {
  position: fixed;
  z-index: var(--z-toast);
  top: calc(var(--nav-h) + var(--s-sm));
  left: var(--gutter);
  width: min(26rem, 100% - 2 * var(--gutter));
  background-color: var(--raised);
  color: var(--ink-text);
  border: var(--line-w) solid var(--rule);
  border-radius: var(--cut);
  font-family: var(--font-print);
  font-size: var(--t-body);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 200ms var(--ease-quart), transform 200ms var(--ease-quart);
}
.bw-toast { padding: var(--s-sm) var(--s-md); pointer-events: none; }
.bw-toast.show,
.bw-card.show { opacity: 1; transform: none; }
.bw-card { padding: var(--s-md) var(--s-2xl) var(--s-md) var(--s-md); }
.bw-card-close {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-text);
  font-size: 1.5rem;
  line-height: 1;
}
.bw-card-headline { display: block; font-size: var(--t-title); font-weight: 600; line-height: 1.25; }
.bw-card-body { margin-top: var(--s-xs); font-size: var(--t-body); }
.bw-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-md); }
.bw-card-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-h);
  padding: 0.8125rem var(--s-lg);
  border: 1.5px solid var(--ink-text);
  border-radius: var(--cut);
  background-color: var(--paper);
  color: var(--ink-text);
  font-size: var(--t-button);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  touch-action: manipulation;
}
.bw-card-error { border-color: var(--error); }

/* Lenis 1.3.26 rules (copied from its lenis.css; inert until Lenis runs). */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ======================================================================
   12. Print: finished and solid, no chrome, no graph paper.
   ====================================================================== */
@media print {
  body { background-image: none; }
  .site-head { position: static; }
  .chat, .nav__controls, .nav__links, .nav__order, .skip, .menu-sheet, .ingredient, .ingredient-row, .float-field { display: none !important; }
  .print__frame { box-shadow: none; transform: none; }
  /* Both receipts print, one after the other, each under its name. */
  .loaf-switch__tabs, .pack3d__buttons { display: none !important; }
  .loaf-switch__panels { display: block; }
  .js .loaf-switch__panel:not(.is-current) { visibility: visible; margin-top: var(--s-2xl); }
  .js .loaf-switch__name.if-nojs { display: block !important; }
}

/* Footer "say hello": handwritten mailto under the footer wordmark. Lives here because
   /products and /process load neither home.css nor v3-port.css, so it showed as a plain
   link touching the wordmark's tap area there. */
.foot-hello { margin-top: var(--s-sm); }
.foot-hello .link { font-family: var(--font-hand); font-size: var(--t-hand); line-height: 1.2; color: var(--accent-text); }
/* Haldi Ink on the Haldi band was 3.16:1; on the band it turns Kitchen Ink (Chalk at night) like every link. */
@media (hover: hover) and (pointer: fine) { .foot-hello .link:hover { color: var(--ink-text); } }
.foot-hello .link:focus-visible { color: var(--ink-text); }

/* ---- Handwriting colour override (2026-10-11 owner review): .mark is defined per page
   (home.css, process.css, products.css, v3-port.css all redeclare it with
   color: var(--accent-text)) and .ink-mark__hand (doodles.css, the ingredient-name caption
   under an ink drawing) does the same; neither file is this agent's to edit. Same
   specificity trick as the phone lockout below (two type selectors beat a page's plain
   class rule regardless of load order, no !important needed) repoints both at the lighter
   --hand-ink instead. Every instance of .mark across the three pages is a receipt-style
   fact (a percentage, a price, a weight), never a button, so no exception is needed here
   the way .pr-pack__note needed one above. .foot-hello .link (v3-port.css) is excluded on
   purpose: it is a mailto link, not a margin note, and links stay at --accent-text. ---- */
html body .mark,
html body .ink-mark__hand { color: var(--hand-ink); }

/* ---- Phone marginalia lockout: below 600px, no floating cut-out (.float) and no handwritten
   note (.mark) shows anywhere, even one a page opts in for phones via [data-phone] (home.css,
   products.css, process.css, v3-port.css). Inline ink clips (.ink-clip, [data-ink]), the hero
   object and hero notes use other classes and are untouched. Two type selectors (html body)
   push this past every page's own .mark[data-phone]/.float[data-phone] rule on specificity
   alone, so it needs no !important; v3.css loads before every page's own stylesheet. ---- */
@media (max-width: 899.98px) {
  html body .mark,
  html body .mark[data-phone],
  html body .float,
  html body .float[data-phone] { display: none; }
}

/* ======================================================================
   13. Margin utilities: last, so they win over component margin resets.
   ====================================================================== */
.mt-0 { margin-top: 0; }
.mt-2xs { margin-top: var(--s-2xs); }
.mt-xs { margin-top: var(--s-xs); }
.mt-sm { margin-top: var(--s-sm); }
.mt-md { margin-top: var(--s-md); }
.mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }
.mt-2xl { margin-top: var(--s-2xl); }
.mt-3xl { margin-top: var(--s-3xl); }
.mt-h { margin-top: var(--space-h); }
@media (max-width: 599.98px) {
  .loaf-switch__tabs { flex-wrap: wrap; gap: var(--s-xs) var(--s-md); }
  .loaf-tab { flex: 0 0 auto; }
}

/* A short link in a contact row ("call") still gets a 44px-wide hit area on touch and small screens. */
@media (pointer: coarse), (max-width: 899.98px) {
  .contact-rows .link { min-width: var(--tap); justify-content: center; }
}

/* Abbreviations in ledgers and the footer carry their expansion as a title; the dotted underline
   browsers add would read as a link in the Ledger, so it is off (prose spells them out). */
abbr[title] { text-decoration: none; cursor: help; }