/*
 * /process, "Our bread, line by line": page-only layout. The whole visual system is v3.css;
 * this file only arranges its components for this page (classes prefixed pr-).
 * House rules: OKLCH tokens from v3.css only (no new colours), no shadows except the print and
 * held-object shadows the system defines, hover only inside (hover: hover) and (pointer: fine),
 * nothing animates that v3.css does not already allow, reduced motion kept.
 */

/* The one Kalam note on the first screen (the price beside the pack) uses the same Kalam file
   under a block-display face, so it is never painted in a fallback that later moves (no layout
   shift when the font arrives). Same URL as v3.css, so it is fetched once. */
@font-face {
  font-family: "Kalam Held";
  src: url(fonts/v3-kalam-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --pr-pack-w: clamp(11rem, 19vw, 18rem);   /* the pack standing beside the page head */
  --pr-fig: 4rem;                            /* the two figure columns in the numbers ledger */
  /* An entry's ruled line, its 12px padding, its date line and the 12px gap to the words. */
  --pr-first-line: calc(var(--line-w) + var(--s-sm) + var(--t-label) * 1.35 + var(--s-sm));
}
@media (min-width: 600px) { :root { --pr-fig: 6.5rem; } }

/* ======================================================================
   1 + 2. Page head: title, brief and the loaf in numbers. From 900px the
   real Daily Bread pack stands in a narrow right column beside the words;
   on phones the head is words and figures only, so two ledger rows sit
   inside the first screen.
   ====================================================================== */
@media (min-width: 900px) {
  .pr-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pr-pack-w);
    column-gap: var(--gutter);
    align-items: start;
  }
}
.pr-numbers { max-width: 44rem; }

/* The loaf in numbers: one table, four columns (what, where to check, Daily Bread,
   Quinoa Bread). Each row is a small grid so the three figure columns stay aligned at
   every width: from 600px the label sits on the first line beside its figures and the "Check:"
   line runs under it; on phones the label takes the first line, the figures the second and
   the "Check:" line the third, full width.
   The role attributes keep it a table after the display change. */
