/*! Few Bites · fb.css · C2 "Up Close" · v c2b (calm layer at the end) · 31 Oct 2026 · was c2a 25 Oct 2026
   The one stylesheet for every page. Hand-written; no framework, no build step.
   Mobile first. Steps: <360 (narrow phones), 560, 760 (tablet), 1100 (desktop).

   THE LAWS (README → "DESIGN LAWS (Up Close)")
   - The photos carry the colour. The page stays Paper, Bone and Ink.
   - Saffron is the kit action only. Tomato is for kickers and rank numerals. Sea, Saffron and
     Tomato are also the three day types, always as ringed dots beside the word.
   - Gloock is display only (headlines, day names, numerals) and never under 21px.
     Hanken Grotesk does everything else, sentence case. Tracked caps only for kickers.
   - Square corners. No hairlines (space separates rows; a total gets one 2px Ink rule).
     No mono, no italics, no emoji. One Ink band, the footer, closes every page.
   - One selector lives in one place. Before adding a rule, search for the selector and edit it.
     Check: python -I C:/Users/moham/fewbites-build/c2/tools/a1/css_check.py

   MAP
    1 fonts            9 article top           17 kit offers + sticky bar
    2 tokens          10 quick answer + TOC    18 kit form (bridge)
    3 base            11 prose                 19 home + hubs
    4 type            12 lists of food         20 kit page
    5 buttons, links  13 day cards + chips     21 legal + plain pages
    6 layout          14 charts                22 printables (magnets)
    7 header + menu   15 cards, quotes, notes  23 utilities
    8 footer          16 read next, colophon   25 old markup (safety net), then 24 motion + print
*/

/* ===================================================================== 1 fonts */
@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-0022, U+0024-002E, U+0030-2012, U+2015-218F, U+2191, U+2193-10FFFF;
}
/* Gloock's "#" is a slanted, squeezed sign that reads as "≠" at display sizes ("Day Card #10"), its
   en and em dashes and its slash are hairlines ("88–98g" reads "88 98g" on a 1x screen, "2 / 3" reads
   "2 | 3"), and it has no arrows. Those six characters come from Hanken inside any Gloock text, with
   no markup and no extra download (the same file the text already uses). The weight must equal the
   face above (400): Chromium only joins faces with identical descriptors, and with "400 800" this one
   was never used (F1, 26 Oct 2026). */
@font-face {
  font-family: "Gloock";
  src: url("../fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0023, U+002F, U+2013, U+2014, U+2190, U+2192;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks: text keeps its place while the real fonts arrive. */
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 99%; ascent-override: 101%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 103%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%;
}

/* ===================================================================== 2 tokens */
:root {
  --paper: #FFFFFF;
  --bone: #F2EFEA;
  --bone-deep: #E6E1D9;
  --ink: #171513;
  --ink-soft: #2E2A26;
  --tomato: #D7392B;
  --tomato-deep: #B8301F;
  --saffron: #F4B63F;
  --saffron-deep: #E9A62C;
  --smoke: #6E6862;
  --fog: #BDB6AD;
  --sea: #2F6E92;
  --ice: #DCEBF2;

  --display: "Gloock", "Gloock Fallback", Georgia, serif;
  --text: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: 20px;          /* side padding of every column */
  --bleed: 20px;           /* how far a band breaks out of the reading column */
  --max: 1200px;           /* widest content */
  --col: 680px;            /* the reading column */
  --head-h: 60px;          /* header height */
  --kicker: var(--tomato); /* switches to Tomato Deep on Bone */
  --paper-shadow: 0 1px 0 rgba(23, 21, 19, .06), 0 22px 32px -22px rgba(23, 21, 19, .38);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 359px) { :root { --gutter: 16px; --bleed: 16px; } }
@media (min-width: 760px) { :root { --gutter: 40px; --bleed: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; --bleed: 56px; --head-h: 76px; } }

/* Bone grounds set --kicker: var(--tomato-deep) in their own rule, so kickers there use the
   deeper Tomato (5.3:1 on Bone; plain Tomato is for white only). */

/* ===================================================================== 3 base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 var(--text);
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
svg, video, picture { display: block; max-width: 100%; }
figure, blockquote, dl, dd { margin: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
i { font-style: normal; }
em { font-style: normal; font-weight: 600; }          /* no italics: emphasis is weight */
small { font-size: inherit; }
code, kbd, samp { padding: 1px 5px; background: var(--bone-deep); font: 600 .9em/1 var(--text); white-space: nowrap; }  /* no mono, ever; short tokens only */
hr { border: 0; margin: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--saffron); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; background: var(--ink); color: var(--paper);
  font: 700 16px/1 var(--text); text-decoration: none;
}
.skip-link:focus { top: 12px; outline-color: var(--saffron); }

/* ===================================================================== 4 type */
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; }
.h1 { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.14; letter-spacing: -0.005em; }
.num { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
@media (max-width: 359px) { .h1 { font-size: 40px; } .h2 { font-size: 30px; } }
@media (min-width: 760px) { .h1 { font-size: 64px; } .h2 { font-size: 44px; } .h3 { font-size: 26px; } }
@media (min-width: 1100px) { .h2 { font-size: 52px; } }

.kicker {
  display: block;
  font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--kicker);
}
.lead, .dek { font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.small { font-size: 15px; line-height: 1.45; color: var(--smoke); }
.fine { font-size: 14px; line-height: 1.5; color: var(--smoke); }
.fine a, .small a { color: inherit; text-underline-offset: 3px; }
.data { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; white-space: nowrap; }
.tnum { font-variant-numeric: lining-nums tabular-nums; }
.nw { white-space: nowrap; }
/* .label is the old site's small caption; C2 reads it as a quiet tracked label. */
.label { font: 700 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.label--sage { color: var(--kicker); }

/* ===================================================================== 5 buttons, links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 24px;
  border: 0; border-radius: 0; cursor: pointer;
  font: 700 17px/1.2 var(--text); letter-spacing: .005em; text-align: center;
  text-decoration: none; text-wrap: balance;
  transition: background-color .15s ease;
}
.btn svg { flex: none; }
.btn--kit, .btn--primary { background: var(--saffron); color: var(--ink); }
.btn--kit:hover, .btn--primary:hover { background: var(--saffron-deep); }
.btn--ink, .btn--secondary { background: var(--ink); color: var(--paper); }
.btn--ink:hover, .btn--secondary:hover { background: var(--ink-soft); }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.btn--lg { min-height: 60px; }
.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .85; }
@media (max-width: 359px) { .btn { padding-inline: 16px; font-size: 16px; } }

/* A secondary action is a text link with a Saffron underline, never an outline button. */
.link {
  display: inline-block; padding: 11px 0;
  font: 650 17px/1.35 var(--text); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--saffron);
}
.link:hover { text-decoration-color: var(--ink); }
.link svg { display: inline-block; vertical-align: -3px; margin-left: 6px; }

/* ===================================================================== 6 layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.col { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: 56px 60px; }
.band--bone { background: var(--bone); --kicker: var(--tomato-deep); }
.band--ice { background: var(--ice); --kicker: var(--ink); }
.section-head { margin-bottom: 28px; }
.section-head > * + * { margin-top: 12px; }
@media (min-width: 760px) { .band { padding-block: 80px 88px; } }
@media (min-width: 1100px) {
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
  .section-head > * + * { margin-top: 0; }
  .section-head > div { max-width: 640px; }
  .section-head > div > * + * { margin-top: 12px; }
}

/* ===================================================================== 7 header + menu */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: transform .28s var(--ease);
}
html[data-head="hidden"] .site-head { transform: translateY(-100%); }
.site-head__in {
  display: flex; align-items: center; gap: 8px;
  height: var(--head-h); max-width: var(--max); margin: 0 auto;
  padding: 0 8px 0 var(--gutter);
}
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-right: auto; padding: 8px 0;
  font: 400 27px/1 var(--display); letter-spacing: -0.012em; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.tag-free {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  background: var(--saffron); color: var(--ink);
  font: 700 15px/1 var(--text); white-space: nowrap; text-decoration: none;
}
.tag-free:hover { background: var(--saffron-deep); }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font: 650 16px/1 var(--text);
}
.menu-btn__bars path { transform-box: view-box; transform-origin: 11px 7px; transition: transform .2s ease; }
.menu-btn[aria-expanded="true"] .menu-btn__bars .b1 { transform: rotate(45deg) translateY(5px); }
.menu-btn[aria-expanded="true"] .menu-btn__bars .b2 { transform: rotate(-45deg) translateY(-5px); }
.site-nav { display: none; }
.mobile-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  min-height: calc(100svh - var(--head-h)); max-height: calc(100svh - var(--head-h)); overflow-y: auto;
  padding: 6px var(--gutter) 24px;
  background: var(--paper);
  box-shadow: 0 24px 30px -24px rgba(23, 21, 19, .35);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__list { list-style: none; }
.mobile-nav__list a {
  display: flex; align-items: center; min-height: 52px;
  font: 600 19px/1.2 var(--text); color: var(--ink); text-decoration: none;
}
.mobile-nav__list a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--saffron);
  text-decoration-thickness: 3px; text-underline-offset: 7px;
}
.mobile-nav .btn { margin-top: 14px; }
.mobile-nav__sec { display: flex; flex-wrap: wrap; column-gap: 22px; margin-top: 12px; }
.mobile-nav__sec a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--smoke); text-underline-offset: 4px; }
@media (max-width: 359px) {
  .wordmark { font-size: 24px; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tag-free { padding: 0 11px; font-size: 14px; }
}
@media (min-width: 1100px) {
  .site-head__in { gap: 18px; padding-right: var(--gutter); }
  .wordmark { font-size: 32px; margin-right: 8px; }
  .site-nav { display: block; margin-right: auto; }
  .site-nav__list { display: flex; list-style: none; gap: 2px; }
  .site-nav__list a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    font: 600 15.5px/1 var(--text); color: var(--ink); text-decoration: none;
  }
  .site-nav__list a:hover, .site-nav__list a[aria-current="page"] {
    text-decoration: underline; text-decoration-color: var(--saffron);
    text-decoration-thickness: 3px; text-underline-offset: 8px;
  }
  .tag-free { padding: 0 18px; font-size: 16px; }
  .menu-btn, .mobile-nav, .mobile-nav[data-open="true"] { display: none; }
}

/* ===================================================================== 8 footer (the one Ink band) */
.site-foot { background: var(--ink); color: var(--paper); padding: 52px 0 36px; }
.site-foot :focus-visible { outline-color: var(--saffron); }
.wordmark--foot { display: inline-block; color: var(--paper); font-size: 34px; }
.foot__tag { margin-top: 8px; font: 500 17px/1.4 var(--text); color: var(--bone); }
.foot__line { margin-top: 18px; max-width: 30ch; font: 650 17px/1.45 var(--text); color: var(--paper); }
.foot-kit {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center;
  margin-top: 28px; padding: 14px; background: var(--ink-soft);
  color: var(--paper); text-decoration: none;
}
body:has(#kit-end) .foot-kit { display: none; }
.foot-kit__img { aspect-ratio: 1; overflow: hidden; background: var(--bone); }
.foot-kit__img img { width: 100%; height: 100%; object-fit: cover; }
.foot-kit__t { display: block; font: 400 23px/1.1 var(--display); }
.foot-kit__s { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--bone); }
.foot-kit__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font: 700 15px/1.2 var(--text); color: var(--saffron);
}
.foot-kit:hover .foot-kit__go { text-decoration: underline; text-underline-offset: 4px; }
.foot__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 30px; list-style: none; }
.foot__nav a {
  display: flex; align-items: center; min-height: 46px;
  font: 600 17px/1.2 var(--text); color: var(--paper); text-decoration: none;
}
.foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--saffron); text-underline-offset: 5px; }
.foot__nav a.is-kit { color: var(--saffron); }
.foot__sec { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 10px; }
.foot__sec a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 16px; color: var(--bone); text-underline-offset: 4px; }
.foot__trust { margin-top: 26px; font-size: 14px; line-height: 1.65; color: var(--fog); }
.foot__legal { display: flex; flex-wrap: wrap; column-gap: 18px; margin-top: 10px; }
.foot__legal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 14px; color: var(--fog); text-underline-offset: 3px; }
.foot__legal a:hover, .foot__sec a:hover { color: var(--paper); }
.foot__disclaimer { margin-top: 12px; max-width: 72ch; font-size: 13px; line-height: 1.55; color: var(--fog); }
.foot__copy { margin-top: 12px; font-size: 13px; color: var(--fog); }
@media (min-width: 1100px) {
  .site-foot { padding: 72px 0 44px; }
  .foot-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; }
  .foot__nav { margin-top: 0; }
}

/* ===================================================================== 9 article top */
/* Order on a phone: kicker, H1, dek, byline, full-bleed photo, fact strip, actions.
   From 1100px it opens as a spread: words on the left, food on the right. */
.art-top { padding-top: 14px; }
.art-head { padding: 0 var(--gutter); }
/* 35px at 390 (spec); from 360 to 389 it scales with the screen so lines break as they do at 390 and the
   first screen keeps "Jump to …" and the kit link (A2). --long: the few titles that run four lines at 390. */
.art-head__title { margin-top: 10px; font: 400 35px/1.07 var(--display); font-size: clamp(31px, 8.98vw, 35px); letter-spacing: -0.012em; text-wrap: balance; }
.art-head__title--long { font-size: clamp(29px, 8.2vw, 32px); }
.art-head .dek { margin-top: 12px; font-size: 18px; line-height: 1.5; }
.byline { margin-top: 12px; font: 500 15px/1.45 var(--text); color: var(--smoke); }
.byline a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.byline a:hover { text-decoration-color: var(--ink); }
.byline__sep { margin-inline: 2px; }

/* One big photo... */
.art-hero { position: relative; margin-top: 18px; background: var(--bone); }
/* 3:2 on phones: the same height as the 2 × 2 meal grid, so "Jump to …" and the quiet kit link both land on
   the first 390 × 844 screen even under a four-line H1 (the crops are 4:3 and lose a sliver top and bottom) */
.art-hero__img { aspect-ratio: 3 / 2; overflow: hidden; }
.art-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.art-hero__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 44px var(--gutter) 12px;
  background: linear-gradient(to top, rgba(23, 21, 19, .74) 0%, rgba(23, 21, 19, .62) 55%, rgba(23, 21, 19, 0) 100%);
  color: #fff; font: 600 14px/1.35 var(--text); text-shadow: 0 1px 2px rgba(23, 21, 19, .35);
}
.art-hero__cap > span:not(.num) { text-wrap: balance; }  /* no one-word second line under the photo (A2) */
.art-hero__cap .num { font-size: 28px; line-height: .9; }
.art-hero__cap .num small { margin-left: 4px; font: 600 13px/1 var(--text); letter-spacing: .02em; }
/* ...or four meals as a 2 × 2, each with a white menu label */
.meal-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 18px; background: var(--paper); }
.meal-grid__tile { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone); }
.meal-grid__tile img { width: 100%; height: 100%; object-fit: cover; }
.meal-grid__label {
  position: absolute; left: 8px; bottom: 8px;
  display: inline-flex; align-items: baseline; gap: 7px; max-width: calc(100% - 16px);
  padding: 6px 9px; background: var(--paper);
  font: 700 13px/1.1 var(--text); letter-spacing: .03em; color: var(--smoke);
}
.meal-grid__label .num { font-size: 22px; line-height: .9; color: var(--ink); letter-spacing: 0; }
.save-btn {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px;
  background: rgba(23, 21, 19, .84); color: #fff;
  font: 700 14px/1 var(--text); text-decoration: none;
}
.save-btn:hover { background: var(--ink); }
.save-btn:focus-visible { outline-color: var(--saffron); }

.facts-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; column-gap: 14px;
  margin: 0; padding: 11px var(--gutter) 12px; background: var(--bone); list-style: none;
  --kicker: var(--tomato-deep);
}
.facts-strip li { min-width: auto; }  /* never narrower than its numeral */
.facts-strip .num { display: block; font-size: 25px; line-height: 1; }
.facts-strip__l { display: block; margin-top: 4px; font: 600 13px/1.2 var(--text); color: var(--ink); }
.art-actions { display: grid; gap: 2px; justify-items: start; padding: 16px var(--gutter) 4px; }
.art-actions .btn { width: 100%; }
@media (max-width: 359px) { .facts-strip { column-gap: 12px; } .facts-strip .num { font-size: 21px; } .art-head__title { font-size: 31px; } }
@media (min-width: 760px) {
  .art-top { padding-top: 40px; max-width: calc(920px + 2 * var(--gutter)); margin-inline: auto; }
  .art-head__title { font-size: 46px; }
  .art-hero, .meal-grid { margin-inline: var(--gutter); }
  .meal-grid__tile { aspect-ratio: 4 / 3; }
  .facts-strip { margin-inline: var(--gutter); padding-inline: 24px; justify-content: start; column-gap: 44px; }
  /* the button keeps its label on one line; when button + link do not fit side by side, the link
     moves under the button instead of both squeezing into two-line wraps (A2) */
  .art-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 2px; }
  .art-actions .btn { width: auto; white-space: nowrap; }
}
@media (min-width: 1100px) {
  .art-top {
    display: grid; max-width: calc(var(--max) + 2 * var(--gutter));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas: "head hero" "facts hero" "actions hero";
    grid-template-rows: auto auto 1fr;
    column-gap: 56px; padding: 48px var(--gutter) 8px;
  }
  .art-head { grid-area: head; padding: 0; align-self: end; }
  .art-head__title { font-size: 52px; line-height: 1.04; }
  .art-hero, .meal-grid { grid-area: hero; margin: 0; align-self: center; }
  .art-hero__img { aspect-ratio: 5 / 4; }
  .facts-strip { grid-area: facts; margin: 26px 0 0; padding: 16px 20px 18px; justify-content: space-between; column-gap: 18px; }
  .art-actions { grid-area: actions; align-self: start; padding: 22px 0 0; }
}
/* Short phone screens (RT-04 / RR-01a, V-design): Safari with its toolbars and Pinterest's in-app browser give
   about 390 × 660, not 844. There the photo is shorter (26% of the screen), the spacing tighter, and the fact strip
   moves under the actions, so "Jump to …" and the quiet kit link land on the first screen. Words and markup unchanged.
   The home cover photo drops from 37% to 31% of the screen for the same reason. */
@media (max-width: 759px) and (max-height: 800px) {
  .art-top { display: flex; flex-direction: column; padding-top: 8px; }
  .art-head .dek { margin-top: 8px; }
  .art-head .byline { margin-top: 8px; }
  .art-hero, .meal-grid { margin-top: 10px; }
  .art-hero__img { aspect-ratio: auto; height: 26svh; }
  .meal-grid__tile { aspect-ratio: auto; height: calc((26svh - 3px) / 2); }
  .facts-strip { order: 1; }
  .art-actions { padding-top: 10px; padding-bottom: 14px; }
}

/* ===================================================================== 10 quick answer + TOC */
.quick { margin-top: 30px; }
.quick-answer__label { display: block; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.quick-answer__body { margin-top: 10px; font-size: 20px; line-height: 1.5; text-wrap: pretty; }
.quick-answer__body + .quick-answer__body { margin-top: 14px !important; }
.quick-answer__meter { margin-top: 16px; }
/* On phones the unlabelled meter under the quick answer is dropped: the fact strip already carries the numbers and
   the answer comes sooner (RR-10, V-design). It stays in the markup and returns from 760px. */
@media (max-width: 759px) { .quick-answer__meter { display: none; } }

.toc { margin-top: 30px; --kicker: var(--tomato-deep); }
.toc details { padding: 0 18px; background: var(--bone); }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; cursor: pointer; list-style: none;
  font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--kicker);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font: 400 30px/1 var(--display); color: var(--ink); letter-spacing: 0; }
