@charset "UTF-8";
/* ==========================================================================
   FEW BITES — styles.css
   Direction: THE CARD INDEX. Reference cards on heavy stock, not a blog.
   Separation is hairlines and whitespace. There are no shadows in this file.

   00  Fonts (self-hosted)
   01  Tokens
   02  Reset & base
   03  Typography
   04  Utilities — .label, .data, .rule
   05  Layout — .wrap, .page-grid, .rail, .section
   06  Header
   07  Footer
   08  Buttons
   09  Forms
   10  Bite meter          [signature]
   11  Quick answer
   12  Dana aside
   13  Food card / grid
   14  Day plan
   15  Gear badge
   16  Callout
   17  Save pin
   18  Related
   19  Author box
   20  Opt-ins  (inline / feature / footer / sticky)
   21  Prose
   22  Article  (.article-header, .article-toc, .figure, .faq)
   23  Page furniture (about, hubs)
   24  Charts (the visual value system)
   25  Print
   ========================================================================== */

/* ==========================================================================
   00  FONTS — self-hosted, latin subset, woff2 only, 113KB total

   Served from /fonts/ rather than Google's CDN: two DNS lookups plus two TLS
   handshakes before any text painted, on 4G, was the single worst thing on
   the page. No unicode-range is declared — with one subset per family it buys
   nothing, and omitting it removes any chance of a stray glyph falling back.

   Licences are in /fonts/. All three are SIL Open Font License 1.1.
   ========================================================================== */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* Metric-matched fallbacks. Georgia is 22% wider than Instrument Serif at the
   same point size, so when the real face swapped in, every heading resized and
   dragged the page with it — measured as the single largest layout shift on
   the site. These two faces are Georgia with its metrics corrected to match,
   so the swap changes the shapes and nothing else. No extra bytes: local()
   only, nothing is downloaded.

   Numbers computed from the shipped woff2 files against Georgia's published
   metrics (upm 2048, xAvgCharWidth 1113). Recompute if a face is swapped. */

@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 77.65%;
  ascent-override: 127.49%;
  descent-override: 39.92%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Serif Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 94.40%;
  ascent-override: 109.75%;
  descent-override: 35.49%;
  line-gap-override: 0%;
}

/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* Core — sampled from brand assets */
  --cream:      #FCF5E9;  /* page — identical to logo background */
  --ink:        #47372C;  /* primary text — warm dark brown, never pure black */
  --sage:       #858665;  /* accent — the logo dots */

  /* Derived */
  --paper:      #FFFDF8;  /* cards; a shade lighter than page, not pure white */
  --ink-muted:  #6E5F52;  /* captions, metadata — 5.66:1 on cream, verified */
  --sage-deep:  #5F6049;  /* buttons — white text, 6.45:1, verified */
  --sage-tint:  #E8E9DE;  /* tinted blocks, opt-in backgrounds */
  --tan:        #D0A368;  /* filled bite pips, data highlight */
  --blush:      #E8BCAF;  /* Dana asides only, used sparingly */
  --line:       #D9CDBB;  /* hairlines — visible enough to do real work */

  /* Type */
  /* The metric-matched fallbacks sit ahead of plain Georgia; see section 00.
     The stack still ends at Georgia, so the brief's token is unchanged in
     substance -- only the swap is now free of layout shift. */
  --font-display: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', 'Source Serif Fallback', Georgia, 'Times New Roman', serif;
  --font-data:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — 18px base. She is 35–55, on a phone. Never smaller. */
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem;
  --text-3xl: 2.5rem; --text-4xl: 3.5rem;

  --lh-body: 1.65;
  --lh-head: 1.05;      /* display type sets tight */
  --measure: 66ch;

  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;  --space-16: 4rem;  --space-24: 6rem;

  --radius: 3px;        /* essentially square; 0 in most places */
  --rule: 1px solid var(--line);

  /* ---- Additions, derived from the above. Documented on the style guide.
     --line is 1.45:1 on cream: correct for decorative rules, too faint to be
     a form-control boundary. WCAG 1.4.11 wants 3:1 for those, so inputs and
     other interactive edges use --line-strong (3.82:1). ------------------ */
  --line-strong: #8B7A67;

  --pip:      6px;   /* bite meter pip */
  --pip-gap:  3px;
  --rail:     11.5rem;
  --wrap:     78rem;
  --header-h: 56px;

  --dur: 120ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

@media (min-width: 56.25em) {   /* 900px — the rail appears here */
  :root { --header-h: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--cream);
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

/* Paper grain. feTurbulence, no network request, 2.8% opacity.
   This is the only "texture" in the system. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* belt and braces against horizontal scroll at 320px */
}

img, picture, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--sage-tint); color: var(--ink); }

/* Motion is almost absent here by design. This kills what little remains. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus: sage, 2px, 2px offset. Every interactive element, no exceptions. */
:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); letter-spacing: -.028em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: -.012em; }

h4, h5, h6 {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}

@media (min-width: 48em) {
  h1 { font-size: var(--text-4xl); }
}

p { margin: 0 0 var(--space-6); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink);
}

.dek {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 54ch;
}

/* ==========================================================================
   04  UTILITIES
   ========================================================================== */

/* Mono, uppercase, wide-tracked. Every label on the site is this. */
.label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
}

.label--ink  { color: var(--ink); }
.label--sage { color: var(--sage-deep); }

/* Every gram, bite count, calorie, gear name and time. Tabular so columns
   of numbers line up down the page. */
.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
  font-size: .94em;
  /* Only 400 and 500 of the mono are self-hosted, so a .data inside <strong>
     would be smeared by the browser's synthetic bold. Use the real 500 and
     switch synthesis off. */
  font-synthesis-weight: none;
  font-synthesis: none;
}
strong .data, b .data, th .data,
h1 .data, h2 .data, h3 .data, .stance__item .data { font-weight: 500; }

.data--tan   { color: #8A6420; }  /* --tan darkened to 4.6:1 for text use */
.data--lg    { font-size: 1.35em; letter-spacing: -.02em; }
.data--xl    { font-family: var(--font-data); font-size: var(--text-2xl); letter-spacing: -.03em; }

.rule { border: 0; border-top: var(--rule); margin: var(--space-12) 0; }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -6rem; z-index: 200;
  background: var(--paper); color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--font-data); font-size: var(--text-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.stack > * + * { margin-top: var(--space-6); }

/* ==========================================================================
   05  LAYOUT
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 30em) { .wrap { padding-inline: var(--space-6); } }
@media (min-width: 56.25em) { .wrap { padding-inline: var(--space-8); } }

/* The asymmetric shell. Narrow rail, wide reading column, and the slack
   left over on the right — so the text block sits left of centre, the way a
   reference card is set, not floated in the middle of the screen. */
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: start;
}

.rail { min-width: 0; }
.content { min-width: 0; max-width: var(--measure); }

@media (min-width: 56.25em) {
  .page-grid {
    grid-template-columns: var(--rail) minmax(0, var(--measure)) minmax(0, 1fr);
    gap: 0 var(--space-8);
  }
  .rail {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    padding-top: var(--space-1);
  }
  .rail::after {   /* the rule that separates rail from column */
    content: "";
    position: absolute;
    top: -.25rem; right: calc(var(--space-8) / -2); bottom: -.5rem;
    border-right: var(--rule);
  }
}

/* Below 900px the rail becomes a horizontal metadata strip above the text. */
@media (max-width: 56.24em) {
  .rail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--rule);
    margin-bottom: var(--space-6);
  }
  .rail > * { margin: 0 !important; }
}

.rail__num {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--sage-deep);
  display: block;
  margin-bottom: var(--space-2);
}

.rail__meta { margin-top: var(--space-4); }
.rail__meta + .rail__meta { margin-top: var(--space-3); }

.rail__value {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--ink);
  display: block;
  margin-top: 2px;
}

.section { padding-block: var(--space-12); border-top: var(--rule); }
.section:first-of-type { border-top: 0; }

@media (min-width: 56.25em) {
  .section { padding-block: var(--space-16); }
}

.section__title { margin-bottom: var(--space-2); }

/* A specimen frame: how a component is presented on the style guide.
   Hairline box, no shadow, no radius. */
