/* ==========================================================================
   KITCHEN — warm paper, olive ink, tomato accent.
   Fraunces for the voice, Inter Tight for the UI, JetBrains Mono for numbers.
   ========================================================================== */
@font-face { font-family:'Bricolage'; src:url('/fonts/bricolage.woff2') format('woff2-variations'); font-weight:200 800; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('/fonts/fraunces-italic.woff2') format('woff2-variations'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter Tight'; src:url('/fonts/intertight.woff2') format('woff2-variations'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Mono'; src:url('/fonts/spacemono.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Mono'; src:url('/fonts/spacemono-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --paper:#FAF3E3;      /* butter linen */
  --paper2:#F3E8D0;     /* deeper, for bands */
  --cream:#FFFBF2;      /* cards */
  --line:#E3D6B9;       /* hairlines */
  --line2:#CDBF9C;
  --ink:#26301C;        /* dark olive */
  --ink2:#5A6248;
  --ink3:#8A9078;
  --tomato:#E8472B;
  --tomato2:#C7361D;
  --butter:#F5C842;
  --basil:#4F7A3A;
  --basil2:#E3EFD9;
  --tomato-soft:#FBE3DC;
  --shadow: 0 1px 0 rgba(38,48,28,.06), 0 10px 30px -18px rgba(38,48,28,.35);
  --r:18px;
  --disp:'Bricolage', 'Helvetica Neue', Arial, sans-serif;
  --hand:'Fraunces', Georgia, serif;   /* the chef's own handwriting — italic only */
  --ui:'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:'Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ink4:#B4B79E;
  --char:#1A2113;      /* charcoal, for burnt things */
  --wrap:1180px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.5;
  font-variation-settings:'wght' 430;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, #FFF6DF 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #FDEBD8 0%, transparent 55%);
  background-attachment:fixed;
}
body::before{ /* paper grain */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.19 0 0 0 0 0.11 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body > *{ position:relative; z-index:1 }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }
img{ max-width:100% }
button, input, textarea{ font:inherit; color:inherit }
::selection{ background:var(--butter); color:var(--ink) }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px }
.mono{ font-family:var(--mono); letter-spacing:-.02em }
.disp{ font-family:var(--disp) }
h1,h2,h3{ font-family:var(--disp); line-height:.94; letter-spacing:-.035em; margin:0;
  font-variation-settings:'wght' 620, 'wdth' 88, 'opsz' 48 }
h1{ font-size:clamp(46px, 7.6vw, 104px) }
h2{ font-size:clamp(30px, 4vw, 48px) }
h3{ font-size:clamp(22px, 2.4vw, 28px) }
html[lang="zh-CN"] h1{ font-size:clamp(38px, 5.4vw, 70px); letter-spacing:0; max-width:none; line-height:1.12 }
html[lang="zh-CN"] h2, html[lang="zh-CN"] h3{ letter-spacing:0 }
html[lang="zh-CN"] .rnote, html[lang="zh-CN"] .why p:last-child{ font-style:normal; font-family:var(--ui) }
h1 em, h2 em{ font-family:var(--hand); color:var(--tomato); font-style:italic; letter-spacing:-.01em;
  font-variation-settings:'opsz' 144, 'wght' 400, 'SOFT' 100, 'WONK' 1 }
em{ font-family:var(--hand); font-style:italic; font-variation-settings:'opsz' 48, 'wght' 400, 'SOFT' 100, 'WONK' 1 }
p{ margin:0 0 1em }
.lede{ font-size:clamp(17px, 1.6vw, 20px); color:var(--ink2); max-width:58ch; line-height:1.55 }
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3) }
.hair{ border:0; border-top:1px solid var(--line); margin:0 }

/* ------------------------------ pills & buttons ------------------------------ */
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-variation-settings:'wght' 520; border:1px solid var(--line2); background:var(--cream); white-space:nowrap }
.pill.soft{ background:transparent; color:var(--ink2) }
.pill.hot{ background:var(--tomato-soft); border-color:#F1B9AA; color:var(--tomato2) }
.pill.leaf{ background:var(--basil2); border-color:#BFD5AF; color:var(--basil) }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--tomato) }
.pill .dot.on{ background:var(--basil); box-shadow:0 0 0 3px rgba(79,122,58,.18) }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); font-variation-settings:'wght' 560; font-size:15px; cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease; white-space:nowrap }
.btn:hover{ text-decoration:none; transform:translateY(-1px); background:#161c10 }
.btn:active{ transform:translateY(0) }
.btn.tomato{ background:var(--tomato); border-color:var(--tomato); color:#fff; box-shadow:0 8px 22px -10px rgba(232,71,43,.6) }
.btn.tomato:hover{ background:var(--tomato2) }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line2) }
.btn.ghost:hover{ background:var(--cream) }
.btn.small{ padding:9px 14px; font-size:13.5px }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none }
.btn .arrow{ font-family:var(--hand); font-style:italic; font-size:1.2em; line-height:0 }