.pr-num,
.pr-num > thead,
.pr-num > tbody { display: block; width: 100%; }
.pr-num tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pr-fig) var(--pr-fig);
  grid-template-areas:
    "what what what"
    ".    db   qb"
    "src  src  src";
  column-gap: var(--s-xs);
  align-items: baseline;
  padding-block: var(--row-pad);
  border-bottom: var(--line-w) solid var(--rule);
}
.pr-num > tbody > tr:last-child { border-bottom: 0; padding-bottom: 0; }
.pr-num > thead > tr {
  grid-template-areas: "what db qb";
  align-items: end;
  padding-top: 0;
  padding-bottom: var(--s-sm);
}
.pr-num th,
.pr-num td { padding: 0; border: 0; text-align: left; font-weight: 400; line-height: 1.3; }
.pr-num th[scope="row"] { grid-area: what; text-wrap: pretty; }
.pr-num .pr-num__src {
  grid-area: src;
  margin-top: var(--s-2xs);
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--pencil-text);
}
.pr-num .pr-num__head,
.pr-num .pr-num__fig { text-align: right; }
.pr-num .pr-num__head:nth-child(3),
.pr-num .pr-num__fig:nth-of-type(2) { grid-area: db; }
.pr-num .pr-num__head:nth-child(4),
.pr-num .pr-num__fig:nth-of-type(3) { grid-area: qb; }
.pr-num .pr-num__head {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.pr-num .pr-num__fig {
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (min-width: 600px) {
  .pr-num tr {
    grid-template-areas:
      "what db qb"
      "src  .  .";
    column-gap: var(--s-md);
  }
  .pr-num .pr-num__fig { white-space: nowrap; }
}

/* Phone: the three figure columns were squeezed into the right third of the row (--pr-fig was
   4rem each) and lost the header row's loaf names above them, so a value like "On the pack"
   wrapped to three lines and read misaligned from its label. Below 600px the figures take the
   full row width in three equal columns, left-aligned, each carrying its own loaf name as a
   small caption (the .label kicker treatment) since the thead is redundant once every cell
   names its loaf. */
@media (max-width: 599.98px) {
  /* The header row stays in the table for screen readers (real column headers, "Daily Bread" and
     "Quinoa Bread"), hidden from view; each cell shows its loaf name as a caption instead. */
  .pr-num > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .pr-num tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "what what"
      "db   qb"
      "src  src";
    align-items: start;
    row-gap: var(--s-sm);
  }
  /* The loaf-name caption sits in the cell's own padding-top (not in normal flow) so it
     never adds to the value's line count -- a stacked ::before line would push even a
     one-line value like "6" over the two-line-height ceiling once a two-line caption
     ("Quinoa Bread") or a two-line value ("On the pack") was involved. */
  .pr-num .pr-num__fig {
    position: relative;
    padding-top: 2.75rem;
    text-align: left;
  }
  .pr-num .pr-num__fig[data-loaf]::before {
    content: attr(data-loaf);
    content: attr(data-loaf) / "";   /* seen, not read twice: the column header already names the loaf */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: var(--t-label);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: var(--pencil-text);
  }
}

/* The pack, standing: a cut-out photograph is a held object, so it may tilt and cast the
   held-object shadow (DESIGN.md, Elevation). It never animates. */
.pr-pack { position: relative; margin: 0; padding-top: var(--s-xs); }
.pr-pack__img {
  display: block;
  width: calc(100% - 1rem);
  max-width: 24rem;   /* NEW: stop the cut-out pack rendering oversized on a wide .pr-pack column (was up to 1321px CSS-wide at 1920, the worst slot in the audit) */
  height: auto;
  filter: var(--shadow-held);
  transform: rotate(2deg);
  transform-origin: 50% 85%;
}
.pr-pack__cap { margin-top: var(--s-lg); max-width: 22ch; }
/* A price written in the margin beside the pack (it repeats the ₹58 printed in the ledger).
   A fixed box in em of the hand size, anchored on both edges, with the arrow against its
   right edge, so the Kalam swap moves nothing. */
.pr-pack__note {
  position: absolute;
  top: 70%;
  right: calc(100% + 3.25rem);
  width: 6.6em;
  --note-tilt: -4deg;
  transform-origin: 100% 50%;
}
.pr-pack__note .note-words { white-space: nowrap; font-family: "Kalam Held", var(--font-hand); }
.pr-arrow-right { position: absolute; top: 0.2em; left: calc(100% + 0.25rem); }

/* ======================================================================
   3. What goes in (#label): the loaf switch, and beside it the Daily Bread
   pack's own labels, photographed, their tops level with the receipt's so
   a parent can match them row by row. The photographs follow the chosen
   tab: a Whole Wheat pick shows the honest drawing, so photo and receipt
   always agree. Both photo groups share one grid cell, so a swap never
   moves the page.
   ====================================================================== */
.pr-label .pr-label__photos { display: grid; align-items: start; margin-top: var(--s-2xl); }
.pr-label__photos > .pr-lp { grid-area: 1 / 1; min-width: 0; }
.pr-lp--db {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-lg);
  align-items: start;
}
.pr-lp__panel { grid-column: 1 / span 7; grid-row: 1; }
.pr-lp__sticker { grid-column: 8 / span 5; grid-row: 1; margin-top: var(--s-2xl); }
.pr-lp--ww { max-width: 22rem; }
.js .pr-lp--ww { visibility: hidden; }
.js .pr-label:has(#ls-panel-ww.is-current) .pr-lp--db { visibility: hidden; }
.js .pr-label:has(#ls-panel-ww.is-current) .pr-lp--ww { visibility: visible; }
/* The same 160ms fade the receipt uses, only on a swap (never on load). */
.pr-label:has(#ls-panel-ww.is-entering) .pr-lp--ww,
.pr-label:has(#ls-panel-db.is-entering) .pr-lp--db { animation: bw-panel-in 160ms var(--ease-quart); }
html[data-motion="none"] .pr-label .pr-lp { animation: none !important; }
/* Without JavaScript both receipts stack, so both photo groups show, one after the other. */
html:not(.js) .pr-label .pr-label__photos { display: block; }
html:not(.js) .pr-lp--ww { margin-top: var(--s-2xl); }
@media (min-width: 900px) {
  /* Tops level with the receipt: the tab row (44px) and its 8px gap. The label print and the
     sticker print sit side by side, the sticker dropped, each capped at a size its file holds. */
  .pr-label .pr-label__photos { margin-top: calc(var(--tap) + var(--s-xs)); }
  .pr-lp--db { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); column-gap: var(--s-xl); }
  .pr-lp__panel { grid-column: 1; max-width: 20rem; }
  .pr-lp__sticker { grid-column: 2; max-width: 12rem; margin-top: 10rem; }
}
@media (min-width: 1200px) {
  /* The left track holds exactly the slip and its notes (the two-line jaggery note included),
     so the photographed label sits close beside the typed one instead of across a wide gap. */
  .pr-label__body.split { grid-template-columns: minmax(0, 39rem) minmax(0, 1fr); }
  .pr-lp--db { max-width: 34rem; }   /* 5fr and 3fr of it: 20rem and 12rem at most */
  .pr-lp__sticker { margin-top: 14rem; }
}

/* 600 to 899px: keep the receipt and the portraits at a reading size, as the home hero caps
   its slip. The shared people grid would otherwise stretch each portrait to about 330px. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .pr-label .label-slip { max-width: 35rem; }
  .pr-label .pr-label__photos { max-width: 35rem; }
  /* Story photographs stay print-sized on a tablet, not poster-sized. */
  .pr-entry__art { max-width: 32rem; }
  /* The train loaf's words and ours already fit side by side here. */
  .pr-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-xl); }
  .pr-compare__photo { grid-column: 1 / -1; }
}
/* 900 to about 990px: the shared portrait grid is two fixed 10rem tracks, wider than the 5/12
   column there; let the tracks shrink so the portraits stay inside their column. */