.specimen {
  border: var(--rule);
  background: var(--paper);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.specimen--plain { background: transparent; border-style: dashed; }
.specimen--tight { padding: var(--space-4); }

.specimen__caption {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}

/* ==========================================================================
   06  HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.site-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-header__logo img { height: 32px; width: auto; }

@media (min-width: 56.25em) {
  .site-header__logo img { height: 40px; }
}

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 1px solid transparent;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { border-bottom-color: var(--ink); }

.site-header__cta {
  display: none;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--sage);
  padding-bottom: 2px;
  white-space: nowrap;
}
.site-header__cta:hover { border-bottom-color: var(--sage-deep); }

/* Hamburger — a labelled control, not a mystery glyph. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: var(--rule);
  border-color: var(--line-strong);
  border-radius: 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-toggle__bars { display: block; width: 14px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--ink);
}
.nav-toggle__bars::before { margin-bottom: 4px; }

.mobile-nav {
  display: none;
  border-top: var(--rule);
  padding: var(--space-4) 0 var(--space-6);
}
.mobile-nav[data-open="true"] { display: block; }

.mobile-nav__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.mobile-nav__list li { border-bottom: var(--rule); }

.mobile-nav__link {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

@media (min-width: 56.25em) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-block; }
  .nav-toggle, .mobile-nav { display: none !important; }
}

/* ==========================================================================
   07  FOOTER
   ========================================================================== */

.site-footer {
  border-top: var(--rule);
  margin-top: var(--space-16);
  padding-block: var(--space-12) var(--space-8);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--rule);
}

@media (min-width: 34em) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 56.25em) {
  .site-footer__cols { grid-template-columns: var(--rail) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: var(--space-8); }
}

.site-footer__brand img { height: 32px; width: auto; margin-bottom: var(--space-3); }
.site-footer__promise {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0;
  max-width: 18ch;
}

.footer-nav { min-width: 0; }
.footer-nav__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.footer-nav__list li + li { margin-top: var(--space-2); }
.footer-nav__list a { color: var(--ink); text-decoration-color: var(--line-strong); }
.footer-nav__list a:hover { text-decoration-color: var(--ink); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-6);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding-inline: 0;
}
.site-footer__legal a {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.site-footer__legal a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Required on every page. */
.medical-disclaimer {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 78ch;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--line);
}

.site-footer__colophon {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin: 0;
}

/* ==========================================================================
   08  BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 0;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;          /* thumb target */
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn--primary {
  background: var(--sage-deep);
  color: #FFFFFF;
  border-color: var(--sage-deep);
}
.btn--primary:hover { background: #4E4E3B; border-color: #4E4E3B; }
.btn--primary:active { background: #43442F; }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--ink); background: rgba(71, 55, 44, .04); }
.btn--secondary:active { background: rgba(71, 55, 44, .08); }

.btn--sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); min-height: 38px; }
.btn--lg { font-size: var(--text-base); padding: var(--space-4) var(--space-8); min-height: 52px; letter-spacing: .06em; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* ==========================================================================
   09  FORMS
   ========================================================================== */

.field { display: block; margin-bottom: var(--space-4); }
.field__opt { text-transform: none; letter-spacing: .02em; color: var(--ink-muted); }

.input {
  display: block;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: var(--space-3);
  min-height: 46px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.3;
}
.input::placeholder { color: var(--ink-muted); opacity: 1; }
.input:hover { border-color: var(--ink-muted); }
.input[aria-invalid="true"] { border-color: #8C3B2A; border-width: 2px; }

.field .label { margin-bottom: var(--space-2); }

.form-msg {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: var(--space-3) 0 0;
  min-height: 0;
}
.form-msg:empty { display: none; }
.form-msg--error   { color: #8C3B2A; }
.form-msg--success { color: var(--sage-deep); }

.consent {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: var(--space-3) 0 0;
  max-width: 46ch;
}
.consent a { color: var(--ink-muted); }

/* ==========================================================================
   10  BITE METER  [signature]
   Squares, not circles. This is an index card, not a dashboard.
   ========================================================================== */

.bite-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;   /* pips must never break onto a second row */
}

.bite-meter .pips {
  /* Pips are drawn by JS. Reserve the row now so nothing moves when they land. */
  min-height: var(--pip);
  display: inline-flex;
  align-items: center;
  gap: var(--pip-gap);
  flex-wrap: wrap;
  max-width: 100%;
}

.pip {
  display: block;
  width: var(--pip);
  height: var(--pip);
  border-radius: 1px;
  border: 1px solid var(--line);
  background: transparent;
  flex: 0 0 auto;
}
.pip--filled { background: var(--tan); border-color: #B78F53; }

.bite-meter__label {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Over-20 fallback: the count replaces the row rather than wrapping to three
   lines of squares on a phone. */
.bite-meter__count {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 2px var(--space-2);
}

/* Stacked variant for the rail. */
.bite-meter--stack { display: block; }
.bite-meter--stack .bite-meter__label { display: block; margin-top: var(--space-2); }

/* Divider variant: five pips, in place of <hr>. */
.bite-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pip-gap);
  margin: var(--space-10) 0;
  border: 0;
  padding: 0;
  opacity: .55;
}
.bite-divider::before,
.bite-divider::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--line);
  flex: 0 0 auto;
  margin: 0 var(--space-3);
}
.bite-divider .pip { width: 5px; height: 5px; background: var(--line); border-color: var(--line); }
.bite-divider .pip:nth-child(2) { background: var(--tan); border-color: var(--tan); }

/* ==========================================================================
   11  QUICK ANSWER
   ========================================================================== */

.quick-answer {
  background: var(--paper);
  border: var(--rule);
  border-left: 4px solid var(--sage-deep);
  border-radius: 0;
  padding: var(--space-6);
  margin: 0 0 var(--space-8);
}
.quick-answer__label { margin-bottom: var(--space-3); }
.quick-answer__body { font-size: var(--text-lg); line-height: 1.55; margin: 0; }
.quick-answer__body + .quick-answer__meter { margin-top: 1.25rem; }
.quick-answer__meter {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--rule);
}

/* ==========================================================================
   12  DANA ASIDE
   ========================================================================== */

.dana-aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  background: rgba(232, 188, 175, .16);
  border: 1px solid var(--blush);
  border-radius: 0;
  padding: 1.25rem 1.25rem;
  margin: var(--space-8) 0;
}

.dana-aside__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--blush);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper);
  flex: 0 0 auto;
}

.dana-aside__label { margin-bottom: var(--space-2); }
.dana-aside__body { font-size: var(--text-base); line-height: 1.6; margin: 0; }
.dana-aside__body p + p { margin-top: var(--space-4); }

/* ==========================================================================
   13  FOOD CARD / GRID
   ========================================================================== */

.food-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--rule);
  border-left: var(--rule);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 34em) {
  .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .food-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cards separated by shared hairlines, like ruled index cards in a box. */
.food-grid { margin-bottom: var(--space-12); }

.food-card {
  border-bottom: var(--rule);
  border-right: var(--rule);
  background: var(--paper);
  padding: var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.food-card__name {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.food-card__portion { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

.food-card__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dotted var(--line);
}
.food-card__figure { display: block; }
.food-card__figure .label { margin-bottom: 2px; }
.food-card__num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  letter-spacing: -.02em;
  line-height: 1.1;
  display: block;
}
.food-card__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }

/* ==========================================================================
   14  DAY PLAN
   ========================================================================== */

.day-plan { margin: var(--space-8) 0; }
.day-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
}
.day-plan__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
  letter-spacing: -.015em; text-transform: none; margin: 0; }

.day-plan__table caption { text-align: left; }
.day-plan__table th, .day-plan__table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; }
.day-plan__table thead th {
  border-bottom: var(--rule);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.day-plan__table tbody tr { border-bottom: var(--rule); }
.day-plan__table tbody td { font-size: var(--text-base); }
.day-plan__table .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-plan__table tfoot td { padding-top: var(--space-4); font-weight: 600; }

.day-plan__foot-note { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-4) 0 0; }

/* Under 640px the table reflows — but not to labelled stacked rows. That
   pattern costs eight lines per sitting; at seven tables a week it buried the
   food under its own labels. A sitting is two lines, like the index card it
   is:

       7:30                        5 bites · 41g
       Greek yogurt, ¾ cup, whey stirred through
       ·········································

   Never a horizontal scroll — she is reading this one-handed in bed. */
@media (max-width: 39.99em) {
  .day-plan .day-plan__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .day-plan .day-plan__table, .day-plan .day-plan__table tbody, .day-plan .day-plan__table tfoot { display: block; width: 100%; }
  .day-plan .day-plan__table tbody tr, .day-plan .day-plan__table tfoot tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-3) 0;
  }
  .day-plan .day-plan__table tbody tr { border-bottom: 1px dotted var(--line); }
  .day-plan .day-plan__table tbody td, .day-plan .day-plan__table tfoot td { padding: 0; border-bottom: 0; }
  .day-plan .day-plan__table td[data-cell="Time"]  { grid-column: 1; grid-row: 1; }
  .day-plan .day-plan__table td[data-cell="Bites"] { grid-column: 2; grid-row: 1; color: var(--ink-soft); }
  .day-plan .day-plan__table td[data-cell="Bites"]::after { content: " bites"; font-size: var(--text-xs); letter-spacing: .06em; color: var(--ink-muted); }
  .day-plan .day-plan__table td[data-cell="Protein"] { grid-column: 3; grid-row: 1; }
  .day-plan .day-plan__table td[data-cell="What"] { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
  .day-plan .day-plan__table tbody tr:last-child { border-bottom: var(--rule); }
  .day-plan .day-plan__table tfoot tr { border-bottom: 0; padding-bottom: 0; }
  .day-plan .day-plan__table tfoot td:first-child {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .day-plan .day-plan__table td:empty { display: none; }
}

/* ==========================================================================
   15  GEAR BADGE
   ========================================================================== */

.gear-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 3px var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
}

