/* Cooking Steps website - shared design system.
   Light-first cream paper; [data-theme="dark"] flips to espresso night.
   Fonts are self-hosted (no Google Fonts request, no third-party calls). */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-400.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/fraunces-700.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/fraunces-400-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600;font-display:swap;src:url("/assets/fonts/fraunces-600-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/inter-700.woff2") format("woff2")}

:root{
  --paper:#FCFAF4;
  --paper-2:#F7F1E3;
  --card:#F4ECD8;
  --card-2:#EBE0C4;
  --ink:#16110B;
  --ink-2:rgba(22,17,11,.74);
  --ink-3:rgba(22,17,11,.52);
  --hairline:rgba(22,17,11,.14);
  --brass:#A9853F;
  --brass-2:#C7A15A;
  --brass-ink:#7d6127;
  --brass-soft:rgba(169,133,63,.13);
  --good:#3f7d4e;
  --tsp:#1c6675;
  --tsp-bg:rgba(28,102,117,.12);
  --shadow:rgba(88,66,26,.2);
  --bezel:#16110B;
  --screen:#FCFAF4;
  --maxw:1120px;
  --r:18px;
}
[data-theme="dark"]{
  --paper:#0f0b06;
  --paper-2:#150f08;
  --card:#1d150c;
  --card-2:#271d10;
  --ink:#F4ECD8;
  --ink-2:rgba(244,236,216,.76);
  --ink-3:rgba(244,236,216,.55);
  --hairline:rgba(244,236,216,.14);
  --brass:#C7A15A;
  --brass-2:#D9B76E;
  --brass-ink:#D9B76E;
  --brass-soft:rgba(199,161,90,.14);
  --good:#7dc98f;
  --tsp:#8fd3de;
  --tsp-bg:rgba(143,211,222,.12);
  --shadow:rgba(0,0,0,.55);
  --bezel:#000;
  --screen:#0f0b06;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .35s,color .35s;
}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}
a{color:var(--brass-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass-2);color:#16110B}

/* faint paper grain over everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header.site,footer.site{position:relative;z-index:1}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex;align-items:center;gap:14px;height:66px}
.nav .mark{width:40px;height:40px;flex:none}
.nav .name{font-family:"Fraunces",serif;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.nav .name:hover{text-decoration:none}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:22px}
/* :not(.btn) — this rule outranks .btn on specificity, and without the guard the
   header's "Open the app" pill rendered muted dark text while the identical hero
   button rendered white. Same button, two colors. */
.nav .links a:not(.btn){color:var(--ink-2);font-weight:500;font-size:15px}
.nav .links a:not(.btn):hover{color:var(--ink);text-decoration:none}
.nav .links a.on{color:var(--brass-ink);font-weight:600}
/* nav: “I can’t cook” / Install / Open the app stay visible; everything else
   lives in a dropdown panel behind the burger, at every width */
.navset{display:none}
.nav .navtop{white-space:nowrap}
.nav-burger{display:grid;width:38px;height:38px;border-radius:10px;place-items:center;color:var(--ink-2)}
.nav-burger:hover{background:var(--card);color:var(--ink)}
.nav-burger svg{width:22px;height:22px}
header.site.menu-open .navset{
  display:flex;flex-direction:column;gap:2px;
  position:absolute;top:70px;right:24px;min-width:240px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:16px;
  box-shadow:0 20px 46px var(--shadow);padding:10px;z-index:60;
}
header.site.menu-open .navset a{display:block;padding:13px 14px;font-size:16.5px;border-radius:11px}
header.site.menu-open .navset a:hover{background:var(--card);text-decoration:none}
header.site.menu-open .navset .theme-btn{
  width:100%;height:auto;display:flex;align-items:center;gap:12px;
  padding:13px 14px;justify-content:flex-start;
  border-top:1px solid var(--hairline);border-radius:0 0 11px 11px;margin-top:4px;padding-top:15px;
}
header.site.menu-open .navset .theme-btn:hover{background:var(--card)}
header.site.menu-open .navset .tb-label{display:block;font-size:16.5px;color:var(--ink-2);font-weight:500}
/* “I can’t cook” + Install ride inside the burger panel on phones only */
@media (min-width:761px){
  header.site.menu-open .navset .m-only{display:none}
}
@media (max-width:760px){
  .nav-burger{width:34px;height:34px}
  .nav{gap:8px}
  .nav .links{gap:10px}
  .nav .name{font-size:16px}
  .nav .navtop{display:none}
  .nav .btn{padding:9px 12px;font-size:13.5px}
  header.site.menu-open .navset{left:14px;right:14px}
}
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--brass);color:#FCFAF4;border-radius:999px;
  padding:10px 20px;font-weight:600;font-size:15px;line-height:1;
  box-shadow:0 2px 10px var(--shadow);transition:transform .15s,box-shadow .15s,background .2s;
}
.btn:hover{background:var(--brass-2);color:#16110B;text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 18px var(--shadow)}
.btn.big{padding:15px 28px;font-size:17px}
.btn.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--hairline)}
.btn.ghost:hover{background:var(--card);color:var(--ink);transform:translateY(-1px)}
.theme-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
.tb-label{display:none}
.theme-btn:hover{background:var(--card);color:var(--ink)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:72px 0 40px}
.hero::after{
  content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;pointer-events:none;
  background:radial-gradient(55% 60% at 70% 30%,var(--brass-soft),transparent 70%);
}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:1}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.22em;
  color:var(--brass-ink);text-transform:uppercase;margin-bottom:18px;
}
.hero h1{font-size:clamp(40px,5.4vw,64px);font-weight:700;margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--brass-ink)}
.hero .sub{font-size:19px;color:var(--ink-2);max-width:34em;margin-bottom:30px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.hero .fine{font-size:14px;color:var(--ink-3)}
.hero .fine b{color:var(--ink-2);font-weight:600}

/* phone mockup */
.stagearea{position:relative;display:grid;place-items:center;padding:10px 0}
.phone{
  position:relative;width:300px;background:var(--bezel);border-radius:48px;padding:12px;
  box-shadow:0 30px 70px var(--shadow),0 4px 16px var(--shadow);
  transform:rotate(-3.5deg);
}
.phone .screen{
  background:var(--screen);border-radius:37px;overflow:hidden;
  padding:20px 18px 16px;min-height:560px;display:flex;flex-direction:column;
}
.ph-title{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ph-title .em{font-size:20px}
.ph-title b{font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.ph-segs{display:flex;gap:5px;margin-bottom:22px}
.ph-segs i{height:4px;flex:1;border-radius:4px;background:var(--card-2)}
.ph-segs i.on{background:var(--brass)}
.ph-eyebrow{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--brass-ink);margin-bottom:8px}
.ph-head{font-family:"Fraunces",serif;font-size:27px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.ph-acts{list-style:none;display:grid;gap:9px;margin-bottom:18px}
.ph-acts li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ph-acts .n{
  flex:none;width:19px;height:19px;border-radius:50%;background:var(--card-2);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--ink);margin-top:1px;
}
.ph-items{list-style:none;display:grid;gap:7px;margin-bottom:20px}
.ph-items li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.ph-items .u{
  flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:2.5px 6px;
}
.u-tbsp{background:var(--brass-soft);color:var(--brass-ink)}
.u-tsp{background:var(--tsp-bg);color:var(--tsp)}
.ph-timer{
  margin:auto auto 18px;display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--brass);border-radius:999px;padding:10px 22px;
  font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;color:var(--brass-ink);
}
.ph-timer svg{width:17px;height:17px;stroke:var(--brass-ink)}
.ph-foot{display:flex;align-items:center;justify-content:space-between;color:var(--ink-3);font-size:12.5px}
.ph-foot .arr{width:34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:16px;color:var(--ink-2);cursor:pointer;transition:background .15s,transform .1s}
.ph-foot .arr:hover{background:var(--card-2)}
.ph-foot .arr:active{transform:scale(.92)}
.ph-foot .arr[disabled]{opacity:.35;cursor:default}
.ph-timer[hidden]{display:none}
.ph-timer{cursor:pointer;transition:background .2s,color .2s,transform .1s}
.ph-timer:hover{background:var(--brass-soft)}
.ph-timer:active{transform:scale(.97)}
.ph-timer svg{fill:none}
.ph-timer.run{animation:tpulse 1s ease-in-out infinite}
.ph-timer.done{background:var(--brass);border-color:var(--brass);color:#FCFAF4;animation:ding .5s ease}
.ph-timer.done svg{stroke:#FCFAF4}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 0 var(--brass-soft)}50%{box-shadow:0 0 0 8px var(--brass-soft)}}
@keyframes ding{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
.tryme{text-align:center;font-size:14px;color:var(--ink-3);margin-top:26px;font-style:italic;font-family:"Fraunces",serif}
.ph-segs i{cursor:pointer}

/* floating garnish */
.steam{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:74px;opacity:.85;pointer-events:none}
.steam path{stroke:var(--brass-2);stroke-width:7;fill:none;stroke-linecap:round;animation:drift 5.5s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.2s}
.steam path:nth-child(3){animation-delay:2.4s}
@keyframes drift{
  0%,100%{transform:translateY(0);opacity:.35}
  50%{transform:translateY(-7px);opacity:.9}
}
@media (prefers-reduced-motion:reduce){.steam path{animation:none}}
.fan{position:absolute;bottom:-34px;left:-86px;width:150px;transform:rotate(-9deg);pointer-events:none;filter:drop-shadow(0 10px 22px var(--shadow))}
.spark{position:absolute;color:var(--brass-2);pointer-events:none}
.spark svg{width:100%;height:100%}
.sp1{top:8%;right:-34px;width:26px;opacity:.9}
.sp2{bottom:16%;right:-52px;width:18px;opacity:.65}
.sp3{top:24%;left:-46px;width:16px;opacity:.7}
.spark{animation:twinkle 3.2s ease-in-out infinite}
.sp2{animation-delay:1.1s}
.sp3{animation-delay:2.2s}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.72) rotate(-8deg)}50%{opacity:1;transform:scale(1.12) rotate(8deg)}}
.fan{animation:fansway 7s ease-in-out infinite}
@keyframes fansway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-5deg) translateY(-5px)}}
/* logo-mark steam (header + footer + fan art, every page) */
.msteam{transform-box:fill-box;transform-origin:center bottom;animation:msteam 3.6s ease-in-out infinite}
.msteam.m2{animation-delay:1.2s}
.msteam.m3{animation-delay:2.4s}
@keyframes msteam{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-13px)}}