@media (min-width: 900px) {
}

/* The receipt beside its margin notes (900px and up): the 22.5rem slip the home hero uses
   ("Cold pressed sunflower oil" holds one line). Where the panel leaves less than about 8rem
   beside it, the notes step aside, as in the hero; they only repeat printed facts, which the
   line under the slip prints in words. */
@media (min-width: 900px) {
  .pr-label { --slip-w: 22.5rem; }
  @container loaf (max-width: 32.99rem) {
    .pr-label .label-slip > .note { display: none; }
  }
}

/* ======================================================================
   4. What we left out (#left-out): plain ruled rows in ink with the toast
   drawing and the maker credit beside them; then the keeping lines with a
   note in the margin; then the train loaf's label, photographed, and its
   words beside ours. No red, no crosses, no strike-throughs: Pencil Grey
   for theirs, ink for ours.
   ====================================================================== */
.pr-rows { padding: 0; list-style: none; border-top: var(--line-w) solid var(--rule); }
.pr-rows > li {
  padding-block: var(--row-pad);
  border-bottom: var(--line-w) solid var(--rule);
  line-height: 1.3;
}
.pr-leftout .pr-leftout__art { margin-top: var(--s-2xl); }
.pr-doodle { max-width: 15rem; }
.pr-leftout .credit { max-width: 30ch; }
.pr-keep { margin-top: var(--s-2xl); }
.pr-keep__margin { display: none; }
@media (min-width: 900px) {
  .pr-leftout .pr-leftout__art { margin-top: calc(var(--t-headline) * 1.1 + var(--space-h)); }
  .pr-keep__margin { display: block; }
  /* The note meets the first keeping line, its arrow pointing back at "Bread does that." */
  .pr-keep__note { margin-left: 3rem; margin-top: 0.125rem; }
}