/* Gear is a quantity, so it reads in the same pip language as the bite meter. */
.gear-badge__pips { display: inline-flex; gap: 2px; }
.gear-badge__pip { width: 5px; height: 10px; border: 1px solid var(--line-strong); border-radius: 1px; }
.gear-badge__pip--on { background: var(--sage-deep); border-color: var(--sage-deep); }
.gear-badge--low .gear-badge__pip--on { background: var(--tan); border-color: #A97F45; }

/* ==========================================================================
   16  CALLOUT
   ========================================================================== */

.callout {
  border: var(--rule);
  border-left: 3px solid var(--sage);
  border-radius: 0;
  background: var(--paper);
  padding: var(--space-4) 1.25rem;
  margin: var(--space-8) 0;
}
.callout__label { margin-bottom: var(--space-2); }
.callout p { font-size: var(--text-base); margin: 0; }
.callout p + p { margin-top: var(--space-3); }

.callout--warning { border-left-color: #8C3B2A; background: rgba(140, 59, 42, .045); }
.callout--warning .callout__label { color: #8C3B2A; }

/* ==========================================================================
   17  SAVE PIN
   ========================================================================== */

.save-pin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  border: var(--rule);
  background: var(--paper);
  padding: var(--space-4);
  margin: var(--space-12) 0;
}

@media (min-width: 34em) {
  .save-pin { grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
}

.save-pin__media {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--sage-tint);
  border: var(--rule);
  overflow: hidden;
}
.save-pin__media img { width: 100%; height: 100%; object-fit: cover; }

.save-pin__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400;
  letter-spacing: -.015em; text-transform: none; margin: var(--space-2) 0 var(--space-2); }
.save-pin__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-4); }

/* Placeholder state until real pin art exists. */
.save-pin__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: var(--space-2);
  text-align: center; padding: var(--space-3);
}

/* ==========================================================================
   18  RELATED
   ========================================================================== */

.related { margin: var(--space-12) 0; }
.related__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }

@media (min-width: 48em) {
  .related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); }
  .related__item + .related__item { border-left: var(--rule); }
  .related__item { padding-inline: var(--space-4); }
  .related__item:first-child { padding-left: 0; }
  .related__item:last-child { padding-right: 0; }
}

.related__item { border-bottom: var(--rule); padding-block: var(--space-4); }
.related__kicker { margin-bottom: var(--space-2); }
.related__link {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-decoration: none;
  color: var(--ink);
  display: inline-block;
}
.related__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.related__meta { margin-top: var(--space-2); }

/* ==========================================================================
   19  AUTHOR BOX
   ========================================================================== */

.author-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  border-top: 2px solid var(--ink);
  border-bottom: var(--rule);
  padding: var(--space-6) 0;
  margin: var(--space-12) 0;
}
.author-box__mark {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 1.25rem;
  background: var(--paper);
}
.author-box__name { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); margin: 0 0 var(--space-1); text-transform: none; letter-spacing: 0; }
.author-box__bio { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.author-box__link { font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; display: inline-block; margin-top: var(--space-3); }

/* ==========================================================================
   20  OPT-INS
   Four deliberately different formats. Five identical boxes create banner
   blindness, so these do not share a silhouette.
   ========================================================================== */

/* Shared state machine, not shared appearance. */
[data-lead-form][data-state="success"] .optin__fields,
[data-lead-form][data-state="success"] .consent { display: none; }

/* --- 20a  inline: a tinted panel, mid-article ------------------------- */
.optin-inline {
  background: var(--sage-tint);
  border: var(--rule);
  border-radius: 0;
  padding: var(--space-6);
  margin: var(--space-12) 0;
}
.optin-inline__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -.015em;
  text-transform: none;
  margin: var(--space-2) 0 var(--space-2);
}
.optin-inline__note { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.optin-inline .input { background: var(--paper); }

@media (min-width: 34em) {
  .optin-inline__fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
  .optin-inline__fields .field { margin-bottom: 0; }
  .optin-inline__fields .btn { min-height: 46px; }
}

/* --- 20b  feature: end of article, quote + list ----------------------- */
.optin-feature {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: var(--space-8) 0;
  margin: var(--space-16) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

@media (min-width: 48em) {
  .optin-feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-12); align-items: start; }
}

.optin-feature__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: none;
  margin: var(--space-2) 0 var(--space-4);
}
.optin-feature__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.optin-feature__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--line);
  font-size: var(--text-base);
  line-height: 1.45;
}
.optin-feature__list li::before {
  content: "";
  width: var(--pip); height: var(--pip);
  border-radius: 2px;
  background: var(--tan);
  border: 1px solid #A97F45;
  margin-top: .5em;
}
.optin-feature__quote {
  border-left: 2px solid var(--blush);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.55;
}
.optin-feature__quote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-muted);
}
.optin-feature__form { background: var(--paper); border: var(--rule); padding: var(--space-6); }

/* --- 20c  footer: one line, no ornament ------------------------------- */
.optin-footer__title {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}
.optin-footer__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.optin-footer__row .field { flex: 1 1 14rem; margin-bottom: 0; }
.optin-footer .input { background: var(--paper); min-height: 44px; }
.optin-footer .consent { max-width: 40ch; }

/* --- 20d  sticky: mobile only, after 50% scroll ----------------------- */



@media (min-width: 56.25em) {
}

/* ==========================================================================
   21  PROSE
   ========================================================================== */

.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p { font-size: var(--text-base); line-height: var(--lh-body); margin: 0 0 var(--space-6); }

.prose h2 {
  font-size: var(--text-2xl);
  margin: var(--space-12) 0 var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--rule);
}
.prose h3 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-3); }

.prose ul, .prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.prose li::marker { color: var(--sage-deep); font-family: var(--font-data); font-size: .85em; }

.prose blockquote {
  margin: var(--space-8) 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--sage);
  font-size: var(--text-lg);
  line-height: 1.5;
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose figure { margin: var(--space-8) 0; }
.prose img { border: var(--rule); width: 100%; }
.prose figcaption {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--rule);
}

.prose table { margin: var(--space-8) 0; font-size: var(--text-base); }
.prose thead th { text-align: left; border-bottom: 2px solid var(--ink); padding: var(--space-2) var(--space-4) var(--space-2) 0; font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
.prose tbody td { border-bottom: var(--rule); padding: var(--space-3) var(--space-4) var(--space-3) 0; vertical-align: top; }

.prose a { color: var(--ink); text-decoration-color: var(--sage); }
.prose a:hover { text-decoration-color: var(--ink); }

.prose code { font-family: var(--font-data); font-size: .9em; background: var(--sage-tint); padding: 1px 4px; border-radius: 2px; }


/* ==========================================================================
   22  ARTICLE
   Four components, added in phase 2. Everything else on an article page is
   phase-1 furniture reused unchanged.
   ========================================================================== */

/* --- 22a  article-header ---------------------------------------------- */
.article-header { margin-bottom: var(--space-8); }
.article-header__eyebrow { margin-bottom: var(--space-4); }
.article-header__title { margin-bottom: var(--space-4); }
.article-header__dek { margin-bottom: var(--space-6); }

.article-header__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--rule);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
}
.article-header__author { color: var(--ink); }
.article-header__author a { color: inherit; text-decoration-color: var(--line-strong); }
.article-header__author a:hover { text-decoration-color: var(--ink); }
.article-header__sep { color: var(--line-strong); }