/* ---------- starter shelf marquee ---------- */
.shelf{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:var(--paper-2);overflow:hidden;padding:16px 0}
.shelf .lane{display:flex;gap:14px;width:max-content;animation:lane 36s linear infinite}
.shelf:hover .lane{animation-play-state:paused}
@keyframes lane{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.shelf .lane{animation:none}}
.shelf .chip{
  display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hairline);
  border-radius:999px;padding:9px 18px 9px 12px;font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
}
.shelf .chip .em{font-size:19px}
/* a chip icon can be a small colour SVG instead of an emoji (chicken wings) */
.shelf .chip .em svg{width:22px;height:22px;display:block}

/* ---------- sections ---------- */
section.band{padding:88px 0}
.kicker{text-align:center;max-width:640px;margin:0 auto 54px}
.kicker h2{font-size:clamp(30px,3.6vw,42px);font-weight:700;margin:10px 0 14px}
.kicker p{color:var(--ink-2);font-size:17.5px}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:28px 26px;transition:transform .2s,box-shadow .2s;
}
.feat:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow)}
.feat .ic{
  width:52px;height:52px;border-radius:14px;background:var(--brass-soft);
  display:grid;place-items:center;margin-bottom:18px;color:var(--brass-ink);
}
.feat .ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat .ic{transition:transform .25s}
.feat:hover .ic{transform:rotate(-7deg) scale(1.1)}
.feat .ic svg{animation:icbob 4.6s ease-in-out infinite}
.feats .feat:nth-child(2n) .ic svg{animation-delay:1.4s}
.feats .feat:nth-child(3n) .ic svg{animation-delay:2.6s}
@keyframes icbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.feat h3{font-size:20px;margin-bottom:8px}
.feat p{font-size:15px;color:var(--ink-2)}

