/*
Theme Name: In the Kibble v4
Theme URI: https://inthekibble.com
Description: v4 concept build - brutalist editorial treatment of the Open Score archive. Staging only.
Author: Creahive
Version: 0.1.0
Text Domain: itk-v4
*/

/* ============================================================
   Design tokens - taken from the v4 concept
   ============================================================ */
:root {
  --ink:    #111210;
  --blue:   #1A46F0;
  --blue-d: #0F2FB8;
  --green:  #17652F;
  --amber:  #8A5208;
  --red:    #A82C16;

  --bg:      #FBFBF9;
  --panel:   #F4F4F1;
  --white:   #FFFFFF;
  --rule:    #DEDEDA;
  --rule-lt: #EDEDE9;
  --rule-md: #E3E3DE;

  /* Text greys are set against #FBFBF9 to clear WCAG AA at small sizes.
     The previous values ran as low as 2.57:1, which failed 8 of 11 styles. */
  --muted:   #66675F;
  --muted-2: #70716A;
  --body:    #4B4C45;
  --body-2:  #3B3C36;
  --dim:     #C6C6BF;   /* on dark backgrounds only */

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Archivo, Helvetica, Arial, sans-serif;

  /* One spacing scale, so section rhythm stops being ad hoc. */
  --s1: 8px; --s2: 14px; --s3: 22px; --s4: 34px; --s5: 52px; --s6: 76px;
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 68ch;
  --shell: 1320px;

  --header-h: 66px;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }
input, select, button, textarea { font-family: inherit; }

@keyframes kibbleTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kibblePulse  { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ============================================================
   Typographic utilities
   ============================================================ */
.k-mono  { font-family: var(--mono); }
.k-kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}
.k-kicker--blue { color: var(--blue); }
.k-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--muted);
  text-transform: uppercase;
}
.k-h1 {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.k-h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 37px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.k-h3 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: 1.05;
}
.k-lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

/* ============================================================
   Shell: one sticky header, no persistent rail
   ============================================================ */
.k-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 0 0 10px 10px; font-weight: 600;
  transition: top .16s var(--ease);
}
.k-skip:focus { top: 0; text-decoration: none; color: var(--bg); }

.k-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 251, 249, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.k-header__in {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--gutter); height: var(--header-h);
}
.k-brand { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.k-brand__name {
  font-size: 21px; font-weight: 800; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--ink);
}
.k-brand:hover { text-decoration: none; }

.k-nav { display: flex; align-items: center; gap: 4px; }
.k-nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.k-nav a:hover { background: var(--rule-lt); text-decoration: none; }
.k-nav a.is-active { color: var(--blue); }
.k-nav a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--blue); border-radius: 2px;
}

.k-header__aux { display: flex; align-items: center; gap: var(--s2); }
.k-hsearch {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 0 14px; height: 40px; background: var(--white);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.k-hsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,70,240,.16); }
.k-hsearch__icon { color: var(--muted); flex: none; }
.k-hsearch input { border: 0; outline: none; background: none; width: 140px; font-size: 14.5px; }

.k-btn-dark {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 600; border: 0; cursor: pointer;
  transition: background .16s var(--ease);
}
.k-btn-dark:hover { background: var(--blue); color: #fff; text-decoration: none; }

/* Mobile menu */
.k-burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--white); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.k-burger__bar { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.k-burger[aria-expanded="true"] .k-burger__bar:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.k-burger[aria-expanded="true"] .k-burger__bar:last-of-type  { transform: translateY(-3.5px) rotate(-45deg); }

.k-mnav { border-top: 1px solid var(--rule); background: var(--bg); padding: var(--s1) var(--gutter) var(--s3); }
.k-mnav a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--rule-lt); color: var(--ink);
}
.k-mnav a:last-child { border-bottom: 0; }
.k-mnav a:hover { text-decoration: none; }
.k-mnav strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.k-mnav span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.k-mnav a.is-active strong { color: var(--blue); }

.k-main { min-width: 0; }

/* ============================================================
   Sections
   ============================================================ */
