/* MacroChef - palette carried over from the slides: the linen/oak cream the food
   photography sits on, the charcoal of the wordmark, and amber for every number. */
:root{
  --cream:#F0E7DA;
  --paper:#FBF7F1;
  --ink:#1F1B16;
  --ink-2:#5A5148;
  --line:#DED2C2;
  --amber:#A8721F;
  --amber-lite:#C8922E;
  --shadow:0 1px 2px rgba(31,27,22,.06), 0 8px 24px rgba(31,27,22,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:3px}

/* header ------------------------------------------------------------ */
.top{position:sticky; top:0; z-index:30; background:var(--cream);
     border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; justify-content:space-between;
        gap:16px; height:64px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.mark-mc{display:grid; place-items:center; width:34px; height:34px; border-radius:5px;
         background:var(--ink); color:var(--cream); font-weight:900; font-size:15px;
         letter-spacing:.02em}
.mark-word{font-weight:800; letter-spacing:.10em; font-size:14px}
.mark-word b{font-weight:900}
.list-btn{display:inline-flex; align-items:center; gap:9px; background:var(--ink);
  color:var(--cream); border:0; border-radius:999px; padding:9px 16px;
  font-weight:700; font-size:14px}
.pill{display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  border-radius:999px; background:var(--amber-lite); color:var(--ink);
  font-size:12px; font-weight:900; font-variant-numeric:tabular-nums}

/* hero --------------------------------------------------------------- */
.hero{padding:54px 0 34px}
.hero h1{margin:0 0 14px; font-size:clamp(30px,5.2vw,50px); font-weight:900;
  letter-spacing:-.03em; line-height:1.03; max-width:14ch; text-wrap:balance}
.lede{margin:0; max-width:60ch; color:var(--ink-2); font-size:17px}
.stats{display:flex; flex-wrap:wrap; gap:0; margin:30px 0 0; padding:0;
  border-top:3px solid var(--ink); border-bottom:1px solid var(--line)}
.stats > div{padding:12px 26px 14px; border-right:1px solid var(--line)}
.stats > div:first-child{padding-left:0}
.stats > div:last-child{border-right:0}
.stats dt{font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2)}
.stats dd{margin:4px 0 0; font-size:26px; font-weight:900; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

/* filters ------------------------------------------------------------ */
.filters{position:sticky; top:64px; z-index:20; background:var(--cream);
  border-bottom:1px solid var(--line); padding:12px 0}
.filters-in{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.chips{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; flex:1 1 340px}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap; border:1px solid var(--line); background:var(--paper);
  color:var(--ink-2); border-radius:999px; padding:7px 14px; font-size:13.5px;
  font-weight:700}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.search input{border:1px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:999px; padding:8px 16px; font:inherit; font-size:14px; width:250px}
.search input::placeholder{color:#9A8F81}

/* grid --------------------------------------------------------------- */
.grid{list-style:none; margin:26px 0 60px; padding:0; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.card{background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  text-align:left; padding:0; width:100%; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(31,27,22,.07), 0 14px 34px rgba(31,27,22,.12)}
/* height:auto is required: the img carries width/height attributes (kept so the
   grid does not shift as images load) and those act as a fixed height, which
   makes the browser ignore aspect-ratio entirely. */
.card img{display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:cover; background:var(--line)}
.card-b{padding:13px 14px 15px}
.card-n{font-weight:800; font-size:15.5px; line-height:1.28; letter-spacing:-.01em}
.card-m{margin-top:9px; display:flex; gap:10px; font-size:12px; font-weight:700;
  color:var(--ink-2); font-variant-numeric:tabular-nums}
.card-m b{color:var(--amber); font-weight:900}
.saved-dot{float:right; color:var(--amber); font-size:13px; font-weight:900}
.empty{padding:50px 0; color:var(--ink-2); font-size:17px}

/* modal + drawer ------------------------------------------------------ */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:18px}
.modal-back{position:absolute; inset:0; background:rgba(31,27,22,.55)}
.sheet{position:relative; background:var(--paper); border-radius:14px; overflow:auto;
  max-width:840px; width:100%; max-height:92vh; box-shadow:0 24px 70px rgba(0,0,0,.35)}
.x{position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px;
  border-radius:999px; border:0; background:rgba(31,27,22,.72); color:#fff;
  font-size:22px; line-height:1; display:grid; place-items:center}
.sheet-img{width:100%; height:230px; object-fit:cover; display:block; background:var(--line)}
.sheet-body{padding:22px 26px 28px}
.sheet-body h2{margin:0 0 6px; font-size:27px; font-weight:900; letter-spacing:-.025em;
  text-wrap:balance}
.meta{margin:0; font-size:11.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2)}
.macros{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:18px 0 22px;
  padding:0; border-top:3px solid var(--amber); border-bottom:1px solid var(--line)}
.macros > div{padding:11px 8px 13px; border-right:1px solid var(--line); text-align:center}
.macros > div:last-child{border-right:0}
.macros dd{margin:0; font-size:25px; font-weight:900; color:var(--amber);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.macros dt{margin-top:2px; font-size:9.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2)}
.cols{display:grid; grid-template-columns:1fr 1.35fr; gap:30px}
.cols h3{margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber)}
.ing{list-style:none; margin:0; padding:0}
.ing li{padding:5px 0 5px 15px; position:relative; font-size:15px; color:var(--ink-2)}
.ing li::before{content:""; position:absolute; left:0; top:13px; width:5px; height:5px;
  border-radius:50%; background:var(--amber)}
.method{margin:0; padding-left:20px}
.method li{padding:4px 0 4px 3px; font-size:15px; color:var(--ink-2)}
.method li::marker{font-weight:900; color:var(--ink)}
.tip{margin:20px 0 0; padding:13px 16px; background:var(--cream);
  border-left:3px solid var(--amber); font-size:14.5px; color:var(--ink-2)}
.tip b{color:var(--ink); font-weight:800}
.xtra{margin:14px 0 0; font-size:14px; color:var(--ink-2); display:flex; gap:12px;
  align-items:baseline; padding-top:12px; border-top:1px solid var(--line)}
.xtra b{flex:0 0 88px; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink)}
.add{margin-top:20px; width:100%; background:var(--ink); color:var(--cream); border:0;
  border-radius:9px; padding:14px; font-weight:800; font-size:15px}
