@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Hanken+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==========================================================================
   NutriVerdict - "Quiet Luxury"
   Bone paper, bottle green, brass hairline, warm ink. Fraunces optical serif
   for display and score numerals, Hanken Grotesk for body, IBM Plex Mono for
   kickers, labels and figures. Sharp 2px radius, hairline borders, specimen
   and ledger motifs, ink/green histograms. No em or en dashes anywhere.
   ========================================================================== */

:root{
  /* palette */
  --paper:#F1EDE4;
  --paper-2:#F7F4EC;
  --surface:#FBF9F3;
  --ink:#171712;
  --ink-soft:#4B493F;
  --ink-faint:#807C6F;
  --line:#D8D2C3;
  --line-soft:#E4DFD2;
  --green:#1D3A2C;
  --green-deep:#132619;
  --brass:#8C7A4C;
  --terra:#9A4A33; /* the single restrained caution tone */

  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono","Geist Mono",ui-monospace,SFMono-Regular,monospace;

  /* metrics */
  --radius:2px;
  --edge:clamp(20px,5vw,80px);
  --maxw:1360px;

  /* spacing scale (build.js references var(--s-6)) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(120% 90% at 85% -10%, rgba(29,58,44,0.05), transparent 60%),
    radial-gradient(90% 70% at -10% 5%, rgba(140,122,76,0.05), transparent 55%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
figure{margin:0}
h1,h2,h3,h4,h5,p{margin:0}
ul,ol{margin:0}
button{font:inherit}
[hidden]{display:none !important}
body.drawer-open{overflow:hidden}
section{scroll-margin-top:88px}
[id]{scroll-margin-top:88px}

:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---- layout primitives ---- */
.container,.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--edge);
}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(30px,5vw,56px)}
.section--band{
  padding-block:clamp(48px,7vw,96px);
  background:var(--surface);
  border-block:1px solid var(--line);
}

/* ---- shared type atoms ---- */
.eyebrow,.kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
}
.u{color:var(--ink-faint);font-size:0.85em}

.link{
  display:inline-block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:border-color .18s;
}
.link:hover{border-color:var(--ink)}

.double-rule{
  border:0;height:0;
  border-top:1px solid var(--ink);
  position:relative;
  margin:16px 0 0;
}
.double-rule::after{
  content:"";position:absolute;left:0;right:0;top:2px;
  border-top:1px solid var(--line);
}

.dot-sep{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.dot-sep>*{position:relative;display:inline-flex;align-items:center;white-space:nowrap}
.dot-sep>*+*::before{
  content:"\00B7";position:absolute;left:-13px;color:var(--line);
  letter-spacing:0;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:11px 18px;border-radius:var(--radius);
  border:1px solid var(--ink);background:var(--ink);color:var(--paper-2);
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:#000;border-color:#000}
.btn--primary{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

/* ---- skip link ---- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper-2);
  padding:10px 16px;font-family:var(--mono);font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;border-radius:var(--radius);
}
.skip-link:focus{left:12px;top:12px}

/* ==========================================================================
   NAV + DRAWER
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(241,237,228,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:15px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand__mark{width:34px;height:34px;flex-shrink:0;display:block}
.brand__wm{
  font-family:var(--serif);font-weight:500;font-size:21px;
  letter-spacing:0.005em;font-variation-settings:"opsz" 40;color:var(--ink);
}
.brand__dot{color:var(--green)}

.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a{
  font-size:14px;color:var(--ink-soft);letter-spacing:0.01em;transition:color .18s;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:2px}

.nav__actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  display:inline-grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);background:transparent;cursor:pointer;transition:border-color .18s,color .18s;
}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:19px;height:19px}
.nav__toggle{display:none}

.bars{position:relative;display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.bars::before,.bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;
}
.bars::before{top:-6px}
.bars::after{top:6px}

@media(max-width:900px){
  .nav__links{display:none}
  .nav__toggle{display:inline-grid}
}

/* drawer */
.drawer{
  position:fixed;inset:0;z-index:100;
  visibility:hidden;pointer-events:none;
}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(19,22,17,0.42);
  opacity:0;transition:opacity .3s ease;
}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;
  width:min(86vw,340px);
  background:var(--paper-2);border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.6,.2,1);
  display:flex;flex-direction:column;
  padding:20px var(--edge) 40px;overflow-y:auto;
  box-shadow:-30px 0 60px -40px rgba(19,22,17,0.5);
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.drawer__close{
  display:inline-grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:transparent;color:var(--ink);cursor:pointer;
}
.drawer__close:hover{border-color:var(--ink)}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  font-family:var(--serif);font-size:1.35rem;font-weight:400;
  font-variation-settings:"opsz" 40;color:var(--ink);
  padding:14px 0;border-bottom:1px solid var(--line);
}
.drawer__nav a:hover{color:var(--green)}

/* ==========================================================================
   SECTION HEAD + PAGE HEAD
   ========================================================================== */
.sec-head{margin-bottom:clamp(24px,3.5vw,44px)}
.sec-head__eyebrow{color:var(--green);display:block}
.sec-head__top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:14px;
}
.sec-head h2{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"opsz" 90,"SOFT" 0;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.06;letter-spacing:-0.01em;
}
.sec-head__rule{margin-top:16px}
@media(max-width:560px){
  .sec-head__top{flex-direction:column;align-items:flex-start;gap:12px}
}

.page-head{
  padding-top:clamp(38px,6vw,84px);
  padding-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.page-head--hue{background:var(--surface)}
.page-head__in{max-width:none}
.page-head h1{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"opsz" 144,"SOFT" 0;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-0.015em;
  margin-top:14px;max-width:20ch;
}
.page-head p{margin-top:16px;color:var(--ink-soft);font-size:15px;max-width:56ch}

/* centered editorial column for prose pages (about, method, legal, contact) */
.article{max-width:760px;margin-inline:auto}
.article__head{padding-top:clamp(38px,6vw,84px);padding-bottom:clamp(20px,2.5vw,34px);margin-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.article__head h1{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.04;letter-spacing:-0.015em;margin-top:14px}
.article__head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem;max-width:56ch}

/* category / goal landing: intro beside an at-a-glance data panel */
.landing-top{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);margin-bottom:clamp(32px,4vw,52px)}
@media(min-width:920px){.landing-top{grid-template-columns:1.5fr 0.85fr;align-items:start}}
.glance{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.6vw,30px);position:relative}
.glance::before{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);border-radius:1px;pointer-events:none}
.glance__k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);position:relative}
.glance__stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin:18px 0;position:relative;z-index:1}
.glance__n{font-family:var(--serif);font-size:1.9rem;font-weight:400;font-variation-settings:"opsz" 60;line-height:1}
.glance__l{font-family:var(--mono);font-size:9.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}
.glance__list{border-top:1px solid var(--line-soft);padding-top:16px;position:relative;z-index:1}
.glance__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:14px}
.glance__row a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .16s}
.glance__row a:hover{border-color:var(--ink)}
.glance__row b{font-family:var(--mono);font-weight:500;color:var(--green)}

/* ==========================================================================
   THE SCORE MARK (seal)  -  the centerpiece
   New markup only. Legacy svg/center kept graceful and hidden.
   ========================================================================== */
.seal{
  --band-color:var(--ink);
  display:flex;flex-direction:column;align-items:center;
  font-family:var(--serif);line-height:1;
}
.seal[data-band="elite"],
.seal[data-band="strong"]{--band-color:var(--green)}
.seal[data-band="good"]{--band-color:var(--ink)}
.seal[data-band="fair"]{--band-color:var(--brass)}
.seal[data-band="poor"]{--band-color:var(--terra)}

/* legacy elements from the old gauge markup, defused */
.seal__svg,.seal__track,.seal__arc{display:none}
.seal__center{display:contents}

.seal__num{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"opsz" 144,"SOFT" 0;
  letter-spacing:-0.03em;color:var(--band-color);
  display:inline-flex;align-items:flex-start;line-height:0.82;
}
.seal__den{
  font-family:var(--mono);font-weight:400;color:var(--ink-faint);
  letter-spacing:0.02em;align-self:flex-start;
}

/* graduated tick scale: fine ticks + major ticks + 1px axis, all in one span */
.seal__scale{
  position:relative;display:block;width:100%;
  background-repeat:no-repeat;
  background-image:
    repeating-linear-gradient(90deg,var(--ink-faint) 0 1px,transparent 1px calc(100%/4)),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/20)),
    linear-gradient(var(--ink),var(--ink));
  background-size:100% 60%, 100% 40%, 100% 1px;
  background-position:left bottom, left bottom, left bottom;
}
.seal__marker{
  position:absolute;bottom:0;
  left:calc(var(--arc-pct,0)*1%);
  transform:translateX(-50%);
  width:1px;background:var(--band-color);
}
.seal__marker::before{
  content:"";position:absolute;top:-5px;left:50%;
  transform:translate(-50%,0) rotate(45deg);
  width:8px;height:8px;background:var(--band-color);border-radius:1px;
}
.seal__band{
  font-family:var(--mono);text-transform:uppercase;
  letter-spacing:0.2em;color:var(--ink-soft);font-weight:500;
}

/* hero size (must read jewel-like down to 320px) */
.seal--hero{gap:clamp(16px,3vw,22px);width:100%;max-width:340px;margin-inline:auto}
.seal--hero .seal__num{font-size:clamp(4.2rem,17vw,6.6rem)}
.seal--hero .seal__den{font-size:clamp(13px,3vw,16px);margin-top:0.9em}
.seal--hero .seal__scale{height:24px}
.seal--hero .seal__marker{height:30px}
.seal--hero .seal__band{font-size:12px;margin-top:2px}