/* ------------------------------ header ------------------------------ */
.top{ position:sticky; top:0; z-index:50; background:rgba(250,243,227,.82); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line) }
.topin{ display:flex; align-items:center; gap:22px; height:66px }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); font-size:23px; font-weight:700, 'wdth' 85; letter-spacing:-.03em }
.brand:hover{ text-decoration:none }
.brand .mark{ width:30px; height:30px; border-radius:9px; object-fit:cover }
.brandtick{ font-family:var(--mono); font-size:11px; color:var(--ink3); margin-left:2px; letter-spacing:.06em }
.navlinks{ display:flex; gap:4px; margin-left:8px }
.navlinks a{ padding:8px 12px; border-radius:999px; font-size:14.5px; color:var(--ink2); font-variation-settings:'wght' 520 }
.navlinks a:hover{ background:var(--cream); text-decoration:none; color:var(--ink) }
.navlinks a[aria-current="page"]{ background:var(--ink); color:var(--paper) }
.toptail{ margin-left:auto; display:flex; align-items:center; gap:12px }
.langsw{ display:inline-flex; border:1px solid var(--line2); border-radius:999px; overflow:hidden; background:var(--cream) }
.lseg{ border:0; background:transparent; padding:6px 11px; font-size:12.5px; cursor:pointer; color:var(--ink2) }
.lseg[aria-pressed="true"]{ background:var(--ink); color:var(--paper) }

/* ------------------------------ hero ------------------------------ */
.hero{ padding:64px 0 28px }
.herogrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center }
.hero h1{ margin:14px 0 20px; max-width:11ch }
.ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px }
.heroplate{ position:relative; aspect-ratio:1; max-width:520px; margin:0 auto; width:100% }
.heroplate svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 30px 40px rgba(38,48,28,.18)) }
.heroplate .tag{ position:absolute; background:var(--cream); border:1px solid var(--line2); border-radius:12px; padding:8px 12px; font-size:13px; box-shadow:var(--shadow); display:flex; align-items:center; gap:8px; animation:float 6s ease-in-out infinite }
.heroplate .tag img{ width:22px; height:22px; border-radius:50% }
.heroplate .tag b{ font-family:var(--mono); font-weight:700 }
.heroplate .tag.up{ color:var(--basil) }
.heroplate .tag.dn{ color:var(--tomato2) }
.heroplate .t1{ left:-6px; top:16% }
.heroplate .t2{ right:-10px; top:38%; animation-delay:-2s }
.heroplate .t3{ left:6%; bottom:10%; animation-delay:-4s }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

/* ------------------------------ kpis ------------------------------ */
.kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:34px 0 0 }
.kpi{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow) }
.kpi .v{ font-family:var(--disp); font-size:42px; line-height:1; font-variation-settings:'wght' 680, 'wdth' 82; letter-spacing:-.04em }
.kpi .v.mono{ font-family:var(--mono); font-size:30px; font-weight:700 }
.kpi .k{ margin-top:6px; color:var(--ink3); font-size:13px }

/* ------------------------------ sections ------------------------------ */
.sec{ padding:56px 0 }
.sec.band{ background:var(--paper2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.sechead{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap }
.sechead p{ margin:6px 0 0; color:var(--ink2); max-width:60ch }

/* ------------------------------ the kitchen (tool) ------------------------------ */
.kitchen{ display:grid; grid-template-columns:minmax(0, 1fr) 440px; gap:24px; align-items:start }
.card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.cardhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line) }
.cardhead h3{ font-size:22px }
.cardbody{ padding:18px }