/* --- 22b  article-toc -------------------------------------------------- */
.article-toc__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.article-toc__list li { margin: 0; }
.article-toc__list a {
  display: block;
  padding: var(--space-2) 0;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-toc__list a:hover { color: var(--ink); border-bottom-color: var(--line); }

/* The contents list is a <details>. On desktop it is always open and the
   summary is hidden; below 900px main.js closes it, so it costs one line of
   the first screen instead of five. Without JS it stays open, which is the
   safe way round to fail. */
.article-toc__summary {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
  padding: var(--space-1) 0;
}
.article-toc__summary::-webkit-details-marker { display: none; }
.article-toc__summary::after {
  content: " +";
  font-family: var(--font-data);
  color: var(--sage-deep);
}
.article-toc details[open] > .article-toc__summary::after { content: " \2013"; }

/* Below 900px the rail is a horizontal strip: the contents list takes a full
   row and lays its links out inline, and anything already stated elsewhere on
   the page is dropped rather than repeated. */
/* Once JS has opened it on desktop the summary is redundant. If JS never runs
   it stays visible and clickable, which is the right way to fail. */
@media (min-width: 56.25em) {
  .article-toc details[open] > .article-toc__summary { display: none; }
}

@media (max-width: 56.24em) {
  .article-toc { flex: 1 1 100%; }
  .article-toc > details > .label { display: none; }
  .article-toc__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .article-toc__list a { padding: 0; border-bottom: 1px solid var(--line); }

  /* Reading time is already in the byline; Save is already in the save-pin
     block further down. Repeating them costs half the first screen. */
  .rail__meta--desk { display: none !important; }

  /* In the horizontal strip a stacked label-over-value is two lines for one
     fact. Lay them out inline instead. */
  .rail__meta { display: flex; align-items: baseline; gap: var(--space-2); }
  .rail__stat { font-size: var(--text-lg); }

  /* The rail already says the category directly above this. */
  .article-header__eyebrow { display: none; }
  .article-header__dek { margin-bottom: var(--space-4); }
  .article-header { margin-bottom: var(--space-6); }

  /* Less dead air above the fold. */
  .section { padding-block: var(--space-6) var(--space-8); }
}

/* Big mono figure in the rail — one per article, the number she came for. */
.rail__stat {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  margin-top: 2px;
}

/* --- 22c  figure ------------------------------------------------------- */
.figure { margin: var(--space-12) 0; }
.figure__img { display: block; width: 100%; height: auto; border: var(--rule); }
.figure__caption {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: var(--rule);
}

/* Labelled placeholder until real art exists, same pattern as save-pin, so a
   page can ship before the images are generated. */
.figure__placeholder {
  aspect-ratio: 3 / 2;
  background: var(--sage-tint);
  border: var(--rule);
  display: grid;
  place-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
}

/* --- 22d  faq ---------------------------------------------------------- */
.faq { margin: var(--space-12) 0; border-top: 2px solid var(--ink); }
.faq__item { border-bottom: var(--rule); padding: var(--space-6) 0; }
.faq__q {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-transform: none;
  margin: 0 0 var(--space-3);
}
.faq__a { font-size: var(--text-base); line-height: var(--lh-body); }
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: var(--space-3); }


/* ==========================================================================
   23  PAGE FURNITURE  (about, start here, hubs)
   ========================================================================== */

/* --- 23a  figure modifiers --------------------------------------------- */
.figure--hero { margin-top: 0; margin-bottom: var(--space-12); }
.figure--portrait { max-width: 26rem; }
.figure--portrait .figure__placeholder { aspect-ratio: 3 / 4; }

/* --- 23b  photographic marks -------------------------------------------
   The monogram slots become photo slots. Square, not round: radius is capped
   at 3px across the system and a circular avatar would be the one place the
   card-index language breaks. */
.dana-aside__mark,
.author-box__mark { overflow: hidden; padding: 0; }

/* A 40px monogram reads fine; a 40px face does not. The photo variants get
   room to actually be a person. */
.dana-aside__mark:has(img) { width: 60px; height: 60px; }
.dana-aside__mark img,
.author-box__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-box__mark { width: 64px; height: 64px; }

/* --- 23c  signature ----------------------------------------------------- */
.signature { margin: var(--space-8) 0 var(--space-12); }
.signature img { height: 62px; width: auto; }

/* --- 23d  proof ---------------------------------------------------------
   Honest proof only. Laid out as a spec sheet rather than a row of feature
   cards, which is the pattern this art direction exists to avoid. The left
   column is a slot: when there are real numbers they drop in without the
   layout changing. */
.proof {
  border-top: 2px solid var(--ink);
  border-bottom: var(--rule);
  padding: var(--space-6) 0 var(--space-2);
  margin: var(--space-12) 0;
}
.proof__label { margin-bottom: var(--space-4); }
.proof__list { list-style: none; margin: 0; padding: 0; }
.proof__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: 1px dotted var(--line);
}
.proof__item:last-child { border-bottom: 0; }
@media (min-width: 34em) {
  .proof__item { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}
.proof__stat {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-lg);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
}
.proof__stat--none {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.proof__text { font-size: var(--text-sm); line-height: 1.6; margin: 0; }
.proof__source {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--ink-muted);
}

/* --- 23e  stance — the lines in the sand -------------------------------- */
.stance + .prose, .prose + .label { margin-top: var(--space-8); }
.label + .stance { margin-top: var(--space-3); }

.stance {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: var(--space-2) 0;
  margin: var(--space-12) 0;
  list-style: none;
}
.stance__item {
  padding: var(--space-5, 1.25rem) 0;
  border-bottom: 1px dotted var(--line);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.stance__item:last-child { border-bottom: 0; }

/* --- 23f  article grid — category hubs and "where to go next" ----------- */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--rule);
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
}
@media (min-width: 40em) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card { padding-right: var(--space-6); }
  .article-card:nth-child(even) { padding-left: var(--space-6); border-left: var(--rule); }
}
.article-card { border-bottom: var(--rule); padding: var(--space-6) 0; margin: 0; }
.article-card__kicker { margin-bottom: var(--space-2); }
.article-card__link {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-transform: none;
  text-decoration: none;
  color: var(--ink);
  display: inline-block;
  margin: 0;
}
.article-card__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-card__note { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.article-card__meta { margin-top: var(--space-3); }

/* --- 23g  photographs inside the opt-ins -------------------------------- */
.optin-feature__media { margin-bottom: var(--space-4); border: var(--rule); }
.optin-feature__media img { display: block; width: 100%; height: auto; }

.optin-inline--media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.optin-inline__media { border: var(--rule); align-self: start; }
.optin-inline__media img { display: block; width: 100%; height: auto; }
@media (min-width: 40em) {
  .optin-inline--media { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
}


/* ==========================================================================
   24  CHARTS  — the visual value system
   Inline SVG and CSS only. No libraries, no external requests, renders with
   JavaScript disabled, prints and screenshots cleanly.

   These are drawn on the same card stock as everything else: hairlines, mono
   numerals, tokens only. A reference book, not a dashboard.
   ========================================================================== */

.chart { margin: var(--space-12) 0; }
.chart__title { margin-bottom: var(--space-4); }
.chart__note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--rule);
}
.chart__source {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--ink-muted);
}

/* --- 24a  chart-bars ---------------------------------------------------- */
.chart-bars { min-width: 0; }
.chart-bars__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.chart-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--line);
  margin: 0;
}
.chart-bars__label { font-size: var(--text-sm); line-height: 1.3; grid-column: 1 / -1; }
.chart-bars__track { display: block; min-width: 0; }
.chart-bars__bar {
  display: block;
  height: 13px;
  border-radius: 1px;
  background: var(--sage);
  min-width: 2px;
}
.chart-bars__bar--best  { background: var(--tan); }
.chart-bars__bar--muted { background: var(--line); }
.chart-bars__value { font-size: var(--text-sm); white-space: nowrap; }

@media (min-width: 34em) {
  .chart-bars__row { grid-template-columns: 11.5rem minmax(0, 1fr) 3.5rem; }
  .chart-bars__label { grid-column: auto; }
  .chart-bars__value { text-align: right; }
}

/* --- 24b  chart-dayfill -------------------------------------------------
   Geometry in SVG, every word in HTML. Keeping the labels out of the SVG is
   what lets them stay real text at a real size at 320px and at 1600px. */
.chart-dayfill { min-width: 0; }
.chart-dayfill__frame {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--space-2);
}
.chart-dayfill__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  padding-bottom: 1px;
}
.chart-dayfill__plot {
  position: relative;
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.chart-dayfill__plot svg { display: block; width: 100%; height: 170px; }
@media (min-width: 40em) { .chart-dayfill__plot svg { height: 220px; } }

.chart-dayfill__area   { fill: var(--sage-tint); }
.chart-dayfill__line   { fill: none; stroke: var(--sage-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart-dayfill__target { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.chart-dayfill__noon   { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }

.chart-dayfill__flag {
  position: absolute;
  right: 2px;
  transform: translateY(-100%);
  background: var(--cream);
  padding: 0 3px;
  margin: 0;
}
.chart-dayfill__cut {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  background: var(--cream);
  padding: 0 3px;
  margin: 0;
  white-space: nowrap;
}
.chart-dayfill__x {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0 3.4rem;
  padding: 0;
}
.chart-dayfill__x li { margin: 0; }
.chart-dayfill__x b {
  display: block;
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: -.01em;
}

/* --- 24c  chart-gears --------------------------------------------------- */
.chart-gears {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--rule);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 34em) {
  .chart-gears { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-gears__col + .chart-gears__col { border-left: var(--rule); padding-left: var(--space-4); }
}
.chart-gears__col { border-bottom: var(--rule); padding: var(--space-4) 0; margin: 0; }
.chart-gears__pips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pip-gap);
  max-width: 8.5rem;
  margin: var(--space-4) 0 var(--space-3);
}
.chart-gears__figs { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.chart-gears__fig { display: block; }
.chart-gears__num {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xl);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.chart-gears__what { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-3) 0 0; line-height: 1.5; }

/* --- 24d  plate-visual -------------------------------------------------- */
.plate-visual { max-width: 21rem; margin-inline: 0; }
.plate-visual svg { display: block; width: 100%; height: auto; max-width: 17rem; }
.plate-visual .pv-bowl   { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.25; }
.plate-visual .pv-rim    { fill: none; stroke: var(--line); stroke-width: 1; }
.plate-visual .pv-food   { fill: var(--sage-tint); stroke: var(--sage); stroke-width: 1; }
.plate-visual .pv-accent { fill: var(--tan); }

.plate-visual__legend {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: var(--rule);
}
.plate-visual__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--line);
  font-size: var(--text-sm);
  margin: 0;
}
.plate-visual__g { white-space: nowrap; }
.plate-visual__total {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: var(--space-3) 0 0;
}