/* how it works */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:how}
.step{
  position:relative;background:var(--paper-2);border:1px dashed var(--brass-2);
  border-radius:var(--r);padding:30px 26px 26px;counter-increment:how;
}
.step::before{
  content:counter(how);position:absolute;top:-17px;left:24px;width:34px;height:34px;border-radius:50%;
  background:var(--brass);color:#FCFAF4;font-weight:700;font-size:15px;display:grid;place-items:center;
  font-family:"Fraunces",serif;box-shadow:0 3px 10px var(--shadow);
}
.step h3{font-size:20px;margin:6px 0 8px}
.step p{font-size:15px;color:var(--ink-2)}
.step .art{height:64px;margin-bottom:6px;color:var(--brass-ink)}
.step .art svg{height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* step arts: lines write themselves, cards fan, pot simmers */
.art-paste svg{animation:icbob 5.2s ease-in-out infinite}
.wline{stroke-dasharray:17;animation:wwrite 4.4s ease-in-out infinite}
.wline.w2{animation-delay:.55s}
.wline.w3{animation-delay:1.1s}
@keyframes wwrite{
  0%{stroke-dashoffset:17;opacity:0}
  8%{opacity:1}
  40%{stroke-dashoffset:0;opacity:1}
  78%{stroke-dashoffset:0;opacity:1}
  90%,100%{stroke-dashoffset:0;opacity:0}
}
/* "Steps appear": three steps arriving one after another. Was two fanned
   card shapes, which contradicted the heading once the wording moved to steps. */
.stepA,.stepB,.stepC{transform-box:fill-box;transform-origin:left center}
.stepA{animation:stepin 4.2s ease-in-out infinite}
.stepB{animation:stepin 4.2s ease-in-out .35s infinite}
.stepC{animation:stepin 4.2s ease-in-out .7s infinite}
@keyframes stepin{
  0%,55%,100%{opacity:1;transform:translateX(0)}
  20%{opacity:.35;transform:translateX(-3px)}
}

/* community band */
.community{background:var(--card);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.community .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.community h2{font-size:clamp(28px,3.2vw,38px);margin:10px 0 14px}
.community p{color:var(--ink-2);font-size:16.5px;margin-bottom:14px}
.minifeed{display:grid;gap:12px}
.pubcard{
  display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--hairline);
  border-radius:14px;padding:14px 16px;box-shadow:0 4px 14px var(--shadow);
}
.pubcard .em{font-size:26px;width:48px;height:48px;flex:none;display:grid;place-items:center;background:var(--card-2);border-radius:12px}
.pubcard img.ph{width:48px;height:48px;flex:none;border-radius:12px;object-fit:cover;box-shadow:0 2px 8px var(--shadow)}
.pubcard b{display:block;font-size:15px}
.pubcard span{font-size:13px;color:var(--ink-3)}
.pubcard .save{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brass-ink);background:var(--brass-soft);border-radius:999px;padding:6px 12px;white-space:nowrap}
.pubcard{animation:floaty 6s ease-in-out infinite}
.pubcard:nth-child(2){animation-delay:1.6s}
.pubcard:nth-child(3){animation-delay:3.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* install */
.install .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
.oscard{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:28px}
.oscard h3{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:14px}
.oscard h3 svg{width:22px;height:22px;stroke:var(--brass-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oscard ol{margin:0 0 0 20px;color:var(--ink-2);font-size:15px;display:grid;gap:8px}
.oscard ol b{color:var(--ink)}
.install .note{max-width:820px;margin:22px auto 0;text-align:center;font-size:14.5px;color:var(--ink-3)}

/* blog cards (teaser + index) */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.postcard{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r);padding:24px;color:inherit;transition:transform .2s,box-shadow .2s;
}
.postcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow);text-decoration:none}
.postcard .em{
  width:56px;height:56px;border-radius:14px;background:var(--paper);border:1px solid var(--hairline);
  display:grid;place-items:center;font-size:28px;margin-bottom:16px;box-shadow:0 3px 10px var(--shadow);
}
.postcard .em.pcphoto{padding:0;overflow:hidden}
.postcard .em.pcphoto img{width:100%;height:100%;object-fit:cover}
.postcard .cat{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:8px}
.postcard h3{font-size:21px;margin-bottom:8px;line-height:1.25}
.postcard p{font-size:14.5px;color:var(--ink-2);margin-bottom:14px}
.postcard .meta{margin-top:auto;font-size:13px;color:var(--ink-3)}
.morelink{text-align:center;margin-top:36px}