.search{ width:100%; padding:12px 14px 12px 40px; border-radius:12px; border:1px solid var(--line2); background:#fff; outline:0; font-size:15px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A9078' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>"); background-repeat:no-repeat; background-position:13px 50% }
.search:focus{ border-color:var(--ink) }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px }
.chip{ border:1px solid var(--line2); background:transparent; border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; color:var(--ink2) }
.chip:hover{ background:#fff }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }

.pantry{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:14px; max-height:620px; overflow:auto; padding:2px; scrollbar-width:thin }
.ing{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; border:1px solid var(--line); background:#fff; cursor:pointer; text-align:left; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; position:relative }
.ing:hover{ transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--line2) }
.ing[aria-pressed="true"]{ border-color:var(--basil); background:var(--basil2) }
.ing .jar{ width:38px; height:38px; border-radius:50%; flex:none; background:var(--paper2); display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(38,48,28,.08) }
.ing .jar img{ width:100%; height:100%; object-fit:cover; display:block }
.ing .jar .fb{ font-family:var(--mono); font-size:10px; font-weight:700; color:var(--ink2) }
.ing .tk{ font-family:var(--mono); font-size:12.5px; font-weight:700; line-height:1.1; letter-spacing:-.02em }
.ing .nm{ font-size:11.5px; color:var(--ink3); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96px }
.ing.rec .tk{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px }
.ing.rec > span:nth-child(2){ min-width:0 }
.ing .plus{ margin-left:auto; width:22px; height:22px; border-radius:50%; border:1px solid var(--line2); display:grid; place-items:center; font-size:15px; color:var(--ink2); flex:none; line-height:0 }
.ing[aria-pressed="true"] .plus{ background:var(--basil); border-color:var(--basil); color:#fff }
.ing.rec .jar{ background:var(--butter); }
.pantry-empty{ grid-column:1/-1; color:var(--ink3); padding:30px; text-align:center }

.recipein{ display:flex; gap:8px; margin-top:10px }
.recipein input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line2); background:#fff; outline:0; font-family:var(--mono); font-size:13px }
.recipein input:focus{ border-color:var(--ink) }

/* plate */
.plate{ position:sticky; top:84px }
.platevis{ position:relative; width:100%; aspect-ratio:1; max-width:340px; margin:4px auto 6px }
.platevis svg{ width:100%; height:100%; display:block }
.platevis .center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none }
.platevis .center .big{ font-family:var(--disp); font-size:46px; line-height:1; font-weight:700, 'wdth' 82; letter-spacing:-.04em }
.platevis .center .small{ font-size:12px; color:var(--ink3); margin-top:4px }
.platevis .center .big.ok{ color:var(--basil) }
.platevis .center .big.bad{ color:var(--tomato) }
.portions{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.prow{ display:grid; grid-template-columns:34px 1fr 118px 64px 26px; gap:10px; align-items:center; padding:8px 8px; border-radius:12px; border:1px solid var(--line); background:#fff }
.prow .jar{ width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--paper2); display:grid; place-items:center }
.prow .jar img{ width:100%; height:100%; object-fit:cover; display:block }
.prow .jar .fb{ font-family:var(--mono); font-size:9px; font-weight:700 }
.prow .who{ min-width:0 }
.prow .tk{ font-family:var(--mono); font-size:13px; font-weight:700; line-height:1.1 }
.prow .nm{ font-size:11px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.prow input[type=range]{ width:100%; accent-color:var(--tomato); margin:0 }
.prow .w{ display:flex; align-items:center; gap:2px; justify-content:end }
.prow .w input{ width:46px; text-align:right; border:1px solid var(--line2); border-radius:8px; padding:4px 6px; font-family:var(--mono); font-size:13px; background:#fff; outline:0 }
.prow .w input:focus{ border-color:var(--ink) }
.prow .w span{ font-family:var(--mono); font-size:12px; color:var(--ink3) }
.prow .x{ border:0; background:transparent; color:var(--ink3); cursor:pointer; font-size:18px; line-height:0; padding:4px }
.prow .x:hover{ color:var(--tomato) }
.plateempty{ color:var(--ink3); text-align:center; padding:18px 12px; font-size:14px }
.platetools{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px }
.platetools .tot{ font-family:var(--mono); font-size:13px; color:var(--ink2) }
.platetools .tot b{ font-weight:700 }
.platetools .tot.bad b{ color:var(--tomato) }
.platetools .tot.ok b{ color:var(--basil) }
.linkbtn{ border:0; background:transparent; color:var(--ink2); cursor:pointer; padding:4px 6px; font-size:13px; text-decoration:underline; text-underline-offset:3px }
.linkbtn:hover{ color:var(--ink) }
.field{ margin-top:12px }
.field input, .field textarea{ width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--line2); background:#fff; outline:0; font-size:15px; resize:none }
.field input:focus, .field textarea:focus{ border-color:var(--ink) }
.field .count{ text-align:right; font-family:var(--mono); font-size:11px; color:var(--ink3); margin-top:4px }
.cookrow{ display:flex; flex-direction:column; gap:8px; margin-top:14px }
.cookrow .btn{ width:100% }
.msg{ font-size:13px; color:var(--ink2); min-height:20px; margin-top:8px; text-align:center }
.msg.err{ color:var(--tomato2) }
.forknote{ font-size:12.5px; color:var(--ink3); margin-top:8px; text-align:center }
.forknote a{ text-decoration:underline; text-underline-offset:3px }

/* ------------------------------ board ------------------------------ */
.sorts{ display:flex; gap:8px; flex-wrap:wrap }
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); padding:0 14px 2px; font-weight:500 }
.table td{ background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 14px; vertical-align:middle }
.table td:first-child{ border-left:1px solid var(--line); border-radius:14px 0 0 14px }
.table td:last-child{ border-right:1px solid var(--line); border-radius:0 14px 14px 0 }
.table tr.row:hover td{ background:#fff }
.table .rank{ font-family:var(--disp); font-size:24px; font-weight:700, 'wdth' 80; color:var(--ink4); width:46px; letter-spacing:-.04em }
.table .rname{ font-family:var(--disp); font-size:21px; font-variation-settings:'wght' 640, 'wdth' 88; letter-spacing:-.025em }
.table .rname a:hover{ text-decoration:none; color:var(--tomato) }
.table .sub{ font-size:12px; color:var(--ink3); margin-top:2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.table .chef{ font-family:var(--mono); font-size:12.5px }
.table .perf{ font-family:var(--mono); font-size:16px; font-weight:700; text-align:right; white-space:nowrap }
.table .perf.up{ color:var(--basil) } .table .perf.dn{ color:var(--tomato2) }
.table .age{ font-family:var(--mono); font-size:12.5px; color:var(--ink2); white-space:nowrap }
.stack{ display:flex }
.stack .jar{ width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--paper2); border:2px solid var(--cream); margin-left:-8px; display:grid; place-items:center; flex:none }
.stack .jar:first-child{ margin-left:0 }
.stack .jar img{ width:100%; height:100%; object-fit:cover; display:block }
.stack .jar .fb{ font-family:var(--mono); font-size:8px; font-weight:700 }
.stack .more{ font-family:var(--mono); font-size:11px; color:var(--ink3); align-self:center; margin-left:6px }
.tag{ display:inline-block; padding:2px 7px; border-radius:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line2); color:var(--ink2) }
.tag.house{ background:var(--butter); border-color:#E2B42A; color:#5A4500 }
.boardempty{ padding:40px; text-align:center; color:var(--ink3) }

/* ------------------------------ recipe page ------------------------------ */
.rhead{ display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:center; padding:48px 0 24px }
.rhead h1{ font-size:clamp(40px, 5.6vw, 72px); margin:10px 0 12px; max-width:14ch }
.rmeta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; color:var(--ink2); font-size:14px }
.rmeta .chef{ font-family:var(--mono) }
.rnote{ font-family:var(--hand); font-style:italic; font-size:22px; color:var(--ink2); margin:14px 0 0; font-variation-settings:'opsz' 48, 'wght' 380, 'SOFT' 100, 'WONK' 1; max-width:40ch }
.ractions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px }
.rvalue{ text-align:center }
.rvalue .big{ font-family:var(--disp); font-size:96px; line-height:.9; font-variation-settings:'wght' 720, 'wdth' 80; letter-spacing:-.05em }
.rvalue .big.up{ color:var(--basil) } .rvalue .big.dn{ color:var(--tomato) }
.rvalue .small{ color:var(--ink3); font-size:13px; margin-top:6px }
.rvalue .delta{ font-family:var(--mono); font-size:18px; font-weight:700; margin-top:8px }
.rvalue .delta.up{ color:var(--basil) } .rvalue .delta.dn{ color:var(--tomato2) }
.rtable td{ padding:11px 14px }
.rtable .ingcell{ display:flex; align-items:center; gap:10px }
.rtable .ingcell .jar{ width:30px; height:30px; border-radius:50%; overflow:hidden; background:var(--paper2); display:grid; place-items:center; flex:none }
.rtable .ingcell .jar img{ width:100%; height:100%; object-fit:cover; display:block }
.rtable .ingcell .jar .fb{ font-family:var(--mono); font-size:8px; font-weight:700 }
.rtable .n{ font-family:var(--mono); font-size:13.5px; text-align:right; white-space:nowrap }
.rtable .n.up{ color:var(--basil) } .rtable .n.dn{ color:var(--tomato2) }
.rtable .bar{ height:6px; border-radius:3px; background:var(--paper2); overflow:hidden; min-width:80px }
.rtable .bar i{ display:block; height:100%; background:var(--tomato); border-radius:3px }
.sigbox{ margin-top:20px; padding:16px 18px; border-radius:var(--r); border:1px dashed var(--line2); background:var(--cream) }
.sigbox .st{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.sigbox pre{ margin:12px 0 0; padding:12px 14px; border-radius:12px; background:var(--paper2); font-family:var(--mono); font-size:12px; white-space:pre-wrap; word-break:break-word; color:var(--ink2) }

/* ------------------------------ why / integrations ------------------------------ */
.why{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start }
.why p{ font-size:17px; color:var(--ink2); line-height:1.6 }
.why p:last-child{ font-family:var(--hand); font-style:italic; font-size:29px; line-height:1.2; color:var(--ink); font-variation-settings:'opsz' 48, 'wght' 400, 'SOFT' 100, 'WONK' 1 }
.ints{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px }
.int{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow) }
.int .nm{ font-family:var(--disp); font-size:23px; font-variation-settings:'wght' 660, 'wdth' 86; letter-spacing:-.025em; display:flex; align-items:center; gap:10px }
.int .nm .sw{ width:14px; height:14px; border-radius:4px; flex:none }
.int .d{ color:var(--ink3); font-size:13px; margin-top:6px }
.partners{ margin-top:14px; font-size:13px; color:var(--ink3) }