.toc details[open] summary::after { content: "\2013"; }
.toc ol, .toc ul { list-style: none; padding-bottom: 12px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li a {
  display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 9px 0;
  font: 600 17px/1.35 var(--text); color: var(--ink); text-decoration: none;
}
.toc li a::before { content: counter(toc); min-width: 18px; font: 400 21px/1 var(--display); color: var(--tomato-deep); }
.toc li a:hover { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ===================================================================== 11 prose */
.prose { margin-top: 36px; font-size: 18px; line-height: 1.6; }
/* Flow: only direct children of the prose (and of the .week wrapper inside it) get prose
   spacing and heading sizes, so components keep their own type. */
:is(.prose, .week) > * + * { margin-top: 1.05em; }
.prose p { text-wrap: pretty; }
.prose .lead { font-size: 20px; line-height: 1.55; }
:is(.prose, .week) > h2 { margin-top: 64px; font-size: 31px; line-height: 1.08; letter-spacing: -0.012em; }
:is(.prose, .week) > h3 { margin-top: 40px; font-size: 23px; line-height: 1.16; letter-spacing: -0.005em; }
:is(.prose, .week) > :is(h2, h3) + * { margin-top: 14px; }
.prose :is(p, li, td, dd, blockquote) a:not([class]) {
  color: var(--tomato-deep);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.prose :is(p, li, td, dd, blockquote) a:not([class]):hover { color: var(--ink); }
:is(.prose, .week) > ul:not([class]) { list-style: none; display: grid; gap: 12px; }
:is(.prose, .week) > ul:not([class]) > li { position: relative; padding-left: 24px; }
:is(.prose, .week) > ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; background: var(--ink); }
:is(.prose, .week) > ol:not([class]) { list-style: none; display: grid; gap: 12px; counter-reset: n; }
:is(.prose, .week) > ol:not([class]) > li { position: relative; padding-left: 34px; counter-increment: n; }
:is(.prose, .week) > ol:not([class]) > li::before { content: counter(n); position: absolute; left: 0; top: .05em; font: 400 22px/1.2 var(--display); color: var(--tomato); }
.prose blockquote:not([class]) { font: 400 24px/1.25 var(--display); }
.prose table:not([class]) { width: 100%; font-size: 16px; }
.prose table:not([class]) th { padding: 10px 12px; text-align: left; font: 700 13px/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.prose table:not([class]) td { padding: 10px 12px; vertical-align: top; }
.prose table:not([class]) tbody tr:nth-child(odd) { background: var(--bone); }
@media (min-width: 760px) {
  .prose { font-size: 19px; }
  :is(.prose, .week) > h2 { font-size: 40px; margin-top: 80px; }
  :is(.prose, .week) > h3 { font-size: 26px; }
}

/* In-text photos run edge to edge on a phone and a little past the column on bigger screens. */
.figure { margin: 40px calc(-1 * var(--bleed)); }
:is(.prose, .week) > .figure { margin-block: 40px; }
.figure img, .figure__img { width: 100%; height: auto; background: var(--bone); }
.figure__caption { padding: 10px var(--bleed) 0; font: 500 14px/1.45 var(--text); color: var(--smoke); text-wrap: pretty; }
.figure__caption .data { font-weight: 700; color: var(--ink); }
.figure__placeholder { display: grid; place-content: center; gap: 4px; min-height: 220px; background: var(--bone); color: var(--smoke); text-align: center; }
.save-pin__placeholder { display: grid; place-content: center; gap: 4px; height: 100%; color: var(--smoke); text-align: center; }

/* ===================================================================== 12 lists of food */
/* A food list is set like a menu: the dish, then its protein as a numeral on the right. */
.food-grid { list-style: none; display: grid; gap: 0; }
:is(.prose, .week) > .food-grid { margin-top: 18px; }
.food-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 16px 0 18px; }
.food-card__name { grid-column: 1; font: 700 18px/1.35 var(--text); letter-spacing: 0; text-wrap: pretty; }
.food-card__name > .data:first-child { margin-right: 4px; font: 400 21px/1 var(--display); color: var(--tomato); }
.food-card__num {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-top: 1px;
  font: 400 30px/1 var(--display); letter-spacing: -0.005em; text-align: right; white-space: nowrap;
}
.food-card__meta { grid-column: 1; margin-top: 4px; font: 500 14px/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--smoke); }
.food-card__note { grid-column: 1 / -1; margin-top: 8px; font-size: 17px; line-height: 1.5; }
.food-card__note .data { font-weight: 700; }
/* Cards with a figures row (protein · bites · per bite) sit as square Bone blocks. */
.food-card:has(> .food-card__figures) { display: block; padding: 18px 18px 16px; background: var(--bone); }
.food-grid:has(> .food-card > .food-card__figures) { gap: 10px; }
h3.food-card__name, .food-card:has(> .food-card__figures) .food-card__name { font: 400 22px/1.15 var(--display); letter-spacing: -0.005em; }
.food-card__portion { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--smoke); }
.food-card__figures { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.food-card__figure { display: grid; gap: 4px; }
.food-card__figure .label { font-size: 13px; letter-spacing: .1em; color: var(--smoke); }
.food-card__figure .food-card__num { grid-row: auto; grid-column: auto; padding: 0; font-size: 22px; text-align: left; }
.food-card__figure:first-child .food-card__num { font-size: 30px; }
/* Cards in two labelled parts and no numeral (the eating-out menu decoder: "Order this", "First four
   bites") sit on Bone like a menu section: the place in Gloock, the labels as quiet tracked caps (A2). */
.food-grid:has(> .food-card > .food-card__meta ~ .food-card__meta) { gap: 10px; }
.food-card:has(> .food-card__meta ~ .food-card__meta) { display: block; padding: 18px 20px 20px; background: var(--bone); }
.food-card:has(> .food-card__meta ~ .food-card__meta) > .food-card__name { display: block; font: 400 25px/1.12 var(--display); letter-spacing: -0.005em; }
.food-card:has(> .food-card__meta ~ .food-card__meta) > .food-card__meta { display: block; margin-top: 14px; font: 700 13px/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.food-card:has(> .food-card__meta ~ .food-card__meta) > .food-card__note { margin-top: 5px; }
@media (min-width: 560px) {
  .food-grid--3:has(> .food-card > .food-card__figures) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .food-grid:has(> .food-card > .food-card__meta ~ .food-card__meta) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================== 13 day cards + chips */
/* The Day Card: white paper on a Bone band, a 7px band in the day's colour on top,
   meals as menu rows (time · food · protein numeral), a 2px Ink rule over the total. */
.day-band { margin: 36px calc(-1 * var(--bleed)); padding: 24px var(--bleed) 28px; background: var(--bone); --kicker: var(--tomato-deep); }
:is(.prose, .week) > .day-band { margin-block: 36px; }
.day-plan {
  max-width: 680px; padding: 20px 18px 18px;
  background: var(--paper); border-top: 7px solid var(--saffron);
  box-shadow: var(--paper-shadow);
}
.day-plan--nh { border-top-color: var(--sea); }
.day-plan--h { border-top-color: var(--tomato); }
.day-plan--any { border-top-color: var(--ink); }
.day-plan__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; }
.day-plan__title { font: 400 34px/1 var(--display); letter-spacing: -0.012em; scroll-margin-top: calc(var(--head-h) + 80px); }
/* The day chips jump to the card itself, not its title. html's scroll-padding-top already clears the header; this adds
   the sticky chips bar (64px) and a little air, so the day's title is never cut (RT-05, V-design) */
.week .day-plan[id] { scroll-margin-top: 72px; }
.day-plan__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.day-plan__table { width: 100%; margin-top: 10px; }
.day-plan__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.day-plan__table tr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas: "t w g" ". b g"; column-gap: 12px; padding: 12px 0;
}
.day-plan__table td { display: block; padding: 0; }
.day-plan__table td[data-cell="Time"], .day-plan__table td[data-cell="Day"] { grid-area: t; padding-top: 2px; font: 700 14px/1.45 var(--text); letter-spacing: .03em; color: var(--smoke); font-variant-numeric: tabular-nums; }
.day-plan__table td[data-cell="What"] { grid-area: w; font-size: 17px; line-height: 1.4; }
.day-plan__table td[data-cell="Bites"], .day-plan__table td[data-cell="Portions"] { grid-area: b; margin-top: 3px; font: 500 14px/1.3 var(--text); color: var(--smoke); }
.day-plan__table td[data-cell="Bites"]::after { content: " bites"; }
.day-plan__table td[data-cell="Portions"]::after { content: " portions"; }
.day-plan__table td[data-cell="Protein"] { grid-area: g; align-self: start; min-width: 56px; padding-top: 1px; font: 400 30px/1 var(--display); text-align: right; white-space: nowrap; }
.day-plan__table tfoot tr {
  grid-template-areas: "l l g" "b b g"; margin-top: 4px; padding-top: 16px; padding-bottom: 0;
  box-shadow: inset 0 2px 0 var(--ink);
}
.day-plan__table tfoot td:first-child { grid-area: l; font: 700 15px/1.3 var(--text); }
.day-plan__table td:empty { display: none; }
.day-plan__table tfoot td[data-cell="Bites"]::before { content: "about "; }
.day-plan__table tfoot td[data-cell="Protein"] { font-size: 52px; line-height: .86; }
.day-plan__foot-note { margin-top: 14px; font-size: 15px; line-height: 1.5; }
/* A Day Card whose first column is a label, not a time (a stage of the cook, a base food): the label
   gets its own bold line over the food, the numeral stays on the right. */
.day-plan--labels .day-plan__table tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s g" "w g" "b g"; }
.day-plan--labels .day-plan__table tfoot tr { grid-template-areas: "l g" "b g"; }
.day-plan--labels .day-plan__table :is(td[data-cell="Stage"], td[data-cell="Dense"], td[data-cell="Base"]) { grid-area: s; font: 700 16px/1.35 var(--text); }
.day-plan--labels .day-plan__table td[data-cell="Plus"] { grid-area: w; margin-top: 2px; font-size: 17px; line-height: 1.4; }
.day-plan__foot-note .data { font-weight: 700; }
.day-plan--note { max-width: none; margin-block: 28px; padding: 0; background: none; border-top: 0; box-shadow: none; }
.day-plan--note .day-plan__foot-note { margin-top: 0; font-size: 17px; line-height: 1.55; }
@media (min-width: 760px) { .day-band { padding: 32px var(--bleed) 36px; } .day-plan { padding: 24px 26px 22px; } }

/* The appetite scale: three ringed dots, always beside the word. More dots, more appetite. */
.dots { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.dots i { width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.daytype--nh .dots i.on { background: var(--sea); }
.daytype--n .dots i.on { background: var(--saffron); }
.daytype--h .dots i.on { background: var(--tomato); }
.daytype {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font: 700 13px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.daytype--nh { color: var(--sea); }
.day-note { font: 600 14px/1.3 var(--text); color: var(--smoke); }

/* Day chips: Mon … Sun · List, sticky while the reader is inside the week. */
.week { position: relative; }
.daychips {
  position: sticky; top: var(--head-h); z-index: 20;
  display: flex; gap: 2px; margin: 28px calc(-1 * var(--bleed)) 0; padding: 10px max(10px, calc(var(--bleed) - 8px));
  background: var(--paper);
  transition: top .28s var(--ease);
}
html[data-head="hidden"] .daychips { top: 0; }
.daychips a {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; max-width: 84px; height: 44px; padding: 0;
  background: var(--bone); color: var(--ink); text-decoration: none;
  font: 700 15px/1 var(--text);
}
.daychips a:hover { background: var(--bone-deep); }
.daychips a[aria-current="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 359px) { .daychips a { font-size: 13.5px; } }

/* Bite meter: quiet square pips (bites are only ever a second unit). */
.bite-meter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pips { display: inline-flex; align-items: center; gap: 3px; }
.pip { width: 9px; height: 9px; background: var(--bone-deep); }
.pip--filled { background: var(--ink); }
.bite-meter__count { margin-left: 4px; font: 700 13px/1 var(--text); color: var(--smoke); }
.bite-meter__label { font: 500 14px/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--smoke); }
.bite-divider { display: flex; justify-content: center; gap: 6px; height: auto; margin: 56px auto !important; }
.bite-divider .pip { width: 7px; height: 7px; }

/* ===================================================================== 14 charts */
.chart { margin: 40px calc(-1 * var(--bleed)); padding: 24px var(--bleed) 22px; background: var(--bone); --kicker: var(--tomato-deep); }
:is(.prose, .week) > .chart { margin-block: 40px; }
.chart__title { display: block; margin-bottom: 18px; font: 400 23px/1.15 var(--display); letter-spacing: -0.005em; text-transform: none; color: var(--ink); text-wrap: balance; }
.chart__note { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.chart__note .data { font-weight: 700; }
.chart__note a { color: var(--tomato-deep); text-underline-offset: 3px; }

/* Bars: a ranked list with a bar under each name. The best bar is Ink, the others Smoke, the "looks like a meal"
   one Fog. No day colours here: Tomato means Hungry everywhere else (D-13). */
.chart-bars__list { list-style: none; display: grid; gap: 14px; }
.chart-bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; column-gap: 12px; row-gap: 6px; align-items: end; }
.chart-bars__label { grid-area: l; font: 600 15px/1.3 var(--text); }
.chart-bars__value { grid-area: v; font: 400 22px/1 var(--display); text-align: right; white-space: nowrap; }
.chart-bars__track { grid-area: t; display: block; height: 10px; background: var(--paper); }
.chart-bars__bar { display: block; height: 100%; background: var(--smoke); }
.chart-bars__bar--best { background: var(--ink); }
.chart-bars__bar--muted { background: var(--fog); }
@media (min-width: 760px) {
  .chart-bars__row { grid-template-columns: minmax(0, 290px) minmax(0, 1fr) 64px; grid-template-areas: "l t v"; align-items: center; column-gap: 16px; }
}

/* Day fill: the day's protein added up across the clock. Geometry in SVG, words in HTML. */
.chart-dayfill__frame { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; }
.chart-dayfill__y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font: 600 13px/1 var(--text); color: var(--smoke); }
.chart-dayfill__plot { position: relative; background: var(--paper); }
.chart-dayfill__plot svg { display: block; width: 100%; height: 170px; }
.chart-dayfill__area { fill: var(--bone-deep); }
.chart-dayfill__line { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart-dayfill__target { stroke: var(--tomato); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.chart-dayfill__noon { stroke: var(--fog); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart-dayfill__flag {
  position: absolute; right: 4px; transform: translateY(-110%); margin: 0; padding: 2px 6px; background: var(--paper);
  font: 700 13px/1.2 var(--text); letter-spacing: .02em; text-transform: none; white-space: nowrap; color: var(--tomato-deep);
}
.chart-dayfill__cut {
  position: absolute; bottom: 4px; transform: translateX(-50%); margin: 0; padding: 2px 6px; background: var(--paper);
  font: 700 13px/1.2 var(--text); letter-spacing: .02em; text-transform: none; white-space: nowrap; color: var(--smoke);
}
.chart-dayfill__x { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0 52px; }
.chart-dayfill__x b { display: block; font: 700 14px/1.2 var(--text); font-variant-numeric: tabular-nums; }
.chart-dayfill__x .label { display: block; margin-top: 2px; font: 400 21px/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (min-width: 760px) { .chart-dayfill__plot svg { height: 220px; } }

/* Three kinds of day, side by side: the appetite scale in a chart. */
.chart-gears { list-style: none; display: grid; gap: 10px; }
.chart-gears__col { padding: 16px 16px 18px; background: var(--paper); }
.chart-gears__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.chart-gears__stat { font: 700 15px/1.3 var(--text); white-space: nowrap; }
.chart-gears__pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 12px; }
.chart-gears__pips .pip { width: 8px; height: 8px; }
.chart-gears__what { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.chart-gears__figs { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.chart-gears__num { display: block; font: 400 26px/1 var(--display); }
@media (min-width: 760px) { .chart-gears { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The bowl: one meal with its protein written beside it, item by item. With a photo of that food
   (c2_article.py config "plate_photo") the photo runs edge to edge on a phone and takes the left
   column from 760px; without one, the old drawing of the bowl stays, smaller. */
.plate-visual svg { width: 100%; max-width: 190px; height: auto; margin: 0 auto 18px; }
.plate-visual__photo { margin: 0 calc(-1 * var(--bleed)) 18px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone-deep); }
.plate-visual__photo img { width: 100%; height: 100%; object-fit: cover; }
.plate-visual .pv-bowl { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.plate-visual .pv-rim { fill: none; stroke: var(--bone-deep); stroke-width: 6; }
.plate-visual .pv-food { fill: #F7F3EC; stroke: var(--fog); stroke-width: 1.5; }
.plate-visual .pv-accent { fill: var(--tomato); }
.plate-visual__legend { list-style: none; display: grid; gap: 0; }
.plate-visual__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 16px; }
.plate-visual__g { font: 400 24px/1 var(--display); white-space: nowrap; }
.plate-visual__total { margin-top: 6px; padding-top: 12px; box-shadow: inset 0 2px 0 var(--ink); font: 700 16px/1.4 var(--text); }
@media (min-width: 760px) {
  .plate-visual { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; align-items: center; }
  .plate-visual > .chart__title { grid-column: 1 / -1; }
  .plate-visual > svg { grid-column: 1; grid-row: 2 / span 3; margin: 0; }
  .plate-visual > .plate-visual__photo { grid-column: 1; grid-row: 2 / span 3; align-self: stretch; margin: 0; aspect-ratio: auto; min-height: 240px; }
  .plate-visual > :not(svg):not(.chart__title):not(.plate-visual__photo) { grid-column: 2; }
}

/* ===================================================================== 15 cards, quotes, notes */
/* Compare: the old way on Bone, the new way as white paper. */
.compare-cards { display: grid; gap: 12px; margin: 36px calc(-1 * var(--bleed)); padding: 22px var(--bleed); background: var(--bone); --kicker: var(--tomato-deep); }
:is(.prose, .week) > .compare-cards { margin-block: 36px; }
.compare-card { padding: 18px 18px 20px; background: var(--paper); box-shadow: var(--paper-shadow); }
.compare-card--was { background: transparent; box-shadow: none; padding-inline: 0; }
.compare-card .label { display: block; color: var(--kicker); }
.compare-card--was .label { color: var(--smoke); }
.compare-card__title { margin-top: 8px; font: 400 24px/1.12 var(--display); }
.compare-card__list { list-style: none; display: grid; gap: 8px; margin-top: 12px; font-size: 16px; line-height: 1.45; }
.compare-card__list li { position: relative; padding-left: 20px; }
.compare-card__list li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 7px; height: 7px; background: var(--ink); }
.compare-card--was .compare-card__list li::before { background: var(--fog); }
@media (min-width: 760px) { .compare-cards { grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px var(--bleed); } .compare-card--was { padding-inline: 4px 18px; } }

.callout { margin: 32px 0; padding: 18px 20px 20px; background: var(--bone); --kicker: var(--tomato-deep); }
/* Safety boxes take an Ink band, so they never read as a Hungry Day Card (Tomato is a day type) (D-16, V-design) */
.callout--warn, .callout--warning { border-top: 7px solid var(--ink); }
.callout .label, .callout__label { display: block; margin-bottom: 8px; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.callout p { font-size: 16.5px; line-height: 1.55; }
.callout p + p { margin-top: 10px; }
.callout a { color: var(--tomato-deep); text-underline-offset: 3px; }

.pull-quote { margin: 48px 0; }
.pull-quote__text { margin: 0; font: 400 30px/1.14 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.pull-quote__text::before { content: "\201C"; display: block; height: 30px; font: 400 76px/.85 var(--display); color: var(--tomato); }
.pull-quote__cite { display: block; margin-top: 16px; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
@media (min-width: 760px) { .pull-quote__text { font-size: 38px; } }

.stat-band { margin: 36px calc(-1 * var(--bleed)); padding: 24px var(--bleed); background: var(--bone); --kicker: var(--tomato-deep); }
:is(.prose, .week) > .stat-band { margin-block: 36px; }
.stat-band > .label { display: block; color: var(--kicker); }
.stat-band__list { list-style: none; display: grid; gap: 18px; margin-top: 14px; }
.stat-band__num { display: block; font: 400 40px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.stat-band__what { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; }
.stat-band__source { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--smoke); }
.stat-band__source a { color: var(--tomato-deep); }
@media (min-width: 760px) { .stat-band__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* The short version: a white card made to be screenshotted. */
.screenshot-wrap { margin-top: 56px; padding: 28px var(--gutter) 32px; background: var(--bone); }
.screenshot-card { max-width: 680px; margin: 0 auto; padding: 22px 20px 20px; background: var(--paper); border-top: 7px solid var(--ink); box-shadow: var(--paper-shadow); }
.screenshot-card > .label { display: block; color: var(--tomato); }
.screenshot-card__title { margin-top: 10px; font: 400 28px/1.1 var(--display); }
/* Two true columns (D-09, V-design): every row shares one numeral column, sized by the widest numeral up to a
   cap; a long label ("Sweet or savory") wraps inside its column instead of pushing its row out of line. */
.screenshot-card__list { list-style: none; display: grid; grid-template-columns: fit-content(118px) minmax(0, 1fr); column-gap: 14px; margin-top: 14px; }
.screenshot-card__list li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: 10px 0; font-size: 16px; line-height: 1.45; }
.screenshot-card__n { font: 400 24px/1.05 var(--display); letter-spacing: -0.005em; text-wrap: balance; }
.screenshot-card__n + span { min-width: 0; }
.screenshot-card .bite-meter { margin-top: 12px; }
.screenshot-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 18px; padding-top: 14px; box-shadow: inset 0 2px 0 var(--ink); }
.screenshot-card__domain { font: 400 22px/1 var(--display); }
.screenshot-card__foot .label { letter-spacing: 0; text-transform: none; font: 500 15px/1.3 var(--text); color: var(--smoke); }
.domino { font: 400 22px/1.2 var(--display); }
@media (min-width: 760px) { .screenshot-wrap { padding: 44px var(--gutter) 48px; } .screenshot-card { padding: 28px 30px 24px; } .screenshot-card__list { grid-template-columns: fit-content(240px) minmax(0, 1fr); column-gap: 22px; } }

/* Save for later: the pin, then one Ink button. */
.save-pin {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center;
  margin-top: 48px; padding: 22px var(--gutter); background: var(--bone); --kicker: var(--tomato-deep);
}
.save-pin__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone-deep); box-shadow: var(--paper-shadow); }  /* the page's own 4:5 C2 crop (D-02) */
.save-pin__media img { width: 100%; height: 100%; object-fit: cover; }
.save-pin .label { display: block; color: var(--kicker); }
.save-pin__title { margin-top: 6px; font: 400 23px/1.12 var(--display); }
.save-pin__note { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--smoke); }
.save-pin .btn { margin-top: 12px; min-height: 48px; padding: 8px 18px; font-size: 15.5px; }
@media (min-width: 760px) { .save-pin { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 28px 32px; } .save-pin__title { font-size: 28px; } }

/* FAQ in articles: always open (the words match the FAQ schema), white blocks on Bone. */
.faq { display: grid; gap: 6px; margin: 24px calc(-1 * var(--bleed)) 0; padding: 18px var(--bleed); background: var(--bone); --kicker: var(--tomato-deep); }
:is(.prose, .week) > .faq { margin-top: 24px; }
.faq__item { padding: 18px 18px 20px; background: var(--paper); }
.faq__q { font: 700 19px/1.35 var(--text); letter-spacing: 0; text-wrap: pretty; }
.faq__a { margin-top: 8px; }
.faq__a p { font-size: 17px; line-height: 1.55; }
.faq__a p + p { margin-top: 10px; }
.faq__a a { color: var(--tomato-deep); text-underline-offset: 3px; }
.faq__a .chart { margin: 18px 0 0; padding: 16px 16px 14px; }
@media (min-width: 760px) { .faq { padding: 24px var(--bleed); } .faq__item { padding: 22px 24px; } }
/* One FAQ, even where the page splits it (D-08, V-design): two FAQ blocks in a row, or a divider or Day Card
   between them, share one Bone ground with no white seam. Markup and FAQ JSON-LD are untouched. */
:is(.prose, .week) > .faq + .faq, :is(.prose, .week) > .bite-divider + .faq, :is(.prose, .week) > .day-band + .faq { margin-top: 0; padding-top: 0; }
:is(.prose, .week) > .faq:has(+ .faq) { padding-bottom: 6px; }
:is(.prose, .week) > .faq + .bite-divider { margin: 0 calc(-1 * var(--bleed)) !important; padding: 18px var(--bleed) 24px; background: var(--bone); border: 0; }
:is(.prose, .week) > .faq + .day-band { margin-top: 0; padding-top: 12px; }
:is(.prose, .week) > .day-band:has(+ .faq) { margin-bottom: 0; }

/* FAQ as <details> (kit page, home): white blocks on Bone, a Gloock + to open. */
.faq-list { display: grid; gap: 6px; }
.faq-list details { padding: 0 18px; background: var(--paper); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 700 18px/1.3 var(--text);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 400 30px/1 var(--display); color: var(--tomato-deep); }
.faq-list details[open] summary::after { content: "\2013"; }
.faq-list details > :not(summary) { padding-bottom: 18px; font-size: 17px; line-height: 1.55; }

/* ===================================================================== 16 read next, colophon */
.read-next { margin-top: 56px; }
.read-next__list { list-style: none; display: grid; gap: 22px; margin-top: 16px; }
.read-next__item a { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 16px; align-items: center; color: var(--ink); text-decoration: none; }
.read-next__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); }
.read-next__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.read-next__item a:hover img { transform: scale(1.03); }
.read-next__title { display: block; margin-top: 8px; font: 400 23px/1.12 var(--display); letter-spacing: -0.005em; text-wrap: balance; }
.read-next__item a:hover .read-next__title { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.read-next__meta { display: block; margin-top: 6px; font: 500 14px/1.35 var(--text); color: var(--smoke); }
.read-next__item--text a { display: block; padding: 16px 18px; background: var(--bone); }
@media (min-width: 760px) {
  .read-next { max-width: calc(var(--max) + 2 * var(--gutter)); }
  .read-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .read-next__item a { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .read-next__body { padding-top: 14px; }
}

/* Who makes this: the colophon at the foot of every article (sources live here). */
.colophon { margin-top: 56px; padding: 40px 0 48px; background: var(--bone); --kicker: var(--tomato-deep); }
.colophon__lead { margin-top: 12px; font: 400 30px/1.12 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.facts { list-style: none; display: grid; gap: 0; margin-top: 18px; }
.facts li { padding: 14px 0 6px; font-size: 17px; line-height: 1.5; }
.facts li > .kicker { margin-bottom: 6px; }
.facts a { color: var(--tomato-deep); text-underline-offset: 3px; font-weight: 600; }
.sources { list-style: none; display: grid; gap: 8px; margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
.sources li { position: relative; padding: 0 0 0 18px; }
.sources a { display: inline-block; padding-block: 4px; }
.sources li::before { content: ""; position: absolute; left: 1px; top: calc(.55em + 4px); width: 6px; height: 6px; background: var(--ink); }
@media (min-width: 1100px) {
  .colophon__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; max-width: calc(1040px + 2 * var(--gutter)); }
  .colophon__lead { font-size: 40px; }
  .facts { margin-top: 0; }
}

/* ===================================================================== 17 kit offers + sticky bar */
/* One kit, many doors. Every block carries data-qhook="<place>" and links to
   kit.html?from=<slug>&at=<place>. Saffron appears here and nowhere else. */
.kit-offer--full { margin: 48px calc(-1 * var(--bleed)); background: var(--bone); --kicker: var(--tomato-deep); }
:is(.prose, .week) > .kit-offer--full { margin-block: 48px; }
.kit-offer__photo { aspect-ratio: 10 / 7; overflow: hidden; background: var(--bone-deep); }
.kit-offer__photo img { width: 100%; height: 100%; object-fit: cover; }
/* The photo keeps its own shape at every width, so no card title is ever cut (R-design D-01): the fan is
   10:7, the still life 3:2 (the :has() reads the photo, no markup needed). */
.kit-offer__photo:has(img[src*="kit-still-life"]) { aspect-ratio: 3 / 2; }
.kit-offer__body { padding: 26px var(--bleed) 32px; }
.kit-offer__title { display: block; margin-top: 10px; font: 400 32px/1.06 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.kit-offer__sub { margin-top: 12px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.kit-offer__list { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.kit-offer__list li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.45; }
.kit-offer__list li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px; background: var(--ink); }
.kit-offer__body .btn { margin-top: 22px; }
.kit-offer__fine { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--smoke); }
.kit-offer--full .kit-offer__photo + .kit-offer__body { padding-top: 24px; }
@media (min-width: 760px) {
  /* The photo sits beside the words at its own shape, centred on the Bone ground, never stretched to
     the height of the words (that cut "Day Card #1" to "ay Card #1"). */
  .kit-offer--full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .kit-offer__photo { align-self: center; }
  .kit-offer__body { padding: 32px 32px 34px; }
  .kit-offer__title { font-size: 34px; }
  .kit-offer__body .btn { width: auto; }
  /* The closing offer carries the list of what's inside. Beside the photo, the list made the words twice as
     tall as the photo, which then floated in empty Bone (D-01). Here the photo and the words share the top
     row and the list runs as a strip under both: the body's own box steps aside (display: contents), its
     parts take the right-hand column, and the two 1fr rows centre them on the photo (F1, 26 Oct 2026). */
  .kit-offer--full:has(> .kit-offer__body > .kit-offer__list) {
    grid-template-rows: 1fr repeat(5, auto) 1fr auto;
    grid-template-areas: "photo ." "photo k" "photo t" "photo s" "photo b" "photo f" "photo ." "list list";
    align-items: start; padding-bottom: 34px;
  }
  .kit-offer--full > .kit-offer__photo:has(+ .kit-offer__body > .kit-offer__list) { grid-area: photo; align-self: center; }
  .kit-offer--full > .kit-offer__body:has(> .kit-offer__list) { display: contents; }
  .kit-offer__body:has(> .kit-offer__list) > * { margin-inline: 32px; }
  .kit-offer__body:has(> .kit-offer__list) > .kicker { grid-area: k; margin-top: 26px; }
  .kit-offer__body:has(> .kit-offer__list) > .kit-offer__title { grid-area: t; }
  .kit-offer__body:has(> .kit-offer__list) > .kit-offer__sub { grid-area: s; }
  .kit-offer__body:has(> .kit-offer__list) > .btn { grid-area: b; justify-self: start; }
  .kit-offer__body:has(> .kit-offer__list) > .kit-offer__fine { grid-area: f; margin-bottom: 26px; }
  .kit-offer__body > .kit-offer__list { grid-area: list; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 24px; }
  .kit-offer__body > .kit-offer__list li { font-size: 16px; }
}
@media (min-width: 1100px) {
  .kit-offer--full, :is(.prose, .week) > .kit-offer--full { margin-inline: calc((var(--col) - 1000px) / 2); grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .kit-offer__body { padding: 40px 44px 42px; }
  .kit-offer__title { font-size: 40px; }
  .kit-offer__body:has(> .kit-offer__list) > * { margin-inline: 44px; }
  .kit-offer__body > .kit-offer__list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; }
  .kit-offer__body > .kit-offer__list li { font-size: 15.5px; }
}

/* Slim inline door: one line, one tap. */
.kit-offer--inline {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 14px; align-items: center;
  margin: 36px 0; padding: 10px; background: var(--bone); --kicker: var(--tomato-deep);
  color: var(--ink); text-decoration: none;
}
.kit-offer__thumb { aspect-ratio: 1; overflow: hidden; background: var(--bone-deep); }
.kit-offer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kit-offer__text { font-size: 16px; line-height: 1.4; }
.kit-offer__text b { font-weight: 800; }
.kit-offer__go { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--saffron); color: var(--ink); }
.kit-offer--inline:hover .kit-offer__go { background: var(--saffron-deep); }
.band--bone :is(.kit-offer--full, .kit-offer--inline) { background: var(--paper); }
.kit-offer--inline:hover .kit-offer__text { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 760px) { .kit-offer--inline { grid-template-columns: 76px minmax(0, 1fr) 48px; gap: 18px; padding: 12px; } .kit-offer__text { font-size: 17px; } .kit-offer__go { width: 48px; height: 48px; } }

/* The phone's slim kit bar: Ink, 56px with the safe area, after the first kit block has
   passed, out of the way while any kit block or form is on screen, dismissible for 7 days. */
.kitbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 4px;
  min-height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px) var(--gutter);
  background: var(--ink); color: var(--paper);
  transform: translateY(110%); visibility: hidden;
  transition: transform .28s var(--ease), visibility 0s linear .28s;
}
.kitbar[data-shown="true"] { transform: none; visibility: visible; transition: transform .28s var(--ease), visibility 0s; }
.kitbar :focus-visible { outline-color: var(--saffron); outline-offset: -3px; }
.kitbar__link {
  flex: 1; display: flex; align-items: center; gap: 8px; min-height: 56px;
  color: var(--paper); text-decoration: none; font: 650 16px/1.25 var(--text);
}
.kitbar__link b { color: var(--saffron); font-weight: 800; }
.kitbar__link svg { flex: none; color: var(--saffron); }
.kitbar__x { flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--fog); cursor: pointer; }
.kitbar__x:hover { color: var(--paper); }
@media (max-width: 359px) { .kitbar__link { font-size: 15px; } }
@media (min-width: 760px) { .kitbar { display: none; } }

/* ===================================================================== 18 kit form (bridge) */
/* kit.html: <form data-lead-form data-variant="kit" data-stage="starter-kit" novalidate>.
   main.js saves it and opens magnets/starter-kit.html?welcome=1. Field 16px+ so iOS never zooms. */
.signup { display: grid; gap: 10px; margin-top: 24px; }
.signup label { font: 700 15px/1.2 var(--text); }
.signup input[type="email"] {
  width: 100%; height: 56px; padding: 0 16px;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 0; -webkit-appearance: none; appearance: none;
  font: 400 18px/1 var(--text);
}
.signup input[type="email"]::placeholder { color: #8A847D; }
.signup input[type="email"]:focus-visible { outline: 3px solid var(--saffron); outline-offset: 0; border-color: var(--ink); }
.signup input[aria-invalid="true"] { border-color: var(--tomato-deep); border-width: 2px; }
.form-msg { min-height: 0; font: 600 15px/1.45 var(--text); }
.form-msg:empty { display: none; }
.form-msg--error { color: var(--tomato-deep); }
.form-msg--success { color: var(--ink); }
.form-msg a { color: inherit; text-underline-offset: 3px; }
.signup__fine, [data-consent-text] { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--smoke); }
/* The honeypot (G-05): off the page, out of the tab order, hidden from screen readers. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup__fine a, [data-consent-text] a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 1100px) {
  .signup--row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; }
  .signup--row > :not(input):not(button) { grid-column: 1 / -1; }
  .signup--row .btn { width: auto; }
}

/* ===================================================================== 19 home + hubs */
/* The core pages (A3, 26 Oct 2026; built by fewbites-build/c2/tools/a3/build_core.py).
   Home order: cover, "How hungry are you today?", the free cards, easy places to start, a normal day written out,
   the most protein per bite, smaller plate same table, just the food honestly, coming, end band.
   Hubs (meal-plans, snacks, grocery-lists) open with the article top (section 9); start-here, about and 404 with
   .page-head; their guides are photo tiles with the guide's own protein line. */

/* Cover: the photo first, edge to edge, the headline under it (never over it). On a phone the photo is 4:3 and never
   taller than 37% of the screen, so the H1 and the Saffron button sit on the first 390 × 844 screen, and on a 660px
   Safari one. From 1100px it opens as a magazine spread: food on the left, words on the right. */
.cover__photo { position: relative; aspect-ratio: 4 / 3; max-height: 37svh; width: 100%; overflow: hidden; background: var(--bone); }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cover__cap, .fam__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 44px var(--gutter) 12px;
  background: linear-gradient(to top, rgba(23, 21, 19, .74) 0%, rgba(23, 21, 19, .62) 55%, rgba(23, 21, 19, 0) 100%);
  color: #fff; font: 600 14px/1.35 var(--text); text-shadow: 0 1px 2px rgba(23, 21, 19, .35); text-wrap: balance;
}
.cover__cap .num { font-size: 28px; line-height: .9; }
.cover__cap .num small { margin-left: 4px; font: 600 13px/1 var(--text); letter-spacing: .02em; }
.cover__text { padding: 18px var(--gutter) 4px; }
.cover__text .h1 { margin-top: 8px; }
.cover__text .lead { margin-top: 12px; font-size: 18px; line-height: 1.45; }
.cover__actions { display: grid; gap: 2px; justify-items: start; margin-top: 18px; }
.cover__actions .btn { width: 100%; }
.trustline { margin-top: 10px; max-width: 46ch; font: 500 14px/1.6 var(--text); color: var(--smoke); }
/* Short phone screens (RT-04, V-design): at about 390 × 660 (Safari with toolbars, Pinterest's browser) 37% left the
   Saffron button at 678px; 31% puts it on the first screen. */
@media (max-width: 759px) and (max-height: 800px) { .cover__photo { max-height: 31svh; } }
@media (min-width: 760px) {
  .cover__photo { aspect-ratio: 16 / 9; max-height: 52svh; }
  .cover__text { max-width: 760px; padding-top: 34px; }
  .cover__text .lead { font-size: 20px; line-height: 1.5; }
  .cover__actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 4px; margin-top: 26px; }
  .cover__actions .btn { width: auto; white-space: nowrap; }
}
@media (min-width: 1100px) {
  .cover { display: grid; grid-template-columns: minmax(0, 56%) minmax(0, 1fr); align-items: center; max-width: 1440px; margin: 0 auto; }
  .cover__photo { aspect-ratio: auto; height: clamp(560px, calc(100svh - var(--head-h)), 780px); max-height: none; }
  .cover__text { max-width: 640px; padding: 40px var(--gutter) 40px 64px; }
  .cover .h1 { font-size: 76px; line-height: 1; }
  .cover__text .lead { margin-top: 18px; font-size: 21px; }
  .cover__actions { margin-top: 30px; }
  .cover__cap, .fam__cap { padding-inline: 32px; }
}

/* Picker: How hungry are you today? Three photo rows on a phone (the photo swaps sides), three columns from 760px.
   Each row opens the guide that fits that kind of day; the dots are the appetite scale. */
.picker { padding-bottom: 52px; }
.section-head .lead { margin-top: 12px; }
.pick-list { list-style: none; display: grid; gap: 22px; }
.pick a { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 18px; align-items: center; color: var(--ink); text-decoration: none; }
.pick:nth-child(even) a { grid-template-columns: minmax(0, 1fr) 46%; }
.pick:nth-child(even) .pick__img { order: 2; }
.pick__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); }
.pick__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pick a:hover .pick__img img { transform: scale(1.03); }
.pick__text { display: block; padding-right: var(--gutter); }
.pick:nth-child(even) .pick__text { padding: 0 0 0 var(--gutter); }
.pick__text .dots i { width: 13px; height: 13px; }
.pick__name { display: block; margin-top: 10px; font: 400 31px/1.02 var(--display); letter-spacing: -0.01em; }
.pick__line { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; }
.pick__more {
  display: inline-block; margin-top: 12px; font: 700 15px/1.35 var(--text);
  text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.pick__more svg { display: inline-block; vertical-align: -3px; margin-left: 6px; }
.pick a:hover .pick__more { text-decoration-color: var(--ink); }
.picker__foot { margin-top: 30px; }
.picker__note { font-size: 16px; line-height: 1.45; color: var(--smoke); }
@media (max-width: 359px) { .pick__name { font-size: 27px; } .pick__line { font-size: 15px; } }
@media (min-width: 760px) {
  .pick-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
  .pick a, .pick:nth-child(even) a { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .pick:nth-child(even) .pick__img { order: 0; }
  .pick__text, .pick:nth-child(even) .pick__text { padding: 18px 0 0; }
  .pick__name { font-size: 34px; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  background: var(--bone); color: var(--ink); text-decoration: none;
  font: 600 15px/1.1 var(--text);
  --kicker: var(--tomato-deep);
}
a.chip:hover { background: var(--bone-deep); }
.band--bone .chip { background: var(--paper); }   /* a Bone chip would vanish on a Bone band */
.chip[aria-current="page"], .chip.is-on { background: var(--ink); color: var(--paper); }

/* The free cards on the home page: the printed Starter Cards on the breakfast table, then the offer. No form here:
   the one form lives on kit.html (bridge mode), so this is a door with data-qhook="inline". */
.home-kit { background: var(--bone); --kicker: var(--tomato-deep); }
.home-kit__in { max-width: 1440px; margin: 0 auto; }
.home-kit__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone-deep); }
.home-kit__img img { width: 100%; height: 100%; object-fit: cover; }
.home-kit__img > picture, .fam__img > picture, .end__img > picture, .perbite__photo > picture { display: block; width: 100%; height: 100%; }
.home-kit__cap { padding: 10px var(--gutter) 0; font: 500 14px/1.45 var(--text); color: var(--smoke); }
.home-kit__body { padding: 26px var(--gutter) 56px; }
.home-kit__body .h2 { margin-top: 10px; }
.home-kit__body .kit-offer__list { margin-top: 18px; }
.home-kit__body .btn { width: 100%; margin-top: 26px; }
@media (min-width: 760px) {
  /* The still life stays 3:2 at every width, so the grocery-list title is never cut (D-01). */
  .home-kit__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .home-kit__cap { padding: 10px var(--gutter) 16px; }
  .home-kit__body { max-width: 600px; padding: 48px var(--gutter) 52px 40px; }
  .home-kit__body .btn { width: auto; }
}
@media (min-width: 1100px) {
  .home-kit__body { padding: 56px var(--gutter) 56px 64px; }
}

/* Photo tiles: boxless, two columns on a phone, captions under the photo. Home (one link per tile) and hubs
   (.tile--card: the title is the link and covers the tile; the guide's note, protein line and kind of day below). */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
.tile { display: block; color: var(--ink); text-decoration: none; }
.tile--card { position: relative; }
.tile__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.03); }
.tile .kicker { margin-top: 12px; letter-spacing: .12em; }
.tile__img + .tile__title { margin-top: 12px; }
.tile__title { display: block; margin-top: 6px; font: 400 21px/1.12 var(--display); letter-spacing: -0.005em; color: var(--ink); text-decoration: none; text-wrap: balance; }
.tile:hover .tile__title { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile__link:focus-visible { outline: none; }
.tile__link:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 4px; }
.tile__note { margin-top: 6px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.tile__meta { display: block; margin-top: 6px; font: 500 15px/1.35 var(--text); color: var(--smoke); }
.tile__meta b { color: var(--ink); font-weight: 750; }
.tile__day { margin-top: 10px; }
.daytype--any { color: var(--smoke); }
.tile__tag { display: inline-block; margin-top: 10px; padding: 6px 9px; background: var(--bone); font: 700 13px/1.2 var(--text); }
.band--bone .tile__tag { background: var(--paper); }
.tiles--cards { gap: 36px 14px; }
@media (max-width: 359px) { .tile__title { font-size: 21px; } .tiles { column-gap: 10px; } }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; } .tile__title { font-size: 25px; } .tiles--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { gap: 56px 28px; } .tiles--hub { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .tiles--three > :last-child:nth-child(odd) { grid-column: 1 / -1; } .tiles--three > :last-child:nth-child(odd) .tile__img { aspect-ratio: 16 / 9; } }
.start__more { display: flex; flex-wrap: wrap; column-gap: 26px; margin-top: 26px; }