/* --- 24e  stat-band ----------------------------------------------------- */
.stat-band {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: var(--space-6) 0 var(--space-4);
  margin: var(--space-12) 0;
}
.stat-band__list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
@media (min-width: 34em) {
  .stat-band__list { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-6); }
  .stat-band__item + .stat-band__item { border-left: var(--rule); padding-left: var(--space-6); }
}
.stat-band__item { margin: 0; padding-bottom: var(--space-2); border-bottom: 1px dotted var(--line); }
@media (min-width: 34em) { .stat-band__item { border-bottom: 0; padding-bottom: 0; } }
.stat-band__num {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--ink);
}
.stat-band__what { display: block; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-muted); margin-top: var(--space-2); }
.stat-band__source {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--ink-muted);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: var(--rule);
}

/* --- 24f  pull-quote ---------------------------------------------------- */
.pull-quote {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: var(--space-8) 0;
  margin: var(--space-16) 0;
}
.pull-quote__text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 48em) { .pull-quote__text { font-size: var(--text-3xl); } }
.pull-quote__cite {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-muted);
}

/* --- 24g  compare-cards ------------------------------------------------- */
.compare-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: var(--space-12) 0;
}
@media (min-width: 40em) { .compare-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } }
.compare-card { border: var(--rule); padding: var(--space-5, 1.25rem); background: var(--paper); }
@media (min-width: 40em) { .compare-card + .compare-card { border-left: 0; } }
.compare-card--was { color: var(--ink-muted); background: transparent; }
.compare-card--now { border-color: var(--sage); }
.compare-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  margin: var(--space-2) 0 var(--space-4);
}
.compare-card--now .compare-card__title { color: var(--ink); }
.compare-card__list { list-style: none; margin: 0; padding: 0; }
.compare-card__list li {
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--line);
  font-size: var(--text-base);
  line-height: 1.4;
  margin: 0;
}
.compare-card__list li:last-child { border-bottom: 0; }
.compare-card--now .compare-card__list li::before {
  content: "";
  display: inline-block;
  width: var(--pip); height: var(--pip);
  border-radius: 2px;
  background: var(--tan);
  border: 1px solid #A97F45;
  margin-right: var(--space-3);
  vertical-align: baseline;
}

/* --- 24h  screenshot-card ----------------------------------------------
   Built to survive being cropped out of the page and posted somewhere else,
   so it carries its own border, its own title and its own domain. */
.screenshot-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: var(--space-6);
  margin: var(--space-12) 0;
  max-width: 30rem;
}
.screenshot-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: var(--space-2) 0 var(--space-4);
}
.screenshot-card__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.screenshot-card__list li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--line);
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.screenshot-card__n {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  letter-spacing: -.02em;
  color: var(--ink);
}
.screenshot-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--rule);
}
.screenshot-card__domain {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   25  PRINT — she may well print the grocery list
   ========================================================================== */

@media print {
  html::before, .site-header, .optin-sticky, .optin-inline, .optin-feature,
  .save-pin, .article-toc, .related, .proof { display: none !important; }
  html, body { background: #fff; color: #000; }
  .page-grid { display: block; }
  .rail { position: static; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ==========================================================================
   26  RENDER SCHEDULING
   The flagship carries seven tables and a dozen figures. content-visibility
   lets the browser skip layout/paint for blocks far below the fold until
   they approach it — no visual change, meaningfully faster first paint on
   long articles. The hero is excluded: it IS the first paint.
   ========================================================================== */
.day-plan,
figure.chart,
.prose figure.figure:not(.figure--hero),
.screenshot-card,
.optin-feature,
.save-pin {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
.day-plan { contain-intrinsic-size: auto 640px; }

/* ==========================================================================
   27  HOMEPAGE + MAGNETS
   The homepage hero is asymmetric like everything else — no centred hero.
   Magnets are subscriber deliverables built to survive a printer.
   ========================================================================== */

/* --- 27a  homepage hero ------------------------------------------------- */
.home-hero { padding-top: var(--space-10); }
.home-hero__eyebrow { display: block; margin-bottom: var(--space-5); }
.home-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
@media (min-width: 56.25em) { .home-hero__title { font-size: var(--text-4xl); } }
.home-hero__dek { margin: 0 0 var(--space-8); max-width: 34em; }
.rail--media { align-self: start; }
.rail--media .figure { margin: 0; }
@media (max-width: 56.24em) { .rail--media { display: block; margin-top: var(--space-8); } }
.rail__value--link { display: inline-block; text-decoration: none; border-bottom: 1px solid var(--line-strong); }

/* --- 27b  proof figures ------------------------------------------------- */
.proof__num {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  letter-spacing: -.035em;
  line-height: 1.05;
}
.proof__what { display: block; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-muted); margin-top: var(--space-2); }

/* --- 27c  magnet pages -------------------------------------------------- */
.magnet { max-width: 46rem; margin: 0 auto; padding: 0 var(--space-5) var(--space-16); }
.magnet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-8);
}
.magnet__logo { display: inline-block; }
.magnet__logo img { display: block; width: 142px; height: auto; }
.magnet__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-2);
}
.magnet__dana { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; max-width: 34em; }
.magnet__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

.magnet__welcome {
  border: var(--rule);
  border-left: 3px solid var(--sage);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  background: var(--paper);
}
.magnet__welcome .label { display: block; margin-bottom: var(--space-3); }
.magnet__welcome p { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.55; }
.magnet__welcome p:first-of-type { margin-top: 0; }

.magnet__section { margin: var(--space-12) 0; }
.magnet__section:first-of-type { margin-top: var(--space-10); }
.magnet__section > h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: -.015em;
  padding-bottom: var(--space-2);
  border-bottom: var(--rule);
  margin: 0 0 var(--space-5);
}
.magnet__foot {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* the data table these pages are mostly made of */
.mtable { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-6); font-size: var(--text-sm); }
.mtable caption {
  text-align: left;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--space-3);
}
.mtable th {
  text-align: left;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
}
.mtable td { border-bottom: 1px dotted var(--line); padding: var(--space-2) var(--space-3) var(--space-2) 0; vertical-align: top; }

/* The food table will not fit a 320px phone in one row. Below 34em each food
   becomes two lines: name and per-bite on top (per-bite is the column she is
   here for), serving and the raw figures beneath. One cell per slot, so
   nothing can overlap. No horizontal scroll, nothing hidden. */
@media (max-width: 33.99em) {
  .mtable--foods, .mtable--foods tbody, .mtable--foods tr { display: block; width: 100%; }
  .mtable--foods thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mtable--foods tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px dotted var(--line);
  }
  .mtable--foods td { border: 0; padding: 0; }
  .mtable--foods td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mtable--foods td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .mtable--foods td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .mtable--foods td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  .mtable--foods td:nth-child(2),
  .mtable--foods td:nth-child(3) {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    margin-top: 2px;
  }
}
.mtable .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mtable .num--key { font-weight: 500; color: var(--ink); }
.mtable tbody tr:last-child td { border-bottom: var(--rule); }

/* checkbox list for the printed grocery list */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--line);
  margin: 0;
  font-size: var(--text-sm);
}
.checklist li::before {
  content: "";
  display: block;
  width: 12px; height: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  transform: translateY(2px);
}
.checklist__g { font-family: var(--font-data); white-space: nowrap; color: var(--ink-muted); }

/* --- 27c2  the list peek (homepage proof excerpt) ----------------------- */
.list-peek {
  border: var(--rule);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  background: var(--paper);
}
.list-peek .label { display: block; margin-bottom: var(--space-4); }
.mtable--peek { margin-bottom: var(--space-3); }
.mtable--peek td, .mtable--peek th { font-size: var(--text-sm); }
.list-peek__more { margin: 0; }