/* inline size (compare) */
.seal--inline{gap:12px;width:100%}
.seal--inline .seal__num{font-size:clamp(2.6rem,7vw,3.6rem)}
.seal--inline .seal__den{font-size:13px;margin-top:0.8em}
.seal--inline .seal__scale{height:18px;max-width:220px;margin-inline:auto}
.seal--inline .seal__marker{height:24px}
.seal--inline .seal__band{font-size:10.5px}

/* mini size (numeral only, band-tinted) */
.seal--mini{display:inline-flex;flex-shrink:0}
.seal--mini .seal__num{font-size:1.4rem;line-height:1}

.seal-unit{display:flex;flex-direction:column;align-items:center;gap:0}
.grade-seal{
  display:inline-block;margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--radius);padding:3px 10px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-top:clamp(26px,4vw,44px);padding-bottom:clamp(36px,5vw,64px)}
.hero__masthead{padding-top:8px}
.hero__masthead-rule{margin:16px 0 clamp(30px,5vw,52px)}
.hero__grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  gap:clamp(32px,5vw,64px);align-items:center;
}
.hero__eyebrow{color:var(--ink-faint)}
.hero__title{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"opsz" 144,"SOFT" 0;
  font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;letter-spacing:-0.02em;
  margin-top:18px;color:var(--ink);
}
.hero__sub{
  font-size:clamp(15px,1.4vw,17px);color:var(--ink-soft);
  max-width:46ch;margin-top:18px;line-height:1.6;
}
.hero__stats{
  margin-top:clamp(20px,3vw,28px);padding-top:22px;border-top:1px solid var(--line);
}
.hero__stats b{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--ink)}

.hero__proof{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3.5vw,44px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 60px -42px rgba(23,23,18,0.4);
}
.hero__proof::before{
  content:"";position:absolute;inset:8px;
  border:1px solid var(--line-soft);border-radius:1px;pointer-events:none;
}
/* registration corner marks (four L shapes, eight hairlines) */
.hero__proof::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--ink-faint),var(--ink-faint)),linear-gradient(var(--ink-faint),var(--ink-faint)),
    linear-gradient(var(--ink-faint),var(--ink-faint)),linear-gradient(var(--ink-faint),var(--ink-faint)),
    linear-gradient(var(--ink-faint),var(--ink-faint)),linear-gradient(var(--ink-faint),var(--ink-faint)),
    linear-gradient(var(--ink-faint),var(--ink-faint)),linear-gradient(var(--ink-faint),var(--ink-faint));
  background-size:9px 1px,1px 9px, 9px 1px,1px 9px, 9px 1px,1px 9px, 9px 1px,1px 9px;
  background-position:
    top left,top left,
    top right,top right,
    bottom left,bottom left,
    bottom right,bottom right;
}
.hero__proof .seal-unit,
.hero__proof .hist{position:relative;z-index:1}

.hero__prov{
  margin-top:clamp(20px,3vw,28px);
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;
  color:var(--ink-faint);max-width:78ch;line-height:1.7;
}

@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
}

/* histogram exhibit (inside the score specimen) */
.hist{
  margin-top:clamp(22px,3vw,34px);
  padding-top:clamp(18px,2.5vw,26px);
  border-top:1px solid var(--line);
}
.hist__cap{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.hist__cap b{color:var(--green);font-weight:500}
.hist__bars{display:flex;align-items:flex-end;gap:clamp(3px,1vw,7px);height:130px}
.hist__bar{
  flex:1;min-width:2px;height:var(--h,4%);
  background:var(--line);border-radius:1px 1px 0 0;transition:background .2s;
}
.hist__bar.is-marked{background:var(--green)}
.hist__ticks{
  display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-faint);
}

/* ==========================================================================
   SEARCH (hero + search page)
   ========================================================================== */
.pv-search{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;margin:28px 0 14px}
.pv-search__field{position:relative;flex:1;min-width:200px;display:flex;align-items:center}
.pv-search__icon{
  position:absolute;left:14px;width:18px;height:18px;color:var(--ink-faint);pointer-events:none;
}
.pv-search__input,.search-bar input{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  padding:13px 14px 13px 42px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .18s;
}
.pv-search__input:focus,.search-bar input:focus{border-color:var(--green);outline:none}
.pv-search__submit{white-space:nowrap}
.pv-search__chips{display:flex;flex-wrap:wrap;gap:8px}

.search-bar{position:relative;display:flex;align-items:center;max-width:560px}
.search-bar__icon{position:absolute;left:14px;width:18px;height:18px;color:var(--ink-faint);pointer-events:none}
.search-meta{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin:16px 0 22px}
.search-meta b{color:var(--ink)}
#searchEmpty{padding:44px 0;color:var(--ink-soft);font-family:var(--serif);font-size:1.25rem}

/* chips (search suggestions + rank switch tabs) */
.chip{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:0.04em;
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-soft);background:transparent;transition:border-color .18s,color .18s,background .18s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-active{background:var(--green);border-color:var(--green);color:var(--paper-2)}

/* ==========================================================================
   TICKER
   ========================================================================== */
.ticker{
  margin-top:clamp(32px,5vw,56px);
  display:flex;align-items:stretch;overflow:hidden;
  border-block:1px solid var(--line);background:var(--surface);
}
.ticker__label{
  flex-shrink:0;display:flex;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--green);padding:12px 18px;border-right:1px solid var(--line);background:var(--paper);
}
.ticker__track{
  display:flex;align-items:center;gap:34px;white-space:nowrap;flex-shrink:0;
  padding-left:34px;animation:nv-ticker 48s linear infinite;
}
.ticker__item{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.ticker__rank{color:var(--ink-faint)}
.ticker__item b{font-family:var(--serif);font-size:1rem;color:var(--green);font-weight:400}
@keyframes nv-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   FOOD CARDS (quiet specimen cards)  +  CARD GRID
   ========================================================================== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr));
  gap:16px;
}
.food-card{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:14px;
  transition:background .18s,border-color .18s,transform .18s;
}
.food-card::before{
  content:"";position:absolute;inset:6px;
  border:1px solid var(--line-soft);border-radius:1px;pointer-events:none;
}
.food-card:hover{border-color:var(--ink-faint);background:var(--paper-2)}
.food-card>.seal{position:relative;z-index:1;align-self:flex-start}
.food-card__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px}
.food-card__cat{color:var(--green)}
.food-card__name{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:1.2rem;line-height:1.2;color:var(--ink);
}
.food-card__headline{font-family:var(--mono);font-size:11.5px;letter-spacing:0.02em;color:var(--ink-faint)}
.food-card__headline b{color:var(--green);font-weight:500}

/* nv-dot marker on cards / tiles */
.nv-dot{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:var(--mono);font-size:9px;letter-spacing:0.1em;line-height:1;
  color:var(--ink-faint);background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:3px 4px;
}

/* ==========================================================================
   TILE GRID (bordered category / goal grid)
   ========================================================================== */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  border-top:1px solid var(--ink);border-left:1px solid var(--line);
}
.tile{
  position:relative;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 20px;display:flex;flex-direction:column;gap:14px;min-height:180px;
  transition:background .16s;
}
.tile:hover{background:var(--surface)}
.tile__count{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-faint)}
.tile__name{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:1.2rem;line-height:1.15;color:var(--ink);
}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:auto}
.sparkline__bar{flex:1;background:var(--line);height:var(--h,10%);border-radius:1px}
.sparkline__bar.is-median{background:var(--green)}
.tile__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:6px;border-top:1px solid var(--line-soft);
}
.tile__top{font-family:var(--mono);font-size:11px;letter-spacing:0.02em;color:var(--ink-soft)}

/* ==========================================================================
   RANK LEDGER (goal pages)
   ========================================================================== */
.rank-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.rank-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.rank-criterion{
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;
}
.rank-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.rank-list li{margin:0}
.rank-row{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:16px 4px;border-bottom:1px solid var(--line);transition:background .16s;
}
.rank-row:hover{background:var(--surface)}
.rank__num{font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.rank__main{min-width:0}
.rank__name{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink);
}
.rank__metric-row{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.rank__num-metric{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap}
.rank__per{color:var(--ink-faint)}
.dv-chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:var(--radius);padding:2px 7px;white-space:nowrap;
}

/* metric bar (rank rows + median compare) */
.metric-bar{
  position:relative;flex:1;min-width:80px;height:6px;
  background:var(--line-soft);border-radius:2px;
}
.metric-bar__fill{
  position:absolute;left:0;top:0;bottom:0;width:var(--v,0);
  background:var(--green);border-radius:2px;
}
.metric-bar__median{
  position:absolute;top:-2px;bottom:-2px;left:var(--m,50%);
  width:1px;background:var(--brass);
}

/* ==========================================================================
   PROVENANCE  -  two voice system
   ========================================================================== */
.prov-original{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-left:2px solid var(--green);
  border-radius:var(--radius);
  padding:clamp(22px,3vw,36px);
}
.prov-original>h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.1;color:var(--ink);margin-top:14px;
}
.prov-sourced{color:var(--ink-faint)}

.prov-badge{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--green);font-weight:500;
}
.prov-badge__mark{display:inline-flex;width:16px;height:16px;color:var(--green);flex-shrink:0}
.prov-badge__mark svg{width:100%;height:100%}

.prov-tag{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-faint);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:6px 10px;
}
.prov-tag__glyph{display:inline-flex;width:15px;height:15px;color:var(--ink-faint);flex-shrink:0}
.prov-tag__glyph svg{width:100%;height:100%}

