/* ============================================================
   The Food Stack — design system
   Warm editorial handbook. Mobile-first. Light/dark aware.
   ============================================================ */

:root {
  /* light theme (default) */
  --bg:        #FBF8F1;
  --bg-tint:   #F4EFE3;
  --surface:   #FFFFFF;
  --surface-2: #FAF6EC;
  --ink:       #23271F;
  --ink-soft:  #555C4C;
  --ink-mute:  #838a76;
  --line:      #E7E0D0;
  --line-soft: #EFEADD;

  --green:      #2E6A40;
  --green-deep: #234E30;
  --green-tint: #E7F0E6;
  --amber:      #B9772C;
  --amber-tint: #F6ECD8;
  --red:        #B0432E;
  --red-tint:   #F5E3DD;
  --blue:       #35617E;
  --blue-tint:  #E4EDF2;

  --shadow-sm: 0 1px 2px rgba(35,39,31,.05), 0 1px 3px rgba(35,39,31,.06);
  --shadow-md: 0 4px 14px rgba(35,39,31,.07), 0 2px 6px rgba(35,39,31,.05);
  --shadow-lg: 0 18px 44px rgba(35,39,31,.13);

  --radius:   16px;
  --radius-sm:10px;
  --radius-lg:24px;

  --maxw: 1080px;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  --bg:        #16180F;
  --bg-tint:   #1E2116;
  --surface:   #1F2217;
  --surface-2: #262a1c;
  --ink:       #ECE9DD;
  --ink-soft:  #B7B7A6;
  --ink-mute:  #8b8c7c;
  --line:      #34382a;
  --line-soft: #2b2f22;

  --green:      #74B77F;
  --green-deep: #A7D3AC;
  --green-tint: #22341f;
  --amber:      #E0A85B;
  --amber-tint: #352a17;
  --red:        #E08a72;
  --red-tint:   #3a231b;
  --blue:       #86B2CC;
  --blue-tint:  #1c2b33;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #16180F;
    --bg-tint:   #1E2116;
    --surface:   #1F2217;
    --surface-2: #262a1c;
    --ink:       #ECE9DD;
    --ink-soft:  #B7B7A6;
    --ink-mute:  #8b8c7c;
    --line:      #34382a;
    --line-soft: #2b2f22;
    --green:      #74B77F;
    --green-deep: #A7D3AC;
    --green-tint: #22341f;
    --amber:      #E0A85B;
    --amber-tint: #352a17;
    --red:        #E08a72;
    --red-tint:   #3a231b;
    --blue:       #86B2CC;
    --blue-tint:  #1c2b33;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 6px 18px rgba(0,0,0,.4);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 560; line-height: 1.14; letter-spacing: -.01em; color: var(--ink); }
p { margin: 0 0 1em; }
a { color: var(--green); text-decoration-color: color-mix(in srgb, var(--green) 35%, transparent); text-underline-offset: 3px; }
strong { font-weight: 640; color: var(--ink); }
::selection { background: color-mix(in srgb, var(--green) 25%, transparent); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-serif); font-weight: 600; font-size: 1.06rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand .dot { font-size: 1.15rem; line-height: 1; }
.nav-links { display: flex; gap: 3px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-size: .84rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap; transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--bg-tint); color: var(--ink); }
.nav-links a.active { background: var(--green); color: #fff; }
:root[data-theme="dark"] .nav-links a.active { color: #14180d; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-links a.active { color:#14180d; } }
.theme-btn {
  flex: none; margin-left: 4px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; font-size: 1rem; display: grid; place-items: center; transition: .15s;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-mute); }
@media (max-width: 900px){ .nav-links { display: none; } }

/* ---------- hero ---------- */
.hero { padding: 62px 0 34px; position: relative; overflow: hidden; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 90% at 82% -10%, color-mix(in srgb, var(--green) 16%, transparent), transparent 60%),
    radial-gradient(50% 70% at 5% 0%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 55%);
}
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:var(--green-tint); padding:6px 13px; border-radius:999px; margin-bottom:22px; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); margin: 0 0 .35em; max-width: 15ch; }
.hero .lede { font-size: clamp(1.05rem, 2.4vw, 1.32rem); color: var(--ink-soft); max-width: 60ch; line-height: 1.55; }
.hero .meta { margin-top: 26px; display:flex; flex-wrap:wrap; gap: 10px 22px; font-size:.9rem; color:var(--ink-mute); }
.hero .meta b { color: var(--ink-soft); font-weight:600; }