.k-section { padding: 58px 56px; border-bottom: 1px solid var(--rule); }
.k-section--tight { padding: 46px 56px; }
.k-hero {
  padding: 72px 56px 46px;
  border-bottom: 1px solid var(--rule);
  background-image:
    linear-gradient(#F2F2EE 1px, transparent 1px),
    linear-gradient(90deg, #F2F2EE 1px, transparent 1px);
  background-size: 44px 44px;
}
.k-hero__eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .22em; color: var(--blue); margin-bottom: 22px;
}
.k-hero__lede {
  max-width: 52ch; margin: 26px 0 0;
  font-size: 18px; line-height: 1.55; color: var(--body); text-wrap: pretty;
}

/* Search */
.k-search {
  display: flex; margin-top: 36px; max-width: 740px;
  border: 2px solid var(--ink); background: var(--white);
}
.k-search__icon {
  display: flex; align-items: center; padding: 0 16px;
  border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: 15px; color: var(--muted);
}
.k-search__input {
  flex: 1; border: 0; outline: none; padding: 17px 14px;
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .08em;
  text-transform: uppercase; background: transparent;
}
.k-search__submit {
  border: 0; padding: 0 30px; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .18em; cursor: pointer;
}

/* Chips */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.k-chip {
  padding: 8px 13px; border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em;
  background: var(--white); color: var(--ink); text-transform: uppercase;
}
.k-chip:hover { text-decoration: none; }
.k-chip.is-active { background: var(--ink); color: var(--bg); }

/* Stat strip */
.k-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ink);
}
.k-stats--boxed { border: 1px solid var(--ink); margin-top: 34px; }
.k-stat { padding: 22px 24px; border-right: 1px solid var(--rule); }
.k-stat:last-child { border-right: 0; }
.k-stat__value { font-size: 33px; font-weight: 700; letter-spacing: -.03em; }
.k-stat__label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .15em;
  margin-top: 6px; opacity: .62;
}
.k-stat--blue { background: var(--blue); color: #fff; }

/* Ticker */
.k-ticker {
  overflow: hidden; background: var(--blue); color: #fff;
  height: 34px; display: flex; align-items: center;
}
.k-ticker__track {
  display: flex; gap: 46px; white-space: nowrap;
  animation: kibbleTicker 38s linear infinite;
  padding-right: 46px;
  font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .15em;
}
@media (prefers-reduced-motion: reduce) {
  .k-ticker__track { animation: none; }
}

/* Split section */
.k-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; }
.k-split--narrow { grid-template-columns: 300px minmax(0, 1fr); }
.k-defs { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.k-def {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--rule); padding-top: 10px;
}
.k-def__k { font-family: var(--mono); font-size: 12px; letter-spacing: .13em; color: var(--muted); }
.k-def__v { font-size: 15px; font-weight: 600; text-align: right; }

/* Score lines */
.k-scorebox { background: var(--panel); border: 1px solid var(--rule); padding: 26px; }
.k-scorelines { display: flex; flex-direction: column; gap: 12px; }
.k-scoreline {
  background: var(--white); border: 1px solid var(--rule); padding: 16px 18px;
  display: grid; grid-template-columns: 34px minmax(0,1fr) 76px;
  gap: 18px; align-items: center;
}
.k-scoreline__num {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--blue);
}
.k-scoreline__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.k-scoreline__note {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
  color: var(--muted); margin-top: 5px;
}
.k-scoreline__max {
  text-align: right; font-family: var(--mono); font-size: 16px; font-weight: 600;
}
.k-bar { height: 4px; background: var(--rule-lt); margin-top: 10px; }
.k-bar__fill { height: 4px; background: var(--ink); }
.k-bar__fill--blue  { background: var(--blue); }
.k-bar__fill--amber { background: var(--amber); }

/* Card trio */
.k-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k-card { border: 1px solid var(--rule); background: var(--white); padding: 22px; }
.k-card--panel { background: var(--panel); }
.k-card--dark {
  background: var(--ink); color: var(--bg); padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px;
  background-image: repeating-linear-gradient(135deg, #1B1C19 0 10px, #111210 10px 20px);
}
.k-card--dark .k-h3 { color: var(--bg); }
.k-card__copy { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--body); }
.k-card--dark .k-card__copy { color: var(--dim); max-width: 40ch; }

/* Dry-matter rows */
.k-dm {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 8px;
  border-top: 1px solid var(--rule-md); padding: 9px 0;
  font-family: var(--mono); font-size: 13.5px;
}
.k-dm__name { font-weight: 600; }
.k-dm__asfed { color: var(--muted); }
.k-dm__read { text-align: right; font-weight: 600; }
.k-legend {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--muted-2); margin-top: 14px; line-height: 1.7;
}

/* Mini cards */
.k-minis { display: flex; flex-direction: column; gap: 20px; }
.k-mini { flex: 1; border: 1px solid var(--rule); background: var(--white); padding: 22px; }
.k-mini h4 {
  margin: 10px 0 8px; font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1;
}
.k-mini p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }

/* Section head with action */
.k-sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.k-morelink {
  font-family: var(--mono); font-size: 13px; letter-spacing: .15em;
  color: var(--blue); border-bottom: 1px solid var(--blue); white-space: nowrap;
}
.k-morelink:hover { text-decoration: none; }

