/* TAF 2026 — "Warm Oven" design system: tokens + components.
   Full file header, design notes and per-rule rationale: docs/design/css-rationale/main.css.md */

/* @font-face — rationale: docs/design/css-rationale/main.css.md#font-face */
/* @font-face — rationale: docs/design/css-rationale/main.css.md#font-face-2 */

/* @font-face — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#font-face-3 */
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 400;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 110.42%;
  ascent-override: 95.09%;    /* 105%  / 1.1042 */
  descent-override: 31.70%;   /* 35%   / 1.1042 */
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 500;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 111.65%;
  ascent-override: 94.04%;    /* 105%  / 1.1165 */
  descent-override: 31.35%;   /* 35%   / 1.1165 */
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 600;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 112.58%;
  ascent-override: 93.27%;    /* 105%  / 1.1258 */
  descent-override: 31.09%;   /* 35%   / 1.1258 */
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 700;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 113.66%;
  ascent-override: 92.38%;    /* 105%  / 1.1366 */
  descent-override: 30.79%;   /* 35%   / 1.1366 */
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 800;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 114.58%;
  ascent-override: 91.64%;    /* 105%  / 1.1458 */
  descent-override: 30.55%;   /* 35%   / 1.1458 */
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 104.6%;
  ascent-override: 96.08%;    /* 100.5% / 1.046 */
  descent-override: 23.90%;   /* 25%  / 1.046 */
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('../fonts/mulish-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
/* == GENERATED: tokens — do not edit by hand. Source: design/tokens.json (scripts/build-tokens.py) == */
:root {
  /* Palette — every neutral mixed from the brand pink */
  --milk:         #FEFBFA;
  --cream:        #FAEDF2;
  --paper:        #FFFFFF;
  --chocolate:    #33202B;
  --cocoa:        #6E5964;
  --rose:         #E11584;
  --rose-deep:    #B80E67;
  --rose-link:    #D01277;
  --rose-tint:    #FCE7F3;
  --saffron:      #E29B32;
  --saffron-deep: #B87716;
  --pistachio:    #6E7C4D;
  --line:         #F0DEE6;

  /* Semantic aliases */
  --bg-page:      var(--milk);
  --bg-surface:   var(--paper);
  --bg-tinted:    var(--cream);
  --bg-selected:  var(--rose-tint);
  --text-body:    var(--chocolate);
  --text-muted:   var(--cocoa);
  --text-link:    var(--rose-link);
  --accent:       var(--rose);
  --accent-hover: var(--rose-deep);
  --border-hairline: var(--line);

  /* Component fills */
  --tag-veg-bg:    #EEF2E3;
  --tag-season-bg: #FCF0DC;
  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root */
  --tag-veg-ink:   #657246;
  --tag-season-ink: #96600F;
  /* Footer ground is LIGHT (deeper cream), not chocolate. Chocolate/cocoa ink on
     it clears AA (12.4:1 / 5.1:1) — keep new footer ink in that family.
     Rationale: inc/footer.php. */
  --footer-bg:     #F2E0E9;
  --footer-text:   var(--chocolate);
  --footer-label:  var(--cocoa);
  --footer-legal:  var(--cocoa);
  --footer-rule:   rgba(51, 32, 43, .12);

  /* Type — the two self-hosted faces above. --display = Poppins (headings,
     eyebrows, buttons, nav, labels, numerals, chips); --sans = Mulish (body). */
  --display: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sans: 'Mulish', 'Mulish Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ui: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-hero: 34px;
  --fs-h1: 30px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-meta: 13px;
  --fs-eyebrow: 12px;

  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root-2 */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root-3 */
  --color-on-accent: #fff;  /* 27x — text on --rose/--accent: buttons, submits, chips, badges, the #1 rank pill */
  --color-on-dark:   #fff;  /* 3x — text on --chocolate: the jump pill on hover, the search-row CTA */
  --color-on-scrim:  #fff;  /* 8x — text over a photo scrim: hero/mosaic/featband captions. Stays white regardless of brand. */

  --lh-body: 1.65;
  /* :root — rationale: docs/design/css-rationale/main.css.md#root-4 */
  --lh-display: 1.15;
  --ls-display: -0.01em;
  --ls-eyebrow: 0.14em;

  /* Layout */
  --maxw: 728px;
  --maxw-wide: 1200px;
  --pad: 20px;
  --hdr-h: 60px;

  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root-5 */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: var(--radius-sm); /* retired: controls are soft 6px, not pills */
  --radius-round: 50%;

  --shadow: 0 1px 2px rgba(51,32,43,.06), 0 6px 24px -8px rgba(51,32,43,.12);
  --shadow-hover: 0 2px 4px rgba(51,32,43,.08), 0 10px 28px -8px rgba(51,32,43,.18);
  --speed: .15s;

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-6 */
  --ink-rgb: 51, 32, 43;
  --scrim-mosaic:   linear-gradient(transparent 38%, rgba(var(--ink-rgb), .82)); /* Trending (handoff spec) */
  --scrim-seahero:  linear-gradient(transparent 45%, rgba(var(--ink-rgb), .8));  /* parity — do not retune */
  --scrim-featband: linear-gradient(transparent 30%, rgba(var(--ink-rgb), .78)); /* parity — do not retune */
  --scrim-menutile: linear-gradient(transparent 35%, rgba(var(--ink-rgb), .78)); /* Mobile-menu browse tiles (handoff spec) */

  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root-7 */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-64: 64px;
  --space-90: 90px;

  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root-8 */
  --fs-10: 10px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-16-5: 16.5px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-42: 42px;
  --fs-54: 54px;

  /* Line-height scale (T4), value-named at current values. */
  --lh-108: 1.08;
  --lh-11: 1.1;
  --lh-112: 1.12;
  --lh-115: 1.15;
  --lh-12: 1.2;
  --lh-125: 1.25;
  --lh-13: 1.3;
  --lh-135: 1.35;
  --lh-14: 1.4;
  --lh-145: 1.45;
  --lh-15: 1.5;
  --lh-155: 1.55;
  --lh-16: 1.6;
  --lh-165: 1.65;

  /* Border widths (T4). */
  --bw-1: 1px;
  --bw-15: 1.5px;
  --bw-4: 4px;

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-9 */
  --z-0: 0;
  --z-1: 1;
  --z-2: 2;
  --z-49: 49;
  --z-50: 50;
  --z-55: 55;
  --z-60: 60;
  --z-98: 98;
  --z-99: 99;

  /* Opacity (T4). */
  --o-6: .6;
  --o-7: .7;
  --o-75: .75;
  --o-8: .8;
  --o-85: .85;
  --o-9: .9;

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-10 */
  /* :root — rationale: docs/design/css-rationale/main.css.md#root-11 */
  --dur-05: .05s;
  --dur-12: .12s;
  --dur-15: .15s;
  --dur-18: .18s;
  --dur-2: .2s;
  --dur-24: .24s;
  --dur-28: .28s;
  --dur-3: .3s;
  --dur-35: .35s;
  /* .5s: the Kit success checkmark stroke-draw (delight B, 2026-07-17). */
  --dur-5: .5s;
  --ease: ease;
  --ease-out: cubic-bezier(.22, .9, .3, 1);

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-12 */
  --ls--001em: -0.01em;
  --ls-04em: 0.04em;
  --ls-08em: 0.08em;
  --ls-1em: 0.1em;
  --ls-14em: 0.14em;
  --ls-1px: 1px;

  /* Aspect ratios (T4). Notation was inconsistent (4/5 vs '4 / 5' vs 4 / 4.4).
     These are content shapes, not a scale — T6 should NOT collapse them. */
  --ar-1-1: 1 / 1;
  --ar-3-2: 3 / 2;
  --ar-4-3: 4 / 3;
  --ar-4-5: 4 / 5;
  --ar-5-4: 5 / 4;
  --ar-6-5: 6 / 5;
  --ar-16-9: 16 / 9;
  --ar-16-10: 16 / 10;
  --ar-4-34: 4 / 3.4;
  --ar-4-44: 4 / 4.4;
  --ar-24-11: 24 / 11;

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-13 */
  --radius-full: 999px;
  --radius-99: 99px;

  /* Motion easing (T4). 72 uses, exactly ONE value. */

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-14 */
  --z-dropdown: 1001;

  /* Elevation one-offs (T4). */
  --shadow-pill: 0 8px 24px -6px rgba(51, 32, 43, .45);
  --shadow-mm-cta: 0 -12px 24px -18px rgba(var(--ink-rgb), .35); /* mobile-menu pinned CTA: the comp's upward lift */

  /* Opacity, remaining (T4). */
  --o-1: 1;
  --o-7: 0.7;
  --o-8: 0.8;

  /* Line-height, remaining (T4). */
  --lh-1: 1;

  /* Aspect ratios (T4). Notation was inconsistent — 4/5, '4 / 5' and 4 / 4.4 all
     appeared. These are CONTENT SHAPES, not a scale: T6 must not collapse them. */
  --ar-1-1: 1 / 1;
  --ar-4-3: 4 / 3;
  --ar-4-5: 4 / 5;
  --ar-5-4: 5 / 4;
  --ar-6-5: 6 / 5;
  --ar-16-9: 16 / 9;
  --ar-16-10: 16 / 10;
  --ar-4-34: 4 / 3.4;
  --ar-4-44: 4 / 4.4;
  --ar-24-11: 24 / 11;

  /* Focus ring (T4). Every remaining border-width literal was `outline: 3px` —
     the a11y focus ring. It is one decision, in one place, now. */
  --focus-ring: 3px;
  /* :root — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#root-15 */
  --focus-ring-color: var(--saffron-deep);

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-16 */
  --star-meta: 13px;
  --star-display: 17px;
  --star-interactive: 20px;
  --star-band: 26px;
  --star-modal: 28px;

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-17 */
  --ad-ph-a: #F7ECF1;
  --ad-ph-b: #F3E5EC;
  --ad-ph-line: #DFC3D2;
  --ad-ph-text: #7D5E6E; /* 4.93:1 on --ad-ph-a, 4.66:1 on --ad-ph-b (was #9A7A8B: 3.29/3.12 — AA fail at 12px) */

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-18 */
  --milk-rgb: 254, 251, 250;
  --veil-82: rgba(254, 251, 250, .82);
  --veil-80: rgba(254, 251, 250, 0.8);
  --veil-55: rgba(254, 251, 250, 0.55);
  --veil-0: rgba(254, 251, 250, 0);
  --scrim-search: rgba(43, 25, 37, .74);
  --scrim-dropdown: rgba(51, 32, 43, .18);
  --chocolate-hover: #462D3B;
  /* :root — rationale: docs/design/css-rationale/main.css.md#root-19 */
  --saffron-glow: rgba(226, 155, 50, .5);
  --saffron-glow-0: rgba(226, 155, 50, 0);

  /* Final T4 tail. */
  --lh-1: 1;
  --ar-1: 1;
  --shadow-underline: inset 0 -2px;

  /* :root — rationale: docs/design/css-rationale/main.css.md#root-20 */
  --cta-ink: #F3E4EC;

  /* WPRM ingredient-fade gradient (T4). Eased stops, hand-authored. */
  --fade-0: rgba(255, 255, 255, 0);
  --fade-08: rgba(255, 255, 255, 0.08);
  --fade-30: rgba(255, 255, 255, 0.3);
  --fade-72: rgba(255, 255, 255, 0.72);
}
/* == END GENERATED == */

/* ---- Base typography (child sheet loads after Kadence, so it wins ties) ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
}
img { max-width: 100%; height: auto; }
a { color: var(--text-link); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, .taf-display {
  font-family: var(--display);
  font-weight: var(--w-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* h4 — rationale: docs/design/css-rationale/main.css.md#h4 */
h4 { font-size: var(--fs-h4); }
.taf-hero-title { font-size: var(--fs-hero); }

/* h1, .taf-rhero__title, .taf-cat-title — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#h1-taf-rhero-title-taf-cat-title */

h1,
.taf-rhero__title,
.taf-cat-title { font-weight: var(--w-black); }
h2,
.taf-catband__title,
.taf-secthead h2,
.taf-section-head h2 { font-weight: var(--w-semibold); }

.taf-eyebrow {
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-link);
}
.taf-muted { color: var(--text-muted); }
.taf-small { font-size: var(--fs-small); }
.taf-meta { font-size: var(--fs-meta); color: var(--text-muted); }

[hidden] { display: none !important; }

/* Icons are inline SVG in markup (no icon font). Size to the cap height. */
.taf-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: none;
}
.taf-icon--lg { width: 1.25em; height: 1.25em; }

/* .taf-btn — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-btn */

/* ---- Buttons ---- */
.taf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: var(--display); font-size: var(--fs-16); font-weight: var(--w-semibold);
  min-height: 48px; padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-pill); border: none; cursor: pointer;
  text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.taf-btn--primary { background: var(--accent); color: var(--color-on-accent); }
.taf-btn--primary:hover { background: var(--accent-hover); color: var(--color-on-accent); }
.taf-btn--secondary { background: transparent; color: var(--text-body); border: var(--bw-15) solid var(--chocolate); }
.taf-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
.taf-btn--ghost { background: transparent; color: var(--accent); min-height: 44px; padding: var(--space-8) var(--space-12); }
.taf-btn--sm { min-height: 40px; padding: var(--space-8) var(--space-16); font-size: var(--fs-15); }
.taf-btn--block { width: 100%; }

/* Chips (category pills) */
.taf-chip {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex; align-items: center; gap: var(--space-6);
  min-height: 44px; padding: var(--space-8) var(--space-16); /* 44px tap target */
  border-radius: var(--radius-pill); border: var(--bw-15) solid var(--border-hairline);
  background: var(--bg-surface); color: var(--text-body);
  font-family: var(--display); font-size: var(--fs-15); font-weight: var(--w-semibold); text-decoration: none; white-space: nowrap;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.taf-chip:hover { border-color: var(--accent); color: var(--accent); }
.taf-chip.is-active { background: var(--chocolate); border-color: var(--chocolate); color: var(--milk); }

/* .wp-block-button.taf-btn, .wp-block-button.taf-chip — rationale: docs/design/css-rationale/main.css.md#wp-block-button-taf-btn-wp-block-button-taf-chip */
.wp-block-button.taf-btn, .wp-block-button.taf-chip { background: transparent; border: none; padding: 0; min-height: 0; }
.wp-block-button.taf-btn .wp-block-button__link,
.wp-block-button.taf-chip .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  font-family: var(--display); font-weight: var(--w-semibold); text-decoration: none;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.wp-block-button.taf-btn .wp-block-button__link { font-size: var(--fs-16); min-height: 48px; padding: var(--space-12) var(--space-20); border: none; }
.wp-block-button.taf-btn--primary .wp-block-button__link { background: var(--accent); color: var(--color-on-accent); }
.wp-block-button.taf-btn--primary .wp-block-button__link:hover { background: var(--accent-hover); color: var(--color-on-accent); }
.wp-block-button.taf-btn--secondary .wp-block-button__link { background: transparent; color: var(--text-body); border: var(--bw-15) solid var(--chocolate); }
.wp-block-button.taf-btn--secondary .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); }
.wp-block-button.taf-chip .wp-block-button__link {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  font-size: var(--fs-15); font-weight: var(--w-semibold); min-height: 44px; padding: var(--space-8) var(--space-16); white-space: nowrap; /* 44px tap target */
  background: var(--bg-surface); color: var(--text-body); border: var(--bw-15) solid var(--border-hairline);
}
.wp-block-button.taf-chip .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); }
.taf-search .wp-block-search__input {
  font-size: var(--fs-16); min-height: 48px; padding: var(--space-8) var(--space-12);
  background: var(--bg-surface); color: var(--text-body);
  border: var(--bw-15) solid var(--border-hairline); border-radius: var(--radius-sm);
}
/* .taf-search .wp-block-search__input:focus-visible — rationale: docs/design/css-rationale/main.css.md#taf-search-wp-block-search-input-focus-visible */
.taf-search .wp-block-search__input:focus-visible { outline: var(--focus-ring) solid var(--rose); outline-offset: 1px; }
.taf-search .wp-block-search__button {
  font-size: var(--fs-16); font-weight: var(--w-bold); min-height: 48px; padding: var(--space-12) var(--space-20);
  background: var(--accent); color: var(--color-on-accent); border: none; border-radius: var(--radius-pill); cursor: pointer;
}
.taf-search .wp-block-search__button:hover { background: var(--accent-hover); }

/* Tags on tiles */
.taf-tag {
  display: inline-block; padding: var(--space-2) var(--space-8); border-radius: var(--radius-pill);
  font-family: var(--display); font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-04em);
  background: var(--bg-selected); color: var(--rose-deep);
}
.taf-tag--veg { background: var(--tag-veg-bg); color: var(--pistachio); }
.taf-tag--season { background: var(--tag-season-bg); color: var(--saffron-deep); }

/* .taf-stars — rationale: docs/design/css-rationale/main.css.md#taf-stars */
.taf-stars { color: var(--saffron); font-size: var(--star-meta); letter-spacing: var(--ls-1px); white-space: nowrap; }
.taf-stars .n { color: var(--text-muted); font-family: var(--sans); margin-left: var(--space-4); letter-spacing: 0; }

/* ---- Recipe tile (grid card) ---- */
.taf-tile { text-decoration: none; color: inherit; display: block; }
.taf-tile .ph {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: var(--ar-4-5);
  background: var(--bg-tinted); position: relative;
  box-shadow: none;
  transition: box-shadow var(--speed) var(--ease);
}
.taf-tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.taf-tile .ph .taf-tag { position: absolute; top: 10px; left: 10px; z-index: var(--z-1); }
.taf-tile:hover .ph,
.taf-tile:focus-visible .ph { box-shadow: var(--shadow-hover); }
.taf-tile h3, .taf-tile .t {
  font-family: var(--display); font-weight: var(--w-regular); font-size: var(--fs-17);
  /* 1.15: every tile-title markup variant equalized to the majority display leading
     (was 1.3 here while .taf-tilecard__title/.taf-mosaic__title sat at 1.15). */
  line-height: var(--lh-115); letter-spacing: var(--ls-display); margin-top: var(--space-8);
}
.taf-tile:hover h3, .taf-tile:hover .t,
.taf-tile:focus-visible h3, .taf-tile:focus-visible .t {
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Grids ---- */
.taf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.taf-grid-3, .taf-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }

/* ---- Layout scaffolding ---- */
.taf-container { max-width: var(--maxw-wide); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.taf-content { max-width: var(--maxw); margin: 0 auto; }
.taf-section { padding: var(--space-24) var(--pad); max-width: var(--maxw); margin: 0 auto; }
.taf-section--wide { max-width: var(--maxw-wide); }
.taf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); }
.taf-section-head .more { font-size: var(--fs-15); font-weight: var(--w-bold); white-space: nowrap; }

/* body.taf-has-sticky-ad — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#body-taf-has-sticky-ad */
body.taf-has-sticky-ad { padding-bottom: calc(var(--space-64) + env(safe-area-inset-bottom, 0px)); }

/* #recipe, .wprm-recipe-container — rationale: docs/design/css-rationale/main.css.md#recipe-wprm-recipe-container */
#recipe,
.wprm-recipe-container { scroll-margin-top: calc(var(--space-64) + var(--space-48)); }
/* .entry-content :is(h1, h2, h3, h4, h5, h6)[id] — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-is-h1-h2-h3-h4-h5-h6-id */
.entry-content :is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: calc(var(--space-64) + var(--space-16)); }


/* ---- Header ---- */
.taf-header {
  background: var(--bg-page);
  border-bottom: var(--bw-1) solid var(--border-hairline);
  padding: 0 var(--pad);
  height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  position: sticky; top: 0; z-index: var(--z-50);
}
.taf-header .taf-brand {
  font-family: var(--display); font-size: var(--fs-20); color: var(--text-body);
  text-decoration: none; letter-spacing: var(--ls-display);
}
.taf-header .taf-brand .amp { color: var(--accent); }
.taf-logo { height: 34px; width: auto; display: block; }
.taf-header-actions { display: flex; gap: var(--space-8); align-items: center; }

.taf-icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius-round);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-body);
  cursor: pointer; font-size: var(--fs-20);
  transition: background var(--speed) var(--ease);
}
.taf-icon-btn:hover { background: var(--bg-tinted); }

/* Desktop nav (hidden on mobile) */
.taf-nav { display: none; }
.taf-nav a {
  text-decoration: none; font-weight: var(--w-bold); font-size: var(--fs-15);
  color: var(--text-body); transition: color var(--speed) var(--ease);
}
.taf-nav a:hover { color: var(--accent); }
.taf-nav a.is-seasonal { color: var(--accent); }

/* ---- Mobile menu drawer (menu.js contract: [data-taf-menu] + .is-open,
   toggle = [data-taf-menu-toggle], body gets .taf-menu-open) ---- */
[data-taf-menu] {
  display: none;
  position: fixed;
  top: var(--hdr-h); left: 0; right: 0; bottom: 0;
  z-index: var(--z-49);
  background: var(--bg-page);
  border-top: var(--bw-1) solid var(--border-hairline);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
[data-taf-menu].is-open { display: block; }
body.taf-menu-open { overflow: hidden; }

.taf-menu-search { padding: var(--space-16) var(--pad) var(--space-4); }
.taf-menu-list { padding: var(--space-8) var(--space-8) var(--space-8); }
.taf-menu-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-12) var(--space-12); text-decoration: none;
  color: var(--text-body); font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-17);
  border-bottom: var(--bw-1) solid var(--border-hairline);
}
.taf-menu-list a:last-child { border-bottom: none; }
.taf-menu-list a.is-seasonal { color: var(--accent); }
.taf-menu-list .taf-icon { color: var(--text-muted); }
.taf-menu-cta { padding: var(--space-12) var(--pad) var(--space-20); }

/* ---- Search field ---- */
.taf-search {
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--bg-surface); border: var(--bw-15) solid var(--border-hairline);
  border-radius: var(--radius-pill); padding: 0 var(--space-8) 0 var(--space-16); height: 52px;
  box-shadow: var(--shadow);
}
.taf-search--flat { box-shadow: none; }
.taf-search input {
  /* token-frozen: iOS Safari zooms an input whose font-size is under 16px
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: var(--fs-16); /* 16px stops iOS zoom */
  color: var(--text-body); min-width: 0;
}
.taf-search input::placeholder { color: var(--text-muted); }
.taf-search .go {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  height: 44px; padding: 0 var(--space-18); border-radius: var(--radius-pill); border: none; /* 44px tap target */
  background: var(--accent); color: var(--color-on-accent); font-weight: var(--w-bold); font-size: var(--fs-15); cursor: pointer;
}
.taf-search .go:hover { background: var(--accent-hover); }

/* ---- Breadcrumbs (Yoast output, wrapped by inc/breadcrumbs.php) ---- */
.taf-breadcrumbs { font-size: var(--fs-meta); color: var(--text-muted); }
.taf-breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.taf-breadcrumbs a:hover { color: var(--accent); }
.taf-breadcrumbs .sep { margin: 0 var(--space-4); color: var(--border-hairline); }

/* ---- Sticky jump pill (mobile thumb zone; menu.js: .taf-jump-pill) ---- */
.taf-jump-pill {
  position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-60);
  background: var(--chocolate); color: var(--milk);
  border-radius: var(--radius-pill); padding: var(--space-12) var(--space-20);
  font-weight: var(--w-bold); font-size: var(--fs-15); text-decoration: none;
  box-shadow: var(--shadow-pill);
  display: inline-flex; gap: var(--space-8); align-items: center;
}
.taf-jump-pill:hover { color: var(--color-on-dark); }

/* ---- Callouts (hairline border, no left stripe) ---- */
.taf-callout {
  background: var(--bg-tinted);
  border: var(--bw-1) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--space-16) var(--space-20); margin: var(--space-20) 0;
}
.taf-callout .taf-eyebrow { color: var(--saffron-deep); }
.taf-callout p { margin-top: var(--space-4); font-size: var(--fs-16); }
.taf-callout--why .taf-eyebrow { color: var(--rose-deep); }
/* The "why" callout keeps the signature rose left-accent bar instead of a full
   box outline (cream bg + 8px radius from .taf-callout stay). */
.taf-callout--why { border: none; border-left: var(--bw-4) solid var(--rose); }

/* ---- Email lead magnet (Kit) ---- */
.taf-magnet {
  background: var(--rose-tint); /* rose-tint ground, matching the home magnet */
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-20) var(--space-24);
  position: relative;
  margin: var(--space-24) 0 var(--space-8);
  text-align: center;
}
.taf-magnet .taf-eyebrow { color: var(--rose-deep); }
.taf-magnet h3 { font-size: var(--fs-24); margin: var(--space-8) 0 var(--space-4); font-weight: var(--w-semibold); }
.taf-magnet p { font-size: var(--fs-15); color: var(--text-muted); max-width: 42ch; margin: 0 auto; }
.taf-magnet form { display: flex; gap: var(--space-8); margin-top: var(--space-16); }
.taf-magnet input[type="email"] {
  /* token-frozen: iOS Safari zooms an input whose font-size is under 16px
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  flex: 1; height: 48px; border-radius: var(--radius-pill);
  border: var(--bw-15) solid var(--border-hairline);
  background: var(--bg-surface); padding: 0 var(--space-18);
  font-size: var(--fs-16); /* 16px stops iOS zoom */
  min-width: 0;
}
.taf-magnet .fine { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--space-8); }
/* @media (max-width: 699px) — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#media-max-width-699px */
@media (max-width: 699px) {
  .taf-magnet .formkit-fields { flex-direction: column !important; }
  .taf-magnet .formkit-field { flex: 1 1 100% !important; width: 100% !important; }
  .taf-magnet .formkit-input { width: 100% !important; }
}

/* ---- Author bio ---- */
.taf-bio {
  display: flex; gap: var(--space-16); align-items: flex-start;
  background: var(--bg-surface); border: var(--bw-1) solid var(--border-hairline);
  border-radius: var(--radius); padding: var(--space-16); margin: var(--space-24) 0;
}
.taf-bio img { width: 64px; height: 64px; border-radius: var(--radius-round); object-fit: cover; flex-shrink: 0; }
.taf-bio h4 { font-family: var(--display); font-size: var(--fs-17); font-weight: var(--w-regular); }
.taf-bio p { font-size: var(--fs-15); color: var(--text-muted); margin-top: var(--space-4); line-height: var(--lh-15); }
.taf-bio a { font-size: var(--fs-15); font-weight: var(--w-bold); }

/* ---- FAQ (details/summary) ---- */
.taf-faq details { border-bottom: var(--bw-1) solid var(--border-hairline); }
.taf-faq summary {
  padding: var(--space-12) 0; cursor: pointer;
  font-weight: var(--w-bold); font-size: var(--fs-16); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-12);
}
.taf-faq summary::-webkit-details-marker { display: none; }
.taf-faq summary .taf-icon { color: var(--text-muted); transition: transform var(--speed) var(--ease); }
.taf-faq details[open] summary .taf-icon { transform: rotate(180deg); }
.taf-faq details > div { padding: 0 0 var(--space-16); font-size: var(--fs-16); color: var(--text-body); }

/* ---- Footer (light ground, chocolate text, 4-col grid: brand blurb +
   Recipes / Seasonal / About). ---- */
