:root{
  --ground:#FAF9F4;
  --surface:#FFFFFF;
  --surface2:#F1EFE7;
  --ink:#1B1A15;
  --sub:#6B675A;
  --line:#E2DFD4;
  --stamp:#C22F1B;
  --stamp-soft:#F9E9E5;
  --money:#1E6B47;
  --money-soft:#E3EFE7;
  --shadow:0 1px 2px rgba(24,22,14,.05), 0 8px 24px rgba(24,22,14,.06);
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#161511; --surface:#1E1D18; --surface2:#26241E;
    --ink:#EDEBE3; --sub:#A39F90; --line:#35332B;
    --stamp:#E0563F; --stamp-soft:#3A241F; --money:#5CAF85; --money-soft:#22352B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --ground:#161511; --surface:#1E1D18; --surface2:#26241E;
  --ink:#EDEBE3; --sub:#A39F90; --line:#35332B;
  --stamp:#E0563F; --stamp-soft:#3A241F; --money:#5CAF85; --money-soft:#22352B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}
:root[data-theme="light"]{
  --ground:#FAF9F4; --surface:#FFFFFF; --surface2:#F1EFE7;
  --ink:#1B1A15; --sub:#6B675A; --line:#E2DFD4;
  --stamp:#C22F1B; --stamp-soft:#F9E9E5; --money:#1E6B47; --money-soft:#E3EFE7;
  --shadow:0 1px 2px rgba(24,22,14,.05), 0 8px 24px rgba(24,22,14,.06);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6;
}
a{color:inherit}
button{font:inherit; cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--stamp); outline-offset:2px; border-radius:4px}

/* demo banner */
.demo-banner{
  background:var(--ink); color:var(--ground); text-align:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  padding:.45rem 1rem;
}
.demo-banner b{color:#F1DE72}

header.mast{
  position:sticky; top:0; z-index:20;
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:.75rem clamp(1rem,4vw,2rem);
}
.logo{font-weight:800; letter-spacing:-.02em; font-size:1.05rem; display:flex; align-items:center; gap:.55rem; text-decoration:none}
.logo .mark{
  width:27px; height:27px; border-radius:7px; background:var(--stamp); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.9rem; font-weight:700; transform:rotate(-4deg);
}
nav.main{display:flex; gap:.25rem; flex-wrap:wrap; margin-left:auto}
nav.main a{
  text-decoration:none; font-size:.86rem; font-weight:600; color:var(--sub);
  padding:.35rem .75rem; border-radius:999px;
}
nav.main a:hover{background:var(--surface2); color:var(--ink)}
nav.main a[aria-current="page"]{background:var(--stamp-soft); color:var(--stamp)}

.wrap{max-width:960px; margin:0 auto; padding:2.4rem clamp(1rem,4vw,2rem) 4rem}
.narrow{max-width:680px}

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stamp); margin:0 0 .55rem;
}
h1{font-size:clamp(1.9rem,4.6vw,2.8rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 .8rem; text-wrap:balance}
h2{font-size:1.4rem; letter-spacing:-.01em; margin:2.2rem 0 .6rem}
h3{font-size:1.05rem; margin:1.4rem 0 .3rem}
p{margin:.6rem 0; max-width:66ch}
.sub{color:var(--sub)}
.small{font-size:.85rem}
.mono{font-family:var(--mono)}
.money-num{font-variant-numeric:tabular-nums}

.stamp{
  display:inline-block; transform:rotate(-3deg);
  border:2.5px solid var(--stamp); color:var(--stamp); border-radius:4px;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; font-size:.72rem; padding:.22rem .6rem;
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  background:var(--stamp); color:#fff; font-weight:700; font-size:.92rem;
  border:none; border-radius:10px; padding:.68rem 1.2rem;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface2); filter:none}
