:root{
  --paper:#F1EEE6;
  --card:#FBFAF5;
  --ink:#1E1B16;
  --soft:#6E675C;
  --faint:#9B9384;
  --rule:#1E1B16;
  --turmeric:#C07A12;
  --turmeric-wash:#F6E3BE;
  --kale:#3F5F44;
  --kale-wash:#DEE7D7;
  --pepper:#28241F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  padding:clamp(18px,4vw,48px) clamp(14px,4vw,40px) 80px;
}
.wrap{max-width:1060px;margin:0 auto}
a{color:inherit}

/* ---------- editorial header ---------- */
.eyebrow{
  font-family:"Space Mono",monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--turmeric);margin:0 0 12px;
}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{text-decoration:underline}
h1{
  font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;
  font-weight:800;font-size:clamp(40px,8vw,76px);
  letter-spacing:-.045em;line-height:.9;margin:0;
  text-wrap:balance;
}
.deck{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-size:clamp(16px,2.3vw,21px);line-height:1.35;
  max-width:44ch;margin:16px 0 0;color:var(--soft);text-wrap:pretty;
}
.meta{
  display:flex;flex-wrap:wrap;gap:4px 26px;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:var(--soft);margin:24px 0 0;
  border-top:1.5px solid var(--rule);padding-top:11px;
}
.meta b{color:var(--ink);font-weight:700}
.meta .cook{color:var(--turmeric)}
.meta .order{color:var(--kale)}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:26px 0 22px}
.group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.group>span{
  font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
}
button{
  font-family:"Space Mono",monospace;font-size:13px;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--rule);border-radius:0;
  padding:6px 13px;cursor:pointer;line-height:1.2;
  transition:background .12s ease,color .12s ease;
}
button:hover{background:var(--kale-wash)}
button:focus-visible{outline:2.5px solid var(--turmeric);outline-offset:2px}
button[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.go{background:var(--turmeric);border-color:var(--turmeric);color:#fff;font-weight:700}
.go:hover{background:var(--pepper);border-color:var(--pepper)}
.controls .go{margin-left:auto}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-bottom:2px solid var(--rule);padding-bottom:14px;margin-bottom:22px;
}
.topbar .brand{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.03em;text-decoration:none;margin-right:auto;padding:6px 0;
}
.topbar a.tab{
  font-family:"Space Mono",monospace;font-size:13px;text-decoration:none;
  border:1.5px solid var(--rule);padding:9px 16px;min-height:42px;
  display:inline-flex;align-items:center;color:var(--ink);
  transition:background .12s ease,color .12s ease;
}
.topbar a.tab:hover{background:var(--kale-wash)}
.topbar a.tab.on{background:var(--ink);color:var(--card)}
@media (max-width:640px){
  .topbar .brand{width:100%;margin-right:0}
  .topbar a.tab{flex:1;justify-content:center;padding:9px 6px}
}

/* ---------- meal cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.mealcard{
  display:block;text-decoration:none;background:var(--card);
  border:2px solid var(--rule);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.mealcard:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--rule)}
.mealcard:active{transform:translate(0,0);box-shadow:none}
.mealcard .photo{height:168px;overflow:hidden;border-bottom:2px solid var(--rule);background:var(--kale-wash)}
.mealcard .photo img{width:100%;height:100%;object-fit:cover;display:block}
.mealcard .body{padding:14px 16px 16px}
.mealcard h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:19px;letter-spacing:-.02em;line-height:1.15;margin:0;text-wrap:balance;
}
.mline{
  font-family:"Space Mono",monospace;font-size:11.5px;color:var(--soft);
  margin-top:7px;letter-spacing:.02em;
}
.mline b{color:var(--ink)}
.mline .cook{color:var(--turmeric);font-weight:700}
.mline .order{color:var(--kale);font-weight:700}
.mealcard .note{font-size:13.5px;color:var(--soft);margin-top:7px;line-height:1.45;text-wrap:pretty}
.empty{
  font-family:"Space Mono",monospace;font-size:13px;color:var(--soft);
  padding:56px 0;text-align:center;
}

/* ---------- meal page ---------- */
.hero-img{width:100%;max-height:300px;object-fit:cover;display:block;border:2px solid var(--rule);margin-top:24px}
.norecipe{
  font-family:"Space Mono",monospace;font-size:12.5px;color:var(--soft);
  border:1.5px dashed var(--faint);padding:14px 16px;margin-top:28px;
}

/* stage bar */
.stage-bar{
  display:none;align-items:center;gap:12px 16px;flex-wrap:wrap;
  border:2px solid var(--rule);background:var(--turmeric-wash);
  padding:12px 16px;margin:0 0 18px;position:sticky;top:8px;z-index:5;
}
.stage-bar.live{display:flex}
.stage-n{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pepper);white-space:nowrap}
.stage-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.02em;flex:1;min-width:40%}
.clock{
  font-family:"Space Mono",monospace;font-weight:700;font-size:21px;
  font-variant-numeric:tabular-nums;margin-left:auto;
}
.clock.ring{background:var(--ink);color:var(--turmeric-wash);padding:0 8px}