.pr-train { margin-top: var(--s-4xl); }
@media (min-width: 1200px) { .pr-train { margin-top: var(--s-5xl); } }
.pr-train > p { max-width: 62ch; }

.pr-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2xl);
  align-items: start;
  margin-top: var(--s-2xl);
}
.pr-compare__photo { max-width: 30rem; }
.pr-compare__photo .print__caption { max-width: 44ch; }
@media (min-width: 900px) {
  .pr-compare {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gutter);
  }
  .pr-compare__photo { grid-column: 1 / -1; }
}
/* 1200px and up: the photograph, its words and ours in one row, left to right. */
@media (min-width: 1200px) {
  .pr-compare {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    column-gap: var(--s-2xl);
    margin-top: var(--s-3xl);
  }
  .pr-compare__photo { grid-column: auto; max-width: 30rem; }
}
.pr-compare__head { margin-bottom: var(--s-sm); }
.pr-compare__col--theirs .pr-compare__head { color: var(--pencil-text); }
.pr-list { padding: 0; list-style: none; border-top: var(--line-w) solid var(--rule); }
.pr-list > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  padding-block: var(--row-pad);
  border-bottom: var(--line-w) solid var(--rule);
  line-height: 1.3;
}
.pr-list__fig {
  flex: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.pr-list--theirs { color: var(--pencil-text); }
.pr-list--ours > li:nth-last-child(2) { border-bottom-color: var(--ink-text); }
.pr-list__total { font-weight: 600; border-bottom: 0 !important; }
.pr-list__total .pr-list__fig { font-weight: 600; }

/* ======================================================================
   5. Check it yourself (#check): the licence slip, the nutrition ledger
   for both loaves, and the pack's back label photographed beside them.
   ====================================================================== */
.pr-nut thead th {
  padding-top: 0;
  padding-bottom: var(--s-sm);
  border-bottom: var(--line-w) solid var(--rule) !important;
  vertical-align: bottom;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.pr-nut thead th.fig { text-align: right; white-space: normal; }
.pr-nut .pr-nut__none { font-size: var(--t-fine); font-weight: 400; color: var(--pencil-text); }
.pr-nut td.fig { width: 1%; }
.pr-nutri .slip { max-width: 44rem; }
/* Phones: label line, with the Daily Bread figure beneath it. */
@media (max-width: 599.98px) {
  .pr-nutri .slip { padding: var(--s-md); }
  .pr-nut,
  .pr-nut > thead,
  .pr-nut > tbody { display: block; width: 100%; }
  .pr-nut thead tr,
  .pr-nut tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--s-sm);
    row-gap: var(--s-2xs);
    padding-block: var(--row-pad);
  }
  .pr-nut thead tr { border-bottom: var(--line-w) solid var(--rule); padding-top: 0; }
  .pr-nut tbody tr { border-bottom: var(--line-w) solid var(--rule); }
  .pr-nut tbody tr:last-child { border-bottom: 0; }
  .pr-nut caption { display: block; width: 100%; text-align: left; }
  .pr-nut thead th { border-bottom: 0 !important; padding: 0; }
  .pr-nut th,
  .pr-nut td { padding: 0; border: 0; }
  .pr-nut thead th:first-child,
  .pr-nut tbody th { grid-column: 1 / -1; }
  .pr-nut thead th.fig,
  .pr-nut td.fig { text-align: left; }
  .pr-nut td.fig { width: auto; }
  .pr-nut td.pr-nut__none { font-size: inherit; white-space: normal; line-height: 1.3; }
  .pr-num tr { column-gap: var(--s-xs); }
}
.pr-check .pr-check__art { margin-top: var(--s-3xl); max-width: 20rem; }
.pr-check__art .print__caption { max-width: 34rem; }   /* under the 704px back label it ran to 96 characters */
@media (min-width: 900px) {
  .pr-check .pr-check__art { margin-top: calc(var(--t-headline) * 1.1 + var(--space-h)); justify-self: start; }
}
@media (min-width: 1200px) {
  .pr-check .pr-check__art { margin-left: var(--s-3xl); }
}