/* Product grid + cards */
.k-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.k-food {
  border: 1px solid var(--rule); background: var(--white);
  display: flex; flex-direction: column; color: inherit;
}
.k-food:hover { text-decoration: none; color: inherit; border-color: var(--ink); }
.k-food__shot {
  height: 172px; overflow: hidden;
  background-image: repeating-linear-gradient(45deg, #E9E9E4 0 8px, #F4F4F1 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  color: var(--muted-2); text-align: center; padding: 12px;
}
.k-food__shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.k-food__body {
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.k-food__brand {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase;
}
.k-food__name {
  margin: 0; font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.k-food__foot {
  margin-top: auto; display: flex; align-items: flex-end;
  justify-content: space-between; border-top: 1px solid var(--rule-lt); padding-top: 12px;
}
.k-food__metric {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted);
}
.k-food__metric b { display: block; color: var(--ink); font-size: 14px; font-weight: 500; }
.k-food__score { font-size: 29px; font-weight: 700; letter-spacing: -.04em; }

/* Score colour helpers */
.k-sc-blue  { color: var(--blue); }
.k-sc-ink   { color: var(--ink); }
.k-sc-amber { color: var(--amber); }
.k-sc-red   { color: var(--red); }
.k-sc-green { color: var(--green); }

/* Tables (recalls) */
.k-table { border: 1px solid var(--ink); background: var(--white); }
.k-table__head, .k-table__row { display: grid; align-items: center; }
.k-table__head {
  padding: 11px 18px; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
}
.k-table__row { padding: 13px 18px; border-bottom: 1px solid var(--rule-lt); gap: 14px; }
.k-table__row:last-child { border-bottom: 0; }
.k-cols-3 { grid-template-columns: 130px 1.1fr 1.5fr; }
.k-cols-4 { grid-template-columns: 130px 1fr 1.1fr 1.3fr; }
.k-td-date { font-family: var(--mono); font-size: 13.5px; color: var(--body); }
.k-td-brand { font-size: 16px; font-weight: 600; }
.k-td-reason {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; font-weight: 600;
}
.k-td-detail { font-size: 15px; color: var(--body); line-height: 1.45; }

/* Signup band */
.k-band {
  background: var(--ink); color: var(--bg); padding: 70px 56px; text-align: center;
}
.k-band h2 {
  margin: 0; font-size: clamp(30px, 4.4vw, 48px); font-weight: 800;
  letter-spacing: -.04em; text-transform: uppercase;
}
.k-band__sub {
  font-family: var(--mono); font-size: 13px; letter-spacing: .2em;
  color: #7C7C74; margin-top: 14px;
}
.k-band__form {
  max-width: 470px; margin: 32px auto 0;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--body-2); padding-bottom: 10px;
}
.k-band__form input {
  flex: 1; background: transparent; border: 0; outline: none; color: var(--bg);
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em;
}
.k-band__form button {
  background: none; border: 0; color: var(--blue); font-size: 19px; cursor: pointer;
}

/* Footer */
.k-footer { background: var(--bg); border-top: 1px solid var(--ink); padding: 48px 56px 36px; }
.k-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.k-footer__title {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; margin-bottom: 14px;
}
.k-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.k-footer__list a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; color: var(--body);
}
.k-footer__list a:hover { color: var(--blue); }
.k-footer__legal {
  margin-top: 36px; border-top: 1px solid var(--rule); padding-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--muted-2);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* Staging ribbon */
.k-staging {
  background: var(--amber); color: #fff; text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  padding: 5px 10px; text-transform: uppercase;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .k-grid4 { grid-template-columns: repeat(2, 1fr); }
  .k-trio  { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .k-split, .k-split--narrow { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .k-nav { display: none; }
  .k-section, .k-section--tight, .k-hero, .k-band { padding-left: 20px; padding-right: 20px; }
  .k-stats { grid-template-columns: repeat(2, 1fr); }
  .k-stat { border-bottom: 1px solid var(--rule); }
  .k-cols-3, .k-cols-4 { grid-template-columns: 1fr; }
  .k-table__head { display: none; }
  .k-table__row { gap: 6px; }
  .k-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .k-grid4 { grid-template-columns: 1fr; }
  .k-search { flex-wrap: wrap; }
  .k-footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Product page - warmer, softer treatment
   ------------------------------------------------------------
   The concept renders a product as a lab dossier. This site is a guide for
   pet parents, so the product page keeps the real figures but softens the
   edges: rounded panels, plain-language verdicts, explanations beside every
   number rather than a legend at the bottom.
   ============================================================ */
.p-wrap { padding: 34px 48px 60px; max-width: 1180px; }

.p-crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 22px;
}
.p-crumbs a { color: var(--muted); }
.p-crumbs a:hover { color: var(--blue); }

.p-head { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 44px; align-items: start; }
.p-brand {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .15em; color: var(--blue); text-transform: uppercase;
}
.p-title {
  margin: 12px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
  font-weight: 800; letter-spacing: -.03em; max-width: 20ch;
}
.p-sub { margin: 14px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--body); max-width: 56ch; }

/* Verdict + score */
.p-verdict {
  display: flex; align-items: center; gap: 18px;
  margin-top: 24px; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 14px;
}
.p-dial {
  --pct: 0;
  width: 82px; height: 82px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--dial, var(--blue)) calc(var(--pct) * 1%), #EAEAE4 0);
  display: grid; place-items: center;
}
.p-dial__inner {
  width: 64px; height: 64px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center; line-height: 1;
}
.p-dial__num { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.p-dial__den { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); margin-top: 2px; }
.p-verdict__title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.p-verdict__copy { margin: 5px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--body); }