/* recipe table */
.sec-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.02em;margin:26px 0 10px}
.scroll{overflow-x:auto;border:2px solid var(--rule);background:var(--card);margin-top:18px}
table.rt{border-collapse:collapse;width:100%;min-width:640px}
.rt td{
  border:1px solid var(--rule);padding:9px 12px;vertical-align:middle;
  transition:background .15s ease,opacity .15s ease;
}
.rt td.prep{
  text-align:center;background:var(--pepper);color:var(--card);
  font-family:"Space Mono",monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:10px;
}
.rt td.ing{font-size:14.5px;line-height:1.4;min-width:210px;cursor:pointer}
.rt td.ing.off{opacity:.4;text-decoration:line-through}
.est-band{
  flex-basis:100%;font-family:"Space Mono",monospace;font-size:11px;color:var(--turmeric);
  border:1.5px dashed var(--turmeric);padding:8px 12px;
}
.rt td.ing .q{font-family:"Space Mono",monospace;font-weight:700;font-size:13px;white-space:nowrap}
.rt td.op{text-align:center;font-size:13px;line-height:1.35;background:var(--kale-wash)}
.rt td.op b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-.01em;text-wrap:balance}
.rt td.op span.sub{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--kale);letter-spacing:.02em;display:block;margin-top:3px}
.rt td.gap{background:var(--card)}
.rt.cooking td.op{cursor:pointer}
.rt.cooking td{opacity:.32}
.rt.cooking td.prep{opacity:.6}
.rt.cooking td.op.hot{opacity:1;background:var(--turmeric);color:#fff}
.rt.cooking td.op.hot b{color:#fff}
.rt.cooking td.op.hot span.sub{color:var(--turmeric-wash)}
.rt.cooking td.ing.on{opacity:1;background:var(--turmeric-wash)}
.rt.cooking td.ing.done{opacity:.55;text-decoration:line-through}
.read-note{
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin:9px 2px 0;
}

/* sections below the table */
.sect{margin-top:40px}
.sect>h2{
  font-family:"Space Mono",monospace;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--turmeric);margin:0 0 14px;
  border-top:1.5px solid var(--rule);padding-top:14px;
}
.sect>h2 small{color:var(--faint);font-weight:400;text-transform:none;letter-spacing:.04em;margin-left:10px}
ul.ings{list-style:none;padding:0;margin:0;columns:2;column-gap:40px}
@media (max-width:560px){ul.ings{columns:1}}
ul.ings li{
  font-size:14.5px;padding:6px 0;border-bottom:1px solid rgba(30,27,22,.14);
  break-inside:avoid;
}
ul.ings li .q{font-family:"Space Mono",monospace;font-weight:700;font-size:13px}
ol.steps{padding-left:24px;margin:0}
ol.steps li{font-size:15px;padding:5px 0;text-wrap:pretty}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px 34px}
.notes-grid p{margin:0;font-size:14.5px;line-height:1.55;color:var(--soft);text-wrap:pretty}
.nutri{
  border:2px solid var(--rule);background:var(--card);
  display:flex;flex-wrap:wrap;gap:6px 26px;padding:12px 16px;
}
.nutri .lbl{
  flex-basis:100%;font-family:"Space Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.nutri span{font-family:"Space Mono",monospace;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.nutri b{color:var(--ink)}

/* glossary terms */
.term{border-bottom:1.5px dotted var(--turmeric);cursor:help}
#tip{
  position:fixed;z-index:60;display:none;max-width:280px;
  background:var(--pepper);color:var(--card);
  font-family:"Space Mono",monospace;font-size:11.5px;line-height:1.5;
  padding:9px 11px;pointer-events:none;
}

