:root{
  --ground:#E4EEE7; --ground-dot:#D2E2D7; --ink:#1E2D27; --ink-soft:#4F635B;
  --cab:#9E2F3C; --cab-deep:#6F1E2A; --cavity:#3A0E16;
  --face:#B23A48; --face-hi:#C9535F; --face-lo:#8C2A37;
  --brass:#C4923A; --brass-hi:#ECCB74; --brass-lo:#8A6324;
  --paper:#FFFCF5; --paper-line:#D3E3EE; --paper-rule:#E07F89; --card-ink:#26302C; --card-soft:#5A6762;
  --pist:#4B8A61; --sky:#5B9ABF; --bulb-off:#B7C6BD;
  --chip:#FFFFFF; --chip-ink:#1E2D27; --chip-line:#C6D6CC;
  --backdrop:rgba(20,32,27,.55);
  --display:"Gluten","Cooper Black","Georgia",serif;
  --hand:"Kalam","Comic Sans MS","Segoe Print",cursive;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0F1A16; --ground-dot:#15241E; --ink:#E3EDE7; --ink-soft:#98AFA5;
    --cab:#5E1A24; --cab-deep:#3D0F17; --cavity:#1C050A;
    --face:#76232F; --face-hi:#8E303C; --face-lo:#561822;
    --brass:#B98A3A; --brass-hi:#DDB862; --brass-lo:#7A5520;
    --paper:#F3ECDF; --paper-line:#CFD8DB;
    --pist:#78BD8F; --sky:#7DB6D6; --bulb-off:#2A3A33;
    --chip:#1A2923; --chip-ink:#E3EDE7; --chip-line:#2E433A;
    --backdrop:rgba(3,8,6,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F1A16; --ground-dot:#15241E; --ink:#E3EDE7; --ink-soft:#98AFA5;
  --cab:#5E1A24; --cab-deep:#3D0F17; --cavity:#1C050A;
  --face:#76232F; --face-hi:#8E303C; --face-lo:#561822;
  --brass:#B98A3A; --brass-hi:#DDB862; --brass-lo:#7A5520;
  --paper:#F3ECDF; --paper-line:#CFD8DB;
  --pist:#78BD8F; --sky:#7DB6D6; --bulb-off:#2A3A33;
  --chip:#1A2923; --chip-ink:#E3EDE7; --chip-line:#2E433A;
  --backdrop:rgba(3,8,6,.7);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  background-color:var(--ground);
  background-image:radial-gradient(var(--ground-dot) 1.6px, transparent 1.8px);
  background-size:22px 22px;
  color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5;
  padding-inline:16px; padding-block:28px 96px;
}
.wrap{max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:28px}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--brass); outline-offset:3px; border-radius:6px}