/* ---------- big dish gallery ---------- */
.dishgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:18px}
.dish{position:relative;border-radius:var(--r);overflow:hidden;display:block;box-shadow:0 10px 28px var(--shadow)}
.dish.big{grid-column:span 2;grid-row:span 2}
.dish.wide{grid-column:span 2}
.dish img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dish:hover img{transform:scale(1.045)}
.dish .dlabel{
  position:absolute;inset:auto 0 0 0;padding:44px 22px 18px;
  background:linear-gradient(transparent,rgba(12,8,4,.78));
  color:#F4ECD8;display:grid;gap:3px;
}
.dish .dlabel b{font-family:"Fraunces",serif;font-size:21px;letter-spacing:-.01em}
.dish.big .dlabel b{font-size:27px}
.dish .dlabel span{font-size:13.5px;color:rgba(244,236,216,.82)}
@media (max-width:960px){
  .dishgrid{grid-template-columns:1fr 1fr;grid-auto-rows:210px}
  .dish.big{grid-column:span 2}
}
/* the gallery collapses to the first two dishes on phones only: eleven
   full-width photos is a long scroll on a small screen. Desktop and tablet
   keep the whole grid, so this button never appears there. */
.dishmore{display:none}
@media (max-width:620px){
  .dishgrid{grid-template-columns:1fr;grid-auto-rows:auto;gap:16px}
  .dish.big,.dish.wide{grid-column:span 1;grid-row:span 1}
  .dish{height:235px}
  .dish.big{height:300px}
  .dish.big .dlabel b{font-size:23px}
  .dishgrid:not(.all) .dish-more{display:none}
  .dishmore{
    display:block;width:100%;margin-top:16px;padding:14px 20px;
    background:var(--card);border:1px solid var(--hairline);border-radius:999px;
    font-family:inherit;font-size:15px;font-weight:600;color:var(--brass-ink);
    cursor:pointer;
  }
  .dishmore:active{background:var(--paper-2)}
}

/* ---------- interactive recipe deck (blog embed) ---------- */
.rp{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:24px 24px 18px;margin:8px 0 26px;box-shadow:0 14px 34px var(--shadow);
}
.rp-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rp-em{width:46px;height:46px;border-radius:12px;background:var(--paper);border:1px solid var(--hairline);display:grid;place-items:center;font-size:24px;flex:none}
.rp-top b{font-family:"Fraunces",serif;font-size:18px;display:block;line-height:1.2}
.rp-top span{font-size:13px;color:var(--ink-3)}
.rp-segs{display:flex;gap:5px;margin-bottom:20px}
.rp-segs i{height:5px;flex:1;border-radius:5px;background:var(--card-2);cursor:pointer}
.rp-segs i.on{background:var(--brass)}
.rp-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--brass-ink);margin-bottom:8px}
.rp-head{font-family:"Fraunces",serif;font-size:26px;font-weight:700;margin:0 0 14px;color:var(--ink)}
.rp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rp-chips span{background:var(--paper);border:1px solid var(--hairline);border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink-2)}
.rp-chips b{color:var(--ink)}
.rp-acts{list-style:none;display:grid;gap:9px;margin:0 0 16px;padding:0}
.rp-acts li{display:flex;gap:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
.rp-acts .n{flex:none;width:21px;height:21px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink);margin-top:2px}
.rp-items{list-style:none;display:grid;gap:7px;margin:0 0 16px;padding:0}
.rp-items li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.rp-items .u{flex:none;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:3px 7px}
.u-oth{background:var(--card-2);color:var(--ink-2)}
.rp-timer{
  display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--brass);border-radius:999px;
  padding:9px 20px;font-variant-numeric:tabular-nums;font-weight:700;font-size:18px;color:var(--brass-ink);
  cursor:pointer;background:none;margin-bottom:6px;transition:background .2s,transform .1s;
}
.rp-timer svg{width:16px;height:16px}
.rp-timer:hover{background:var(--brass-soft)}
.rp-timer.run{animation:tpulse 1s ease-in-out infinite}
.rp-timer.done{background:var(--brass);border-color:var(--brass);color:#FCFAF4;animation:ding .5s ease}
.rp-start{margin-top:4px}
.rp-stage{min-height:120px}
.rp-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hairline);margin-top:14px;padding-top:12px;color:var(--ink-3);font-size:13px}
.rp-arr{width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--hairline);display:grid;place-items:center;font-size:17px;color:var(--ink-2);cursor:pointer;transition:background .15s,transform .1s}
.rp-arr:hover{background:var(--card-2)}
.rp-arr:active{transform:scale(.92)}
.rp-arr[disabled]{opacity:.35;cursor:default}