/* ---------- planner / shop / prep pages ---------- */
.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.daycard{border:2px solid var(--rule);background:var(--card);padding:12px 14px 14px}
.daycard.unset{border-style:dashed;background:transparent}
.daycard .dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.daycard .dh button{padding:4px 9px;min-height:30px;font-size:12px}
.daycard .dphoto{height:86px;overflow:hidden;border:1.5px solid var(--rule);margin-bottom:9px}
.daycard .dphoto img{width:100%;height:100%;object-fit:cover;display:block}
.daycard select{width:100%;font-family:"Instrument Sans",sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule);border-radius:0;padding:8px 8px}
.planrow{
  display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(30,27,22,.18);
  padding:10px 0;flex-wrap:wrap;
}
.planrow .day{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;width:52px;color:var(--soft)}
.planrow select{
  font-family:"Instrument Sans",sans-serif;font-size:15px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--rule);border-radius:0;padding:7px 10px;
  flex:1;min-width:200px;
}
.planrow .pstat{font-family:"Space Mono",monospace;font-size:11.5px;color:var(--soft);white-space:nowrap}
.week-note{font-family:"Space Mono",monospace;font-size:11px;color:var(--faint);margin-top:14px}
.checkline{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid rgba(30,27,22,.14)}
.checkline input{width:18px;height:18px;accent-color:var(--kale);margin-top:2px;flex-shrink:0}
.checkline label{font-size:14.5px;line-height:1.45;cursor:pointer}
.checkline label .q{font-family:"Space Mono",monospace;font-weight:700;font-size:13px}
.checkline label small{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--faint);display:block}
.checkline.donel label{text-decoration:line-through;color:var(--faint)}
.aisle-h{
  font-family:"Space Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kale);margin:24px 0 4px;
}
.prep-meal-h{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:20px;margin:28px 0 6px}
.cta-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:2px solid var(--rule);background:var(--turmeric-wash);padding:16px 18px;margin-top:26px;
}
.cta-banner b{font-family:"Bricolage Grotesque",sans-serif;font-size:17px}
.cta-banner span{color:var(--soft);font-size:13.5px}
.cta-banner a{font-family:"Space Mono",monospace;font-size:13px;text-decoration:none;
  background:var(--turmeric);color:#fff;border:1.5px solid var(--turmeric);padding:10px 16px;font-weight:700}

@media print{
  body{background:#fff;padding:0}
  .controls,.stage-bar,.topbar{display:none!important}
  .scroll{overflow:visible}
  table.rt{min-width:0;font-size:11px}
  .mealcard:hover{transform:none;box-shadow:none}
}
.q + .alt, .alt{font-family:"Space Mono",monospace;font-size:11px;color:var(--faint)}
.embed{border:2px solid var(--rule);max-width:340px;background:var(--card)}
.embed iframe{width:100%;height:560px;border:0;display:block}
.tset{display:inline-flex;gap:5px}
.tset button{padding:5px 8px;min-height:30px;font-size:11.5px;background:var(--card)}
.timeline{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.timeline .tl{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;min-height:34px;
  font-size:11.5px;background:var(--card);color:var(--soft);
}
.timeline .tl b{font-family:"Space Mono",monospace;font-size:11px}
.timeline .tl small{font-family:"Space Mono",monospace;font-size:10px;color:var(--faint)}
.timeline .tl:disabled{cursor:default;opacity:.75}
.timeline .tl.tl-done{opacity:.45;text-decoration:line-through}
.timeline .tl.tl-now{background:var(--turmeric);border-color:var(--turmeric);color:#fff}
.timeline .tl.tl-now small{color:var(--turmeric-wash)}