.btnrow{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.3rem 0}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:1.5rem;
}
.grid{display:grid; gap:1.2rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g2{grid-template-columns:1fr 1fr}
@media (max-width:760px){.g2{grid-template-columns:1fr}}

.doty{display:flex; align-items:baseline; gap:.55rem}
.doty .dots{flex:1; border-bottom:2px dotted var(--line); transform:translateY(-4px); min-width:1.5rem}
.doty .price{font-family:var(--mono); font-size:.85rem; white-space:nowrap; font-variant-numeric:tabular-nums}

.rank{
  display:inline-flex; width:30px; height:30px; border-radius:8px; flex:none;
  background:var(--ink); color:var(--ground); align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:1rem;
}

blockquote{
  margin:1.2rem 0; padding:1rem 1.25rem; background:var(--surface2); border-radius:12px;
  border-left:4px solid var(--stamp); max-width:60ch;
}
blockquote p{margin:.3rem 0}
blockquote footer{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--sub); margin-top:.6rem}

.split{margin:1rem 0; max-width:32rem}
.split .bar{display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--surface2)}
.split .bar .a{flex:8; background:var(--money)}
.split .bar .b{flex:2; background:var(--sub)}
.split .legend{display:flex; justify-content:space-between; font-size:.8rem; color:var(--sub); margin-top:.4rem}
.split .legend b{color:var(--ink)}

table{border-collapse:collapse; width:100%; margin:1rem 0; font-variant-numeric:tabular-nums}
th,td{padding:.55rem .4rem; border-bottom:1px solid var(--line); text-align:left; font-size:.9rem}
th{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--sub); font-weight:600}
td.num,th.num{text-align:right}
tr:last-child td{border-bottom:none; font-weight:700}
.tblwrap{overflow-x:auto}

/* interview Q&A */
.qa{margin:1.6rem 0}
.qa .q{font-family:var(--mono); font-size:.85rem; font-weight:600; color:var(--stamp); margin:1.4rem 0 .3rem}
.qa .a{margin:.2rem 0; max-width:64ch}

/* recipes */
.recipe{border-top:2px dotted var(--line); padding-top:1.8rem; margin-top:2.2rem}
.recipe-meta{display:flex; gap:1.4rem; flex-wrap:wrap; font-family:var(--mono); font-size:.75rem; color:var(--sub); margin:.6rem 0 1rem}
.recipe ol,.recipe ul{max-width:62ch; padding-left:1.3rem}
.recipe li{margin:.5rem 0}
.chefnote{
  background:var(--stamp-soft); border-radius:10px; padding:.7rem 1rem; margin:.8rem 0;
  font-size:.92rem; max-width:60ch;
}
.chefnote::before{content:"Marisol: "; font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--stamp); text-transform:uppercase; letter-spacing:.1em}
.testlog{
  background:var(--money-soft); border-radius:10px; padding:.7rem 1rem; margin:.8rem 0;
  font-size:.88rem; max-width:60ch;
}
.testlog::before{content:"Test kitchen: "; font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--money); text-transform:uppercase; letter-spacing:.1em}

.checklist{list-style:none; padding:0; margin:.8rem 0; max-width:62ch}
.checklist li{padding:.32rem 0 .32rem 1.7rem; position:relative}
.checklist li::before{content:"✓"; position:absolute; left:.2rem; color:var(--money); font-weight:800}

.pill{
  display:inline-block; font-family:var(--mono); font-size:.7rem; font-weight:600;
  border-radius:999px; padding:.16rem .6rem; background:var(--surface2); color:var(--sub);
}
.pill.red{background:var(--stamp-soft); color:var(--stamp)}
.pill.green{background:var(--money-soft); color:var(--money)}

input[type=email]{
  font:inherit; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink); padding:.62rem .9rem; width:min(19rem,100%);
}

footer.site{
  border-top:1px solid var(--line); margin-top:2rem;
  padding:1.6rem clamp(1rem,4vw,2rem) 2.4rem; text-align:center;
  font-family:var(--mono); font-size:.72rem; color:var(--sub);
}
footer.site a{color:var(--sub)}