/* ------------------------------ method / prose ------------------------------ */
.prose{ max-width:70ch }
.prose h1{ font-size:clamp(40px, 6vw, 76px); margin:0 0 28px }
.prose h3{ margin:34px 0 8px }
.prose p{ font-size:17px; color:var(--ink2); line-height:1.65 }
.prose ul{ padding-left:1.2em; color:var(--ink2); font-size:17px; line-height:1.6 }
.prose li{ margin:6px 0 }
.formula{ font-family:var(--mono); font-size:15px; padding:14px 16px; border-radius:12px; background:var(--cream); border:1px solid var(--line); margin:10px 0 18px; overflow:auto }

/* ------------------------------ token ------------------------------ */
.pending{ padding:28px; border-radius:var(--r); border:1px solid #F1B9AA; background:var(--tomato-soft) }
.pending .big{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--tomato2); letter-spacing:.04em }
.pending p{ color:var(--ink2); max-width:56ch }
.cabox{ padding:22px; border-radius:var(--r); border:1px solid #BFD5AF; background:var(--basil2) }
.cabox .ca{ font-family:var(--mono); font-size:clamp(13px, 1.7vw, 18px); word-break:break-all; margin:8px 0 12px; font-weight:700 }
.controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-top:16px }
.fact{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:12px 14px }
.fact .k{ font-size:12px; color:var(--ink3) }
.fact .v{ font-family:var(--mono); font-size:16px; font-weight:700; margin-top:2px }
.chart{ margin-top:16px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--cream) }
.chart iframe{ width:100%; height:460px; border:0; display:block }