.taf-footer {
  /* .taf-footer — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-footer */
  background: var(--footer-bg); color: var(--footer-text);
  padding: var(--space-44) var(--pad) var(--space-90); /* bottom clears the sticky ad */
  margin-top: var(--space-40);
}
.taf-footer__inner { max-width: var(--maxw-wide); margin: 0 auto; }
.taf-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
.taf-footer .taf-brand { font-family: var(--display); font-size: var(--fs-20); color: var(--footer-text); margin: 0; }
.taf-footer .taf-blurb { font-size: var(--fs-15); color: var(--footer-label); margin: var(--space-8) 0 0; max-width: 30ch; }
.taf-footer__logo { display: block; width: auto; height: auto; max-width: 190px; margin: 0 0 var(--space-12); }
/* Column headings are <h2> (heading order) styled as small uppercase labels. */
.taf-footer h2 {
  font-family: var(--display); font-size: var(--fs-12); font-weight: var(--w-bold);
  letter-spacing: var(--ls-14em); text-transform: uppercase;
  color: var(--footer-label); margin: 0 0 var(--space-12);
}
.taf-footer a { color: var(--footer-text); text-decoration: none; }
.taf-footer a:hover { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.taf-footer__col a { display: block; padding: var(--space-4) 0; font-size: var(--fs-15); } /* .taf-footer .legal — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-footer-legal */
.taf-footer .legal { margin-top: var(--space-32); padding-top: var(--space-20); border-top: var(--bw-1) solid var(--footer-rule); font-size: var(--fs-12); color: var(--footer-legal); }
@media (min-width: 900px) {
  /* logo far left, the 3 nav columns clustered on the right (per reference) */
  .taf-footer__grid { grid-template-columns: 1fr auto auto auto; column-gap: var(--space-48); row-gap: var(--space-24); align-items: start; }
}

/* ---- Utilities ---- */
.taf-hr { border: none; border-top: var(--bw-1) solid var(--border-hairline); margin: var(--space-24) 0; }
.taf-center { text-align: center; }

/* Focus visibility: 3px deep-saffron ring everywhere (--focus-ring-color, WCAG 1.4.11) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: var(--focus-ring) solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Desktop (900px) ---- */
@media (min-width: 900px) {
  /* == GENERATED: tokens — do not edit by hand. Source: design/tokens.json (scripts/build-tokens.py) == */
  :root {
    --fs-hero: 52px;
    --fs-h1: 42px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --pad: 32px;
    --hdr-h: 72px; /* 72px desktop header */
  }
  /* == END GENERATED == */
  .taf-section { padding: var(--space-40) var(--pad); }
  /* .taf-section--wide:not(.taf-section--flush) + .taf-section… — rationale: docs/design/css-rationale/main.css.md#taf-section-wide-not-taf-section-flush-taf-section-wide-not- */
  .taf-section--wide:not(.taf-section--flush) + .taf-section--wide:not(.taf-section--flush) { padding-top: 0; }
  .taf-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
  .taf-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
  .taf-logo { height: 42px; }
  .taf-nav { display: flex; gap: var(--space-24); align-items: center; }
  [data-taf-menu-toggle] { display: none; }
}

/* ======================
   Recipe post template. Markup: inc/recipe-post.php.
   ====================== */

/* ---- Meta row (directly after the H1) ----
   The H1→rating-row gap is carried by .entry-header's margin-bottom in the
   scaffold block below, not here. */
.taf-post-meta { margin: 0 0 var(--space-16); }
/* (.taf-post-meta__rating row retired 2026-08-01 — the rating now lives
   inside the byline line; actions in .taf-post-meta__actions-row.) */
.taf-post-meta__stars { display: inline-flex; align-items: center; gap: var(--space-4); }
.taf-post-meta__stars .taf-stars { font-size: var(--fs-15); }
/* .taf-post-meta__stars .wprm-recipe-rating — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-stars-wprm-recipe-rating */
.taf-post-meta__stars .wprm-recipe-rating { display: inline-flex; align-items: center; font-size: var(--fs-15); }
/* (.taf-post-meta__facts retired — Option A, no
   time/servings up top; the card's facts strip owns them.) */
/* .taf-post-meta__byline — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-byline */
.taf-post-meta__byline { display: flex; align-items: center; gap: var(--space-10, 10px); margin: 0; }
.taf-post-meta__who { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* .taf-post-meta__name — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-name */
.taf-post-meta__name { font-size: var(--fs-15); line-height: var(--lh-15, 1.5); }
.taf-post-meta__date { font-size: var(--fs-15); line-height: var(--lh-14, 1.4); }
.taf-post-meta__actions { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.taf-post-meta__rating { display: flex; align-items: center; margin-top: var(--space-8); }
/* .taf-post-meta__jump — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-jump */
.taf-post-meta__jump { display: inline-flex; }
@media (max-width: 899.98px) {
  .taf-post-meta__byline { flex-wrap: wrap; }
  .taf-post-meta__actions {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-10, 10px);
  }
  /* .taf-post-meta__actions — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-actions */
  .taf-post-meta__actions { align-items: stretch; }
  .taf-post-meta__actions .taf-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--space-44);
    /* .taf-post-meta__actions .taf-btn — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-post-meta-actions-taf-btn */
    white-space: nowrap;
    padding-left: var(--space-10, 10px);
    padding-right: var(--space-10, 10px);
  }
}
/* .taf-post-meta__byline .taf-post-meta__avatar — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-byline-taf-post-meta-avatar */
.taf-post-meta__byline .taf-post-meta__avatar {
  width: 40px; height: 40px; border-radius: var(--radius-round);
  object-fit: cover; flex-shrink: 0;
}
.taf-post-meta__byline p { margin: 0; }
.taf-post-meta__byline a { font-weight: var(--w-bold); }
/* .taf-post-meta__actions .taf-btn--secondary.taf-btn--sm — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-post-meta-actions-taf-btn-secondary-taf-btn-sm */
.taf-post-meta__actions .taf-btn--secondary.taf-btn--sm {
  padding-top: calc(var(--space-8) - var(--bw-15));
  padding-bottom: calc(var(--space-8) - var(--bw-15));
}

/* .taf-single-sidebar — rationale: docs/design/css-rationale/main.css.md#taf-single-sidebar */
.taf-single-sidebar {
  display: none;
  flex-direction: column;
  gap: 36px; /* token-exempt: handoff rail rhythm — 36px widget gap sits between the 32/40 spacing steps */
}

/* Card shells: cream (bio, Kit magnet) and ruled paper (popular, seasonal). */
.taf-sb-card { border-radius: var(--radius); }
.taf-sb-card--cream { background: var(--bg-tinted); }
.taf-sb-card--paper { background: var(--bg-surface); border: var(--bw-1) solid var(--border-hairline); }

/* W1: author bio. */
.taf-sb-bio {
  text-align: center;
  padding: 26px var(--space-24) var(--space-24); /* token-exempt: comp pad — 26px top, no spacing step */
}
.taf-sb-bio__photo {
  display: block; width: 116px; height: 116px; margin: 0 auto; /* comp portrait — 116px circle */
  border-radius: var(--radius-round); object-fit: cover;
  border: 3px solid var(--paper); /* token-exempt: comp portrait ring — 3px sits between --bw-15 and --bw-4 */
  box-shadow: var(--shadow);
}
.taf-sb-bio__hi {
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-20);
  line-height: var(--lh-115); color: var(--text-body);
  margin: var(--space-14) 0 var(--space-8);
}
.taf-sb-bio__copy {
  font-family: var(--sans); font-size: var(--fs-15); line-height: var(--lh-16);
  color: var(--text-muted); margin: 0;
}

/* .taf-single-sidebar .taf-sb-more — rationale: docs/design/css-rationale/main.css.md#taf-single-sidebar-taf-sb-more */
.taf-single-sidebar .taf-sb-more {
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-family: var(--sans); font-size: var(--fs-15); font-weight: var(--w-bold);
  color: var(--rose-link); text-decoration: none;
}
.taf-sb-bio__more { margin-top: var(--space-12); }
.taf-single-sidebar .taf-sb-more:hover,
.taf-single-sidebar .taf-sb-more:focus-visible { color: var(--rose-deep); }
.taf-sb-more .taf-pf-arrow { width: 15px; height: 15px; flex: none; }

/* .taf-single-sidebar .taf-sb-trust — rationale: docs/design/css-rationale/main.css.md#taf-single-sidebar-taf-sb-trust */
.taf-single-sidebar .taf-sb-trust {
  display: inline-flex; width: 100%; align-items: center; justify-content: center;
  gap: var(--space-8);
  min-height: 46px; /* token-exempt: V2 action height (matches the card's Print/Pin) */
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-pill);
  border: var(--bw-15) solid var(--rose);
  background: var(--paper); color: var(--rose-deep);
  font-family: var(--display); font-size: var(--fs-13); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--ls-08em);
  white-space: nowrap; text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.taf-single-sidebar .taf-sb-trust:hover,
.taf-single-sidebar .taf-sb-trust:focus-visible { background: var(--rose-tint); color: var(--rose-deep); }
.taf-sb-trust .taf-sb-gicon { width: 17px; height: 17px; flex: none; }

/* .taf-sb-kit — rationale: docs/design/css-rationale/main.css.md#taf-sb-kit */
.taf-sb-kit {
  padding: var(--space-24) 22px 26px; /* token-exempt: comp pad — 22px sides / 26px bottom, no spacing steps */
}
.taf-sb-kit__eyebrow { margin: 0; color: var(--rose-link); }
.taf-sb-kit__title {
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-22);
  line-height: var(--lh-12); color: var(--text-body);
  margin: var(--space-10) 0 var(--space-8);
}
.taf-sb-kit__pitch {
  font-family: var(--sans); font-size: var(--fs-15); line-height: var(--lh-16);
  color: var(--text-muted); margin: 0;
}
.taf-sb-kit__form { margin-top: var(--space-16); }
.taf-sb-kit__form .formkit-form,
.taf-sb-kit__form form { max-width: none; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
.taf-sb-kit__form .formkit-fields,
.taf-sb-kit__form [data-element="fields"],
.taf-sb-kit__form .seva-fields { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; }
.taf-sb-kit__form .formkit-field { flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; }
.taf-sb-kit__form .formkit-input,
.taf-sb-kit__form input[type="email"],
.taf-sb-kit__form input[type="text"] {
  width: 100%;
  /* .taf-sb-kit__form .formkit-input, .taf-sb-kit__form input[… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-sb-kit-form-formkit-input-taf-sb-kit-form-input-type-ema */
  height: var(--space-44); font-size: var(--fs-16);
  border-radius: var(--radius-sm) !important;
  border: var(--bw-1) solid #E5C8D6; /* token-exempt: sidebar input-border constant — mirrors the V2 #DFC3D2 rule treatment */
  background: var(--paper); padding: 0 var(--space-14); box-shadow: none;
}
/* .taf-sb-kit__form .formkit-submit, .taf-sb-kit__form butto… — rationale: docs/design/css-rationale/main.css.md#taf-sb-kit-form-formkit-submit-taf-sb-kit-form-button-type-s */
.taf-sb-kit__form .formkit-submit,
.taf-sb-kit__form button[type="submit"],
.taf-sb-kit__form button {
  width: 100% !important; flex: 0 0 auto !important;
  display: flex !important; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 46px; /* token-exempt: V2 action height (matches the card's Print/Pin) */
  background: var(--rose); color: var(--color-on-accent);
  font-family: var(--display); font-size: var(--fs-13); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--ls-08em);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm) !important; border: none; cursor: pointer;
  white-space: nowrap; transition: background var(--speed) var(--ease);
}
.taf-sb-kit__form .formkit-submit:hover,
.taf-sb-kit__form button:hover { background: var(--rose-deep); }
.taf-sb-kit__form .formkit-submit > div,
.taf-sb-kit__form .formkit-submit span { margin: 0 !important; padding: 0 !important; color: var(--color-on-accent); }
.taf-sb-kit__form .taf-sb-plane { width: 17px; height: 17px; flex: none; }
.taf-sb-kit__form .formkit-header,
.taf-sb-kit__form .formkit-subheader,
.taf-sb-kit__form .formkit-guarantee,
.taf-sb-kit__form [data-element="header"],
.taf-sb-kit__form [data-element="subheader"],
.taf-sb-kit__form [data-element="guarantee"],
.taf-sb-kit__form .formkit-powered-by-convertkit-container,
.taf-sb-kit__form .formkit-powered-by-convertkit { display: none !important; }
/* .taf-sb-kit__form .formkit-form — rationale: docs/design/css-rationale/main.css.md#taf-sb-kit-form-formkit-form */
.taf-sb-kit__form .formkit-form { margin-bottom: 0 !important; }
/* .taf-sb-kit__form .formkit-form > div — rationale: docs/design/css-rationale/main.css.md#taf-sb-kit-form-formkit-form-div */
.taf-sb-kit__form .formkit-form > div { padding: 0 !important; }
.taf-sb-kit__form .formkit-submit,
.taf-sb-kit__form button { margin-bottom: 0 !important; }
/* Kit's field row carries margin:-5px, so the inputs hung 5px outside the
   card's text column on each side. Zero it — fields align to the copy. */
.taf-sb-kit__form .formkit-fields { margin-left: 0 !important; margin-right: 0 !important; }

/* W4 + W5: ruled-heading tile cards (shared classes; only content differs). */
.taf-sb-list { padding: var(--space-20) var(--space-18); }
.taf-sb-list__h {
  display: flex; align-items: center; gap: var(--space-6);
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-20);
  line-height: var(--lh-115); letter-spacing: var(--ls--001em); color: var(--text-body);
  margin: 0 0 var(--space-16);
}
/* Trailing rule fills the heading line — the recipe card's section-heading
   pattern (wprm-taf2026.css §8). */
.taf-sb-list__h::after {
  content: "";
  flex: 1;
  border-top: var(--bw-1) solid #DFC3D2; /* token-exempt: V2 section-rule constant (mirrors wprm-taf2026.css) */
}
.taf-sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20) var(--space-14); }
.taf-sb-tile { display: block; color: var(--text-body); text-decoration: none; }
.taf-sb-tile__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ar-1-1); object-fit: cover;
  border-radius: var(--radius-sm);
}
.taf-sb-tile__t {
  display: block; margin-top: var(--space-8);
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-15);
  line-height: var(--lh-13);
}
.taf-sb-tile:hover .taf-sb-tile__t,
.taf-sb-tile:focus-visible .taf-sb-tile__t { color: var(--rose-deep); }
.taf-sb-list .taf-sb-more { margin-top: var(--space-18); }

/* ---- Jump pill visibility (menu.js toggles .is-hidden while the card is on
   screen; base styles are in the components block above) ---- */
.taf-jump-pill { transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease); }
.taf-jump-pill.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (min-width: 900px) {
  .taf-single-sidebar { display: flex; }
  .taf-post-meta__jump { display: inline-flex; }
  /* .taf-post-meta — rationale: docs/design/css-rationale/main.css.md#taf-post-meta */
  .taf-post-meta { margin-bottom: var(--space-16); }
  /* Byline steps with the rating text it sits above (see the base rule). */
  .taf-post-meta__name,
  .taf-post-meta__date { font-size: var(--fs-16); }
  .taf-post-meta__stars .taf-stars,
  .taf-post-meta__stars .wprm-recipe-rating { font-size: var(--fs-16); }
  /* Desktop replaces the pill with the meta-row button. */
  .taf-jump-pill { display: none; }
}

/* .taf-post-content — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-post-content */
.taf-post-content { display: block; }

/* .taf-post-content img:not([class*="wprm"]) — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-post-content-img-not-class-wprm */
.taf-post-content img:not([class*="wprm"]) {
  border-radius: var(--radius);
  object-fit: cover;
}

/* @media (min-width: 1024px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-1024px */
@media (min-width: 1024px) {
  body.single-post .content-container.site-container {
    grid-template-columns: minmax(0, 728px) 320px;
    justify-content: center;
    column-gap: var(--space-48);
  }
}

/* ======================
   Homepage — block-built from patterns/ so the owner can reorder bands.
   ====================== */

/* Flush section wrapper: horizontal band alignment without doubled vertical
   padding (for bands whose inner elements carry their own margins). */
.taf-section--flush { padding-top: 0; padding-bottom: 0; }

/* ---- Hero (patterns/hero-home.php) ----
   Hero copy lives in .taf-hero-copy beside .taf-hero-photo: split at 900px, photo
   hidden on mobile. */
.taf-hero { padding-top: var(--space-32); padding-bottom: 0; }
.taf-hero .taf-hero-title { max-width: 13ch; margin: var(--space-8) auto var(--space-12); }
.taf-hero .taf-hero-copy > p.taf-muted { max-width: 34ch; margin-left: auto; margin-right: auto; }
.taf-hero .taf-search { margin: var(--space-20) auto var(--space-12); }
.taf-hero .wp-block-buttons { row-gap: var(--space-8); }

/* .taf-hero .taf-search .wp-block-search__inside-wrapper — rationale: docs/design/css-rationale/main.css.md#taf-hero-taf-search-wp-block-search-inside-wrapper */
.taf-hero .taf-search .wp-block-search__inside-wrapper {
  flex: 1; display: flex; align-items: center; gap: var(--space-8);
  border: none; padding: 0;
}
.taf-hero .taf-search .wp-block-search__input {
  /* token-frozen: iOS Safari zooms an input whose font-size is under 16px
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  flex: 1; min-width: 0; min-height: 0;
  border: none; background: transparent;
  padding: var(--space-10) 0;
  font-size: var(--fs-16); /* 16px stops iOS zoom */
}
.taf-hero .taf-search .wp-block-search__input:focus-visible { outline: none; }
.taf-hero .taf-search:focus-within {
  outline: var(--focus-ring) solid var(--rose); outline-offset: 2px; /* search = rose, see .taf-search rule */
}
.taf-hero .taf-search .wp-block-search__button {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  min-height: 44px; margin: 0; padding: var(--space-8) var(--space-18); /* 44px tap target */
  font-size: var(--fs-15); font-weight: var(--w-bold);
}

/* Ghost button bridge; same wrapper-to-inner bridging pattern as the .taf-btn
   rules above. */
.wp-block-button.taf-btn--ghost { background: transparent; border: none; padding: 0; min-height: 0; }
.wp-block-button.taf-btn--ghost .wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: transparent; color: var(--accent); border: none;
  min-height: 44px; padding: var(--space-8) var(--space-12);
  font-family: var(--display); font-size: var(--fs-16); font-weight: var(--w-semibold);
  text-decoration: none; border-radius: var(--radius-pill);
  transition: color var(--speed) var(--ease);
}
.wp-block-button.taf-btn--ghost .wp-block-button__link:hover { color: var(--accent-hover); background: transparent; }

/* ---- About band (patterns/home-01-intro-card.php) ---- */
.taf-about-band .wp-block-image { width: 96px; margin: 0 auto; }
.taf-about-band .wp-block-image img {
  width: 96px; height: 96px;
  border-radius: var(--radius-round); object-fit: cover;
}
.taf-about-band h2 { margin: var(--space-12) 0 var(--space-8); }
.taf-about-band p.taf-muted { max-width: 36ch; margin-left: auto; margin-right: auto; }

@media (min-width: 900px) {
  .taf-hero { padding-top: var(--space-48); }
  .taf-hero .taf-hero-title { max-width: 16ch; margin: var(--space-12) auto var(--space-16); }
  .taf-hero .taf-hero-copy > p.taf-muted { font-size: var(--fs-20); max-width: 44ch; }
  .taf-hero .taf-search { max-width: 440px; margin-top: var(--space-24); }
}

/* html:root — rationale: docs/design/css-rationale/main.css.md#html-root */

/* ---- Kadence bridge: Kadence globals → Warm Oven tokens ---- */
html:root {
  --global-heading-font-family: var(--display); /* was "inherit" → system sans */
  --global-palette3: var(--chocolate); /* heading ink; was #000000 */
  --global-palette4: var(--chocolate); /* body/input ink; was #3a3a3a */
  /* Muted text — desktop nav links, comment float-labels and .comment-reply-link all
     draw palette5. #848484 failed AA (3.74:1 on white); cocoa = 6.41:1. */
  --global-palette5: var(--cocoa);
  --global-palette8: var(--milk);      /* page background; was #f3f3f3 */
  /* Kadence global.min.css a{} / a:hover{} read these — keep them on the
     Warm Oven link colors. */
  --global-palette-highlight: var(--text-link);
  --global-palette-highlight-alt: var(--accent-hover);
}

/* a — rationale: docs/design/css-rationale/main.css.md#a */
a {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--speed);
}

/* Heading ink. h4–h6 join the display face explicitly; weight 400 pins the Poppins
   Regular instance so browsers don't faux-bold now that --global-heading-font-family
   resolves to Poppins. */
h1, h2, h3, h4, h5, h6 { color: var(--text-body); }
h4, h5, h6 { font-family: var(--display); font-weight: var(--w-regular); }

/* details#feast-advanced-jump-to — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#details-feast-advanced-jump-to */
details#feast-advanced-jump-to {
  background: var(--milk);
  border: var(--bw-1) solid var(--line); /* hairline all round replaces the 4px stripe (shorthand out-specifies Feast's border-left) */
  border-radius: var(--radius);
  opacity: var(--o-1); /* kills Feast's .97 blend — the AA math above depends on this */
  color: var(--chocolate);
}
details#feast-advanced-jump-to summary { color: var(--chocolate); }
details#feast-advanced-jump-to li a {
  color: var(--rose-link);
  /* 44px tap target: inline-block + block padding lifts each TOC row past the floor. */
  display: inline-block;
  padding-block: var(--space-10);
}
details#feast-advanced-jump-to li a:hover,
details#feast-advanced-jump-to li a:focus-visible { color: var(--rose-deep); }

/* .taf-tile .ph figure — rationale: docs/design/css-rationale/main.css.md#taf-tile-ph-figure */

/* .taf-tile .ph figure — rationale: docs/design/css-rationale/main.css.md#taf-tile-ph-figure-2 */
.taf-tile .ph figure { height: 100%; }

/* ---- Homepage: counters + component deltas ---- */

/* .entry-content .taf-section h2 — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-section-h2 */
.entry-content .taf-section h2 {
  margin: var(--space-4) 0 var(--space-4);
  padding-bottom: 0;
  border-bottom: none;
  text-align: inherit;
}
.entry-content .taf-section-head h2 { margin: 0; } /* eyebrow→h2 abuts */
.entry-content .taf-about-band h2 { margin: var(--space-12) 0 var(--space-8); }
.entry-content .taf-eyebrow { margin: 0; }

/* .taf-search .wp-block-search__button.wp-block-search__butt… — rationale: docs/design/css-rationale/main.css.md#taf-search-wp-block-search-button-wp-block-search-button */
.taf-search .wp-block-search__button.wp-block-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  background: var(--accent);
  color: var(--color-on-accent);
}
.taf-search .wp-block-search__button.wp-block-search__button:hover {
  background: var(--accent-hover);
}
.taf-search .wp-block-search__input::placeholder { color: var(--text-muted); }

/* .has-rose-milk-background-color — rationale: docs/design/css-rationale/main.css.md#has-rose-milk-background-color */
.has-rose-milk-background-color { background-color: var(--cream); }

/* ---- Tile title links: quiet ink, underline only on tile hover ----
   (The global link element styles painted them pink + always-underlined.) */
.taf-tile .t a,
.taf-tile h3 a {
  color: inherit;
  text-decoration: none;
}
.taf-tile .t a:hover,
.taf-tile .t a:focus-visible,
.taf-tile h3 a:hover { color: inherit; }
/* Figure margin safety: the tile photo must fill its 4:5 box even in contexts
   without Kadence's figure reset (editor iframe, harnesses). */
.taf-tile .ph figure { margin: 0; }

/* ---- Tile hover: shadow + image zoom (scale 1.04, .35s), cropping inside the
   overflow:hidden rounded .ph box. One hover language site-wide. ---- */
@media (hover: hover) and (pointer: fine) {
  .taf-tile .ph { transition: box-shadow var(--speed) var(--ease); }
  .taf-tile .ph img { transition: transform var(--dur-35) var(--ease); }
  .taf-tile:hover .ph img,
  .taf-tile:focus-visible .ph img { transform: scale(1.04); }
}

/* ---- Breakpoint utilities: mobile shows 2 tiles per band + a full-width browse
   button; desktop shows 4-up grids + a section-head "more" link instead ---- */
.taf-hide-mobile { display: none; }
.taf-tile--desktop { display: none; }

/* ---- Mobile chip row: one horizontal scroll lane, edge-bled to the viewport ---- */
@media (max-width: 899.98px) {
  .taf-hero .wp-block-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    padding: 0 var(--pad) var(--space-8);
  }
}

/* ---- Hero photo: hidden on mobile (the 390 hero is typographic-only) ---- */
.taf-hero-photo { display: none; }

/* ---- Bread band rhythm: intro line capped at 40ch, grid 18px under it ---- */
.has-rose-milk-background-color > .taf-section { padding: var(--space-32) var(--pad) var(--space-32); }
.entry-content .taf-section .taf-muted.taf-small { margin: 0; max-width: 40ch; }
.entry-content .taf-section-head + .taf-muted.taf-small { margin: -8px 0 var(--space-16); } /* .has-rose-milk-background-color .taf-grid-4 — rationale: docs/design/css-rationale/main.css.md#has-rose-milk-background-color-taf-grid-4 *//* token-exempt: a negative pull-up, not a scale step. calc(var(--space-N) * -1) is equivalent but unreadable, and css-parity compares text not computed values, so it cannot prove the equivalence anyway. */
.has-rose-milk-background-color .taf-grid-4 { margin-top: var(--space-16); }

/* ---- Footer (rendered by inc/footer.php on kadence_footer) ---- */
.taf-footer__inner { max-width: var(--maxw-wide); margin: 0 auto; }
/* Legal-line links run inline inside the © sentence (the footer rule above makes
   column links display:block). */
.taf-footer .legal a {
  display: inline;
  padding: 0;
  color: var(--footer-legal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.taf-footer .legal a:hover { color: var(--rose); }
/* Safety: if Kadence's own footer ever prints alongside ours (remove_action
   raced), keep the page from growing two footers. */
#colophon.site-footer { display: none; }

/* ---- Desktop: split hero + 4-up bands ---- */
@media (min-width: 900px) {
  .taf-hide-mobile { display: block; }
  .taf-tile--desktop { display: block; }
  .taf-hide-desktop,
  .wp-block-buttons.taf-hide-desktop { display: none; }

  /* .home .taf-hero — rationale: docs/design/css-rationale/main.css.md#home-taf-hero */
  .home .taf-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-48);
    align-items: center;
    max-width: var(--maxw-wide);
    padding: var(--space-48) var(--pad) var(--space-20);
    text-align: left;
  }
  .home .taf-hero .taf-hero-title { max-width: 16ch; margin: var(--space-12) 0 var(--space-16); }
  .home .taf-hero .taf-hero-copy > p.taf-muted { margin-left: 0; margin-right: 0; }
  .home .taf-hero .taf-search { margin: var(--space-24) 0 0; }
  .home .taf-hero .wp-block-buttons { justify-content: flex-start; margin-top: var(--space-16); }

  .taf-hero .taf-hero-photo {
    display: block;
    position: relative;
    aspect-ratio: var(--ar-4-44);
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-tinted);
  }
  .taf-hero-photo figure { height: 100%; margin: 0; }
  .taf-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  .taf-hero-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--space-40) var(--space-20) var(--space-16);
    background: linear-gradient(transparent, var(--scrim-search));
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }
  .taf-hero-caption p { margin: 0; }
  .taf-hero-caption .taf-tag { position: static; }
  .taf-hero-caption-title {
    font-family: var(--display);
    font-size: var(--fs-20);
    letter-spacing: var(--ls-display);
    color: var(--color-on-scrim);
  }

  .has-rose-milk-background-color > .taf-section { padding: var(--space-48) var(--pad); }

  .taf-footer { padding: var(--space-40) var(--pad); }
}

/* ======================
   Recipe index (/recipe-index/). Markup: page post_content +
   patterns/ri-02-circle-grid.php + inc/recipe-index.php.
   ====================== */

/* ---- Band 1: search hero ----
   Reuses the .taf-hero scaffolding + the wp:search pill bridge above; only the
   page-specific deltas live here. */
.taf-ri-hero { padding-top: var(--space-32); padding-bottom: 0; }
.taf-ri-hero .taf-hero-title { font-size: var(--fs-30); max-width: 16ch; margin: var(--space-8) auto var(--space-12); }

/* Chip row: one horizontally scrollable line on mobile, edge-to-edge within the
   728px hero column. Overrides the core buttons flex layout at equal-or-higher
   specificity. */
.wp-block-buttons.taf-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-8);
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-12) calc(-1 * var(--pad)) 0;
  padding: 0 var(--pad) var(--space-4);
}
.wp-block-buttons.taf-chip-row > .wp-block-button { margin: 0; flex: none; }

/* .taf-tile--cat .ph — rationale: docs/design/css-rationale/main.css.md#taf-tile-cat-ph */

/* ---- Band 2: category photo grid ----
   4:3 tiles (recipe tiles stay 4:5); count chip in the tile title line. */
.taf-tile--cat .ph { aspect-ratio: var(--ar-4-3); }
.taf-tile .t .taf-meta { font-family: var(--display); }
/* Linked wp:image inside .ph: keep the fill chain figure → a → img intact. */
.taf-tile .ph figure > a { display: block; height: 100%; }

/* .taf-most-loved ul.wp-block-post-template — rationale: docs/design/css-rationale/main.css.md#taf-most-loved-ul-wp-block-post-template */
.taf-most-loved ul.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.taf-most-loved li.wp-block-post { margin: 0; }

/* Featured-image block as the tile photo: the figure carries .ph (4:5, tinted,
   overflow hidden); the isLink anchor must fill it. */
.taf-tile .wp-block-post-featured-image.ph { margin: 0; }
.taf-tile .wp-block-post-featured-image.ph > a { display: block; height: 100%; }
.taf-tile .wp-block-post-featured-image.ph img { width: 100%; height: 100%; object-fit: cover; }

/* Post-title block as the tile title: the inner isLink anchor inherits ink and
   drops its own underline (the tile-hover underline still paints through). */
.taf-tile h3.t { margin: var(--space-8) 0 0; }
.taf-tile .t a { color: inherit; text-decoration: none; }

/* ---- Pagination: real links styled as chips (comp) ---- */
.taf-most-loved .wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
}
.taf-most-loved .wp-block-query-pagination-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin: 0;
}
.taf-most-loved .page-numbers,
.taf-most-loved .wp-block-query-pagination-previous,
.taf-most-loved .wp-block-query-pagination-next {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 44px; /* 44px tap target */
  padding: var(--space-8) var(--space-14);
  border: var(--bw-15) solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-body);
  font-size: var(--fs-15);
  font-weight: var(--w-semibold);
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.taf-most-loved a.page-numbers:hover,
.taf-most-loved .wp-block-query-pagination-previous:hover,
.taf-most-loved .wp-block-query-pagination-next:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.taf-most-loved .page-numbers.current {
  background: var(--chocolate);
  border-color: var(--chocolate);
  color: var(--milk);
}
.taf-most-loved .page-numbers.dots {
  border: none;
  background: transparent;
  padding: var(--space-8) var(--space-4);
  min-height: 0;
  color: var(--text-muted);
}