/* ======================================================================
   6. How it started (#began): the founders' story in full, set as ledger
   entries. Each entry is a printed date line and the words, with its own
   photographs laid loose beside it (from 900px; after it on phones). The
   trials entry lays its three prints in a strip under the words, across
   the page. No rules between entries: air does the separating.
   ====================================================================== */
.pr-chapter { margin: var(--s-2xl) 0 0; padding: 0; list-style: none; }
.pr-entry + .pr-entry { margin-top: var(--s-3xl); }
/* Each entry opens on a ruled line with its date, like a dated line in a ledger. */
.pr-entry__text { border-top: var(--line-w) solid var(--rule); padding-top: var(--s-sm); }
.pr-entry__when { font-variant-numeric: lining-nums; }
.pr-art .print__aside { margin-top: 1.25rem; }  /* was var(--s-xs): too tight, the rotated note's far edge reached the caption above it */
.pr-entry__text .lede { max-width: 30ch; }
.pr-entry__art { margin-top: var(--s-xl); min-width: 0; }
.pr-entry--last .lede { max-width: 26ch; }
@media (min-width: 900px) {
  .pr-chapter { margin-top: var(--s-3xl); }
  .pr-entry {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--gutter);
    align-items: start;
  }
  .pr-entry + .pr-entry { margin-top: var(--s-4xl); }
  .pr-entry__text { grid-column: 1; }
  /* Art starts level with the entry's first line of words, under its date line. */
  .pr-entry__art { grid-column: 2; margin-top: var(--pr-first-line); }
  .pr-entry--strip .pr-entry__art { grid-column: 1 / -1; margin-top: var(--s-2xl); }
}

/* Photographs inside an entry: a small twelve-column field, so each keeps its own shape and
   its own drop. Never a card grid: no frames round the items, no equal heights. */
.pr-art {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-lg);
  row-gap: var(--s-2xl);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-art > li { min-width: 0; }
.pr-art .print__caption { max-width: 32ch; }
.pr-art--pair .pr-art__big { grid-column: 1 / span 7; }
.pr-art--pair .pr-art__small { grid-column: 8 / span 5; margin-top: var(--s-2xl); }
/* The trials strip. Phones: the note across, then the bags and the taste test side by side. */
.pr-art--strip .pr-art__note { grid-column: 1 / span 11; }
.pr-art--strip .pr-art__bags { grid-column: 1 / span 7; }
.pr-art--strip .pr-art__taste { grid-column: 8 / span 5; margin-top: var(--s-lg); }
@media (min-width: 900px) {
  .pr-art { column-gap: var(--s-lg); }
  .pr-art--strip .pr-art__note { grid-column: 1 / span 5; }
  .pr-art--strip .pr-art__bags { grid-column: 6 / span 4; margin-top: var(--s-2xl); }
  .pr-art--strip .pr-art__taste { grid-column: 10 / span 2; margin-top: var(--s-lg); }
}
@media (min-width: 1200px) {
  .pr-art { column-gap: var(--s-xl); }
  .pr-art--strip .pr-art__bags { grid-column: 6 / span 3; }
  .pr-art--strip .pr-art__taste { grid-column: 10 / span 2; }
}

/* 2009: the tiffin drawing, and a note that only repeats the printed line. */
.pr-art-tiffin { position: relative; max-width: 17rem; }
.pr-art-tiffin .doodle { max-width: 13rem; }
.pr-tiffin-note { margin: var(--s-xs) 0 0 4.5rem; }
@media (max-width: 899.98px) {
  .pr-art-tiffin { max-width: 14rem; }
}