/* ---------- sections ---------- */
section { padding: 46px 0; scroll-margin-top: 70px; }
section + section { border-top: 1px solid var(--line-soft); }
.sec-head { max-width: 68ch; margin-bottom: 30px; }
.sec-kicker { font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
.sec-head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .3em; }
.sec-head p { font-size: 1.06rem; color: var(--ink-soft); margin: 0; }

/* ---------- generic cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .g3, .g4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.pill { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:650; padding:4px 10px; border-radius:999px; letter-spacing:.01em; }
.pill.good { background:var(--green-tint); color:var(--green-deep); }
.pill.warn { background:var(--amber-tint); color:var(--amber); }
.pill.bad  { background:var(--red-tint);   color:var(--red); }
.pill.info { background:var(--blue-tint);  color:var(--blue); }
:root[data-theme="dark"] .pill.good{color:var(--green-deep);}

/* ---------- priority levers ---------- */
.levers { counter-reset: lever; }
.lever {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start;
  padding: 20px 22px; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); position: relative;
}
.lever .num {
  counter-increment: lever; width: 40px; height: 40px; border-radius: 12px; flex:none;
  background: var(--green); color:#fff; font-family:var(--font-serif); font-weight:600; font-size:1.25rem;
  display:grid; place-items:center;
}
:root[data-theme="dark"] .lever .num{ color:#14180d; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lever .num{color:#14180d;}}
.lever .num::before { content: counter(lever); }
.lever h3 { font-size: 1.18rem; margin: 1px 0 5px; }
.lever p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.lever .why { margin-top:8px; font-size:.86rem; color:var(--ink-mute); }
.lever .tag { flex:none; align-self:center; }
@media (max-width: 620px){ .lever { grid-template-columns: auto 1fr; } .lever .tag { grid-column: 2; justify-self:start; margin-top:4px; } }

/* ---------- callouts ---------- */
.callout { border-radius: var(--radius); padding: 18px 20px; border:1px solid var(--line); background: var(--surface-2); display:flex; gap:14px; align-items:flex-start; }
.callout .ico { font-size: 1.4rem; line-height: 1; flex:none; margin-top:2px; }
.callout h4 { margin: 0 0 4px; font-size: 1.02rem; }
.callout p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
.callout.key { background: var(--green-tint); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.callout.watch { background: var(--amber-tint); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }

/* ---------- produce lookup ---------- */
.lookup { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); }
.search-row { position: relative; margin-bottom: 18px; }
.search-row input {
  width: 100%; font-size: 1.05rem; font-family: var(--font-sans); color: var(--ink);
  padding: 15px 18px 15px 48px; border-radius: 999px; border:1px solid var(--line);
  background: var(--bg-tint); outline: none; transition: .15s;
}
.search-row input:focus { border-color: var(--green); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); }
.search-row .mag { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--ink-mute); font-size:1.1rem; }
.verdict { min-height: 4px; }
.verdict-card { border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; display:flex; align-items:center; gap:16px; animation: pop .18s ease; }
@keyframes pop { from { opacity:0; transform: translateY(4px);} to {opacity:1;transform:none;} }
.verdict-card .big { font-size: 2rem; }
.verdict-card.buy-org { background: var(--red-tint); border:1px solid color-mix(in srgb,var(--red) 30%,transparent); }
.verdict-card.buy-conv { background: var(--green-tint); border:1px solid color-mix(in srgb,var(--green) 30%,transparent); }
.verdict-card.unknown { background: var(--bg-tint); border:1px solid var(--line); }
.verdict-card h4 { margin:0 0 2px; font-size:1.1rem; }
.verdict-card p { margin:0; font-size:.9rem; color: var(--ink-soft); }
.two-lists { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .two-lists{ grid-template-columns:1fr; } }
.list-box h4 { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:1.02rem; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { font-size:.85rem; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); cursor:default; transition:.12s; }
.list-box.org .chip:hover { background:var(--red-tint); color:var(--red); border-color:transparent; }
.list-box.conv .chip:hover { background:var(--green-tint); color:var(--green-deep); border-color:transparent; }