/* ---- Desktop (900px) ---- */
@media (min-width: 900px) {
  .taf-ri-hero { padding-top: var(--space-48); }
  .taf-ri-hero .taf-hero-title { font-size: var(--fs-42); }
  .taf-ri-hero .taf-search { max-width: 480px; }
  /* Chips fit on one line at 1280 — wrap centered, no scroll. */
  .wp-block-buttons.taf-chip-row {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  }
}

/* body.single-post .post-thumbnail — rationale: docs/design/css-rationale/main.css.md#body-single-post-post-thumbnail */

/* body.single-post .post-thumbnail — rationale: docs/design/css-rationale/main.css.md#body-single-post-post-thumbnail-2 */
body.single-post .post-thumbnail { display: none; }
/* The doubled class out-specifies Feast's content.min.css rule
   `.content-style-boxed .content-bg:not(.loop-entry)` (0,3,0), which re-adds -1rem
   side margins under 720px. */
body.single-post article.single-entry.single-entry {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0; /* Kadence content-bg gives the article -16px side margins */
}
body.single-post .content-area { margin-top: 0; margin-bottom: 0; }
/* The container carries the article padding so the desktop sidebar column aligns with
   the content top. */
body.single-post .content-container.site-container { padding: var(--space-16) var(--space-20) var(--space-40); }
body.single-post .entry-content-wrap { padding: 0; }
/* Desktop padding: both grid columns start 28px below the header. Lives after the base
   padding rule so the cascade keeps it at ≥1024. */
@media (min-width: 1024px) {
  body.single-post .content-container.site-container { padding: var(--space-24) var(--space-32) var(--space-40); }
}

/* ---- 2. Header rhythm: crumbs → H1 → rating row. Kadence gave .entry-header 17px +
   .entry-content 32px (rendered gap 32px) and heading line-height 1.2. ---- */
body.single-post .entry-header { margin: var(--space-12) 0 var(--space-8); }
body.single-post .entry-content { margin-top: 0; }
body.single-post h1.entry-title { line-height: var(--lh-display); }

/* ---- 3. Content-column rhythm: paragraphs/figures pace at 18px mobile / 22px
   desktop; H2 sections 26px top, 8px bottom (Kadence had 32px / 36–45px). ---- */
.taf-post-content p { margin: 0 0 var(--space-16); }
.taf-post-content figure.wp-block-image { margin: var(--space-16) 0; }
.taf-post-content h2 {
  margin: var(--space-24) 0 var(--space-8);
  line-height: var(--lh-display);
}
/* Legacy jump links (locked element) sat flush against the first paragraph —
   give them the same 16px the byline row uses. */
.taf-post-content .wprm-recipe-snippet { margin: 0 0 var(--space-16); }

@media (min-width: 900px) {
  body.single-post .entry-header { margin-top: var(--space-12); }
  /* Recipe H1 is 40px on desktop (not the 42px --fs-h1 token). */
  body.single-post h1.entry-title { font-size: var(--fs-42); }
  .taf-post-content p { margin-bottom: var(--space-20); }
  .taf-post-content figure.wp-block-image { margin: var(--space-20) 0; }
  /* .taf-cat-archive — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-cat-archive */
}

/* .taf-cat-archive — rationale: docs/design/css-rationale/main.css.md#taf-cat-archive-2 */

/* ---- Page scaffold ----
   728px content column on mobile; at ≥900px the container opens to --maxw-wide
   for the 4-up grid while the intro keeps a readable measure. */
.taf-cat-archive {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: var(--space-20) var(--pad) var(--space-24);
}
.taf-cat-archive .taf-breadcrumbs { display: block; }

/* ---- Head: H1 + intro (native term description) ---- */
.taf-cat-head { margin: var(--space-12) 0 var(--space-16); }
.taf-cat-title { font-size: var(--fs-h1); margin: 0 0 var(--space-8); }
/* The intro is the native term description — it arrives wpautop'd with inline
   links. Keep the muted body tone; links inherit the brand color. */
.taf-cat-intro { color: var(--text-muted); max-width: 42ch; }
.taf-cat-intro p { margin: 0 0 var(--space-8); }
.taf-cat-intro p:last-child { margin-bottom: 0; }

/* .taf-cat-chips — rationale: docs/design/css-rationale/main.css.md#taf-cat-chips */
.taf-cat-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-16) calc(-1 * var(--pad)) 0;
  padding: 0 var(--pad) var(--space-4);
}
.taf-cat-chips .taf-chip { flex: none; }
/* the is-active "All …" chip is already styled by .taf-chip.is-active */

/* ---- Tile grid ----
   .taf-grid-4 does the layout (2-up mobile / 4-up ≥900px); only loop-context
   deltas live here. */
.taf-cat-grid { margin-top: var(--space-16); }
.taf-cat-grid + .taf-cat-grid { margin-top: var(--space-16); }
.taf-cat-grid .taf-tile .t { margin: var(--space-8) 0 0; }
/* get_the_post_thumbnail() prints a bare <img> inside .ph; guard the
   no-thumbnail case (tinted box). */
.taf-cat-grid .taf-tile .ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Magnet band after row 2 ----
   The wrapper keeps it aligned to the content column, not the wide grid. */
.taf-cat-magnet { max-width: var(--maxw); margin: var(--space-24) auto 0; }
.taf-cat-magnet .taf-magnet { margin: var(--space-8) 0 0; }

/* ---- Pagination: real core .page-numbers links styled as chips ---- */
.taf-cat-archive .navigation.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-24);
}
.taf-cat-archive .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
.taf-cat-archive .nav-links .page-numbers {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 44px; /* 44px tap target */
  padding: var(--space-8) var(--space-14);
  border: var(--bw-15) solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-body);
  font-size: var(--fs-15);
  font-weight: var(--w-semibold);
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.taf-cat-archive .nav-links a.page-numbers:hover,
.taf-cat-archive .nav-links a.page-numbers:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.taf-cat-archive .nav-links .page-numbers.current {
  background: var(--chocolate);
  border-color: var(--chocolate);
  color: var(--milk);
}
.taf-cat-archive .nav-links .page-numbers.dots {
  border: none;
  background: transparent;
  padding: var(--space-8) var(--space-4);
  min-height: 0;
  color: var(--text-muted);
}

/* ---- Desktop (900px) ---- */
@media (min-width: 900px) {
  .taf-cat-archive { padding-top: var(--space-32); }
  .taf-cat-head { margin-bottom: var(--space-24); }
  .taf-cat-title { font-size: var(--fs-h1); } /* token scales to 42px ≥900 */
  .taf-cat-intro { max-width: 62ch; }
  /* Chips fit on one line at 1280 — wrap in place, no scroll lane. */
  .taf-cat-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  .taf-cat-grid { margin-top: var(--space-24); }
  .taf-cat-grid + .taf-cat-grid { margin-top: var(--space-20); }
  .taf-cat-magnet { margin-top: var(--space-32); }
}

/* .taf-latest-hero — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-latest-hero */

/* .taf-latest-hero — rationale: docs/design/css-rationale/main.css.md#taf-latest-hero-2 */
.taf-latest-hero {
  background: var(--bg-tinted);
  padding: var(--space-24) var(--pad) var(--space-32);
  text-align: center;
}
.taf-latest-hero-inner { max-width: var(--maxw-wide); margin: 0 auto; }

/* .taf-latest-hero .taf-breadcrumbs — rationale: docs/design/css-rationale/main.css.md#taf-latest-hero-taf-breadcrumbs */
.taf-latest-hero .taf-breadcrumbs {
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  color: var(--text-muted);
  margin: 0 0 var(--space-12);
}
.taf-latest-hero .taf-breadcrumbs a { color: var(--rose-deep); text-decoration: none; }
.taf-latest-hero .taf-breadcrumbs .breadcrumb_last { color: var(--text-muted); }

/* .taf-latest-h1 — rationale: docs/design/css-rationale/main.css.md#taf-latest-h1 */
.taf-latest-h1 {
  font-family: var(--display);
  font-weight: var(--w-black);
  font-size: var(--fs-32);
  letter-spacing: var(--ls-display);
  color: var(--text-body);
  margin: 0;
  text-wrap: balance;
}

/* ---- The grid ----
   --maxw-wide (1200px) minus 2×--space-24 = the 1152px content box this
   template has always rendered; --space-40 is the gutter it already had. */
.taf-latest-grid {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: var(--space-28) var(--space-24) 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* .taf-latest-grid — rationale: docs/design/css-rationale/main.css.md#taf-latest-grid */
  gap: var(--space-40);
}
.taf-latest-item { display: flex; margin: 0; }

/* .taf-latest-card — rationale: docs/design/css-rationale/main.css.md#taf-latest-card */
.taf-latest-card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur-15) var(--ease-out), transform var(--dur-15) var(--ease-out);
}

/* 3:2 from a square 768×768 source, centre-cropped — the ratio this template
   has always rendered (Kadence's class says ratio-2-3; the measured box is 3:2). */
.taf-latest-photo {
  display: block;
  aspect-ratio: var(--ar-3-2);
  background: var(--bg-tinted);
  overflow: hidden;
}
.taf-latest-photo img { width: 100%; height: 100%; object-fit: cover; }

.taf-latest-body {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* .taf-latest-cats — rationale: docs/design/css-rationale/main.css.md#taf-latest-cats */
.taf-latest-cats {
  font-size: var(--fs-14);
  line-height: var(--lh-15);
  font-weight: var(--w-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
}
.taf-latest-cats a { color: inherit; text-decoration: none; }

/* 30px/600 in a 293px measure ran ~9.8 characters a line, so most titles broke
   over three. 24px/700 in a 309px measure runs ~12.5. */
.taf-latest-title {
  font-family: var(--display);
  font-weight: var(--w-bold);
  font-size: var(--fs-24);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-8);
  text-wrap: balance;
}
.taf-latest-title a { color: var(--text-body); text-decoration: none; }

/* Date only. The byline is GONE: every entry on this site has the same author,
   so an author name repeated forty times a page carried no information and cost
   a line in every card. */
.taf-latest-meta {
  font-size: var(--fs-14);
  line-height: var(--lh-15);
  color: var(--text-muted);
  margin: 0 0 var(--space-14);
}
.taf-latest-meta time { white-space: nowrap; }
.taf-latest-meta .dot { margin: 0 var(--space-4); opacity: var(--o-6); }
/* .taf-latest-meta .upd — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-latest-meta-upd */
.taf-latest-meta .upd { color: var(--text-body); font-weight: var(--w-bold); white-space: nowrap; }

.taf-latest-ex {
  font-size: var(--fs-16-5);
  line-height: var(--lh-16);
  color: var(--text-body);
  margin: 0 0 var(--space-18);
  text-wrap: pretty;
}

.taf-latest-morewrap { margin: auto 0 0; }
/* "READ MORE →" (uppercase, +0.72px tracking, body ink) → sentence case in
   --rose-link, 5.2:1 on white. Same Kadence arrow glyph. */
.taf-latest-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--sans);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-link);
  text-decoration: none;
}
.taf-latest-arrow { transition: transform var(--dur-15) var(--ease-out); }

/* ---- Interaction: hover is pointer-gated, focus is not ---- */
@media (hover: hover) and (pointer: fine) {
  .taf-latest-hero .taf-breadcrumbs a:hover { text-decoration: underline; }
  .taf-latest-cats a:hover { color: var(--text-link); text-decoration: underline; }
  .taf-latest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .taf-latest-card:hover .taf-latest-title a { text-decoration: underline; text-underline-offset: var(--space-4); }
  .taf-latest-more:hover { color: var(--rose-deep); text-decoration: underline; text-underline-offset: var(--space-4); }
  .taf-latest-more:hover .taf-latest-arrow { transform: translateX(3px); /* token-exempt: a 3px nudge is the motion itself, not spacing — it has no counterpart anywhere in the layout to share a token with */ }
}
.taf-latest a:focus-visible {
  outline: var(--focus-ring) solid var(--focus-ring-color);
  outline-offset: var(--space-2);
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .taf-latest-card:hover { transform: none; }
  .taf-latest-more:hover .taf-latest-arrow { transform: none; }
}

/* .taf-latest .navigation.pagination — rationale: docs/design/css-rationale/main.css.md#taf-latest-navigation-pagination */
.taf-latest .navigation.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-32);
  padding: 0 var(--space-24) var(--space-8);
}
.taf-latest .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}
.taf-latest .nav-links .page-numbers {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 44px; /* 44px tap target */
  min-width: 44px; /* 44px tap target */
  padding: var(--space-8) var(--space-14);
  border: var(--bw-15) solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-body);
  font-size: var(--fs-15);
  font-weight: var(--w-semibold);
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  transition: border-color var(--dur-15) var(--ease-out), color var(--dur-15) var(--ease-out);
}
.taf-latest .nav-links a.page-numbers:hover,
.taf-latest .nav-links a.page-numbers:focus-visible {
  border-color: var(--text-link);
  color: var(--text-link);
}
.taf-latest .nav-links .page-numbers.current {
  background: var(--chocolate);
  border-color: var(--chocolate);
  color: var(--milk);
}
.taf-latest .nav-links .page-numbers.dots {
  border: none;
  background: transparent;
  padding: var(--space-8) var(--space-4);
  min-height: 0;
  min-width: 0;
  color: var(--text-muted);
}

/* @media (min-width: 576px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-576px */
@media (min-width: 576px) {
  .taf-latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Desktop band + 3-up (Kadence's large breakpoint) ---- */
@media (min-width: 900px) {
  .taf-latest-hero { padding: var(--space-40) var(--space-24); }
  .taf-latest-h1 { font-size: var(--fs-42); }
}
/* @media (min-width: 1025px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-1025px */
@media (min-width: 1025px) {
  .taf-latest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: var(--space-44);
  }
}

/* .taf-about-story — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-about-story */

/* ---- Band 2: story column ---- */
.taf-about-story { padding-top: var(--space-8); }
.taf-about-story > p { margin: 0 0 var(--space-12); }

/* Credentials strip: 2×2 stat card, 4-up at 900px. */
.taf-about-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12);
  background: var(--bg-surface);
  border: var(--bw-1) solid var(--border-hairline);
  border-radius: var(--radius);
  padding: var(--space-20); margin: var(--space-20) 0;
  text-align: center;
}
.taf-about-stat p { margin: 0; }
.taf-about-stat__num { font-family: var(--display); font-size: var(--fs-24); line-height: var(--lh-115); font-weight: var(--w-bold); }

/* Press row */
.taf-press { margin: var(--space-4) 0 0; }
.taf-press__links { font-size: var(--fs-small); margin: var(--space-4) 0 0; }
.taf-press__links a { white-space: nowrap; }

/* ---- Band 6: FAQ (component styles in main.css; page spacing only) ---- */
.taf-faq h2 { margin-bottom: var(--space-4); }

/* ---- Band 7: magnet + outro ---- */
.taf-about-close { padding-top: 0; }
/* Mirrors the bread-band intro rule (margin:0 + 40ch cap) that otherwise catches this
   centered outro and left-flushes its capped box. Auto side margins re-center it. */
.entry-content .taf-section .taf-about-outro.taf-muted.taf-small,
.taf-about-outro { margin: var(--space-20) auto var(--space-8); }

/* ---- Desktop (900px) ---- */
@media (min-width: 900px) {
  .taf-about-stats { grid-template-columns: repeat(4, 1fr); }
}

/* .taf-abouticon — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-abouticon */

/* House stroke-icon: outline glyphs (fill:none, unlike .taf-icon) sized to
   their box by font-size. */
.taf-abouticon { display: block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; flex: none; }

/* .entry-content .taf-section.taf-abt, .taf-section.taf-abt — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-section-taf-abt-taf-section-taf-abt */
.entry-content .taf-section.taf-abt,
.taf-section.taf-abt { padding-top: var(--space-32); padding-bottom: var(--space-32); }

/* .entry-content .taf-section.taf-abt--rule, .taf-section.ta… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-section-taf-abt-rule-taf-section-taf-abt-r */
.entry-content .taf-section.taf-abt--rule,
.taf-section.taf-abt--rule { border-top: 0; position: relative; }
.entry-content .taf-abt--rule::before,
.taf-abt--rule::before {
  content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad);
  border-top: var(--bw-1) solid var(--border-hairline);
}

/* .entry-content .wp-block-group.taf-abt h2, .entry-content… — rationale: docs/design/css-rationale/main.css.md#entry-content-wp-block-group-taf-abt-h2-entry-content-wp-blo */
.entry-content .wp-block-group.taf-abt h2,
.entry-content .wp-block-group.taf-abt-inspowrap h2 { border-bottom: 0; padding-bottom: 0; }

/* .entry-content .taf-abt > *, .taf-abt > * — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-abt-taf-abt */
.entry-content .taf-abt > *,
.taf-abt > * { margin-top: 0; margin-bottom: 0; }

/* Every section heading, whether it came from wp:heading or from wp:html. */
.entry-content .taf-abt h2,
.taf-abt h2 {
  font-family: var(--display); font-weight: var(--w-semibold);
  font-size: var(--fs-30); line-height: var(--lh-115);
  letter-spacing: var(--ls-display); color: var(--text-body);
  margin: 0 0 var(--space-24);
}

/* .entry-content .taf-abt-herowrap, .taf-abt-herowrap — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-abt-herowrap-taf-abt-herowrap */
.entry-content .taf-abt-herowrap,
.taf-abt-herowrap { background: var(--bg-tinted); padding: var(--space-40) var(--pad); }
.taf-abt-hero { max-width: var(--maxw-wide); margin: 0 auto; display: grid; gap: var(--space-32); align-items: center; }

/* .entry-content .taf-abt-hero__title, .taf-abt-hero__title — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-abt-hero-title-taf-abt-hero-title */
.entry-content .taf-abt-hero__title,
.taf-abt-hero__title {
  font-family: var(--display); font-weight: var(--w-black);
  font-size: var(--fs-hero); line-height: var(--lh-108) !important;
  letter-spacing: var(--ls-display); color: var(--text-body);
  margin: 0 0 var(--space-18);
}
.taf-abt-hero__name { color: var(--accent); }
.entry-content .taf-abt-hero__lede,
.taf-abt-hero__lede {
  font-size: var(--fs-19); line-height: var(--lh-165);
  color: var(--text-body); max-width: 52ch; margin: 0;
}
.entry-content .taf-abt-hero__ctarow,
.taf-abt-hero__ctarow { margin: var(--space-24) 0 0; }
.taf-abt-hero__cta { display: inline-flex; align-items: center; gap: var(--space-8); }
/* Guarantee the primary CTA's fill/ink inside entry-content, where a Kadence
   base `a` color could otherwise outrank .taf-btn--primary (0,1,0). */
.entry-content a.taf-abt-hero__cta.taf-btn--primary { color: var(--color-on-accent); background: var(--accent); }
.entry-content a.taf-abt-hero__cta.taf-btn--primary:hover,
.entry-content a.taf-abt-hero__cta.taf-btn--primary:focus-visible { color: var(--color-on-accent); background: var(--accent-hover); }

/* .taf-abt-hero__media — rationale: docs/design/css-rationale/main.css.md#taf-abt-hero-media */
.taf-abt-hero__media { order: -1; width: 100%; max-width: 500px; margin: 0 auto; }
.taf-abt-hero__portrait { margin: 0; width: 100%; }
.taf-abt-hero__portrait img {
  width: 100%; height: auto; aspect-ratio: var(--ar-4-5); object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-hover); display: block;
}

/* ---- Section 2: my food philosophy -------------------------------------- */
.entry-content .taf-abt-phil p,
.taf-abt-phil p { font-size: var(--fs-18); line-height: var(--lh-165); color: var(--text-body); }
.entry-content .taf-abt-phil > p + p,
.taf-abt-phil > p + p { margin-top: var(--space-16); }

/* .entry-content .taf-abt-find__list, .taf-abt-find__list — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-abt-find-list-taf-abt-find-list */
.entry-content .taf-abt-find__list,
.taf-abt-find__list { list-style: none; margin: 0; padding: 0; }
.taf-abt-find__row {
  display: grid; grid-template-columns: var(--space-48) 1fr; gap: var(--space-20);
  padding: var(--space-20) 0; border-bottom: var(--bw-1) solid var(--border-hairline);
  list-style: none;
}
.entry-content .taf-abt-find__num,
.taf-abt-find__num {
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-14);
  color: var(--rose-deep); /* not --accent: #E11584 on --paper is 4.39:1, 0.11 short of AA. --rose-deep is 6.19:1. Same precedent as the Slice-1 gate fix. */
  letter-spacing: var(--ls-08em); padding-top: var(--space-4);
}
.entry-content .taf-abt-find__text,
.taf-abt-find__text { font-size: var(--fs-18); line-height: var(--lh-165); color: var(--text-body); margin: 0; }

/* The camera note: a --cream inset. This is a TINTED NOTE, not a card — no
   border, no shadow. It is the one boxed shape the layout system allows. */
.taf-abt-find__note {
  display: flex; align-items: flex-start; gap: var(--space-16);
  background: var(--bg-tinted); border-radius: var(--radius);
  padding: var(--space-24); margin-top: var(--space-24);
}
.taf-abt-find__note-icon { color: var(--accent); font-size: var(--fs-18); margin-top: var(--space-2); }
.entry-content .taf-abt-find__note-text,
.taf-abt-find__note-text { font-size: var(--fs-16); line-height: var(--lh-165); color: var(--text-muted); margin: 0; }

/* .entry-content .taf-abt-inspowrap, .taf-abt-inspowrap — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-abt-inspowrap-taf-abt-inspowrap */
.entry-content .taf-abt-inspowrap,
.taf-abt-inspowrap {
  background: var(--bg-tinted); padding: var(--space-32) 0;
  border-top: var(--bw-1) solid var(--border-hairline);
}
/* .taf-abt-inspo — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-abt-inspo */
.taf-abt-inspo {
  max-width: var(--maxw); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad);
}
/* .entry-content .taf-abt-inspo__quote, .taf-abt-inspo__quot… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-abt-inspo-quote-taf-abt-inspo-quote */
.entry-content .taf-abt-inspo__quote,
.taf-abt-inspo__quote {
  font-family: var(--display); font-weight: var(--w-semibold);
  font-size: var(--fs-24); line-height: var(--lh-15);
  letter-spacing: var(--ls-display); color: var(--text-body);
  margin: var(--space-24) 0 0; padding: 0; border: 0;
  text-wrap: pretty;
}
/* .entry-content .taf-abt-inspo__mk, .taf-abt-inspo__mk — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-abt-inspo-mk-taf-abt-inspo-mk */
.entry-content .taf-abt-inspo__mk,
.taf-abt-inspo__mk { color: inherit; }

/* ---- Section 5: my journey — three labelled passages -------------------- */
.taf-abt-journey__item + .taf-abt-journey__item {
  border-top: var(--bw-1) solid var(--border-hairline); margin-top: var(--space-24); padding-top: var(--space-24);
}
.entry-content .taf-abt-journey__label,
.taf-abt-journey__label {
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-13);
  letter-spacing: var(--ls-14em); text-transform: uppercase; color: var(--text-link);
  margin: 0;
}
.entry-content .taf-abt-journey__body,
.taf-abt-journey__body { font-size: var(--fs-18); line-height: var(--lh-165); color: var(--text-body); margin: var(--space-10) 0 0; }

/* ---- Section 6: quick facts — five icon rows ---------------------------- */
.entry-content .taf-abt-facts__list,
.taf-abt-facts__list { list-style: none; margin: 0; padding: 0; }
.taf-abt-facts__row {
  display: flex; align-items: flex-start; gap: var(--space-16);
  padding: var(--space-16) 0; border-bottom: var(--bw-1) solid var(--border-hairline);
  list-style: none;
}
/* .taf-abt-facts__row:last-child — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-abt-facts-row-last-child */
.taf-abt-facts__row:last-child { border-bottom: 0; }
.taf-abt-facts__icon { color: var(--accent); font-size: var(--fs-16); margin-top: var(--space-4); }
.entry-content .taf-abt-facts__text,
.taf-abt-facts__text { font-size: var(--fs-17); line-height: var(--lh-16); color: var(--text-body); margin: 0; }

/* .entry-content .taf-abt-press__row, .taf-abt-press__row — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-abt-press-row-taf-abt-press-row */
.entry-content .taf-abt-press__row,
.taf-abt-press__row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-8); margin: 0;
}
/* One rule for BOTH the linked names and the unlinked one (Cherry Bombe has no
   verified URL — see patterns/about-09-press.php), so the row reads evenly. */
.entry-content .taf-abt-press__name,
.taf-abt-press__name {
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-16);
  color: var(--text-body); text-decoration: none; white-space: nowrap;
}
.entry-content a.taf-abt-press__name:hover,
.entry-content a.taf-abt-press__name:focus-visible { color: var(--accent-hover); text-decoration: underline; }
.taf-abt-press__dot { color: var(--accent); font-size: var(--fs-15); }

/* .taf-abt-faq__list — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-abt-faq-list */
.taf-abt-faq__list { border-top: var(--bw-1) solid var(--border-hairline); }
.taf-abt-faq__item { border-bottom: var(--bw-1) solid var(--border-hairline); }
.taf-abt-faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-20); padding: var(--space-20) 0;
}
.taf-abt-faq__q::-webkit-details-marker { display: none; }
.entry-content .taf-abt-faq__qt,
.taf-abt-faq__qt {
  font-family: var(--display); font-weight: var(--w-semibold);
  font-size: var(--fs-19); line-height: var(--lh-135); color: var(--text-body);
}
.taf-abt-faq__i {
  color: var(--accent); font-size: var(--fs-16);
  transition: transform var(--dur-2) var(--ease);
}
.taf-abt-faq__item[open] .taf-abt-faq__i { transform: rotate(45deg); }
.entry-content .taf-abt-faq__a,
.taf-abt-faq__a {
  font-size: var(--fs-16); line-height: var(--lh-165); color: var(--text-muted);
  margin: 0; padding: 0 var(--space-40) var(--space-24) 0;
}
.taf-abt-faq__q:focus-visible { outline: var(--focus-ring) solid var(--focus-ring-color); outline-offset: var(--space-2); }

/* .taf-abt-favs .taf-tile .ph — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-abt-favs-taf-tile-ph */
.taf-abt-favs .taf-tile .ph { aspect-ratio: var(--ar-4-3); border-radius: var(--radius); overflow: hidden; }
/* .entry-content .taf-abt-favs .taf-tile .t, .taf-abt-favs .… — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-abt-favs-taf-tile-t-taf-abt-favs-taf-tile- */
.entry-content .taf-abt-favs .taf-tile .t,
.taf-abt-favs .taf-tile .t {
  font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-17);
  line-height: var(--lh-13) !important; letter-spacing: normal; color: var(--text-body);
  margin: var(--space-12) 0 0;
}
.taf-abt-favs .taf-tile:hover .t,
.taf-abt-favs .taf-tile:focus-visible .t { color: var(--accent-hover); }
/* The CTA is the comp's OUTLINED rose button, CENTRED under the tile row
   (the comp left-aligns it; this is a deliberate override). */
.entry-content .taf-abt-favs__ctarow,
.taf-abt-favs__ctarow { display: flex; justify-content: center; margin: var(--space-32) 0 0; }
/* .entry-content a.taf-abt-favs__cta, a.taf-abt-favs__cta — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-a-taf-abt-favs-cta-a-taf-abt-favs-cta */
.entry-content a.taf-abt-favs__cta,
a.taf-abt-favs__cta {
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--accent); color: var(--color-on-accent);
  border: var(--bw-15) solid var(--accent); border-radius: var(--radius-sm);
}
.entry-content a.taf-abt-favs__cta:hover,
.entry-content a.taf-abt-favs__cta:focus-visible {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--color-on-accent);
}

/* ---- Desktop (>=900px) — the tier where the comp's numbers are literal ---- */
@media (min-width: 900px) {
  /* .entry-content .taf-section.taf-abt, .taf-section.taf-abt — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-section-taf-abt-taf-section-taf-abt-2 */
  .entry-content .taf-section.taf-abt,
  .taf-section.taf-abt { padding-top: var(--space-48); padding-bottom: var(--space-48); }

  .entry-content .taf-abt-herowrap,
  .taf-abt-herowrap { padding: var(--space-48) var(--pad); }
  .taf-abt-hero { grid-template-columns: 1.15fr 1fr; gap: var(--space-48); }
  .taf-abt-hero__media { order: 0; max-width: none; }

  /* .entry-content .taf-abt-inspowrap, .taf-abt-inspowrap — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-abt-inspowrap-taf-abt-inspowrap-2 */
  .entry-content .taf-abt-inspowrap,
  /* Matches .taf-abt's reduced 48 so the accent band keeps the same rhythm as
     the sections around it. */
  .taf-abt-inspowrap { padding: var(--space-48) 0; }

  /* (No favorites grid override here on purpose — .taf-grid-4's own 4-up step
     is the standard tile row review asked for. See the note above.) */
}

/* .taf-suggest-heading — rationale: docs/design/css-rationale/main.css.md#taf-suggest-heading */

/* ---- Shared: suggestion blocks (404 + empty search) ---- */
.taf-suggest-heading { margin: var(--space-32) 0 var(--space-12); }
.taf-suggest-grid { margin: 0 0 var(--space-8); }
.taf-suggest-grid .taf-tile p { margin: 0; }
.taf-suggest-grid .taf-tile p.t { margin-top: var(--space-8); }
/* the_post_thumbnail() puts the img straight inside .ph — cover-fill it (the
   figure/anchor variants are covered above). */
.taf-suggest-grid .taf-tile .ph > img { width: 100%; height: 100%; object-fit: cover; }