/* A normal day, written out: Monday's four meals as photos with menu numerals, then the Day Card itself. */
.normal-day__head .h2 { margin-top: 10px; }
.normal-day__head .lead { margin-top: 12px; }
.day-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 26px calc(-1 * var(--gutter)) 28px; }
.normal-day__card .link { margin-top: 14px; }
@media (min-width: 760px) { .day-photos { margin-inline: 0; } }
@media (min-width: 1100px) {
  .normal-day__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head card" "photos card"; column-gap: 64px; align-items: start; }
  .normal-day__head { grid-area: head; }
  .day-photos { grid-area: photos; margin: 30px 0 0; }
  .normal-day__card { grid-area: card; }
}

/* A standalone Day Card (home, thank-you page): a menu written out, as it prints in the Starter Cards. */
.daycard { padding: 20px 18px 18px; background: var(--paper); border-top: 7px solid var(--saffron); box-shadow: var(--paper-shadow); }
.daycard--nh { border-top-color: var(--sea); }
.daycard--h { border-top-color: var(--tomato); }
.daycard__label { margin-bottom: 10px; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.daycard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.daycard__name { font: 400 34px/1 var(--display); letter-spacing: -0.012em; }
.meals { list-style: none; margin-top: 12px; }
.meal { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0; }
.meal__time { padding-top: 2px; font: 700 14px/1.45 var(--text); letter-spacing: .03em; color: var(--smoke); font-variant-numeric: tabular-nums; }
.meal__food { font-size: 17px; line-height: 1.4; }
.meal__food span { display: block; margin-top: 3px; font-size: 14px; color: var(--smoke); }
.meal__g { min-width: 56px; padding-top: 1px; font: 400 30px/1 var(--display); text-align: right; white-space: nowrap; }
.daycard__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 16px; box-shadow: inset 0 2px 0 var(--ink); }
.daycard__total .t { font: 700 15px/1.35 var(--text); }
.daycard__total .t span { display: block; font-weight: 500; color: var(--smoke); }
.daycard__total .num { font-size: 52px; line-height: .86; }
.daycard__notes { display: grid; gap: 10px; margin: 18px 0 0; font-size: 15px; line-height: 1.5; }
.daycard__notes div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.daycard__notes dt { padding-top: 2px; font: 700 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tomato); }
.daycard__notes dd { margin: 0; }
@media (min-width: 760px) { .daycard { padding: 26px 28px 24px; } .daycard__name { font-size: 40px; } }