/* Quick facts */
.p-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px;
}
.p-fact {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px;
}
.p-fact__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; color: var(--muted); text-transform: uppercase; }
.p-fact__v { font-size: 20px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.p-fact__n { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.p-shot {
  border: 1px solid var(--rule); border-radius: 16px; background: var(--white);
  padding: 18px; display: grid; place-items: center; min-height: 300px;
}
.p-shot img { max-height: 300px; width: auto; object-fit: contain; }
.p-shot__ph {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; color: var(--muted-2);
  text-align: center;
}

/* Generic soft section */
.p-sec { margin-top: 46px; }
.p-sec__head { margin-bottom: 18px; }
.p-sec__title { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.p-sec__note { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 68ch; }

.p-panel {
  background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 24px 26px;
}
.p-panel--warm { background: var(--panel); }

/* Ingredients */
.p-ings { display: flex; flex-wrap: wrap; gap: 10px; }
.p-ing {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px 9px 11px;
  background: var(--white); font-size: 15.5px; font-weight: 500; color: inherit;
}
.p-ing:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.p-ing__n {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 10.5px;
  display: grid; place-items: center;
}
.p-ing--protein .p-ing__n { background: var(--green); }
.p-note {
  margin-top: 16px; border-left: 3px solid var(--blue);
  background: var(--panel); border-radius: 0 12px 12px 0; padding: 14px 18px;
  font-size: 15.5px; line-height: 1.6; color: var(--body-2);
}

/* Analysis rows */
.p-rows { display: flex; flex-direction: column; }
.p-row {
  display: grid; grid-template-columns: minmax(0,1.6fr) 90px 90px minmax(0,1.1fr);
  gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rule-lt);
}
.p-row:last-child { border-bottom: 0; }
.p-row__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}
.p-row__name { font-size: 16.5px; font-weight: 600; }
.p-row__num  { font-size: 16.5px; font-variant-numeric: tabular-nums; }
.p-row__num--lead { font-weight: 700; }
.p-row__say  { font-size: 14.5px; color: var(--body); line-height: 1.45; }

/* Score breakdown */
.p-line { padding: 18px 0; border-bottom: 1px solid var(--rule-lt); }
.p-line:last-child { border-bottom: 0; }
.p-line__top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.p-line__title { font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; }
.p-line__pts { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.p-line__why { margin: 8px 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--body); max-width: 74ch; }
.p-track { height: 6px; background: var(--rule-lt); border-radius: 999px; overflow: hidden; }
.p-track__fill { height: 6px; border-radius: 999px; background: var(--blue); }

/* Recall banner */
.p-recall { display: flex; gap: 16px; align-items: flex-start; border-radius: 16px; padding: 20px 22px; }
.p-recall--clear { background: #EEF6F0; border: 1px solid #CFE6D6; }
.p-recall--warn  { background: #FCF3E6; border: 1px solid #F0DEBE; }
.p-recall__icon { font-size: 22px; line-height: 1; flex: none; }
.p-recall__title { font-size: 18px; font-weight: 700; }
.p-recall__copy { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--body-2); }

/* Feeding calculator */
.p-feed { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 28px; align-items: start; }
.p-field { margin-bottom: 16px; }
.p-field label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .13em; color: var(--muted); text-transform: uppercase; margin-bottom: 7px;
}
.p-field input, .p-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--white); font-size: 15.5px;
}
.p-field input:focus, .p-field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.p-result {
  background: var(--ink); color: var(--bg); border-radius: 16px; padding: 24px; text-align: center;
}
.p-result__num { font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.p-result__unit { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; color: var(--dim); margin-top: 6px; }
.p-result__cups { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--body-2); font-size: 15px; color: var(--dim); }
.p-result__cups b { color: var(--bg); font-size: 21px; }