/* A real <ul> since 2026-07-17 (was role=list divs) — flatten the list chrome. */
.taf-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-24); padding: 0; list-style: none; }
.taf-chips li { margin: 0; }

/* ---- 404 (body.error404, renderer: taf2026_render_404_content) ---- */
.taf-404 { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-20) 0 var(--space-8); }
.taf-404__title {
  font-size: var(--fs-30); text-align: center;
  max-width: 16ch; margin: var(--space-8) auto 0;
}
.taf-404__lead {
  text-align: center; color: var(--text-muted);
  max-width: 46ch; margin: var(--space-12) auto 0;
}
.taf-404__search { max-width: 480px; margin: var(--space-20) auto var(--space-32); }
/* The pill container is 52px but the input's own box was only ~26px tall —
   grow the input so a tap anywhere near the text lands in the field. */
.taf-404__search input { height: var(--space-44); } /* 44px tap target */
/* Kadence's .content-wrap/.entry-content-wrap chrome around the 404 body: keep
   the canvas plain milk like every other band. */
body.error404 .content-wrap .taf-404,
body.error404 section.error.taf-404 { background: transparent; border: none; box-shadow: none; }

/* body.search-results ul#archive-container — rationale: docs/design/css-rationale/main.css.md#body-search-results-ul-archive-container */
body.search-results ul#archive-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16) var(--space-16);
  list-style: none; margin: var(--space-24) 0 0; padding: 0;
}
body.search-results li.entry-list-item { margin: 0; }
body.search-results article.loop-entry {
  background: transparent; border: none; box-shadow: none;
  overflow: visible; height: auto;
}

/* body.search-results .pagination .nav-links, body.search-re… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#body-search-results-pagination-nav-links-body-search-results */

/* Pagination: real links styled as chips (same treatment as the most-loved
   pagination, applied to Kadence's .nav-links markup). */
body.search-results .pagination .nav-links,
body.search-results nav.pagination .page-numbers { margin: 0; }
body.search-results nav.pagination { margin: var(--space-24) 0 0; }
body.search-results nav.pagination .nav-links {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--space-8);
}
body.search-results nav.pagination .page-numbers {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex; align-items: center; gap: var(--space-6);
  min-height: 44px; padding: var(--space-8) var(--space-14); /* 44px tap target */
  border: var(--bw-15) solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-surface); color: var(--text-body);
  font-size: var(--fs-15); font-weight: var(--w-semibold); text-decoration: none;
  white-space: nowrap;
}
body.search-results nav.pagination a.page-numbers:hover,
body.search-results nav.pagination a.page-numbers:focus-visible {
  border-color: var(--accent); color: var(--accent);
}
body.search-results nav.pagination .page-numbers.current {
  background: var(--chocolate); border-color: var(--chocolate); color: var(--milk);
}
body.search-results nav.pagination .page-numbers.dots {
  border: none; background: transparent; padding: var(--space-8) var(--space-4); min-height: 0;
  color: var(--text-muted);
}

/* .taf-most-loved .page-numbers:not(.dots), .taf-cat-archive… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-most-loved-page-numbers-not-dots-taf-cat-archive-nav-lin */
.taf-most-loved .page-numbers:not(.dots),
.taf-cat-archive .nav-links .page-numbers:not(.dots),
body.search-results nav.pagination .page-numbers:not(.dots) {
  min-width: var(--space-44); /* 44px tap target */
  justify-content: center;
}

/* Empty state (taf2026_search_empty_state) + Kadence's native "nothing matched"
   notice above it. */
/* (search-no-results added 2026-07-17: section.error only renders on the no-results
   body class, so the search-results-only selectors never matched it.) */
body.search-results section.error .page-content,
body.search-no-results section.error .page-content { background: transparent; padding: 0; }
body.search-results section.error form.search-form,
body.search-no-results section.error form.search-form { max-width: 480px; margin-top: var(--space-16); }
.taf-search-empty { margin-top: var(--space-24); }

/* body.error404 form.search-form, body.search-results form.s… — rationale: docs/design/css-rationale/main.css.md#body-error404-form-search-form-body-search-results-form-sear */
body.error404 form.search-form,
body.search-results form.search-form,
body.search-no-results form.search-form {
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--bg-surface);
  border: var(--bw-15) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-16);
}
body.error404 form.search-form label,
body.search-results form.search-form label,
body.search-no-results form.search-form label { flex: 1; min-width: 0; }
body.error404 form.search-form .search-field,
body.search-results form.search-form .search-field,
body.search-no-results form.search-form .search-field {
  width: 100%; border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: var(--fs-16); color: var(--text-body);
  padding: var(--space-8) 0; min-width: 0;
}
body.error404 form.search-form .search-field::placeholder,
body.search-results form.search-form .search-field::placeholder,
body.search-no-results form.search-form .search-field::placeholder { color: var(--text-muted); opacity: var(--o-1); }
body.error404 form.search-form .search-submit,
body.search-results form.search-form .search-submit,
body.search-no-results form.search-form .search-submit {
  /* position/width override Kadence's fixed ~50px icon-button geometry, which
     clipped the label to "Sear" under the magnifier (verified 390, v0.30.1) */
  position: static; width: auto; min-width: 80px;
  height: 40px; padding: 0 var(--space-16); border: none;
  border-radius: var(--radius-sm);
  background: var(--accent); color: var(--color-on-accent);
  font-weight: var(--w-bold); font-size: var(--fs-15); cursor: pointer;
}
body.error404 form.search-form .kadence-search-icon-wrap,
body.search-results form.search-form .kadence-search-icon-wrap,
body.search-no-results form.search-form .kadence-search-icon-wrap { display: none; /* it overlaid the now-labeled submit */ }
body.error404 form.search-form .search-submit:hover,
body.search-results form.search-form .search-submit:hover,
body.search-no-results form.search-form .search-submit:hover { background: var(--accent-hover); }
/* Container-level focus ring: the field suppresses its own outline above, so the
   pill needs the search-scoped rose ring (same rationale as .taf-searchbar). */
body.search-results .search-form:focus-within,
body.search-no-results .search-form:focus-within {
  outline: var(--focus-ring) solid var(--rose); outline-offset: 2px; /* search = rose, see .taf-search rule */
}

/* ---- Desktop (900px) ---- */
@media (min-width: 900px) {
  .taf-404 { padding-top: var(--space-32); }
  .taf-404__title { font-size: var(--fs-42); }
  body.search-results ul#archive-container { grid-template-columns: repeat(4, 1fr); gap: var(--space-20); }
}

/* .main-navigation a, .header-navigation a — rationale: docs/design/css-rationale/main.css.md#main-navigation-a-header-navigation-a */

/* The live desktop nav is Kadence's .main-navigation a (.taf-nav is not in the
   DOM). Equal specificity, later source order. */
.main-navigation a,
.header-navigation a { font-family: var(--display); font-size: var(--fs-15); font-weight: var(--w-semibold); color: var(--chocolate); }
.main-navigation a:hover,
.header-navigation a:hover { color: var(--accent); }

/* Kit embed: ConvertKit's inline formkit CSS (a .formkit-form[data-uid] rule at 0,3,0
   plus an element-level inline style) wins over the .taf-btn spec, so !important is
   required. */
.formkit-form .formkit-submit { font-size: var(--fs-16) !important; font-weight: var(--w-bold) !important; }
.formkit-form .formkit-input { font-size: var(--fs-16) !important; color: var(--chocolate) !important; }

/* The "Browse all bread recipes" wrapper carries taf-btn--secondary WITHOUT taf-btn, so
   the bridge (which keys on .taf-btn) never set its type. */
.wp-block-button.taf-btn--secondary .wp-block-button__link { font-size: var(--fs-16); font-weight: var(--w-bold); }

/* Tile titles take no display tracking (the link inherited -0.01em from
   .taf-tile .t). */
.taf-tile .t a { letter-spacing: normal; }

/* Footer legal links match the 12px legal line (they inherited the 15px column-
   link size). */
.taf-footer .legal a { font-size: var(--fs-12); }

/* Mobile hero H1. Scoped to .home so the recipe-index hero keeps the token size. */
.home .taf-hero-title { font-size: var(--fs-36); }

@media (min-width: 900px) {
  /* Desktop hero H1: line-height needs !important to beat the heading counter;
     .home .taf-hero .taf-hero-title (0,3,0) out-specifies bare h1. */
  .home .taf-hero .taf-hero-title { font-size: var(--fs-54); line-height: var(--lh-108) !important; }

  /* The hero caption title is a <p>, so the h1–h6 counter never touches it and it
     kept the 1.65 body line-height. */
  .taf-hero-caption-title { line-height: var(--lh-115); }

  /* Magnet heading is 20px on desktop; mobile keeps the 22px base. */
  .taf-magnet h3 { font-size: var(--fs-20); }
}

/* .entry-content.single-content > .wp-block-group — rationale: docs/design/css-rationale/main.css.md#entry-content-single-content-wp-block-group */

/* .entry-content.single-content > .wp-block-group — rationale: docs/design/css-rationale/main.css.md#entry-content-single-content-wp-block-group-2 */
.entry-content.single-content > .wp-block-group { margin-bottom: 0; }

/* .home .taf-hero .taf-hero-copy — rationale: docs/design/css-rationale/main.css.md#home-taf-hero-taf-hero-copy */
.home .taf-hero .taf-hero-copy { margin-bottom: 0; }

/* Restore the magnet's own margins — Kadence's `.wp-block-group:last-child
   {margin-bottom:0}` (0,2,1) zeroed them. They collapse through the flush band to make
   its seams. */
.entry-content .taf-section > .taf-magnet { margin: var(--space-24) 0 var(--space-8); }

/* Mobile-only 28px page-bg gap above the full-bleed cream band (desktop bands are
   flush). 0,3,0 sets the band margin-top that Kadence pins to 0. */
@media (max-width: 899.98px) {
  .entry-content .wp-block-group.has-rose-milk-background-color { margin-top: var(--space-24); }
}

/* ---- Section-head → grid gap: `.taf-section-head{margin-bottom:16px}` (0,1,0) was
   overridden to 32px by the block-gap rule (0,2,0). Doubled class = 0,3,0. ---- */
.entry-content .taf-section-head.taf-section-head { margin-bottom: var(--space-16); }

/* .main-navigation .primary-menu-container > ul > li.menu-it… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#main-navigation-primary-menu-container-ul-li-menu-item-menu- */
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item > a { color: var(--chocolate); }
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.menu-item > a:focus-visible { color: var(--accent); }

/* ---- Footer labels take the BODY line-height. Beating the enqueue.php counter
   (`h1..h6{line-height:var(--lh-display)!important}`) needs specificity AND !important. ---- */
.taf-footer h2 { line-height: var(--lh-165) !important; }

/* ---- Hero H1 max-width: the `ch` cap resolves ~46px too wide on mobile (13ch = 274px
   vs 228px, collapsing 4 lines → 3). Pin the explicit box widths. ---- */
.home .taf-hero .taf-hero-title { max-width: 228px; }
@media (min-width: 900px) {
  .home .taf-hero .taf-hero-title { max-width: 432px; }
}

/* .entry-content .wp-block-group.alignfull.has-rose-milk-bac… — rationale: docs/design/css-rationale/main.css.md#entry-content-wp-block-group-alignfull-has-rose-milk-backgro */
.entry-content .wp-block-group.alignfull.has-rose-milk-background-color { padding: 0; }

/* .taf-magnet .formkit-form .formkit-fields — rationale: docs/design/css-rationale/main.css.md#taf-magnet-formkit-form-formkit-fields */
.taf-magnet .formkit-form .formkit-fields { flex-wrap: nowrap !important; gap: var(--space-8); }
.taf-magnet .formkit-form .formkit-field  { flex: 1 1 auto !important; min-width: 0; }
.taf-magnet .formkit-form .formkit-submit { flex: 0 0 auto !important; width: auto !important; white-space: nowrap; }

/* ---- Hero search pill internal padding (mobile only — the inside-wrapper padding is
   zeroed above, so the text started flush to the border). 0,4,0 beats that 0,3,0. ---- */
@media (max-width: 899.98px) {
  .home .taf-hero .taf-search .wp-block-search__inside-wrapper {
    padding-left: var(--space-16);
    padding-right: var(--space-8);
  }
}

/* ======================
   About page (body.page-id-21) overrides.
   ====================== */

/* body.page-id-21 .content-area — rationale: docs/design/css-rationale/main.css.md#body-page-id-21-content-area */
body.page-id-21 .content-area { margin-top: 0; margin-bottom: 0; }
body.page-id-21 .content-container.site-container { padding-left: 0; padding-right: 0; }
body.page-id-21 .entry-content-wrap { padding: 0; }
/* Doubled class (0,3,1) out-specifies Feast's boxed -16px margin (0,3,0). */
body.page-id-21 article.single-entry.single-entry { margin-left: 0; margin-right: 0; }

/* ---- 22px above and below the "why" callout (about-story.php, unreferenced). ---- */
body.page-id-21 .taf-about-story .taf-callout--why {
  margin-top: var(--space-20); margin-bottom: var(--space-20);
}

/* ---- Stat numerals carry the display tracking (about-story.php, unreferenced). ---- */
body.page-id-21 .taf-about-stat__num { letter-spacing: var(--ls--001em); }

/* ---- About tightens the footer top margin to 28px (system default is 40px). ---- */
body.page-id-21 .taf-footer { margin-top: var(--space-24); }

/* .page-id-42733 .taf-section h2.wp-block-heading — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#page-id-42733-taf-section-h2-wp-block-heading */

/* ======================
   Recipe-index + category archive overrides.
   ====================== */

/* --- INDEX: section headings. --fs-h2 covers both breakpoints (24px mobile /
   30px ≥900px). Scoped to the recipe-index page so other section headings are
   untouched. */
.page-id-42733 .taf-section h2.wp-block-heading {
  font-size: var(--fs-h2);
  font-weight: var(--w-semibold);
}

/* --- INDEX + CATEGORY: recipe-tile titles and the count meta take no display
   tracking (they inherited -0.01em from --ls-display). */
.taf-tile .t,
.t.wp-block-post-title,
p.t,
.taf-meta {
  letter-spacing: normal;
}

/* .t.wp-block-post-title — rationale: docs/design/css-rationale/main.css.md#t-wp-block-post-title */
.t.wp-block-post-title {
  line-height: var(--lh-115) !important;
}

/* --- INDEX: category-tile row gap. Kadence's block-gap (0,2,0) added a 32px tile
   margin-bottom ON TOP of the 16px grid gap. Needs > (0,2,0). */
.page-id-42733 .taf-tile.taf-tile--cat {
  margin-bottom: 0;
}

/* --- INDEX: hero H1 spans the full content box (it inherited the home hero's ch cap +
   auto side margins). .taf-ri-hero keeps the home hero untouched. */
.taf-ri-hero .taf-hero-title {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --- INDEX: hero H1 → search gap. */
.taf-ri-hero .taf-search {
  margin-top: 0;
}

/* --- INDEX: the browse band tucks under the hero. It is the .taf-section
   immediately after the hero. */
.taf-ri-hero + .taf-section {
  padding-top: var(--space-20);
}

/* .taf-magnet .taf-eyebrow — rationale: docs/design/css-rationale/main.css.md#taf-magnet-taf-eyebrow */
.taf-magnet .taf-eyebrow {
  max-width: none;
}

/* --- CATEGORY: the magnet heading is a flat 22px at all widths (the ≥900px rule
   below steps it to 20px on home only). */
.taf-magnet h3 {
  font-size: var(--fs-24);
}

/* ======================
   Typography + geometry pass.
   ====================== */

/* .taf-magnet .taf-eyebrow, .taf-about-close .taf-eyebrow — rationale: docs/design/css-rationale/main.css.md#taf-magnet-taf-eyebrow-taf-about-close-taf-eyebrow */
.taf-magnet .taf-eyebrow,
.taf-about-close .taf-eyebrow { font-size: var(--fs-15); }

/* Home magnet h3 steps down to 20px on desktop; mobile keeps 22px. Scoped to .home so the
   about magnet (22px) is untouched. */
@media (min-width: 900px) {
  .home .taf-magnet h3 { font-size: var(--fs-20); }
}

/* Category archive H1: 30px mobile / 42px desktop. .taf-cat-title only exists on the
   category archive, so this is inherently scoped. */
.taf-cat-title { font-size: var(--fs-30); line-height: var(--lh-115); letter-spacing: var(--ls--001em); }
@media (min-width: 900px) {
  .taf-cat-title { font-size: var(--fs-42); }
}

/* .taf-faq summary h3, .taf-faq details summary h3 — rationale: docs/design/css-rationale/main.css.md#taf-faq-summary-h3-taf-faq-details-summary-h3 */
.taf-faq summary h3,
.taf-faq details summary h3 {
  font-family: var(--sans) !important;
  font-size: var(--fs-16);
  font-weight: var(--w-bold);
  line-height: var(--lh-165) !important;
  letter-spacing: normal;
}

/* Button + chip labels inherit the body line-height (1.65); the theme forces 1.6 on
   .wp-element-button links. The 2-class selector beats it. */
.wp-block-button .wp-block-button__link,
.taf-btn, .taf-chip { line-height: var(--lh-165); }

/* a.taf-post-meta__jump — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#a-taf-post-meta-jump */

/* a.taf-post-meta__jump — rationale: docs/design/css-rationale/main.css.md#a-taf-post-meta-jump-2 */

/* a.taf-post-meta__jump — rationale: docs/design/css-rationale/main.css.md#a-taf-post-meta-jump-3 */
a.taf-post-meta__jump { font-weight: var(--w-bold); }

/* .taf-tile .ph.ph — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-tile-ph-ph */

/* .taf-tile .ph.ph — rationale: docs/design/css-rationale/main.css.md#taf-tile-ph-ph-2 */
.taf-tile .ph.ph { margin-bottom: 0; }

/* ---- Section-head heading wrapper: the eyebrow+H2 sit in an unclassed nested
   .wp-block-group carrying the 32px block-gap, injecting dead space between the visible H2
   and whatever follows. */
.taf-section-head > .wp-block-group.is-layout-flow { margin-bottom: 0; }

/* ---- Bread band: pull the subhead's top margin to -12 against the 16px section-head
   bottom (collapse → 4px). Mobile-only — the desktop bread band has no subhead. */
@media (max-width: 899.98px) {
  .entry-content .has-rose-milk-background-color .taf-small.taf-muted { margin-top: -12px; } /* .home .taf-about-band figure.wp-block-image — rationale: docs/design/css-rationale/main.css.md#has-rose-milk-background-color-taf-grid-4 *//* token-exempt: a negative pull-up, not a scale step. calc(var(--space-N) * -1) is equivalent but unreadable, and css-parity compares text not computed values, so it cannot prove the equivalence anyway. */
}

/* ---- The avatar figure's 32px block-gap swallows the H2's 14px margin-top. */
.home .taf-about-band figure.wp-block-image { margin-bottom: 0; }

/* ---- The bio paragraph's 32px block-gap; the ghost CTA sits flush under it. */
.home .taf-about-band > p.taf-muted { margin-bottom: 0; }

/* body.page-id-21 .taf-about-stats .taf-about-stat.taf-about… — rationale: docs/design/css-rationale/main.css.md#body-page-id-21-taf-about-stats-taf-about-stat-taf-about-sta */

/* Stat-cell row gap = the grid row-gap alone; each cell is a wp-block-group carrying the
   32px block-gap on top of it. */
body.page-id-21 .taf-about-stats .taf-about-stat.taf-about-stat { margin-bottom: 0; }

/* (The kitchen-card gap neutralizer was deleted 2026-08-04 with the v3 rebuild —
   .taf-about-cards / .taf-about-card have no consumer left.) */

/* The stats band's OWN bottom margin. */
body.page-id-21 .taf-about-stats.taf-about-stats { margin-bottom: var(--space-20); }

/* The email form sits in a nested wp-block-group whose 32px block-gap swallows the fine
   print's 10px margin-top. */
body.page-id-21 .taf-magnet .wp-block-group:has(+ .fine) { margin-bottom: 0; }

/* ======================
   Recipe index — section headings leak the wp-block-heading default 6px top margin.
   ====================== */
.page-id-42733 .taf-section-head h2.wp-block-heading { margin-top: 0; }

/* .taf-tile > .t, .taf-tile > h3.t — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-tile-t-taf-tile-h3-t */

/* ---- Tile title: the title <p.t> carries the 32px block-gap as bottom margin —
   zero it so the grid row-gap alone spaces rows (tile stars are retired, D5-C). */
.taf-tile > .t,
.taf-tile > h3.t { margin-bottom: 0; }

/* .taf-tile.taf-tile — rationale: docs/design/css-rationale/main.css.md#taf-tile-taf-tile */
.taf-tile.taf-tile { margin-bottom: 0; }

/* .taf-magnet .wp-block-group:has(+ .fine) — rationale: docs/design/css-rationale/main.css.md#taf-magnet-wp-block-group-has-fine */
.taf-magnet .wp-block-group:has(+ .fine) { margin-top: var(--space-16); margin-bottom: 0; }

/* .taf-magnet .seva-form — rationale: docs/design/css-rationale/main.css.md#taf-magnet-seva-form */
.taf-magnet .seva-form { margin-bottom: 0 !important; }

/* ---- Hero subhead → search: the subhead's 32px block-gap dominates the search's 20px
   margin-top. */
.taf-hero p:has(+ .taf-search) { margin-bottom: 0; }

/* .taf-grid-4:has(+ .wp-block-buttons.taf-hide-desktop) — rationale: docs/design/css-rationale/main.css.md#taf-grid-4-has-wp-block-buttons-taf-hide-desktop */
.taf-grid-4:has(+ .wp-block-buttons.taf-hide-desktop) { margin-bottom: 0; }
.wp-block-buttons.taf-hide-desktop { margin-top: var(--space-16); }

/* ---- The footer brand <p> picks up a 22px top margin; the footer's padding-top gives the
   space. */
.taf-footer .taf-brand { margin-top: 0; }

/* ---- The footer keeps its 90px bottom padding at all widths (sticky-ad clearance); the
   desktop override above dropped it to 44px. */
/* @media (min-width: 900px) — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#media-min-width-900px */
@media (min-width: 900px) { .taf-footer { padding-bottom: var(--space-90); } }

/* ---- About FAQ: 18px horizontal inset on the summary and the answer so they align. (The
   design also wraps the FAQ in a bordered card; the theme renders it flush by choice.) ---- */
.taf-faq summary { padding-left: var(--space-16); padding-right: var(--space-16); }
.taf-faq details > div { padding-left: var(--space-16); padding-right: var(--space-16); }

/* (The .taf-about-card thumbnail flex-basis pin was deleted 2026-08-04 with the
   v3 rebuild — the card component it rescued has no consumer left.) */

/* body — rationale: docs/design/css-rationale/main.css.md#body */
body { font-family: var(--sans) !important; }

/* ---- The search "Go" button intentionally stays on var(--sans) (it inherits the design sans
   via the theme's `button{font:inherit}` reset). Do not "fix" it to a UA default. ---- */

/* Magnet Kit submit → brand rose, pinned in theme CSS so it holds regardless of the
   ConvertKit form's own button color. Remove this block to defer to the Kit setting. */
.taf-magnet .formkit-submit,
.taf-magnet button[type="submit"] {
  background-color: var(--accent) !important;
  color: var(--color-on-accent) !important;
}
.taf-magnet .formkit-submit:hover,
.taf-magnet button[type="submit"]:hover {
  background-color: var(--accent-hover) !important;
}

/* Hero search input + "Go" button: line-height back to UA `normal` — the theme's
   1.6 nudges the placeholder's vertical centering. */
.taf-hero .wp-block-search__input,
.taf-hero .wp-block-search__button { line-height: normal; }

/* The long placeholder clipped mid-character at the field edge on narrow phones. Truncate
   with an ellipsis and keep an 8px gap before the Go button. */
.taf-hero .wp-block-search__input {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: var(--space-8);
}

/* .taf-cat-eyebrow — rationale: docs/design/css-rationale/main.css.md#taf-cat-eyebrow */
.taf-cat-eyebrow {
  margin: 0 0 var(--space-8);
}

/* .taf-ph — rationale: docs/design/css-rationale/main.css.md#taf-ph */

/* ---- shared home helpers ---- */
.taf-ph { background: var(--line); display: block; }        /* photo placeholder fill */
.taf-i { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

/* shared cook/bake-time meta (used instead of star ratings on the home — clock
   icon + time; inherits its parent's color so it works on cream and dark scrims) */
.taf-time { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--display); font-size: var(--fs-13); line-height: var(--lh-13); }
.taf-time .taf-i { width: 14px; height: 14px; opacity: var(--o-9); }

.taf-secthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-20); }
.taf-secthead h2 { font-size: var(--fs-30); margin: 0; }
.taf-more { margin: 0; }
.taf-more a { font-family: var(--display); font-size: var(--fs-15); font-weight: var(--w-semibold); white-space: nowrap; }

.taf-tilegrid { display: grid; gap: var(--space-20); }
.taf-tilegrid--4 { grid-template-columns: repeat(4, 1fr); }
.taf-tilegrid--3 { grid-template-columns: repeat(3, 1fr); }

/* whole-tile card (baking + mithai side tiles) */
.taf-tilecard { text-decoration: none; color: inherit; display: block; }
.taf-tilecard__img { width: 100%; aspect-ratio: var(--ar-4-5); border-radius: var(--radius); overflow: hidden; object-fit: cover; transition: box-shadow var(--speed) var(--ease); }
.taf-tilecard__title { font-family: var(--display); font-size: var(--fs-17); line-height: var(--lh-115); margin: var(--space-8) 0 0; }
.taf-tilecard__meta { font-family: var(--display); font-size: var(--fs-13); color: var(--cocoa); margin: var(--space-4) 0 0; }
.taf-tilecard:hover .taf-tilecard__img { box-shadow: var(--shadow-hover); }
.taf-tilecard:hover .taf-tilecard__title { text-decoration: underline; text-underline-offset: 3px; }
/* .taf-tilecard__img — rationale: docs/design/css-rationale/main.css.md#taf-tilecard-img */
.taf-tilecard__img { position: relative; }
.taf-tilecard__img::before {
  content: ""; position: absolute; inset: 0;
  background-image: inherit; background-size: cover; background-position: center;
  transition: transform var(--dur-35) var(--ease);
}
.taf-tilecard__img > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-35) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .taf-tilecard:hover .taf-tilecard__img::before,
  .taf-tilecard:hover .taf-tilecard__img > img { transform: scale(1.04); }
}

/* ---- Header helpers (the Kadence header carries these classes) ---- */
/* .taf-hdr-cta a, a.taf-hdr-cta, a.button.header-button.butt… — rationale: docs/design/css-rationale/main.css.md#taf-hdr-cta-a-a-taf-hdr-cta-a-button-header-button-button-st */
.taf-hdr-cta a, a.taf-hdr-cta,
a.button.header-button.button-style-filled {
  background: var(--accent); color: var(--color-on-accent); font-family: var(--display); font-size: var(--fs-15); font-weight: var(--w-semibold);
  padding: var(--space-12) var(--space-16); border-radius: var(--radius-sm); text-decoration: none;
  white-space: nowrap; display: inline-block; border: none;
  transition: background var(--speed) var(--ease);
}
.taf-hdr-cta a:hover, a.taf-hdr-cta:hover,
a.button.header-button.button-style-filled:hover {
  background: var(--accent-hover); color: var(--color-on-accent);
}
/* Search icon: 44px tap target, ~20px glyph, rose on hover. */
.taf-hdr-search { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--chocolate); background: transparent; border: none; cursor: pointer; transition: color var(--speed) var(--ease); }
.taf-hdr-search:hover { color: var(--accent); }
.taf-hdr-search .taf-i, .taf-hdr-search svg { width: 20px; height: 20px; }

/* Hide the redundant text site-title beside the wordmark logo — the logo's alt
   text carries the site name. */
.site-branding .site-title { display: none; }

/* .site-branding .custom-logo, #main-header .custom-logo, .s… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#site-branding-custom-logo-main-header-custom-logo-site-mobil */
.site-branding .custom-logo,
#main-header .custom-logo,
.site-mobile-header-wrap .custom-logo {
  height: 52px !important;      /* mobile: 60px row */
  width: auto !important;
  max-width: none !important;
}
@media (min-width: 900px) {
  .site-branding .custom-logo,
  #main-header .custom-logo {
    height: 64px !important;    /* desktop: 72px row */
  }
}

/* #masthead — rationale: docs/design/css-rationale/main.css.md#masthead */
#masthead { position: sticky; top: 0; z-index: var(--z-99); }
/* translucent sticky header (overrides Kadence's solid #fff); no backdrop blur */
#masthead, #masthead .site-header-row-container-inner { background: var(--veil-80) !important; }
/* soft (non-blur) gradient fade at the sticky header's bottom edge, masked to
   fade out — a gentle separator with no blur */
#masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px;
  pointer-events: none; z-index: var(--z-98);
  background: linear-gradient(to bottom, var(--veil-55), var(--veil-0));
  /* token-exempt: mask-image alpha stops — black/transparent are the MASK channel, not design colors */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
/* Header search drawer: styled in the KADENCE SEARCH DRAWER block at the end of
   this file. */

/* #masthead .site-container — rationale: docs/design/css-rationale/main.css.md#masthead-site-container */
#masthead .site-container { max-width: calc(var(--maxw-wide) + 2 * var(--pad)); margin-left: auto; margin-right: auto; }