/* The most protein per bite: Tomato rank numerals, values in Gloock. The photo joins from 760px. */
.perbite__body .lead { margin-top: 12px; }
.perbite .rank { margin-top: 22px; }
.perbite__body .link { margin-top: 10px; }
.perbite__photo { display: none; }
.rank { list-style: none; }
.rank__head { display: flex; justify-content: space-between; padding-bottom: 8px; font: 700 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.rank li:not(.rank__head) { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; }
.rank__n { font: 400 26px/1 var(--display); color: var(--tomato); }
.rank__food { font-size: 17px; line-height: 1.35; }
.rank__g { font: 400 26px/1 var(--display); white-space: nowrap; }
@media (min-width: 760px) {
  .perbite__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .perbite__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bone); }
  .perbite__photo img { width: 100%; height: 100%; object-fit: cover; }
}

/* Smaller plate, same table: one honest photo (Taco night, your bowl pulled first) and the seven family dinners set
   like a menu, each with the protein in your bowl. */
.fam__head .lead { margin-top: 12px; }
.fam__photo { position: relative; margin: 26px calc(-1 * var(--gutter)) 0; }
.fam__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone-deep); }
.fam__img img { width: 100%; height: 100%; object-fit: cover; }
.fam__menu { margin-top: 24px; }
.fam__tag { display: inline-block; padding: 7px 10px; background: var(--paper); font: 700 13px/1.2 var(--text); }
.fam__key { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-bottom: 4px; font: 700 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.menu-list { list-style: none; }
.menu-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
.menu-list__dish { font: 600 17px/1.35 var(--text); }
.menu-list__g { font: 400 26px/1 var(--display); white-space: nowrap; }
.fam__menu .link { margin-top: 12px; }
@media (min-width: 760px) { .fam__photo { margin-inline: 0; } }
@media (min-width: 1100px) {
  .fam__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "head head" "photo menu"; column-gap: 64px; row-gap: 32px; align-items: center; }
  .fam__head { grid-area: head; }
  .fam__photo { grid-area: photo; margin: 0; }
  .fam__img { aspect-ratio: 4 / 3; }
  .fam__menu { grid-area: menu; margin-top: 0; }
}

/* Just the food, honestly: the colophon facts (C2 spec §6: a kicker over each line, no box, no tick marks), the
   way the articles close; the footer line under the heading in the text face, not a second display line (D-10). */
.trust__in { display: grid; gap: 22px; }
.trust__lead { margin-top: 14px; max-width: 32ch; font: 650 20px/1.4 var(--text); text-wrap: balance; }
.pack { margin: 0; }
.pack__row { display: grid; gap: 6px; padding: 14px 0 8px; }
.pack__row + .pack__row { margin-top: 4px; }
.pack dt { font: 700 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tomato); }
.pack dd { margin: 0; font-size: 17px; line-height: 1.5; }
.pack a { color: var(--tomato-deep); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 1100px) { .trust__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } }

.coming-band { background: var(--bone); }
.coming { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter); font-size: 17px; line-height: 1.45; }
.end__body .coming { max-width: none; margin: 18px 0 0; padding: 0; font-size: 16px; }

/* End band: every page but the articles closes on it. The printed cards, then the offer (a door to kit.html),
   on Bone, straight into the Ink footer. */
.end { background: var(--bone); --kicker: var(--tomato-deep); }
.end__in { max-width: 1440px; margin: 0 auto; }
.end__img { aspect-ratio: 10 / 7; overflow: hidden; background: var(--bone-deep); }
.end__img img { width: 100%; height: 100%; object-fit: cover; }
.end__body { padding: 30px var(--gutter) 60px; }
.end__body .h2 { margin-top: 10px; }
.end__body .lead { margin-top: 12px; }
.end__body .btn { margin-top: 24px; }
.hub .end, .page .end { margin-top: 64px; }
.page .about-facts { margin-bottom: 0; }
.page .about-facts + .end { margin-top: 0; }   /* about: the facts' Bone runs into the end band, no white seam */
@media (min-width: 760px) { .end__body { max-width: 680px; } .end__body .btn { width: auto; } }
@media (min-width: 1100px) {
  .end__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .end__body { max-width: 620px; padding: 56px var(--gutter) 56px 64px; }
  .hub .end, .page .end { margin-top: 96px; }
  .page .about-facts + .end { margin-top: 0; }
}

/* Hubs: the article top (section 9), the hub's own words in the reading column, then its guides as tiles. */
.hub-guides { padding-block: 52px 8px; }
.hub-guides__h { margin-bottom: 26px; }
.daytypes { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.specimen { padding: 16px 18px; background: var(--bone); }
@media (min-width: 760px) { .hub-guides { padding-top: 72px; } .hub-guides__h { margin-bottom: 36px; } }

/* Plain pages (start-here, about, 404): the head sits in the reading column. */
.page-head { padding-top: 30px; }
.page-head__title { margin-top: 10px; font: 400 42px/1.04 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.page-head .dek { margin-top: 12px; }
.page-head .byline { margin-top: 12px; }
.page--404 .tiles { margin-top: 28px; }
.page-hero { margin: 24px calc(-1 * var(--gutter)) 0; }
/* start-here's first screen (D-12): the three kinds of day as food, each with its ringed dots. */
.day-strip__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.day-strip__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); }
.day-strip__img img { width: 100%; height: 100%; object-fit: cover; }
.day-strip__item .daytype { flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 0 0 10px; }
@media (min-width: 760px) { .day-strip__list { gap: 16px; } .day-strip__item .daytype { flex-direction: row; gap: 9px; margin-left: 0; } }
@media (min-width: 760px) { .page-head { padding-top: 64px; } .page-head__title { font-size: 58px; } .page-hero { margin-inline: 0; } }

/* Proof (start-here, about): a kicker over each fact, no tick marks. */
.proof { margin-top: 48px; }
.proof__label { display: block; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.proof__list { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.proof__item { padding: 18px 20px; background: var(--bone); }
.band--bone .proof__item { background: var(--paper); }
.proof__stat { display: block; font: 400 30px/1 var(--display); letter-spacing: -0.01em; }
.proof__text { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; }
.proof__source { display: block; margin-top: 6px; font-size: 14px; color: var(--smoke); }

/* ===================================================================== 20 kit page */
/* kit.html (bridge mode): the printed cards on the table, the name, the subtitle, then the form, all on the first
   390 × 844 screen (the photo is never taller than 34% of the screen). Below: every page, what happens next, who
   makes this, questions, the form again. The thank-you page (Kit mode, later) shares the look. */
.kp-cover { aspect-ratio: 3 / 2; max-height: 34svh; width: 100%; overflow: hidden; background: var(--bone-deep); }
.kp-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.kp-cover--fan img { object-position: 50% 66%; }   /* the fan (#1, #10, #20), shown to a reader who came for Day Card #1 */
.kp-side { padding: 18px var(--gutter) 40px; }
.kp-title { margin-top: 8px; font: 400 42px/1.02 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.kp-side .lead { margin-top: 10px; font-size: 18px; line-height: 1.45; }
.kp-from { margin-top: 12px; padding: 8px 12px; background: var(--bone); font: 650 16px/1.4 var(--text); text-wrap: balance; }   /* the page she came from, named (RR-07) */
.kp-back { margin-bottom: 14px; padding: 10px 12px; background: var(--bone); font: 600 15px/1.45 var(--text); }
.kp-back a { color: var(--tomato-deep); font-weight: 700; text-underline-offset: 3px; }
.kp-side .signup { margin-top: 18px; }
@media (max-width: 359px) { .kp-title { font-size: 37px; } }
@media (min-width: 760px) {
  .kp-cover { aspect-ratio: 16 / 9; max-height: 50svh; }
  .kp-side { max-width: calc(640px + 2 * var(--gutter)); margin-inline: auto; padding-top: 34px; }
  .kp-title { font-size: 56px; }
}
@media (min-width: 1100px) {
  /* The still life keeps its 3:2 shape beside the words, so all three card titles stay in the frame (D-01),
     and the title fits one line (D-11). */
  .kp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; max-width: 1440px; margin: 0 auto; }
  .kp-cover { aspect-ratio: 3 / 2; height: auto; max-height: none; }
  .kp-side { max-width: 640px; margin: 0; padding: 40px var(--gutter) 40px 48px; }
  .kp-title { font-size: 60px; }
}

/* Every page in the kit: the real page renders as paper. */
.pages { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
.page__img { aspect-ratio: 360 / 466; overflow: hidden; background: var(--paper); box-shadow: 0 1px 0 rgba(23, 21, 19, .08), 0 16px 26px -16px rgba(23, 21, 19, .4); }
.page__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.page__n { display: block; margin-top: 14px; font: 400 26px/1 var(--display); color: var(--tomato-deep); }
.page__day { display: block; margin-top: 8px; }
.page__t { margin-top: 6px; font: 700 17px/1.25 var(--text); }
.page__d { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--smoke); }
@media (min-width: 760px) { .pages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; } }

/* Two columns on wide screens: a section's head on the left, its content on the right. */
.split__head .trust__lead { margin-top: 14px; }
.split .steps, .split .facts { margin-top: 18px; }
.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.narrow > .kicker + .h2 { margin-top: 10px; }
.narrow > .h2 + .lead { margin-top: 12px; }
@media (min-width: 1100px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .split .steps, .split .facts { margin-top: 0; }
}

/* Steps: Gloock numerals in Tomato. */
.steps { list-style: none; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
.steps .num { font-size: 40px; line-height: .9; color: var(--tomato); }
.steps b { display: block; font-size: 18px; }
.steps span:not(.num) { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--smoke); }

.kp-faq .faq-list { margin-top: 24px; }   /* white blocks on Bone, as in the C2 spec §6 (D-11) */
.kp-again .h2 { margin-top: 10px; }
.kp-again .lead { margin-top: 12px; }
.kp-again .signup { max-width: 560px; }

/* Thank-you page (Kit mode): the steps, the subject line in a box, one Ink button for the mail app. */
.thanks-top { padding-block: 26px 52px; }
.progress { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 26px; font: 700 14px/1.3 var(--text); color: var(--smoke); }
.progress li { display: inline-flex; align-items: center; gap: 8px; }
.progress__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font: 700 14px/1 var(--text); }
.progress .is-done .progress__mark { background: var(--ink); color: var(--paper); }
.progress .is-now { color: var(--ink); }
.thanks__title { margin-top: 10px; }
@media (max-width: 759px) { .thanks__title { font-size: 38px; } }
.thanks-top .lead { margin-top: 12px; }
.subject-box { margin-top: 22px; padding: 16px 18px; background: var(--bone); --kicker: var(--tomato-deep); }
.subject-box__k { font: 700 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.subject-box__s { margin-top: 6px; font: 700 19px/1.35 var(--text); text-wrap: balance; }
.thanks-top .btn { margin-top: 18px; }
.mail-links { margin-top: 8px; font-size: 15px; color: var(--smoke); }
.mail-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 650; text-underline-offset: 3px; }
.thanks-tips { list-style: none; display: grid; gap: 12px; margin-top: 18px; font-size: 16px; line-height: 1.5; }
.thanks-tips a { color: var(--tomato-deep); font-weight: 650; text-underline-offset: 3px; }
.thanks__card { margin-top: 24px; }
@media (min-width: 1100px) {
  .thanks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
  .thanks > .band { padding-top: 26px; }
  .thanks > .coming-band { grid-column: 1 / -1; }
}