.fdc-chip{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:4px 9px;
}

.byline{
  display:flex;align-items:center;gap:10px;margin:14px 0 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.03em;color:var(--ink-faint);line-height:1.5;
}
.byline__monogram{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;
  border:1px solid var(--green);color:var(--green);
  font-family:var(--serif);font-size:11px;font-weight:500;border-radius:var(--radius);
}
.byline__name{color:var(--ink);font-weight:500}

.nv-dot{}  /* declared above with card scope */

.legend{display:grid;gap:12px}
.legend__row{display:flex;gap:12px;align-items:flex-start}
.legend__row p{margin:0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.legend__swatch{width:16px;height:16px;flex-shrink:0;margin-top:2px;border-radius:var(--radius)}
.legend__swatch--ours{background:var(--green)}
.legend__swatch--sourced{
  background:var(--paper);border:1px solid var(--ink-faint);
  background-image:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 4px);
}

/* ==========================================================================
   DETAIL PAGE
   ========================================================================== */
.detail{max-width:var(--maxw)}
.detail__zoneA{
  padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(24px,3.5vw,40px);
}
.detail__cat{display:inline-block;color:var(--green);margin-bottom:12px}
.detail__name{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.03;letter-spacing:-0.015em;color:var(--ink);
}
.detail__identity{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.detail__identity>span{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}

.detail__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.detail__main{display:flex;flex-direction:column;gap:clamp(22px,3.5vw,40px);min-width:0}
.detail__rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:22px}
.detail__source{margin-top:4px}
@media(max-width:960px){
  .detail__grid{grid-template-columns:1fr}
  .detail__rail{position:static}
}

.jump-nav{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:14px}
.jump-nav__title{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;
}
.jump-nav a{font-size:14px;color:var(--ink-soft);padding:8px 0;border-bottom:1px solid var(--line-soft)}
.jump-nav a:hover{color:var(--ink)}
.rail-legend{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}

/* verdict block */
.verdict__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(20px,3vw,30px);
}
.verdict__gauge{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:center;
}
.verdict__lede{margin-top:14px;font-size:15px;color:var(--ink-soft);line-height:1.62}
@media(max-width:620px){
  .verdict__gauge{grid-template-columns:1fr;justify-items:center;text-align:center}
}

.delta-chip{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;
  border:1px solid var(--line);border-radius:var(--radius);padding:5px 10px;color:var(--ink-soft);
}
.delta-chip--up{color:var(--green);border-color:rgba(29,58,44,0.4)}
.delta-chip--down{color:var(--terra);border-color:rgba(154,74,51,0.4)}

.gear-shift{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   MACRO RIBBON  (one green + two graphite steps)
   ========================================================================== */
.macro{display:flex;flex-direction:column;gap:12px}
.macro__fig{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);
}
.macro__bar{
  display:flex;height:14px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--line-soft);
}
.macro__seg{height:100%;width:var(--w,0)}
.macro__seg--protein{background:var(--green)}
.macro__seg--carb{background:var(--ink-soft)}
.macro__seg--fat{background:var(--ink-faint)}
.macro__legend{display:flex;flex-wrap:wrap;gap:10px 20px}
.macro__legend-item{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);
}
.macro__swatch{width:11px;height:11px;border-radius:1px;flex-shrink:0}
.macro__swatch--protein{background:var(--green)}
.macro__swatch--carb{background:var(--ink-soft)}
.macro__swatch--fat{background:var(--ink-faint)}
.macro__derived{font-family:var(--mono);font-size:10.5px;letter-spacing:0.04em;color:var(--ink-faint);margin:2px 0 0}

/* ==========================================================================
   NUTRITION LEDGER  (sticky first column, no overflow at 320px)
   ========================================================================== */
.nutri{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,32px);
}
.nutri__head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.nutri__head h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);
}
.basis-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.basis-toggle button{
  font-family:var(--mono);font-size:11px;letter-spacing:0.04em;
  padding:8px 12px;background:var(--paper);color:var(--ink-soft);
  border:0;border-left:1px solid var(--line);cursor:pointer;transition:background .16s,color .16s;
}
.basis-toggle button:first-child{border-left:0}
.basis-toggle button[aria-pressed="true"]{background:var(--green);color:var(--paper-2)}

.nutri__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nutri table{width:100%;border-collapse:collapse;min-width:320px;font-size:14px}
.nutri thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-faint);text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink);
}
.nutri thead th:first-child{position:sticky;left:0;background:var(--surface);z-index:2}
.nutri tbody th{
  font-weight:400;text-align:left;padding:10px 12px;color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  position:sticky;left:0;background:var(--surface);z-index:1;
}
.nutri td{
  padding:10px 12px;border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);font-size:13px;white-space:nowrap;vertical-align:top;color:var(--ink-soft);
}
.nutri tr.is-calories th,.nutri tr.is-calories td{
  font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);background:var(--surface);
}
.nutri tr.is-calories td{font-family:var(--mono)}
.nutri tr.is-sub th{padding-left:26px;color:var(--ink-soft)}
.dv-cell{position:relative}
.dv-cell__bar{
  display:block;height:3px;width:var(--dv,0);max-width:100%;
  background:var(--ink-faint);border-radius:2px;margin-bottom:4px;
}
.dv-cell.is-high{color:var(--terra)}
.dv-cell.is-high .dv-cell__bar{background:var(--terra)}
.nutri__foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
}

/* ==========================================================================
   RICH IN  (%DV bars)
   ========================================================================== */
.rich__note{color:var(--ink-soft);font-size:14px;margin:8px 0 18px;max-width:60ch}
.dv-list{display:grid;gap:14px;margin-top:4px}
.dv-row{
  display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"label pct" "track track";gap:6px 12px;align-items:center;
}
.dv-row__label{grid-area:label;font-size:14px;color:var(--ink)}
.dv-row__pct{grid-area:pct;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.dv-row__track{grid-area:track;height:6px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.dv-row__fill{display:block;height:100%;background:var(--ink-faint);border-radius:2px}
.dv-row--excellent .dv-row__fill{background:var(--green)}
.dv-row--excellent .dv-row__pct{color:var(--green)}
.dv-row--good .dv-row__fill{background:var(--ink-faint)}

/* ==========================================================================
   MEDIAN COMPARE  +  SWAPS
   ========================================================================== */
.median-row{margin-top:16px}
.median-row__label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px;color:var(--ink)}
.median-row__label b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-soft)}

.swaps__note{color:var(--ink-soft);font-size:14px;margin:8px 0 18px;max-width:60ch}
.swap-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);margin-top:10px;transition:background .16s,border-color .16s;
}
.swap-item:hover{background:var(--surface);border-color:var(--ink-faint)}
.swap-item__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.swap-item__name{font-family:var(--serif);font-weight:400;font-size:1.05rem;color:var(--ink)}
.swap-item__why{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.swap-item__why b{color:var(--green);font-weight:500}

/* related foods */
.related-foods__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:12px;margin-top:16px;
}
.rel-food{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);transition:background .16s,border-color .16s;
}
.rel-food:hover{background:var(--surface);border-color:var(--ink-faint)}
.rel-food__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.rel-food__name{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--ink);line-height:1.2}
.rel-food__cat{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint)}

.related-guides h2,.related-foods>h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);margin-bottom:8px;
}

/* how-we-score stacked legend block */
.method-legend{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(24px,3.5vw,40px)}

/* ==========================================================================
   GUIDES
   ========================================================================== */
.guide-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.guide-grid--compact{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.guide-card{
  background:var(--paper);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;min-height:250px;transition:background .18s;
}
.guide-card:hover{background:var(--surface)}
.guide-card__cat{color:var(--green)}
.guide-card__title{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 60;
  font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.12;letter-spacing:-0.005em;
  margin:20px 0 0;color:var(--ink);
}
.guide-card__dek{color:var(--ink-soft);font-size:14px;margin:14px 0 0;line-height:1.55}
.guide-card__meta{
  margin-top:auto;padding-top:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-faint);
}

/* featured guide */
.guide-feature{
  display:block;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,4vw,52px);transition:background .18s,border-color .18s;
}
.guide-feature:hover{background:var(--paper-2);border-color:var(--ink-faint)}
.guide-feature__title{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 90;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.06;letter-spacing:-0.01em;
  margin:12px 0 0;color:var(--ink);
}
.guide-feature__dek{color:var(--ink-soft);margin:14px 0 20px;max-width:60ch;font-size:15px}

/* guide article */
.guide{display:block}
.guide-hero{
  padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(28px,4vw,48px);
  border-bottom:1px solid var(--line);background:var(--surface);
}
.guide-hero__in{max-width:74ch}
.guide-hero__cat{color:var(--green)}
.guide-hero__cat a{color:var(--green);border-bottom:1px solid transparent}
.guide-hero__cat a:hover{border-color:var(--green)}
.guide-hero__title{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;
  font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.04;letter-spacing:-0.015em;
  margin:16px 0 0;max-width:22ch;color:var(--ink);
}
.guide-hero__dek{color:var(--ink-soft);font-size:clamp(16px,1.6vw,19px);margin:18px 0 0;max-width:60ch;line-height:1.5}
.guide-hero__meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.guide-hero__meta .byline{margin:0}
.guide-hero__read{
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);
}
.guide-body{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(24px,3.5vw,40px)}
.guide-note{font-size:14px}
.guide-note p{margin:8px 0 0;color:var(--ink-soft);line-height:1.6}

/* takeaways */
.takeaways{
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--brass);
  border-radius:var(--radius);padding:clamp(20px,3vw,28px);
}
.takeaways__title{
  font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--green);margin:0 0 12px;
}
.takeaways ul{margin:0;padding-left:18px}
.takeaways li{margin:8px 0;color:var(--ink-soft);line-height:1.55}

