/* Annapurna Food Bank: tomato red, turmeric and cream with big, bold type. Bricolage Grotesque for headings, Work Sans
   for text. Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FFF7E8;
  --surface: #FFFFFF;
  --soft: #FFEFD1;
  --ink: #1E1A16;
  --muted: #5C5148;
  --line: #F0DDBA;
  --line-strong: #D9BE8C;
  --brand: #E63B2E;
  --brand-hover: #C92E22;
  --brand-ink: #FFFFFF;
  --brand-text: #C92E22;
  --turmeric: #FFB400;
  --eyebrow: #C92E22;
  --head: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Work Sans", system-ui, sans-serif;
  --radius: 14px;
  --radius-lg: 28px;
  --btn-radius: 14px;
  --wrap: 1200px;
  --gap: 20px;
  --out-bg: #1E1A16;
  --out-btn: #FFB400;
  --out-btn-ink: #1E1A16;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.03em; }
.btn { font-weight: 700; }

/* header */
.header { background: var(--bg); }
.logo b { font: 800 1.5rem/1 var(--head); letter-spacing: -.03em; color: var(--ink); }
.logo small { font-size: .76rem; font-weight: 600; color: var(--brand-text); }
.nav a { font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--turmeric); }

/* hero */
.hero { padding-top: clamp(28px, 5vw, 64px); background: var(--bg); overflow: hidden; }
.hero h1 { font-size: clamp(2.3rem, 6.6vw, 5.4rem); line-height: .98; max-width: 16ch; }
.eq { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; margin-bottom: 14px; font-size: .62em; color: var(--muted); }
.eq b { display: inline-block; padding: 0 .3em; border-radius: 10px; background: var(--brand); color: #fff; }
.eq b + b { background: var(--turmeric); color: var(--ink); }
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-top: 24px; }
.hero-row .lede { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(28px, 4vw, 48px); }
.plates svg { width: 100%; height: auto; display: block; }
.plates svg:nth-child(2) rect:first-child { fill: var(--turmeric); }
.plates svg:nth-child(3) rect:first-child { fill: var(--brand); }
.ticker { background: var(--ink); padding-block: 0; }
.ticker .stats { border: 0; border-radius: 0; background: rgba(255,255,255,.12); }
.ticker .stats div { background: var(--ink); }
.ticker .stats b { color: var(--turmeric); }
.ticker .stats span { color: #CFC5B8; }
.ways { background: var(--turmeric); }
.meal-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--gap); }
.meal-cards li { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--radius-lg); background: var(--bg); }
.meal-cards b { font: 800 3rem/1 var(--head); color: var(--brand); letter-spacing: -.04em; }
.meal-cards p { color: var(--muted); }
.meal-cards .text-link { margin-top: auto; }
.p-card, .s-card { border: 0; }
.surplus { background: var(--brand); color: #fff; }
.surplus-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 22px; }
.surplus h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 22ch; }
.surplus p { margin-top: 10px; max-width: 56ch; color: #FFE1DC; }
.surplus .btn-primary { background: var(--turmeric); color: var(--ink); }
.surplus .btn-ghost { color: #fff; border-color: #fff; }

/* meals calculator */
.mt-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.mt-pick .pill span { padding: 14px; gap: 2px; display: grid; }
.mt-pick small { font-weight: 500; opacity: .85; }
.amounts .amt span { border-radius: var(--radius); }
.meals-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1; }
.meals-big b { font: 800 clamp(3.2rem, 9vw, 5rem)/1 var(--head); color: var(--turmeric); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.meals-big span { font-weight: 600; font-size: 1.1rem; }
.plate-grid { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.plate-grid svg { width: 24px; height: 24px; }
.plate-grid .more { font-weight: 700; margin-left: 6px; }
.grid-key { flex-basis: 100%; font-size: .82rem; opacity: .75; margin-top: 4px; }

/* inner pages */
.page-head { background: var(--turmeric); margin-bottom: clamp(24px, 4vw, 40px); }
.page-head .eyebrow { color: var(--ink); }
.page-head .lede { color: var(--ink); }
.cta-band { background: var(--brand); color: #fff; }
.cta-band .btn-primary { background: var(--turmeric); color: var(--ink); }
.cta-band .btn-ghost { color: #fff; border-color: #fff; }
.footer { background: var(--ink); color: #D8CFC2; --footer-line: rgba(255,255,255,.14); }
.footer .logo b, .footer h2 { color: #fff; }
.footer .logo small { color: var(--turmeric); }
.footer .credit a { color: #fff; }