/* ------------------------------ footer ------------------------------ */
.foot{ margin-top:70px; padding:40px 0 48px; border-top:1px solid var(--line); background:var(--paper2) }
.footgrid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px; align-items:start }
.footline{ margin:8px 0 0; color:var(--ink2); font-size:14px }
.footnav{ display:flex; flex-direction:column; gap:6px; font-size:14.5px; color:var(--ink2) }
.footpills{ display:flex; flex-direction:column; gap:8px; align-items:start }
.disc{ font-size:12.5px; color:var(--ink3); max-width:90ch; margin:22px 0 0; line-height:1.5 }
.disc + .disc{ margin-top:8px }

/* ------------------------------ 404 ------------------------------ */
.notfound{ min-height:60vh; display:grid; place-items:center; text-align:center; padding:60px 0 }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1000px){
  .kitchen{ grid-template-columns:1fr }
  .plate{ position:static }
  .herogrid{ grid-template-columns:1fr }
  .heroplate{ max-width:400px }
  .kpis{ grid-template-columns:repeat(2, 1fr) }
  .ints{ grid-template-columns:repeat(2, 1fr) }
  .why{ grid-template-columns:1fr }
  .rhead{ grid-template-columns:1fr }
  .footgrid{ grid-template-columns:1fr }
}
@media (max-width: 720px){
  .navlinks{ display:none }
  .toptail .pill{ display:none }
  .hero{ padding:40px 0 20px }
  .table th:nth-child(4), .table td:nth-child(4){ display:none }
  .prow{ grid-template-columns:30px 1fr 84px 60px 24px; gap:6px }
  .pantry{ grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); max-height:440px }
  .ints{ grid-template-columns:1fr }
  .rvalue .big{ font-size:64px }
}
/* mobile floating plate bar */
.mbar{ display:none }
@media (max-width: 1000px){
  .mbar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 16px; border-radius:999px; background:var(--ink); color:var(--paper); box-shadow:0 12px 30px -10px rgba(38,48,28,.5); font-size:14px }
  .mbar[hidden]{ display:none }
  .mbar .btn{ padding:9px 14px; font-size:13.5px }
  .mbar .stack .jar{ border-color:var(--ink); width:24px; height:24px }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ==========================================================================
   MOTION LAYER
   ========================================================================== */
/* reveal */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal="2"]{ transition-delay:.12s } [data-reveal="3"]{ transition-delay:.24s } [data-reveal="4"]{ transition-delay:.36s }