/* Similar */
.p-sim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Closing honesty note */
.p-honest {
  margin-top: 40px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--rule); padding: 22px 24px;
  font-size: 15.5px; line-height: 1.65; color: var(--body-2);
}

@media (max-width: 1100px) {
  .p-head { grid-template-columns: 1fr; }
  .p-facts { grid-template-columns: repeat(2, 1fr); }
  .p-feed { grid-template-columns: 1fr; }
  .p-sim { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .p-wrap { padding: 24px 20px 44px; }
  .p-row { grid-template-columns: 1fr 74px 74px; }
  .p-row__say { grid-column: 1 / -1; }
  .p-sim { grid-template-columns: 1fr; }
}

/* ---- Product page: sections added to match the concept ---- */
.p-classchip {
  display: inline-block; background: var(--rule-lt); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; padding: 6px 12px; margin-bottom: 14px; color: var(--body-2);
}
.p-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.p-btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--ink); font-size: 15px; font-weight: 600; color: var(--ink);
}
.p-btn:hover { text-decoration: none; background: var(--rule-lt); color: var(--ink); }
.p-btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.p-btn--primary:hover { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }

.p-side {
  margin-top: 14px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--white); padding: 14px 16px;
}
.p-side__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.p-side__v { font-size: 15.5px; font-weight: 600; margin-top: 6px; line-height: 1.45; }

.p-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.p-sec__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--blue); text-transform: uppercase; margin-bottom: 16px;
}
.p-panel__foot {
  margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--rule-lt);
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}

/* Starch gauge against the archive average */
.p-gauge__bar {
  position: relative; height: 12px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--rule); overflow: visible;
}
.p-gauge__fill { height: 100%; border-radius: 999px; background: var(--blue); }
.p-gauge__tick {
  position: absolute; top: -5px; width: 2px; height: 20px; background: var(--ink);
}
.p-gauge__legend {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--muted);
}
.p-gauge__legend b { color: var(--ink); font-size: 13px; }
.p-gauge__say { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }

/* Full declaration + salt divider */
.p-decl p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--body-2); }
.p-decl .itk-salt {
  background: var(--ink); color: var(--bg); padding: 2px 7px; border-radius: 4px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em;
}
.p-decl__meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-lt);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--muted);
}

/* Ingredient wiki cards */
.p-wiki { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.p-wcard {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--white);
  padding: 16px; display: flex; flex-direction: column; color: inherit;
}
.p-wcard:hover { text-decoration: none; color: inherit; border-color: var(--blue); }
/* The ingredient illustrations are square artwork on a flat background.
   A fixed height plus object-fit:cover cropped roughly half of each one away,
   so the box follows the artwork's own ratio and the image is contained. */
.p-wcard__img {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
  display: grid;
  place-items: center;
  padding: 8px;
  margin-bottom: 14px;
}
.p-wcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* drops the white plate on the panel tint */
}
.p-wcard__ph { font-size: 30px; font-weight: 800; color: var(--dim); }
.p-wcard__tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; color: var(--muted);
}
.p-wcard--protein .p-wcard__tag { color: var(--green); }
.p-wcard__name { margin: 7px 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.p-wcard__copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }

/* Benchmark table */
.p-bench { width: 100%; border-collapse: collapse; min-width: 560px; }
.p-bench th, .p-bench td { padding: 13px 18px; text-align: left; }
.p-bench thead th {
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .13em;
}
.p-bench thead th.is-self { background: var(--blue); }
.p-bench tbody tr { border-bottom: 1px solid var(--rule-lt); }
.p-bench tbody tr:last-child { border-bottom: 0; }
.p-bench tbody tr:nth-child(even) { background: var(--panel); }
.p-bench td { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.p-bench td:first-child { color: var(--body); }
.p-bench td.is-self { font-weight: 700; color: var(--blue); }

/* Siblings list */
.p-sib {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); color: inherit;
}
.p-sib:last-child { border-bottom: 0; }
.p-sib:hover { text-decoration: none; color: var(--blue); }
.p-sib__name { font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.p-sib__score { font-size: 19px; font-weight: 700; flex: none; }

@media (max-width: 1100px) {
  .p-wiki { grid-template-columns: repeat(3, 1fr); }
  .p-two  { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .p-wiki { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Reviews screen
   ============================================================ */
.r-wrap { padding: 28px 40px 60px; }

.r-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--blue); color: #fff; padding: 14px 20px; border-radius: 12px;
  flex-wrap: wrap;
}
.r-bar__q { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.r-bar__n { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; opacity: .9; }

.r-grid { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: start; }

/* Filter rail */
.r-filters {
  border: 1px solid var(--rule); border-radius: 16px; background: var(--white);
  padding: 22px; position: sticky; top: calc(var(--header-h) + 14px);
}
.r-filters__head {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 18px;
}
.r-field { margin-bottom: 18px; }
.r-field label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 7px;
}
.r-field input[type="search"], .r-field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--white); font-size: 15px;
}
.r-field input[type="range"] { width: 100%; accent-color: var(--blue); }
.r-field input:focus, .r-field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.r-range__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.r-range__top label { margin-bottom: 0; }
.r-range__top output { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.r-range__scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted-2); margin-top: 4px;
}
.r-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.r-check input { margin-top: 2px; accent-color: var(--blue); }