.add.is-on{background:var(--amber); color:var(--ink)}
.ghost{background:transparent; border:1px solid var(--line); color:var(--ink-2);
  border-radius:9px; padding:14px 18px; font-weight:700}

.drawer{position:relative; background:var(--paper); border-radius:14px; padding:26px;
  width:100%; max-width:470px; max-height:92vh; overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.35)}
.drawer h2{margin:0 0 4px; font-size:24px; font-weight:900; letter-spacing:-.02em}
.glist{list-style:none; margin:18px 0 0; padding:0}
.glist li{display:flex; gap:11px; align-items:flex-start; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:15px}
.glist input{margin-top:4px; accent-color:var(--amber); width:17px; height:17px; flex:0 0 auto}
.glist .done{text-decoration:line-through; opacity:.45}
.glist .merged{display:block; font-weight:800; color:var(--ink)}
.glist li.pantry{opacity:.82}
.glist .from{display:block; font-size:11.5px; font-weight:700; color:var(--ink-2);
  letter-spacing:.04em; margin-top:1px}
.drawer-tot{margin-top:18px; padding-top:14px; border-top:3px solid var(--ink);
  font-size:13px; font-weight:800; color:var(--ink-2); font-variant-numeric:tabular-nums}
.drawer-tot b{color:var(--amber)}
.drawer-acts{display:flex; gap:10px; margin-top:6px}
.drawer-acts .add{flex:1}
.empty-list{padding:26px 0 6px; color:var(--ink-2)}
.small{font-size:13px; color:var(--ink-2); max-width:62ch}

.foot{border-top:1px solid var(--line); margin-top:20px; padding:30px 0 46px}
.foot p{margin:0 0 8px}