/* ---------- header ---------- */
header{display:grid; grid-template-columns:1fr auto; gap:20px 32px; align-items:end}
.eyebrow{font-family:var(--hand); font-size:18px; color:var(--cab); margin:0 0 2px; transform:rotate(-1.5deg); display:inline-block}
:root[data-theme="dark"] .eyebrow{color:var(--brass-hi)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .eyebrow{color:var(--brass-hi)}}
h1{font-family:var(--display); font-weight:800; font-size:clamp(44px,8vw,84px); line-height:.92; margin:0; letter-spacing:-.01em; text-wrap:balance}
h1 span{color:var(--cab); display:inline-block; transform:rotate(-3deg) translateY(-2px)}
:root[data-theme="dark"] h1 span{color:var(--face-hi)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) h1 span{color:var(--face-hi)}}
.lede{max-width:52ch; color:var(--ink-soft); margin:12px 0 0; font-size:17px}
.controls{display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.datebox{display:flex; align-items:center; gap:8px; background:var(--chip); border:1.5px solid var(--chip-line); border-radius:999px; padding:5px 6px 5px 16px}
.datebox label{font-size:13px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em}
.datebox output{font-family:var(--display); font-weight:700; font-size:20px; min-width:74px; text-align:center; font-variant-numeric:tabular-nums}
.step{width:34px; height:34px; border-radius:50%; border:none; background:var(--ground); font-size:20px; line-height:1; display:grid; place-items:center}
.step:hover{background:var(--brass-hi); color:#2a1d05}
.note{font-family:var(--hand); font-size:15px; color:var(--ink-soft); margin:0; text-align:right}
.bar{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--chip-line); background:var(--chip); color:var(--chip-ink); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.surprise{border:none; background:var(--brass); color:#2a1d05; border-radius:999px; padding:8px 16px; font-weight:700; font-size:14px; display:inline-flex; gap:8px; align-items:center; box-shadow:0 3px 0 var(--brass-lo)}
.surprise:hover{background:var(--brass-hi)}
.surprise:active{transform:translateY(2px); box-shadow:0 1px 0 var(--brass-lo)}
.progress{font-size:14px; color:var(--ink-soft)}
.progress b{font-family:var(--display); font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- garland ---------- */
.garland{position:relative; height:46px; margin:0 12px -18px; z-index:2; pointer-events:none}
.garland svg{position:absolute; inset:0; width:100%; height:30px; overflow:visible}
.garland path{fill:none; stroke:var(--ink-soft); stroke-width:1.4; opacity:.6}
.bulb{position:absolute; width:12px; height:17px; margin-left:-6px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:var(--bulb-off); transition:background .4s, box-shadow .4s}
.bulb::before{content:""; position:absolute; top:-5px; left:3px; width:6px; height:6px; border-radius:2px; background:var(--ink-soft)}
.bulb.on{background:var(--c); box-shadow:0 0 10px 2px var(--c)}
.bulb.today{animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{box-shadow:0 0 18px 5px var(--c); filter:brightness(1.25)}}

/* ---------- cabinet ---------- */
.cabinet{position:relative; background:linear-gradient(var(--cab), var(--cab-deep)); border-radius:18px 18px 10px 10px; padding:44px 22px 30px; box-shadow:0 2px 0 var(--cab-deep), 0 24px 40px -18px rgba(40,10,15,.45), inset 0 2px 0 rgba(255,255,255,.12)}
.crown{position:absolute; left:-10px; right:-10px; top:-12px; height:26px; background:var(--cab-deep); border-radius:10px; box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
.plate{position:absolute; bottom:-11px; z-index:2; left:50%; transform:translateX(-50%); background:linear-gradient(var(--brass-hi),var(--brass)); color:#3a2806; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; padding:4px 16px 3px; border-radius:4px; white-space:nowrap; box-shadow:0 2px 0 var(--brass-lo)}
.feet{position:absolute; left:28px; right:28px; bottom:-14px; display:flex; justify-content:space-between}
.feet i{width:44px; height:16px; background:var(--cab-deep); border-radius:0 0 14px 14px}
.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:30px 14px}
.cell{position:relative; aspect-ratio:5/4; max-width:100%; border-radius:6px; background:var(--cavity); box-shadow:inset 0 3px 6px rgba(0,0,0,.5); transition:opacity .25s}
.cell.dim{opacity:.32}
.slip{position:absolute; left:10%; right:10%; top:0; height:70%; background:var(--paper); border-radius:3px 3px 0 0; padding:3px 6px 0; font-family:var(--hand); font-size:13px; line-height:1.1; color:var(--card-ink); text-align:center; overflow:hidden; transform:translateY(8px); transition:transform .45s cubic-bezier(.3,1.5,.5,1); box-shadow:0 -2px 4px rgba(0,0,0,.15)}
.slip span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.face{position:absolute; inset:0; border:none; border-radius:6px; padding:8px; background:linear-gradient(170deg,var(--face-hi),var(--face) 45%,var(--face-lo)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.07), inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; transition:transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .45s}
.face:hover{filter:brightness(1.07)}
.label{background:var(--paper); border:3px solid var(--brass); outline:1px solid var(--brass-lo); border-radius:4px; padding:3px 8px 2px; min-width:62%; text-align:center; color:var(--card-ink); line-height:1}
.label b{display:block; font-family:var(--display); font-weight:800; font-size:clamp(20px,2.6vw,28px); font-variant-numeric:tabular-nums}
.label small{display:block; font-family:var(--hand); font-size:13px; color:var(--card-soft); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:11ch; margin-inline:auto}
.pull{width:34%; height:9px; border-radius:0 0 12px 12px; background:linear-gradient(var(--brass-hi),var(--brass) 60%,var(--brass-lo)); box-shadow:0 2px 2px rgba(0,0,0,.3)}
.cell.open .face{transform:translateY(12px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.07), inset 0 -3px 0 rgba(0,0,0,.18), 0 10px 14px -4px rgba(0,0,0,.5)}
.cell.open .slip{transform:translateY(-14px)}
.cell.today .label{box-shadow:0 0 0 4px rgba(236,203,116,.45); animation:halo 2s ease-in-out infinite}
@keyframes halo{50%{box-shadow:0 0 0 8px rgba(236,203,116,.12), 0 0 18px 4px rgba(236,203,116,.55)}}
.tag{position:absolute; right:8%; bottom:-10px; background:var(--brass-hi); color:#3a2806; font-family:var(--hand); font-weight:700; font-size:14px; padding:1px 8px; border-radius:3px; transform-origin:top center; animation:swing 2.4s ease-in-out infinite; z-index:3; pointer-events:none}
@keyframes swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(7deg)}}
.cell.locked .face{cursor:not-allowed}
.cell.wiggle .face{animation:wiggle .45s}
@keyframes wiggle{20%{transform:translateX(-5px) rotate(-2deg)}40%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.cell.d24 .label{border-color:var(--brass-hi); background:#FFF6DA}
.cell.d24 .label b::after{content:" ★"; font-size:.6em; color:var(--brass); vertical-align:middle}

.legend{display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; font-size:14px; color:var(--ink-soft); margin-top:4px}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend i{width:14px; height:14px; border-radius:3px; display:inline-block}

/* ---------- recipe box ---------- */
.box h2{font-family:var(--display); font-weight:700; font-size:28px; margin:0}
.box header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.box p{margin:0; color:var(--ink-soft)}
.minis{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px}
.mini{border:none; background:var(--paper); color:var(--card-ink); width:176px; max-width:100%; padding:10px 14px 12px; text-align:left; border-radius:3px; background-image:linear-gradient(var(--paper-rule),var(--paper-rule)),repeating-linear-gradient(var(--paper) 0 21px,var(--paper-line) 21px 22px); background-size:100% 2px,100% 100%; background-position:0 30px,0 8px; background-repeat:no-repeat,repeat; box-shadow:0 6px 14px -6px rgba(0,0,0,.35); transition:transform .2s}
.mini:nth-child(odd){transform:rotate(-1.5deg)} .mini:nth-child(even){transform:rotate(1.2deg)}
.mini:hover{transform:rotate(0) translateY(-3px)}
.mini small{font-family:var(--hand); color:var(--cab); font-size:14px; display:block; height:24px}
.mini strong{font-family:var(--display); font-weight:700; font-size:17px; line-height:1.2; display:block; margin-top:6px}
.empty{font-family:var(--hand); font-size:17px; margin-top:10px !important}

/* ---------- recipe card overlay ---------- */
.overlay{position:fixed; inset:0; background:var(--backdrop); z-index:20; display:grid; place-items:center; padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); animation:fade .2s}
@keyframes fade{from{opacity:0}}
.card{position:relative; width:100%; max-width:860px; max-height:100%; overflow:auto; background:var(--paper); color:var(--card-ink); border-radius:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); animation:pop .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:translateY(24px) rotate(-1.5deg) scale(.96); opacity:0}}
.card-top{padding:26px 30px 18px; border-bottom:2px solid var(--paper-rule); position:relative}
.tape{position:absolute; top:-8px; left:50%; width:110px; height:24px; margin-left:-55px; background:rgba(236,203,116,.55); transform:rotate(-2deg)}
.kicker{font-family:var(--hand); color:#A8323F; font-size:17px; margin:0}
.card h2{font-family:var(--display); font-weight:800; font-size:clamp(30px,5vw,46px); line-height:1; margin:4px 0 6px; text-wrap:balance; padding-right:40px}
.blurb{font-family:var(--hand); font-size:18px; color:var(--card-soft); margin:0}
.close{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,.06); font-size:22px; color:var(--card-ink)}
.close:hover{background:rgba(0,0,0,.12)}
.meta{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; margin-top:14px; font-size:14px; color:var(--card-soft)}
.meta > span{display:inline-flex; align-items:center; gap:6px}
.meta svg{flex:none}
.mitts{display:inline-flex; gap:2px}
.mitts svg path{fill:#A8323F} .mitts svg.off path{fill:none; stroke:#B9A9A5; stroke-width:1.5}
.pill{background:#E8F1EA; color:#2F6443; border-radius:999px; padding:2px 10px; font-weight:600; font-size:13px}
.batch{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 30px; background:#F6F0E3; border-bottom:1px solid #E9DFCB}
.batch .lbl{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--card-soft)}
.seg{display:inline-flex; background:#fff; border:1.5px solid #E2D6BE; border-radius:999px; padding:3px}
.seg button{border:none; background:none; border-radius:999px; padding:4px 13px; font-weight:700; font-size:14px; color:var(--card-ink)}
.seg button[aria-pressed="true"]{background:#A8323F; color:#fff}
.yield{font-family:var(--hand); font-size:18px}
.cols{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0}
/* Ruled paper: every row of text is exactly --rule tall, and a line is drawn near the bottom of each row,
   so text always sits just above a line however it wraps. Everything in the columns (headings, text,
   checkboxes, step numbers, timer buttons, padding) is sized to fit whole rows. --rule-lift raises the
   lines slightly so they sit close under the text rather than at the very bottom of the row. */
.cols section{--rule:32px; --rule-lift:3px; padding:var(--rule) 30px var(--rule); background-image:linear-gradient(transparent calc(var(--rule) - 1px),var(--paper-line) calc(var(--rule) - 1px)); background-size:100% var(--rule); background-position:0 calc(-1 * var(--rule-lift))}
.cols section + section{border-left:1px dashed #E2CFCF}
.cols h3{font-family:var(--display); font-weight:700; font-size:21px; line-height:var(--rule); margin:0}
.cols .hint{font-family:var(--hand); font-size:14px; line-height:var(--rule); color:var(--card-soft); margin:0}
.ings{list-style:none; margin:0; padding:0}
.ings li label{display:flex; gap:10px; align-items:flex-start; padding:0; cursor:pointer; font-size:17px; line-height:var(--rule)}
.ings input{appearance:none; flex:none; width:18px; height:18px; margin-top:calc((var(--rule) - 18px) / 2 - var(--rule-lift)); border:2px solid #B9A9A5; border-radius:5px; background:#fff; display:grid; place-items:center}
.ings input:checked{background:#4B8A61; border-color:#4B8A61}
.ings input:checked::after{content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px)}
.ings input:checked + span{text-decoration:line-through; color:#9AA39F}
.amt{font-weight:700; font-variant-numeric:tabular-nums; margin-right:2px}
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.steps li{counter-increment:s; display:grid; grid-template-columns:34px 1fr; column-gap:10px; row-gap:0; padding:0; cursor:pointer}
.steps li::before{content:counter(s); font-family:var(--display); font-weight:800; font-size:16px; width:26px; height:26px; margin-top:calc((var(--rule) - 26px) / 2 - var(--rule-lift)); border-radius:50%; background:#F3DADD; color:#A8323F; display:grid; place-items:center}
.steps li.done::before{content:"✓"; background:#4B8A61; color:#fff}
.steps li.done p{text-decoration:line-through; color:#9AA39F}
.steps p{margin:0; font-size:17px; line-height:var(--rule)}
.tbtn{height:calc(var(--rule) - 4px); margin:calc(2px - var(--rule-lift)) 0 calc(2px + var(--rule-lift)); line-height:1; border:1.5px solid #E2D6BE; background:#fff; border-radius:999px; padding:0 10px 0 8px; font-size:13px; font-weight:700; color:var(--card-ink); display:flex; width:max-content; max-width:100%; gap:5px; align-items:center}
.tbtn:hover{border-color:#A8323F; color:#A8323F}
.card-foot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:16px 30px 20px; border-top:2px solid var(--paper-rule); background:#FBF6EC}
.card-foot .grp{display:flex; flex-wrap:wrap; gap:10px}
.btn{border:1.5px solid #E2D6BE; background:#fff; color:var(--card-ink); border-radius:999px; padding:8px 16px; font-weight:700; font-size:14px; display:inline-flex; gap:8px; align-items:center}
.btn:hover{border-color:#A8323F}
.btn.saved{background:#A8323F; color:#fff; border-color:#A8323F}
.btn[disabled]{opacity:.35; cursor:default}

/* ---------- timer + toast ---------- */
.timer{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:30; background:var(--ink); color:var(--ground); border-radius:999px; padding:8px 8px 8px 16px; display:flex; gap:12px; align-items:center; box-shadow:0 10px 24px -8px rgba(0,0,0,.5); max-width:calc(100% - 32px)}
.timer .t{font-family:var(--display); font-weight:700; font-size:20px; font-variant-numeric:tabular-nums}
.timer .l{font-size:13px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:26ch}
.timer button{border:none; background:rgba(255,255,255,.14); color:inherit; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:40; background:var(--paper); color:var(--card-ink); font-family:var(--hand); font-size:19px; padding:8px 20px; border-radius:6px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); border:2px solid var(--brass); max-width:calc(100% - 32px); text-align:center; animation:pop .3s}
#fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50}

@media (max-width:820px){
  header{grid-template-columns:1fr}
  .controls{align-items:flex-start} .note{text-align:left}
  .grid{grid-template-columns:repeat(4,1fr)}
  .cols{grid-template-columns:1fr}
  .cols section + section{border-left:none; border-top:1px dashed #E2CFCF}
}
@media (max-width:520px){
  .cabinet{padding:40px 12px 24px}
  .grid{grid-template-columns:repeat(3,1fr); gap:28px 10px}
  .cell{aspect-ratio:1/1}
  .card-top,.batch,.cols section,.card-foot{padding-inline:18px}
  .garland{margin-inline:4px}
  .tag{font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ---------- allergen note + footer ---------- */
.allergen-note{margin:-16px 0 0; font-size:13px; color:var(--ink-soft)}
.allergen-note a,.site-foot a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.site-foot{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--chip-line); padding-top:18px; margin-top:8px}
.site-foot a:hover,.allergen-note a:hover{color:var(--ink)}

/* ---------- terms + privacy pages ---------- */
.legal-wrap{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.legal-nav{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between; font-size:14px; font-weight:600}
.legal-nav a{color:var(--ink-soft)} .legal-nav a:hover{color:var(--ink)}
.legal-nav .legal-brand{font-family:var(--display); font-weight:800; font-size:26px; color:var(--ink); text-decoration:none}
.legal-brand span{color:var(--cab)}
:root[data-theme="dark"] .legal-brand span{color:var(--face-hi)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .legal-brand span{color:var(--face-hi)}}
.legal{background:var(--paper); color:var(--card-ink); border-radius:6px; padding:30px 34px 34px; box-shadow:0 20px 40px -24px rgba(0,0,0,.45); line-height:1.65}
.legal h1{font-family:var(--display); font-weight:800; font-size:clamp(32px,6vw,46px); line-height:1; margin:0}
.legal .updated{font-family:var(--hand); color:var(--card-soft); margin:6px 0 20px}
.legal h2{font-family:var(--display); font-weight:700; font-size:22px; margin:28px 0 6px}
.legal p,.legal li{max-width:66ch}
.legal ul{padding-left:1.2em} .legal li{margin:4px 0}
.legal a{color:#A8323F; text-underline-offset:2px}
.legal .see-also{margin-top:28px; padding-top:16px; border-top:1px dashed #E2CFCF}
.legal mark.todo{background:#FFE58A; color:#3a2806; padding:0 3px; border-radius:3px}
@media (max-width:520px){.legal{padding:22px 18px 26px}}