/* ===================================================================== 21 legal + plain pages */
/* privacy, terms, medical-disclaimer, health-data: the chrome and a calm reading column; the words are unchanged. */
.doc { padding-block: 32px 72px; }
.doc__title { font: 400 40px/1.06 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.doc__head .dek { margin-top: 12px; }
.doc__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 16px 0 0; font: 500 14px/1.5 var(--text); color: var(--smoke); }
.doc__meta div { display: flex; flex-wrap: wrap; column-gap: 6px; }
.doc__meta dt { font-weight: 700; color: var(--ink); }
.doc__meta dd { margin: 0; }
.doc-toc { margin-top: 28px; padding: 16px 20px 8px; background: var(--bone); --kicker: var(--tomato-deep); }
.doc-toc ul { list-style: none; display: grid; gap: 0; margin-top: 6px; }
.doc-toc a { display: flex; align-items: center; min-height: 44px; font: 600 16px/1.3 var(--text); color: var(--ink); text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.doc-toc a:hover { text-decoration-color: var(--ink); }
.doc .prose { margin-top: 30px; font-size: 17px; }
.doc .prose h2 { margin-top: 52px; font-size: 28px; }
.doc .prose h3 { font-size: 22px; }
.doc .quick-answer { padding: 18px 20px; background: var(--bone); --kicker: var(--tomato-deep); }
.doc__contact a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 760px) {
  .doc { padding-block: 64px 96px; }
  .doc__title { font-size: 56px; }
  .doc .prose h2 { font-size: 34px; }
  .doc-toc ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

/* ===================================================================== 22 printables (magnets) */
/* A printable is a sheet of paper on screen and on the printer (A4, 25 Oct 2026).
   Screen: the wordmark and the print button, one glossy photo, the title under it, the content,
   cards as white paper on Bone, an Ink band to close.
   Paper (22e here, plus the shared print rules in 24): white, Ink type, Gloock numerals, square
   tick boxes, day colours only as thin bands and ringed dots. No photo, no Bone, no chrome, no
   links that only work on screen. The one exception is the cover of the Starter Cards PDF, which
   build_pdf.py renders with html.pdf-build. */

/* ---- 22a · the page */
.magnet { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.magnet__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--head-h); }
.magnet__logo { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font: 400 26px/1 var(--display); letter-spacing: -0.012em; white-space: nowrap; color: var(--ink); text-decoration: none; }
.magnet__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.magnet__photo { position: relative; margin: 0 calc(-1 * var(--bleed)); aspect-ratio: 3 / 2; overflow: hidden; background: var(--bone); }
.magnet__photo > picture { display: block; width: 100%; height: 100%; }
.magnet__photo img { width: 100%; height: 100%; object-fit: cover; }
.magnet__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 44px var(--bleed) 12px;
  background: linear-gradient(to top, rgba(23, 21, 19, .74) 0%, rgba(23, 21, 19, .62) 55%, rgba(23, 21, 19, 0) 100%);
  color: #fff; font: 600 14px/1.35 var(--text); text-shadow: 0 1px 2px rgba(23, 21, 19, .35);
}
.magnet__cap .num { font-size: 28px; line-height: .9; }
.magnet__cap .num small { margin-left: 4px; font: 600 13px/1 var(--text); letter-spacing: .02em; }
.magnet__head { padding-top: 24px; }
.magnet__title { margin-top: 10px; font: 400 40px/1.04 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.magnet__dana, .magnet__sub { margin-top: 12px; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.magnet__get { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; margin-top: 4px; }
.magnet__get-note { font-size: 15px; color: var(--smoke); }
.magnet__welcome { margin: 28px calc(-1 * var(--bleed)) 0; padding: 24px var(--bleed) 26px; background: var(--bone); --kicker: var(--tomato-deep); }
.magnet__welcome > .label { display: block; letter-spacing: .14em; }
.magnet__welcome > p:not([class]) { margin-top: 10px; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.magnet__bonus { margin-top: 16px; }
.magnet__section { margin-top: 44px; }
.magnet__section > h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.012em; }
.magnet__section > h2 + * { margin-top: 12px; }
.magnet__section > p { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.magnet__section > p + p { margin-top: 12px; }
.magnet__section > :is(ul, ol):not([class]) { display: grid; gap: 10px; margin-top: 14px; list-style: none; counter-reset: mn; }
.magnet__section > :is(ul, ol):not([class]) > li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; }
.magnet__section > ul:not([class]) > li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 8px; height: 8px; background: var(--ink); }
.magnet__section > ol:not([class]) > li { padding-left: 36px; counter-increment: mn; }
.magnet__section > ol:not([class]) > li::before { content: counter(mn); position: absolute; left: 0; top: -.1em; font: 400 26px/1.2 var(--display); color: var(--tomato); }
/* A figure inside running text ("Aim for 64oz", "about 28g in six bites") stays in the text face;
   Gloock is for numerals that stand on their own (menu numerals, totals, table figures). */
.magnet :is(p, li, dd, td:not(.num)) > .num { font: inherit; font-weight: 650; letter-spacing: 0; }
:is(.magnet__section, .magnet__gap, .door) :is(p, li, td) a:not([class]) { color: var(--tomato-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:is(.magnet__section, .magnet__gap, .door) :is(p, li, td) a:not([class]):hover { color: var(--ink); }
.magnet__gap { margin: 48px calc(-1 * var(--bleed)) 0; padding: 22px var(--bleed) 26px; background: var(--bone); --kicker: var(--tomato-deep); }
.magnet__gap .label { display: block; color: var(--kicker); letter-spacing: .14em; }
.magnet__gap p { margin-top: 8px; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.door { margin-top: 40px; padding: 20px; background: var(--bone); --kicker: var(--tomato-deep); }
.door .label { display: block; color: var(--kicker); }
.door p { margin-top: 8px; font-size: 16.5px; line-height: 1.5; }
/* One Ink band closes the page: wordmark, brand line, footer line, then the small print. */
.magnet__colophon { margin: 56px calc(-1 * var(--bleed)) 0; padding: 40px var(--bleed) 0; background: var(--ink); color: var(--paper); }
/* The kit offer's Bone band runs straight into the Ink band, with no white strip between. */
.kit-offer--full:has(+ .magnet__colophon) { margin-bottom: 0; }
.kit-offer--full + .magnet__colophon { margin-top: 0; }
.magnet__wm { font: 400 32px/1 var(--display); letter-spacing: -0.012em; }
.magnet__tag { margin-top: 8px; font: 500 17px/1.4 var(--text); color: var(--bone); }
.magnet__line { margin-top: 16px; max-width: 30ch; font: 650 17px/1.45 var(--text); }
.magnet__foot { margin: 0 calc(-1 * var(--bleed)); padding: 22px var(--bleed) 40px; background: var(--ink); color: var(--fog); font-size: 14px; line-height: 1.6; }
@media (max-width: 359px) {
  /* the day-fill chart's marker ("By the third sitting the day is safe") wraps under its line instead of running off the page */
  .magnet .chart-dayfill__cut { width: 62%; white-space: normal; text-align: center; }
  .magnet__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .magnet__logo { font-size: 23px; }
  .magnet__title { font-size: 34px; }
}
@media (min-width: 760px) {
  .magnet__head { padding-top: 34px; }
  .magnet__title { font-size: 54px; line-height: 1.02; }
  .magnet__section > h2 { font-size: 36px; }
  .magnet__colophon { padding-top: 48px; }
}

/* The old cover block (title on a white band); kept for the style guide's specimen. */
.magnet__cover { position: relative; margin-top: 24px; background: var(--bone); }
.magnet__cover img { width: 100%; height: auto; }
.magnet__cover-text { padding: 20px 22px 22px; background: var(--paper); }
.magnet__cover-kicker { display: block; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tomato); }
.magnet__cover-title { margin-top: 8px; font: 400 36px/1.04 var(--display); letter-spacing: -0.012em; }
.magnet__cover-rule { display: block; width: 48px; height: 7px; margin-top: 14px; background: var(--ink); }
.magnet__cover-mark { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 400 21px/1 var(--display); }

/* ---- 22b · what a printable is made of */
/* Tables. Text tables (.mtable--stack) stack into one block per row on a phone, each cell under
   its column name; the food table (.mtable--foods) keeps the per-bite numeral on the right. */
.mtable { width: 100%; margin-top: 14px; font-size: 16px; line-height: 1.45; }
.mtable caption { padding-bottom: 10px; text-align: left; font: 600 15px/1.4 var(--text); color: var(--smoke); }
.mtable th { padding: 0 12px 8px 0; text-align: left; vertical-align: bottom; font: 700 13px/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.mtable td { padding: 12px 12px 12px 0; vertical-align: top; }
.mtable tbody tr:nth-child(odd) { background: var(--bone); }
.mtable td:first-child, .mtable th:first-child { padding-left: 12px; }
.mtable .num { font-family: var(--display); font-size: 21px; line-height: 1.05; white-space: nowrap; }
.mtable .num--key { font-size: 24px; }
.mtable td.num:last-child, .mtable th.num:last-child { text-align: right; }
.mtable--foods td:nth-child(3) { font: 500 15px/1.4 var(--text); color: var(--smoke); }
.mtable--foods td:last-child, .mtable--foods th:last-child { text-align: right; }
@media (max-width: 559px) {
  .mtable--stack, .mtable--stack tbody { display: block; width: 100%; }
  .mtable--stack thead, .mtable--foods thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* a caption inside a block-level table would shrink to its longest word */
  .mtable--stack caption, .mtable--foods caption { display: block; }
  /* the column names stay for screen readers; inside the clipped head each one is 1px, so no box reaches past the page */
  .mtable--stack thead th, .mtable--foods thead th { display: block; width: 1px; padding: 0; overflow: hidden; }
  .mtable--stack tr { display: block; width: 100%; padding: 14px 14px 16px; }
  .mtable--stack td { display: block; width: 100%; padding: 0; }
  .mtable--stack td:first-child { padding: 0; }
  .mtable--stack td + td { margin-top: 8px; }
  .mtable--stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 13px/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
  .mtable--stack td.num, .mtable--stack td.num:last-child { text-align: left; }
  .mtable--foods, .mtable--foods tbody { display: block; width: 100%; }
  .mtable--foods tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px 12px; }
  .mtable--foods td, .mtable--foods td:first-child { padding: 0; }
  .mtable--foods td:nth-child(1) { grid-area: 1 / 1 / 2 / 3; padding-right: 12px; font-weight: 650; }
  .mtable--foods td:nth-child(2) { grid-area: 2 / 1; margin-top: 3px; font-size: 14px; color: var(--smoke); white-space: nowrap; }
  .mtable--foods td:nth-child(3) { grid-area: 2 / 2; margin-top: 3px; font-size: 14px; }
  .mtable--foods td:nth-child(3)::before { content: "\00a0\00b7\00a0"; }
  .mtable--foods td:nth-child(4) { grid-area: 1 / 3 / 3 / 4; align-self: center; padding-left: 14px; }
}

/* Tick-box lists: a square box, the food, its protein as a menu numeral on the right. */
.checklist { list-style: none; display: grid; gap: 0; margin-top: 12px; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 0; }
.checklist li::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 3px; border: 2px solid var(--ink); }
.checklist__item { grid-column: 2; grid-row: 1; display: block; }
.checklist__name { display: block; font: 700 17px/1.35 var(--text); }
.checklist__note { display: block; margin-top: 4px; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.checklist__num { grid-column: 3; grid-row: 1 / span 2; padding-top: 1px; font: 400 28px/1 var(--display); text-align: right; white-space: nowrap; }
.checklist__g { grid-column: 2; grid-row: 2; display: block; margin-top: 6px; font: 600 14px/1.4 var(--text); color: var(--smoke); }

/* A day written out in a printable is the site's Day Card (.day-plan, section 13); its line of
   totals sits under the day's name. */
.day-plan__cap { caption-side: top; padding-top: 6px; text-align: left; font: 600 15px/1.4 var(--text); color: var(--smoke); }
/* Days written out back to back share one Bone band: no white strip between the cards. */
@media screen {
  .magnet__day:has(> .day-band:last-child):has(+ .magnet__day > .day-band:first-child) > .day-band:last-child { margin-bottom: 0; }
  .magnet__day:has(> .day-band:last-child) + .magnet__day:has(> .day-band:first-child) { margin-top: 0; }
  .magnet__day:has(> .day-band:last-child) + .magnet__day > .day-band:first-child { margin-top: 0; padding-top: 0; }
}

/* The timeline: ringed dots joined by a 2px Ink line. */
.timeline__list { list-style: none; display: grid; gap: 0; }
.timeline__stop { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; padding: 10px 0 14px; }
.timeline__stop:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 32px; bottom: -8px; width: 0; border-left: 2px solid var(--ink); }
.timeline__dot { grid-column: 1; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); }
.timeline__when { grid-column: 2; display: block; font: 700 13px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.timeline__what { grid-column: 2; display: block; margin-top: 4px; font-size: 17px; line-height: 1.5; }

/* The fridge card: white paper on a Bone band, made to be printed on its own. */
.fridge-band { margin: 48px calc(-1 * var(--bleed)) 0; padding: 26px var(--bleed) 32px; background: var(--bone); --kicker: var(--tomato-deep); }
.fridge-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; }
.fridge-card__hint { font-size: 15px; line-height: 1.45; }
.fridge-card { max-width: 560px; padding: 22px 20px 18px; background: var(--paper); border-top: 7px solid var(--ink); box-shadow: var(--paper-shadow); }
.fridge-card > .label { display: block; color: var(--tomato); letter-spacing: .14em; }
.fridge-card__title { margin-top: 8px; font: 400 30px/1.06 var(--display); letter-spacing: -0.01em; }
.fridge-card__rows { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 16px; margin-top: 12px; }
/* Rows hold words on both sides ("Taco night · before the shells"), so both wrap; a value that is
   a numeral ("88–98g") takes .fridge-card__v--num and is set in Gloock. */
/* every row shares the card's two columns (subgrid), so the values line up; older browsers keep 2fr / 3fr */
.fridge-card__row {
  display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-columns: subgrid;
  gap: 4px 16px; align-items: baseline; padding: 10px 0;
}
.fridge-card__k { font: 700 16px/1.4 var(--text); }
.fridge-card__v { font: 400 16px/1.45 var(--text); }
.fridge-card__v--num { font: 400 24px/1 var(--display); white-space: nowrap; }
.fridge-card__meter { margin-top: 14px; }
.fridge-card__tag { margin-top: 16px; font: 400 21px/1.2 var(--display); }
.fridge-card__mark { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 14px; padding-top: 12px; box-shadow: inset 0 2px 0 var(--ink); font: 600 14px/1.3 var(--text); color: var(--smoke); }
.fridge-card__wm { font: 400 22px/1 var(--display); color: var(--ink); }
.fridge-card__bowl { display: none; }

.counter__row { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.counter__cell { padding: 12px; background: var(--paper); }   /* counters sit in a Bone .chart */
.counter__n { display: block; font: 400 30px/1 var(--display); }
.counter__w { display: block; margin-top: 4px; font-size: 14px; color: var(--smoke); }
.offer-items__head { font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); }
.offer-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; padding: 14px 16px; background: var(--paper); color: var(--ink); text-decoration: none; }
.offer-item__icon { display: none; }
.offer-item__tag { display: block; font: 700 13px/1.3 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.offer-item__name { display: block; margin-top: 4px; font: 400 22px/1.1 var(--display); }
.offer-item:hover .offer-item__name { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.offer-item__what { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; }
.offer-item__free { padding: 6px 10px; background: var(--saffron); font: 700 14px/1 var(--text); }

/* ---- 22c · The Starter Cards (magnets/starter-kit.html): the page holds the 8 printed pages */
/* After a sign-up (?welcome=1, body.is-welcome, F1 26 Oct 2026): the first screen is "It's yours" and the
   ways to keep the cards, then the fan (#1, #10, #20) in place of the kit page's still life, the title,
   and the Day Cards teaser. Without ?welcome=1 none of it shows. */
.kit-welcome { margin: 0 calc(-1 * var(--bleed)); padding: 22px var(--bleed) 24px; background: var(--bone); --kicker: var(--tomato-deep); }
.kit-welcome__title { font: 400 44px/1 var(--display); letter-spacing: -0.015em; }
.kit-welcome__lead { margin-top: 10px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.kit-welcome__save { display: grid; gap: 8px; margin-top: 18px; }
.kit-welcome__save .btn { width: 100%; }
.kit-welcome__note { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--smoke); }
.kit-welcome__more { display: flex; flex-wrap: wrap; column-gap: 22px; margin-top: 6px; }
button.link { background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; }
.kit-welcome__status:empty, .coming28__done:empty { display: none; }
.kit-welcome__status { margin-top: 4px; font: 600 15px/1.45 var(--text); overflow-wrap: anywhere; }
.kit-welcome__app { margin-top: 10px; padding: 10px 12px; background: var(--paper); font: 600 15px/1.45 var(--text); }
.kit-welcome__next { margin-top: 12px; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.kit-welcome__next a { color: var(--tomato-deep); font-weight: 650; text-underline-offset: 3px; }
.kit-welcome__start { margin-top: 4px; }
.magnet__photo--fan { display: none; }
.is-welcome .magnet__photo--fan { display: block; }
.is-welcome .magnet__photo--still, .is-welcome .magnet__get { display: none; }
.kit-coming { margin: 28px calc(-1 * var(--bleed)) 0; padding: 24px var(--bleed) 26px; background: var(--bone); --kicker: var(--tomato-deep); }
.coming28__title { font: 400 30px/1.06 var(--display); letter-spacing: -0.01em; }
.coming28__line { margin-top: 10px; font-size: 16.5px; line-height: 1.5; }
.coming28__ask { margin-top: 16px; }
.coming28__done { margin-top: 12px; font: 650 16px/1.45 var(--text); }
/* 28 Day Cards as small paper tiles in four rows of seven; the three you have are circled. */
.grid28 { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; margin-top: 16px; }
.g28 {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
  background: var(--paper); border-top: 4px solid var(--saffron); box-shadow: 0 1px 0 rgba(23, 21, 19, .1);
  font: 400 21px/1 var(--display); color: var(--smoke); font-variant-numeric: lining-nums;
}
.g28--nh { border-top-color: var(--sea); }
.g28--h { border-top-color: var(--tomato); }
.g28.is-yours { color: var(--ink); }
.g28.is-yours::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -20px 0 0 -19px; border: 2px solid var(--ink); border-radius: 50%; }
.grid28__key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.grid28__key .daytype, .tk__key .daytype { font-size: 14px; letter-spacing: .02em; text-transform: none; }
.coming28__note { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.kit-pages { margin-top: 40px; }
.kit-pages .chips { margin-top: 10px; }
.chip__n { margin-right: 8px; font: 400 21px/1 var(--display); }
/* The save bar: once the title has scrolled off, Download and Print stay one tap away (R4 §4.7). */
.savebar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 8px;
  padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  background: var(--ink);
}
.savebar[hidden] { display: none; }
.savebar__btn {
  display: inline-flex; flex: 1 1 0; max-width: 300px; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 10px; border: 0; background: none; color: var(--paper);
  font: 700 16px/1.2 var(--text); text-decoration: none; cursor: pointer;
}
.savebar__btn:hover { text-decoration: underline; text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.savebar__btn:focus-visible { outline: 3px solid var(--saffron); outline-offset: -3px; }
/* On a phone the bar keeps the cards on the phone (the phone PDF, the link by email); from 760px it
   downloads and prints (RR-03, RR-15). */
.savebar__btn--pdf, .savebar__btn--print { display: none; }
@media (min-width: 760px) {
  .savebar__btn--phone, .savebar__btn--mail { display: none; }
  .savebar__btn--pdf, .savebar__btn--print { display: inline-flex; }
}
.kit > .magnet__foot { padding-bottom: 96px; }
@media (max-width: 359px) { .g28 { font-size: 21px; } .g28.is-yours::after { width: 32px; height: 32px; margin: -17px 0 0 -16px; } .grid28 { gap: 4px; } }
@media (min-width: 560px) {
  .kit-welcome__save { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .kit-welcome { padding: 32px var(--bleed) 34px; }
  .kit-welcome__title { font-size: 56px; }
  .kit-welcome__lead { font-size: 19px; }
  .kit-welcome__letter { order: -1; }       /* on a desktop the print PDF comes first */
  .kit-coming { padding: 32px var(--bleed) 34px; }
}

/* The sheets: each page of the kit as white paper on Bone (on paper, one US Letter page each). */
.sheets { display: grid; gap: 18px; margin: 20px calc(-1 * var(--bleed)) 0; padding: 18px 10px 30px; background: var(--bone); }
.sheet { position: relative; padding: 22px 18px 20px; background: var(--paper); border-top: 7px solid var(--ink); box-shadow: var(--paper-shadow); scroll-margin-top: 16px; }
.cv { display: none; }
.sheet__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.sheet__kick { font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tomato); }
.sheet__n { font: 600 13px/1.3 var(--text); color: var(--smoke); white-space: nowrap; }
.sheet__title { margin-top: 14px; font: 400 32px/1.06 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.sheet__lead { margin-top: 10px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.sheet__p { margin-top: 14px; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.sheet__ask { margin-top: 20px; padding: 14px 16px; background: var(--bone); font-size: 15.5px; line-height: 1.5; }
.sheet__fine { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--smoke); }
.sheet__keep { font-weight: 650; }   /* the storage line in the shopping-day step (F1, after R-growth G-02) */
.sheet__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 26px; padding-top: 12px; border-top: 2px solid var(--ink); }
.sheet__wm { font: 400 22px/1 var(--display); letter-spacing: -0.01em; }
.sheet__line { font: 500 13px/1.4 var(--text); color: var(--smoke); }
/* 1 · How to use */
.how { list-style: none; display: grid; gap: 2px; margin-top: 16px; }
.how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.how__n { font: 400 30px/1 var(--display); color: var(--tomato); }
.how__t { font-size: 16.5px; line-height: 1.5; }
.how__pg { color: var(--smoke); white-space: nowrap; }
.how__d { display: block; margin-top: 2px; }
/* 2 · How hungry are you today? */
.hh-list { list-style: none; display: grid; gap: 14px; margin-top: 18px; }
.hh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 14px 0 6px; border-top: 5px solid var(--saffron); }
.hh--nh { border-top-color: var(--sea); }
.hh--h { border-top-color: var(--tomato); }
.hh__type { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.hh__type .dots { gap: 5px; }
.hh__type .dots i { width: 16px; height: 16px; border-width: 2px; }
.hh--nh .dots i.on { background: var(--sea); }
.hh--n .dots i.on { background: var(--saffron); }
.hh--h .dots i.on { background: var(--tomato); }
.hh__name { font: 400 34px/1 var(--display); font-weight: 400; letter-spacing: -0.01em; }
.hh__what { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.hh__card { grid-column: 1; align-self: end; font: 600 14px/1.45 var(--text); color: var(--smoke); }
.hh__card a { color: var(--ink); text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hh__g { grid-column: 2; align-self: end; font: 400 34px/.9 var(--display); white-space: nowrap; }
/* 3–5 · Day Cards: menu rows, a tick box, the protein in Gloock, one 2px Ink rule over the total. */
.dc--nh { border-top-color: var(--sea); }
.dc--n { border-top-color: var(--saffron); }
.dc--h { border-top-color: var(--tomato); }
.dc__title { margin-top: 14px; font: 400 46px/1 var(--display); letter-spacing: -0.015em; }
.dc__line { margin-top: 10px; font: 400 22px/1.2 var(--display); letter-spacing: -0.005em; text-wrap: balance; }
.dc__meta { margin-top: 10px; font: 600 15px/1.4 var(--text); color: var(--smoke); }
.dc__meals { list-style: none; margin-top: 12px; }
.dc__meal { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "box time g" "box what g"; column-gap: 12px; padding: 14px 0; }
.dc__meal::before { content: ""; grid-area: box; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--ink); }
.dc__time { grid-area: time; font: 700 14px/1.4 var(--text); letter-spacing: .03em; color: var(--smoke); font-variant-numeric: tabular-nums; }
.dc__what { grid-area: what; margin-top: 2px; font-size: 17px; line-height: 1.4; }
.dc__bites { display: block; margin-top: 3px; font-size: 14px; color: var(--smoke); }
.dc__g { grid-area: g; min-width: 54px; font: 400 32px/1 var(--display); text-align: right; white-space: nowrap; }
.dc__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 2px solid var(--ink); }
.dc__tl { font: 700 15px/1.35 var(--text); }
.dc__tl span { display: block; font-weight: 500; color: var(--smoke); }
.dc__total .dc__g { font-size: 60px; line-height: .84; }
.dc__notes { display: grid; gap: 10px; margin-top: 20px; }
.dc__note { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
.dc__note dt { padding-top: 2px; font: 700 13px/1.5 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tomato); }
.dc__note dd { font-size: 15.5px; line-height: 1.5; }
/* 6 · The 48-hour shot-day card */
.sd__steps { list-style: none; display: grid; gap: 0; margin-top: 14px; }
.sd__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
.sd__when { font: 700 13px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tomato); }
.sd__what { font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.sd__call { margin-top: 16px; padding: 14px 16px 16px; border-top: 5px solid var(--tomato); background: var(--bone); }
.sd__call p { font-size: 15.5px; line-height: 1.55; }
/* 7 · One week, ticked */
.tk__table { width: 100%; margin-top: 16px; table-layout: fixed; }
.tk__table thead th { padding: 0 2px 10px; vertical-align: bottom; text-align: center; font: 700 13px/1.25 var(--text); color: var(--smoke); }
.tk__table thead th:first-child { width: 56px; padding-left: 6px; text-align: left; }
.tk__table thead th:nth-child(2) { width: 62px; }
.tk__table thead th:last-child { width: 62px; }
.tk__table tbody th { padding: 0 2px 0 6px; text-align: left; font: 400 21px/1 var(--display); color: var(--ink); white-space: nowrap; }
.tk__table td { padding: 10px 2px; text-align: center; vertical-align: middle; }
.tk__table tbody tr:nth-child(odd) { background: var(--bone); }
.tk__opt { display: flex; justify-content: center; padding: 2px 0; }
.tk__opt .dots i { width: 9px; height: 9px; border-width: 1.5px; }
.tk__opt:nth-child(1) .dots i.on { background: var(--sea); }
.tk__opt:nth-child(2) .dots i.on { background: var(--saffron); }
.tk__opt:nth-child(3) .dots i.on { background: var(--tomato); }
.tick { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--ink); background: var(--paper); vertical-align: middle; }
.tk__g { white-space: nowrap; font: 600 15px/1 var(--text); }
.tk__blank { display: inline-block; width: 28px; height: 18px; margin-right: 2px; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.tk__key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
/* 8 · The one-trip grocery list: values wrap under their names (the old 390px overlap is gone). */
.gl__cols { display: grid; gap: 8px; }
.gl__h { margin-top: 20px; font: 400 23px/1.15 var(--display); letter-spacing: -0.005em; text-wrap: balance; }
.gl__note, .gl__zones { margin-top: 4px; font: 600 14px/1.45 var(--text); color: var(--smoke); }
.gl__rank { list-style: none; margin-top: 8px; counter-reset: gl; }
.gl__rank li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 6px 0; counter-increment: gl; }
.gl__rank li::before { content: counter(gl); grid-row: 1 / span 2; font: 400 22px/1 var(--display); color: var(--tomato); }
.gl__rank .gl__cmp::before { content: ""; }
.gl__food { grid-column: 2; font: 650 16px/1.35 var(--text); }
.gl__serv { grid-column: 2; font-size: 14px; line-height: 1.35; color: var(--smoke); }
.gl__g { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 400 26px/1 var(--display); text-align: right; white-space: nowrap; }
.gl__cmp { margin-top: 4px; }
.gl__cmp .gl__food { font-weight: 500; }
.gl__cmp .gl__g { color: var(--smoke); }
.gl__list { list-style: none; display: grid; gap: 0 24px; margin-top: 8px; }
.gl__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 7px 0; }
.gl__item { font-size: 16px; line-height: 1.35; }
.gl__v { display: block; margin-top: 2px; font-size: 14px; color: var(--smoke); }
@media (min-width: 560px) {
  .sheets { padding: 26px 24px 34px; gap: 22px; }
  .sheet { padding: 30px 32px 26px; }
  .dc__meal { grid-template-columns: 22px 54px minmax(0, 1fr) auto; grid-template-areas: "box time what g"; }
  .dc__what { margin-top: 0; }
  .dc__time { padding-top: 2px; }
  .sd__step { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
  .sd__when { padding-top: 3px; }
  .tk__table thead th:nth-child(2) { width: 120px; }
  .tk__dots { white-space: nowrap; }
  .tk__opt { display: inline-flex; margin: 0 3px; }
}
@media (min-width: 560px) and (max-width: 759px) { .gl__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) {
  .sheet { padding: 38px 44px 30px; }
  .sheet__title { font-size: 40px; }
  .dc__title { font-size: 56px; }
  .gl__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
}

/* ---- 22e · on paper */
@media print {
  @page cards { size: letter; margin: 0; }
  .magnet__photo, .magnet__next, .magnet__colophon, .kit-pages, .fridge-card__actions { display: none !important; }
  .magnet__bar { min-height: 0; padding-bottom: 4pt; }
  .magnet__logo { min-height: 0; padding: 0; font-size: 15pt; }
  .magnet__head { padding-top: 6pt; }
  .magnet__title { font-size: 26pt; }
  .magnet__dana, .magnet__sub { font-size: 11.5pt; }
  .magnet__section > h2 { font-size: 17pt; break-after: avoid; }
  .magnet__section > p, .magnet__section > :is(ul, ol):not([class]) > li, .magnet__gap p { font-size: 10.5pt; line-height: 1.45; }
  .magnet__section > ol:not([class]) > li::before { font-size: 15pt; }
  .magnet__gap { margin: 14pt 0 0 !important; padding: 0 !important; background: none !important; break-inside: avoid; }
  .magnet__foot { margin: 14pt 0 0; padding: 0; background: none; color: #000; font-size: 8.5pt; }
  .dots i.on { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtable { font-size: 10pt; }
  .mtable caption { font-size: 9pt; }
  .mtable th { font-size: 7.5pt; }
  .mtable td { padding: 5pt 8pt 5pt 0; }
  .mtable .num { font-size: 13pt; }
  .mtable .num--key { font-size: 15pt; }
  .checklist li { padding: 5pt 0; break-inside: avoid; margin-inline: 0; }
  .checklist li::before { width: 11pt; height: 11pt; border-width: 1.5pt; margin-top: 1pt; }
  .checklist__name { font-size: 11pt; }
  .checklist__note { font-size: 10pt; }
  .checklist__num { font-size: 16pt; }
  .checklist__g { font-size: 9pt; }
  .timeline__what { font-size: 10.5pt; }
  .fridge-band { margin: 0; padding: 0; background: none !important; break-before: page; }
  .fridge-card { max-width: none; padding: 16pt 18pt; border: 1.5pt solid #000; border-top: 4mm solid #000; box-shadow: none !important; break-inside: avoid; }
  .fridge-card__mark { border-top: 2pt solid #000; box-shadow: none; }
  body.printing-card main .magnet > *:not(.fridge-band) { display: none !important; }
  body.printing-card .fridge-band { break-before: auto; }
  /* A printed week: Day Cards set for paper, two to a page; a day's own introduction stays with its card. */
  .magnet__day { break-inside: avoid; }
  .magnet .day-band { margin-block: 10pt; padding-block: 0; }
  .magnet .day-plan { max-width: none; padding: 11pt 14pt 10pt; }
  .magnet .day-plan__title { font-size: 22pt; }
  .magnet .day-plan__cap { padding-top: 2pt; font-size: 9pt; }
  .magnet .day-plan__table { margin-top: 2pt; }
  .magnet .day-plan__table tr { grid-template-columns: .62in minmax(0, 1fr) auto; padding: 5pt 0; }
  .magnet .day-plan__table td[data-cell="Time"] { font-size: 9.5pt; }
  .magnet .day-plan__table td[data-cell="What"] { font-size: 11pt; line-height: 1.35; }
  .magnet .day-plan__table td[data-cell="Bites"] { margin-top: 1pt; font-size: 8.5pt; }
  .magnet .day-plan__table td[data-cell="Protein"] { font-size: 19pt; }
  .magnet .day-plan__table tfoot tr { padding-top: 8pt; }
  .magnet .day-plan__table tfoot td[data-cell="Protein"] { font-size: 32pt; }

  /* The Starter Cards: every sheet is one US Letter page, the day band inside the printable area. */
  .kit .magnet__bar, .kit .magnet__head, .kit .magnet__foot, .savebar { display: none !important; }
  .sheets { display: block; margin: 0; padding: 0; background: none; }
  .sheet {
    page: cards; display: flex; flex-direction: column; width: 8.5in; height: 10.98in; margin: 0; padding: .5in .62in .42in;
    overflow: hidden; border-top: 0; box-shadow: none; break-after: page; break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .sheet:last-child { break-after: auto; }
  .sheet__top { padding-top: 11pt; border-top: 2pt solid var(--ink); }
  .dc .sheet__top { border-top: 6mm solid var(--saffron); }
  .dc--nh .sheet__top { border-top-color: var(--sea); }
  .dc--h .sheet__top { border-top-color: var(--tomato); }
  .sheet__kick, .sheet__n, .sheet .daytype { font-size: 8.5pt; }
  .sheet .dots i { width: 9pt; height: 9pt; border-width: 1.2pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet__title { margin-top: 16pt; font-size: 34pt; }
  .sheet__lead { margin-top: 8pt; font-size: 13pt; line-height: 1.45; }
  .sheet__p { margin-top: 10pt; font-size: 12pt; line-height: 1.5; }
  .sheet__ask { margin-top: 16pt; padding: 10pt 0 0; background: none; border-top: 2pt solid var(--ink); font-size: 11pt; }
  .sheet__fine { margin-top: 10pt; font-size: 9.5pt; }
  .sheet__foot { margin-top: auto; padding-top: 8pt; }
  .sheet__wm { font-size: 15pt; }
  .sheet__line { font-size: 8.5pt; }
  .how { margin-top: 14pt; }
  .how li { grid-template-columns: .45in minmax(0, 1fr); gap: 10pt; padding: 11pt 0; }
  .how__n { font-size: 26pt; }
  .how__t { font-size: 14pt; line-height: 1.45; }
  .hh-list { gap: 14pt; margin-top: 16pt; }
  .hh { padding-top: 12pt; border-top-width: 4mm; }
  .hh__type .dots i { width: 13pt; height: 13pt; border-width: 1.5pt; }
  .hh__name { font-size: 32pt; }
  .hh__what { font-size: 13pt; }
  .hh__card { font-size: 10.5pt; }
  .hh__g { font-size: 32pt; }
  .dc__title { margin-top: 18pt; font-size: 54pt; }
  .dc__line { margin-top: 8pt; font-size: 20pt; }
  .dc__meta { margin-top: 8pt; font-size: 12pt; }
  .dc__meals { margin-top: 12pt; }
  .dc__meal { grid-template-columns: 14pt .72in minmax(0, 1fr) .95in; grid-template-areas: "box time what g"; column-gap: 12pt; padding: 16pt 0; }
  .dc__meal::before { width: 13pt; height: 13pt; margin-top: 3pt; border-width: 1.5pt; }
  .dc__time { padding-top: 3pt; font-size: 12pt; }
  .dc__what { font-size: 16pt; line-height: 1.32; }
  .dc__bites { margin-top: 3pt; font-size: 11pt; }
  .dc__g { min-width: 0; font-size: 30pt; }
  .dc__total { margin-top: 6pt; padding-top: 14pt; border-top-width: 2pt; }
  .dc__tl { font-size: 13pt; }
  .dc__tl span { font-size: 12pt; }
  .dc__total .dc__g { font-size: 54pt; }
  .dc__notes { gap: 11pt; margin-top: 22pt; }
  .dc__note { grid-template-columns: 1in minmax(0, 1fr); gap: 12pt; }
  .dc__note dt { padding-top: 3pt; font-size: 9pt; }
  .dc__note dd { font-size: 13pt; line-height: 1.45; }
  .sd__steps { margin-top: 14pt; }
  .sd__step { grid-template-columns: 1.55in minmax(0, 1fr); gap: 16pt; padding: 13pt 0; }
  .sd__when { padding-top: 3pt; font-size: 9.5pt; }
  .sd__what { font-size: 14.5pt; line-height: 1.45; }
  .sd__call { margin-top: 18pt; padding: 11pt 0 0; background: none; border-top-width: 3pt; }
  .sd__call p { font-size: 11.5pt; }
  .tk__table { margin-top: 14pt; }
  .tk__table thead th { padding-bottom: 8pt; font-size: 8.5pt; }
  .tk__table thead th:first-child { width: .85in; }
  .tk__table thead th:nth-child(2) { width: 1.9in; }
  .tk__table thead th:last-child { width: 1.15in; }
  .tk__table tbody th { height: .8in; padding: 0 4pt; font-size: 20pt; }
  .tk__table td { height: .8in; padding: 0 4pt; }
  .tk__table tbody tr:nth-child(odd) { background: none; }
  .tk__opt { display: inline-flex; margin: 0 5pt; }
  .tk__opt .dots i { width: 9pt; height: 9pt; border-width: 1.2pt; }
  .tick { width: 15pt; height: 15pt; border-width: 1.5pt; }
  .tk__g { font-size: 12pt; }
  .tk__blank { width: .55in; height: 16pt; }
  .gl__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26pt; }
  .gl__h { margin-top: 14pt; font-size: 15pt; }
  .gl__note, .gl__zones { font-size: 9pt; }
  .gl__rank li { padding: 4.5pt 0; }
  .gl__rank li::before { font-size: 14pt; }
  .gl__food { font-size: 11pt; }
  .gl__serv { font-size: 9.5pt; }
  .gl__g { font-size: 16pt; }
  .gl__list { grid-template-columns: 1fr; margin-top: 6pt; }
  .gl__list li { padding: 3.6pt 0; column-gap: 9pt; grid-template-columns: 12pt minmax(0, 1fr); }
  .gl__list .tick { width: 11pt; height: 11pt; }
  .gl__item { font-size: 10.5pt; }
  .gl__v { font-size: 9pt; }
  /* The cover: type only when the page is printed from the browser (no ink spent on a photo);
     the PDF build (html.pdf-build) adds the photo across the top. */
  .cv { display: flex; padding: 0; }
  .cv__photo { height: 6.1in; overflow: hidden; }
  .cv__photo img { width: 100%; height: 100%; object-fit: cover; }
  html:not(.pdf-build) .cv__photo { display: none; }
  .cv__body { display: flex; flex: 1; flex-direction: column; padding: .42in .62in .42in; }
  html:not(.pdf-build) .cv__body { padding-top: 2.6in; }
  .cv__wm { font: 400 18pt/1 var(--display); }
  .cv__title { margin-top: 12pt; font: 400 54pt/.98 var(--display); letter-spacing: -0.015em; }
  .cv__sub { margin-top: 10pt; font: 400 15pt/1.35 var(--text); }
  .cv__key { display: flex; flex-wrap: wrap; gap: 6pt 18pt; margin-top: 16pt; }
  .cv__inside { margin-top: 22pt; padding-top: 10pt; border-top: 2pt solid var(--ink); }
  .cv__inside-h { font: 700 8.5pt/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tomato); }
  .cv__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 5pt 24pt; margin-top: 8pt; }
  .cv__list li { display: grid; grid-template-columns: 16pt minmax(0, 1fr); align-items: baseline; font: 500 10.5pt/1.35 var(--text); }
  .cv__n { font: 400 14pt/1 var(--display); color: var(--tomato); }
  .cv__tag { margin-top: auto; padding-top: 16pt; font: 500 12pt/1.3 var(--text); }
  .cv__fine, .cv__ink { margin-top: 4pt; font-size: 9pt; color: var(--smoke); }
}

/* Fixed-ratio photo boxes: the <picture> fills the box so the photo can cover it. */
:is(.art-hero__img, .meal-grid__tile, .kit-offer__photo, .kit-offer__thumb, .foot-kit__img, .read-next__img,
    .tile__img, .pick__img, .cover__photo, .kp-cover, .end__photo, .save-pin__media, .article-card__media, .page__img,
    .plate-visual__photo) > picture {
  display: block; width: 100%; height: 100%;
}

/* ===================================================================== 23 utilities */
.vh, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.on-bone { background: var(--bone); }

/* Specimen helpers for style-guide.html only. */
.sg-swatches { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 12px; }
.sg-swatch { display: grid; align-content: start; gap: 4px; font: 700 15px/1.3 var(--text); }
.sg-swatch__chip { display: block; height: 76px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px var(--bone-deep); }
.sg-swatch small { display: block; font: 500 14px/1.4 var(--text); color: var(--smoke); }
.sg-block { padding-block: 44px; }
.sg-block + .sg-block { padding-top: 12px; }
.sg-block > .kicker { margin-bottom: 14px; }
.sg-note { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--smoke); max-width: 70ch; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sg-type > * + * { margin-top: 14px; }

/* ===================================================================== 25 old markup, drawn in C2
   A safety net for v1 blocks a page may still carry (until it is rebuilt with c2lib / c2_article.py):
   the v1 header and footer, the rail grid, the article header, the old TOC, gear badges, the old kit
   hooks and sticky bar, related lists and the author box. New pages never use these classes. */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); }
.site-header__inner { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--head-h); }
.site-header__logo { margin-right: auto; }
.site-header__logo img { width: auto; height: 30px; }
.site-header__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  background: var(--saffron); color: var(--ink); font: 700 15px/1 var(--text); text-decoration: none; white-space: nowrap;
}
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; background: none; border: 0; font: 650 16px/1 var(--text); cursor: pointer; }
.nav-toggle__bars { width: 22px; height: 12px; box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
.site-footer { margin-top: 64px; padding: 52px 0 36px; background: var(--ink); color: var(--paper); }
.site-footer a { color: var(--paper); }
.site-footer__cols { display: grid; gap: 24px; }
.site-footer__brand img { width: auto; height: 30px; filter: invert(1) grayscale(1) brightness(2); }
.site-footer__promise { margin-top: 10px; color: var(--bone); }
.footer-nav .label { color: var(--fog); }
.footer-nav__list, .site-footer__legal { list-style: none; display: flex; flex-wrap: wrap; column-gap: 20px; }
.footer-nav__list a, .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.medical-disclaimer, .site-footer__colophon { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--fog); }

.page-grid { display: block; }
.rail { display: none; }
.content { max-width: var(--col); margin-inline: auto; }
.section { padding-block: 32px 48px; }
.article-header { padding-top: 8px; }
.article-header__eyebrow { color: var(--kicker); letter-spacing: .14em; }
.article-header__title { margin-top: 10px; font: 400 35px/1.07 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.article-header__dek { margin-top: 12px; }
.article-header__byline { margin-top: 12px; font: 500 15px/1.45 var(--text); color: var(--smoke); }
.article-header__author a { color: var(--ink); font-weight: 700; text-decoration-color: var(--saffron); text-underline-offset: 4px; }
.article-header__sep { margin-inline: 4px; }
.figure--hero { margin-top: 24px; }
@media (min-width: 760px) { .article-header__title { font-size: 46px; } }

.article-toc details { margin-top: 24px; padding: 0 18px; background: var(--bone); }
.article-toc__summary { display: flex; align-items: center; min-height: 56px; cursor: pointer; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tomato-deep); }
.article-toc details > .label { display: none; }
.article-toc__list { list-style: none; padding-bottom: 10px; }
.article-toc__list a { display: flex; align-items: center; min-height: 44px; font: 600 17px/1.35 var(--text); color: var(--ink); text-decoration: none; }

/* Gear badges render as the appetite scale (ringed dots). Their words still need S1 labels. */
.gear-badge { display: inline-flex; align-items: center; gap: 9px; font: 700 13px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.gear-badge__pips { display: inline-flex; gap: 4px; }
.gear-badge__pip { width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.gear-badge__pip--on { background: var(--saffron); }
.gear-badge--low .gear-badge__pip--on { background: var(--sea); }

/* The v1 kit hooks: Bone blocks with a Saffron action; emoji never shown. */
.qhook { margin: 40px 0; padding: 22px 20px 24px; background: var(--bone); }
.qhook__tag { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 700 13px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tomato-deep); }
.qhook__tag [aria-hidden="true"], .qhook__emoji { display: none; }
.qhook__title { margin-top: 10px; font: 400 28px/1.08 var(--display); letter-spacing: -0.01em; }
.qhook__sub { margin-top: 10px; font-size: 16.5px; line-height: 1.5; }
.qhook__opts { list-style: none; margin-top: 16px; }
.qhook__opt { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 20px; background: var(--saffron); color: var(--ink); font: 700 17px/1.2 var(--text); text-decoration: none; }
.qhook__fine { margin-top: 10px; font-size: 14px; color: var(--smoke); }
.qhook-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 32px 0; padding: 14px 16px; background: var(--bone); color: var(--ink); text-decoration: none; font-size: 16px; line-height: 1.45; }
.qhook-mini b { display: block; font-weight: 800; }
.qhook__go { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--saffron); font-weight: 800; }
.optin-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ink); color: var(--paper); transform: translateY(110%); transition: transform .28s var(--ease);
}
.optin-sticky[data-shown="true"] { transform: none; }
.optin-sticky__row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 4px 0 var(--gutter); }
.optin-sticky__label { flex: 1; font-size: 15px; line-height: 1.3; }
.optin-sticky__label [aria-hidden="true"] { display: none; }
.optin-sticky__dismiss { width: 44px; height: 44px; background: none; border: 0; color: var(--fog); font-size: 22px; cursor: pointer; }
@media (min-width: 760px) { .optin-sticky { display: none; } }