/* Recipes nav dropdown (Kadence .sub-menu) → Warm-Oven panel. See inc/nav-dropdown.php. */
.main-navigation ul.sub-menu {
  background: var(--paper);
  border: var(--bw-1) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0; overflow: hidden;
}
.main-navigation ul.sub-menu li.menu-item { border-bottom: var(--bw-1) solid var(--border-hairline); }
.main-navigation ul.sub-menu li.menu-item:last-child { border-bottom: none; }
.main-navigation ul.sub-menu li.menu-item > a {
  color: var(--chocolate); font-size: var(--fs-15); font-weight: var(--w-semibold);
  padding: var(--space-8) var(--space-16); background: transparent;
  transition: color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.main-navigation ul.sub-menu li.menu-item > a:hover,
.main-navigation ul.sub-menu li.menu-item > a:focus-visible {
  color: var(--accent); background: var(--cream);
}

/* ---- Section 2 hero: readers' #1 recipe ---- */
.taf-rhero { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-48) var(--pad) var(--space-48); display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-48); align-items: center; }
.taf-rhero__title { font-size: var(--fs-54); line-height: var(--lh-108); margin: var(--space-12) 0 var(--space-16); max-width: 14ch; }
/* Signature pink on the hero's accent phrase; the rest of the H1 stays chocolate,
   and the trailing period sits outside the span. */
.taf-rhero__accent { color: var(--rose); }
.taf-rhero__rating { font-size: var(--fs-15); margin: 0 0 var(--space-12); }
.taf-rhero__rating b { font-weight: var(--w-bold); }
.taf-rhero__lede { font-size: var(--fs-17); max-width: 42ch; margin: 0 0 var(--space-24); }
.taf-rhero__actions { display: flex; align-items: center; gap: var(--space-16); margin: 0; flex-wrap: wrap; }
.taf-cta { background: var(--rose); color: var(--color-on-accent); font-size: var(--fs-16); font-weight: var(--w-bold); padding: var(--space-12) var(--space-24); border-radius: var(--radius-sm); text-decoration: none; display: inline-block; transition: background var(--speed) var(--ease); }
.taf-cta:hover { background: var(--rose-deep); color: var(--color-on-accent); }
.taf-textlink { font-size: var(--fs-15); font-weight: var(--w-bold); }
.taf-rhero__media { position: relative; margin: 0; }
.taf-rhero__photo { position: relative; margin: 0; aspect-ratio: var(--ar-5-4); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--line); }
.taf-rhero__photo img { width: 100%; height: 100%; object-fit: cover; }
.taf-rhero__tag { position: absolute; top: 14px; left: 14px; margin: 0; background: var(--chocolate); color: var(--milk); font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-04em); padding: var(--space-4) var(--space-12); border-radius: var(--radius-sm); z-index: var(--z-2); }
/* kill the WP block-image default 32px figure margin (it pushed the hero CTA far
   below the photo on mobile) */
.entry-content .taf-rhero__media .taf-rhero__photo { margin: 0 !important; }

/* ---- Hero responsive ----
   Tablet (700-899px): keep 2 columns, shrink the H1 and gap so the copy column doesn't cramp
   and the photo stays a side column. Phones (<700px): stack + center. */
@media (min-width: 700px) and (max-width: 899.98px) {
  .taf-rhero { padding: var(--space-32) var(--pad) var(--space-40); gap: var(--space-32); }
  .taf-rhero__title { font-size: var(--fs-36); }
  .entry-content .taf-rhero__title { margin: var(--space-4) 0 var(--space-12); }
  .entry-content .taf-rhero__rating { margin: 0 0 var(--space-12); }
  .taf-rhero__lede { display: none; }
}
@media (max-width: 699.98px) {
  .taf-rhero { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24) var(--pad) var(--space-16); text-align: center; }
  .taf-rhero__copy { display: contents; }
  .taf-rhero .taf-eyebrow { order: 1; margin: 0; }
  .taf-rhero__title { order: 2; font-size: var(--fs-36); max-width: none; }
  .entry-content .taf-rhero__title { margin: 0 auto; }
  .taf-rhero__rating { order: 3; margin: 0; }
  .entry-content .taf-rhero__rating { margin: 0; }
  .taf-rhero__lede { order: 4; max-width: none; margin: 0 auto; }
  .taf-rhero__media { order: 5; }
  .taf-rhero__actions { order: 6; justify-content: center; margin: 0; }
  .taf-rhero__rating .taf-time { justify-content: center; }
  .taf-cta { width: 100%; text-align: center; }
  .taf-rhero__photo { aspect-ratio: var(--ar-4-34); }
}

/* ---- Section 3 category band ---- */
.taf-catband { padding: var(--space-40) var(--pad) var(--space-48); }
.taf-catband__inner { max-width: var(--maxw-wide); margin: 0 auto; }
.taf-catband__title { font-size: var(--fs-30); text-align: center; margin: 0; }
/* Circles wrap into even, centered rows (flex-wrap + fixed-width items) — no horizontal
   scroller at any width. */
.taf-catrow { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-24) var(--space-16); margin-top: var(--space-24); }
.taf-cat { width: 150px; text-decoration: none; color: var(--chocolate); text-align: center; display: block; transition: transform var(--dur-2) var(--ease); }
/* Category circle photos carry no white ring (the paper border is deliberately
   removed). Keep radius/shadow. */
.taf-cat__img { width: 150px; height: 150px; border-radius: var(--radius-round); object-fit: cover; margin: 0 auto var(--space-8); box-shadow: var(--shadow); }

.taf-cat__img--all .taf-i { width: 26px; height: 26px; }
/* Tight leading so the category NAME sits right above the COUNT (no airy gap). */
.taf-cat__label { display: block; font-size: var(--fs-15); font-weight: var(--w-bold); line-height: var(--lh-12); margin-bottom: var(--space-2); }
/* Hover lift: the whole circle group rises 4px and the photo shadow deepens. */
.taf-cat:hover { transform: translateY(-4px); }
.taf-cat:hover .taf-cat__img { box-shadow: var(--shadow-hover); }
.taf-cat:hover .taf-cat__label { color: var(--rose-deep); }

/* Tablet + mobile (≤1024): the 6-up row collapses to two FLUID rows of 3 that
   resize with the viewport instead of a fixed size; the hero lede is dropped. */
/* @media (max-width: 1024px) — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#media-max-width-1024px */
@media (max-width: 1024px) {
  .entry-content .taf-rhero__lede, .taf-rhero__lede { display: none; }
  .taf-catrow { gap: var(--space-20) var(--space-16); margin-top: var(--space-24); }
  .taf-cat { width: calc((100% - 34px) / 3); }
  .taf-cat__img, .taf-cat__img--all { width: 100%; height: auto; aspect-ratio: var(--ar-1-1); }
  /* Phones: the CTA drops under the search box and goes full-width. */
  .taf-searchrow { flex-direction: column; gap: var(--space-8); }
  .taf-searchrow__cta { width: 100%; justify-content: center; }
}
/* .taf-searchwrap — rationale: docs/design/css-rationale/main.css.md#taf-searchwrap */
.taf-searchwrap { width: 100%; max-width: 940px; margin: var(--space-32) auto 0; scroll-margin-top: 96px; }
.taf-searchrow { display: flex; align-items: stretch; justify-content: center; gap: var(--space-12); }
.taf-searchrow .taf-searchbar { flex: 1 1 auto; max-width: 680px; }
/* Chocolate fill, deliberately NOT rose: the rose Search button beside it stays the band's
   primary action. */
.taf-searchrow__cta {
  flex: 0 0 auto; height: 56px; padding: 0 var(--space-24); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-8);
  background: var(--chocolate); color: var(--color-on-dark); border: none;
  transition: background var(--speed) var(--ease);
}
.taf-searchrow__cta:hover { background: var(--chocolate-hover); color: var(--color-on-dark); }
.taf-searchrow__cta svg { width: 18px; height: 18px; }
.taf-searchbar { display: flex; align-items: center; gap: var(--space-8); background: var(--paper); border: none; border-radius: var(--radius); height: 56px; padding: 0 var(--space-8) 0 var(--space-20); box-shadow: var(--shadow); }
/* .taf-searchbar:focus-within — rationale: docs/design/css-rationale/main.css.md#taf-searchbar-focus-within */
.taf-searchbar:focus-within { outline: var(--focus-ring) solid var(--rose); outline-offset: 2px; } /* search = rose, see .taf-search rule */
.taf-searchbar__icon { width: 18px; height: 18px; color: var(--cocoa); }
.taf-searchbar__input { flex: 1; min-width: 0; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; font-size: var(--fs-16); color: var(--chocolate); }
.taf-searchbar__input::placeholder { color: var(--cocoa); }
.taf-searchbar__btn { background: var(--rose); color: var(--color-on-accent); font-size: var(--fs-15); font-weight: var(--w-bold); padding: var(--space-12) var(--space-20); border-radius: var(--radius-sm); border: none; cursor: pointer; white-space: nowrap; transition: background var(--speed) var(--ease); }
.taf-searchbar__btn:hover { background: var(--rose-deep); }
.taf-popular { margin: var(--space-8) 0 0; text-align: center; font-size: var(--fs-13); color: var(--cocoa); }
.taf-popular a { font-weight: var(--w-bold); }

/* .taf-ac-anchor — rationale: docs/design/css-rationale/main.css.md#taf-ac-anchor */
.taf-ac-anchor { position: relative; }
.taf-ac {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  right: 0;
  /* token-exempt: layered above the drawer (49) and jump pill (60); the theme has no z-scale tokens */
  z-index: 70;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);  /* the elevated tier — the panel floats over content */
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: var(--space-8);
  /* .taf-ac — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-ac */
  text-align: left;
}
/* .taf-ac ul.taf-ac__list — rationale: docs/design/css-rationale/main.css.md#taf-ac-ul-taf-ac-list */
.taf-ac ul.taf-ac__list { list-style: none; margin: 0; padding: 0; }
.taf-ac ul.taf-ac__list > li { margin: 0; }
.taf-ac__row a {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-8); min-height: 56px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--chocolate);
}
/* .taf-ac__row a:hover, .taf-ac__row a[aria-selected="true"] — rationale: docs/design/css-rationale/main.css.md#taf-ac-row-a-hover-taf-ac-row-a-aria-selected-true */
.taf-ac__row a:hover, .taf-ac__row a[aria-selected="true"] { background: var(--rose-tint); }
.taf-ac__thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--rose-tint); }
.taf-ac__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.taf-ac__title { font-size: var(--fs-15); font-weight: var(--w-semibold); line-height: var(--lh-13); }
.taf-ac__title mark {
  background: var(--rose-tint); color: var(--rose-deep);
  border-radius: 2px; padding: 0 1px; /* token-exempt: hairline mark-highlight metrics, sub-token scale */
}
.taf-ac__meta { font-size: var(--fs-12); color: var(--cocoa); }
.taf-ac__all a { color: var(--rose); font-weight: var(--w-bold); text-decoration: none; padding: var(--space-12) var(--space-8); font-size: var(--fs-14); min-height: 44px; display: flex; align-items: center; border-radius: var(--radius-sm); }
/* .taf-ac__all a:hover, .taf-ac__all a:focus-visible, .taf-a… — rationale: docs/design/css-rationale/main.css.md#taf-ac-all-a-hover-taf-ac-all-a-focus-visible-taf-ac-all-a-a */
.taf-ac__all a:hover, .taf-ac__all a:focus-visible,
.taf-ac__all a[aria-selected="true"] { background: var(--rose-tint); }

/* .taf-recent — rationale: docs/design/css-rationale/main.css.md#taf-recent */
/* .taf-recent — rationale: docs/design/css-rationale/main.css.md#taf-recent-2 */
.taf-recent {
  margin: var(--space-32) 0 var(--space-32);
}
/* .taf-recent__title — rationale: docs/design/css-rationale/main.css.md#taf-recent-title */
.taf-recent__title {
  font-family: var(--display); font-size: var(--fs-24); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-display); color: var(--chocolate);
  margin: 0 0 var(--space-20);
  padding: 0; border: 0; /* not a content h2 — no section hairline */
}
.taf-recent__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20) var(--space-16); }
.taf-recent__tile { display: block; color: var(--chocolate); text-decoration: none; min-width: 0; }
.taf-recent__imgwrap {
  display: block; aspect-ratio: var(--ar-4-5);
  border-radius: var(--radius); overflow: hidden; background: var(--rose-tint);
  transition: box-shadow var(--speed) var(--ease);
}
.taf-recent__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); }
.taf-recent__t {
  display: block; margin-top: var(--space-8);
  font-family: var(--display); font-size: var(--fs-16); font-weight: var(--w-regular);
  line-height: var(--lh-13);
}
.taf-recent__tile:hover .taf-recent__t,
.taf-recent__tile:focus-visible .taf-recent__t { text-decoration: underline; text-underline-offset: 3px; }
.taf-recent__tile:hover .taf-recent__imgwrap { box-shadow: var(--shadow-hover); }
@media (min-width: 900px) {
  .taf-recent__grid { grid-template-columns: repeat(4, 1fr); }
  .taf-recent__title { font-size: var(--fs-30); }
}

/* .taf-more a, .taf-introcard__link a — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-more-a-taf-introcard-link-a */
.taf-more a,
.taf-introcard__link a { text-decoration: underline; }
.taf-popular a { text-decoration: none; }
.taf-more a:hover, .taf-more a:focus-visible,
.taf-popular a:hover, .taf-popular a:focus-visible,
.taf-introcard__link a:hover, .taf-introcard__link a:focus-visible { color: var(--rose-deep); }
.taf-popular a:hover, .taf-popular a:focus-visible { text-decoration: underline; }

/* .taf-more a, .taf-popular a, .taf-introcard__link a, .taf-… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-more-a-taf-popular-a-taf-introcard-link-a-taf-breadcrumb */
.taf-more a,
.taf-popular a,
.taf-introcard__link a,
.taf-breadcrumbs a,
.taf-post-meta__byline a { position: relative; }
.taf-more a::after,
.taf-popular a::after,
.taf-introcard__link a::after,
.taf-breadcrumbs a::after,
.taf-post-meta__byline a::after {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: var(--space-44); transform: translateY(-50%); /* 44px tap target */
}

/* ---- Section 4 baking right now ---- */
.taf-baking { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-32) var(--pad) var(--space-8); } /* top 48->32: the short curated bands read gappy at 56px internal rhythm; 32 lands them on the page's 40px beat */

/* ---- Section 5 author intro card ---- */
.taf-introcard { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-40) var(--pad) var(--space-8); }
.taf-introcard__card { display: flex; gap: var(--space-24); align-items: center; background: var(--paper); border: var(--bw-1) solid var(--line); border-radius: var(--radius); padding: var(--space-24) var(--space-32); }
.taf-introcard__avatar { flex-shrink: 0; margin: 0; width: 132px; height: 132px; }
.taf-introcard__avatar img { width: 132px; height: 132px; border-radius: var(--radius-round); object-fit: cover; background: var(--line); }
.taf-introcard__body { flex: 1; }
.taf-introcard__body h2 { font-size: var(--fs-24); margin: 0 0 var(--space-8); }
.taf-introcard__body p { font-size: var(--fs-16); max-width: 64ch; margin: 0; }
.taf-introcard__link { margin: 0; white-space: nowrap; }
.taf-introcard__link a { font-size: var(--fs-15); font-weight: var(--w-bold); }

/* .taf-mosaic — rationale: docs/design/css-rationale/main.css.md#taf-mosaic */
/* .taf-mosaic — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-2 */
/* .taf-mosaic — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-3 */
.taf-mosaic { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-40) var(--pad) var(--space-40); }

/* .taf-mosaic__layout .taf-mosaic__tile--hero — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-layout-taf-mosaic-tile-hero */
/* .taf-mosaic__layout .taf-mosaic__tile--hero — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-mosaic-layout-taf-mosaic-tile-hero-2 */
.taf-mosaic__layout .taf-mosaic__tile--hero { min-height: 540px; }
/* One component. --hero only changes placement + type scale. */
.taf-mosaic__tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; }
/* The tile is the clipping box; the photo is an absolutely-filled <img> so it can
   never influence the grid tracks (and so object-fit can crop it to any cell). */
.taf-mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-35) var(--ease); }
/* Hover zoom: the theme's one photo-zoom (1.04 / .35s), same as the mithai hero,
   the tilecards and the seasonal hero. */
@media (hover: hover) and (pointer: fine) {
  .taf-mosaic__tile:hover .taf-mosaic__img { transform: scale(1.04); }
}
/* The global reduce block (above) kills the transition but not the transform, so
   the zoom would still SNAP. Kill the transform too. */
@media (prefers-reduced-motion: reduce) {
  .taf-mosaic__tile:hover .taf-mosaic__img { transform: none; }
}
.taf-mosaic__scrim { position: absolute; inset: 0; background: var(--scrim-mosaic); }
/* .taf-mosaic__rank — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-rank */
.taf-mosaic__rank { position: absolute; top: 14px; left: 14px; z-index: var(--z-2); background: var(--rose); color: var(--color-on-accent); font-family: var(--display); font-size: var(--fs-15); font-weight: var(--w-bold); line-height: var(--lh-1); padding: var(--space-8) var(--space-12); border-radius: var(--radius-pill); box-shadow: var(--shadow); }
/* The "#" is ornament, not content: it belongs to the chip, so the markup carries
   the bare numeral and CSS prepends the glyph at 75%. */
.taf-mosaic__rank::before { content: "#"; opacity: var(--o-75); }
.taf-mosaic__rank--sm { top: 10px; left: 10px; font-size: var(--fs-12); padding: var(--space-4) var(--space-8); }
.taf-mosaic__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-2); padding: var(--space-16); }
.taf-mosaic__title { display: block; font-family: var(--display); font-size: var(--fs-17); line-height: var(--lh-115); color: var(--color-on-scrim); }
/* .taf-time inherits colour, so the clock icon + time go white on the scrim. */
.taf-mosaic__meta { display: block; margin-top: var(--space-4); font-size: var(--fs-13); color: var(--color-on-scrim); opacity: var(--o-9); }
.taf-mosaic__tile--hero .taf-mosaic__cap { padding: var(--space-24); }
.taf-mosaic__tile--hero .taf-mosaic__title { font-size: var(--fs-24); }
.taf-mosaic__tile--hero .taf-mosaic__meta { margin-top: var(--space-4); }

/* .taf-mosaic__card — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-card */
/* Cards are plain .taf-scard (natural 4:3 photo + two-line title) exactly like
   the seahero satellites; position:relative anchors the rank pill. */
.taf-mosaic__card { position: relative; }

/* ---- Seasonal-hero feature card (was shared with Trending; now seahero-only) ---- */
.taf-scrimhero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-32); align-items: stretch; }
.taf-scrimhero__hero { position: relative; display: block; min-height: 420px; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; }
/* A real <img>: object-fit:cover reproduces the background-size:cover crop it
   replaced, on the same absolute box, so nothing moves. */
.taf-scrimhero__heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-35) var(--ease); }
/* Hover zoom: same treatment as the mithai hero / tilecards. */
@media (hover: hover) and (pointer: fine) {
  .taf-scrimhero__hero:hover .taf-scrimhero__heroimg { transform: scale(1.04); }
}
.taf-scrimhero__scrim { position: absolute; inset: 0; background: var(--scrim-seahero); }
/* .taf-scrimhero__herocap — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-scrimhero-herocap */
.taf-scrimhero__herocap { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-2); padding: var(--space-24); }
.taf-scrimhero__herotitle { display: block; font-family: var(--display); font-size: var(--fs-30); line-height: var(--lh-115); color: var(--color-on-scrim); }
.taf-scrimhero__herometa { display: block; margin-top: var(--space-4); font-size: var(--fs-15); color: var(--color-on-scrim); opacity: var(--o-9); }

/* ---- Section 7 collections ---- */
.taf-collections { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-32) var(--pad) var(--space-48); }
.taf-coll { display: block; background: var(--cream); border-radius: var(--radius); padding: var(--space-16); text-decoration: none; color: inherit; transition: box-shadow var(--speed) var(--ease); }
.taf-coll:hover { box-shadow: var(--shadow-hover); }
.taf-coll__montage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-8); aspect-ratio: var(--ar-16-10); }
/* .taf-coll__m — rationale: docs/design/css-rationale/main.css.md#taf-coll-m */
.taf-coll__m { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.taf-coll__m > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.taf-coll__m--tall { grid-row: span 2; }
/* .entry-content .taf-coll__title — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-coll-title */
/* An <h3> (subordinate to the section's <h2>); the .entry-content scope + these
   explicit values beat Kadence's .entry-content h3 defaults (size/weight/margin). */
.entry-content .taf-coll__title { display: block; font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-20); line-height: var(--lh-115); margin: var(--space-4) 0 0; }
/* .taf-coll__meta — rationale: docs/design/css-rationale/main.css.md#taf-coll-meta */
.taf-coll__meta {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
  overflow: hidden; font-size: var(--fs-13); color: var(--cocoa); margin-top: var(--space-4);
}
.taf-coll__cta { display: none; } /* desktop collage cards show the description; the CTA is the mobile row affordance */

/* ---- Section 8 email magnet band (Kit form restyle) ---- */
/* Direct token bg — do NOT rely on the `has-rose-tint-background-color` preset:
   --wp--preset--color--rose-tint is not reliably emitted (page-cache dependent). */
/* 2-column, LEFT-ALIGNED e-book magnet on the rose-tint ground: left column =
   eyebrow + headline + pitch; right column = the Kit form + fine print. Stacks to
   one column on mobile. */
.taf-magnetband { padding: var(--space-24) var(--pad); text-align: left; background-color: var(--rose-tint); }
.taf-magnetband__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); align-items: center; }
/* .entry-content .taf-magnetband__inner > *, .taf-magnetband… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-magnetband-inner-taf-magnetband-inner-entr */
.entry-content .taf-magnetband__inner > *,
.taf-magnetband__inner > *,
.entry-content .taf-introcard__card > *,
.taf-introcard__card > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.taf-magnetband__text, .taf-magnetband__aside { align-self: center; } /* balance the two columns vertically */
.taf-magnetband__text > :first-child { margin-top: 0; }
.taf-magnetband__aside > :last-child, .taf-magnetband__form :last-child { margin-bottom: 0; }
.taf-magnetband .taf-eyebrow { color: var(--rose-deep); }
.taf-magnetband__title { font-family: var(--display); font-weight: var(--w-bold); font-size: var(--fs-36); line-height: var(--lh-112); color: var(--chocolate); max-width: 22ch; margin: var(--space-8) 0 var(--space-12); text-align: left; }
.taf-magnetband__pitch { font-family: var(--sans); font-size: var(--fs-17); max-width: 46ch; margin: 0; color: var(--cocoa); text-align: left; }
.taf-magnetband__aside { display: block; }
.taf-magnetband__form { max-width: none; margin: 0; }
/* ConvertKit inline-form markup → design look */
.taf-magnetband__form .formkit-form,
.taf-magnetband__form form { max-width: none; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
/* Fields wrap: name + email share the first row; the submit (a sibling of the fields inside
   .formkit-fields) is forced onto its own full-width row via flex-basis:100%. */
.taf-magnetband__form .formkit-fields,
.taf-magnetband__form [data-element="fields"],
.taf-magnetband__form .seva-fields { display: flex; gap: var(--space-8); flex-wrap: wrap; margin: 0; }
/* name + email share ONE row (50/50); !important beats Kit's own full-width field CSS */
.taf-magnetband__form .formkit-field { flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; margin: 0 !important; }
/* radius uses !important: Kit prints its own inline <style> (in-body, so it wins
   the cascade tie) forcing 4px on the input + button. */
.taf-magnetband__form .formkit-input,
.taf-magnetband__form input[type="email"],
.taf-magnetband__form input[type="text"] { width: 100%; height: 52px; border-radius: var(--radius-sm) !important; border: var(--bw-15) solid var(--line); background: var(--paper); padding: 0 var(--space-16); font-size: var(--fs-16); box-shadow: none; }
.taf-magnetband__form .formkit-submit,
.taf-magnetband__form button[type="submit"],
.taf-magnetband__form button { flex: 1 1 100% !important; width: 100% !important; height: 50px; background: var(--rose); color: var(--color-on-accent); font-size: var(--fs-16); font-weight: var(--w-bold); padding: 0 var(--space-20); border-radius: var(--radius-sm) !important; border: none; cursor: pointer; white-space: nowrap; transition: background var(--speed) var(--ease); }
.taf-magnetband__form .formkit-submit:hover,
.taf-magnetband__form button:hover { background: var(--rose-deep); }
.taf-magnetband__form .formkit-submit > div,
.taf-magnetband__form .formkit-submit span { margin: 0; color: var(--color-on-accent); }
.taf-magnetband__form .formkit-header,
.taf-magnetband__form .formkit-subheader,
.taf-magnetband__form .formkit-guarantee,
.taf-magnetband__form [data-element="header"],
.taf-magnetband__form [data-element="subheader"],
.taf-magnetband__form [data-element="guarantee"],
.taf-magnetband__form .formkit-powered-by-convertkit-container,
.taf-magnetband__form .formkit-powered-by-convertkit { display: none !important; }

/* .taf-seahero — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-seahero */
.taf-seahero { border-bottom: var(--bw-1) solid var(--line); }
/* The alignfull background wrapper is zero-padded by the .has-background reset
   above; this restores the band's own padding at the same specificity. */
.entry-content .wp-block-group.alignfull.has-background.taf-seahero { padding: var(--space-48) var(--pad) var(--space-48); }
.taf-seahero__inner { max-width: var(--maxw-wide); margin: 0 auto; }
/* The head is NOT a single stacked column: the headline spans, then the intro sits
   LEFT and the CTA RIGHT on one line. Stacking them all left leaves the right half
   of the band empty. */
.taf-seahero__head { margin: 0 0 var(--space-24); }
.taf-seahero__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-32); flex-wrap: wrap;
}
.taf-seahero__row .taf-seahero__cta { flex: none; }
/* .taf-seahero__eyebrow — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-seahero-eyebrow */
.taf-seahero__eyebrow { display: flex; align-items: center; gap: var(--space-8); margin: 0; }
.taf-seahero__eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }
/* border-bottom/padding are zeroed deliberately: Kadence decorates content
   headings with a 1px #EEE underline, which drew a stray hairline between this
   headline and its intro line. */
.entry-content .taf-seahero__title,
.taf-seahero__title {
  font-family: var(--display); font-size: var(--fs-hero); font-weight: var(--w-bold);
  line-height: var(--lh-108); letter-spacing: var(--ls-display);
  /* .entry-content .taf-seahero__title, .taf-seahero__title — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-seahero-title-taf-seahero-title */
  margin: 0 0 var(--space-12); text-align: left;
  border-bottom: none; padding-bottom: 0;
}
.taf-seahero__title .taf-accent { color: var(--accent); }
/* .entry-content .taf-seahero__intro, .taf-seahero__intro — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-seahero-intro-taf-seahero-intro */
/* No max-width: the subtitle is written to run on ONE line beside the link (a ch
   cap is what forced it to wrap, not the copy length). */
.entry-content .taf-seahero__intro,
.taf-seahero__intro { font-size: var(--fs-20); line-height: var(--lh-155); color: var(--text-muted); margin: 0; }
/* The CTA is the same rose underlined link every 4-recipe band uses at its
   top-right (.taf-more), not a button — the hero photos carry the section. */
.entry-content .taf-seahero__cta,
.taf-seahero__cta { flex: 0 0 auto; margin: 0; }

/* Feature card: taller, bigger overlay title, lifted. */
.taf-seahero .taf-scrimhero__hero { min-height: 540px; box-shadow: var(--shadow); }
.taf-seahero .taf-scrimhero__herotitle { font-size: var(--fs-42); line-height: var(--lh-11); }
.taf-seahero .taf-scrimhero__herometa { font-size: var(--fs-15); }

/* The four supporting recipes are a 2x2 grid of PHOTO CARDS. Titles are held to a two-line box
   so all four cards line up whatever the recipe is called. */
.taf-seahero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
.taf-scard {
  display: flex; flex-direction: column;
  background: var(--paper); border: var(--bw-1) solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow var(--speed) var(--ease);
}
.taf-scard:hover { box-shadow: var(--shadow-hover); }
/* real <img>; object-fit:cover reproduces the background-size:cover crop */
.taf-scard__img { display: block; width: 100%; aspect-ratio: var(--ar-4-3); object-fit: cover; flex: none; }
.taf-scard__body { padding: var(--space-12) var(--space-16) var(--space-16); }
.taf-scard__title {
  display: block; font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-17);
  line-height: var(--lh-125); color: var(--text-body);
  /* two-line box: the four cards align even when a title runs short */
  min-height: calc(2 * 1.25em);
}
/* .taf-scard__meta (the time row) retired 2026-07-17: the photo gets
   the breathing space. Title keeps its two-line box so cards still align. */