/* --- 27d  print --------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .sticky-bar, .magnet__actions,
  .magnet__welcome, .skip-link, .magnet__logo { display: none !important; }
  html, body { background: #fff; color: #000; font-size: 10.5pt; }
  .magnet { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .magnet__section { page-break-inside: avoid; break-inside: avoid; margin: 14pt 0; }
  .mtable { page-break-inside: auto; font-size: 9.5pt; }
  .mtable tr, .checklist li { page-break-inside: avoid; break-inside: avoid; }
  .mtable thead { display: table-header-group; }
  .magnet__head { border-bottom: 1.5pt solid #000; padding-top: 0; }
  .magnet__logo { display: inline-block; }
.magnet__logo img { display: block; width: 142px; height: auto; }
.magnet__title { font-size: 18pt; }
  .magnet__foot { border-top: 1.5pt solid #000; font-size: 8pt; }
  .callout, .magnet__welcome, .day-plan { background: none !important; }
  .day-plan__table, .mtable { border-color: #999 !important; }
}

/* ==========================================================================
   28  THE DOMINO LINE
   One sentence, three surfaces, identical wording everywhere. Display serif,
   small and quiet, separated by a hairline — a closing statement, not a slogan
   ========================================================================== */
.domino {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: .01em;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  margin: var(--space-5) 0 0;
}
.screenshot-card .domino { margin-top: var(--space-5); }
.site-footer .domino {
  max-width: 34em;
  margin: var(--space-8) 0 var(--space-4);
}
.magnet .domino { margin: var(--space-10) 0 var(--space-2); }
@media print {
  .magnet .domino { border-top-color: #999; margin: 14pt 0 4pt; padding-top: 8pt; }
}

/* ==========================================================================
   29  COMPONENT REDESIGN PASS  (prompts 10 + 11)
   Everything here exists to make the site read more like a printed reference
   card, never less: hairlines, no shadows, no gradients, radius <= 3px.
   ========================================================================== */

/* --- 29a  anchors clear the sticky header ------------------------------- */
:root { --header-h: 57px; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* --- 29b  proof: the specification card (11-A) -------------------------- */
.proof {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 60rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);   /* kills any heavy 2px rule above */
}
.proof::before {
  content: "Why you can trust this";
  grid-column: 1 / -1;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 30em) { .proof { grid-template-columns: 1fr 1fr; } }
.proof__item {
  padding: var(--space-5);
  margin: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 30em) {
  .proof__item:nth-child(odd)  { border-right: 1px solid var(--line); }
  .proof__item:nth-child(1), .proof__item:nth-child(2) { border-top: 0; }
}
@media (max-width: 29.99em) { .proof__item:first-child { border-top: 0; } }
/* These are typographic statements, not data readouts — display serif, never mono. */
.proof__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.06;
  color: var(--ink);
  font-variant-numeric: normal;
}
.proof__num--words { font-size: var(--text-xl); white-space: nowrap; }
.proof__what {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--lh-body, 1.55);
  color: var(--ink-muted);
  margin-top: var(--space-2);
}

/* --- 29c  bite meter: inline, never boxed, never wrapping (11-B) -------- */
.bite-meter {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
}
@media (min-width: 26.25em) {
  .bite-meter { flex-wrap: nowrap; justify-content: space-between; width: 100%; }
  .bite-meter__label { text-align: right; margin-left: auto; }
}
.bite-meter .pips {
  display: flex;
  flex-wrap: nowrap;               /* the cap in JS guarantees this fits */
  align-items: center;
  gap: var(--pip-gap);
  min-width: 0;
}
.bite-meter__count {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-left: var(--space-2);
  white-space: nowrap;
}
/* a meter never carries its own panel — it inherits its host's surface */
.quick-answer__meter { border: 0; background: none; padding: 0; margin-top: var(--space-4); }

/* --- 29d  gears: one header line, one meter, one sentence (11-C) -------- */
.chart-gears__col {
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) 0;
  margin: 0;
  display: block;
}
.chart-gears__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.chart-gears__head .gear-badge { font-size: var(--text-xs); }
.chart-gears__stat {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  color: var(--ink);
  white-space: nowrap;
}
/* Under 22.5em the badge and the stat no longer share a line at 320px; let the
   stat drop beneath the badge rather than run past the column. */
@media (max-width: 22.5em) {
  .chart-gears__head { flex-wrap: wrap; }
}
.chart-gears__pips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pip-gap);
  align-items: center;
  max-width: none;
  margin: var(--space-3) 0 var(--space-2);
}
.chart-gears__what { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; line-height: 1.5; }

/* --- 29e  hero rhythm: nothing starts flush under the header (11-D) ----- */
main > .wrap > .section:first-of-type,
main > .wrap > .page-grid.section:first-of-type,
main > .wrap > .home-hero {
  padding-top: var(--space-10);
}
@media (min-width: 56.25em) {
  main > .wrap > .section:first-of-type,
  main > .wrap > .page-grid.section:first-of-type,
  main > .wrap > .home-hero {
    padding-top: var(--space-16);
  }
}
.home-hero__eyebrow { margin-bottom: var(--space-3); }
.home-hero__title {
  letter-spacing: -.01em;
  line-height: 1.08;
  margin-bottom: var(--space-4);
}
.home-hero__dek { color: var(--ink-muted); margin-bottom: var(--space-8); }

/* --- 29f  feature opt-in: the photo stops eating the screen (11-E) ------ */
.optin-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 44.99em) {
  .optin-feature__media {
    aspect-ratio: 4 / 5;
    max-height: 38vh;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 2px;
  }
  .optin-feature__media img { object-position: 50% 18%; }
  /* Photo, headline and the first field must share one viewport. The two inner
     wrappers become display:contents so their children can be ordered directly. */
  .optin-feature { display: flex; flex-direction: column; }
  .optin-feature > div { display: contents; }
  .optin-feature .label            { order: 1; }
  .optin-feature__title            { order: 2; margin-top: var(--space-3); }
  .optin-feature__media            { order: 3; margin: var(--space-4) 0; }
  .optin-feature__form form        { order: 4; }
  .optin-feature__list             { order: 5; margin-top: var(--space-6); }
  .optin-feature__quote            { order: 6; }
}
@media (min-width: 45em) {
  .optin-feature { display: grid; grid-template-columns: 3fr 4fr; gap: var(--space-8); align-items: start; }
  .optin-feature__media { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; }
}

/* --- 29g  sticky opt-in bar (11-F) ------------------------------------- */



/* --- 29h  the article card, with its photograph (12-1) ------------------ */
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.article-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--cream, var(--paper));
}
.article-card__media img,
.article-card__media picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4);
}
.article-card__kicker { display: block; margin-bottom: var(--space-2); }
.article-card__note { margin: var(--space-2) 0 0; }
.article-card__meta { margin-top: auto; padding-top: var(--space-3); display: block; }
/* one click target, no shadow, no lift, no zoom */
.article-card__link::after { content: ""; position: absolute; inset: 0; }
.article-card:hover, .article-card:focus-within { border-color: var(--ink-muted); }
.article-card:hover .article-card__link,
.article-card:focus-within .article-card__link { text-decoration: underline; }
.article-card__link:focus-visible { outline: none; }
.article-card:focus-within { outline: 2px solid var(--sage); outline-offset: 3px; }

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 40em) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related__list { border-top: 0; }
.related__list .article-card { list-style: none; }

/* --- 29i  desktop composition for marketing pages (10-3, 10-4) --------- */
@media (min-width: 56.25em) {
  .home-hero .page-grid--wide {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--space-10);
    align-items: center;
  }
}
@media (min-width: 40em) {
  .home-hero .optin-inline__fields { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); align-items: end; }
}
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--tint { background: var(--sage-tint); }
.band__inner { max-width: var(--wrap, 72rem); margin: 0 auto; padding: var(--space-12) var(--space-5); }
@media (min-width: 56.25em) { .band__inner { padding: var(--space-16) var(--space-6); } }
.figure.chart, figure.chart, .chart-bars, .chart-dayfill { max-width: 44rem; }
@media (min-width: 56.25em) {
  .site-nav { gap: var(--space-6); }
  .site-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); }
}
.magnet { max-width: 46rem; }
.prose img:not(.article-card__thumb img) { border: 1px solid var(--line); border-radius: 2px; }

/* --- 29g2  sticky bar: one row, the consent line kept legible ----------- */


/* --- 29j  the proof card owns its own border; the section rule above it is
   redundant and reads as a stray hairline stack on a phone ---------------- */
.section:has(> .page-grid .proof) { border-top: 0; padding-top: var(--space-6); }

/* --- 29k  marketing pages are not reading pages (10-3c/3d) --------------
   The rail + 66ch column is the correct ARTICLE layout. On hubs, Start Here,
   the homepage and 404 it leaves a dead right gutter on wide screens, so
   those pages get a composed full-width treatment instead. Articles are
   untouched. */