/* faq */
.faq{border-top:1px solid var(--ink)}
.faq h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 60;
  font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin:clamp(20px,3vw,28px) 0 8px;
}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  position:relative;cursor:pointer;list-style:none;
  padding:18px 44px 18px 2px;
  font-family:var(--serif);font-weight:400;font-size:1.15rem;color:var(--ink);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:8px;top:16px;
  font-family:var(--mono);font-size:18px;color:var(--green);
  transition:transform .2s ease;
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 2px 20px}
.faq__a p{margin:0;color:var(--ink-soft);line-height:1.65}

.guide-more{margin-top:clamp(48px,7vw,96px)}

/* ==========================================================================
   PROSE (long form)
   ========================================================================== */
.prose{color:var(--ink-soft);font-size:16px;line-height:1.7}
.prose--article{max-width:720px}
.prose--page{max-width:760px}
.prose h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 60;
  color:var(--ink);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.14;
  margin:1.8em 0 0.5em;letter-spacing:-0.01em;
}
.prose h3{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:1.3rem;margin:1.5em 0 0.4em;
}
.prose p{margin:0 0 1.1em}
.prose a{color:var(--green);border-bottom:1px solid var(--line);transition:border-color .16s}
.prose a:hover{border-color:var(--green)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:0.4em 0}
.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{
  margin:1.4em 0;padding:4px 0 4px 20px;border-left:2px solid var(--brass);
  color:var(--ink);font-family:var(--serif);font-size:1.15rem;font-style:italic;
}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.prose th{background:var(--surface);font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint)}

.rich__note{}  /* declared above */

/* ==========================================================================
   COMPARE
   ========================================================================== */
.compare-summary{margin-bottom:clamp(20px,3vw,32px)}
.compare-summary p{margin:12px 0 0;color:var(--ink-soft);font-size:15px}
.compare-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);
  margin:clamp(20px,3vw,32px) 0;
}
.compare-col{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,32px);
}
.compare-col label{
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);
}
.compare-col select{
  width:100%;max-width:340px;font-family:var(--sans);font-size:14px;color:var(--ink);
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);cursor:pointer;
}
.compare-col select:focus{border-color:var(--green);outline:none}
.compare-panel{border-top:1px solid var(--ink);margin-top:8px}
.compare-row{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--line);
}
.compare-row__k{font-size:13px;color:var(--ink-soft)}
.compare-row b{font-family:var(--mono);font-size:15px;font-weight:500;text-align:right;color:var(--ink)}
.compare-win{color:var(--green) !important;font-weight:600}
@media(max-width:620px){
  .compare-wrap{grid-template-columns:1fr}
}
@media(max-width:420px){
  .compare-row{grid-template-columns:1fr auto auto;gap:8px}
  .compare-row b{font-size:13px}
}

/* ==========================================================================
   CTA (green band)
   ========================================================================== */
.cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,48px);flex-wrap:wrap;
  background:var(--green);color:var(--paper-2);border-radius:var(--radius);
  padding:clamp(32px,5vw,64px);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(241,237,228,0.05) 0 1px,transparent 1px 48px);
}
.cta>*{position:relative}
.cta .eyebrow{color:rgba(247,244,236,0.6)}
.cta h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.04;letter-spacing:-0.01em;
  margin:10px 0 0;color:var(--paper-2);
}
.cta__sub{color:rgba(247,244,236,0.72);margin:12px 0 0;max-width:46ch;font-size:15px}
.cta .btn{background:var(--paper-2);color:var(--green-deep);border-color:var(--paper-2)}
.cta .btn:hover{background:#fff;border-color:#fff}

/* ==========================================================================
   NOT FOUND
   ========================================================================== */
.notfound{
  max-width:640px;margin-inline:auto;text-align:center;
  padding-block:clamp(56px,10vw,120px);
}
.notfound__code{
  font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144;
  font-size:clamp(4rem,14vw,8rem);color:var(--green);line-height:1;
}
.notfound h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);
  line-height:1.08;margin:12px 0 0;color:var(--ink);
}
.notfound p{margin:16px auto 0;color:var(--ink-soft);max-width:44ch}
.notfound__links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.footer__legend{background:var(--surface);border-bottom:1px solid var(--line)}
.footer__legend-in{
  display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;
  padding-block:22px;
}
.footer__legend-in .legend{flex:1;min-width:min(100%,420px)}
.footer__notmed{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);
}
.footer__top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-top:clamp(40px,5vw,64px);
}
.footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer__brand .brand__mark{width:32px;height:32px}
.footer__brand .brand__wm{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink)}
.footer__about{color:var(--ink-soft);font-size:14px;max-width:40ch;line-height:1.6}
.footer__col h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 14px;font-weight:500;
}
.footer__col a{display:block;padding:6px 0;color:var(--ink-soft);font-size:14px;transition:color .16s}
.footer__col a:hover{color:var(--ink)}
.footer__disclaimer{
  padding-top:32px;margin-top:32px;border-top:1px solid var(--line);
}
.footer__disclaimer p{color:var(--ink-faint);font-size:12.5px;line-height:1.7;max-width:92ch}
.footer__disclaimer a{color:var(--green);border-bottom:1px solid var(--line)}
.footer__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:22px;margin-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-faint);
}
@media(max-width:820px){
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand,.footer__top>div:first-child{grid-column:1/-1}
}
@media(max-width:460px){
  .footer__top{grid-template-columns:1fr}
}

/* ==========================================================================
   REVEAL / STAGGER animations
   ========================================================================== */
.reveal{animation:nv-reveal .7s cubic-bezier(.2,.6,.2,1) both}
.stagger>*{animation:nv-reveal .6s cubic-bezier(.2,.6,.2,1) both}
.stagger>*:nth-child(2){animation-delay:.05s}
.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.15s}
.stagger>*:nth-child(5){animation-delay:.2s}
.stagger>*:nth-child(6){animation-delay:.25s}
.stagger>*:nth-child(7){animation-delay:.3s}
.stagger>*:nth-child(n+8){animation-delay:.35s}
@keyframes nv-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.stagger>*{animation:none !important;opacity:1 !important;transform:none !important}
  .ticker__track{animation:none !important}
}

/* landing-page editorial intros (category + goal pages) */
.landing-intro{max-width:64ch;margin:0 0 clamp(28px,4vw,44px)}
.landing-intro > * + *{margin-top:1em}
.landing-intro p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.landing-intro h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.3rem,2vw,1.6rem);margin-top:1.4em;letter-spacing:-.01em}
.landing-intro a{color:var(--green);text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--green) 35%,transparent)}
.landing-intro a:hover{text-decoration-color:var(--green)}

/* hero exhibit: median density by category (replaces the flat histogram) */
.catbars{margin-top:clamp(18px,2.5vw,30px)}
.catbars__list{display:grid;gap:10px;margin-top:16px}
.catbar{display:grid;grid-template-columns:minmax(72px,30%) 1fr auto;align-items:center;gap:14px}
.catbar__name{font-size:13px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catbar:hover .catbar__name{color:var(--ink)}
.catbar__track{position:relative;height:8px;background:var(--line-soft);border-radius:1px;overflow:hidden}
.catbar__track i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:1px;transition:width .5s var(--ease,ease)}
.catbar__n{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--green);min-width:22px;text-align:right}
.catbars__ax{display:flex;justify-content:space-between;margin-top:14px;padding-top:11px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;color:var(--ink-faint)}

/* tile density-range bar (replaces the chunky sparkline) */
.rangebar{position:relative;height:8px;margin:18px 0 7px;background:var(--line-soft);border-radius:1px}
.rangebar__fill{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--green) 22%,var(--surface));border-radius:1px}
.rangebar__mark{position:absolute;top:50%;left:0;width:7px;height:7px;background:var(--green);transform:translate(-50%,-50%) rotate(45deg);border-radius:1px}
.rangebar__ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:0.05em;color:var(--ink-faint)}

/* ==========================================================================
   RICHNESS PASS - tactile depth, dramatic color, stronger presence
   ========================================================================== */
/* fine paper grain overlay (premium tactile feel) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}
.nav,.drawer,.footer,main{position:relative;z-index:2}

/* deeper, more dimensional elevation on the signature cards */
.specimen,.glance,.exhibit,.food-card,.guide-card,.guide-feature,.compare-col,.cta{
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(23,23,18,.03), 0 24px 48px -30px rgba(23,23,18,.35);
}
.food-card:hover,.guide-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 8px rgba(23,23,18,.05), 0 32px 60px -32px rgba(23,23,18,.45)}

/* bold full-bleed green feature band (color drama against the paper) */
.gband{background:var(--green);color:var(--paper-2);border-radius:var(--radius);position:relative;overflow:hidden;box-shadow:0 30px 70px -40px rgba(19,38,25,.7)}
.gband__in{padding:clamp(48px,8vw,104px) clamp(24px,6vw,88px);position:relative;z-index:1}
.gband::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(241,237,228,.045) 0 1px,transparent 1px 54px);pointer-events:none}
.gband::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,122,76,.28),transparent 62%);pointer-events:none}
.gband__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:12px;margin-bottom:22px}
.gband__eyebrow::before{content:"";width:28px;height:1px;background:var(--brass)}
.gband h2{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;
  font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.02;letter-spacing:-0.015em;color:var(--paper-2);max-width:20ch;margin:0}