/* The pull quote beside the years in between. */
.pr-pull { max-width: 30rem; }
.pr-pull .lede { max-width: none; }

/* Print: every part prints finished; the photo groups show both loaves, like the receipts. */
@media print {
  .pr-pack__note { display: none !important; }
  .js .pr-lp--ww, .js .pr-label:has(#ls-panel-ww.is-current) .pr-lp--db { visibility: visible; }
  .pr-label__photos { display: block; }
}

/* ---- The shots (2026-10-09) ---- */
.pr-leftout__print { max-width: 22rem; }
.pr-entry__print { max-width: 22rem; }
.order-desk__print { max-width: 22rem; }

/* pr-nut phone: the three "On the pack" figure cells may wrap, so the nutrition table never runs
   past the screen edge. */
@media (max-width: 599.98px) {
  .pr-nut th.fig, .pr-nut td.fig { white-space: normal; padding-left: var(--s-xs); }
  .pr-nut { table-layout: fixed; width: 100%; }
}

/* ============================================================================================
   v4 left-aligned (2026-10-20): the page reads like /about, /products and /faq. Everything
   starts on the gutter: the kicker, "Line by line.", the lede, the numbers ledger and the pack;
   then each section heading and its copy as a left-aligned column at the DESIGN.md measures,
   with its slips, prints and tables under it; the founders chapters as left entries with their
   prints under the words; who answers for it; the order desk. From 900px the handwritten
   marks and floating objects sit in a right-hand margin column (about a fifth of the width,
   kept clear of the text by the 78% cap below); on phones the marks that opt in sit between
   paragraphs. These rules override the ledger layout above.
   ============================================================================================ */
.pr-head__grid { position: relative; }
.page-head__kicker { letter-spacing: 0.01em; color: var(--pencil-text); }
.pr-head__title { margin-top: var(--s-sm); max-width: none; font-size: var(--t-display); font-weight: 300; font-variation-settings: "opsz" 72; line-height: 1; letter-spacing: -0.02em; }
.pr-head__text > .lede { max-width: 44ch; }
.pr-numbers { width: 100%; max-width: 44rem; text-align: left; }
.pr-pack { display: block; width: clamp(12rem, 22vw, 18rem); margin: var(--s-2xl) 0 0; }
.pr-pack__img { width: 100%; max-width: none; margin: 0; }
.pr-pack__cap { text-align: left; max-width: 22ch; }
.pr-pack__note { display: none; }

.pr-label > .wrap, .pr-leftout > .wrap, .pr-check > .wrap, .pr-story > .wrap, #who > .wrap { position: relative; text-align: left; }
.pr-label > .wrap > *, .pr-leftout > .wrap > *, .pr-check > .wrap > *, .pr-story > .wrap > *, #who > .wrap > * { max-width: 44rem; }
.pr-label > .wrap > h2, .pr-leftout > .wrap > h2, .pr-check > .wrap > h2, .pr-story > .wrap > h2, #who > .wrap > h2 { max-width: none; font-size: var(--t-headline); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.pr-label > .wrap > .mt-h, .pr-leftout .split > .mt-h, .pr-check > .wrap > .mt-h { max-width: 52ch; }

/* What goes in: the switch, the receipt with its notes, the photographed labels under it. */
.pr-label__body.split { display: block; width: 100%; }
.pr-label__switch { width: 100%; max-width: 44rem; text-align: left; }
.pr-label .loaf-switch__tabs { justify-content: flex-start; }
.pr-label .pr-label__photos { position: static; width: 100%; max-width: 36rem; margin-top: var(--s-2xl); }
.pr-label .pr-lp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-lg); align-items: start; }
/* The prints kept the 12-column spans (1 / span 7, 8 / span 5) from the ledger layout, so from 600 to
   899px the grid opened implicit auto columns sized by each photo, and both prints changed size when
   the photos arrived. One print to each of the two tracks; phones stack them (below). */
