/* ============================================================
   OBSESSED NATURAL FOODIE — visual identity. Site-specific.

   THE PERSONA
   A home cook, roughly 28-50, standing in a grocery aisle with a
   box turned over in one hand and a phone in the other. Reads the
   back before the front. Irritated by packaging that says
   "natural", "wholesome" and "clean" and appears to mean nothing.
   Not on a diet, not in a cult, does not want to be told food is
   toxic. Wants to know what the words on the label are actually
   allowed to mean.

   WHY NOT THE TWO FOOD-SITE CLICHES
   1. White marble, a sprig of basil, and soft sage green - the
      "clean eating" look. It is exactly the aesthetic of the
      packaging this reader has stopped trusting.
   2. Kraft paper, chalkboard type, and hand-lettered arrows - the
      farmers-market look. Charming, and it signals feelings about
      food rather than facts about it.
   Both would file this site next to the claims it exists to decode.

   THE IMAGE THIS IS BUILT FROM
   The Nutrition Facts panel - the most-read, least-designed piece
   of typography in the country. Heavy black rules, a bold grotesque
   headline, plain rows, a footnote. Everyone recognises it in one
   glance, and it already means "the part of the package that is
   legally required to tell the truth". Borrowing its grammar for
   the site's core component makes the argument visually before a
   word is read.

   COLOUR
   Appetite colours, not wellness colours: ripe tomato and egg yolk
   on a butter-coloured ground, with black ink doing the heavy
   lifting the way it does on a real label. There is deliberately
   no green on this site. A food site that refuses the green leaf
   is itself a statement against the clean-eating shorthand.
   Tomato carries links and actions; yolk is a highlight background
   only and never carries text colour on its own.

   TYPE
   Libre Franklin descends from Franklin Gothic, the grotesque
   family long associated with American food labelling. Archivo
   Black supplies the heavy "Nutrition Facts" headline weight.
   ============================================================ */

:root {
  --butter:     #fffaf0;   /* ground */
  --panel:      #ffffff;
  --ink:        #141414;   /* 17.7:1 on butter */
  --ink-soft:   #4d4a44;   /*  8.5:1 on butter */
  --tomato:     #b3321f;   /*  6.0:1 on butter, 6.2:1 white-on-tomato */
  --tomato-deep:#8f2414;   /*  5.5:1 on yolk */
  --yolk:       #ffc53d;   /* highlight background only. Ink on yolk 11.7:1 */
  --yolk-wash:  #fff1c9;
  --rule:       #141414;

  --accent:     var(--tomato);
  --accent-ink: #ffffff;
  /* 5.9:1 on butter. Offset 2px by base.css so it always sits on
     the ground, not on the tomato button. Dark areas override. */
  --focus:      #1f5fbf;
  --measure:    66ch;

  --display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Libre Franklin', 'Franklin Gothic Medium', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  background: var(--butter);
  color: var(--ink);
}

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 0.8rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.9rem; }
a { color: var(--tomato); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--tomato-deep); }

.eyebrow {
  display: inline-block;
  font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--butter);
  padding: 0.2rem 0.55rem; margin-bottom: 0.9rem;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; }

/* ---- Header: a shelf sign ---------------------------------- */
.site-header { border-bottom: 8px solid var(--ink); background: var(--butter); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: 0.75rem 2rem; padding-block: 1.1rem 0.9rem;
}
.brand { color: var(--ink); text-decoration: none; line-height: 0.95; display: inline-block; min-height: 44px; }
.brand .w1 { display: block; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.12em; }
.brand .w2 {
  display: block; font-family: var(--display); font-size: 1.75rem;
  background: linear-gradient(transparent 62%, var(--yolk) 62%);
  padding-right: 0.2rem;
}
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 0.9375rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 4px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--yolk); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--tomato); }

main { padding-block: 3rem 4.5rem; }

/* ---- Hero with a sticker ----------------------------------- */
.hero { position: relative; padding-bottom: 2.5rem; border-bottom: 3px solid var(--ink); }
.hero h1 { max-width: 15ch; margin-bottom: 1.1rem; }
.hero h1 q { quotes: "\201C" "\201D"; }
.sticker {
  position: absolute; right: 0; top: 0;
  width: 9.5rem; height: 9.5rem; border-radius: 50%;
  background: var(--yolk); color: var(--ink);
  display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-size: 1.05rem; line-height: 1.05;
  transform: rotate(-8deg);
  border: 3px solid var(--ink);
  padding: 1rem;
}

.section { margin-top: 3.5rem; }

/* ---- CLAIM FACTS -------------------------------------------
   The signature component, built on the grammar of a Nutrition
   Facts panel: a heavy title, thick and thin rules, plain rows,
   and a footnote. The status word ALWAYS carries the meaning;
   fill and outline only reinforce it. */