.gband h2 em{font-style:italic;color:#CFE0C7}
.gband p{color:rgba(247,244,236,.74);max-width:52ch;margin:22px 0 0;font-size:clamp(15px,1.6vw,17px);line-height:1.6}
.gband .btn{margin-top:34px;background:var(--paper-2);color:var(--green-deep);border-color:var(--paper-2)}
.gband .btn:hover{background:#fff;border-color:#fff}
.gband--stat .gband__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);margin-top:44px;position:relative}
.gband--stat .gs__n{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);font-weight:400;font-variation-settings:"opsz" 90;line-height:1;color:var(--paper-2)}
.gband--stat .gs__l{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(207,224,199,.75);margin-top:12px}
@media(max-width:640px){.gband--stat .gband__stats{grid-template-columns:1fr;gap:26px}}

/* richer hero atmosphere */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 60% at 88% 8%, rgba(29,58,44,.07), transparent 58%), radial-gradient(70% 50% at 0% 4%, rgba(140,122,76,.06), transparent 55%)}
.hero>*{position:relative;z-index:1}

/* ==========================================================================
   GRAPH REBUILD + COLOR + INTERACTION (mass, brass, food color, animation)
   ========================================================================== */
/* ---- score mark: big numeral + thick brass-capped bar (no tick-line) ---- */
.seal__scale,.seal__marker{display:none !important}
.seal[data-band="elite"],.seal[data-band="strong"]{--band-fill:var(--green);--seal-ink:var(--green)}
.seal[data-band="good"]{--band-fill:var(--green);--seal-ink:var(--ink)}
.seal[data-band="fair"]{--band-fill:var(--brass);--seal-ink:#8C6B3A}
.seal[data-band="poor"]{--band-fill:var(--terra);--seal-ink:var(--terra)}
.seal--hero,.seal--inline{display:flex;flex-direction:column;align-items:center;gap:13px}
.seal--hero .seal__num,.seal--inline .seal__num{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;line-height:.86;color:var(--seal-ink,var(--ink));letter-spacing:-0.02em}
.seal--hero .seal__num{font-size:clamp(3.4rem,10vw,5.2rem)}
.seal--inline .seal__num{font-size:clamp(2.6rem,8vw,3.6rem)}
.seal__den{font-family:var(--mono);font-size:.26em;color:var(--ink-faint);letter-spacing:0}
.seal__bar{display:block;width:min(300px,74vw);height:13px;background:var(--surface-sunk,#ECE9DF);border:1px solid var(--line);border-radius:2px;position:relative;box-shadow:inset 0 1px 2px rgba(23,23,18,.09)}
.seal--inline .seal__bar{width:min(220px,64vw);height:11px}
.seal__bar i{position:absolute;left:0;top:-1px;bottom:-1px;width:var(--w);border-radius:2px 1px 1px 2px;background:var(--band-fill,var(--green))}
.seal__bar i::after{content:"";position:absolute;right:-2px;top:-3px;bottom:-3px;width:3px;background:var(--brass);border-radius:1px}
.seal__band{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.seal--mini{display:grid;place-items:center}
.seal--mini .seal__num{font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 40;font-size:1.35rem;color:var(--seal-ink,var(--ink));line-height:1}

/* ---- fill-grow animation for every data bar ---- */
.fillbar{animation:nv-fill 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes nv-fill{from{width:0}}

/* ---- tile density range bar: real mass + brass median ---- */
.rangebar{height:13px;background:var(--surface-sunk,#ECE9DF);border:1px solid var(--line);border-radius:2px;position:relative;margin:18px 0 9px;box-shadow:inset 0 1px 2px rgba(23,23,18,.08)}
.rangebar__fill{position:absolute;top:-1px;bottom:-1px;left:var(--l);width:var(--w);border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--cc,var(--green)) 70%,var(--green)),var(--cc,var(--green)))}
.rangebar__mark{position:absolute;top:50%;left:var(--l,0);width:10px;height:10px;background:var(--brass);border:1.5px solid var(--paper-2);transform:translate(-50%,-50%) rotate(45deg);border-radius:1px;z-index:2;box-shadow:0 1px 2px rgba(23,23,18,.25)}
.rangebar__ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-faint)}

/* ---- macro ribbon: segmented blocks with in-block labels ---- */
.macro__bar{height:34px;border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex}
.macro__seg{position:relative;display:flex;flex-direction:column;justify-content:center;padding:0 9px;color:var(--paper-2);min-width:0;overflow:hidden;box-shadow:inset -1px 0 0 rgba(241,237,228,.28)}
.macro__seg:last-child{box-shadow:none}
.macro__seg--protein,.macro__swatch--protein{background:var(--green)}
.macro__seg--carb,.macro__swatch--carb{background:var(--brass)}
.macro__seg--fat,.macro__swatch--fat{background:#9C6B3E}
.macro__seg-lab{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;white-space:nowrap;line-height:1.2}
.macro__seg-pct{font-family:var(--mono);font-size:12.5px;font-weight:500;white-space:nowrap;line-height:1.1}

/* ---- nutrition table %DV: filled columns with mass ---- */
.dv-cell{position:relative}
.dv-cell__bar{display:inline-block;height:10px;border-radius:2px;background:var(--green);vertical-align:middle;margin-right:9px;box-shadow:inset 0 -1px 1px rgba(0,0,0,.08)}
.dv-cell.is-high .dv-cell__bar{background:var(--brass)}
.dv-cell.is-danger .dv-cell__bar{background:var(--terra)}

/* ---- rich-in %DV bars: mass + brass cap ---- */
.dv-row__track{height:12px;border:1px solid var(--line);background:var(--surface-sunk,#ECE9DF);box-shadow:inset 0 1px 2px rgba(23,23,18,.07)}
.dv-row__fill{background:var(--green);position:relative;border-radius:2px}
.dv-row--good .dv-row__fill{background:var(--green)}
.dv-row__fill::after{content:"";position:absolute;right:-1px;top:-2px;bottom:-2px;width:3px;background:var(--brass);border-radius:1px}

/* ---- category color + food icons ---- */
.cat-icon{width:26px;height:26px;flex-shrink:0}
.cat-icon--sm{width:18px;height:18px}
.tile{border-top:3px solid var(--cc,var(--green));transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .2s,border-color .2s}
.tile__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tile__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:2px;background:color-mix(in srgb,var(--cc,var(--green)) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--cc,var(--green)) 26%,var(--line));transition:background .2s}
.tile:hover{transform:translateY(-4px)}
.tile:hover .tile__icon{background:color-mix(in srgb,var(--cc,var(--green)) 22%,var(--surface))}
.food-card{border-top:3px solid var(--cc,var(--green))}
.food-card__cat{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.food-card__cat .cat-icon--sm{width:16px;height:16px}

/* ---- scroll-triggered reveal (JS adds .is-in) ---- */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .fillbar{animation:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none}
  .tile:hover,.food-card:hover{transform:none}
}

/* ==========================================================================
   RECIPES
   ========================================================================== */
.recipe-hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--brass) 9%,var(--paper)),var(--paper))}
.recipe-hero__in{padding-block:clamp(40px,7vw,80px);max-width:900px}
.recipe-hero__cat{margin-bottom:var(--s-4)}
.recipe-hero__cat a{color:var(--ink-faint)} .recipe-hero__cat a:hover{color:var(--green)}
.recipe-hero__title{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-0.015em;max-width:20ch}
.recipe-hero__dek{font-size:clamp(1.05rem,2vw,1.35rem);color:var(--ink-soft);margin-top:var(--s-4);max-width:56ch}
.recipe-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.recipe-facts div{display:flex;flex-direction:column}
.recipe-facts b{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;font-variation-settings:"opsz" 60;line-height:1;color:var(--green)}
.recipe-facts span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:7px}
.recipe-hero__meta{margin-top:var(--s-5)}
.recipe-body{max-width:900px}
.recipe-intro{font-size:1.15rem;line-height:1.7;color:var(--ink-soft);max-width:68ch;margin-bottom:var(--s-7)}
.recipe-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px)}
@media(min-width:800px){.recipe-grid{grid-template-columns:0.85fr 1.15fr}}
.recipe-ingredients{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:var(--radius);padding:clamp(22px,3vw,30px);align-self:start;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 48px -30px rgba(23,23,18,.3)}
.recipe-ingredients h2,.recipe-steps h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:var(--s-4)}
.recipe-ingredients ul{display:grid;gap:0}
.recipe-ingredients li{padding:10px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);font-size:.98rem}
.recipe-ingredients li:last-child{border-bottom:0}
.recipe-tips{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)}
.recipe-tips h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s-3)}
.recipe-tips ul{display:grid;gap:var(--s-3)}
.recipe-tips li{font-size:.9rem;color:var(--ink-soft);padding-left:1.2em;position:relative}
.recipe-tips li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--brass);border-radius:1px;transform:rotate(45deg)}
.recipe-steps ol{display:grid;gap:var(--s-5);counter-reset:step;list-style:none;padding:0}
.recipe-steps li{position:relative;padding-left:52px;color:var(--ink-soft);font-size:1.02rem;line-height:1.65;counter-increment:step;min-height:36px}
.recipe-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;color:var(--green);background:var(--surface);border:1px solid var(--line);border-radius:2px}
.recipe-why{margin-top:var(--s-8);padding:clamp(24px,3vw,36px);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:0 var(--radius) var(--radius) 0}
.recipe-why h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:var(--s-3)}
.recipe-note{margin-top:var(--s-6);font-size:.92rem;color:var(--ink-faint);max-width:68ch}
.related-recipes,.related-foods{margin-top:var(--s-7)}
.related-recipes h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:var(--s-4)}