/* ticker tape */
.tape{ border-bottom:1px solid var(--line); background:var(--cream); overflow:hidden; height:40px; position:relative }
.tape::before, .tape::after{ content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none }
.tape::before{ left:0; background:linear-gradient(90deg, var(--cream), transparent) }
.tape::after{ right:0; background:linear-gradient(270deg, var(--cream), transparent) }
.tapein{ display:flex; width:max-content; animation:slide 70s linear infinite }
.tape:hover .tapein{ animation-play-state:paused }
.taperow{ display:flex; align-items:center; height:40px }
.tp{ display:inline-flex; align-items:center; gap:7px; padding:0 16px; height:40px; font-size:12.5px; color:var(--ink2); border-right:1px solid var(--line); white-space:nowrap }
.tp:hover{ text-decoration:none; background:var(--paper2); color:var(--ink) }
.tp img{ width:18px; height:18px; border-radius:50%; object-fit:cover; background:#fff }
.tp b{ font-family:var(--mono); font-weight:700; letter-spacing:.02em }
.tp span{ font-family:var(--mono); color:var(--ink3) }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* sushi belt */
.belt{ position:relative; overflow:hidden; padding:26px 0 18px }
.belt .track{ position:absolute; left:0; right:0; top:50%; height:14px; transform:translateY(2px); background:repeating-linear-gradient(90deg, var(--paper2) 0 26px, var(--line) 26px 28px); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.beltin{ display:flex; width:max-content; animation:slide 60s linear infinite; position:relative }
.belt:hover .beltin{ animation-play-state:paused }
.beltrow{ display:flex; gap:22px; padding:0 11px }
.dish{ position:relative; width:84px; height:84px; display:grid; place-items:center; text-decoration:none; transform:perspective(500px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) rotate(var(--tilt,0)); transition:transform .25s ease }
.dish:hover{ text-decoration:none; transform:perspective(500px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) rotate(0) translateY(-6px) scale(1.06) }
.dish .saucer{ position:absolute; inset:6px; border-radius:50%; background:radial-gradient(circle at 50% 40%, #FFFFFF, #F3E8D0); box-shadow:0 1px 0 #fff inset, 0 10px 18px -10px rgba(38,48,28,.45), 0 0 0 1px var(--line) }
.dish img{ position:relative; width:40px; height:40px; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 2px 6px rgba(38,48,28,.2); margin-top:-8px }
.dish b{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--ink2); background:var(--cream); padding:1px 6px; border-radius:999px; border:1px solid var(--line) }

/* big marquee */
.mq{ overflow:hidden; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper) }
.mqin{ display:flex; width:max-content; animation:slide 40s linear infinite }
.mqrow{ display:flex; align-items:baseline; gap:26px; padding:0 13px; font-family:var(--disp); font-size:clamp(40px, 6vw, 84px); line-height:1.1; letter-spacing:-.04em; font-variation-settings:'wght' 680, 'wdth' 80; color:var(--ink); white-space:nowrap }
.mqrow span:nth-child(4n+3){ font-family:var(--hand); font-style:italic; color:var(--tomato); font-variation-settings:'opsz' 144, 'wght' 400, 'SOFT' 100, 'WONK' 1 }
.mqrow i{ font-style:normal; color:var(--line2) }

/* hero plate rotation + floating tags */
.heroplate .ring{ transform-box:fill-box; transform-origin:center; animation:spin 80s linear infinite }
.heroplate:hover .ring{ animation-play-state:paused }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* slices pop in */
.slice{ transform-box:fill-box; transform-origin:center; animation:slicein .5s cubic-bezier(.2,.7,.2,1) both }
@keyframes slicein{ from{ opacity:0; transform:scale(.6) } to{ opacity:1; transform:scale(1) } }
.heroplate .slice{ animation-duration:.9s }

/* pantry jars tilt + shake when added */
.ing{ transform:perspective(600px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); will-change:transform }
.ing:hover{ transform:perspective(600px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-2px) }
.ing .jar img{ transition:transform .25s ease }
.ing:hover .jar img{ transform:scale(1.12) rotate(-6deg) }
.ing.just{ animation:pop .35s ease }
@keyframes pop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
.flyer{ position:fixed; width:36px; height:36px; border-radius:50%; z-index:200; pointer-events:none; object-fit:cover; box-shadow:0 6px 14px rgba(38,48,28,.3); background:#fff }

/* plate rows enter */
.prow{ animation:rowin .35s cubic-bezier(.2,.7,.2,1) both }
@keyframes rowin{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.platevis .center .big{ transition:color .3s ease }

/* board rows stagger */
.table tr.row{ animation:rowin .4s cubic-bezier(.2,.7,.2,1) both }
.table tr.row:nth-child(1){ animation-delay:.02s } .table tr.row:nth-child(2){ animation-delay:.06s } .table tr.row:nth-child(3){ animation-delay:.1s } .table tr.row:nth-child(4){ animation-delay:.14s } .table tr.row:nth-child(5){ animation-delay:.18s } .table tr.row:nth-child(6){ animation-delay:.22s } .table tr.row:nth-child(n+7){ animation-delay:.26s }
.table tr.row td{ transition:background .15s ease, transform .15s ease }
.livedot{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink3) }
.livedot i{ width:8px; height:8px; border-radius:50%; background:var(--basil); animation:pulse 2s ease-in-out infinite }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(79,122,58,.35) } 50%{ box-shadow:0 0 0 6px rgba(79,122,58,0) } }

/* CA pill */
.capill{ position:fixed; left:14px; bottom:14px; z-index:70; display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:13px; box-shadow:0 12px 30px -10px rgba(38,48,28,.5); animation:rowin .5s ease both }
.capill b{ font-family:var(--mono); font-weight:700; letter-spacing:.04em }
.capill a{ color:var(--butter) }
.capill .mono{ color:#C9CDB9 }
.capill .dot{ width:8px; height:8px; border-radius:50%; background:var(--tomato) }
.capill .dot.on{ background:var(--basil); animation:pulse 2s infinite }
.capill button{ border:0; background:rgba(255,255,255,.12); color:var(--paper); border-radius:999px; padding:5px 10px; cursor:pointer; font-size:12px }
.capill button.x{ padding:3px 9px; font-size:15px; line-height:1 }
@media (max-width:1000px){ .capill{ bottom:76px } }

/* hero eyebrow typing cursor */
.hero .eyebrow::after{ content:'▍'; margin-left:4px; color:var(--tomato); animation:blink 1.1s steps(2) infinite }
@keyframes blink{ 50%{ opacity:0 } }

/* kpi */
.kpi{ transition:transform .2s ease, box-shadow .2s ease }
.kpi:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(38,48,28,.06), 0 18px 34px -18px rgba(38,48,28,.45) }

/* button shimmer */
.btn.tomato{ position:relative; overflow:hidden }
.btn.tomato::after{ content:''; position:absolute; top:-40%; bottom:-40%; width:30%; left:-40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); animation:shine 4s ease-in-out infinite }
@keyframes shine{ 0%,60%{ left:-40% } 100%{ left:140% } }