@media (min-width: 56.25em) {
  /* the .wrap already supplies the gutter; constraining width here too
     double-counts it and pushes the document 16px wide */
  [data-layout="marketing"] main > .wrap > .section > .page-grid,
  [data-layout="marketing"] main > .wrap > .page-grid {
    display: block;
    width: 100%;
    max-width: none;
  }
  /* Fix 3c: no rail on marketing pages. Its metadata belongs to reading
     pages; here it only creates the dead gutter the brief calls the collapse. */
  /* the hero's media column is a rail by class only — it is content, keep it */
  [data-layout="marketing"] .page-grid > .rail:not(.rail--media) { display: none; }
  [data-layout="marketing"] main > .wrap > .home-hero > .page-grid--wide {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--space-10);
    align-items: center;
  }
  [data-layout="marketing"] .page-grid > .rail:empty { display: none; }
  [data-layout="marketing"] .page-grid > .content { max-width: none; }
  /* the hub chart teaser must not stretch across a 1400px screen */
  [data-layout="marketing"] figure.chart { max-width: 44rem; }
  [data-layout="marketing"] .hub-intro,
  [data-layout="marketing"] .content > .prose:first-of-type { max-width: 60rem; }
}

/* --- 29l  three-column magnet tables need a floor on very narrow phones -- */
@media (max-width: 22.5em) {
  .mtable { table-layout: fixed; width: 100%; }
  .mtable th, .mtable td { word-break: break-word; hyphens: auto; }
  .mtable th:first-child, .mtable td:first-child { width: 26%; }
}