/* servings scaler demo */
.scaledemo{margin-top:16px;background:var(--paper);border:1px dashed var(--brass-2);border-radius:14px;padding:14px 16px}
.sd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sd-serves{font-size:14.5px;color:var(--ink-2)}
.sd-serves b{font-family:"Fraunces",serif;font-size:18px;color:var(--ink)}
.sd-btn{
  width:34px;height:34px;border-radius:50%;background:var(--brass-soft);color:var(--brass-ink);
  font-size:19px;font-weight:700;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .1s;
}
.sd-btn:hover{background:var(--brass);color:#FCFAF4}
.sd-btn:active{transform:scale(.9)}
.sd-list{list-style:none;display:grid;gap:6px;font-size:13.5px;color:var(--ink-2)}
.sd-list b{color:var(--brass-ink);font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
footer.site{background:var(--card);border-top:1px solid var(--hairline);margin-top:40px}
footer.site .inner{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;padding:56px 0 40px}
footer.site .brandline{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer.site .brandline .mark{width:36px;height:36px}
footer.site .brandline b{font-family:"Fraunces",serif;font-size:19px}
footer.site p{font-size:14.5px;color:var(--ink-2);max-width:30em}
footer.site h4{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
footer.site ul{list-style:none;display:grid;gap:10px}
footer.site ul a{color:var(--ink-2);font-size:15px}
footer.site ul a:hover{color:var(--brass-ink)}
footer.site .small{border-top:1px solid var(--hairline);padding:20px 0 26px;font-size:13.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- blog index ---------- */
.bloghero{padding:72px 0 40px;text-align:center}
.bloghero h1{font-size:clamp(36px,4.6vw,54px);font-weight:700;margin:12px 0 14px}
.bloghero p{color:var(--ink-2);font-size:18px;max-width:36em;margin:0 auto}
.filterbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:26px 0 40px}
.fchip{
  border:1.5px solid var(--hairline);border-radius:999px;padding:8px 18px;
  font-size:14px;font-weight:600;color:var(--ink-2);transition:all .15s;
}
.fchip:hover{border-color:var(--brass-2);color:var(--ink)}
.fchip.on{background:var(--brass);border-color:var(--brass);color:#FCFAF4}
.blogwrap{padding-bottom:80px}

/* ---------- article ---------- */
article.post{max-width:700px;margin:0 auto;padding:64px 24px 40px}
article.post .crumb{font-size:14px;color:var(--ink-3);margin-bottom:26px;display:inline-block}
article.post .crumb:hover{color:var(--brass-ink);text-decoration:none}
article.post .cat{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink)}
article.post h1{font-size:clamp(32px,4.4vw,48px);font-weight:700;margin:14px 0 16px;line-height:1.12}
article.post .byline{font-size:14.5px;color:var(--ink-3);margin-bottom:14px}
article.post .rmeta{
  display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px;
}
article.post .rmeta span{
  background:var(--card);border:1px solid var(--hairline);border-radius:999px;
  padding:7px 15px;font-size:13.5px;color:var(--ink-2);font-weight:500;
}
article.post .rmeta b{color:var(--ink)}
.posthero{margin:26px 0 4px;border-radius:var(--r);overflow:hidden;box-shadow:0 16px 38px var(--shadow)}
.posthero img{width:100%;max-height:430px;object-fit:cover;display:block}
.prose{font-size:17.5px;color:var(--ink-2);padding-top:18px}
.prose p{margin:0 0 20px}
.prose>p:first-of-type{font-size:19.5px;color:var(--ink);line-height:1.6}
.prose h2{font-size:28px;color:var(--ink);margin:44px 0 16px}
.prose h3{font-size:21px;color:var(--ink);margin:32px 0 12px}
.prose ul,.prose ol{margin:0 0 22px 24px;display:grid;gap:9px}
.prose li::marker{color:var(--brass-ink);font-weight:600}
.prose blockquote{
  background:var(--card);border-left:3px solid var(--brass);border-radius:0 14px 14px 0;
  padding:18px 22px;margin:0 0 22px;font-family:"Fraunces",serif;font-size:18.5px;font-style:italic;color:var(--ink);
}
.prose hr{border:0;border-top:1px dashed var(--brass-2);margin:36px auto;width:120px}
.prose strong{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* ---------- about page ---------- */
/* one voice, one size — no oversized lede paragraph on the About story */
.post.about .prose>p:first-of-type{font-size:17.5px;color:var(--ink-2);line-height:inherit}
.about-hero{margin:26px 0 4px}
.about-hero img{
  display:block;width:100%;height:auto;border-radius:22px;
  border:1px solid var(--hairline);box-shadow:0 18px 40px var(--shadow);
}
.about-cta{margin-top:30px}
.prose .about-cta a{text-decoration:none}
.cookband{
  max-width:700px;margin:20px auto 90px;padding:0 24px;
}
.cookband .in{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.cookband .em{font-size:34px}
.cookband b{font-family:"Fraunces",serif;font-size:20px;display:block;margin-bottom:4px}
.cookband span{font-size:14.5px;color:var(--ink-2)}
.cookband .btn{margin-left:auto}

/* ---------- kitchen tips flip deck ---------- */
.tipbar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.tipcount{
  background:var(--card);border:1px solid var(--hairline);border-radius:999px;
  padding:10px 20px;font-size:14.5px;font-weight:600;color:var(--ink-2);
}
.tipcount.done{background:var(--brass);border-color:var(--brass);color:#FCFAF4;animation:ding .5s ease}
.tipgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.tipcard{perspective:1400px;height:250px;cursor:pointer;outline:none}
.tipcard:focus-visible .tc-in{box-shadow:0 0 0 3px var(--brass-2)}
.tc-in{
  position:relative;width:100%;height:100%;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;
  border-radius:var(--r);
}
.tipcard.flip .tc-in{transform:rotateY(180deg)}
.tipcard.wiggle .tc-in{animation:ding .5s ease}
@media (prefers-reduced-motion:reduce){.tc-in{transition:none}}
.tc-f,.tc-b{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r);border:1px solid var(--hairline);padding:22px;overflow:hidden;
}
.tc-f{
  background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;box-shadow:0 10px 26px var(--shadow);
}
.tc-f .tc-n{
  position:absolute;top:12px;left:18px;font-family:"Fraunces",serif;font-size:44px;font-weight:700;
  color:var(--ink);opacity:.08;
}
.tc-f .tc-em{font-size:44px}
.tc-f b{font-family:"Fraunces",serif;font-size:21px;line-height:1.2;max-width:14em}
.tc-f .tc-hint{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tc-check{
  position:absolute;top:12px;right:14px;width:26px;height:26px;border-radius:50%;
  background:var(--good);color:#FCFAF4;display:grid;place-items:center;font-size:14px;font-weight:800;
}
.tc-check[hidden]{display:none}
.tc-b{
  background:var(--card-2);transform:rotateY(180deg);
  display:flex;flex-direction:column;gap:10px;justify-content:center;
}
.tc-b b{font-family:"Fraunces",serif;font-size:17px}
.tc-b p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}
.tc-b a{text-decoration:underline;text-underline-offset:3px}
.tc-tried{
  align-self:flex-start;border:1.5px solid var(--hairline);border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;
  transition:all .15s;
}
.tc-tried:hover{border-color:var(--brass-2);color:var(--ink)}
.tc-tried.on{background:var(--good);border-color:var(--good);color:#FCFAF4}
@media (max-width:720px){
  .tipgrid{grid-template-columns:1fr}
  .tipcard{height:auto;min-height:230px}
  .tc-f,.tc-b{position:absolute}
}

/* ---------- start-here (beginners) page ---------- */
.journey{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  max-width:980px;margin:10px auto 0;position:relative;
}
.jstop{position:relative;text-align:center;padding-top:8px}
.jstop .jart{
  width:88px;height:88px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--card);border-radius:50%;position:relative;
  color:var(--ink);transition:transform .2s;
}
.jart::before{
  content:"";position:absolute;inset:0;border:1.5px dashed var(--brass-2);
  border-radius:50%;animation:jring 42s linear infinite;
}
@keyframes jring{to{transform:rotate(360deg)}}
.jstop:hover .jart{transform:rotate(-4deg) scale(1.06)}
.jstop .jart svg{width:52px;height:52px;overflow:visible}
.jstop b{font-family:"Fraunces",serif;font-size:17px;display:block;margin-bottom:4px}
.jstop p{font-size:14px;color:var(--ink-2);max-width:15em;margin:0 auto}
.jstop:not(:last-child)::after{
  content:"";position:absolute;top:48px;left:calc(50% + 52px);width:calc(100% - 104px);
  height:2px;background:repeating-linear-gradient(90deg,var(--brass-2) 0 6px,transparent 6px 13px);
  opacity:.6;animation:jflow 1.5s linear infinite;
}
@keyframes jflow{to{background-position-x:13px}}
@keyframes jflowv{to{background-position-y:13px}}
/* shared illustration motion: steam wisps, used by journey, step arts, 404 pot */
.jsteam{transform-box:fill-box;transform-origin:center bottom;animation:fsteam 3s ease-in-out infinite}
.jsteam.js2{animation-delay:1s}
.jsteam.js3{animation-delay:.5s}
.jrock{transform-box:fill-box;transform-origin:center bottom;animation:jrock 4.4s ease-in-out infinite}
@keyframes jrock{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.4deg)}62%{transform:rotate(1.8deg)}}
.jyolk{transform-box:fill-box;transform-origin:center;animation:jsizzle 2.6s ease-in-out -.8s infinite}
@keyframes jsizzle{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(.7px,-.5px) scale(1.06)}
  55%{transform:translate(-.6px,.4px) scale(.97)}
  80%{transform:translate(.4px,.5px) scale(1.03)}
}
.jpot{transform-box:fill-box;transform-origin:center bottom;animation:potbob 3.8s ease-in-out -1.9s infinite}
.jhat{transform-box:fill-box;transform-origin:center;animation:capfloat 3.8s ease-in-out -1.2s infinite}
.jspark{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.jspark.k2{animation-delay:1.1s}
@media (prefers-reduced-motion:reduce){
  .jart::before,.jstop:not(:last-child)::after,.jsteam,
  .jrock,.jyolk,.jpot,.jhat,.jspark,
  .spark,.fan,.msteam,.feat .ic svg,.art-paste svg,.wline,.stepA,.stepB,.stepC,.pubcard,
  .boilart .lid,.boilart .bub,.boilart .drip{animation:none}
}
@media (max-width:860px){
  .journey{grid-template-columns:1fr;gap:30px;max-width:340px}
  .jstop:not(:last-child)::after{
    top:calc(100% + 4px);left:50%;width:2px;height:22px;
    background:repeating-linear-gradient(180deg,var(--brass-2) 0 6px,transparent 6px 13px);
    animation-name:jflowv;
  }
}
.flyart{max-width:780px;margin:20px auto 0;color:var(--ink)}
.flyart svg{width:100%;height:auto;display:block;overflow:visible}
.flyart .flypath{animation:dotmarch11 1.4s linear infinite}
@keyframes dotmarch11{to{stroke-dashoffset:-11}}
.flyart .fsteam{
  animation:fsteam 3.2s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center bottom;
}
.flyart .fsteam.s2{animation-delay:1.1s}
.flyart .fsteam.s3{animation-delay:2.1s}
@keyframes fsteam{
  0%,100%{opacity:.3;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-5px)}
}
.flyart .flypot{transform-box:fill-box;transform-origin:center bottom;animation:potbob 3.6s ease-in-out infinite}
@keyframes potbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.flysun{transform-box:fill-box;transform-origin:center;animation:sunspin 26s linear infinite}
@keyframes sunspin{to{transform:rotate(360deg)}}
.cloud{transform-box:fill-box;animation:cloudsway 9s ease-in-out infinite}
.cloud.c2{animation-delay:2.2s}
.cloud.c3{animation-delay:4.6s}
@keyframes cloudsway{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
.capfloat{transform-box:fill-box;transform-origin:center;animation:capfloat 3.4s ease-in-out infinite}
@keyframes capfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(5deg)}}
@media (prefers-reduced-motion:reduce){
  .flyart .flypath,.flyart .fsteam,.flyart .flypot,.flysun,.cloud,.capfloat{animation:none}
}
.flycap{text-align:center;font-size:14px;color:var(--ink-3);font-style:italic;font-family:"Fraunces",serif;margin:10px 0 26px}
.storycol{max-width:660px;margin:0 auto;display:grid;gap:18px;font-size:16.5px;color:var(--ink-2);line-height:1.65}
.storycol .punch{font-family:"Fraunces",serif;font-style:italic;font-size:19px;color:var(--ink)}
.pledge{
  text-align:center;max-width:640px;margin:80px auto 0;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:44px 32px;box-shadow:0 14px 34px var(--shadow);
}
.pledge h2{font-size:clamp(26px,3.4vw,34px);margin:10px 0 12px}
.pledge p{color:var(--ink-2);font-size:16px;margin-bottom:24px}
.pledge .btn.big{font-size:19px;padding:16px 34px}
.btn.pledged{background:var(--good);cursor:default;transform:none}
.btn.pledged:hover{background:var(--good);color:#FCFAF4;transform:none;box-shadow:0 2px 10px var(--shadow)}
.afterin{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.afterin[hidden]{display:none}
.burst{
  position:fixed;z-index:99;font-size:22px;pointer-events:none;
  animation:burstfly 1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes burstfly{
  0%{transform:translate(0,0) scale(.6);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.25);opacity:0}
}
.startsub{font-family:"Fraunces",serif;font-size:26px;font-weight:700;margin:56px 0 18px;text-align:center}
.startnote{text-align:center;color:var(--ink-3);font-size:14.5px;max-width:44em;margin:14px auto 0}
.gearrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.gear{
  display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hairline);
  border-radius:999px;padding:10px 18px 10px 12px;font-size:14.5px;font-weight:500;color:var(--ink-2);
}
.gear b{font-size:19px}
/* hand-drawn gear icons: emoji had duplicates (two identical spoons) and
   nothing that actually reads as a cutting board or a kitchen towel */
.gear svg{
  width:26px;height:26px;flex:none;stroke:var(--brass-ink);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.skilllist{list-style:none;counter-reset:sk;display:grid;gap:14px;max-width:720px;margin:0 auto;padding:0}
.skilllist li{
  counter-increment:sk;position:relative;background:var(--card);border:1px solid var(--hairline);
  border-radius:14px;padding:18px 20px 18px 62px;font-size:15.5px;color:var(--ink-2);line-height:1.55;
}
.skilllist li::before{
  content:counter(sk);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;
  background:var(--brass);color:#FCFAF4;font-family:"Fraunces",serif;font-weight:700;font-size:14px;
  display:grid;place-items:center;
}
.skilllist b{color:var(--ink)}
.truths{list-style:none;display:grid;gap:10px;max-width:640px;margin:0 auto;padding:0}
.truths li{
  background:var(--paper-2);border-left:3px solid var(--brass-2);border-radius:0 12px 12px 0;
  padding:13px 18px;font-size:15px;color:var(--ink-2);font-family:"Fraunces",serif;font-style:italic;
}

/* ---------- 404 ---------- */
.lost{min-height:62vh;display:grid;place-items:center;text-align:center;padding:80px 24px}
/* ---------- experiment log ---------- */
.expart{width:74px;margin:0 auto 26px;color:var(--brass-ink)}
.expart svg{width:100%;height:auto;display:block;overflow:visible;stroke:currentColor}
.explog{max-width:680px;margin:0 auto;display:grid;gap:26px}
.expcard{
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);
  padding:30px 32px;box-shadow:0 10px 26px var(--shadow);
}
.exphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.exphoto{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;
  margin:4px 0 18px;box-shadow:0 6px 18px var(--shadow);display:block;
}
.expno{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-ink);background:var(--brass-soft);border-radius:999px;padding:6px 12px;
}
.expverdict{
  font-size:12.5px;font-weight:700;color:#FCFAF4;background:var(--good);
  border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.expcard h2{font-size:clamp(21px,2.6vw,26px);line-height:1.25;margin-bottom:4px}
.expemoji{margin-right:10px}
.expdate{font-size:13.5px;color:var(--ink-3);margin-bottom:14px}
.expcard p{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:12px}
.expcard p:last-child{margin-bottom:0}
.explink a{font-weight:600;color:var(--brass-ink);text-decoration:none;border-bottom:1px solid var(--brass-2)}
.explink a:hover{color:var(--ink)}
.expnote{
  max-width:680px;margin:34px auto 0;padding:22px 26px;border:1px dashed var(--brass-2);
  border-radius:var(--r);background:var(--paper-2);
}
.expnote p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-bottom:8px}
.expnote p:last-child{margin-bottom:0}

.lost .em{font-size:64px;margin-bottom:18px}
.boilart{width:132px;margin:0 auto 16px;color:var(--ink)}
.boilart svg{width:100%;height:auto;display:block;overflow:visible}
.boilart .lid{transform-box:fill-box;transform-origin:center bottom;animation:lidrattle 2.9s linear infinite}
@keyframes lidrattle{
  0%,66%{transform:translateY(0) rotate(0)}
  70%{transform:translateY(-3px) rotate(-2.5deg)}
  74%{transform:translateY(-1px) rotate(2deg)}
  78%{transform:translateY(-3px) rotate(-1.5deg)}
  82%,100%{transform:translateY(0) rotate(0)}
}
.boilart .bub{transform-box:fill-box;animation:bubup 2.3s ease-in infinite;opacity:0}
.boilart .bub.b2{animation-delay:.7s}
.boilart .bub.b3{animation-delay:1.5s}
@keyframes bubup{0%{transform:translateY(5px);opacity:0}30%{opacity:1}100%{transform:translateY(-20px);opacity:0}}
.boilart .drip{transform-box:fill-box;animation:dripfall 2.6s ease-in infinite}
@keyframes dripfall{0%,55%{transform:translateY(0);opacity:0}65%{opacity:.7}100%{transform:translateY(9px);opacity:0}}
.lost h1{font-size:clamp(34px,4.5vw,50px);margin-bottom:14px}
.lost p{color:var(--ink-2);font-size:17px;margin-bottom:28px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:56px}
  .stagearea{order:2}
  .feats,.how,.postgrid{grid-template-columns:1fr 1fr}
  .community .wrap{grid-template-columns:1fr}
  footer.site .inner{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .wrap{padding:0 16px}
  .nav{gap:7px}
  /* the brand is the identity — it should outweigh a nav button, not sit under it */
  .nav .mark{width:36px;height:36px}
  .nav .name{font-size:18px;white-space:nowrap}
  .nav .links{gap:6px}
  .btn{padding:9px 15px;font-size:14px}
  .nav .btn{padding:8px 13px;font-size:13px}
  .hero{padding:48px 0 24px}
  .hero .sub{font-size:17px}
  .feats,.how,.postgrid,.install .cols{grid-template-columns:1fr}
  .how{gap:30px}
  footer.site .inner{grid-template-columns:1fr}
  .phone{width:272px}
  .fan{left:-30px;width:120px}
  section.band{padding:64px 0}
}