/* surprise */
.surprise{ display:inline-flex; align-items:center; gap:8px }
.surprise .die{ display:inline-block; animation:wobble 3s ease-in-out infinite }
@keyframes wobble{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-12deg) } 75%{ transform:rotate(12deg) } }

@media (prefers-reduced-motion: reduce){ .tapein, .beltin, .mqin, .heroplate .ring, .slice, .capill, .surprise .die, .hero .eyebrow::after{ animation:none !important } }

/* ==========================================================================
   THE DEGEN LAYER — the bits that make it a kitchen and not a fintech
   ========================================================================== */

/* doneness stamp — rubber-stamped on plates by how they are cooking */
.stamp{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:700;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:4px;
  border:1.5px solid currentColor; transform:rotate(-3deg); white-space:nowrap; opacity:.9 }
.stamp.raw    { color:#8A9078 }
.stamp.cook   { color:var(--basil);  background:rgba(79,122,58,.07) }
.stamp.well   { color:var(--tomato2);background:rgba(232,71,43,.07) }
.stamp.burnt  { color:var(--char);   background:rgba(26,33,19,.06); border-style:dashed }
.stamp.big{ font-size:13px; padding:5px 12px; letter-spacing:.16em; transform:rotate(-4deg) }

/* steam — rises off a plate that is running hot */
.steam{ position:absolute; left:50%; top:-6px; transform:translateX(-50%); pointer-events:none; z-index:2 }
.steam i{ display:block; position:absolute; bottom:0; width:5px; height:30px; border-radius:50%;
  background:linear-gradient(to top, rgba(90,98,72,.28), transparent); filter:blur(2.5px);
  animation:rise 3.2s ease-in-out infinite }
.steam i:nth-child(1){ left:-16px; animation-delay:0s }
.steam i:nth-child(2){ left:0;     animation-delay:-1.1s; height:38px }
.steam i:nth-child(3){ left:16px;  animation-delay:-2.2s }
@keyframes rise{ 0%{ opacity:0; transform:translateY(6px) scaleX(1) } 30%{ opacity:1 } 100%{ opacity:0; transform:translateY(-30px) scaleX(1.7) } }

/* the plate keeps its logos upright while the ring turns */
.heroplate .ring .slice > image, .heroplate .ring .slice > circle + image{ transform-box:fill-box; transform-origin:center }
.heroplate .ring{ animation:spin 90s linear infinite }
.heroplate .ring .slice image, .heroplate .ring .slice text{
  transform-box:fill-box; transform-origin:center; animation:unspin 90s linear infinite }
@keyframes unspin{ to{ transform:rotate(-360deg) } }

/* sizzle — the pan when a plate is cooked */
.sizzle{ position:fixed; inset:0; pointer-events:none; z-index:150 }
.sizzle b{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--butter);
  animation:spark .8s ease-out forwards }
@keyframes spark{ to{ transform:translate(var(--dx), var(--dy)) scale(0); opacity:0 } }

/* kitchen ticket — the receipt a recipe prints */
.ticket{ position:relative; background:#FFFDF7; border-radius:3px; padding:22px 24px 30px;
  max-width:380px; margin:0 auto; color:var(--ink);
  box-shadow:0 18px 40px -20px rgba(38,48,28,.5), 0 0 0 1px rgba(38,48,28,.07);
  font-family:var(--mono); font-size:12.5px; line-height:1.75 }
.ticket::before, .ticket::after{ content:''; position:absolute; left:0; right:0; height:8px;
  background:radial-gradient(circle at 5px 0, transparent 5px, #FFFDF7 5px); background-size:10px 8px }
.ticket::before{ top:-7px; transform:rotate(180deg) }
.ticket::after{ bottom:-7px }
.ticket .th{ text-align:center; border-bottom:1px dashed var(--line2); padding-bottom:12px; margin-bottom:12px }
.ticket .th b{ font-family:var(--disp); font-size:19px; font-variation-settings:'wght' 700,'wdth' 82;
  letter-spacing:.02em; display:block; text-transform:uppercase }
.ticket .th span{ color:var(--ink3); font-size:11px; letter-spacing:.1em; text-transform:uppercase }
.ticket .li{ display:flex; align-items:baseline; gap:6px }
.ticket .li .d{ flex:1; border-bottom:1px dotted var(--line2); transform:translateY(-3px) }
.ticket .li b{ font-weight:700 }
.ticket .tf{ border-top:1px dashed var(--line2); margin-top:12px; padding-top:12px }
.ticket .tot{ display:flex; justify-content:space-between; font-weight:700; font-size:14px }
.ticket .sub{ color:var(--ink3); font-size:11px; margin-top:10px; text-align:center; line-height:1.6; word-break:break-all }
.ticket .barcode{ height:30px; margin:14px 0 4px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px) }

/* pantry: a stocked shelf, not a grid of buttons */
.ing{ border-radius:12px }
.ing .jar{ box-shadow:inset 0 0 0 1px rgba(38,48,28,.08), 0 2px 4px -2px rgba(38,48,28,.3) }
.ing[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--basil) inset }