@media (max-width: 899.98px) {
  .entry-content .wp-block-group.alignfull.has-background.taf-seahero { padding: var(--space-32) var(--pad) var(--space-32); }
  .taf-seahero__head { margin-bottom: var(--space-20); }
  .taf-seahero__row { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .taf-seahero__intro { font-size: var(--fs-17); }
  .taf-seahero .taf-scrimhero__hero { min-height: 320px; }
  .taf-seahero .taf-scrimhero__herotitle { font-size: var(--fs-30); }
  .taf-seahero__cards { gap: var(--space-12); }
  .taf-scard__body { padding: var(--space-12) var(--space-12) var(--space-12); }
  .taf-scard__title { font-size: var(--fs-15); }
}

/* .taf-spotlight-sec — rationale: docs/design/css-rationale/main.css.md#taf-spotlight-sec */
.taf-spotlight-sec { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-48) var(--pad) var(--space-8); }
.taf-spotlight {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  border: var(--bw-1) solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; background: var(--paper);
}
.taf-spotlight__copy {
  background: var(--cream); padding: var(--space-48) var(--space-40);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.taf-spotlight__copy .taf-eyebrow { color: var(--rose-deep); }
/* Two-class selector is deliberate: a global content-heading rule centres h2s, which left this
   title centred while its eyebrow and blurb sat left. A single class loses to it. */
.taf-spotlight__copy .taf-spotlight__title,
.entry-content .taf-spotlight__title { text-align: left; }
.taf-spotlight__title { font-size: var(--fs-42); line-height: var(--lh-115); margin: var(--space-8) 0 var(--space-12); }
.taf-spotlight__blurb { font-size: var(--fs-17); color: var(--text-muted); margin: 0 0 var(--space-20); max-width: 44ch; }
.taf-spotlight__pills { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-24); padding: 0; list-style: none; }
.taf-spotlight__pill {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex; align-items: center; min-height: var(--space-44); /* 44px tap target (was 36px — sanctioned bump, 2026-07-17) */
  background: var(--paper); border: var(--bw-1) solid var(--line); border-radius: var(--radius-99);
  padding: var(--space-8) var(--space-14); font-family: var(--display); font-size: var(--fs-15);
  color: var(--text-body); text-decoration: none;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.taf-spotlight__pill:hover { border-color: var(--accent); color: var(--accent); }
.taf-spotlight__media { position: relative; min-height: 420px; }
.taf-spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Section 9 mithai ---- */
/* ---- Feature band: one big scrim hero card + two standard tiles. The shape is
   generic and shared by the mithai and mango patterns — the topic is not. ---- */
.taf-featband { max-width: var(--maxw-wide); margin: 0 auto; padding: var(--space-48) var(--pad) var(--space-48); }
.taf-featband__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-20); align-items: stretch; }
.taf-featband__hero { position: relative; display: block; min-height: 0; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; }
.taf-featband__heroimg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--dur-35) var(--ease); }
/* Hover zoom: .taf-featband__hero is the overflow:hidden rounded box; the img
   layer scales inside it and crops within bounds (scrim/caption stay put). */
@media (hover: hover) and (pointer: fine) {
  .taf-featband__hero:hover .taf-featband__heroimg { transform: scale(1.04); }
}
.taf-featband__scrim { position: absolute; inset: 0; background: var(--scrim-featband); }
.taf-featband__herocap { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-2); padding: var(--space-24); }
.taf-featband__eyebrow { display: block; color: var(--color-on-scrim); font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-14em); text-transform: uppercase; opacity: var(--o-85); }
.taf-featband__herotitle { display: block; font-family: var(--display); font-size: var(--fs-24); line-height: var(--lh-115); color: var(--color-on-scrim); margin-top: var(--space-4); }
.taf-featband__herometa { display: block; margin-top: var(--space-4); font-size: var(--fs-15); color: var(--color-on-scrim); opacity: var(--o-85); }

/* ---- Section 10 footer ---- */
.taf-sitefooter { padding: var(--space-40) var(--pad); }
.taf-sitefooter__inner { max-width: var(--maxw-wide); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-40); }
.taf-sitefooter__wordmark { font-family: var(--display); font-size: var(--fs-20); color: var(--milk); margin: 0; }
.taf-sitefooter__blurb { font-size: var(--fs-15); color: var(--milk); opacity: var(--o-75); max-width: 30ch; margin: var(--space-8) 0 0; }
.taf-sitefooter__col { display: grid; gap: var(--space-8); align-content: start; }
.taf-sitefooter__label { font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-14em); text-transform: uppercase; color: var(--milk); opacity: var(--o-6); margin: 0 0 var(--space-4); }
.taf-sitefooter__col a { color: var(--milk); font-size: var(--fs-15); text-decoration: none; }
.taf-sitefooter__col a:hover { color: var(--milk); text-decoration: underline; }

/* .entry-content .wp-block-group.alignfull.has-background.ta… — rationale: docs/design/css-rationale/main.css.md#entry-content-wp-block-group-alignfull-has-background-taf-ca */

/* RC1 — band padding (base = desktop; <900 variants in the mobile layer below).
   0,5,0 / 0,4,0 beat WP has-background (0,3,0) and the rose-milk reset (0,4,0). */
.entry-content .wp-block-group.alignfull.has-background.taf-catband { padding: var(--space-40) var(--pad) var(--space-48); }
.entry-content .wp-block-group.has-background.taf-magnetband { padding: var(--space-24) var(--pad); }
/* .entry-content .wp-block-group.alignfull.has-background.ta… — rationale: docs/design/css-rationale/main.css.md#entry-content-wp-block-group-alignfull-has-background-taf-ma */
.entry-content .wp-block-group.alignfull.has-background.taf-mangoband { padding: var(--space-40) 0 var(--space-40); }
/* .taf-mangoband__inner — rationale: docs/design/css-rationale/main.css.md#taf-mangoband-inner */
.taf-mangoband__inner { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--pad); }
.entry-content .wp-block-group.taf-mangoband__inner { margin-top: 0; margin-bottom: 0; }
/* .entry-content .taf-mangoband .taf-secthead h2 — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-mangoband-taf-secthead-h2 */
.entry-content .taf-mangoband .taf-secthead h2 { border-bottom-color: var(--line); }

/* RC2 — Feast h2 counter: drop the hairline + padding, restore margin/text-align. */
.entry-content .taf-secthead h2,
.entry-content .taf-catband__title,
.entry-content .taf-introcard__body h2,
.entry-content .taf-magnetband__title { padding-bottom: 0; border-bottom: none; }
.entry-content .taf-secthead h2 { margin: 0; text-align: left; }
.entry-content .taf-catband__title { margin: 0; text-align: center; }
.entry-content .taf-introcard__body h2 { margin: 0 0 var(--space-8); text-align: left; }
.entry-content .taf-magnetband__title { margin: var(--space-8) 0 var(--space-12); text-align: left; }

/* RC3 — restore the margins the Kadence block spacing zeroed/inflated. */
.entry-content .taf-tilecard__title { margin: var(--space-8) 0 0; }
.entry-content .taf-tilecard__meta  { margin: var(--space-4) 0 0; }
.entry-content .taf-popular { margin: var(--space-8) 0 0; }
/* Kill the 32px block-spacing margin Kadence puts under the search FORM — it was
   the real source of the wide search→"Popular:" gap (the popular row's own 10px top
   margin now governs). */
.entry-content .taf-searchwrap form.taf-searchbar { margin-bottom: 0; }
.entry-content .taf-magnetband__pitch { margin: 0; }
.entry-content .wp-block-group.taf-magnetband__form { margin: 0; }
.entry-content .wp-block-group.taf-secthead { margin-bottom: var(--space-20); }

/* ======================
   HOME — mobile (< 900px)
   ====================== */
@media (max-width: 899.98px) {
  /* RC1 mobile band padding (out-specify the same WP block rules). */
  .entry-content .wp-block-group.alignfull.has-background.taf-catband { padding: var(--space-16) var(--pad) var(--space-16); margin-top: 0; } /* also kills the legacy rose-milk 28px margin-top */
  .entry-content .wp-block-group.has-background.taf-magnetband { padding: var(--space-24) var(--pad); }

  .taf-secthead h2 { font-size: var(--fs-24); }
  /* stack the section heading over its "more" link so a long link no longer squeezes
     the H2 into a 2-line wrap. */
  .taf-secthead { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .taf-catband__title { font-size: var(--fs-24); } /* match the sibling H2s */
  /* drive the heading→circles gap from the title's margin (the catrow's own
     margin-top is zeroed by a WP/Kadence rule on mobile) */
  .entry-content .taf-catband__title { margin-bottom: var(--space-24); }

  /* Hero responsive rules live in the dedicated hero media blocks near the
     .taf-rhero base rules, so the hero can stay 2-column on tablet and stack only
     below 700px. */

  /* category band: circles wrap into centered rows (no horizontal scroller) */
  .taf-catband { padding: var(--space-16) var(--pad) var(--space-16); } /* effective value set by the .has-background rule above */
  .taf-cat__label { font-size: var(--fs-13); }
  .taf-searchwrap { margin-top: var(--space-24); }
  .taf-searchbar { height: 52px; }

  /* tile grids */
  .taf-baking { padding: var(--space-16) var(--pad) var(--space-4); }
  .entry-content .wp-block-group.alignfull.has-background.taf-mangoband { padding: var(--space-24) 0 var(--space-24); }
  .taf-tilegrid--4 { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .taf-tilegrid--3 { grid-template-columns: 1fr; gap: var(--space-16); }

  /* intro card: compact */
  .taf-introcard { padding: var(--space-24) var(--pad) var(--space-4); }
  .taf-introcard__card { gap: var(--space-16); padding: var(--space-16) var(--space-20); flex-wrap: wrap; }
  .taf-introcard__avatar, .taf-introcard__avatar img { width: 76px; height: 76px; }
  .taf-introcard__body h2 { font-size: var(--fs-20); }
  .taf-introcard__link { flex-basis: 100%; }

  /* .taf-mosaic — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-4 */
  .taf-mosaic { padding: var(--space-24) var(--pad) var(--space-24); }
  /* Stacking comes from .taf-scrimhero__grid's own 1fr mobile rule (shared with
     the seahero); the hero's height mirrors the seahero's mobile 320px. */
  .taf-mosaic__layout .taf-mosaic__tile--hero { min-height: 320px; }
  /* 6/5 ≈ 292px tall on a 390px phone — the height the old hero card carried. */
  .taf-mosaic__tile--hero .taf-mosaic__cap { padding: var(--space-16); }
  .taf-mosaic__tile--hero .taf-mosaic__title { font-size: var(--fs-24); }
  .taf-mosaic__cap { padding: var(--space-12); }
  .taf-mosaic__title { font-size: var(--fs-15); }

  /* most loved / seasonal hero feature card: single column */
  .taf-scrimhero__grid { grid-template-columns: 1fr; gap: var(--space-16); }

  /* Seasonal spotlight: stack, photo first (a 420px-tall photo under a wall of copy
     reads as an afterthought on a phone). */
  .taf-spotlight-sec { padding: var(--space-24) var(--pad) var(--space-4); }
  .taf-spotlight { grid-template-columns: 1fr; }
  .taf-spotlight__media { min-height: 260px; order: -1; }
  .taf-spotlight__copy { padding: var(--space-24) var(--space-20) var(--space-24); }
  .taf-spotlight__title { font-size: var(--fs-30); }
  .taf-scrimhero__hero { min-height: 300px; }

  /* collections: stacked cards */
  .taf-collections { padding: var(--space-24) var(--pad) var(--space-16); }
  /* collections collapse to compact horizontal rows on mobile: a single square thumb
     (collage reduced to its lead image) + eyebrow / title / CTA, replacing the tall
     collage cards. */
  .taf-coll { display: grid; grid-template-columns: 88px 1fr; column-gap: var(--space-12); row-gap: var(--space-2); align-content: center; padding: var(--space-12); }
  .taf-coll__montage { grid-column: 1; grid-row: 1 / span 3; align-self: center; display: block; width: 88px; height: 88px; aspect-ratio: var(--ar-1); }
  .taf-coll__montage .taf-coll__m { display: none; }
  .taf-coll__montage .taf-coll__m--tall { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); }
  /* .entry-content .taf-coll__title — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-coll-title-2 */
  .entry-content .taf-coll__title { grid-column: 2; grid-row: 1; font-weight: var(--w-semibold); font-size: var(--fs-17); margin: 0; }
  /* .taf-coll__meta — rationale: docs/design/css-rationale/main.css.md#taf-coll-meta-2 */
  .taf-coll__meta {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; grid-column: 2; grid-row: 2; margin: var(--space-2) 0 0;
    font-size: var(--fs-13); line-height: var(--lh-14); color: var(--cocoa);
  }
  /* .taf-coll__cta — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-coll-cta */
  .taf-coll__cta { display: block; grid-column: 2; grid-row: 3; margin: var(--space-2) 0 0; font-family: var(--display); font-weight: var(--w-semibold); font-size: var(--fs-15); color: var(--rose-deep); }

  /* magnet: stacked field + full-width button */
  .taf-magnetband { padding: var(--space-24) var(--pad); }
  /* single column, top-aligned (no vertical-centering gap), tight gap; and kill the
     ~56px of dead space the Kit form reserves above its fields. */
  .taf-magnetband__inner { grid-template-columns: 1fr; gap: var(--space-16); align-items: start; }
  .taf-magnetband__text, .taf-magnetband__aside { align-self: start; }
  .taf-magnetband__text > :last-child { margin-bottom: 0; }
  .taf-magnetband__form .formkit-form,
  .taf-magnetband__form .formkit-form > div { padding-top: 0 !important; }
  .taf-magnetband__title { font-size: var(--fs-24); font-weight: var(--w-semibold); } /* the only 700 heading → 24/600 */
  .taf-magnetband__form .formkit-fields,
  .taf-magnetband__form [data-element="fields"],
  .taf-magnetband__form .seva-fields { flex-direction: column; }
  .taf-magnetband__form .formkit-submit,
  .taf-magnetband__form button { width: 100%; }

  /* mithai: hero full width, two tiles below */
  .taf-featband { padding: var(--space-20) var(--pad) var(--space-24); }
  .taf-footer { padding-top: var(--space-24); padding-bottom: var(--space-48); } /* trim the 90px sticky-ad bottom clearance on mobile */
  /* compact mobile footer: brand full-width, link columns in a 2-col grid instead of
     one tall stack. */
  .taf-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-24) var(--space-20); }
  .taf-footer__brand { grid-column: 1 / -1; }
  .taf-footer__col a { padding: var(--space-2) 0; } /* DELIBERATE WAIVER: 44px floor waived for footer links (see the base rule); AA 24px clears via line + padding */
  .taf-featband__grid { grid-template-columns: 1fr 1fr; }
  .taf-featband__hero { grid-column: 1 / -1; min-height: 280px; }

  /* footer: compact */
  .taf-sitefooter__inner { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
  .taf-sitefooter__brand { grid-column: 1 / -1; }
}

/* @media (min-width: 700px) and (max-width: 899.98px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-700px-and-max-width-899-98px */
@media (min-width: 700px) and (max-width: 899.98px) {
  /* .taf-mosaic__layout .taf-mosaic__tile--hero — rationale: docs/design/css-rationale/main.css.md#taf-mosaic-layout-taf-mosaic-tile-hero-3 */
  /* Tablet: .taf-scrimhero__grid's own 1.15fr/1fr tablet rule places the band;
     hero height mirrors the seahero's tablet 360px. */
  .taf-mosaic__layout .taf-mosaic__tile--hero { min-height: 360px; }
  .taf-mosaic__cap { padding: var(--space-12); }
  .taf-mosaic__title { font-size: var(--fs-15); }
  .taf-mosaic__meta { font-size: var(--fs-12); }
  .taf-mosaic__tile--hero .taf-mosaic__cap { padding: var(--space-16); }
  .taf-mosaic__tile--hero .taf-mosaic__title { font-size: var(--fs-24); }

  /* seasonal hero feature card (desktop 2-column) */
  .taf-scrimhero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-24); }
  .taf-scrimhero__hero { min-height: 360px; }

  /* collections: desktop 3-up collage cards (revert the phone horizontal rows) */
  .taf-tilegrid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-20); }
  .taf-coll { display: block; padding: var(--space-16); }
  .taf-coll__montage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-8); aspect-ratio: var(--ar-16-10); width: auto; height: auto; }
  .taf-coll__montage .taf-coll__m { display: block; }
  .entry-content .taf-coll__title { display: block; grid-column: auto; grid-row: auto; font-size: var(--fs-17); margin: var(--space-8) 0 0; }
  /* .taf-coll__meta — rationale: docs/design/css-rationale/main.css.md#taf-coll-meta-3 */
  .taf-coll__meta { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; grid-column: auto; grid-row: auto; margin-top: var(--space-4); }
  .taf-coll__cta { display: none; }

  /* baking-right-now: single row of 4 cards (desktop) */
  .taf-tilegrid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
  /* recipe tiles (recipe-index most-loved, about favorite bakes, bread band):
     desktop 4-up rows — matches the category circles' rhythm */
  .taf-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
  /* mithai: single row — featured hero + two tiles (desktop) */
  .taf-featband__grid { grid-template-columns: 2fr 1fr 1fr; }
  .taf-featband__hero { grid-column: auto; min-height: 0; }

  /* email magnet: desktop 2-column (copy left, form right; name+email in a row) */
  .taf-magnetband { padding: var(--space-24) var(--pad); }
  .entry-content .wp-block-group.has-background.taf-magnetband { padding: var(--space-24) var(--pad); }
  .taf-magnetband__inner { grid-template-columns: 1fr 1fr; gap: var(--space-40); align-items: center; }
  .taf-magnetband__text, .taf-magnetband__aside { align-self: center; }
  .taf-magnetband__title { font-size: var(--fs-36); font-weight: var(--w-bold); }
  .taf-magnetband__form .formkit-fields,
  .taf-magnetband__form [data-element="fields"],
  .taf-magnetband__form .seva-fields { flex-direction: row; }

  /* category circles: desktop single row of 6 (sized to fit the tablet width) */
  .taf-catrow { flex-wrap: nowrap; gap: var(--space-16); }
  .taf-cat { width: calc((100% - 84px) / 6); }

  /* footer: logo left, 3 nav columns clustered right (per reference) */
  .taf-footer__grid { grid-template-columns: 1fr auto auto auto; column-gap: var(--space-24); row-gap: var(--space-20); align-items: start; }
  .taf-footer__brand { grid-column: 1; }
}

/* @media (min-width: 900px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-900px-2 */
@media (min-width: 900px) {
  .entry-content .taf-rhero__rating { margin: 0 0 var(--space-12); }
  .entry-content .taf-rhero__lede   { margin: 0 0 var(--space-24); }
  /* Hero H1: margin needs 0,2,0 to beat block heading spacing; line-height needs
     !important to beat the enqueue.php heading counter. */
  .entry-content .taf-rhero__title { margin: var(--space-12) 0 var(--space-16); line-height: var(--lh-108) !important; }
  .entry-content .taf-catrow { margin-top: var(--space-24); }
}

/* ---- Form inputs → rose hairline + 6px radius ----
   (a) Recipe-post comment form (Kadence renders grey #cbd5e0 / 3px). */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  border: var(--bw-15) solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
/* .formkit-form input, .formkit-input, .taf-magnet .formkit-… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#formkit-form-input-formkit-input-taf-magnet-formkit-form-inp */
.formkit-form input,
.formkit-input,
.taf-magnet .formkit-form input,
.taf-magnet .formkit-input {
  border: var(--bw-15) solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
/* Kit submit button → the display face + 6px radius. */
.formkit-form .formkit-submit,
.formkit-submit,
.taf-magnet .formkit-submit {
  font-family: var(--display) !important;
  border-radius: var(--radius-sm) !important;
}

/* ---- Mobile header icon buttons → 44x44 tap target ----
   Kadence's own toggles are padding-only. Keep the visual icon size; the min box
   just enlarges the hit area. */
.menu-toggle-open,
.search-toggle-open {
  min-width: 44px;
  min-height: 44px;
}
/* #mobile-toggle .menu-toggle-label — rationale: docs/design/css-rationale/main.css.md#mobile-toggle-menu-toggle-label */
#mobile-toggle .menu-toggle-label { display: none; }

/* .entry-content .taf-section h2.wp-block-heading.taf-catgro… — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-section-h2-wp-block-heading-taf-catgroup */

/* .entry-content .taf-section h2.wp-block-heading.taf-catgro… — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-section-h2-wp-block-heading-taf-catgroup-2 */
/* .entry-content .taf-section h2.wp-block-heading.taf-catgro… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-section-h2-wp-block-heading-taf-catgroup-3 */
/* .entry-content .taf-section h2.wp-block-heading.taf-catgro… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-section-h2-wp-block-heading-taf-catgroup-4 */
.entry-content .taf-section h2.wp-block-heading.taf-catgroup {
  font-family: var(--display); font-size: var(--fs-20); font-weight: var(--w-semibold);
  line-height: var(--lh-125); margin: var(--space-40) 0 var(--space-12);
}
.entry-content .taf-section h2.wp-block-heading.taf-catgroup:first-of-type { margin-top: 0; }
@media (min-width: 900px) {
  .entry-content .taf-section h2.wp-block-heading.taf-catgroup { font-size: var(--fs-22); }
}

/* .taf-guides — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-guides */
/* .taf-guides — rationale: docs/design/css-rationale/main.css.md#taf-guides-2 */
.taf-guides {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-10) var(--space-24);
  margin: var(--space-20) 0 0;
  padding: var(--space-14) 0;
  border-top: var(--bw-1) solid var(--line);
  border-bottom: var(--bw-1) solid var(--line);
}
.taf-guides__k {
  font-family: var(--display); font-size: var(--fs-12); font-weight: var(--w-bold);
  letter-spacing: var(--ls-14em); text-transform: uppercase; color: var(--chocolate);
}
.taf-guides__links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
.taf-guides__links a {
  font-family: var(--display); font-size: var(--fs-14); font-weight: var(--w-semibold);
  color: var(--rose-deep); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-6);
}
.taf-guides__links a:hover, .taf-guides__links a:focus-visible { text-decoration: underline; }
.taf-guides__links em { font-style: normal; font-size: var(--fs-13); }
@media (max-width: 699.98px) {
  /* Stack: the label sits above its own list rather than competing for the row. */
  .taf-guides { flex-direction: column; align-items: flex-start; gap: var(--space-10); }
  .taf-guides__links { flex-direction: column; gap: var(--space-4); }
  /* .taf-guides__links a — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-guides-links-a */
  .taf-guides__links a { min-height: 44px; }
}

.taf-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24) var(--space-24); justify-items: center; }
.taf-catgrid .taf-cat { width: 100%; max-width: 235px; }
.taf-catgrid .taf-cat__img { width: 100%; height: auto; aspect-ratio: var(--ar-1-1); }
@media (min-width: 900px) {
  /* labels scale with the bigger (235px vs 150px home) circles */
  .taf-catgrid .taf-cat__label { font-size: var(--fs-17); }
}
@media (max-width: 699.98px) {
  .taf-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--space-16); }
}

/* ======================
   KADENCE SEARCH DRAWER → the site's search pill. Kadence's markup, CSS-only, scoped under
   #search-drawer.
   ====================== */
/* #search-drawer .drawer-overlay — rationale: docs/design/css-rationale/main.css.md#search-drawer-drawer-overlay */
#search-drawer .drawer-overlay { background: transparent !important; }
#search-drawer .drawer-inner {
  background: var(--veil-82) !important;                          /* fallback */
  background: color-mix(in srgb, var(--bg-page) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
/* Kadence lays drawer-content out as a centered flex ROW (header.min.css) — go
   column so the heading stacks above the pill, and let the form take the full
   column. */
#search-drawer .drawer-inner .drawer-content { display: flex; flex-direction: column; align-items: stretch; justify-content: center; max-width: 680px; margin: 0 auto; padding: 0 var(--pad); }
#search-drawer .drawer-content::before {
  content: "What are we baking today?";
  display: block; text-align: center;
  font-family: var(--display); font-size: var(--fs-h2); font-weight: var(--w-semibold);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  color: var(--text-body); margin-bottom: var(--space-16);
}
#search-drawer .search-form { position: relative; display: flex; align-items: center; gap: var(--space-8); width: 100%; background: var(--bg-surface); border: none; border-radius: var(--radius); height: 56px; padding: 0 var(--space-8) 0 var(--space-48); box-shadow: var(--shadow); }
/* Shadow-deepen alone is not a visible-focus indicator (WCAG 2.4.7) when the
   field suppresses its own ring — add the sitewide ring on the container. */
#search-drawer .search-form:focus-within { box-shadow: var(--shadow-hover); outline: var(--focus-ring) solid var(--rose); outline-offset: 2px; } /* search = rose, see .taf-search rule */
#search-drawer .search-form label { flex: 1; min-width: 0; margin: 0; }
/* selector mirrors Kadence's `#search-drawer .drawer-inner input.search-field`
   (header.min.css) — equal specificity, we load later */
#search-drawer .drawer-inner input.search-field { width: 100%; height: auto; padding: 0; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; font-family: var(--sans); font-size: var(--fs-17); color: var(--text-body); }
#search-drawer .drawer-inner input.search-field::placeholder { color: var(--text-muted); opacity: var(--o-1); }
/* input[type="search"]::-webkit-search-cancel-button — rationale: docs/design/css-rationale/main.css.md#input-type-search-webkit-search-cancel-button */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
  width: 16px; height: 16px; margin-left: var(--space-8);
  cursor: pointer;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color var(--speed) var(--ease);
}
input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--rose-deep); }

/* #search-drawer .drawer-inner input.search-field, #search-d… — rationale: docs/design/css-rationale/main.css.md#search-drawer-drawer-inner-input-search-field-search-drawer- */
#search-drawer .drawer-inner input.search-field,
#search-drawer .drawer-inner input.search-field:focus {
  color: var(--text-body);
  caret-color: var(--text-body);
  box-shadow: none !important;
}
/* magnifier: decorative, pinned inside the pill's left padding (the stock rules
   float it over the submit text) */
#search-drawer .drawer-inner .kadence-search-icon-wrap { position: absolute; left: 20px; right: auto; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
#search-drawer .drawer-inner .kadence-search-icon-wrap svg { display: block; width: 18px; height: 18px; }
#search-drawer .drawer-inner .search-form .search-submit { position: static; width: auto; height: auto; background: var(--accent); color: var(--color-on-accent); font-family: var(--display); font-size: var(--fs-small); font-weight: var(--w-bold); padding: var(--space-12) var(--space-20); border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: var(--o-1); transition: background var(--speed) var(--ease); }
#search-drawer .drawer-inner .search-form .search-submit:hover,
#search-drawer .drawer-inner .search-form .search-submit:focus-visible { background: var(--accent-hover); }
/* Kadence turns the magnifier white when the submit is hovered (sibling rule) —
   with the icon far left that flash is just noise; hold it steady */
#search-drawer .drawer-inner .search-submit[type="submit"]:hover ~ .kadence-search-icon-wrap { color: var(--text-muted); }
#search-drawer .search-toggle-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-round); color: var(--text-body); background: transparent; transition: color var(--speed) var(--ease), background var(--speed) var(--ease); }
#search-drawer .search-toggle-close:hover,
#search-drawer .search-toggle-close:focus-visible { color: var(--accent-hover); background: var(--rose-tint); }

/* #mobile-drawer.popup-drawer — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-popup-drawer */
/* #mobile-drawer.popup-drawer — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-popup-drawer-2 */
#mobile-drawer.popup-drawer { z-index: var(--z-dropdown); }
/* #mobile-drawer .drawer-inner — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-inner */
#mobile-drawer .drawer-inner {
  position: relative;
  width: 100%;
  max-width: none;
  /* #mobile-drawer .drawer-inner — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-inner-2 */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: none;
  padding: 0;
  background: var(--milk);
  color: var(--chocolate); /* close bars + sub-toggles are color:inherit — visible ink flows from here */
}
#mobile-drawer .drawer-content {
  flex: 1 1 auto;
  min-height: 0;
  display: block; /* Kadence's content-valign flex would center-stack the sheet */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--cocoa) var(--milk); /* on-system rail for the sheet's own scroll */
  /* Kadence's own 25.5px sides → the comp's 18px gutter. Full-bleed children
     (top bar, pinned CTA) pull back out with matching -18px margins. */
  padding: 0 var(--space-18);
}

/* #mobile-drawer .drawer-header — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-header */
/* #mobile-drawer .drawer-header — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-header-2 */
#mobile-drawer .drawer-header {
  position: absolute; top: 0; right: 0; z-index: var(--z-49);
  width: auto;
  padding: var(--space-12) var(--space-18);
}
#mobile-drawer .taf-mm-topbar {
  position: sticky; top: 0; z-index: var(--z-2);
  margin: 0 calc(-1 * var(--space-18));
  padding: var(--space-12) var(--space-64) var(--space-12) var(--space-18); /* right pad clears the pinned 44px close button */
  background: var(--milk);
  border-bottom: var(--bw-1) solid var(--line);
}
#mobile-drawer .taf-mm-topbar__home { display: inline-flex; align-items: center; min-height: var(--space-44); } /* 44px tap target (logo is 42px) */
#mobile-drawer .taf-mm-logo { display: block; width: auto; height: 42px; } /* token-exempt: comp — the top bar mirrors the closed mobile header's logo height */
/* Close button. Measured open (pre-restyle): 31.2x52.8 (Kadence pads .6em/.15em
   around two position:absolute bars) — 13px under the floor on the x-axis. */
#mobile-drawer .drawer-header .drawer-toggle {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  min-width: 44px; min-height: 44px;      /* tap target; the X bars stay .75em (18px) */
  align-items: center; justify-content: center;
  color: var(--chocolate); /* explicit, not just inherited: visible ink is a requirement here */
}
#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .drawer-header .drawer-toggle:focus-visible { color: var(--rose-deep); }