@media (max-width:720px){
  .cols{grid-template-columns:1fr; gap:22px}
  .search input{width:100%}
  .search{flex:1 1 100%}
  .stats > div{padding:12px 18px 14px}
  .sheet-img{height:170px}
  .sheet-body{padding:18px 18px 22px}
  .hero{padding:36px 0 26px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* static recipe pages ------------------------------------------------- */
.rcp{max-width:820px; padding-top:26px; padding-bottom:60px}
.crumbs{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:18px}
.crumbs a{color:var(--ink-2); text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 6px}
.rcp h1{margin:0 0 6px; font-size:clamp(28px,5vw,42px); font-weight:900;
  letter-spacing:-.03em; line-height:1.05; text-wrap:balance}
.rcp-img{display:block; width:100%; max-width:420px; height:auto; border-radius:12px;
  border:1px solid var(--line); margin:22px 0 4px}
.rcp h2{margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber)}
.rcp-cta{margin:26px 0 22px}
.rcp-cta .add{display:inline-block; width:auto; padding:14px 22px; text-decoration:none}
.foot a{color:var(--amber)}
/* cards are anchors so crawlers can follow them to the static recipe pages;
   JS intercepts plain left clicks and opens the modal instead. */
a.card{text-decoration:none; display:flex}

/* serving scaling ------------------------------------------------------ */
.scale{display:flex; align-items:center; gap:7px; margin:16px 0 2px; flex-wrap:wrap}
.scale-l{font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-right:3px}
.sc{border:1px solid var(--line); background:var(--paper); color:var(--ink-2);
  border-radius:999px; padding:5px 13px; font-size:13px; font-weight:800;
  font-variant-numeric:tabular-nums}
.sc:hover{border-color:var(--ink); color:var(--ink)}
.sc.is-on{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.scale-y{font-size:12px; font-weight:700; color:var(--amber); margin-left:4px}
.macro-note{margin:-14px 0 20px; font-size:11.5px; color:var(--ink-2); opacity:.8}
.ing li.scaled{color:var(--ink); font-weight:600}

/* cook mode ------------------------------------------------------------ */
.ck{position:fixed; inset:0; z-index:80; background:var(--cream); color:var(--ink);
  display:flex; flex-direction:column}
.ck-bar{height:4px; background:var(--line); flex:0 0 auto}
.ck-bar-in{height:100%; background:var(--amber); width:0; transition:width .2s ease}
.ck-top{display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--line); flex:0 0 auto}
.ck-count{font-size:12px; font-weight:900; color:var(--amber);
  font-variant-numeric:tabular-nums; flex:0 0 auto}
.ck-name{flex:1; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.ck-x{border:0; background:transparent; color:var(--ink-2); font-size:30px;
  line-height:1; width:40px; height:40px; flex:0 0 auto}
.ck-body{flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:24px 26px; overflow:auto; gap:26px}
/* Read at arm's length: this is the whole point of the mode. */
.ck-step{margin:0; font-size:clamp(26px,5.4vw,42px); font-weight:700;
  line-height:1.32; letter-spacing:-.015em; max-width:22ch; text-wrap:balance}
.ck-timer-slot{display:flex; align-items:center; gap:16px; min-height:56px}
.ck-timer-btn{border:2px solid var(--ink); background:transparent; color:var(--ink);
  border-radius:999px; padding:13px 24px; font-size:16px; font-weight:800}
.ck-timer{font-size:38px; font-weight:900; color:var(--amber);
  font-variant-numeric:tabular-nums}
.ck-ing{position:absolute; left:0; right:0; bottom:88px; max-height:52vh; overflow:auto;
  background:var(--paper); border-top:3px solid var(--amber); padding:18px 26px 24px}
.ck-ing h3{margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber)}
.ck-ing ul{margin:0; padding-left:18px}
.ck-ing li{padding:5px 0; font-size:17px; color:var(--ink-2)}
.ck-foot{display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--line);
  flex:0 0 auto}
.ck-foot button{flex:1; border-radius:10px; padding:17px 10px; font-size:16px;
  font-weight:800; border:1px solid var(--line); background:var(--paper); color:var(--ink-2)}
.ck-foot button:disabled{opacity:.35}
.ck-next{background:var(--ink) !important; border-color:var(--ink) !important;
  color:var(--cream) !important; flex:1.4 !important}
.cook-btn{margin-top:12px; width:100%; border:2px solid var(--ink); background:transparent;
  color:var(--ink); border-radius:10px; padding:13px; font-weight:800; font-size:15px;
  display:block; text-align:center; text-decoration:none}