/* ---------- store / restaurant cards ---------- */
.tcard { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; }
.tcard .top { padding: 18px 20px 14px; }
.tcard .top .rowh { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:3px; }
.tcard h3 { font-size: 1.16rem; margin:0; }
.tcard .sub { font-size:.82rem; color:var(--ink-mute); margin:2px 0 0; }
.tcard .body { padding: 0 20px 18px; font-size:.93rem; color:var(--ink-soft); }
.tcard .best { list-style:none; margin:10px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft); }
.tcard .best li { padding-left: 22px; position:relative; margin-bottom:7px; font-size:.9rem; }
.tcard .best li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.tcard .avoid li::before { content:"✕"; color:var(--red); }
.rank { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }

/* order card (restaurant) */
.order { margin-top:12px; background: var(--green-tint); border-radius: var(--radius-sm); padding: 13px 15px; font-size:.9rem; }
.order .lbl { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); margin-bottom:4px; }
.order .txt { color: var(--ink); }

/* ---------- tables ---------- */
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); box-shadow:var(--shadow-sm); }
table { border-collapse: collapse; width:100%; font-size:.92rem; min-width: 520px; background:var(--surface); }
th, td { text-align:left; padding: 13px 16px; border-bottom:1px solid var(--line-soft); vertical-align: top; }
thead th { background: var(--surface-2); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; position:sticky; top:0; }
tbody tr:last-child td { border-bottom:none; }
td .v { font-weight:650; }

/* ---------- shopping plan strip ---------- */
.plan { display:grid; gap:12px; }
.plan-row { display:grid; grid-template-columns: 190px 1fr auto; gap:16px; align-items:center; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.plan-row .store { font-family:var(--font-serif); font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:9px; }
.plan-row .items { font-size:.92rem; color:var(--ink-soft); }
.plan-row .freq { font-size:.78rem; font-weight:650; color:var(--green-deep); background:var(--green-tint); padding:5px 11px; border-radius:999px; white-space:nowrap; }
@media (max-width: 720px){ .plan-row{ grid-template-columns:1fr; gap:6px; } .plan-row .freq{ justify-self:start; } }

/* ---------- meal / khichdi ---------- */
.steps { display:grid; gap:10px; counter-reset: step; }
.step { display:flex; gap:14px; align-items:flex-start; }
.step .b { counter-increment: step; flex:none; width:26px; height:26px; border-radius:8px; background:var(--amber-tint); color:var(--amber); font-weight:700; font-size:.85rem; display:grid; place-items:center; }
.step .b::before{ content:counter(step);}
.step p { margin:0; font-size:.95rem; }

/* ---------- footer ---------- */
.foot { padding: 40px 0 60px; border-top:1px solid var(--line-soft); color: var(--ink-mute); font-size:.85rem; }
.foot .disc { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:22px; color:var(--ink-soft); font-size:.88rem; }
.foot a { color: var(--ink-soft); }
.src { columns: 2; column-gap: 34px; font-size:.8rem; color:var(--ink-mute); }
.src p { break-inside: avoid; margin:0 0 6px; }
@media (max-width:620px){ .src{ columns:1; } }

.small { font-size:.85rem; color:var(--ink-mute); }
.tick { color: var(--green); font-weight:700; }
.mt0{margin-top:0;} .mb0{margin-bottom:0;}
.divider-note { text-align:center; font-size:.82rem; color:var(--ink-mute); margin: 6px 0 0; }