.pr-label .pr-lp__panel { grid-column: 1; }
.pr-label .pr-lp__sticker { grid-column: 2; }

/* What we left out: the list, the crumb under it, the keeping lines, the comparison. */
.pr-leftout .split, .pr-keep { display: block; width: 100%; }
.pr-rows { width: 100%; max-width: 32rem; text-align: left; }
.pr-leftout .pr-leftout__art { margin-top: var(--s-2xl); width: 100%; }
.pr-leftout__print { margin-inline: 0; }
.pr-keep { margin-top: var(--s-3xl); max-width: 52ch; }
.pr-keep__margin { margin-top: var(--s-md); }
.pr-train { width: 100%; max-width: 60rem; margin-top: var(--s-3xl); }
.pr-train > .title { max-width: none; }
.pr-train > p { max-width: 52ch; margin-inline: 0; }
.pr-compare { text-align: left; }

/* Check it yourself: the licence slip and the nutrition table; the back label print under. */
.pr-check > .wrap > .mt-2xl { width: 100%; max-width: 36rem; text-align: left; }
.pr-nutri { width: 100%; max-width: 44rem; text-align: left; }
.pr-nutri > h3 { text-align: left; max-width: none; }
.pr-check > .wrap.split { display: block; }
.pr-check .pr-check__art { grid-column: auto; grid-row: auto; margin-left: 0; width: 100%; max-width: 22rem; margin-top: var(--s-2xl); }

/* How it started: each entry left-aligned, its words at reading width, its prints under the words. */
.pr-chapter { width: 100%; max-width: 52rem; display: block; }
.pr-entry { display: block; text-align: left; }
.pr-entry + .pr-entry { margin-top: var(--s-3xl); }
.pr-entry__text { max-width: 48ch; }
.pr-entry__text .lede { max-width: none; font-size: var(--t-lede); font-weight: 300; line-height: 1.45; letter-spacing: -0.005em; }
.pr-entry__art { grid-column: auto; max-width: 44rem; width: 100%; margin-top: var(--s-xl); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-lg); }
.pr-entry__art > * { margin-top: 0; }
.pr-entry__art .print { max-width: 20rem; text-align: left; }
.pr-entry__print { margin-top: 0; width: 100%; }   /* the lunchbox print: its own width (20rem cap), not the photo's, so it never grows on load */
.pr-entry__art .ink-mark--plate { width: 10rem; }
.pr-tiffin-note { width: 100%; justify-content: flex-start; }
.pr-entry--strip .pr-entry__art { grid-column: auto; }