.facts-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(18.5rem, 100%), 1fr)); list-style: none; margin: 1.5rem 0 0; padding: 0; }
.facts {
  background: var(--panel);
  border: 2px solid var(--rule);
  padding: 0.6rem 0.8rem 0.8rem;
  max-width: none;
  display: flex; flex-direction: column;
}
.facts-title {
  font-family: var(--display); font-size: 1.95rem; line-height: 1;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; margin: 0;
}
.facts-serving { font-size: 0.9375rem; padding: 0.2rem 0; border-bottom: 10px solid var(--rule); margin: 0; }
.facts-serving b { font-weight: 800; }
.facts-claim { font-family: var(--display); font-size: 1.35rem; padding: 0.35rem 0 0.2rem; margin: 0; }
.facts-status { padding: 0.15rem 0 0.4rem; border-bottom: 5px solid var(--rule); margin: 0; }
.facts dl { margin: 0; }
.facts .row { border-bottom: 1px solid var(--rule); padding: 0.45rem 0; }
.facts dt { font-weight: 800; font-size: 0.9375rem; }
.facts dd { margin: 0.1rem 0 0; font-size: 0.9375rem; }
.facts .footnote { border-top: 5px solid var(--rule); margin-top: 0.1rem; padding-top: 0.45rem; font-size: 0.8125rem; color: var(--ink-soft); }

.status {
  display: inline-block; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.25rem 0.55rem; border: 2px solid var(--ink);
}
.status--regulated { background: var(--ink); color: #ffffff; }
.status--undefined { background: #ffffff; color: var(--tomato-deep); border-color: var(--tomato); border-style: dashed; }
.status--private   { background: var(--yolk); color: var(--ink); }

/* ---- The key ------------------------------------------------ */
.key { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.key li { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: start; max-width: none; padding-top: 0.75rem; border-top: 1px solid #d9d2c3; }

/* ---- The 30-second aisle read ------------------------------ */
.aisle { counter-reset: a; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.aisle > li {
  counter-increment: a; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.25rem;
  padding: 1.25rem 0; border-top: 3px solid var(--ink); max-width: none;
}
.aisle > li::before {
  content: counter(a); font-family: var(--display); font-size: 3.4rem; line-height: 0.9;
  color: var(--tomato);
}
.aisle h3 { margin-bottom: 0.3rem; }

/* ---- Pantry shelf ------------------------------------------ */
.shelf { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); list-style: none; margin: 1.5rem 0 0; padding: 0; }
.jar { background: var(--panel); border: 2px solid var(--ink); border-top-width: 10px; padding: 1.1rem 1.2rem; max-width: none; }
.jar dl { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.jar dt { font-weight: 800; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.jar dd { margin: 0; font-size: 0.9375rem; }
.jar .watch dt { color: var(--tomato-deep); }

/* ---- Panels ------------------------------------------------- */
.panel { background: var(--panel); border: 3px solid var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }
.panel--yolk { background: var(--yolk-wash); }
.words { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); list-style: none; margin: 1rem 0 0; padding: 0; }
.words li { background: var(--panel); border: 2px solid var(--ink); padding: 0.8rem 1rem; max-width: none; }
.words b { display: block; font-family: var(--display); font-size: 1.05rem; }

/* ---- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem;
  background: var(--tomato); color: #fff; border: 3px solid var(--ink);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9375rem;
  text-decoration: none; box-shadow: 4px 4px 0 var(--ink);
}
.btn:hover { background: var(--tomato-deep); color: #fff; }
.btn--plain { background: var(--panel); color: var(--ink); }
.btn--plain:hover { background: var(--yolk); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 0.12s ease, box-shadow 0.12s ease; }
  .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
}

/* ---- Prose -------------------------------------------------- */
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

/* ---- Signup ------------------------------------------------- */
.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-weight: 800; }
.signup input { padding: 0.6rem 0.8rem; border: 3px solid var(--ink); background: #fff; border-radius: 0; }
.signup button { justify-self: start; cursor: pointer; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.75rem; }

.slot { border: 3px dashed var(--ink-soft); padding: 1rem 1.25rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---- Footer ------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--butter); padding-block: 2.5rem 3rem; border-top: 8px solid var(--yolk); }
.site-footer :focus-visible { outline-color: var(--yolk); }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.site-footer h2 { font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yolk); margin-bottom: 0.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.35rem; }
.site-footer .fine { color: #d8d2c4; margin-top: 2rem; }

@media (max-width: 44rem) {
  .sticker { position: static; transform: rotate(-4deg); width: 7.5rem; height: 7.5rem; font-size: 0.9rem; margin-bottom: 1rem; }
  .key li { grid-template-columns: 1fr; gap: 0.3rem; }
  .aisle > li { grid-template-columns: 3rem 1fr; gap: 0.75rem; }
  .aisle > li::before { font-size: 2.4rem; }
}

@media (forced-colors: active) {
  .status, .facts, .jar, .panel, .words li, .btn, .sticker { border: 2px solid; }
  .brand .w2 { background: none; text-decoration: underline; }
}

/* Narrow screens: keep every page within 320px (WCAG 1.4.10 reflow). Added 2026-09-17 audit. */