/* recipe cards */
.recipe-grid-cards{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:620px){.recipe-grid-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.recipe-grid-cards{grid-template-columns:1fr 1fr 1fr}}
.recipe-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 4px rgba(23,23,18,.03),0 24px 48px -30px rgba(23,23,18,.32);transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .2s}
.recipe-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 32px 60px -32px rgba(23,23,18,.42)}
.recipe-card__meal{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.recipe-card__title{font-family:var(--serif);font-weight:400;font-size:1.28rem;line-height:1.15;font-variation-settings:"opsz" 40;color:var(--ink)}
.recipe-card__dek{color:var(--ink-soft);font-size:.95rem;flex:1}
.recipe-card__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);margin-top:var(--s-2)}

/* ==========================================================================
   FOOD CALCULATOR / PLATE BUILDER
   ========================================================================== */
.calc-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);align-items:start}
@media(min-width:900px){.calc-grid{grid-template-columns:1.25fr 0.85fr}}
.calc-search{position:relative;margin-bottom:var(--s-5)}
.calc-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 24px 48px -20px rgba(23,23,18,.35);max-height:340px;overflow-y:auto}
.calc-result{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);background:transparent;cursor:pointer;transition:background .12s}
.calc-result:hover,.calc-result:focus-visible{background:var(--paper-2)}
.calc-result:last-child{border-bottom:0}
.calc-result__seal,.calc-item__seal{font-family:var(--serif);font-weight:500;font-size:1.05rem;min-width:34px;text-align:center;color:var(--green)}
.calc-result__seal[data-band="fair"],.calc-item[data-band="fair"] .calc-item__seal{color:#8C6B3A}
.calc-result__seal[data-band="poor"],.calc-item[data-band="poor"] .calc-item__seal{color:var(--terra)}
.calc-result__name{flex:1;font-size:.96rem;color:var(--ink)}
.calc-result__add{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);border:1px solid var(--line);border-radius:2px;padding:4px 9px}
.calc-nohit,.calc-empty{padding:14px;color:var(--ink-faint);font-size:.92rem}
.calc-presets{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:14px}
.calc-presets__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px}
.calc-presets .chip{cursor:pointer}
.calc-plate__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:11px;margin-bottom:6px}
.calc-plate__head h2{font-family:var(--serif);font-weight:400;font-size:1.5rem}
.calc-items{display:flex;flex-direction:column}
.calc-item{display:grid;grid-template-columns:38px 1fr auto auto;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);animation:nv-reveal .4s cubic-bezier(.2,.6,.2,1) both}
.calc-item__name{font-family:var(--serif);font-size:1.05rem;color:var(--ink);min-width:0}
.calc-item__name:hover{color:var(--green)}
.calc-item__amt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.calc-item__amt input{width:62px;padding:6px 8px;border:1px solid var(--line);border-radius:2px;background:var(--surface);font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right}
.calc-item__rm{width:30px;height:30px;display:grid;place-items:center;font-size:20px;color:var(--ink-faint);border:1px solid transparent;border-radius:2px;cursor:pointer;line-height:1}
.calc-item__rm:hover{color:var(--terra);border-color:var(--line)}

.calc-out{display:flex;flex-direction:column;gap:var(--s-5)}
@media(min-width:900px){.calc-out{position:sticky;top:calc(var(--nav-h,72px) + 16px)}}
.calc-scorecard{padding:clamp(24px,3vw,34px);text-align:center;background:var(--surface)}
.calc-out__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);position:relative;z-index:1}
.calc-scorewrap{margin:16px 0 12px;display:flex;justify-content:center}
.calc-scorewrap .seal--hero .seal__num{font-size:clamp(3rem,9vw,4.4rem)}
.calc-scorewrap .seal--hero .seal__bar{width:min(240px,64vw)}
.calc-feedback{font-size:.95rem;color:var(--ink-soft);max-width:34ch;margin:0 auto;position:relative;z-index:1;min-height:2.6em}
.calc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.calc-stat{background:var(--surface);padding:16px 12px;text-align:center}
.calc-stat b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:400;font-variation-settings:"opsz" 40;color:var(--ink);line-height:1}
.calc-stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:7px;display:block}
.calc-macro,.calc-nutrients{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2.4vw,24px)}
.calc-macrobar{display:flex;height:32px;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin:12px 0 0;min-height:32px;background:var(--surface-sunk)}
.calc-macro .macro__legend{margin-top:12px}
.calc-basis{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:none;color:var(--ink-faint);text-transform:lowercase}
.calc-dvlist{display:flex;flex-direction:column;gap:13px;margin-top:14px}
.calc-note{margin-top:var(--s-7)}
.calc-note p{font-size:.92rem;color:var(--ink-soft)}
.calc-guide{margin-top:var(--s-7);max-width:68ch}
.calc-guide h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:var(--s-3)}

/* green band multi-action + light ghost button */
.gband__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.gband__actions .btn{margin-top:0}
.btn--ghost-light{background:transparent;color:var(--paper-2);border:1px solid rgba(247,244,236,.4)}
.btn--ghost-light:hover{background:rgba(247,244,236,.1);border-color:var(--paper-2);color:var(--paper-2)}

/* calculator FAQ + tool cross-links */
.calc-faq{max-width:760px;margin-top:var(--s-8)}
.tools-cross{margin-top:var(--s-6)}
.tools-cross__grid{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:760px){.tools-cross__grid{grid-template-columns:1fr 1fr 1fr}}
.tools-cross__card{display:block;padding:clamp(20px,2.6vw,28px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 48px -30px rgba(23,23,18,.3);transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .2s}
.tools-cross__card:hover{transform:translateY(-4px);box-shadow:0 32px 60px -32px rgba(23,23,18,.42)}
.tools-cross__card h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:var(--s-2) 0;font-variation-settings:"opsz" 40}
.tools-cross__card p{color:var(--ink-soft);font-size:.94rem}

/* ==========================================================================
   PROACTIVE HERO ROTATOR + SPACING + MORE COLOR
   ========================================================================== */
.hero-rotator{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--cc,var(--green));border-radius:var(--radius);padding:clamp(22px,3vw,32px);text-align:center;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 4px rgba(23,23,18,.03),0 26px 52px -32px rgba(23,23,18,.34);transition:border-color .6s ease;margin-bottom:var(--s-5)}
.hero-rotator__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.hero-rotator__top .eyebrow{color:var(--ink-faint)}
.hero-rotator__live{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc,var(--green));display:inline-flex;align-items:center;gap:6px;transition:color .6s}
.hero-rotator__live i{width:7px;height:7px;border-radius:50%;background:var(--cc,var(--green));transition:background .6s}
.js .hero-rotator__live i{animation:nv-blink 1.7s ease-in-out infinite}
@keyframes nv-blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero-rotator__food{display:block;margin:8px 0 2px}
.hero-rotator__cat{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cc,var(--green));transition:color .6s}
.hero-rotator__name{display:block;font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 40;font-size:clamp(1.3rem,2.6vw,1.75rem);color:var(--ink);margin-top:5px;transition:opacity .18s ease;min-height:1.25em}
.hero-rotator .seal--hero{margin-top:6px}
.hero-rotator .seal--hero .seal__num{font-size:clamp(2.8rem,7vw,4rem)}
.hero-rotator .seal--hero .seal__bar{width:min(220px,58vw)}
.hero-rotator__dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.hero-rotator__dot{width:7px;height:7px;border:0;padding:0;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:background .3s,transform .3s}
.hero-rotator__dot.is-on{background:var(--cc,var(--green));transform:scale(1.35)}

/* tighter spacing: kill the big void between a page title and its content */
.page-head + .section,.page-head + section{padding-top:clamp(22px,3vw,40px)}
.page-head{padding-bottom:clamp(20px,2.4vw,32px)}
.calc-guide,.calc-note{margin-top:var(--s-6)}

/* more color: section + page eyebrows carry the accent */
.sec-head__eyebrow{color:var(--green)}
.page-head .eyebrow{color:var(--green)}
.guide-hero__cat,.recipe-hero__cat{color:var(--brass)}
.gband__eyebrow{color:var(--brass)}

/* ==========================================================================
   CENTERING + SPACE TIGHTENING + BRAND MARK
   ========================================================================== */
.brand__mark{width:31px;height:31px;flex-shrink:0;display:block}
.footer__brand .brand__mark{width:28px;height:28px}

/* centered page titles */
.page-head{text-align:center}
.page-head__in{max-width:820px;margin-inline:auto}
.page-head h1{margin-inline:auto}
.page-head p{margin-inline:auto}
.guide-hero,.recipe-hero{text-align:center}
.guide-hero__in,.recipe-hero__in{margin-inline:auto;max-width:860px}
.guide-hero__title,.recipe-hero__title,.guide-hero__dek,.recipe-hero__dek{margin-inline:auto}
.guide-hero__meta,.recipe-hero__meta{justify-content:center}
.recipe-facts{justify-content:center}
.article__head{text-align:center}
.article__head h1,.article__head p{margin-inline:auto}
.gband__in{text-align:center}
.gband h2{margin-inline:auto}
.gband p{margin-inline:auto}
.gband__actions{justify-content:center}
.gband__eyebrow{justify-content:center}
.gband--stat .gband__stats{justify-items:center;text-align:center}