/* --- 29m  active nav item (10-4) --------------------------------------- */
.site-nav .site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* --- 29n  homepage rhythm: alternating surfaces (10-3e) ----------------- */
.band--tint {
  background: var(--sage-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band--tint + .section { border-top: 0; }
@media (min-width: 56.25em) {
  [data-layout="marketing"] .section { padding-block: var(--space-16); }
}
/* the pull-quote reads as a full-width statement, not an inline aside */
[data-layout="marketing"] .pull-quote {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* the hero media column is content, not a reading rail — no divider rule */
.rail--media { border-left: 0; padding-left: 0; }

/* --- 30  prompt 12 layout completions ---------------------------------- */

/* 2a hero: image framed, gap per spec */
@media (min-width: 56.25em) {
  [data-layout="marketing"] main > .wrap > .home-hero > .page-grid--wide { gap: var(--space-12); }
}
.rail--media .figure__img,
.rail--media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* 2b the three ideas, three across */


/* 2b doors heading reads as a homepage section, not a blog tail */
#doors-h {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
}

/* 2b Dana block */
[data-layout="marketing"] .author-box { max-width: 48rem; margin-inline: auto; }

/* 2b pull-quote as a full band */
[data-layout="marketing"] .band--quote {
  background: var(--sage-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-16);
}
[data-layout="marketing"] .band--quote .pull-quote {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  border: 0;
  padding-inline: 0;
}

/* 2c hub hero strip */
[data-layout="marketing"] .content > .prose:first-of-type,
[data-layout="marketing"] .article-header { max-width: 60rem; }
[data-layout="marketing"] figure.chart { max-width: 44rem; margin-inline: auto; }

/* 3 header CTA becomes a real button at wide widths */
@media (min-width: 75em) {
  .site-nav__list { gap: var(--space-6); }
  .site-header__cta {
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    font-family: var(--font-data);
    font-size: var(--text-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .site-header__cta:hover { background: var(--ink); color: var(--paper); }
}

/* 3 charts never stretch */
.chart-bars, .chart-dayfill, .chart-gears { max-width: 44rem; }


/* --- 31  form reliability pass (13) ------------------------------------ */
/* the bar is separated by a hairline plus a second inset hairline, never a
   heavier rule and never a shadow */

/* ==========================================================================
   32  MAGNETS AS FUNNEL ASSETS  (prompt 14)
   Print-first: diagrams and the fridge card survive the printer; photographs,
   the avatar and the door do not, because ink and page space are real.
   ========================================================================== */

/* --- 32a  the photograph, screen only ---------------------------------- */
.magnet__photo { margin: 0 0 var(--space-8); }
.magnet__photo picture, .magnet__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* --- 32b  Dana's opening ------------------------------------------------ */
.magnet__opening { margin: 0 0 var(--space-8); }
.magnet__opening .prose p { margin: 0; font-size: var(--text-base); }
.magnet__opening-mark { display: none; }
.magnet__opening-mark img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
@media (min-width: 30em) {
  .magnet__opening {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  .magnet__opening-mark { display: block; }
}

/* --- 32c  the gap reveal ------------------------------------------------ */
.magnet__gap {
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
  margin: var(--space-10) 0 0;
}
.magnet__gap .label { display: block; margin-bottom: var(--space-3); }
.magnet__gap p { margin: 0; font-size: var(--text-base); line-height: var(--lh-body, 1.6); }

/* --- 32d  the dormant door --------------------------------------------- */
.door {
  max-width: 46rem;
  margin: var(--space-12) auto 0;
  padding: var(--space-6);
  background: var(--sage-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.door[hidden] { display: none; }
.door .label { display: block; margin-bottom: var(--space-3); }
.door p { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.55; }
.door p:last-of-type { margin-bottom: 0; color: var(--ink-muted); }

/* --- 32e  the fridge card ---------------------------------------------- */
.fridge-card__actions { margin: var(--space-12) 0 var(--space-4); text-align: center; }
.fridge-card {
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: var(--space-6);
  max-width: 34rem;
  margin: 0 auto;
  background: var(--paper);
}
.fridge-card > .label { display: block; margin-bottom: var(--space-4); }
.fridge-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.fridge-card__rows { display: block; }
.fridge-card__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--line);
  font-size: var(--text-base);      /* legible at arm's length */
  line-height: 1.5;
}
.fridge-card__k { color: var(--ink); }
.fridge-card__v {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.fridge-card__meter { margin: var(--space-5) 0 0; }
.fridge-card .domino { margin-top: var(--space-5); }
.fridge-card__mark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fridge-card__bowl {
  width: 18px; height: 11px;
  border-radius: 0 0 999px 999px;
  background: var(--ink);
  flex: 0 0 auto;
}

/* --- 32f  new diagram shapes ------------------------------------------- */
.timeline__list { list-style: none; margin: 0; padding: 0; }
.timeline__stop {
  display: grid;
  grid-template-columns: 12px minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.timeline__stop:last-child { border-bottom: 0; }
.timeline__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tan); border: 1px solid #B78F53;
  transform: translateY(-2px);
}
.timeline__when { font-family: var(--font-data); font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.timeline__what { font-size: var(--text-sm); }
@media (max-width: 30em) {
  .timeline__stop { grid-template-columns: 12px minmax(0, 1fr); }
  .timeline__what { grid-column: 2; }
}

.counter__row { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; }
.counter__cell {
  flex: 1 1 0;
  text-align: center;
  padding: var(--space-4) var(--space-2);
  border-left: 1px solid var(--line);
}
.counter__cell:first-child { border-left: 0; }
.counter__n {
  display: block;
  font-family: var(--font-data);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--ink);
}
.counter__w {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Five cells and five uppercase words need ~340px; below 24em the row is
   narrower than that, so tighten the cell padding and the tracking, and give
   the word a smaller size on the very narrowest screens. */
@media (max-width: 24em) {
  .counter__cell { min-width: 0; padding-left: var(--space-1); padding-right: var(--space-1); }
  .counter__w { letter-spacing: .02em; font-size: 11px; }
}
@media (max-width: 21.25em) {
  .counter__w { font-size: 10px; letter-spacing: .02em; }
}

.magnet .chart, .magnet figure.chart { max-width: 44rem; margin-inline: auto; }

/* --- 32g  print ---------------------------------------------------------
   Photographs, the avatar and the door are screen-only. Diagrams and the
   fridge card must survive, so they get explicit break protection. */
@media print {
  .magnet__photo,
  .magnet__opening-mark,
  .door,
  .fridge-card__actions { display: none !important; }

  .magnet__opening { display: block; }
  .magnet__gap { break-inside: avoid; page-break-inside: avoid; }
  .magnet .chart, .timeline, .counter, .compare-cards {
    break-inside: avoid;
    page-break-inside: avoid;
    max-width: none;
  }
  .mtable tr, .checklist li, .timeline__stop, .counter__cell {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .fridge-card {
    page-break-before: always;
    break-before: page;
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1.5pt solid #000;
    max-width: none;
  }
  .fridge-card__row { font-size: 11pt; }
  .counter__cell, .door, .band--tint { background: none !important; }

  /* "Print just this card" — one page, the card alone. */
  body.printing-card > *:not(main) { display: none !important; }
  body.printing-card main .magnet > *:not(.fridge-card) { display: none !important; }
  body.printing-card .fridge-card {
    page-break-before: avoid;
    break-before: auto;
    margin: 0;
  }
}

/* --- 32h  print compaction ---------------------------------------------
   The diagram and the fridge card each cost a page. Paper is the constraint
   these documents are designed around, so print gets tighter metrics than
   screen — without dropping below a legible size. */
@media print {
  .magnet { font-size: 9.5pt; line-height: 1.38; }
  .magnet__section { margin: 9pt 0; }
  .magnet__section > h2 { font-size: 12pt; margin-bottom: 6pt; padding-bottom: 3pt; }
  .magnet__title { font-size: 16pt; }
  .magnet__head { padding: 0 0 6pt; margin-bottom: 10pt; }
  .magnet__opening { margin-bottom: 10pt; }
  .magnet__opening .prose p { font-size: 9.5pt; }
  .magnet__gap { margin-top: 10pt; padding-top: 6pt; }
  .magnet__gap p { font-size: 9.5pt; }
  .mtable { font-size: 8.8pt; }
  .mtable th, .mtable td { padding: 2.4pt 6pt 2.4pt 0; }
  .checklist li { padding: 2.4pt 0; font-size: 8.8pt; }
  .magnet p, .magnet li { orphans: 2; widows: 2; }
  .magnet ol, .magnet ul { margin: 6pt 0; }

  /* diagrams stay visible but stop reserving a whole page */
  .magnet .chart { margin: 8pt auto; }
  .magnet .chart svg { max-height: 150pt; }
  .chart__title { font-size: 9pt; margin-bottom: 4pt; }
  .chart__note, .chart-bars__note { font-size: 8pt; }
  .timeline__stop { padding: 3pt 0; }
  .counter__cell { padding: 5pt 3pt; }
  .counter__n { font-size: 15pt; }
  .compare-cards { gap: 8pt; }
  .compare-cards li { font-size: 8.8pt; padding: 2.4pt 0; }

  .fridge-card { padding: 14pt; }
  .fridge-card__title { font-size: 15pt; margin-bottom: 8pt; padding-bottom: 6pt; }
  .fridge-card__row { padding: 4.5pt 0; font-size: 10.5pt; }
  .fridge-card .domino { margin-top: 8pt; padding-top: 6pt; font-size: 9pt; }
  .magnet__foot { margin-top: 10pt; padding-top: 5pt; }
}

@media print {
  /* the densest two carry a long table AND a chart; tighten those further */
  .magnet .chart svg { max-height: 118pt; }
  .magnet__section { margin: 7pt 0; }
  .mtable caption { padding-bottom: 3pt; font-size: 7.5pt; }
  .mtable { margin-bottom: 8pt; }
  .magnet__welcome { display: none !important; }
  .magnet__foot { font-size: 7.5pt; }
}

@media print {
  /* chart-gears is three stacked cards; on paper it only needs its header
     line and its sentence, and the day tables already carry the pip detail */
  .magnet .chart-gears__col { padding: 4pt 0; }
  .magnet .chart-gears__pips { display: none; }
  .magnet .chart-gears__what { font-size: 8.2pt; }
  .magnet .chart-dayfill svg { max-height: 96pt; }
}

@media print {
  /* Printers drop backgrounds by default, which erased the bowl mark. Force
     just this one shape, and give the card the page it is meant to own. */
  .fridge-card__bowl {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #000 !important;
  }
  .fridge-card { max-width: none; padding: 20pt; }
  .fridge-card__row { font-size: 11.5pt; padding: 6pt 0; }
  .fridge-card__title { font-size: 18pt; }
  .fridge-card__mark { font-size: 8.5pt; }
}

/* ---------------------------------------------------------------
   MAGNET COVER — the still life carries the left third, the title
   overlays the empty cream band on the right. CSS, not baked art,
   so it stays sharp at any print resolution and edits in one place.
   --------------------------------------------------------------- */
.magnet__cover { position: relative; margin-block: var(--space-6) var(--space-8); }
.magnet__cover img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; }

.magnet__cover-text {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 58%; display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-6) 0;
}
.magnet__cover-kicker { font-family: var(--font-data); font-size: var(--text-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.magnet__cover-title { font-family: var(--font-display); font-size: clamp(1.25rem, 3.4vw, 2.25rem);
  line-height: 1.05; color: var(--ink); margin: 0; }
.magnet__cover-rule { width: 3rem; height: 2px; background: var(--sage); }
.magnet__cover-mark { display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-2); }
.magnet__cover-mark img { width: 20px; height: 20px; border: 0; }

/* Under 34rem the overlay would crush the title — stack it below instead. */
@media (max-width: 34rem) {
  .magnet__cover-text { position: static; width: auto; padding: var(--space-4) 0 0; }
}

/* The cover is the one image that SHOULD print — it is the cover. */
@media print {
  .magnet__cover { break-inside: avoid; break-after: avoid; }
  .magnet__cover img { border-color: #000; }
}

/* ==========================================================================
   STICKY OPT-IN BAR — single authoritative definition.
   Previously defined in four places across the sheet, which is why the
   consent line clipped: two stacked paddings plus a fixed-position element
   measured against the layout viewport, which sits below the visible area
   while mobile browser chrome is showing. One block now owns it.
   ========================================================================== */
.optin-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--paper);
  border-top: 1px solid var(--line);
  /* dvh-aware bottom padding: clears the home indicator AND the browser bar */
  padding: var(--space-3) var(--space-4)
           max(var(--space-3), env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 180ms var(--ease), visibility 0s linear 180ms;
}
.optin-sticky[data-shown="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 180ms var(--ease), visibility 0s linear 0s;
}
.optin-sticky[hidden] { display: none; }

/* the inner wrapper carries NO padding of its own — that double padding was
   half the height problem */
.optin-sticky__inner { display: block; padding: 0; }

.optin-sticky__row {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
}
.optin-sticky__label {
  flex: 0 1 auto; margin: 0; min-width: 0;
  font-size: var(--text-xs); line-height: 1.3; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.optin-sticky__label strong { font-weight: 400; color: var(--ink); }
@media (max-width: 34.99em) { .optin-sticky__label { display: none; } }

.optin-sticky__form {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 1 1 auto; min-width: 0; margin: 0;
}
.optin-sticky .input {
  height: 40px; flex: 1 1 auto; min-width: 0;
  padding: var(--space-2) var(--space-3); margin: 0;
}
.optin-sticky .btn { flex: 0 0 auto; }

.optin-sticky__dismiss {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-muted); font-size: 1.25rem; line-height: 1;
}
.optin-sticky__dismiss:hover { color: var(--ink); }

/* Consent: full width beneath the row, never clipped, never truncated. */
.optin-sticky__consent {
  display: block;
  margin: var(--space-2) 0 0;
  max-width: none;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--ink-muted);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.optin-sticky .form-msg { margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.optin-sticky .form-msg:empty { display: none; }

@media (min-width: 56.25em) { .optin-sticky { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .optin-sticky { transition: none !important; } }
@media print { .optin-sticky { display: none !important; } }

/* ==========================================================================
   THE METHOD — three ideas as genuinely parallel cards.
   Previously these sat inside the article reading column, so on desktop the
   three-column grid squeezed each idea into ~200px, and their visual weights
   were wildly unequal: a full compare-cards block, a one-line meter, three
   badges. Same shape, same weight, same footprint now.
   ========================================================================== */
.method { max-width: 72rem; margin-inline: auto; }

.method__head { max-width: 42rem; margin-bottom: var(--space-10); }
.method__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: var(--space-3) 0 var(--space-4);
}
.method__dek { color: var(--ink-muted); font-size: var(--text-lg); margin: 0; }

.method__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 48em)   { .method__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em)   { .method__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }

.method-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.method-card__num {
  font-family: var(--font-data);
  font-size: var(--text-sm);
  letter-spacing: .14em;
  color: #6B6C4F; /* 5.32:1 on paper for WCAG AA text; --sage is 3.69:1 */
}
.method-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}
.method-card__body { margin: 0; font-size: var(--text-base); line-height: var(--lh-body); }

/* the proof block is the same height in all three cards, which is what makes
   the row read as parallel rather than ragged */
.method-card__proof {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 5.5rem;
  justify-content: center;
}
.method-card__proof--gears { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.method-card__link {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  align-self: flex-start;
}
.method-card__link:hover { border-bottom-color: var(--sage); }

/* the gap, drawn: same footprint as a bite meter, not a whole compare-cards */
.gapbar { display: grid; grid-template-columns: 1fr; gap: 4px; }
.gapbar__label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: .04em;
}
.gapbar__track {
  display: block; height: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 1px;
  overflow: hidden;
}
.gapbar__fill { display: block; height: 100%; background: var(--tan); }
.gapbar--short .gapbar__fill { background: var(--sage); }
.gapbar__value { font-size: var(--text-xs); color: var(--ink-muted); }