:root{--kraft:#d9b98b;--kraft-d:#b8915c;--paper:#f6eedd;--card:#fffaf0;--ink:#2e241b;--soft:#6b5a48;--red:#c2442d;--mustard:#e0a730;--sage:#6c8a5b;--line:#e2d3b6;--r:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:400 16px/1.6 "DM Sans",system-ui,sans-serif;
background-image:radial-gradient(rgba(110,80,40,.07) 1px,transparent 1.2px);background-size:5px 5px}
a{color:var(--red)}img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:9}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;line-height:1.1;margin:0 0 .4em}
h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600}
.eyebrow{display:inline-block;font:600 .72rem/1 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.lead{color:var(--soft);max-width:640px}
/* nav */
nav{position:sticky;top:0;z-index:5;background:rgba(246,238,221,.92);backdrop-filter:blur(6px);border-bottom:1px dashed var(--kraft-d)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.logo{display:flex;align-items:center;gap:10px;font:700 1.15rem "Fraunces",serif;color:var(--ink);text-decoration:none}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:.92rem}
nav ul a{color:var(--ink);text-decoration:none}nav ul a:hover{color:var(--red)}
@media(max-width:820px){nav ul{display:none}}
/* hero */
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(3rem,8vw,5.6rem);font-weight:800;letter-spacing:-.02em}
.hero h1 span{color:var(--red);font-style:italic;font-weight:600}
.tagline{font-size:1.25rem;color:var(--soft);margin:0 0 26px;max-width:520px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid var(--ink);color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}.btn:hover{transform:translateY(-1px)}
.stamp{display:inline-flex;gap:8px;align-items:center;margin-top:22px;font-size:.8rem;color:var(--soft)}
.stamp b{border:1.5px solid var(--sage);color:var(--sage);border-radius:4px;padding:2px 7px;letter-spacing:.12em;font-size:.7rem;transform:rotate(-3deg)}
@media(max-width:820px){.hero{padding:40px 0 48px}.hero .wrap{grid-template-columns:1fr}.hero-art{max-width:360px;margin:0 auto}}
/* sections */
section{padding:72px 0}
.alt{background:linear-gradient(180deg,rgba(217,185,139,.28),rgba(217,185,139,.12));border-top:1px dashed var(--kraft-d);border-bottom:1px dashed var(--kraft-d)}
.head{margin-bottom:34px}
.grid{display:grid;gap:22px}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* video */
.feature-video{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;margin-bottom:26px}
@media(max-width:820px){.feature-video{grid-template-columns:1fr}}
.vslot{aspect-ratio:16/9;border-radius:var(--r);border:2px dashed var(--kraft-d);background:repeating-linear-gradient(45deg,#efe2c8 0 12px,#f4ead6 12px 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--soft);text-align:center;padding:16px}
.vslot.tall{aspect-ratio:9/16}
.play{width:62px;height:62px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:0 10px 22px -18px rgba(60,40,15,.5)}
.vcard .vslot{aspect-ratio:9/12}
.vcard p{margin:10px 2px 2px;font-size:.88rem;color:var(--soft)}
.pill{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);border-radius:999px;padding:3px 9px}
.note{font-size:.85rem;color:var(--soft);background:var(--card);border-left:4px solid var(--mustard);padding:12px 16px;border-radius:6px}
/* recipe card */
.rc{display:grid;grid-template-columns:1.3fr .9fr;background:var(--card);border-radius:var(--r);box-shadow:0 18px 36px -24px rgba(60,40,15,.55);overflow:hidden;border:1px solid var(--line)}
@media(max-width:820px){.rc{grid-template-columns:1fr}}
.rc-main{padding:30px}
.rc-main h3{font-size:1.7rem}
.tmpl{display:inline-block;background:var(--mustard);color:var(--ink);font:700 .68rem "DM Sans";letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:12px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.meta span{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--soft)}
.rc h4{font:700 .75rem "DM Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:18px 0 8px}
.rc ul{margin:0;padding-left:18px}.rc li{margin:3px 0}
.tomake{background:#f3e8d3;border-radius:8px;padding:14px 16px;font-weight:500}
.rc-side{background:var(--kraft);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 2px,transparent 2px 6px);padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
/* label */
.label{background:#fffdf6;width:100%;max-width:300px;border-radius:50%;aspect-ratio:1;border:3px double var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
.label .brand{font:600 .62rem "DM Sans";letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.label .nm{font:700 1.25rem/1.1 "Fraunces",serif;margin:8px 0}
.label .ln{width:60%;border-top:1px dashed var(--soft);margin:6px 0}
.label small{font-size:.72rem;color:var(--soft);line-height:1.45}
.tag{background:#fffdf6;border:2px solid var(--ink);border-radius:6px 6px 6px 6px;padding:22px 18px 18px;position:relative;text-align:center;clip-path:polygon(14% 0,86% 0,100% 12%,100% 100%,0 100%,0 12%)}
.tag:before{content:"";position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.tag h4{margin-top:14px}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 10px 22px -18px rgba(60,40,15,.5)}
.card svg{width:44px;height:44px;margin-bottom:8px}
.card h3{font-size:1.25rem}.card p{color:var(--soft);font-size:.94rem;margin:0 0 12px}
.soon{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
/* labels section */
.labels-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;align-items:center;justify-items:center}
/* about + signup */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.signup{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:32px}
.signup h2{color:var(--paper)}.signup p{color:#d8c8ae}
form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
input[type=email]{flex:1 1 220px;padding:13px 16px;border-radius:999px;border:0;font:inherit;background:#f6eedd}
input:disabled,button:disabled{opacity:.7;cursor:not-allowed}
.signup button{padding:13px 20px;border-radius:999px;border:0;background:var(--mustard);font:600 1rem "DM Sans";color:var(--ink)}
/* how */
pre{background:#231b14;color:#f3e8d3;padding:18px;border-radius:8px;overflow-x:auto;font:13px/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
footer{padding:40px 0 56px;text-align:center;color:var(--soft);font-size:.88rem}
/* print: only labels */
@media print{body{background:#fff}body *{visibility:hidden}.printable,.printable *{visibility:visible}.printable{position:absolute;inset:0;padding:20px}.noprint{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}