/* tighter global rhythm */
.section{padding-block:clamp(34px,5vw,68px)}
.section--band{padding-block:clamp(34px,5vw,68px)}
.section--tight{padding-block:clamp(22px,3.5vw,44px)}
.page-head{padding-top:clamp(26px,4vw,50px);padding-bottom:clamp(16px,2vw,26px)}
.guide-hero__in,.recipe-hero__in{padding-block:clamp(28px,4.5vw,52px)}
.gband__in{padding:clamp(36px,5.5vw,68px) clamp(24px,6vw,80px)}
.sec-head{padding-top:0;margin-bottom:clamp(18px,2.4vw,30px)}
.section .sec-head:first-child,.container > .sec-head:first-child{padding-top:0}
.hero{padding-top:clamp(20px,3vw,44px)}
.footer__top{padding-top:clamp(28px,4vw,48px)}

/* ===== 3D FOOD BANNER (fc3d) ===== */
.fc3d{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--green-deep);background:radial-gradient(120% 135% at 50% 30%,var(--green) 34%,var(--green-deep) 100%);perspective:1100px}
.fc3d__copy{position:relative;z-index:2;pointer-events:none;text-align:center;max-width:820px;margin:0 auto;padding:clamp(64px,10vw,118px) 24px}
.fc3d__h{margin:0;font:550 clamp(27px,4.4vw,50px)/1.14 var(--serif);letter-spacing:-.015em;color:var(--paper-2)}
.fc3d__h em{font-style:italic;color:#CFE0C7}
.fc3d__stats{display:flex;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,4vw,44px)}
.fc3d__stat{padding:2px clamp(18px,3.6vw,42px)}
.fc3d__stat+.fc3d__stat{border-left:1px solid rgba(241,237,228,.18)}
.fc3d__stat b{display:block;font:600 clamp(22px,2.6vw,32px)/1.1 var(--serif);color:var(--paper)}
.fc3d__stat span{display:block;margin-top:7px;font:500 10.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#9DB3A0}
.fc3d__scene{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;transform:translateY(var(--sy,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
@property --hz{syntax:"<length>";inherits:false;initial-value:0px}
@property --hs{syntax:"<number>";inherits:false;initial-value:1}
.fc3d-chip{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:9px;white-space:nowrap;padding:7px 11px 7px 7px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 34px rgba(8,18,11,.38);opacity:calc(.6 + .4*var(--d));transform:translate(-50%,-50%) translate3d(calc(var(--px,0px)*var(--d)),calc(var(--py,0px)*var(--d)),calc(var(--d)*170px - 195px + var(--hz,0px))) scale(var(--hs,1));animation:fc3dFloat calc(5.5s + 3.5s*var(--d)) ease-in-out var(--dl,0s) infinite;transition:--hz .4s ease,--hs .4s ease,box-shadow .4s ease,opacity .4s ease}
@keyframes fc3dFloat{0%,100%{translate:0 0}50%{translate:0 -11px}}
.fc3d-chip__icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:var(--radius);background:color-mix(in srgb,var(--cc) 20%,#fff);border:1px solid color-mix(in srgb,var(--cc) 42%,#fff)}
.fc3d-chip__icon svg{width:20px;height:20px;display:block}
.fc3d-chip__name{font:500 13.5px/1 var(--serif);color:var(--ink)}
.fc3d-chip__score{font:600 11px/1 var(--mono);letter-spacing:.03em;color:var(--brass);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:4px 6px;transition:background-color .4s,color .4s,border-color .4s}
.fc3d-chip:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
.fc3d-chip:hover{--hz:70px;--hs:1.06;opacity:1;z-index:3;box-shadow:0 0 0 1px var(--brass),0 28px 54px rgba(8,18,11,.5)}
.fc3d-chip:hover .fc3d-chip__score{background:var(--brass);border-color:var(--brass);color:var(--surface)}
}
@media (max-width:759px){
.fc3d{perspective:none}
.fc3d__copy{padding:52px 20px 26px}
.fc3d__stat{padding:6px 14px}
.fc3d__stat+.fc3d__stat{border-left:0}
.fc3d__scene{position:static;transform:none;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:8px;justify-content:start;overflow-x:auto;padding:0 16px 44px;scrollbar-width:none}
.fc3d__scene::-webkit-scrollbar{display:none}
.fc3d-chip{position:static;transform:none;animation:none;opacity:1}
.fc3d-chip__icon{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
.fc3d-chip{animation:none;transition:none}
.fc3d__scene{transform:none!important}
}
/* ===== RECIPE REDESIGN (rx) ===== */
.rx{--tint:#F7F4EC}
.rx-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 60%,var(--paper-2)),var(--paper));border-bottom:1px solid var(--line);overflow:hidden}
.rx-hero__grid{display:grid;gap:30px;padding-block:38px 44px}
.rx-kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.rx-kicker a{color:var(--green);text-decoration:none}
.rx-kicker a:hover{text-decoration:underline}
.rx-title{margin:0 0 14px;font-family:var(--serif);font-weight:600;font-size:clamp(2.05rem,5.4vw,3.25rem);line-height:1.05;letter-spacing:-.015em;color:var(--ink)}
.rx-dek{margin:0 0 18px;max-width:52ch;font-size:1.05rem;line-height:1.55;color:var(--ink-soft)}
.rx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.rx-chips .chip{padding:6px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.rx-chips .chip--meal{background:color-mix(in srgb,var(--tint) 72%,#fff);border-color:color-mix(in srgb,var(--brass) 45%,var(--line));color:var(--green)}
.rx-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rx-facts>div{padding:13px 6px 14px;text-align:center;border-left:1px solid var(--line-soft)}
.rx-facts>div:first-child{border-left:0}
.rx-facts b{display:block;margin-bottom:4px;font-family:var(--serif);font-weight:600;font-size:1.9rem;line-height:1;color:var(--green)}
.rx-facts span{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:419px){.rx-facts>div{border-left:0;border-top:1px solid var(--line-soft)}.rx-facts{grid-template-columns:repeat(2,1fr)}.rx-facts>div:nth-child(even){border-left:1px solid var(--line-soft)}.rx-facts>div:nth-child(-n+2){border-top:0}}
.rx-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.rx-seal{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.rx-seal__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.rx-art{margin:0}
.rx-art__frame{position:relative;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px 0 var(--line-soft)}
.rx-art__frame svg{display:block;width:100%;height:auto;border-radius:var(--radius)}
.rx-mark{position:absolute;width:12px;height:12px;border:0 solid var(--brass)}
.rx-mark--tl{top:-5px;left:-5px;border-top-width:2px;border-left-width:2px}
.rx-mark--tr{top:-5px;right:-5px;border-top-width:2px;border-right-width:2px}
.rx-mark--bl{bottom:-5px;left:-5px;border-bottom-width:2px;border-left-width:2px}
.rx-mark--br{bottom:-5px;right:-5px;border-bottom-width:2px;border-right-width:2px}
.rx-art__cap{margin-top:10px;text-align:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.rx-grid{display:grid;gap:28px;margin-bottom:44px}
.rx-ing{align-self:start;padding:20px 20px 12px;border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:var(--radius);background:var(--surface)}
.rx-ing__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.rx-ing h2,.rx-method h2{margin:0;font-family:var(--serif);font-weight:600;font-size:1.35rem;color:var(--ink)}
.rx-count{display:none;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.js .rx-count{display:inline}
.ing{position:relative;display:flex;gap:12px;align-items:flex-start;padding:11px 2px;border-bottom:1px dashed var(--line-soft);cursor:pointer;font-size:.94rem;line-height:1.45;color:var(--ink-soft)}
.ing:last-child{border-bottom:0}
.ing input{position:absolute;opacity:0;width:1px;height:1px}
.ing__box{flex:0 0 auto;width:17px;height:17px;margin-top:2px;border:1px solid color-mix(in srgb,var(--brass) 55%,var(--line));border-radius:var(--radius);background:var(--paper-2);position:relative;transition:background .15s,border-color .15s}
.ing input:focus-visible+.ing__box{outline:2px solid var(--brass);outline-offset:2px}
.ing input:checked+.ing__box{background:var(--brass);border-color:var(--brass)}
.ing input:checked+.ing__box::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(42deg)}
.ing input:checked~span{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--brass)}
.rx-method__head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.rx-progress{flex:1;display:none;height:3px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.js .rx-progress{display:block}
#stepBar{display:block;height:100%;width:0;background:var(--brass);transition:width .3s ease}
.rx-steps{list-style:none;margin:0;padding:0;position:relative}
.rx-steps::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;width:1px;background:var(--line)}
.step{position:relative;display:flex;gap:18px;padding:0 0 24px;border-radius:var(--radius)}
.step:last-child{padding-bottom:0}
.js .step{cursor:pointer}
.step:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.step__num{position:relative;z-index:1;flex:0 0 auto;display:grid;place-items:center;width:33px;height:33px;border:1px solid color-mix(in srgb,var(--brass) 50%,var(--line));border-radius:50%;background:var(--surface);font-family:var(--serif);font-weight:600;color:var(--green);transition:background .2s,border-color .2s}
.step p{margin:5px 0 0;max-width:62ch;line-height:1.6;color:var(--ink-soft)}
.step.is-done p{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--brass) 60%,transparent)}
.step.is-done .step__num{background:var(--brass);border-color:var(--brass);color:transparent}
.step.is-done .step__num::after{content:"";position:absolute;left:12px;top:9px;width:6px;height:11px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(42deg)}
@media (min-width:760px){.rx-grid{grid-template-columns:330px minmax(0,1fr);gap:44px}.rx-ing{position:sticky;top:84px}}
@media (min-width:960px){.rx-hero__grid{grid-template-columns:1.06fr .94fr;align-items:center;gap:56px;padding-block:56px 62px}}
@media (prefers-reduced-motion:reduce){.ing__box,.step__num,#stepBar{transition:none}}
/* ===== TILT + PARALLAX ===== */
.lift {
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    box-shadow .3s cubic-bezier(.22, 1, .36, 1),
    border-color .3s ease;
  box-shadow: 0 1px 0 rgba(23, 23, 18, .04);
}
.lift:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  box-shadow:
    0 1px 2px rgba(23, 23, 18, .05),
    0 6px 14px rgba(23, 23, 18, .09),
    0 16px 32px rgba(19, 38, 25, .10);
}

html.js [data-tilt] {
  transform-style: preserve-3d;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}
html.js [data-tilt].is-tilting {
  transition: box-shadow .35s ease;
  will-change: transform;
  position: relative;
  z-index: 2;
  box-shadow:
    0 1px 2px rgba(23, 23, 18, .06),
    0 10px 22px rgba(23, 23, 18, .11),
    0 26px 52px rgba(19, 38, 25, .15);
}
html.js [data-tilt].is-tilting.lift { transform: none; }

html.js [data-plx] {
  will-change: transform;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lift,
  html.js [data-tilt],
  html.js [data-plx] {
    transition: none !important;
    transform: none !important;
    will-change: auto;
  }
  .lift:hover { transform: none !important; }
}
/* fc3d refinements: wider copy so stats sit on one row; keep chips clear of text */
.fc3d__copy{max-width:940px}
.fc3d__stat{padding:2px clamp(14px,2.6vw,34px)}
.fc3d__stat span{letter-spacing:.12em}

/* ==========================================================================
   THE GREEN INDEX RAMP: drenched hero, launchpad, new section grammar
   ========================================================================== */
/* A. green-led drenched hero */
.hero--green{background:radial-gradient(130% 150% at 50% -30%,var(--green) 42%,var(--green-deep) 100%);border-bottom:1px solid var(--green-deep)}
.hero--green::before{display:none}
.hero--green .hero__masthead{color:#9DB3A0}
.hero--green .double-rule{border-top-color:rgba(241,237,228,.4)}
.hero--green .double-rule::after{border-top-color:rgba(241,237,228,.14)}
.hero--green .hero__eyebrow{color:#CFE0C7}
.hero--green .hero__title{color:var(--paper-2)}
.hero--green .hero__sub{color:rgba(247,244,236,.78)}
.hero--green .hero__stats b{color:var(--paper-2)}
.hero--green .hero__stats span,.hero--green .hero__stats{color:#9DB3A0}
.hero--green .pv-search__submit{background:var(--paper-2);color:var(--green-deep);border-color:var(--paper-2)}
.hero--green .pv-search__submit:hover{background:#fff;border-color:#fff}
.hero--green .pv-search__chips .chip{background:rgba(247,244,236,.07);border-color:rgba(247,244,236,.3);color:var(--paper-2)}
.hero--green .pv-search__chips .chip:hover{border-color:var(--paper-2)}
.hero--green .hero-rotator{border-color:rgba(0,0,0,.25);box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
.hero--green .hist__cap b{color:var(--paper-2)}
.hero--green .hist__cap span{color:#9DB3A0}
.hero--green .catbar__name{color:#CFE0C7}
.hero--green .catbar:hover .catbar__name{color:var(--paper-2)}
.hero--green .catbar__track{background:rgba(247,244,236,.15)}
.hero--green .catbar__track i{background:#CFE0C7}
.hero--green .catbar__n{color:var(--paper-2)}
.hero--green .catbars__ax{color:#9DB3A0;border-top-color:rgba(241,237,228,.18)}
.hero--green .hero__prov{color:#9DB3A0}

/* B. launchpad: four verb tiles (per-tool hue via --lp) */
.launchpad{padding-block:clamp(26px,4vw,48px)}
.launchpad__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--s-4)}
.lp{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.6vw,28px);background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--lp,var(--green));border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 48px -30px rgba(23,23,18,.32);transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .2s}
.lp:hover{transform:translateY(-4px);box-shadow:0 32px 60px -30px rgba(23,23,18,.45)}
.lp__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius);background:color-mix(in srgb,var(--lp,var(--green)) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--lp,var(--green)) 30%,var(--line));color:var(--lp,var(--green))}
.lp__icon svg{width:24px;height:24px}
.lp__verb{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--ink);line-height:1.1}
.lp__sub{font-size:.9rem;color:var(--ink-soft);flex:1}
.lp__go{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--lp,var(--green))}

/* C. section grammar: serif-italic brass device replaces mono-caps eyebrows */
.sec-head__eyebrow,.page-head .eyebrow{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--brass);display:inline-flex;align-items:center;gap:10px}
.sec-head__eyebrow::before,.page-head .eyebrow::before{content:"";width:8px;height:8px;background:var(--brass);transform:rotate(45deg);border-radius:1px;flex-shrink:0}

/* D. calculator clarity: 3-step hint strip + green output rail header */
.calc-how{display:flex;flex-wrap:wrap;gap:clamp(12px,3vw,28px);margin:0 0 clamp(22px,3vw,34px);padding:0}
.calc-how li{display:flex;align-items:center;gap:11px;font-size:.95rem;color:var(--ink-soft)}
.calc-how b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--paper-2);font-family:var(--serif);font-weight:500;flex-shrink:0}
.calc-how li:not(:last-child)::after{content:"\2192";font-family:var(--mono);color:var(--brass);margin-left:clamp(4px,1.5vw,16px)}
.calc-scorecard{border-top:3px solid var(--green)}

/* green hero: dissolve the bone specimen wrapper around the proof column */
.hero--green .hero__proof{background:transparent;border:0;box-shadow:none;padding:0}
.hero--green .hero__proof::before{display:none}
.hero--green .hero__proof .reg{display:none}

/* ==========================================================================
   TASTE PASS: physicality, wrapping, smooth scroll, tabular figures
   ========================================================================== */
html{scroll-behavior:smooth}
h1,h2,h3{text-wrap:balance}
.prose p,.prose--article p,.guide-hero__dek,.recipe-hero__dek,.hero__sub,.lp__sub,.calc-feedback{text-wrap:pretty}

/* pressed feedback: everything clickable acknowledges the press */
.btn:active,.chip:active,.icon-btn:active,.calc-result:active,.basis-toggle button:active,
.calc-presets .chip:active,.hero-rotator__dot:active,.calc-item__rm:active{transform:translateY(1px) scale(.985)}
.lp:active,.food-card:active,.tile:active,.recipe-card:active,.guide-card:active{transform:translateY(-1px) scale(.995)}
@media (prefers-reduced-motion:reduce){
  .btn:active,.chip:active,.icon-btn:active,.lp:active,.food-card:active,.tile:active,.recipe-card:active,.guide-card:active{transform:none}
}

/* tabular figures wherever numbers columnize */
.seal__num,.fc3d-chip__score,.catbar__n,.rangebar__ax,.rx-facts b,.calc-stat b,.glance__n,
.lg-score,.rank__num,.nutri__wrap td,.dv-row__pct,.recipe-facts b,.hero__stats b,
.fc3d__stat b,.gs__n,.ticker,.fdc-chip,.compare-row b,.calc-item__amt input{font-variant-numeric:tabular-nums}

/* taste-skill pass: guides featured split (breaks the triple card-row rhythm) */
.guide-split{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:920px){.guide-split{grid-template-columns:1.15fr .85fr;align-items:stretch}}
.guide-split .guide-feature{display:flex;align-items:center}
.guide-split__side{grid-template-columns:1fr;align-content:stretch}

/* ==========================================================================
   LIVING INDEX RAMP: food of the day + fresh strip + hero type-ahead
   ========================================================================== */
.today-split{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:920px){.today-split{grid-template-columns:1.15fr .85fr;align-items:stretch}}
.fotd{display:block;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--cat,var(--green));padding:var(--s-5);text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.fotd:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(19,38,25,.12)}
.fotd__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-3)}
.fotd__main{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.fotd__name{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.12;margin:0 0 6px;text-wrap:balance}
.fotd__cat{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;color:var(--cat,var(--green));margin:0 0 10px}
.fotd__cat-ic{width:15px;height:15px;flex:none}
.fotd__why{color:var(--ink-2);font-size:.92rem;max-width:38ch;margin:0 0 12px;text-wrap:pretty}
.fresh{background:var(--surface);border:1px solid var(--line);padding:var(--s-5);display:flex;flex-direction:column}
.fresh__list{list-style:none;margin:0;padding:0;flex:1}
.fresh__row{display:flex;align-items:baseline;gap:12px;padding:11px 0;text-decoration:none;color:inherit;border-top:1px solid var(--line)}
.fresh__list li:first-child .fresh__row{border-top:0;padding-top:2px}
.fresh__row:hover .fresh__title{color:var(--green)}
.fresh__type{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:var(--green);padding:2px 7px;flex:none}
.fresh__type[data-t="Recipe"]{background:var(--terra)}
.fresh__title{font-weight:600;font-size:.92rem;line-height:1.35;flex:1;transition:color .2s}
.fresh__date{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums}
.fresh__more{margin-top:var(--s-3)}
/* type-ahead dropdown (sits over the green hero) */
.pv-search--suggest{position:relative}
.hero-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 44px rgba(19,38,25,.28);max-height:322px;overflow:auto}
.hero-suggest__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.hero-suggest__row:first-child{border-top:0}
.hero-suggest__row:hover,.hero-suggest__row.is-active{background:rgba(29,58,44,.07)}
.hero-suggest__name{font-size:.9rem;line-height:1.3}
.hero-suggest__score{font-family:var(--mono);font-size:.8rem;color:var(--green);font-variant-numeric:tabular-nums;flex:none}
.hero-suggest__empty{padding:12px 14px;font-size:.85rem;color:var(--ink-3)}