/* Related reading and the author box. */
.related { margin-top: 48px; }
.related__list { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.related__item { padding: 14px 16px; background: var(--bone); }
.related__kicker { color: var(--tomato-deep); }
.related__link { display: block; margin-top: 4px; font: 400 22px/1.15 var(--display); color: var(--ink); text-decoration: none; }
.related__meta { display: block; margin-top: 4px; letter-spacing: 0; text-transform: none; font: 500 14px/1.4 var(--text); }
.author-box { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; margin-top: 48px; padding: 22px 20px; background: var(--bone); }
.author-box__mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 400 21px/1 var(--display); }
.author-box__name { margin-top: 4px; font: 400 24px/1.1 var(--display); }
.author-box__bio { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.author-box__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration-color: var(--saffron); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ===================================================================== 24 motion + print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .tile:hover .tile__img img, .pick a:hover .pick__img img, .read-next__item a:hover img { transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media print {
  @page { margin: 14mm 14mm 16mm; }
  html { scroll-behavior: auto; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }
  a { color: inherit !important; text-decoration: none !important; }
  h1, h2, h3 { break-after: avoid; }
  /* chrome and calls to action stay on screen */
  .site-head, .site-foot, .kitbar, .skip-link, .kit-offer, .art-actions, .save-btn, .save-pin,
  .daychips, .toc, .read-next, .magnet__actions, .magnet__welcome, .kit-welcome, .kit-coming, .door, .menu-btn, .mobile-nav { display: none !important; }
  /* Bone grounds drop out to save ink */
  .band--bone, .day-band, .chart, .compare-cards, .faq, .stat-band, .screenshot-wrap, .colophon,
  .callout, .counter__cell, .proof__item {
    background: none !important; margin-inline: 0 !important; padding-inline: 0 !important; break-inside: avoid;
  }
  .facts-strip { background: none !important; }
  /* paper objects keep a 3mm day band and lose their shadow */
  .day-plan, .daycard, .screenshot-card { box-shadow: none !important; border-top-width: 3mm; break-inside: avoid; }
  .compare-card, .faq__item { box-shadow: none !important; break-inside: avoid; }
  .food-card, .figure, .timeline__stop, .mtable tr { break-inside: avoid; margin-inline: 0; }
  .food-card:has(> .food-card__figures) { background: none !important; padding-inline: 0; }
  .mtable tbody tr:nth-child(odd), .prose table:not([class]) tbody tr:nth-child(odd) { background: none; }
  .meal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* one row of four on paper */
  .art-hero__img, .magnet__cover img, .plate-visual__photo { max-height: 70mm; object-fit: cover; }
  .pip { background: #fff; box-shadow: inset 0 0 0 1px #000; }
  .pip--filled { background: #000; }
  .magnet { max-width: none; padding: 0; }
  .magnet__section { margin-top: 18pt; }
}

/* =====================================================================================
   CALM LAYER · c2b · 31 Oct 2026 (owner-approved; SPEC: fewbites-build/c2/calm/SPEC.md).
   Merged from _calm/calm.css, then the rollout additions for the pages the mockups did not cover.
   It sits at the end of fb.css on purpose: it overrides the rules above exactly as the approved
   mockups did (calm.css loaded after fb.css). Section numbers match the spec.
   SCREEN ONLY: everything below sits in @media screen, so print (printables, PDFs) is unchanged.
   DROP = .is-calm-off (hidden, never deleted), in print too.
   ===================================================================================== */

/* DROP = hidden, never deleted (2). */
.is-calm-off { display: none !important; }
@media print { .kit-pages-fold { display: none !important; } }

@media screen {

/* ------------------------------------------------------------------ 2.1 spacing scale */
:root {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --gutter: 24px; --bleed: 24px; --col: 640px;
  --kicker: var(--smoke);
  --hair: 1px solid var(--bone-deep);
}
@media (max-width: 359px) { :root { --gutter: 20px; --bleed: 20px; } }
@media (min-width: 760px)  { :root { --gutter: 48px; --bleed: 48px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; --bleed: 64px; } }

.band { padding-block: 72px; }
@media (min-width: 760px) { .band { padding-block: 120px; } }

/* ------------------------------------------------------------------ 2.3 type: 6 sizes, 2 weights */
.h1 { font-size: 44px; line-height: 1.04; }
.h2 { font-size: 30px; line-height: 1.08; }
@media (max-width: 359px) { .h1 { font-size: 38px; } .h2 { font-size: 28px; } }
@media (min-width: 760px)  { .h1 { font-size: 64px; line-height: 1.02; } .h2 { font-size: 44px; line-height: 1.06; } }
@media (min-width: 1100px) { .h2 { font-size: 44px; } }
.lead, .dek { font-size: 19px; line-height: 1.5; }
.kicker, .label { font-size: 13px; letter-spacing: .08em; }
/* 2.4 one accent: tomato only for the page-top kicker */
.band--bone, .home-kit, .end, .kit-offer--full, .colophon, .toc, .chart, .day-band, .faq,
.facts-strip, .save-pin, .compare-cards { --kicker: var(--smoke); }
.art-head, .cover__text, .kp-side { --kicker: var(--tomato); }

/* links: ink with a 1px smoke underline (C9), ink 2px on hover */
.link {
  font-weight: 700; text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.link svg { display: none; }
.prose :is(p, li, td, dd, blockquote) a:not([class]), .faq__a a, .chart__note a, .facts a, .faq-list a, .calm-trust a {
  color: var(--ink); font-weight: inherit;
  text-decoration: underline; text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.prose :is(p, li, td, dd, blockquote) a:not([class]):hover, .calm-trust a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.byline a { padding-block: 12px; text-decoration-color: var(--smoke); text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------ 2.5 header: outlined pill, no fill (C1) */
.tag-free {
  position: relative; min-height: 44px; padding: 0 14px 0 26px; gap: 0;
  background: none; color: var(--ink); font: 700 15px/1 var(--text);
}
.tag-free::before {   /* the 36px pill, drawn inside a 44px tap target */
  content: ""; position: absolute; inset: 4px 0; border: 1px solid var(--ink); border-radius: 999px;
}
.tag-free::after {    /* 6px saffron dot */
  content: ""; position: absolute; left: 13px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--saffron);
}
.tag-free:hover { background: none; }
.tag-free:hover::before { background: var(--bone); z-index: -1; }
@media (max-width: 359px) { .tag-free { padding: 0 10px 0 22px; font-size: 15px; } .tag-free::after { left: 10px; } }
@media (min-width: 1100px) { .tag-free { padding: 0 18px 0 30px; font-size: 15px; } .tag-free::after { left: 16px; } }

/* buttons: the one saffron thing */
.btn { min-height: 56px; }
.kit-offer__fine, .signup__fine { font-size: 15px; line-height: 1.5; color: var(--smoke); }
.kit-offer__fine { margin-top: 12px; }

/* footer: kit door as one line; trust repeats gone; legal paragraph at 15px */
.foot-kit { display: inline-flex; grid-template-columns: none; gap: 0; margin-top: 24px; padding: 10px 0; min-height: 44px; background: none; }
.foot-kit__img, .foot-kit__s, .foot-kit__go { display: none; }
.foot-kit__t { font: 700 18px/1.3 var(--text); color: var(--paper); }
.foot-kit:hover .foot-kit__t { text-decoration: underline; text-underline-offset: 4px; }
.foot__nav a.is-kit { color: var(--paper); }
.foot__disclaimer, .foot__copy { font-size: 15px; }
.foot__legal a { font-size: 15px; }
.site-foot { padding: 64px 0 48px; }

/* shared: the calm fold (a hairline row that opens) */
.calm-fold { border-top: var(--hair); border-bottom: var(--hair); }
.calm-fold + .calm-fold { border-top: 0; }
.calm-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 8px 0; cursor: pointer; list-style: none;
}
.calm-fold > summary::-webkit-details-marker { display: none; }
.calm-fold > summary::after { content: "+"; flex: none; font: 400 28px/1 var(--display); color: var(--ink); }
.calm-fold[open] > summary::after { content: "\2013"; }
.calm-fold__t { font: 700 17px/1.35 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); }
.calm-fold > summary .num { margin-left: auto; font: 400 22px/1 var(--display); }
.calm-fold__body { padding: 8px 0 32px; }
.calm-trust { margin-top: 24px; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--smoke); }

/* =====================================================================================
   3.1 HOME
   ===================================================================================== */
@media (max-width: 759px) {
  .cover__photo, .cover__photo { aspect-ratio: auto; height: 200px; max-height: none; }
}
.cover__cap { padding: 0 var(--gutter) 12px; background: none; justify-content: flex-end; text-shadow: none; }
.cover__cap > span:not(.num) { display: none; }
.cover__cap .num { padding: 6px 8px; background: var(--paper); color: var(--ink); font-size: 22px; line-height: 1; }
.cover__cap .num small { display: none; }
.cover__text { padding: 24px var(--gutter) 8px; }
.cover__text .h1 { margin-top: 12px; }
.cover__text .lead { margin-top: 12px; font-size: 19px; line-height: 1.5; }
.cover__actions { margin-top: 20px; }
@media (min-width: 760px) and (max-width: 1099px) { .cover__photo { aspect-ratio: 16 / 9; max-height: 46svh; } .cover__text { padding-top: 48px; } }
@media (min-width: 1100px) {
  .cover .h1 { font-size: 72px; line-height: 1.02; }
  .cover__text { padding: 64px var(--gutter) 64px 80px; }
  .cover__text .lead { margin-top: 24px; font-size: 21px; }
  .cover__actions { margin-top: 40px; }
}

/* picker: three quiet rows, the whole row is the link */
.picker { padding-bottom: 72px; }
.picker .section-head { margin-bottom: 32px; }
.pick-list { gap: 24px; padding-inline: var(--gutter); }
.pick a, .pick:nth-child(even) a { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: center; }
.pick:nth-child(even) .pick__img { order: 0; }
.pick__img { aspect-ratio: 1; }
.pick__text, .pick:nth-child(even) .pick__text { padding: 0; }
.pick__text .dots i { width: 10px; height: 10px; }
.pick__name { margin-top: 6px; font-size: 22px; line-height: 1.15; }
.pick__line { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--smoke); }
.pick__more { display: none; }
.pick a:hover .pick__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 760px) {
  .pick-list { gap: 40px; padding-inline: var(--gutter); }
  .pick a, .pick:nth-child(even) a { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .pick__img { aspect-ratio: 4 / 3; }
  .pick__text, .pick:nth-child(even) .pick__text { padding: 20px 0 0; }
  .pick__name { font-size: 26px; }
}

/* home kit offer (4.3 anatomy) */
.home-kit__img { aspect-ratio: 4 / 3; }
@media (max-width: 759px) { .home-kit__img { aspect-ratio: auto; height: 240px; } }
.home-kit__body { padding: 40px var(--gutter) 48px; }
.home-kit__body .h2 { margin-top: 0; }
.calm-offer-line { margin-top: 16px; font-size: 18px; line-height: 1.55; }
.home-kit__body .btn { margin-top: 28px; }
@media (min-width: 760px) { .home-kit__body { padding: 64px var(--gutter) 64px 64px; } }

/* easy places to start: 2 x 2, photo + title only */
.start .section-head { margin-bottom: 32px; }
.tiles--home { gap: 32px 16px; }
.tiles--home .tile__img { aspect-ratio: 1; }
.tiles--home .kicker, .tiles--home .tile__meta { display: none; }
.tiles--home .tile__title { margin-top: 12px; font-size: 22px; line-height: 1.15; }
@media (min-width: 760px) { .tiles--home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .tiles--home .tile__title { font-size: 24px; } }
.start__more { column-gap: 24px; margin-top: 24px; }
.start__more .link { font-size: 17px; }
.day-fold { margin-top: 48px; }
.day-fold .calm-fold__t { font: 400 22px/1.15 var(--display); letter-spacing: -0.005em; }
.day-fold .normal-day__head .lead { margin: 0 0 24px; font-size: 17px; color: var(--smoke); }
@media (min-width: 1100px) { .day-fold .calm-fold__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.daycard { box-shadow: none; border: var(--hair); border-top: 2px solid var(--saffron); }
.daycard__label { font-size: 13px; letter-spacing: .08em; }
.daycard__name { font-size: 30px; }
.meal__g { font-size: 22px; }
.meal__time, .meal__food span { font-size: 15px; }
.daycard__total { box-shadow: inset 0 1px 0 var(--ink); }
.daycard__total .num { font-size: 30px; line-height: 1; }
.daycard__notes dt { color: var(--smoke); font-size: 13px; letter-spacing: .08em; }

/* end band */
.end__img { aspect-ratio: 4 / 3; }
@media (max-width: 759px) { .end__img { aspect-ratio: auto; height: 240px; } }
.end__body { padding: 40px var(--gutter) 56px; }
.end__body .h2 { margin-top: 0; }
.end__body .lead { margin-top: 16px; font-size: 18px; }
.end__body .btn { margin-top: 28px; }
.end .calm-trust { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--bone-deep); }
@media (min-width: 1100px) { .end__body { padding: 64px var(--gutter) 64px 80px; } }

/* =====================================================================================
   3.2 ARTICLE
   ===================================================================================== */
.art-top { padding-top: 16px; }
.art-head__title, .art-head__title--long { font-size: clamp(32px, 10.26vw, 40px); line-height: 1.05; }
.art-head .dek { margin-top: 12px; font-size: 19px; line-height: 1.5; }
.art-head .byline { margin-top: 12px; }
@media (min-width: 760px) { .art-head__title, .art-head__title--long { font-size: 56px; line-height: 1.04; } .art-top { padding-top: 48px; } }
@media (min-width: 1100px) {
  .art-top { grid-template-areas: "head hero"; grid-template-rows: auto; align-items: center; padding: 72px var(--gutter) 24px; column-gap: 72px; }
  .art-head__title, .art-head__title--long { font-size: 56px; }
}
@media (max-width: 759px) and (max-height: 800px) {
  .art-top { padding-top: 16px; }
  .art-head .dek, .art-head .byline { margin-top: 12px; }
  .art-hero, .meal-grid { margin-top: 20px; }
}
.art-hero, .meal-grid { margin-top: 24px; }
/* photo badges: grams only, one style */
.meal-grid__label { gap: 0; padding: 6px 8px; letter-spacing: 0; }
.meal-grid__label .num { font-size: 22px; line-height: 1; }
/* Save: paper chip with the word (C3) */
.save-btn { min-height: 44px; padding: 0 14px; background: var(--paper); color: var(--ink); font: 700 15px/1 var(--text); }
.save-btn:hover { background: var(--bone); }

/* quick answer: no box, dek size, ink kicker (C14) */
.quick { margin-top: 48px; padding: 0; background: none; }
.quick-answer__label { font-size: 13px; letter-spacing: .08em; color: var(--ink); }
.quick-answer__body { margin-top: 12px; font-size: 19px; line-height: 1.5; }

/* TOC: hairlines, unnumbered */
.toc { margin-top: 40px; }
.toc details { padding: 0; background: none; border-top: var(--hair); border-bottom: var(--hair); }
.toc summary { font: 700 15px/1.3 var(--text); letter-spacing: 0; text-transform: none; color: var(--ink); }
.toc summary::after { font-size: 28px; color: var(--ink); }
.toc li a { font-weight: 400; font-size: 17px; }
.toc li a::before { content: none; display: none; }
.toc li a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 1px; }

/* prose rhythm */
.prose { margin-top: 56px; font-size: 18px; line-height: 1.62; }
:is(.prose, .week) > * + * { margin-top: 20px; }
:is(.prose, .week) > h2 { margin-top: 64px; font-size: 30px; line-height: 1.08; }
:is(.prose, .week) > h3 { margin-top: 40px; font-size: 22px; line-height: 1.15; }
:is(.prose, .week) > :is(h2, h3) + * { margin-top: 16px; }
.prose .lead { font-size: 19px; line-height: 1.55; }
:is(.prose, .week) > ul:not([class]) > li::before { width: 6px; height: 6px; top: .7em; background: var(--smoke); border-radius: 50%; }
@media (min-width: 760px) { .prose { font-size: 18px; } :is(.prose, .week) > h2 { font-size: 44px; margin-top: 96px; } :is(.prose, .week) > h3 { font-size: 26px; } }
.calm-legend { display: inline-flex; vertical-align: -1px; margin: 0 2px; font-size: 0; }
.calm-legend .dots i { width: 10px; height: 10px; }

/* surfaces: bone only on kit offers + the colophon (2.2) */
.chart, :is(.prose, .week) > .chart { margin: 56px 0; padding: 0; background: none; }
.chart__title { margin-bottom: 20px; font-size: 22px; line-height: 1.15; text-transform: none; letter-spacing: -0.005em; color: var(--ink); }
.chart__note { margin-top: 16px; font-size: 15px; color: var(--smoke); }
.chart-bars__track { background: var(--bone); height: 6px; }
.chart-bars__label { font-weight: 400; font-size: 15px; }
.chart-bars__value { font-size: 22px; }
.chart-dayfill__plot { background: none; }
.chart-dayfill__y, .chart-dayfill__x b, .chart-dayfill__flag, .chart-dayfill__cut { font-size: 15px; }
.calm-fold--chart { margin: 40px 0; }
:is(.prose, .week) > .calm-fold--chart + * { margin-top: 40px; }
.calm-fold--chart .chart { margin: 8px 0 32px; }
.calm-fold--chart .chart > .chart__title { display: none; }

.day-band, :is(.prose, .week) > .day-band { margin: 40px 0; padding: 0; background: none; }
.day-plan { padding: 24px 20px 20px; box-shadow: none; border: var(--hair); border-top: 2px solid var(--saffron); }
.day-plan--nh { border-top-color: var(--sea); }
.day-plan--h { border-top-color: var(--tomato); }
.day-plan__title { font-size: 30px; line-height: 1.08; }
.day-plan__head .daytype { font-size: 13px; }
.day-plan__table tr {
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t b g" "w w g";
  column-gap: 8px; padding: 12px 0;
}
.day-note { font-size: 15px; }
.day-plan__table td[data-cell="Time"] { padding-top: 0; font: 400 15px/1.5 var(--text); letter-spacing: 0; }
.day-plan__table td[data-cell="Bites"] { margin-top: 0; font: 400 15px/1.5 var(--text); }
.day-plan__table td[data-cell="Bites"]::before { content: "\00b7\00a0"; }
.day-plan__table tbody td[data-cell="What"] { margin-top: 2px; font-size: 18px; line-height: 1.45; }
.day-plan__table td[data-cell="Protein"] { align-self: center; font-size: 22px; line-height: 1.15; }
.day-plan__table tfoot tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l g" "b g"; margin-top: 4px; padding-top: 16px; border-top: 0; box-shadow: inset 0 1px 0 var(--ink); }
.day-plan__table tfoot td[data-cell="Bites"]::before { content: "about "; }
.day-plan__table tfoot td:first-child { font: 700 15px/1.3 var(--text); }
.day-plan__table tfoot td[data-cell="Protein"] { font-size: 30px; line-height: 1; }
@media (min-width: 760px) { .day-plan { padding: 28px 32px 24px; } }

/* day tabs: plain words, active one underlined */
.daychips { gap: 0; padding-block: 6px; border-bottom: var(--hair); }
.daychips a { background: none; font: 700 15px/1 var(--text); color: var(--smoke); }
.daychips a:hover { background: none; color: var(--ink); }
.daychips a[aria-current="true"] { background: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* inline door: one text line, no box (3.2 #11) */
.kit-offer--inline {
  display: block; margin: 40px 0; padding: 10px 0; background: none;
  font: 700 18px/1.45 var(--text); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
:is(.prose, .week) > .kit-offer--inline { margin-block: 40px; }
.kit-offer--inline .kit-offer__thumb, .kit-offer--inline .kit-offer__go { display: none; }
.kit-offer--inline .kit-offer__text { font: inherit; }
.kit-offer--inline .kit-offer__text b { font-weight: 700; }
.kit-offer--inline .kit-offer__text::after { content: " \2192"; }
.kit-offer--inline:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.kit-offer--inline:hover .kit-offer__text { text-decoration: none; }

/* full offers (4.3) */
.kit-offer--full, :is(.prose, .week) > .kit-offer--full { margin-block: 64px; }
@media (max-width: 759px) { .kit-offer__photo, .kit-offer__photo:has(img[src*="kit-still-life"]) { aspect-ratio: auto; height: 240px; } }
.kit-offer__body, .kit-offer--full .kit-offer__photo + .kit-offer__body { padding: 40px var(--bleed) 40px; }
.kit-offer__title { margin-top: 0; font-size: 30px; line-height: 1.08; }
.kit-offer__sub { margin-top: 16px; font-size: 18px; line-height: 1.55; }
.kit-offer__body .btn { margin-top: 28px; }
@media (min-width: 760px) { .kit-offer__body { padding: 48px; } .kit-offer__title { font-size: 36px; } }

/* compare cards: two plain lists */
.compare-cards, :is(.prose, .week) > .compare-cards { gap: 32px; margin: 40px 0; padding: 0; background: none; }
.compare-card { padding: 0; background: none; box-shadow: none; }
.compare-card .label { display: none; }
.compare-card__title { margin-top: 0; font-size: 22px; line-height: 1.15; }
.compare-card__list { gap: 8px; margin-top: 12px; font-size: 17px; line-height: 1.5; }
.compare-card__list li::before { width: 6px; height: 6px; top: .65em; border-radius: 50%; background: var(--smoke); }
@media (min-width: 760px) { .compare-cards { padding: 0; gap: 48px; } }

.figure, :is(.prose, .week) > .figure { margin-block: 56px; }
.figure__caption { font: 400 15px/1.5 var(--text); }

/* FAQ: one list, each answer folded */
.faq, :is(.prose, .week) > .faq { gap: 0; margin: 24px 0 0; padding: 0; background: none; border-bottom: var(--hair); }
.faq__item { padding: 0; background: none; border-top: var(--hair); }
.faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; flex: none; font: 400 28px/1 var(--display); }
.faq__item[open] > summary::after { content: "\2013"; }
.faq__q { font: 700 18px/1.4 var(--text); }
.faq__a { margin: 0; padding-bottom: 24px; }
.faq__a p { font-size: 17px; line-height: 1.6; }
@media (min-width: 760px) { .faq { padding: 0; } .faq__item { padding: 0; } }

/* end of article: save line, read next, colophon */
.calm-savewrap { margin-top: -40px; margin-bottom: 0; }
.calm-saveline { display: block; margin: 0; padding: 0; background: none; }
.calm-saveline .save-pin__media, .calm-saveline .label, .calm-saveline .save-pin__title, .calm-saveline .save-pin__note { display: none; }
.calm-saveline .link { min-height: 44px; padding-block: 12px; font-size: 15px; font-weight: 700; }
@media (min-width: 760px) { .calm-saveline { display: block; padding: 0; } }

.read-next { margin-top: 72px; }
.read-next > .kicker { color: var(--smoke); }
.read-next__list { gap: 0; margin-top: 12px; }
.read-next__item { border-top: var(--hair); }
.read-next__item:last-child { border-bottom: var(--hair); }
.read-next__item a { display: block; padding: 18px 0; }
.read-next__img, .read-next__body > .kicker { display: none; }
.read-next__title { margin-top: 0; font-size: 22px; line-height: 1.2; }
.read-next__meta { margin-top: 6px; font: 400 15px/1.4 var(--text); }
@media (min-width: 760px) {
  .read-next__list { gap: 0 32px; }
  .read-next__item:last-child { border-bottom: 0; }
  .read-next__item { border-bottom: var(--hair); }
  .read-next__body { padding-top: 0; }
}

.colophon { margin-top: 96px; padding: 56px 0 64px; }
.facts { margin-top: 0; }
.facts li { padding: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.facts li + li { margin-top: 20px; }
.facts li > .kicker { margin-bottom: 8px; }
.calm-trustline { color: var(--smoke); }
.colophon .sources { margin-top: 12px; font-size: 15px; }
@media (min-width: 1100px) { .colophon__grid { display: block; max-width: calc(var(--col) + 2 * var(--gutter)); } }

/* =====================================================================================
   3.3 KIT
   ===================================================================================== */
@media (max-width: 1099px) { .kp-cover { aspect-ratio: auto; height: 200px; max-height: none; } }
@media (min-width: 760px) and (max-width: 1099px) { .kp-cover { height: 40svh; } }
.kp-side { padding: 24px var(--gutter) 64px; }
.kp-title { margin-top: 12px; font-size: 40px; line-height: 1.05; }
@media (max-width: 359px) { .kp-title { font-size: 34px; } }
@media (min-width: 760px) { .kp-title { font-size: 64px; } }
.kp-side .lead { margin-top: 12px; font-size: 19px; }
.kp-side .signup { margin-top: 24px; }
.signup__fine { margin-top: 4px; }
.signup__fine a { color: var(--ink); text-decoration-color: var(--smoke); }

.calm-pages .section-head { margin-bottom: 24px; }
.calm-pagelist { list-style: none; display: grid; gap: 20px; }
.calm-pagelist li { display: grid; gap: 2px; }
.calm-pagelist__t { font: 700 18px/1.35 var(--text); }
.calm-pagelist__d { font-size: 15px; line-height: 1.45; color: var(--smoke); }
.calm-thumbs { margin-top: 24px; }
.calm-thumbs .pages { padding: 16px 0 32px; }
.calm-thumbs .page__img { box-shadow: none; border: var(--hair); }
.calm-thumbs .page__n { color: var(--ink); font-size: 22px; }
@media (min-width: 760px) {
  .calm-pages .wrap { max-width: calc(880px + 2 * var(--gutter)); }
  .calm-pagelist { grid-template-columns: 1fr 1fr; gap: 24px 48px; }
}

.steps li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
.steps .num { font-size: 30px; line-height: 1; color: var(--ink); }
.steps span:not(.num) { font-size: 15px; }

.kp-faq .faq-list { gap: 0; margin-top: 24px; border-bottom: var(--hair); }
.faq-list details { padding: 0; background: none; border-top: var(--hair); }
.faq-list summary { font-size: 18px; }
.faq-list summary::after { color: var(--ink); font-size: 28px; }
.faq-list details > :not(summary) { padding-bottom: 24px; }
.kp-faq .calm-trust { margin-top: 40px; }
.kp-again .h2 { margin-top: 0; }
.kp-again .lead { margin-top: 16px; font-size: 18px; }

/* fold markers: one weight everywhere (Gloock's + is hairline-thin at night) */
.calm-fold > summary::after, .faq__item > summary::after, .faq-list summary::after, .toc summary::after {
  font: 400 26px/1 var(--text); color: var(--ink);
}
.sources li::before { border-radius: 50%; background: var(--smoke); }
@media (min-width: 1100px) { .kp-title { font-size: 56px; line-height: 1.04; } }

/* =====================================================================================
   CALM LAYER · rollout additions (c2b · 31 Oct 2026) · the pages the mockups did not cover:
   hubs (3.5), start-here, about / legal / 404 / thanks (calm type only), starter-kit wrapper (3.4),
   and two shared blocks the spec names (food-grid rows, the rule box) that still had bone.
   ===================================================================================== */

/* page-top kickers stay tomato (2.4); everything else is smoke (set in :root above) */
.page-head, .doc__head, .magnet__head, .thanks-top { --kicker: var(--tomato); }

/* rule box ("The one rule", "Before you start"): no bone, hairlines; the warning box keeps its ink bar */
.callout { padding: 20px 0; background: none; border-top: var(--hair); border-bottom: var(--hair); --kicker: var(--smoke); }
.callout--warn, .callout--warning { border-top: 7px solid var(--ink); }
.callout p { font-size: 17px; }
.callout a { color: var(--ink); text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* food-grid cards (3.2 #14): rows with a hairline, no bone */
.food-grid:has(> .food-card > .food-card__figures),
.food-grid:has(> .food-card > .food-card__meta ~ .food-card__meta) { gap: 0; border-bottom: var(--hair); }
.food-card:has(> .food-card__figures),
.food-card:has(> .food-card__meta ~ .food-card__meta) { padding: 20px 0; background: none; border-top: var(--hair); }
.food-card__meta { font-size: 15px; font-weight: 400; }
.food-card__name > .data:first-child { color: var(--smoke); }

/* ------------------------------------------------------------------ 3.5 HUBS */
/* the photo grid becomes one 16:9 photo; gram chip only */
.hub .meal-grid { grid-template-columns: 1fr; }
.hub .meal-grid__tile { aspect-ratio: 16 / 9; }
.hub .meal-grid__tile:not(:first-child) { display: none; }
.hub .meal-grid__label { font-size: 0; }
.hub .meal-grid__label .num { font-size: 22px; }
.hub .art-actions { margin-top: 16px; }
.hub .art-actions .link { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
@media (min-width: 1100px) { .hub .art-top { grid-template-areas: "head hero" "actions hero"; } }

/* guide list: one column of rows, the whole row is the link (C11) */
.hub-guides { padding-block: 64px 16px; }
.hub-guides__h { margin-bottom: 16px; }
.tiles--hub { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tiles--hub > .tile--card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-auto-rows: auto;
  column-gap: 16px; align-content: start; padding: 20px 0; border-top: var(--hair);
}
.tiles--hub > .tile--card:last-child { border-bottom: var(--hair); }
.tiles--hub .tile__img { grid-column: 1; grid-row: 1 / span 4; width: 96px; aspect-ratio: 1; align-self: start; }
.tiles--hub .tile__img + .tile__title, .tiles--hub .tile__title { grid-column: 2; margin-top: 0; font-size: 22px; line-height: 1.15; }
.tiles--hub .kicker, .tiles--hub .tile__note, .tiles--hub .tile__day .dots, .tiles--hub .tile__tag { display: none; }
.tiles--hub :is(.tile__meta, .tile__day, .tile__note) { grid-column: 2; margin-top: 6px; }
.tiles--hub .tile__meta { font: 400 15px/1.4 var(--text); }
.tiles--hub .tile__meta b { font-weight: 700; }
.tiles--hub .tile__day { margin-top: 2px; }
.tiles--hub .tile__day .daytype { font: 400 15px/1.4 var(--text); letter-spacing: 0; text-transform: none; color: var(--smoke); }
.tiles--hub .tile__day .daytype { gap: 0; }
.tiles--hub .tile__day .daytype::after { content: "\00a0 day"; }
.tiles--hub .tile--card:hover .tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tiles--hub .tile--card:hover .tile__img img { transform: none; }
@media (min-width: 760px) {
  .tiles--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .tiles--hub > .tile--card:nth-last-child(2):nth-child(odd) { border-bottom: var(--hair); }
  .tiles--hub .tile__note { display: block; color: var(--smoke); }
  .tiles--hub .tile__img { width: 120px; }
  .tiles--hub > .tile--card { grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; }
}
@media (min-width: 1100px) { .tiles--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; } }

/* "How to read one": folded under the list (3.5 #2); its h2 is the summary */
.calm-hubfold { margin-top: 48px; }
.calm-fold--hub > summary > h2 { margin: 0; font: 400 22px/1.15 var(--display); letter-spacing: -0.005em; }
.calm-fold--hub .calm-fold__body { margin-top: 0; }
.calm-fold--hub .chart { margin: 40px 0 8px; }

/* ------------------------------------------------------------------ pages: start-here, about, 404 */
.page-head__title { font-size: 40px; line-height: 1.05; }
@media (max-width: 359px) { .page-head__title { font-size: 36px; } }
@media (min-width: 760px) { .page-head__title { font-size: 56px; line-height: 1.04; } }
.page-head .dek { margin-top: 12px; }

/* legal pages: calm typography only */
.doc__title { font-size: 40px; line-height: 1.05; }
@media (min-width: 760px) { .doc__title { font-size: 56px; line-height: 1.04; } }
.doc__meta { font: 400 15px/1.5 var(--text); }
.doc-toc { padding: 8px 0; background: none; border-top: var(--hair); border-bottom: var(--hair); --kicker: var(--smoke); }
.doc-toc a { font: 400 17px/1.3 var(--text); text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.doc-toc a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
.doc .prose { font-size: 18px; line-height: 1.62; }
.doc .prose h2 { font-size: 30px; line-height: 1.08; }
.doc .quick-answer { padding: 0; background: none; }
.doc .prose a:not([class]) { color: var(--ink); text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ 3.4 STARTER-KIT wrapper (screen only) */
.calm-textbtn, .calm-textbtn:hover {
  min-height: 44px; padding: 8px 4px; background: none; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.calm-textbtn:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.calm-textbtn svg { display: none; }
@media (max-width: 759px) { .kit .magnet__photo--still { aspect-ratio: auto; height: 200px; } }
.kit .magnet__head { padding-top: 24px; }
.kit .magnet__title { margin-top: 12px; }
.kit .magnet__get { align-items: center; gap: 8px 20px; margin-top: 24px; }
.kit .magnet__get .btn--kit { min-height: 56px; }
.kit .magnet__get-note { order: 3; flex-basis: 100%; }
.kit .magnet__get a.link { display: inline-flex; align-items: center; min-height: 44px; }
.kit-pages-fold { margin-top: 32px; }
.kit-pages-fold .kit-pages { margin-top: 0; padding-bottom: 20px; }
.kit-pages .chip { background: none; border: var(--hair); }
.kit .magnet__colophon { padding-bottom: 8px; }
@media screen { html:not(.pdf-build) .kit .sheet:not(:last-child) > .sheet__foot { display: none; } }

/* small text floor: 15px on screen (2.3 "small"); the printables' own sheets are exempt */
.art-hero__cap { font-size: 15px; }
.art-hero__cap .num small { font-size: 15px; }
.progress, .progress__mark { font-size: 15px; }
.magnet__cap { font-size: 15px; }
.magnet__cap .num small { font-size: 15px; }
@media screen { .magnet__foot { font-size: 15px; } }
.doc .prose p > a[href^="mailto:"]:only-child { display: inline-block; padding-block: 11px; }
.bite-meter__label, .bite-meter__count, .proof__source { font-size: 15px; }
.magnet:not(.kit) :is(.checklist__g, .counter__w, td) { font-size: 15px; }
/* V-calm fix: the calm .facts li { padding: 0 } also reached the nested source list, so its dot sat on the first letter */
.facts .sources li { padding-left: 18px; }
.facts .sources li + li { margin-top: 8px; }
} /* end @media screen: CALM LAYER */

/* =====================================================================================
   DAY CARDS PAGE · c2c · 1 Nov 2026 (day-cards.html, the sales page for the paid Day Cards).
   Reuses the kit page title, steps, page list, 28-card grid, FAQ and calm-trust. New here: the
   product-shot hero (with a 28-card fallback while the shot is missing), the price line, the three
   kinds of day and the sample card. Scoped to .dc-* classes; .dc-door is the one quiet Day Cards
   link on the home page. Saffron stays on the buy buttons only, one per screen.
   ===================================================================================== */
.dc-hero__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: clamp(180px, 36svh, 320px); margin: 0; overflow: hidden; background: var(--bone);
}
.dc-hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } /* REVIEW: the cards bleed off the band's bottom edge, never float above a hard cut */
.dc-hero__fallback { display: none; }
.dc-hero__media.is-missing img { display: none; }
.dc-hero__media.is-missing .dc-hero__fallback { display: block; width: min(300px, 76%); }
.dc-hero__fallback .grid28 { gap: 5px; max-width: none; margin: 0; }
.dc-hero__fallback .g28 { font-size: 16px; }
.dc-hero__text { padding: 24px var(--gutter) 64px; --kicker: var(--tomato); }
.dc-hero__title { margin-top: 12px; }
.dc-hero__text .lead { margin-top: 12px; }
.dc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 20px; }
.dc-price .num { font-size: 34px; line-height: 1; }
.dc-price span:not(.num) { font-size: 17px; line-height: 1.3; color: var(--smoke); }
.dc-hero__text .btn { margin-top: 16px; }
@media (min-width: 760px) {
  .dc-hero__media { height: 44svh; }
  .dc-hero__text { max-width: calc(640px + 2 * var(--gutter)); margin-inline: auto; padding-top: 40px; }
}
@media (min-width: 1100px) {
  .dc-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; max-width: 1440px; margin: 0 auto; }
  .dc-hero__media { height: auto; aspect-ratio: 1; max-height: calc(100svh - var(--head-h)); }
  .dc-hero__text { max-width: 620px; margin: 0; padding: 48px var(--gutter) 48px 64px; }
  .dc-hero__text .btn--block { display: inline-flex; width: auto; min-width: 340px; }
}

/* the three kinds of day: hairline rows, three columns from 900px */
.dc-types .section-head { margin-bottom: 32px; }
.dc-types__list { list-style: none; border-bottom: var(--hair); }
.dc-type { padding: 24px 0; border-top: var(--hair); }
.dc-type__head { display: flex; align-items: center; gap: 12px; }
.dc-type__head .dots i { width: 12px; height: 12px; }
.dc-type__name { font: 400 26px/1.1 var(--display); letter-spacing: -0.005em; }
.dc-type__n { margin-left: auto; font-size: 16px; color: var(--smoke); white-space: nowrap; }
.dc-type__n .num { margin-right: 4px; font-size: 26px; color: var(--ink); }
.dc-type__line { margin-top: 10px; font-size: 17px; line-height: 1.5; }
.dc-type__fig { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--smoke); }
@media (min-width: 900px) {
  .dc-types__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; border-bottom: 0; }
  .dc-type { border-bottom: var(--hair); }
}

/* what's inside: the 28 cards as paper tiles, then the page list */
.dc-inside__head .lead { margin-top: 16px; }
.dc-inside .grid28 { margin-top: 28px; }
.dc-inside .grid28__key .daytype, .kit-coming .grid28__key .daytype { font-size: 15px; }   /* 15px text floor */
.dc-inside__note { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--smoke); }
.dc-inside__list { margin-top: 48px; }
@media (min-width: 1100px) {
  .dc-inside__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .dc-inside__list { margin-top: 0; grid-template-columns: 1fr; }
}

/* how it works, formats: the kit page's split; the page list sits under the head on a phone */
.dc-formats .calm-pagelist { margin-top: 24px; }
@media (min-width: 1100px) { .dc-formats .calm-pagelist { margin-top: 0; } }

/* one card, as it prints */
.dc-sample__in { display: grid; gap: 32px; }
.dc-sample__card { width: 100%; max-width: 300px; }
.dc-sample__card .page__img { box-shadow: none; border: var(--hair); }
.dc-sample__cap { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--smoke); }
.dc-sample__text .lead { margin-top: 16px; }
.dc-sample__text .lead .num { font-size: 1.15em; }
.dc-sample__text .btn { margin-top: 28px; }
@media (max-width: 759px) { .dc-sample__text .btn { display: flex; width: 100%; } }
@media (min-width: 760px) {
  .dc-sample__in { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: center; }
  .dc-sample__card { max-width: 360px; }
}

/* the buy box */
.dc-buy .lead { margin-top: 16px; }
.dc-buy .dc-price { margin-top: 28px; }
.dc-buy .btn { max-width: 560px; }
.dc-buy .kit-offer__fine a, .dc-buy__seller a { padding-block: 13px; color: var(--ink); text-decoration-color: var(--smoke); text-underline-offset: 4px; }
.dc-buy__seller { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--smoke); }
.dc-buy .calm-trust { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bone-deep); }
/* inline links keep their line; the padding only widens the tap area to 44px */
.dc-faq .faq-list a { padding-block: 12px; }

/* the home page's one quiet Day Cards link (under Day Card #10 in "A normal day, written out") */
.dc-door { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--smoke); }
.dc-door a { padding-block: 13px; color: var(--ink); font-weight: 700; text-decoration-color: var(--smoke); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dc-door a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
/* the Starter Cards page's door to the Day Cards, now switched on */
.door .btn { margin-top: 16px; }

/* DAY CARDS PAGE: small seller line under the hero and sample buttons (launch, 1 Nov 2026) */
.dc-seller-mini { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--smoke); }