/* #mobile-drawer .taf-mm-search — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-search */
#mobile-drawer .taf-mm-search { padding: var(--space-18) 0 var(--space-6); }
#mobile-drawer .taf-mm-search__box {
  display: flex; align-items: center; gap: var(--space-10);
  background: var(--paper);
  border: var(--bw-15) solid var(--rose);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-16);
  box-shadow: 0 6px 18px -8px rgba(225, 21, 132, .25); /* token-exempt: comp's rose glow — --rose (#E11584) as channels; no --rose-rgb channel token exists and one use doesn't earn one */
}
/* SEARCH focus rings are ROSE — see the .taf-search rule. */
#mobile-drawer .taf-mm-search__box:focus-within { outline: var(--focus-ring) solid var(--rose); outline-offset: 2px; }
#mobile-drawer .taf-mm-search__box > .taf-mm-icon { color: var(--rose); flex-shrink: 0; }
#mobile-drawer .taf-mm-search__input {
  /* token-frozen: iOS Safari zooms an input whose font-size is under 16px
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent; box-shadow: none;
  font-family: var(--sans); font-size: var(--fs-16); /* 16px stops iOS zoom */
  color: var(--text-body); caret-color: var(--text-body);
  padding: var(--space-10) 0;
}
#mobile-drawer .taf-mm-search__input::placeholder { color: var(--text-muted); }
#mobile-drawer .taf-mm-search__go {
  /* #mobile-drawer .taf-mm-search__go — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-search-go */
  min-width: 44px; height: 44px; flex-shrink: 0; /* tap target */
  padding: 0 var(--space-20);
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  border-radius: var(--radius-sm);
  background: var(--rose); color: var(--color-on-accent);
  transition: background var(--speed) var(--ease);
}
#mobile-drawer .taf-mm-search__go:hover,
#mobile-drawer .taf-mm-search__go:focus-visible { background: var(--accent-hover); }
/* #mobile-drawer .taf-mm-search__go-label — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-search-go-label */
#mobile-drawer .taf-mm-search__go-label {
  display: inline;
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
}
/* #mobile-drawer .taf-mm-popular — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-popular */
#mobile-drawer .taf-mm-popular { margin-top: var(--space-12); text-align: left; }

/* ---- Browse recipes: eyebrow + "All recipes" on the head row, 2x2 photo
   tiles (5:4, chocolate scrim, display-face label). ---- */
#mobile-drawer .taf-mm-browse { padding: var(--space-24) 0 var(--space-4); }
#mobile-drawer .taf-mm-browse__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); }
#mobile-drawer .taf-mm-browse__head .taf-eyebrow { margin: 0; }
#mobile-drawer .taf-mm-all {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: var(--fs-13); font-weight: var(--w-bold);
  color: var(--rose-link); text-decoration: none;
}
#mobile-drawer .taf-mm-all::before {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 44px; transform: translateY(-50%); /* tap target */
}
#mobile-drawer .taf-mm-all:hover,
#mobile-drawer .taf-mm-all:focus-visible { color: var(--rose-deep); }
#mobile-drawer .taf-mm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
#mobile-drawer .taf-mm-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: var(--ar-5-4);
  transition: box-shadow var(--speed) var(--ease);
}
/* Tile hover language (shadow only — no photo zoom beyond the sanctioned idiom;
   the label stays white-on-scrim). */
#mobile-drawer .taf-mm-tile:hover,
#mobile-drawer .taf-mm-tile:focus-visible { box-shadow: var(--shadow-hover); }
#mobile-drawer .taf-mm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim ink is the house --ink-rgb composition; the 35% stop is this band's own
   ramp (per the scrim-token rule: ink shared, ramp per band). */
#mobile-drawer .taf-mm-tile::after { content: ""; position: absolute; inset: 0; background: var(--scrim-menutile); }
#mobile-drawer .taf-mm-tile__label {
  position: absolute; left: var(--space-12); right: var(--space-12); bottom: var(--space-10); z-index: var(--z-1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  /* 600 is a deliberate legibility exception (in-flow tile titles are 400): white-on-scrim needs the weight. */
  font-family: var(--display); font-size: var(--fs-16); font-weight: var(--w-semibold);
  color: var(--color-on-scrim);
}
#mobile-drawer .taf-mm-tile__label .taf-mm-icon { flex-shrink: 0; opacity: var(--o-85); }

/* ---- Trending this week: ONE deliberate cream card. ---- */
#mobile-drawer .taf-mm-trend { padding: var(--space-24) 0 var(--space-4); }
#mobile-drawer .taf-mm-trend__card {
  display: flex; align-items: center; gap: var(--space-14);
  background: var(--cream);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-12);
  text-decoration: none;
}
#mobile-drawer .taf-mm-trend__card img {
  width: 72px; height: 72px; /* token-exempt: comp's 72px thumb box — a content shape, not a spacing step */
  object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0;
}
#mobile-drawer .taf-mm-trend__text { min-width: 0; }
/* #mobile-drawer .taf-mm-trend__eyebrow — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-trend-eyebrow */
#mobile-drawer .taf-mm-trend__eyebrow { display: flex; align-items: center; gap: var(--space-6); color: var(--text-muted); }
#mobile-drawer .taf-mm-trend__eyebrow .taf-mm-icon { color: var(--saffron-deep); }
#mobile-drawer .taf-mm-trend__title {
  display: block; margin-top: var(--space-4);
  font-family: var(--display); font-size: var(--fs-17); font-weight: var(--w-semibold);
  line-height: var(--lh-125); color: var(--chocolate);
}
#mobile-drawer .taf-mm-trend__card > .taf-mm-icon { margin-left: auto; color: var(--rose); flex-shrink: 0; }
#mobile-drawer .taf-mm-trend__card:hover .taf-mm-trend__title,
#mobile-drawer .taf-mm-trend__card:focus-visible .taf-mm-trend__title { color: var(--rose-deep); }

/* #mobile-drawer .mobile-navigation — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-mobile-navigation */
#mobile-drawer .mobile-navigation { padding: var(--space-24) 0 var(--space-8); }
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap { color: var(--chocolate); }
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-14) var(--space-2); /* rows measure 17px type + 28px pad ≈ 48px ≥ the 44px floor */
  font-size: var(--fs-17); font-weight: var(--w-bold); line-height: var(--lh-13);
  text-decoration: none;
}
#mobile-drawer .mobile-navigation ul li > a:hover,
#mobile-drawer .mobile-navigation ul li > a:focus-visible,
#mobile-drawer .drawer-nav-drop-wrap a:hover,
#mobile-drawer .drawer-nav-drop-wrap a:focus-visible { color: var(--rose-deep); }
/* Current page: Kadence's palette-highlight resolves to --rose-link (5.05:1 on
   milk — passes, but thin); deepen to --rose-deep = the house active/hover ink. */
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap { color: var(--rose-deep); }
/* #mobile-drawer .mobile-navigation ul li.menu-item-has-chil… — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-mobile-navigation-ul-li-menu-item-has-children */
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a { border-bottom-color: var(--line); }
#mobile-drawer .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button { border-left-color: var(--line); }
#mobile-drawer .mobile-navigation ul.menu > li:first-child > a,
#mobile-drawer .mobile-navigation ul.menu > li:first-child > .drawer-nav-drop-wrap { border-top: var(--bw-1) solid var(--line); }
/* Row furniture from the title filter. */
#mobile-drawer .mobile-navigation a > .taf-mm-icon { color: var(--rose); flex-shrink: 0; }
#mobile-drawer .taf-mm-navlabel { min-width: 0; }
#mobile-drawer .taf-mm-caret { margin-left: auto; display: inline-flex; color: var(--cocoa); }
/* Sub-menu toggle (44.2x51.1 measured — already over the floor): inherit gives
   it chocolate; state ink matches links. */
#mobile-drawer .drawer-sub-toggle:hover,
#mobile-drawer .drawer-sub-toggle:focus-visible { color: var(--rose-deep); }

/* ---- Socials + location. 44px circles (comp says 40 — WCAG bump, glyphs stay
   20px like the footer row's). ---- */
#mobile-drawer .taf-mm-social { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-6) 0 var(--space-24); }
#mobile-drawer .taf-mm-social__link {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  width: 44px; height: 44px;              /* tap target; the glyph is 20px */
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-15) solid var(--line);
  border-radius: var(--radius-round);
  color: var(--chocolate);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
#mobile-drawer .taf-mm-social__link svg { width: 20px; height: 20px; display: block; }
#mobile-drawer .taf-mm-social__link:hover,
#mobile-drawer .taf-mm-social__link:focus-visible { color: var(--rose-deep); border-color: var(--rose); }
#mobile-drawer .taf-mm-social__meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--fs-meta); color: var(--text-muted); }
#mobile-drawer .taf-mm-social__meta .taf-mm-icon { color: var(--rose); }

/* @keyframes taf-mm-in — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#keyframes-taf-mm-in */

/* @keyframes taf-mm-in — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#keyframes-taf-mm-in-2 */

/* @keyframes taf-mm-in — rationale: docs/design/css-rationale/main.css.md#keyframes-taf-mm-in-3 */
@keyframes taf-mm-in { from { opacity: 0; transform: translateY(14px); } to { opacity: var(--o-1); transform: none; } }
@keyframes taf-mm-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: var(--o-1); transform: none; } }
#mobile-drawer.show-drawer .drawer-inner { animation: taf-mm-in var(--dur-28) var(--ease-out) both; }
#mobile-drawer.show-drawer .taf-mm-search { animation: taf-mm-fadeup var(--dur-35) var(--ease-out) var(--dur-05) both; }
#mobile-drawer.show-drawer .taf-mm-browse { animation: taf-mm-fadeup var(--dur-35) var(--ease-out) var(--dur-12) both; }
#mobile-drawer.show-drawer .taf-mm-trend { animation: taf-mm-fadeup var(--dur-35) var(--ease-out) var(--dur-18) both; }
#mobile-drawer.show-drawer .mobile-navigation { animation: taf-mm-fadeup var(--dur-35) var(--ease-out) var(--dur-24) both; }
#mobile-drawer.show-drawer .taf-mm-social { animation: taf-mm-fadeup var(--dur-35) var(--ease-out) var(--dur-3) both; }
/* #mobile-drawer .taf-mm-search — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-search-2 */
#mobile-drawer .taf-mm-search { position: relative; z-index: var(--z-1); }
@media (prefers-reduced-motion: reduce) {
  #mobile-drawer.show-drawer .drawer-inner,
  #mobile-drawer.show-drawer .taf-mm-search,
  #mobile-drawer.show-drawer .taf-mm-browse,
  #mobile-drawer.show-drawer .taf-mm-trend,
  #mobile-drawer.show-drawer .mobile-navigation,
  #mobile-drawer.show-drawer .taf-mm-social { animation: none; }
}

/* @media (min-width: 700px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-700px */
@media (min-width: 700px) {
  #mobile-drawer .drawer-content {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    /* #mobile-drawer .drawer-content — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-content */
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    column-gap: var(--space-32);
    row-gap: var(--space-24); /* comp: 22-26px section rhythm — one 24 beat */
    align-content: start;
    padding: 0 var(--space-32); /* comp gutter 28 -> the 32 token (24 sits too tight against the 32 column gap) */
  }
  /* Full-width rows. position:sticky keeps working on grid items, so the top
     bar and CTA pin exactly as on phone. */
  #mobile-drawer .taf-mm-topbar {
    grid-column: 1 / -1;
    margin: 0 calc(-1 * var(--space-32));
    padding: var(--space-14) var(--space-32); /* the logo is left-anchored and ~100px wide — it cannot reach the close pill, so no protective right pad */
  }
  #mobile-drawer .drawer-header { padding: var(--space-14) var(--space-32); }
  /* #mobile-drawer .drawer-header .drawer-toggle — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-header-drawer-toggle */
  #mobile-drawer .drawer-header .drawer-toggle {
    width: auto; height: 44px; box-sizing: border-box; /* keeps the 44px floor as a pill */
    padding: 0 var(--space-16) 0 var(--space-40);
    border: var(--bw-15) solid var(--line);
    background: var(--paper);
    border-radius: var(--radius-sm);
    transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
  }
  #mobile-drawer .drawer-header .drawer-toggle:hover,
  #mobile-drawer .drawer-header .drawer-toggle:focus-visible { border-color: var(--rose); }
  /* #mobile-drawer .drawer-header .drawer-toggle .toggle-close… — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-drawer-header-drawer-toggle-toggle-close-bar */
  #mobile-drawer .drawer-header .drawer-toggle .toggle-close-bar { left: var(--space-24); }
  #mobile-drawer .drawer-header .drawer-toggle::after {
    content: "Close"; /* not translatable from CSS — accepted, site ships English-only (see inc/mobile-menu.php) */
    font-family: var(--sans); font-size: var(--fs-15); font-weight: var(--w-bold); line-height: var(--lh-1);
  }
  /* #mobile-toggle.menu-toggle-open — rationale: docs/design/css-rationale/main.css.md#mobile-toggle-menu-toggle-open */
  #mobile-toggle.menu-toggle-open {
    display: inline-flex; align-items: center; gap: var(--space-8);
    height: 44px; padding: 0 var(--space-16);
    border: var(--bw-15) solid var(--line);
    background: var(--paper);
    border-radius: var(--radius-sm);
  }
  #mobile-toggle .menu-toggle-label {
    display: inline; order: 2; padding-right: 0;
    font-family: var(--sans); font-size: var(--fs-15); font-weight: var(--w-bold);
  }
  #mobile-toggle .menu-toggle-icon { order: 1; display: inline-flex; }

  /* Search hero: field + labeled submit, chips inline right, wrapping below
     on narrow tablets (comp). */
  #mobile-drawer .taf-mm-search {
    grid-column: 1 / -1;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-16);
    padding: 0;
  }
  #mobile-drawer .taf-mm-search__box {
    flex: 1 1 380px; /* token-exempt: comp's wrap threshold — the field holds ~half the row before the chips drop below it */
    padding-left: var(--space-18);
  }
  #mobile-drawer .taf-mm-search__input { font-size: var(--fs-17); padding: var(--space-12) 0; }
  /* #mobile-drawer .taf-mm-popular — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-popular-2 */
  #mobile-drawer .taf-mm-popular { margin-top: 0; }
  /* #mobile-drawer .taf-mm-browse — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-browse */

  /* Two-column body. Explicit rows: browse spans the right column's three. */
  #mobile-drawer .taf-mm-browse { grid-column: 1; grid-row: 3 / span 3; padding: 0; }
  #mobile-drawer .taf-mm-browse__head { margin-bottom: var(--space-14); }
  #mobile-drawer .taf-mm-tiles { gap: var(--space-14); }
  /* #mobile-drawer .taf-mm-tile__label — rationale: docs/design/css-rationale/main.css.md#mobile-drawer-taf-mm-tile-label */
  #mobile-drawer .taf-mm-tile__label { left: var(--space-14); right: var(--space-14); bottom: var(--space-12); font-size: var(--fs-19); }
  #mobile-drawer .taf-mm-trend { grid-column: 2; grid-row: 3; padding: 0; }
  #mobile-drawer .taf-mm-trend__card { padding: var(--space-14); }
  #mobile-drawer .drawer-content > .site-header-item { grid-column: 2; }
  #mobile-drawer .drawer-content > .site-header-item-mobile-navigation { grid-row: 4; }
  #mobile-drawer .mobile-navigation { padding: 0; }
  #mobile-drawer .mobile-navigation ul li > a,
  #mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a { font-size: var(--fs-16); }
  #mobile-drawer .taf-mm-social { grid-column: 2; grid-row: 5; align-self: start; padding: 0; }
  /* @media (max-width: 699.98px) — rationale: docs/design/css-rationale/main.css.md#media-max-width-699-98px */
}

/* @media (max-width: 699.98px) — rationale: docs/design/css-rationale/main.css.md#media-max-width-699-98px-2 */
@media (max-width: 699.98px) {
  .taf-magnet .formkit-form .formkit-fields:has(> .formkit-field + .formkit-field) { flex-wrap: wrap !important; }
  .taf-magnet .formkit-form .formkit-fields:has(> .formkit-field + .formkit-field) .formkit-field { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; margin: 0 !important; }
  .taf-magnet .formkit-form .formkit-fields:has(> .formkit-field + .formkit-field) .formkit-submit { flex: 1 1 100% !important; width: 100% !important; margin-top: 0; }
}

/* @media (min-width: 700px) — rationale: docs/design/css-rationale/main.css.md#media-min-width-700px-2 */
@media (min-width: 700px) {
  .adthrive-ad { min-height: 90px; }
  /* floated units inside instruction/ingredient lists: clear the text */
  .wprm-recipe-instruction .adthrive-ad,
  .wprm-recipe-ingredient .adthrive-ad,
  .wprm-recipe .adthrive-ad { margin: 0 0 var(--space-12) var(--space-16); }
}

/* .wprm-rating-star:where(:not(.wprm-rating-star-33):not(.wp… — rationale: docs/design/css-rationale/main.css.md#wprm-rating-star-where-not-wprm-rating-star-33-not-wprm-rati */
.wprm-rating-star:where(:not(.wprm-rating-star-33):not(.wprm-rating-star-50):not(.wprm-rating-star-66)) svg polygon,
.wprm-rating-star:where(:not(.wprm-rating-star-33):not(.wprm-rating-star-50):not(.wprm-rating-star-66)) svg path {
  fill: var(--line) !important;
}
.wprm-rating-star svg polygon,
.wprm-rating-star svg path {
  stroke: var(--line) !important;
  fill-opacity: 1 !important;
}
/* filled + fractional stars carry the deep-saffron outline */
.wprm-rating-star.wprm-rating-star-33 svg polygon,
.wprm-rating-star.wprm-rating-star-33 svg path,
.wprm-rating-star.wprm-rating-star-50 svg polygon,
.wprm-rating-star.wprm-rating-star-50 svg path,
.wprm-rating-star.wprm-rating-star-66 svg polygon,
.wprm-rating-star.wprm-rating-star-66 svg path { stroke: var(--saffron-deep) !important; }
.wprm-rating-star.wprm-rating-star-full svg polygon,
.wprm-rating-star.wprm-rating-star-full svg path {
  fill: var(--saffron) !important;
  stroke: var(--saffron-deep) !important;
}
/* D3-B fill-to-cursor (these must FOLLOW the state rules above: selecting-empty
   ties the partial-stroke rule on specificity and wins by order) */
.wprm-rating-star.wprm-rating-star-selecting-filled svg polygon,
.wprm-rating-star.wprm-rating-star-selecting-filled svg path {
  fill: var(--saffron) !important;
  stroke: var(--saffron-deep) !important;
}
.wprm-rating-star.wprm-rating-star-selecting-empty svg polygon,
.wprm-rating-star.wprm-rating-star-selecting-empty svg path {
  fill: var(--line) !important;
  stroke: var(--line) !important;
}
/* svg linearGradient[id^="wprm-"] stop:nth-of-type(-n+2) — rationale: docs/design/css-rationale/main.css.md#svg-lineargradient-id-wprm-stop-nth-of-type-n-2 */
svg linearGradient[id^="wprm-"] stop:nth-of-type(-n+2) { stop-color: var(--saffron) !important; }
svg linearGradient[id^="wprm-"] stop:nth-of-type(n+3) {
  stop-color: var(--line) !important;
  stop-opacity: 1 !important;  /* the markup ships these at 0 — grey, not see-through */
}

/* ---- WPRM in-content jump shortcodes ("Jump to Recipe / Jump to Video"): strip
   the icon SVGs and the inline black color; read as brand links. !important beats
   the inline style attr. ---- */
.wprm-jump-to-recipe-shortcode,
.wprm-jump-to-video-shortcode {
  color: var(--rose-link) !important;
  font-family: var(--display); font-weight: var(--w-bold);
  text-decoration: underline; text-underline-offset: 3px;
  /* 44px tap target: 17px × 1.65 line (28px) + 2×8px padding. inline-block so the
     vertical padding actually grows the hit box (it paints-only on plain inline). */
  display: inline-block;
  padding: var(--space-8) 0;
}
.wprm-jump-to-recipe-shortcode:hover,
.wprm-jump-to-video-shortcode:hover { color: var(--rose-deep) !important; }
.wprm-jump-to-recipe-shortcode .wprm-recipe-icon,
.wprm-jump-to-video-shortcode .wprm-recipe-icon { display: none; }

/* ---- Jump pill: flip the arrow when the recipe card is ABOVE the viewport
   (menu.js toggles the class at the same observer crossing that shows/hides the
   pill). ---- */
.taf-jump-pill svg { transition: transform var(--speed) var(--ease); }
.taf-jump-pill--up svg { transform: rotate(180deg); }

/* .dpsp-network-btn — rationale: docs/design/css-rationale/main.css.md#dpsp-network-btn */
.dpsp-network-btn { background-color: var(--rose) !important; }
.dpsp-network-btn .dpsp-network-icon { background-color: transparent !important; } /* X ships its own black bg */
.dpsp-network-btn:hover,
.dpsp-network-btn:focus-visible { background-color: var(--rose-deep) !important; }
/* rail: hidden (menu.js observer) once the footer scrolls in, so it never overlaps
   the footer logo/legal */
#dpsp-floating-sidebar { transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease); }
#dpsp-floating-sidebar.taf-rail-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* .dpsp-network-btn, .dpsp-network-btn::before, .dpsp-networ… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#dpsp-network-btn-dpsp-network-btn-before-dpsp-network-btn-af */

/* ---- dpsp keeps network-colored border layers on pseudo-elements (icon-animation ring) too.
   Rose on every layer, every state. ---- */
.dpsp-network-btn,
.dpsp-network-btn::before,
.dpsp-network-btn::after,
.dpsp-network-btn .dpsp-network-icon,
.dpsp-network-btn .dpsp-network-icon::before,
.dpsp-network-btn .dpsp-network-icon::after { border-color: var(--rose) !important; }
.dpsp-network-btn:hover,
.dpsp-network-btn:hover::before,
.dpsp-network-btn:hover::after,
.dpsp-network-btn:focus-visible { border-color: var(--rose-deep) !important; }

/* .taf-post-meta__video — rationale: docs/design/css-rationale/main.css.md#taf-post-meta-video */
.taf-post-meta__video { display: inline-flex; }
#recipe-video { scroll-margin-top: var(--space-64); }

/* @media (hover: hover) and (pointer: fine) — rationale: docs/design/css-rationale/main.css.md#media-hover-hover-and-pointer-fine */
@media (hover: hover) and (pointer: fine) {
  .wprm-user-rating .wprm-rating-star svg { transition: transform var(--speed) var(--ease); }
  .wprm-user-rating .wprm-rating-star:hover svg { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .wprm-user-rating .wprm-rating-star:hover svg { transform: none; }
}
.wprm-user-rating .wprm-rating-star { cursor: pointer; }

/* ======================
   FOOTER — social icon row + split legal bar. The divider lives on the bar, so the two legal
   lines share one rule.
   ====================== */
/* .taf-footer__social — rationale: docs/design/css-rationale/main.css.md#taf-footer-social */
.taf-footer__social {
  display: flex;
  gap: 0; /* the 44px boxes carry the spacing — see box-model note above */
  margin-top: calc(var(--space-16) - var(--space-12));
  margin-left: calc(-1 * var(--space-12));
}
.taf-footer__social a {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* tap target; the glyph is 20px */
  color: var(--footer-label);
  transition: color var(--speed) var(--ease);
}
.taf-footer__social a:hover,
.taf-footer__social a:focus-visible { color: var(--rose); }
.taf-footer__social svg { width: 20px; height: 20px; }
.taf-footer .taf-footer__legalbar { margin-top: var(--space-32); padding-top: var(--space-20); border-top: var(--bw-1) solid var(--footer-rule); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8) var(--space-20); flex-wrap: wrap; }
.taf-footer .taf-footer__legalbar .legal { margin: 0; padding: 0; border: none; }

/* Recipe-index collections band anchor (footer "Collections" target). */
#collections { scroll-margin-top: var(--space-64); }
/* #respond — rationale: docs/design/css-rationale/main.css.md#respond */
#respond { scroll-margin-top: calc(var(--space-64) + var(--space-16)); }

/* ---- Header social icons ----
   URLs + glyphs come from the footer's taf2026_footer_socials() so the two can never drift —
   see inc/header-social.php. 44px tap target. ---- */
.taf-headsocial { display: flex; align-items: center; gap: var(--space-2); }
.taf-headsocial__link {
  /* token-frozen: WCAG 2.5.5 — the 44px target is built from padding+size+border in this rule
     T6 must NOT remap these values to a scale — tokenize at parity only. */
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;              /* tap target; the glyph is 18px */
  color: var(--text-muted);
  transition: color var(--dur-18) var(--ease), transform var(--dur-18) var(--ease);
}
.taf-headsocial__link svg { width: 18px; height: 18px; display: block; }
.taf-headsocial__link:hover,
.taf-headsocial__link:focus-visible { color: var(--rose-deep); transform: translateY(-1px); }

/* Phones: the header row is already logo + CTA + search + hamburger — four more
   icons would crowd it out. Social stays desktop/tablet only; the footer row carries
   it on phones. */
@media (max-width: 767px) { .taf-headsocial { display: none; } }

/* @keyframes taf-kit-success-in — rationale: docs/design/css-rationale/main.css.md#keyframes-taf-kit-success-in */

/* @keyframes taf-kit-success-in — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#keyframes-taf-kit-success-in-2 */
@keyframes taf-kit-success-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: var(--o-1); transform: none; }
}
@keyframes taf-kit-check-draw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
.convertkit-form .formkit-alert.formkit-alert-success {
  animation: taf-kit-success-in var(--dur-35) var(--ease-out) both;
}
.convertkit-form .taf-kit-check {
  display: inline-block;
  width: var(--space-18);
  height: var(--space-18);
  margin-right: var(--space-8);
  vertical-align: calc(-1 * var(--space-4));
  fill: none;
  stroke: var(--rose);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.convertkit-form .taf-kit-check path {
  /* path length ≈23; 24 covers it. The draw starts as the panel lands
     (entrance .35s, draw .5s after a .12s delay — total under 1s). */
  stroke-dasharray: 24;
  animation: taf-kit-check-draw var(--dur-5) var(--ease-out) var(--dur-12) both;
}
@media (prefers-reduced-motion: reduce) {
  .convertkit-form .formkit-alert.formkit-alert-success { transform: none; opacity: var(--o-1); }
  .convertkit-form .taf-kit-check path { stroke-dashoffset: 0; }
}

/* body.search-no-results section.error .page-content > p — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#body-search-no-results-section-error-page-content-p */
/* body.search-no-results section.error .page-content > p — rationale: docs/design/css-rationale/main.css.md#body-search-no-results-section-error-page-content-p-2 */
body.search-no-results section.error .page-content > p { display: none; }
.taf-empty-chips {
  /* A real <ul> since 2026-07-17 (was role=list divs) — flatten the list chrome. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-12) 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.taf-empty-chips li { margin: 0; }
.taf-empty-chip {
  position: relative;
  font-size: var(--fs-13);
  font-weight: var(--w-bold);
  color: var(--rose-deep);
  text-decoration: none;
  background: var(--rose-tint);
  border-radius: var(--radius-99);
  padding: var(--space-8) var(--space-14);
}
.taf-empty-chip::before {
  /* Invisible 44px tap-target extension — same pattern (and same WCAG
     2.5.5 rationale) as `.taf-popular a::after`, which is what the drawer's
     Popular line uses now. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--space-44);
  transform: translateY(-50%);
}
.taf-empty-chip:hover,
.taf-empty-chip:focus-visible { color: var(--rose-deep); background: var(--line); }
.taf-search-empty__lead {
  margin: var(--space-8) 0 0;
  color: var(--text-muted);
}

/* .taf-btn:active, .wp-block-button.taf-btn .wp-block-button… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-btn-active-wp-block-button-taf-btn-wp-block-button-link- */
.taf-btn:active,
.wp-block-button.taf-btn .wp-block-button__link:active,
.taf-search .go:active,
#mobile-drawer .taf-mm-search__go:active,
.formkit-form .formkit-submit:active,
.taf-comments #respond input[type="submit"]:active,
.wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-link:active {
  transform: translateY(1px);
  transition: transform var(--dur-05) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .taf-btn:active,
  .wp-block-button.taf-btn .wp-block-button__link:active,
  .taf-search .go:active,
  #mobile-drawer .taf-mm-search__go:active,
  .formkit-form .formkit-submit:active,
  .taf-comments #respond input[type="submit"]:active,
  .wprm-recipe-template-taf-2026 .wprm-template-chic-buttons .wprm-recipe-link:active { transform: none; }
}

/* .entry-content .taf-tilecard__title, .taf-tilecard__title… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-tilecard-title-taf-tilecard-title-taf-tile */
.entry-content .taf-tilecard__title,
.taf-tilecard__title,
.taf-tile .t,
.taf-tile h3.t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* token-exempt: a line COUNT (2 lines), not a scale value */
  overflow: hidden;
  padding-bottom: var(--space-2);
  margin-bottom: calc(-1 * var(--space-2)); /* token-exempt: negative compensation for the descender padding above, not a scale step */
}

/* ==== Blog-post body polish (inc/post-polish.php; comp artifact d1a89cac).
   Scoped to .entry-content on single posts —
   finalized components (header, card, comments) are untouched. ==== */

/* .taf-toc — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-toc */
.taf-toc {
  margin: 28px 0;                     /* token-exempt: 28px comp margin — 1C exact */
  background: none;
  border: 1px solid #EFE2E8;          /* token-exempt: 1px #EFE2E8 comp keyline — 1C exact */
  border-radius: 0;                   /* square corners are the point of 1C */
  box-shadow: none;
  padding: var(--space-16) var(--space-18) var(--space-18);
}
.taf-toc__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  list-style: none; cursor: pointer;
  padding: 0 0 var(--space-14);
}
.taf-toc__bar::-webkit-details-marker { display: none; }
.taf-toc__bar:focus-visible { outline: var(--focus-ring) solid var(--focus-ring-color); outline-offset: -3px; }
.taf-toc__label {
  /* 1C spec says 11px. Review sized it up to 13px, tried 18px, and reverted:
     18 was too large against the toggle beside it. 13px is the settled value. */
  font-family: var(--ui); font-size: var(--fs-13); font-weight: var(--w-bold);
  letter-spacing: .16em; /* token-exempt: .16em comp label tracking */
  text-transform: uppercase; color: var(--cocoa);
}
/* Toggle: plain underlined text, no chevron. Mobile gets the 44px target. */
.taf-toc__state {
  display: inline-flex; align-items: center;
  min-height: var(--space-44);
}
.taf-toc__state em {
  display: none; font-style: normal;
  font-family: var(--sans); font-size: var(--fs-13); font-weight: var(--w-semibold);
  color: var(--cocoa); text-decoration: underline; text-underline-offset: 3px;
}
.taf-toc[open] .taf-toc__hide { display: inline; }
.taf-toc:not([open]) .taf-toc__show { display: inline; }
.taf-toc__bar:hover .taf-toc__state em { color: var(--rose-deep); }
.taf-toc ul.taf-toc__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.taf-toc ul.taf-toc__list > li { margin: 0; }
.taf-toc__list a {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: var(--space-8);  /* token-exempt: 22px comp number column */
  padding: 7px 0; min-height: var(--space-44);  /* token-exempt: 7px comp row padding */
  text-decoration: none; color: var(--chocolate);
  transition: color var(--speed) var(--ease);
}
/* Hover/active recolours the row text and NOTHING else — no fill, no move. */
.taf-toc__list a:hover, .taf-toc__list a:focus-visible { color: var(--rose-deep); }
/* THE ROW NUMBER IS A COUNTER, NOT DOM TEXT — and it must stay that way.
   It was a real <span class="taf-toc__num" aria-hidden="true">01</span> inside
   the anchor. aria-hidden hides it from screen readers, but Google reads TEXT
   CONTENT, not the accessibility tree, so the jump-links Google printed for
   this site read "01Why You'll Love This Recipe" — number welded to the
   heading, no space. Observed in a live SERP 2026-08-13. A pseudo-element
   cannot appear in text content, which is the whole point.
   The counter skips .taf-toc__recipe: that row is the card shortcut and has
   never carried a number.
   Rationale: docs/design/css-rationale/main.css.md#taf-toc-num */
.taf-toc__list { counter-reset: taf-toc; }
.taf-toc__list > li:not(.taf-toc__recipe) { counter-increment: taf-toc; }
.taf-toc__list > li:not(.taf-toc__recipe) > a::before {
  content: counter(taf-toc, decimal-leading-zero);
  font-family: var(--sans); font-size: var(--fs-12); font-weight: var(--w-semibold); color: var(--cocoa);
}
.taf-toc__list > li:not(.taf-toc__recipe) > a:hover::before,
.taf-toc__list > li:not(.taf-toc__recipe) > a:focus-visible::before { color: var(--rose-deep); }
/* TRANSITIONAL, and safe to delete once the HTML caches have rolled: nginx or
   Cloudflare can still be holding a page whose anchor carries the old span. On
   such a page the counter and the span would BOTH paint, showing "0101". */
.taf-toc__num { display: none; }
.taf-toc__t {
  font-family: var(--sans); font-size: var(--fs-16); font-weight: var(--w-medium);
  line-height: var(--lh-14); text-wrap: pretty;
}
/* Recipe row: same grid so it aligns to the titles, empty number cell. */
.taf-toc__recipe a {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: var(--space-8);  /* token-exempt: 22px comp number column */
  padding: 7px 0; min-height: var(--space-44);  /* token-exempt: 7px comp row padding */
  background: none; border-top: 0; text-decoration: none;
  font-family: var(--sans); font-size: var(--fs-16); font-weight: var(--w-bold);
  color: var(--rose-link);
  transition: color var(--speed) var(--ease);
}
.taf-toc__recipe a > span { grid-column: 2; }
.taf-toc__recipe a:hover, .taf-toc__recipe a:focus-visible { background: none; color: var(--rose-deep); }
@media (min-width: 900px) {
  .taf-toc { padding: var(--space-20) var(--space-24) 22px; /* token-exempt: 22px desktop comp padding */ }
  .taf-toc__bar { align-items: baseline; }
  .taf-toc__state { min-height: 0; }
  .taf-toc__list a, .taf-toc__recipe a { align-items: baseline; padding: 6px 0; min-height: 0; /* token-exempt: 6px comp row padding */ }
}

/* .taf-signoff — rationale: docs/design/css-rationale/main.css.md#taf-signoff */
.taf-signoff {
  /* .taf-signoff — rationale: docs/design/css-rationale/main.css.md#taf-signoff-2 */
  background: var(--cream);
  /* .taf-signoff — rationale: docs/design/css-rationale/main.css.md#taf-signoff-3 */
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-20);
  margin: var(--space-32) 0 var(--space-24);
  /* Phone centres the whole band; the desktop split
     restores left alignment, where the copy sits beside the actions. */
  text-align: center;
}
.taf-signoff p.taf-signoff__head {
  font-family: var(--display); font-weight: var(--w-semibold);
  /* token-exempt: 24px/1.2 band head — per comp */
  font-size: 24px; line-height: 1.2; letter-spacing: var(--ls--001em);
  color: var(--chocolate); margin: 0;
  text-wrap: balance;
}
.taf-signoff p.taf-signoff__body {
  font-family: var(--sans); font-size: var(--fs-15); line-height: var(--lh-16);
  color: var(--cocoa); margin: var(--space-8) 0 0;
  text-wrap: pretty;
}
.taf-signoff__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-10);
  background: var(--rose); color: var(--color-on-accent);
  font-family: var(--ui); font-size: var(--fs-16); font-weight: var(--w-bold);
  border-radius: var(--radius-sm); padding: var(--space-14, 14px) var(--space-20);
  min-height: 52px; margin-top: var(--space-16); text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.taf-signoff__cta:hover, .taf-signoff__cta:focus-visible { background: var(--rose-deep); color: var(--color-on-accent); }
.taf-signoff__cta svg { width: 20px; height: 20px; flex: none; }
.taf-signoff p.taf-signoff__or {
  font-family: var(--ui); font-size: var(--fs-12); font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--cocoa);
  margin: var(--space-16) 0 var(--space-10);
  padding-top: var(--space-16); border-top: var(--bw-1) solid var(--line);
}
.taf-signoff__socials { display: flex; flex-wrap: wrap; gap: var(--space-10); justify-content: center; }
.taf-signoff__tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: none;
  background: var(--paper); color: var(--rose);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.taf-signoff__tile svg { width: 22px; height: 22px; }
.taf-signoff__tile:hover, .taf-signoff__tile:focus-visible { background: var(--rose); color: var(--color-on-accent); }
@media (min-width: 900px) {
  .taf-signoff {
    display: flex; align-items: center; gap: var(--space-32);
    padding: var(--space-32) var(--space-32);
    text-align: left;
  }
  .taf-signoff__text { flex: 1 1 auto; min-width: 0; }
  .taf-signoff p.taf-signoff__head { font-size: 28px; /* token-exempt: comp desktop head */ }
  .taf-signoff__actions {
    flex: 0 0 auto; padding-left: var(--space-32);
    border-left: var(--bw-1) solid var(--line);
  }
  .taf-signoff__socials { justify-content: flex-start; }

  /* .taf-signoff__cta — rationale: docs/design/css-rationale/main.css.md#taf-signoff-cta */
  .taf-signoff__cta {
    margin-top: 0;
    min-height: var(--space-44);
    padding: var(--space-8) var(--space-20);
  }
  .taf-signoff p.taf-signoff__or {
    border-top: 0; padding-top: 0;
    margin: var(--space-8) 0;
  }
  .taf-signoff__tile { width: var(--space-44); height: var(--space-44); }
}

/* .entry-content .wprm-recipe-roundup-item — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item */
.entry-content .wprm-recipe-roundup-item {
  background: var(--paper) !important;
  border: var(--bw-1) solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  /* The photo bleeds to the card edge, so the card clips it and carries no
     padding of its own — the padding moved onto the text column. */
  overflow: hidden;
  padding: 0 !important;
  gap: 0;
  margin: 0 0 var(--space-20) !important;
  align-items: stretch;
  /* .entry-content .wprm-recipe-roundup-item — rationale: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-2 */
  text-align: left;
  flex-wrap: nowrap;
  /* .entry-content .wprm-recipe-roundup-item — rationale: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-3 *//* token-exempt: a crop floor, not a spacing step. Summaries run 87-151
     characters, so without it a short one collapses the card and the photo
     beside it crops to a letterbox. 212px is the tallest the copy gets at
     728px (24+28 padding, a 22px name, three 15px lines and the link). */
  min-height: 212px;
}
.entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-summary-container {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-28) !important;
}
.entry-content .wprm-recipe-roundup-item .wprm-recipe-name {
  font-family: var(--display) !important;
  font-size: var(--fs-22) !important;
  font-weight: var(--w-bold) !important;
  line-height: var(--lh-125) !important;
  color: var(--chocolate) !important;
  text-wrap: balance;
}
.entry-content .wprm-recipe-roundup-item .wprm-recipe-summary,
.entry-content .wprm-recipe-roundup-item .wprm-recipe-summary span {
  font-family: var(--sans) !important;
  font-size: var(--fs-15) !important;
  line-height: var(--lh-155) !important;
  color: var(--cocoa) !important;
}
/* .entry-content .wprm-recipe-roundup-item .wprm-recipe-summ… — rationale: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-wprm-recipe-summary */
.entry-content .wprm-recipe-roundup-item .wprm-recipe-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* .entry-content .wprm-recipe-roundup-item .wprm-recipe-roun… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-wprm-recipe-roundup-l */
.entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-link {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  /* .entry-content .wprm-recipe-roundup-item .wprm-recipe-roun… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-wprm-recipe-roundup-l-2 */
  border: 0 !important;
  margin: 0 !important;
  color: var(--rose-deep) !important;
  font-family: var(--ui) !important;
  font-size: var(--fs-13) !important;
  font-weight: var(--w-bold) !important;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: var(--shadow-underline) var(--cream);
  position: relative;
}
/* .entry-content .wprm-recipe-roundup-item .wprm-recipe-roun… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-wprm-recipe-roundup-l-3 */
.entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--space-44);
}
.entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-link::after { content: " \2192"; }
.entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-link:hover,
.entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-link:focus-visible { text-decoration: underline !important; }
/* .entry-content .wprm-recipe-roundup-item .wprm-recipe-imag… — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-wprm-recipe-image */
.entry-content .wprm-recipe-roundup-item .wprm-recipe-image {
  order: -1;
  flex: 0 0 40%;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}
/* .entry-content .wprm-recipe-roundup-item .wprm-recipe-imag… — rationale: docs/design/css-rationale/main.css.md#entry-content-wprm-recipe-roundup-item-wprm-recipe-image-dps */
.entry-content .wprm-recipe-roundup-item .wprm-recipe-image .dpsp-pin-it-wrapper,
.entry-content .wprm-recipe-roundup-item .wprm-recipe-image > img {
  display: block !important;
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}
.entry-content .wprm-recipe-roundup-item .wprm-recipe-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* WPRM writes `border-radius: 5px` as an INLINE style on the img, so this
     needs !important to lose the corner the card now owns. */
  border-radius: 0 !important;
}
.entry-content .wprm-recipe-roundup-item .wprm-spacer { display: none !important; }

@media (max-width: 559px) {
  /* Phone: stack, photo first — a thumb beside three lines of summary leaves
     the text column too narrow to read. The card keeps its clip, so the photo
     still reaches both edges. */
  .entry-content .wprm-recipe-roundup-item {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .entry-content .wprm-recipe-roundup-item .wprm-recipe-image {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 2;  /* token-exempt: photo crop ratio, not a spacing/size scale value */
  }
  .entry-content .wprm-recipe-roundup-item .wprm-recipe-roundup-summary-container {
    justify-content: flex-start;
    padding: var(--space-18) var(--space-18) var(--space-20) !important;
  }
  .entry-content .wprm-recipe-roundup-item .wprm-recipe-name { font-size: var(--fs-19) !important; }
}

/* .entry-hero-container-inner — rationale: docs/design/css-rationale/main.css.md#entry-hero-container-inner */
.entry-hero-container-inner { background: var(--rose-tint) !important; }
.entry-hero.page-hero-section .entry-header { min-height: var(--space-90) !important; }
.page-hero-section + .content-area,
.entry-hero.page-hero-section ~ .content-area { margin-top: var(--space-24) !important; }
.page-hero-section ~ .content-area .entry-content-wrap { padding-top: var(--space-16); }

/* .entry-content > h2, .entry-content .wp-block-group h2 — rationale: docs/design/css-rationale/main.css.md#entry-content-h2-entry-content-wp-block-group-h2 */
.entry-content > h2, .entry-content .wp-block-group h2 {
  padding-bottom: var(--space-8);
}

/* ---- Callout unification: the hard-coded #eef3f4 tip/reader-love/quick-pick
   groups adopt the Warm Oven milk ground (inline style needs !important) ---- */
/* .entry-content .has-background[style*="eef3f4"] — rationale: docs/design/css-rationale/main.css.md#entry-content-has-background-style-eef3f4 */
.entry-content .has-background[style*="eef3f4"] {
  /* --cream (#FAEDF2) is the Warm Oven PANEL tint; --milk is the page ground.
     Shipping --milk here painted the box invisible and Kadence's 30px group
     padding read as random indentation. */
  background-color: var(--cream) !important;
  border-radius: var(--radius);
  /* .entry-content .has-background[style*="eef3f4"] — rationale: docs/design/css-rationale/main.css.md#entry-content-has-background-style-eef3f4-2 */
  padding-inline: var(--space-12) !important;
  margin-inline: calc(-1 * var(--space-12));
}
/* A tinted PARAGRAPH has no group padding of its own — give it the panel's. */
.entry-content p.has-background[style*="eef3f4"] {
  padding: var(--space-16) var(--space-16) !important;
  margin-inline: 0;
}

/* .entry-content .taf-card-pointer — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-card-pointer */

/* ---- "See the recipe card" pointer: quiet, already-italic line ---- */
.entry-content .taf-card-pointer { font-size: var(--fs-15); color: var(--cocoa); }

/* .entry-content .taf-slot — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-slot */
.entry-content .taf-slot { display: none; }

/* (Pin frame retired before ship — post-card pin images
   stay plain. Only breathing room above them remains.) */
.entry-content .wprm-recipe-container ~ figure.wp-block-image,
.entry-content .wprm-recipe-container ~ .wp-block-image {
  margin-top: var(--space-24);
}

/* ---- Cruft guards: empty paragraphs/list items ship in ~100 posts ---- */
.entry-content p:empty, .entry-content li:empty { display: none; }

/* ---- FSRI tile titles: match the house tile line-height ---- */
.entry-content .fsri-title { line-height: var(--lh-13); }

/* ---- FAQ accordion: long questions keep the arrow beside the text ---- */
.entry-content .schema-faq-section summary { flex-wrap: nowrap; }

/* ---- Theme-owned FAQ cards (post-polish faq transform; replaces Feast's
   injected accordion). Native <details>, no JS. ---- */
.taf-faq { margin: 0 0 var(--space-16); }
.taf-faq__item {
  background: var(--paper);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-8);
}
.taf-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-8);
  list-style: none; cursor: pointer;
  font-weight: var(--w-semibold); font-size: var(--fs-16); color: var(--chocolate);
  padding: var(--space-12) var(--space-16); min-height: 44px;
}
.taf-faq__q::-webkit-details-marker { display: none; }
.taf-faq__q:focus-visible { outline: var(--focus-ring) solid var(--rose); outline-offset: 2px; border-radius: var(--radius-sm); }
.taf-faq__caret { color: var(--rose); flex: none; transition: transform var(--speed) var(--ease); }
.taf-faq__item[open] .taf-faq__caret { transform: rotate(180deg); }
.taf-faq__a { padding: 0 var(--space-16) var(--space-12); color: var(--cocoa); }
.taf-faq__a img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.taf-faq__a a { color: var(--rose); }

/* .taf-faq .taf-faq__q — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-faq-taf-faq-q */
.taf-faq .taf-faq__q { font-size: var(--fs-18); }
.taf-faq .taf-faq__a { font-size: var(--fs-18); }

/* ---- Step columns render 2-up at ALL widths (ours stay side-by-side) ---- */
.entry-content .wp-block-columns > .wp-block-column {
  flex-basis: 0 !important; /* beats core's mobile flex-basis:100%!important — same specificity, later sheet */
  flex-grow: 1;
  min-width: 0;
}

/* ---- Review pitch (post-polish): the author's "leave a review" line, rendered
   as a component instead of a raw tinted paragraph — copy left, CTA right,
   stacking on phones. ---- */
.taf-reviewpitch {
  display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap;
  background: var(--cream);
  border: var(--bw-1) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-16) var(--space-20);
  margin: var(--space-24) 0;
}
.taf-reviewpitch p.taf-reviewpitch__text {
  flex: 1 1 260px; margin: 0;
  font-family: var(--sans); font-size: var(--fs-15); line-height: var(--lh-15);
  color: var(--chocolate); text-wrap: pretty;
}
.taf-reviewpitch__cta {
  display: inline-flex; align-items: center; gap: var(--space-8);
  flex: none; min-height: 44px;
  font-family: var(--ui); font-size: var(--fs-15); font-weight: var(--w-bold);
  color: var(--rose); text-decoration: none; white-space: nowrap;
}
.taf-reviewpitch__cta svg { width: 15px; height: 15px; transition: transform var(--speed) var(--ease); }
.taf-reviewpitch__cta:hover, .taf-reviewpitch__cta:focus-visible { color: var(--rose-deep); text-decoration: underline; }
.taf-reviewpitch__cta:hover svg { transform: translateX(2px); }

/* .taf-post-content .dpsp-total-share-wrapper, .taf-post-con… — rationale: docs/design/css-rationale/main.css.md#taf-post-content-dpsp-total-share-wrapper-taf-post-content-d */

/* .taf-post-content .dpsp-total-share-wrapper, .taf-post-con… — rationale: docs/design/css-rationale/main.css.md#taf-post-content-dpsp-total-share-wrapper-taf-post-content-d-2 */
.taf-post-content .dpsp-total-share-wrapper,
.taf-post-content .dpsp-total-share-wrapper .dpsp-total-share-count,
.taf-post-content .dpsp-total-share-wrapper > span { width: auto; }

/* .taf-post-content > .wp-block-group.has-background — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-post-content-wp-block-group-has-background */
.taf-post-content > .wp-block-group.has-background { margin-left: 0; margin-right: 0; }

/* .page-id-21 .entry.content-bg — rationale: docs/design/css-rationale/main.css.md#page-id-21-entry-content-bg */

/* .page-id-21 .entry.content-bg — rationale: docs/design/css-rationale/main.css.md#page-id-21-entry-content-bg-2 */
.page-id-21 .entry.content-bg {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* .page-id-21 .taf-abt-bandwrap — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#page-id-21-taf-abt-bandwrap */
.page-id-21 .taf-abt-bandwrap {
  background: var(--bg-tinted);
  padding: var(--space-32) 0;
  border-top: var(--bw-1) solid var(--border-hairline);
}
/* .page-id-21 .taf-abt-bandwrap .taf-magnet — rationale: docs/design/css-rationale/main.css.md#page-id-21-taf-abt-bandwrap-taf-magnet */
.page-id-21 .taf-abt-bandwrap .taf-magnet {
  background: transparent;
  border: 0;
  padding: 0;
}
/* The band already draws the section's top hairline, so the section inside it
   must not draw a second one 32px lower. */
/* .page-id-21 .taf-abt-bandwrap .taf-abt--rule::before — rationale: docs/design/css-rationale/main.css.md#page-id-21-taf-abt-bandwrap-taf-abt-rule-before */
.page-id-21 .taf-abt-bandwrap .taf-abt--rule::before { content: none; }

/* .page-id-21 .taf-abt-bandwrap > .taf-section — rationale: docs/design/css-rationale/main.css.md#page-id-21-taf-abt-bandwrap-taf-section */
.page-id-21 .taf-abt-bandwrap > .taf-section {
  padding-top: 0;
  padding-bottom: 0;
}
.page-id-21 .taf-abt-bandwrap { padding: var(--space-32) 0; }

/* .page-id-21 .taf-abt-bandwrap .taf-magnet p — rationale: docs/design/css-rationale/main.css.md#page-id-21-taf-abt-bandwrap-taf-magnet-p */
.page-id-21 .taf-abt-bandwrap .taf-magnet p { max-width: none; }

/* .page-id-21 .taf-abt-bandwrap .taf-magnet — rationale: docs/design/css-rationale/main.css.md#page-id-21-taf-abt-bandwrap-taf-magnet-2 */
.page-id-21 .taf-abt-bandwrap .taf-magnet { margin-top: 0; margin-bottom: 0; }
.page-id-21 .taf-abt-bandwrap .taf-magnet > :first-child { margin-top: 0; }
.page-id-21 .taf-abt-bandwrap .taf-magnet > :last-child { margin-bottom: 0; }

/* @media (max-width: 899.98px) — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#media-max-width-899-98px */
@media (max-width: 899.98px) {
  .site-header .search-toggle-open { display: none; }

  /* .site-header .menu-toggle-open .kadence-svg-iconset — rationale: docs/design/css-rationale/main.css.md#site-header-menu-toggle-open-kadence-svg-iconset */
  .site-header .menu-toggle-open .kadence-svg-iconset { display: none; }
  .site-header .menu-toggle-open::before {
    content: "";
    display: block;
    /* .site-header .menu-toggle-open::before — rationale: docs/design/css-rationale/main.css.md#site-header-menu-toggle-open-before */
    width: var(--space-28, 28px);
    height: var(--space-28, 28px);
    background-color: currentColor;
    -webkit-mask: var(--taf-menusearch) center / contain no-repeat;
    mask: var(--taf-menusearch) center / contain no-repeat;
  }
}
/* :root — rationale: docs/design/css-rationale/main.css.md#root-21 */
:root {
  --taf-menusearch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M2.5 6h19M2.5 12h9.5M2.5 18h9.5'/%3E%3Ccircle cx='17' cy='14.6' r='4.6'/%3E%3Cpath d='M20.4 18 22.6 20.2'/%3E%3C/svg%3E");
}

/* .taf-mm-index — rationale: docs/design/css-rationale/main.css.md#taf-mm-index */
.taf-mm-index {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  margin-top: var(--space-14);
  padding: var(--space-14) var(--space-16);
  min-height: var(--space-44);
  background: var(--rose-tint);
  color: var(--rose-deep);
  border-radius: var(--radius-sm);
  font-family: var(--display);
  font-size: var(--fs-15);
  font-weight: var(--w-bold);
  text-decoration: none;
}
.taf-mm-index svg { flex: none; }
.taf-mm-index:hover,
.taf-mm-index:focus-visible { background: var(--rose); color: var(--color-on-accent); }

/* .entry-content .taf-readerlove — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove */
.entry-content .taf-readerlove {
  /* .entry-content .taf-readerlove — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-2 */
  margin: var(--space-40) 0;
  text-align: center;
}
/* .entry-content .taf-readerlove__q — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-q */

/* .entry-content .taf-readerlove__q — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-q-2 */
/* .entry-content .taf-readerlove__q — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-q-3 */
.entry-content .taf-readerlove__q { margin: 0 auto; padding: 0; max-width: 30em; }
.entry-content .taf-readerlove__q + .taf-readerlove__q {
  position: relative;
  margin-top: var(--space-24);
  padding-top: var(--space-24);
}
/* .entry-content .taf-readerlove__q + .taf-readerlove__q::be… — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-q-taf-readerlove-q-before */
.entry-content .taf-readerlove__q + .taf-readerlove__q::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--space-40);
  margin-left: calc(-1 * var(--space-20));
  border-top: var(--bw-1) solid var(--border-hairline);
}

/* .entry-content .taf-readerlove__text — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-text */

.entry-content .taf-readerlove__text {
  font-family: var(--display);
  font-weight: var(--w-medium);
  font-size: var(--fs-22);
  line-height: var(--lh-135);
  letter-spacing: var(--ls--001em);
  color: var(--chocolate);
  text-wrap: balance;
  margin: 0 auto;
  padding: 0;
  border: 0;      /* the core block's 4px #33202B bar, dead at the source */
  quotes: none;   /* the marks are real characters in the text, not generated */
}
/* TWO QUOTES ARE THE SAME SIZE. The second is NOT a quieter echo — a review
   decision, and it is not negotiable on a whim: a pair of reader comments are
   two equal voices, and shrinking the second read as a hierarchy that is not
   there. The `--lead` / `--echo` classes still exist, because the ORDER still
   matters for the hairline and the spacing between them; only the type is
   identical now.
   Long copy steps DOWN a size rather than cutting a reader's words, and the
   step applies to BOTH quotes so a pair can never end up mismatched.
   Rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-text */
.entry-content .taf-readerlove__q.is-long  .taf-readerlove__text { font-size: var(--fs-20); }
.entry-content .taf-readerlove__q.is-xlong .taf-readerlove__text { font-size: var(--fs-18); }

.entry-content .taf-readerlove__who {
  font-family: var(--display);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-14em);
  text-transform: uppercase;
  color: var(--rose-deep);
  text-align: center;
  margin: var(--space-16) 0 0;
}
/* The name gap was 12 under the echo and 16 under the lead, to sit with the
   echo's smaller type. The type is identical now, so the gap is too — a 4px
   difference under matching quotes reads as a bug, not as a rhythm. */

/* .entry-content .taf-readerlove--single — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-single */
.entry-content .taf-readerlove--single { margin: var(--space-48) 0; }
.entry-content .taf-readerlove--single .taf-readerlove__q--lead .taf-readerlove__text {
  font-size: var(--fs-26);
}
/* .entry-content .taf-readerlove--single .taf-readerlove__q-… — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-single-taf-readerlove-q-lead-is */
.entry-content .taf-readerlove--single .taf-readerlove__q--lead.is-long .taf-readerlove__text {
  font-size: var(--fs-22);
}
.entry-content .taf-readerlove--single .taf-readerlove__q--lead.is-xlong .taf-readerlove__text {
  font-size: var(--fs-20);
}
/* @media (max-width: 699.98px) — rationale: docs/design/css-rationale/main.css.md#media-max-width-699-98px-3 */
@media (max-width: 699.98px) {
  .entry-content .taf-readerlove--single .taf-readerlove__q--lead .taf-readerlove__text {
    font-size: var(--fs-24);
  }
}

/* .entry-content .taf-readerlove--anon .taf-readerlove__q +… — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-anon-taf-readerlove-q-taf-reade */
.entry-content .taf-readerlove--anon .taf-readerlove__q + .taf-readerlove__q {
  margin-top: var(--space-32);
  padding-top: var(--space-32);
}
/* .entry-content .taf-readerlove--anon — rationale: docs/design/css-rationale/main.css.md#entry-content-taf-readerlove-anon */
.entry-content .taf-readerlove--anon { margin-bottom: var(--space-48); }

/* .entry-content blockquote.wp-block-quote — rationale: docs/design/css-rationale/main.css.md#entry-content-blockquote-wp-block-quote */
.entry-content blockquote.wp-block-quote {
  border-left: var(--bw-15) solid var(--border-hairline);
}

/* @media (max-width: 699.98px) — rationale: docs/design/css-rationale/main.css.md#media-max-width-699-98px-4 */

/* @media (max-width: 699.98px) — rationale: docs/design/css-rationale/main.css.md#media-max-width-699-98px-5 */
@media (max-width: 699.98px) {
  /* .taf-introcard__card — !! DELIBERATE VALUE, DO NOT "FIX" WITHOUT READING: docs/design/css-rationale/main.css.md#taf-introcard-card */
  .taf-introcard__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-14);
    row-gap: var(--space-12);
    align-items: center;
  }
  .taf-introcard__body { display: contents; }
  .taf-introcard__avatar {
    grid-column: 1; grid-row: 1;
    width: max-content; margin: 0;   /* the figure is block and would take the whole track */
  }
  .taf-introcard__body > h2 { grid-column: 2; grid-row: 1; }
  .taf-introcard__body > p  { grid-column: 1 / -1; grid-row: 2; }
  .taf-introcard__link      { grid-column: 1 / -1; grid-row: 3; }
  /* The card's own bottom padding was 4px against 24px at the top — the link
     used to hang below the flex row and needed the room. It no longer does, so
     the box closes symmetrically. */
  .taf-introcard { padding-bottom: var(--space-24); }
}