:root{
  --paper:#f6efe2;--paper2:#ece2cf;--ink:#1d1a16;--ink2:#4a4237;--tomato:#c2381d;--tomato-d:#8f2512;
  --basil:#2f6b3a;--mustard:#d9a21b;--plum:#4b2a4f;--line:#cdbfa6;--card:#fffaf0;--focus:#1a4fd6;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);
  background-image:radial-gradient(circle at 1px 1px,rgba(29,26,22,.07) 1px,transparent 0);background-size:22px 22px}
a{color:var(--tomato-d);text-underline-offset:3px}
a:hover{color:var(--tomato)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--serif);line-height:1.08;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,8vw,5.6rem);font-weight:700}
h1 em{font-style:italic;color:var(--tomato)}
h2{font-size:clamp(1.8rem,4.5vw,3.1rem)}
h3{font-size:1.3rem}
.kicker{font:600 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tomato-d)}
.lede{font-size:1.18rem;max-width:62ch;color:var(--ink2)}
.muted{color:var(--ink2)}
small,.small{font-size:.86rem}

/* top bar */
.bar{position:sticky;top:0;z-index:40;background:rgba(246,239,226,.94);border-bottom:2px solid var(--ink);backdrop-filter:saturate(1.2)}
.bar .wrap{display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap}
.brand{font:700 1rem var(--serif);color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:center}
.brand b{background:var(--tomato);color:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font:700 .8rem var(--mono)}
.bar .tools{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.chip{font:600 .78rem var(--mono);border:1.5px solid var(--ink);background:var(--card);color:var(--ink);padding:6px 10px;border-radius:999px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
.chip:hover{transform:translateY(-2px);background:var(--mustard)}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}

/* hero */
.hero{padding:48px 0 28px;border-bottom:2px solid var(--ink)}
.hero-grid{display:grid;gap:28px}
.answer{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:18px 20px;box-shadow:6px 6px 0 var(--ink)}
.answer h2{font-size:1.4rem}
.answer ol{margin:.4em 0 0;padding-left:1.2em}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 .95rem var(--sans);padding:12px 18px;border-radius:10px;border:2px solid var(--ink);background:var(--tomato);color:#fff;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);color:#fff}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--card);color:var(--ink)}
.btn.alt:hover{color:var(--ink)}
.btn.sm{padding:8px 12px;font-size:.85rem;box-shadow:3px 3px 0 var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* doors */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:28px 0}
.door{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:12px 12px 4px 4px;padding:14px;position:relative;transition:transform .2s,background .2s}
.door:hover{transform:translateY(-4px) rotate(-.6deg);background:#fff;color:var(--ink)}
.door .n{font:700 .72rem var(--mono);color:var(--tomato-d)}
.door strong{display:block;font:700 1.15rem var(--serif)}
.door span{font-size:.85rem;color:var(--ink2)}

section.block{padding:56px 0;border-bottom:2px dashed var(--line)}

/* kitchen */
.kitchen{display:grid;gap:22px}
.fields fieldset{border:2px solid var(--ink);border-radius:12px;background:var(--card);padding:14px;margin:0 0 14px}
.fields legend{font:700 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:0 6px;background:var(--paper);border:2px solid var(--ink);border-radius:6px}
label{display:block;font-weight:700;margin:4px 0}
label .hint{display:block;font-weight:400;font-size:.84rem;color:var(--ink2)}
textarea,input[type=text],select{width:100%;font:15px/1.5 var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--ink2);border-radius:8px;padding:10px}
textarea{min-height:84px;resize:vertical}
textarea:focus,input:focus,select:focus{border-color:var(--focus)}
.card-panel{background:var(--ink);color:var(--paper);border-radius:14px;padding:18px;position:relative}
.card-panel h3{color:var(--paper)}
.card-panel a{color:#ffd28a}
.score{display:flex;align-items:baseline;gap:10px;font-family:var(--serif)}
.score b{font-size:3.4rem;line-height:1;color:var(--mustard)}
.stations{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.st{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:8px;border-radius:8px;background:rgba(255,255,255,.06);transition:background .3s}
.st .stamp{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 .9rem var(--mono);border:2px solid currentColor;transform:rotate(-8deg)}
.st[data-s=pass] .stamp{color:#8fe39d}
.st[data-s=warn] .stamp{color:#ffd166}
.st[data-s=fail] .stamp{color:#ff8a73}
.st[data-s=na] .stamp{color:#aaa}
.st.flash{animation:flash .6s}
@keyframes flash{0%{background:rgba(255,209,102,.4)}100%{background:rgba(255,255,255,.06)}}
.st strong{display:block;font-size:.95rem}
.st span{font-size:.85rem;color:#e8dcc6}
.contam{margin-top:16px;border-top:1px dashed #6b5f50;padding-top:12px}
.contam .chip{background:transparent;color:var(--paper);border-color:var(--paper)}
.contam .chip:hover{background:var(--tomato);color:#fff}
pre.preview{white-space:pre-wrap;word-break:break-word;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:14px;font:13.5px/1.55 var(--mono);max-height:420px;overflow:auto}
.live{min-height:1.4em;font:600 .85rem var(--mono);color:var(--basil)}

/* pantry */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 18px}
.grid{display:grid;gap:14px}
.recipe{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:0;overflow:hidden}
.recipe summary{cursor:pointer;padding:14px 16px;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:start}
.recipe summary::-webkit-details-marker{display:none}
.recipe summary:hover{background:#fff}
.recipe .tag{font:700 .7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--plum)}
.recipe .fm{font:700 .7rem var(--mono);background:var(--mustard);padding:2px 6px;border-radius:4px;white-space:nowrap}
.recipe .body{padding:0 16px 16px}
.before{background:#f3d9d0;border-left:5px solid var(--tomato);padding:8px 12px;border-radius:4px;font-family:var(--mono);font-size:.9rem}
.after dt{font:700 .75rem var(--mono);text-transform:uppercase;color:var(--basil);margin-top:8px}
.after dd{margin:0 0 0 0}
.lesson{font-style:italic;font-family:var(--serif);font-size:1.05rem;border-top:1px dashed var(--line);margin-top:10px;padding-top:8px}

/* failure modes */
.spoil{display:grid;gap:14px}
.spoil article{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:16px;position:relative}
.spoil article::before{content:attr(data-n);position:absolute;top:-14px;right:12px;background:var(--tomato);color:#fff;font:700 .8rem var(--mono);padding:4px 8px;border-radius:6px;border:2px solid var(--ink)}
.spoil h3{margin-top:4px}
table{border-collapse:collapse;width:100%;background:var(--card);font-size:.92rem}
th,td{border:1.5px solid var(--ink);padding:8px;text-align:left;vertical-align:top}
th{background:var(--paper2);font-family:var(--mono);font-size:.78rem;text-transform:uppercase}
.tablewrap{overflow-x:auto}

/* checklist */
.checks{display:grid;gap:14px}
.checks fieldset{border:2px solid var(--ink);border-radius:12px;background:var(--card);padding:14px}
.checks label{font-weight:400;display:flex;gap:10px;align-items:flex-start;padding:4px 0;cursor:pointer}
.checks input{width:20px;height:20px;margin-top:3px;accent-color:var(--tomato);flex:none}

/* worlds + sources */
.worlds{display:grid;gap:12px}
.world{display:block;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);transition:transform .2s}
.world:hover{transform:translateY(-3px);color:var(--ink);background:#fff}
.world b{font-family:var(--serif);font-size:1.15rem}
.world i{display:block;font-style:normal;font:600 .72rem var(--mono);color:var(--basil);margin-top:6px}
.srcs{padding-left:1.2em}
.srcs li{margin-bottom:12px}
.label{font:700 .7rem var(--mono);padding:2px 6px;border-radius:4px;border:1px solid var(--ink);margin-right:4px}
.l-fact{background:#d6ecd9}.l-interp{background:#fde7b0}.l-sim{background:#e3d6ec}.l-open{background:#f3d9d0}

footer{padding:40px 0 60px;background:var(--ink);color:var(--paper)}
footer a{color:#ffd28a}
footer .row{gap:18px}

/* intro */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:opacity .4s}
.intro.done{opacity:0;pointer-events:none}
.intro .plate{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:560px;padding:16px}
.intro .ing{font:700 .85rem var(--mono);border:2px solid var(--paper);border-radius:999px;padding:8px 12px;opacity:0;transform:translateY(20px);animation:pop .35s forwards}
.intro p{text-align:center;font-family:var(--serif);font-size:1.5rem;margin:16px 0}
@keyframes pop{to{opacity:1;transform:none}}
.no-js .intro{display:none}

/* focus mode / reduced motion */
body.focus .doors,body.focus .worlds-sec,body.focus .hero .lede ~ .row .chip{display:none}
body.focus{background-image:none}
body.reduce *, body.reduce *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.steam{display:none}
@media (min-width:768px){
  body{font-size:18px}
  .doors{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .spoil{grid-template-columns:repeat(2,1fr)}
  .worlds{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .hero-grid{grid-template-columns:1.25fr .9fr;align-items:end}
  .doors{grid-template-columns:repeat(6,1fr)}
  .kitchen{grid-template-columns:1.1fr .9fr;align-items:start}
  .kitchen .side{position:sticky;top:76px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .worlds{grid-template-columns:repeat(3,1fr)}
  .steam{display:block}
}
@media print{.bar,.intro,.contam,footer{display:none}body{background:#fff}}