/* Who answers for it. */
#who > .wrap.split { display: block; }
#who .people__grid { display: grid; grid-column: auto; grid-row: auto; margin-top: var(--s-2xl); width: 100%; max-width: 44rem; grid-template-columns: repeat(2, minmax(0, 9rem)); justify-content: start; gap: var(--s-xl) var(--s-xl); }
@media (min-width: 600px) { #who .people__grid { grid-template-columns: repeat(4, minmax(0, 7rem)); } }
#who .people__grid > .person { justify-items: start; text-align: left; }
#who .person__photo { border-radius: 50%; }
#who .people__grid .person__name { width: auto; font-size: var(--t-label); }
#who .founder { max-width: 36ch; }
#who .contact-rows { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--s-xl); }

/* The order desk, as on /products. */
.order-desk { text-align: left; }
.order-desk__wrap { position: relative; }
.order-desk__wrap > * { max-width: 36rem; }
.order-desk__wrap > h2 { max-width: none; font-size: var(--t-headline); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.order-desk__wrap .ink-mark--float { float: none; margin: var(--s-md) 0 0; }
.order-desk__wrap .order-slip { width: 100%; text-align: left; }
.order-desk__wrap .steps { text-align: left; }
.order-desk__wrap .share { justify-content: flex-start; }
.order-desk__wrap .pin-group, .order-desk__wrap .notify-group { text-align: left; width: 100%; }
.order-desk__print { max-width: 22rem; margin-inline: 0; }

@media (min-width: 900px) {
  /* Keep the right fifth of the section free for the handwriting. */
  .pr-label > .wrap > *, .pr-leftout > .wrap > *, .pr-check > .wrap > *, .pr-story > .wrap > *, #who > .wrap > *,
  .order-desk__wrap > * { max-width: min(44rem, 78%); }
  .pr-label > .wrap > h2, .pr-leftout > .wrap > h2, .pr-check > .wrap > h2, .pr-story > .wrap > h2, #who > .wrap > h2,
  .order-desk__wrap > h2 { max-width: min(44rem, 78%); }
}

/* The handwritten marks, as on the home page. */
.mark { position: absolute; display: block; width: max-content; z-index: 1; font-family: var(--font-hand); font-size: var(--t-hand); font-weight: 400; line-height: 1.2; color: var(--accent-text); transform: rotate(var(--mark-tilt, -3deg)); pointer-events: none; }
.mark .note-words { clip-path: inset(-25% -10% -25% -10%); transition: clip-path 700ms var(--ease-expo); }
.mark.is-waiting .note-words { clip-path: inset(-25% 110% -25% -10%); transition: none; }
@media (max-width: 599.98px) {
  .mark:not([data-phone]) { display: none; }
  .mark[data-phone] { top: var(--pt) !important; left: var(--pl, auto) !important; right: var(--pr, auto) !important; font-size: var(--t-hand); }
  .pr-label .pr-lp { grid-template-columns: minmax(0, 1fr); }
  /* The two label prints inherited grid-column: 1 / span 7 and 8 / span 5 from the older
     12-column ledger layout (line ~178), which the one-column rule above never reset. With
     only one explicit column the grid still had to open 11 implicit ones to satisfy that
     span, so the panel photo and the sticker collapsed instead of stacking at full width.
     Reset both to the single column, let them stack as separate rows, and cap each at the
     same width so they read as one column instead of two mismatched slivers. */
  .pr-label .pr-lp__panel,
  .pr-label .pr-lp__sticker {
    grid-column: 1;
    grid-row: auto;
    max-width: 18rem;
    margin-inline: auto;
  }
  .pr-label .pr-lp__sticker { margin-top: var(--s-xl); }
}
/* From 900px every handwritten mark and floating object sits in the right-hand margin column,
   whichever side its inline position named; the text is capped at 78% of the wrap above. */
@media (min-width: 900px) {
  .mark { left: auto !important; right: 1% !important; max-width: 20%; }
  .float { left: auto !important; right: -2% !important; }
}
html, body { overflow-x: clip; }

/* Reading line: defined once in v3.css (full motion, 900px and up). */

/* The three handwritten .print__aside notes on this page (the back-label note in #check, the
   trial-note and taste-test notes in the "How it started" strip) sit under figcaption in the
   DOM, but v3.css gives .print__aside a -3deg rotation around its own left edge with no width
   limit: on a near-full-width note the right end of that rotated box swings up into the
   caption's last line (confirmed by measuring the two line boxes -- a real intersection, not
   just a visual graze, at every width including desktop). Shrinking the box to its own text
   cuts the lever arm the rotation swings on, and the extra top margin clears what is left. */
.print__aside {
  width: max-content;
  max-width: 100%;
  margin-top: 1.25rem;
}

/* Founders timeline: the tiffin drawing floats beside the 2009 text on wider screens. On a
   phone the text would wrap around it awkwardly, and the photo below tells the same
   story, so the drawing steps aside there (owner review 2026-10-16). */
@media (max-width: 599.98px) {
  .pr-entry__text > .ink-mark--float { display: none; }
}

/* .pr-entry__art is a flex column elsewhere; the photo groups need their own twelve-column
   grid back, so on phones the trial bags and the taste test sit side by side instead of
   four photographs stacked in a row (owner review 2026-10-16). */
.pr-entry__art.pr-art { display: grid; }