/* empty plate gets a drawn dashed circle and a joke */
.plateempty{ font-family:var(--hand); font-style:italic; font-size:17px; color:var(--ink3) }

/* board: hot rows glow faintly */
.table tr.row.hot td{ background:linear-gradient(90deg, rgba(232,71,43,.05), transparent 40%) }
.table tr.row.cold td{ background:linear-gradient(90deg, rgba(38,48,28,.04), transparent 40%) }

/* section numbering — small editorial detail */
.sechead h2{ position:relative }
.secno{ font-family:var(--mono); font-size:11px; color:var(--ink4); letter-spacing:.2em; display:block; margin-bottom:10px }

/* pull quote / big claim */
.claim{ font-family:var(--disp); font-size:clamp(28px,3.4vw,44px); line-height:1.02; letter-spacing:-.035em;
  font-variation-settings:'wght' 660,'wdth' 84; max-width:18ch }
.claim em{ font-family:var(--hand); color:var(--tomato) }

.ticketrow{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:34px; align-items:start; margin-top:8px }
@media (max-width:1000px){ .ticketrow{ grid-template-columns:1fr } #ticket{ order:-1 } }

/* ==========================================================================
   LOGO PRESENTATION — company marks are transparent PNGs of every shape and
   colour. Each one sits INSIDE a cream disc with air around it, never cropped
   to fill it: that is what keeps a wall of 193 different logos looking like
   one set of ingredients instead of a pile of stickers.
   ========================================================================== */
.jar, .dish img, .tp img{ background:#FFFDF7 }
.jar img{ object-fit:contain !important; padding:16%; background:#FFFDF7 }
.tp img{ object-fit:contain; padding:2px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(38,48,28,.1) }
.dish img{ object-fit:contain; padding:7px; box-shadow:0 2px 6px rgba(38,48,28,.18), inset 0 0 0 1px rgba(38,48,28,.08) }
.stack .jar img{ padding:14% }
.rtable .ingcell .jar img{ padding:15% }
.prow .jar img{ padding:15% }
/* the monogram fallback is a full-bleed disc — no padding on that one */
.jar img[src^="data:"], .dish img[src^="data:"], .tp img[src^="data:"]{ padding:0 }

/* ------------------------------ what it runs on ------------------------------ */
.ints .int{ display:flex; align-items:center; gap:14px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease }
.ints .int:hover{ text-decoration:none; transform:translateY(-3px); box-shadow:0 1px 0 rgba(38,48,28,.06), 0 18px 34px -18px rgba(38,48,28,.45) }
.intmark{ position:relative; width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:#FFFDF7; box-shadow:inset 0 0 0 1px rgba(38,48,28,.1), 0 3px 8px -4px rgba(38,48,28,.35); overflow:hidden }
.intmark::after{ content:''; position:absolute; inset:auto 0 0 0; height:3px; background:var(--tint) }
.intmark img{ position:relative; z-index:1; width:30px; height:30px; object-fit:contain; background:transparent }
.intmark b{ position:absolute; font-family:var(--disp); font-size:15px; font-variation-settings:'wght' 700,'wdth' 80;
  color:var(--ink2); letter-spacing:-.04em }
.intmark img + b{ display:none }
.intbody{ min-width:0 }
.intbody .nm{ display:block; font-family:var(--disp); font-size:19px; font-variation-settings:'wght' 660,'wdth' 86;
  letter-spacing:-.025em; color:var(--ink) }
.intbody .d{ display:block; color:var(--ink3); font-size:12.5px; margin-top:2px }

/* ------------------------------ challenges ------------------------------ */
.btn.ink{ background:var(--butter); border-color:#E2B42A; color:#3A2C00 }
.btn.ink:hover{ background:#F0BE2E }
.beatbar{ display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap;
  padding:8px 12px; border-radius:999px; background:var(--butter); color:#3A2C00; font-size:13px }
.beatbar b{ font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.beatbar a{ font-family:var(--disp); font-variation-settings:'wght' 640,'wdth' 88; font-size:15px }
.beatbar .mono{ font-weight:700 }
.beathint{ display:block; margin-top:8px; color:var(--ink3); font-size:12.5px; line-height:1.5 }
.duel{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:6px;
  background:var(--butter); color:#3A2C00; font-size:11.5px }
.duel::before{ content:'⚔'; font-size:11px }

/* X link in the header */
.xlink{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border:1px solid var(--line); border-radius:999px; background:var(--cream); color:var(--ink);
  transition:transform .16s cubic-bezier(.2,.8,.2,1), background .16s, border-color .16s }
.xlink:hover{ text-decoration:none; transform:translateY(-1px) rotate(-6deg); background:var(--ink); color:var(--paper); border-color:var(--ink) }
@media (max-width:640px){ .xlink{ width:28px; height:28px } }