.r-apply {
  width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer;
}
.r-apply:hover { background: #000; }
.r-clear {
  display: block; text-align: center; margin-top: 10px;
  font-size: 14px; color: var(--muted);
}
.r-note {
  margin-top: 20px; border-left: 3px solid var(--blue); background: var(--panel);
  border-radius: 0 10px 10px 0; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--body-2);
}

/* Result cards */
.r-list { display: flex; flex-direction: column; gap: 16px; }
.r-card {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid var(--rule); border-radius: 16px; background: var(--white); overflow: hidden;
}
.r-card:hover { border-color: var(--ink); }
.r-card__shot {
  background: var(--panel); display: grid; place-items: center; padding: 16px; min-height: 190px;
}
.r-card__shot img { max-height: 170px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.r-card__ph { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted-2); }
.r-card__body { padding: 20px 22px; display: flex; flex-direction: column; }
.r-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.r-card__brand {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; color: var(--blue); text-transform: uppercase;
}
.r-card__name { margin: 7px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; max-width: 40ch; }
.r-card__name a { color: inherit; }
.r-card__name a:hover { color: var(--blue); text-decoration: none; }
.r-card__score { text-align: right; flex: none; }
.r-card__num { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.r-card__den { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-top: 4px; }
.r-card__metrics {
  display: grid; grid-template-columns: repeat(4, 1fr) 132px; gap: 16px; align-items: end;
  border-top: 1px solid var(--rule-lt); margin-top: 18px; padding-top: 14px;
}
.r-card__metrics b { display: block; font-size: 16.5px; font-weight: 700; margin-top: 5px; }
.r-card__cta {
  background: var(--ink); color: var(--bg); text-align: center;
  padding: 11px 10px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.r-card__cta:hover { background: var(--blue); color: #fff; text-decoration: none; }

.r-empty {
  border: 1px solid var(--rule); border-radius: 16px; background: var(--white);
  padding: 48px 32px; text-align: center;
}
.r-empty h2 { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.r-empty p { margin: 0 0 20px; color: var(--body); font-size: 16px; }

.r-pager {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--muted);
}
.r-pager a { color: var(--blue); }

@media (max-width: 1024px) {
  .r-grid { grid-template-columns: 1fr; }
  .r-filters { position: static; }
}
@media (max-width: 760px) {
  .r-wrap { padding: 20px 18px 44px; }
  .r-card { grid-template-columns: 1fr; }
  .r-card__metrics { grid-template-columns: repeat(2, 1fr); }
  .r-card__cta { grid-column: 1 / -1; }
}

/* ============================================================
   Recalls screen
   ============================================================ */
.c-wrap { padding: 34px 48px 60px; max-width: 1180px; }
.c-wrap--single { max-width: 880px; }
.c-head { max-width: 62ch; }
.c-title {
  margin: 14px 0 0; font-size: clamp(34px, 4.8vw, 60px); line-height: .96;
  font-weight: 800; letter-spacing: -.04em;
}
.c-title--single { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; margin-top: 12px; }
.c-lede { margin: 18px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--body); }

.c-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px;
}
.c-stat {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--white); padding: 18px 20px;
}
.c-stat--blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.c-stat__v { font-size: 30px; font-weight: 800; letter-spacing: -.035em; }
.c-stat__l { font-size: 13.5px; margin-top: 6px; color: var(--body); }
.c-stat--blue .c-stat__l { color: rgba(255,255,255,.82); }

.c-table {
  margin-top: 26px; border: 1px solid var(--rule); border-radius: 16px;
  background: var(--white); overflow: hidden;
}
.c-table__head, .c-row {
  display: grid; grid-template-columns: 130px 1.1fr 1.05fr 1.7fr; gap: 16px;
  padding: 14px 20px; align-items: baseline;
}
.c-table__head {
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
}
.c-row { border-top: 1px solid var(--rule-lt); }
.c-row:nth-child(even) { background: #FCFCFA; }
.c-row__date { font-family: var(--mono); font-size: 13px; color: var(--body); white-space: nowrap; }
.c-row__brand { font-size: 16px; font-weight: 600; }
.c-row__brand a { color: inherit; }
.c-row__brand a:hover { color: var(--blue); }
.c-row__why {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  line-height: 1.45;
}
.c-row__detail { font-size: 14.5px; line-height: 1.5; color: var(--body); }

.c-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.c-signup { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.c-signup input {
  flex: 1; min-width: 180px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 15px;
}
.c-signup button {
  padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.c-signup button:hover { background: var(--blue-d); }
.c-rule {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px;
  border-top: 1px solid var(--rule-lt); padding: 13px 0;
}
.c-rule__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; color: var(--blue); }
.c-rule__copy { font-size: 15px; line-height: 1.55; color: var(--body-2); }

/* Single recall */
.c-single__tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px;
}
.c-meta {
  display: flex; flex-wrap: wrap; gap: 32px; margin-top: 22px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0;
}
.c-meta b { display: block; font-size: 16px; margin-top: 5px; }
.c-body { margin-top: 26px; font-size: 17px; line-height: 1.7; color: var(--body-2); }
.c-body p { margin: 0 0 16px; }
.c-body a { text-decoration: underline; }

@media (max-width: 1024px) {
  .c-stats { grid-template-columns: repeat(2, 1fr); }
  .c-two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .c-wrap { padding: 22px 18px 44px; }
  .c-table__head { display: none; }
  .c-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .c-row__why { order: -1; }
}
.c-row__product { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.r-card__metrics .k-label { white-space: nowrap; }

/* ---- Ingredient wiki + search ---- */
.w-search { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.w-search input {
  flex: 1; min-width: 220px; max-width: 420px; padding: 12px 16px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--white); font-size: 15.5px;
}
.w-search button {
  padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer;
}
.w-search button:hover { background: var(--blue); }
.w-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 28px; }

.i-head { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 36px; align-items: start; margin-top: 8px; }
.i-shot {
  border: 1px solid var(--rule); border-radius: 16px; background: var(--panel);
  padding: 16px; aspect-ratio: 1 / 1; display: grid; place-items: center;
}
.i-shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.i-alias { margin: 10px 0 0; font-size: 15.5px; color: var(--muted); }
.i-benefits { margin: 0; padding-left: 20px; }
.i-benefits li { font-size: 16px; line-height: 1.6; color: var(--body-2); margin-bottom: 8px; }

@media (max-width: 1200px) { .w-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .w-grid { grid-template-columns: repeat(3, 1fr); } .i-head { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .w-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Craft layer
   ------------------------------------------------------------
   Focus, rhythm, measure and typographic restraint. The concept shouts in
   uppercase everywhere; at 135 all-caps runs a page that stops being a voice
   and becomes noise, so caps are now reserved for mono data labels and
   kickers, and headings carry the weight instead.
   ============================================================ */

/* Focus: one visible ring on everything interactive, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Content container and vertical rhythm */
.k-hero, .k-section, .k-section--tight, .k-band,
.p-wrap, .r-wrap, .c-wrap {
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.k-hero    { padding-top: var(--s6); padding-bottom: var(--s5); }
.k-section { padding-top: var(--s6); padding-bottom: var(--s6); }
.k-section--tight { padding-top: var(--s5); padding-bottom: var(--s5); }
.k-band    { padding-top: var(--s6); padding-bottom: var(--s6); }
.p-wrap, .r-wrap, .c-wrap { max-width: var(--shell); margin-inline: auto; }

/* Headings: keep the weight and tight tracking, lose the shouting. */
.k-h1, .k-h2, .k-h3, .p-sec__title, .c-title, .k-band h2, .k-mini h4 {
  text-transform: none;
}
.k-h1 { font-size: clamp(38px, 6vw, 76px); line-height: .96; letter-spacing: -.04em; }
.k-h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -.03em; }
.k-h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.12; letter-spacing: -.025em; }
.k-lede, .k-hero__lede, .p-sec__note, .c-lede { max-width: var(--measure); }

/* Kickers stay uppercase, but quieter and better spaced. */
.k-kicker { font-size: 11.5px; letter-spacing: .16em; font-weight: 600; }

/* Links inside prose should look like links. */
.c-body a, .p-recall__copy a, .p-honest a { text-decoration: underline; text-underline-offset: 2px; }

/* Every control clears a 44px target. */
.p-btn, .r-apply, .c-signup button, .w-search button,
.r-card__cta, .p-ing, .k-chip, .p-sib, .k-morelink {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.p-sib { justify-content: space-between; }
.k-footer__list a { display: inline-flex; align-items: center; min-height: 34px; }

/* Cards lift rather than jump. */
.k-food, .r-card, .p-wcard, .k-mini {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.k-food:hover, .r-card:hover, .p-wcard:hover, .k-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(17, 18, 16, .28);
}

/* Bag shots read better on white than on a checkerboard. */
.k-food__shot, .r-card__shot { background: var(--white); background-image: none; }
.k-food__shot { border-bottom: 1px solid var(--rule-lt); }

/* Footer contrast */
.k-band__sub { color: #A8A8A0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 900px) {
  .k-nav, .k-hsearch, .k-btn-dark { display: none; }
  .k-burger { display: inline-flex; }
  .k-header__aux { margin-left: auto; }
}
@media (min-width: 901px) {
  .k-mnav { display: none !important; }
}

/* Shared container: hero, stat band and ticker align to the same grid. */
.k-stats { border-inline: 1px solid var(--rule); }

/* Category chips: real filters, with the size of each set shown up front. */
.k-chip {
  gap: 8px; border-radius: 999px; padding: 0 16px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -.01em; text-transform: none;
  border-color: var(--rule); background: var(--white);
}
.k-chip:hover { border-color: var(--ink); text-decoration: none; }
.k-chip__n {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--panel); border-radius: 999px; padding: 3px 8px;
}
.k-chip--all { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.k-chip--all:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.k-legend { color: var(--body); }

/* ---- One container, applied to the sections themselves ----
   Hero and sections previously disagreed (140px vs 56px left edge) because
   `.k-section > *` lands on grid columns instead of centring the block. */
.k-hero,
.k-section,
.k-section--tight,
.k-stats { max-width: var(--shell); margin-inline: auto; }

/* Full-bleed bands keep their background edge to edge, content stays aligned. */
.k-band > * { max-width: var(--shell); margin-inline: auto; }

/* A search field 1320px wide is a target, not a control. */
.k-search { max-width: 680px; }

/* Stat band: align to the container, drop the side borders that fought the ticker. */
.k-stats { border-inline: 0; border-top: 1px solid var(--ink); }
.k-stat { padding: var(--s3) var(--s3); }
.k-stat:first-child { padding-left: 0; }

/* Ticker is deliberately full bleed: it is a wire, not a column. */
.k-ticker { max-width: none; }

/* ---- Touch targets ----
   Everything a finger has to hit clears 44px. Previously 34 of 49 controls
   on the home screen were under that, including the hero search button. */
.k-search { min-height: 56px; align-items: stretch; }
.k-search__input { min-height: 44px; }
.k-search__submit { min-height: 44px; padding-inline: clamp(20px, 6vw, 34px); }
.k-brand { min-height: 44px; align-items: center; }
.k-td-brand a { display: inline-flex; align-items: center; min-height: 44px; }
.k-band__form { min-height: 56px; }
.k-band__form input { min-height: 44px; }
.k-band__form button { min-width: 44px; min-height: 44px; }
.c-signup input, .c-signup button, .w-search input, .w-search button { min-height: 48px; }

@media (max-width: 900px) {
  .k-footer__list a { min-height: 44px; }
  .k-footer__list { gap: 2px; }
  /* Stat band reads as two rows rather than four cramped columns. */
  .k-stats { grid-template-columns: 1fr 1fr; }
  .k-stat:first-child { padding-left: var(--s3); }
  .k-hero { padding-top: var(--s5); }
}
@media (max-width: 560px) {
  .k-search { flex-wrap: nowrap; }
  .k-search__icon { display: none; }
  .k-chips { gap: 8px; }
  .k-chip { font-size: 14px; padding: 0 14px; }
}
/* The reviews page needed a real h1; keep it visually as the summary bar. */
h1.r-bar__q { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* Reviews filters as a disclosure: full panel on desktop, collapsed on phones
   so the first result is reachable without scrolling past every control. */
.r-disc__sum {
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 4px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
.r-disc__sum::-webkit-details-marker { display: none; }
.r-disc__sum::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.r-disc[open] .r-disc__sum::after { transform: rotate(-135deg) translateY(-2px); }
.r-disc__sum em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  background: var(--blue); color: #fff; border-radius: 999px; padding: 4px 10px;
}

@media (max-width: 1024px) {
  .r-disc__sum { display: flex; }
  .r-disc[open] .r-filters__head { display: none; }
  .r-filters { padding: 14px 18px; }
}

/* Remaining touch targets inside the filter panel and pager. */
.r-field input[type="search"], .r-field select { min-height: 48px; }
.r-field input[type="range"] { min-height: 44px; }
.r-check { min-height: 44px; align-items: center; }
.r-check input { width: 22px; height: 22px; }
.r-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }