/*
Theme Name: The Smart Kitchen
Theme URI: https://thesmartkitchen.blog
Author: The Smart Kitchen
Description: A fire-lit cooking and kitchen journal. Scroll-ignited burner hero, six-burner station menu, order-ticket articles, a cups-to-grams scale, an Amazon gear rack and a live feed of food blogs. Amazon ID, products and feeds are editable under Settings → Smart Kitchen.
Version: 1.0.3
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: smart-kitchen
*/

@property --fk{syntax:'<number>';inherits:true;initial-value:0}

:root{
	--iron:#16110e;--iron2:#261c15;--cream:#fff1d4;--paper:#fff7e3;--ink:#1b1310;
	--butter:#f2c955;--butter2:#fbe6ab;--tomato:#cf3516;--flame:#ff5a1f;--saffron:#ffb72b;--basil:#173f2c;
	--disp:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
	--ital:"Fraunces",Georgia,serif;
	--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
	--pad:clamp(20px,5vw,72px);--rad:clamp(26px,4.500vw,60px);
	--ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--iron);color:var(--cream);font:400 1.0625rem/1.6 var(--disp);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select{font:inherit;color:inherit}
em{font-family:var(--ital);font-style:italic;font-weight:500;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:6px}
.vh,.skip:not(:focus){position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;padding:0;opacity:0}
.skip:focus{position:fixed;top:12px;left:12px;z-index:200;background:var(--saffron);color:var(--ink);padding:10px 16px;border-radius:99px}

/* reveal */
.rv{opacity:0;translate:0 30px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:calc(var(--n,0)*55ms)}
.rv.in{opacity:1;translate:0 0}

/* type bits */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font:700 .76rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--flame)}
.eyebrow::before{content:"";width:.6em;height:.85em;background:currentColor;border-radius:50% 50% 50% 50%/65% 65% 35% 35%}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;border:0;border-radius:99px;background:var(--flame);color:var(--ink);font-weight:700;line-height:1;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.btn i{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover{background:var(--saffron);transform:translateY(-2px)}
.btn:hover i{transform:translateX(5px)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:var(--tomato);color:var(--cream)}
.btn--sm{padding:.72em 1.1em;font-size:.86rem}
.fine{font-size:.82rem;opacity:.75;margin-top:14px}

/* header */
.hd{position:fixed;z-index:90;top:14px;left:50%;width:min(1180px,calc(100% - 28px));transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 10px 9px 20px;border-radius:99px;background:rgba(22,17,14,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,241,212,.13);transition:transform .5s var(--ease)}
.hd.is-hid{transform:translate(-50%,-160%)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.08rem;letter-spacing:-.02em;white-space:nowrap}
.logo__mark{width:26px;height:26px;color:var(--flame)}
.logo em{color:var(--saffron);font-size:1.12em}
.nav ul{display:flex;gap:4px}
.nav a{display:block;padding:.62em 1em;border-radius:99px;font-size:.93rem;font-weight:600;transition:background .25s,color .25s}
.nav a:hover,.nav .current-menu-item>a{background:var(--cream);color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--flame);cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}

.admin-bar .hd{top:46px}
@media (max-width:782px){.admin-bar .hd{top:60px}}

/* flames (shared by hero burner + station burners) */
.fl,.burner__flames,.hob__fl{position:absolute;inset:0;pointer-events:none}
.burner__flames i,.hob__fl i{position:absolute;left:50%;bottom:50%;width:calc(var(--fd)*.115);height:calc(var(--fd)*.25);margin-left:calc(var(--fd)*-.0575);transform-origin:50% 100%;transform:rotate(calc(var(--i)*var(--step))) translateY(calc(var(--fd)*-.492)) scale(calc(.6 + var(--fk)*.4),calc(.22 + var(--fk)*1.05))}
.burner__flames i::before,.burner__flames i::after,.hob__fl i::before,.hob__fl i::after{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50%/80% 80% 20% 20%;transform-origin:50% 100%;animation:flick .8s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.37s);animation-play-state:paused}
.burner__flames i::before,.hob__fl i::before{background:linear-gradient(to top,#1b5cff 0,#3aa8ff 45%,rgba(150,225,255,0) 100%)}
.burner__flames i::after,.hob__fl i::after{background:linear-gradient(to top,#ff3300 0,#ff7a1a 38%,#ffd257 74%,rgba(255,210,87,0) 100%);opacity:var(--fk)}
.is-live .burner__flames i::before,.is-live .burner__flames i::after,.hob__b.lit .hob__fl i::before,.hob__b.lit .hob__fl i::after{animation-play-state:running}
@keyframes flick{0%{transform:scaleY(.8) skewX(-5deg)}100%{transform:scaleY(1.14) skewX(5deg)}}

/* hero */
.hero{position:relative;height:260vh;--k:0;--e:0;--c:0;--d:min(40vh,62vw)}
.hero__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(120% 80% at 50% 50%,#2a1c13 0,var(--iron) 62%)}
.hero__photo{position:absolute;inset:0;clip-path:circle(calc(var(--d)/2 + var(--e)*120vmax) at 50% 50%);z-index:2}
.hero__photo img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.18 - var(--e)*.18))}
.hero__shade{position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(22,17,14,.92) 0,rgba(22,17,14,.35) 45%,rgba(22,17,14,.15) 100%);opacity:var(--c)}
.hero__stage{position:absolute;inset:0;z-index:4;display:grid;grid-template-rows:1fr var(--d) 1fr;justify-items:center;text-align:center;padding:0 var(--pad);opacity:calc(1 - var(--e)*2.4);transform:scale(calc(1 + var(--e)*.25));pointer-events:none}
.hero__eyebrow{position:absolute;bottom:clamp(30px,6vh,60px);left:0;right:0;justify-content:center;animation:up .9s .1s var(--ease) both}
.hero__h{display:contents;font-weight:800;font-size:clamp(3rem,min(13vw,15vh),11rem);line-height:.9;letter-spacing:-.045em}
.hero__l1{grid-row:1;align-self:end;padding-bottom:.16em;animation:up 1s .15s var(--ease) both}
.hero__gap{grid-row:2}
.hero__l2{grid-row:3;align-self:start;padding-top:.06em;color:var(--saffron);animation:up 1s .3s var(--ease) both}
.hero__l2 em{font-weight:400}
@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.burner{position:absolute;z-index:3;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);--fd:var(--d);--step:12.857deg;--fk:var(--k);opacity:calc(1 - var(--e)*3);animation:pop 1.1s .2s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.7)}}
.burner__ring{position:absolute;inset:-7px;border-radius:50%;border:7px solid #0c0907;box-shadow:0 0 0 1px rgba(255,241,212,.18),inset 0 0 0 1px rgba(255,241,212,.18)}
.burner__glow{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,110,30,.5) 0,rgba(255,110,30,.16) 38%,transparent 62%);opacity:calc(.12 + var(--k)*.88)}
.steam{position:absolute;left:50%;bottom:100%;width:60%;height:70%;transform:translateX(-50%);opacity:calc(var(--k)*.9)}
.steam i{position:absolute;bottom:0;width:26%;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,241,212,.22),transparent);filter:blur(6px);animation:steam 4.500s linear infinite;animation-play-state:paused}
.is-live .steam i{animation-play-state:running}
.steam i:nth-child(1){left:6%}.steam i:nth-child(2){left:38%;animation-delay:-1.500s}.steam i:nth-child(3){left:68%;animation-delay:-3s}
@keyframes steam{0%{transform:translateY(30%) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-90%) scale(1.5) translateX(18%);opacity:0}}
.knob{position:absolute;z-index:5;left:var(--pad);bottom:clamp(22px,5vh,48px);display:flex;align-items:center;gap:14px;opacity:calc(1 - var(--e)*3)}
.knob__dial{width:68px;height:68px;border-radius:50%;background:conic-gradient(from 230deg,var(--saffron) calc(var(--k)*260deg),rgba(255,241,212,.16) 0 260deg,transparent 0);display:grid;place-items:center}
.knob__dial span{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3a2e,#17110d 70%);box-shadow:0 4px 14px rgba(0,0,0,.6);position:relative;transform:rotate(calc(-130deg + var(--k)*260deg))}
.knob__dial span::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:14px;margin-left:-1.500px;border-radius:3px;background:var(--flame)}
.knob__lbl{display:flex;flex-direction:column;gap:4px;font:700 .68rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase}
.knob__lbl span:first-child{opacity:calc(1 - var(--k)*.65)}
.knob__lbl span:last-child{color:var(--flame);opacity:calc(.35 + var(--k)*.65)}
.hero__hint{position:absolute;z-index:5;right:var(--pad);bottom:clamp(30px,6vh,60px);font:700 .72rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;opacity:calc(.8 - var(--k)*2)}
.hero__hint i{display:inline-block;font-style:normal;animation:bob 1.400s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.hero__cover{position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:clamp(40px,9vh,100px);max-width:860px;opacity:var(--c);transform:translateY(calc((1 - var(--c))*40px));pointer-events:none}
.hero.is-cover .hero__cover{pointer-events:auto}
.hero__cover .eyebrow{color:var(--saffron)}
.hero__cover h2{font-weight:800;font-size:clamp(2rem,5.200vw,4.400rem);line-height:.98;letter-spacing:-.035em;margin:.35em 0 .55em;text-wrap:balance}

/* tape */
.tape{position:relative;z-index:5;background:var(--flame);color:var(--ink);overflow:hidden;transform:rotate(-1.500deg) scale(1.03);margin:-22px 0;padding:.5em 0;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.tape__row{display:flex;width:max-content;animation:tape 36s linear infinite}
.tape span{display:flex;align-items:center}
.tape b{font-weight:800;font-size:clamp(1.300rem,3.200vw,2.500rem);letter-spacing:-.02em;text-transform:uppercase;padding:0 .5em}
.tape b:nth-of-type(even){font-family:var(--ital);font-style:italic;font-weight:500;text-transform:none}
.tape i{font-style:normal;font-size:1.100rem}
@keyframes tape{to{transform:translateX(-50%)}}

/* sections */
.sec{position:relative;padding:clamp(80px,11vw,160px) var(--pad) clamp(90px,12vw,180px);border-radius:var(--rad) var(--rad) 0 0;margin-top:calc(var(--rad)*-1)}
.sec--tight{padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(90px,10vw,140px)}
.sec--iron{background:var(--iron)}
.sec--basil{background:var(--basil);margin-top:0;border-radius:0}
.sec--butter{background:var(--butter);color:var(--ink)}
.sec--tomato{background:var(--tomato)}
.sec--basil .eyebrow,.sec--tomato .eyebrow{color:var(--saffron)}
.sec--butter .eyebrow{color:var(--tomato)}
.sec__hd{max-width:980px;margin:0 auto clamp(40px,6vw,80px);text-align:center}
.sec__hd--l{text-align:left;margin:0}
.sec__h{font-weight:800;font-size:clamp(2.600rem,7.400vw,6.200rem);line-height:.92;letter-spacing:-.04em;margin:.28em 0 .3em;text-wrap:balance}
.sec__h em{color:var(--flame)}
.sec--basil .sec__h em,.sec--tomato .sec__h em{color:var(--saffron)}
.sec--butter .sec__h em{color:var(--tomato)}
.sec__lede{max-width:44ch;margin:0 auto;font-size:clamp(1.050rem,1.500vw,1.250rem);opacity:.86;text-wrap:pretty}
.sec__hd--l .sec__lede{margin:0}
.sec__more{text-align:center;margin-top:clamp(50px,6vw,80px)}

/* stations: the hob */
.hob{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,5vw,70px) clamp(16px,3vw,40px)}
.hob__b{display:flex;flex-direction:column;align-items:center;text-align:center;--fk:0;transition:--fk .6s var(--ease),opacity .8s var(--ease),translate .8s var(--ease);transition-delay:0s,calc(var(--n,0)*55ms),calc(var(--n,0)*55ms)}
.hob__top{position:relative;width:min(100%,300px);aspect-ratio:1;container-type:inline-size;margin-bottom:18px}
.hob__fl{--fd:70cqw;--step:25.714deg}
.hob__img{position:absolute;inset:15cqw;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.600cqw #0c0907,0 0 0 2cqw rgba(255,241,212,.2);background:#0c0907}
.hob__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.62);transform:scale(1.02);transition:filter .6s,transform .9s var(--ease)}
.hob__no{font:700 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--saffron)}
.hob__name{font-weight:800;font-size:clamp(1.500rem,3vw,2.300rem);letter-spacing:-.03em;line-height:1.05;margin:.2em 0 .15em}
.hob__blurb{font-size:.95rem;opacity:.78;max-width:24ch}
.hob__b:hover,.hob__b:focus-visible,.hob__b.lit{--fk:1}
.hob__b:hover img,.hob__b:focus-visible img,.hob__b.lit img{filter:none;transform:scale(1.1)}
.hob__b:hover .hob__name,.hob__b.lit .hob__name{color:var(--saffron)}

/* chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto clamp(40px,5vw,64px)}
.chip{padding:.6em 1.150em;border-radius:99px;border:1.500px solid currentColor;background:none;font-weight:700;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover,.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--butter)}
.chips--dark{justify-content:flex-start;margin:28px 0 0}
.chips--dark .chip:hover,.chips--dark .chip.is-on{background:var(--flame);border-color:var(--flame);color:var(--ink)}

/* order tickets */
.rail{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:54px 34px;--sway:0}
.tk{position:relative;padding-top:30px;transform-origin:50% 8px;transform:rotate(calc(var(--tilt,0deg) + var(--sway)*1deg));transition:opacity .8s var(--ease),translate .8s var(--ease),transform .9s cubic-bezier(.3,1.600,.5,1);transition-delay:calc(var(--n,0)*55ms),calc(var(--n,0)*55ms),0s}
.tk:nth-child(3n+1){--tilt:-1.300deg}.tk:nth-child(3n+2){--tilt:.9deg}.tk:nth-child(3n){--tilt:-.5deg}
.tk::before{content:"";position:absolute;left:-17px;right:-17px;top:4px;height:9px;background:linear-gradient(#f4f1ea,#8d877c 55%,#4d4840);box-shadow:0 3px 6px rgba(27,19,16,.35);transform:rotate(calc((var(--tilt,0deg) + var(--sway)*1deg)*-1));transform-origin:50% 4px}
.tk.is-out{display:none}
.tk__clip{position:absolute;z-index:2;left:50%;top:0;width:46px;height:34px;margin-left:-23px;border-radius:6px 6px 10px 10px;background:linear-gradient(#3a302a,#16110e);box-shadow:0 3px 8px rgba(0,0,0,.4)}
.tk__clip::after{content:"";position:absolute;left:50%;top:9px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--flame)}
.tk a{display:block;background:var(--paper);color:var(--ink);padding:26px 18px 34px;box-shadow:0 18px 40px rgba(27,19,16,.22);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;transition:transform .5s var(--ease)}
.tk:hover{transform:rotate(0deg)}
.tk:hover a{transform:translateY(-6px)}
.tk__head{display:flex;justify-content:space-between;font:700 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding-bottom:12px;margin-bottom:14px;border-bottom:1.500px dashed rgba(27,19,16,.4)}
.tk__head span:last-child{color:var(--tomato)}
.tk__img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--iron2)}
.tk__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tk:hover .tk__img img{transform:scale(1.07)}
.tk__title{font-weight:800;font-size:clamp(1.350rem,2vw,1.700rem);line-height:1.08;letter-spacing:-.03em;margin:.75em 0 .4em;text-wrap:balance}
.tk__ex{font-size:.96rem;opacity:.8}
.tk__foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1.500px dashed rgba(27,19,16,.4);font:700 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tk__go{color:var(--tomato)}
.tk__go i{display:inline-block;font-style:normal;transition:transform .3s var(--ease)}
.tk:hover .tk__go i{transform:translateX(5px)}

/* scale / converter */
.scale__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.oven{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,241,212,.18);font-weight:700}
.oven label{font:700 .72rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--flame);margin-right:8px}
.oven input{width:4.200em;background:none;border:0;border-bottom:2px solid var(--flame);font-size:1.700rem;font-weight:800;padding:0;text-align:center;border-radius:0}
.oven output{font-size:1.700rem;font-weight:800;color:var(--saffron)}
.oven b{opacity:.5;margin:0 6px}
.oven small{margin-left:12px;font:700 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.5em .8em;border-radius:99px;background:rgba(255,241,212,.1)}
.lcd{background:linear-gradient(160deg,#3b2f27,#1d1612);border-radius:34px;padding:clamp(18px,3vw,34px);box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,241,212,.16);border:1px solid rgba(255,241,212,.08)}
.lcd__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600}
.lcd input,.lcd select{background:rgba(255,241,212,.08);border:1px solid rgba(255,241,212,.18);border-radius:12px;padding:.6em .8em;min-height:46px}
.lcd input{width:5em}
.lcd select{-webkit-appearance:none;appearance:none;padding-right:2em;background-image:linear-gradient(45deg,transparent 50%,var(--saffron) 50%),linear-gradient(135deg,var(--saffron) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.lcd select option{color:#111}
.lcd__screen{margin-top:16px;border-radius:20px;background:#0b0806;box-shadow:inset 0 0 40px rgba(255,140,30,.12),inset 0 2px 10px #000;padding:clamp(18px,3vw,34px) clamp(18px,3vw,32px);display:flex;align-items:baseline;justify-content:flex-end;gap:.15em;color:var(--saffron);text-shadow:0 0 28px rgba(255,150,30,.55)}
.lcd__num{font-weight:800;font-size:clamp(4rem,11vw,8.500rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.lcd__unit{font-weight:700;font-size:clamp(1.400rem,3vw,2.400rem)}
.lcd__sub{display:flex;justify-content:space-between;margin-top:12px;font:700 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}

/* gear rack */
.rack{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:56px 26px;--sway:0}
.gear{position:relative;padding-top:44px}
.gear::before{content:"";position:absolute;left:-13px;right:-13px;top:6px;height:10px;border-radius:2px;background:linear-gradient(#2a1f19,#0c0907);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.gear a{display:flex;flex-direction:column;align-items:center;text-align:center;transform-origin:50% -30px;transform:rotate(calc(var(--sway)*1.300deg));transition:transform 1s cubic-bezier(.3,1.700,.5,1)}
.gear:hover a{animation:swing 1.600s var(--ease)}
@keyframes swing{0%{transform:rotate(0)}20%{transform:rotate(4deg)}45%{transform:rotate(-3deg)}70%{transform:rotate(1.500deg)}100%{transform:rotate(0)}}
.gear__hook{position:absolute;left:50%;top:-40px;width:18px;height:46px;margin-left:-9px;border:3px solid #0c0907;border-bottom:0;border-radius:10px 10px 0 0}
.gear__hook::after{content:"";position:absolute;left:50%;bottom:-8px;width:9px;height:9px;margin-left:-4.500px;border-radius:50%;background:#0c0907}
.gear__plate{position:relative;flex:none;width:min(100%,230px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fffaf0 0 58%,#f3e3c2 59% 62%,#fff4dc 63%);display:grid;place-items:center;box-shadow:0 22px 44px rgba(60,10,0,.4),inset 0 -6px 14px rgba(120,70,20,.12);margin-bottom:18px}
.gear__plate img{position:absolute;left:19%;top:19%;width:62%;height:62%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s var(--ease)}
.gear:hover .gear__plate img{transform:scale(1.1) rotate(-3deg)}
.gear__meta{font:700 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--saffron)}
.gear__meta b{display:inline-block;margin-right:.7em;padding:.3em .5em;border-radius:5px;background:var(--ink);color:var(--cream)}
.gear__name{font-weight:800;font-size:1.180rem;line-height:1.15;letter-spacing:-.02em;margin:.65em 0 .4em;max-width:19ch;text-wrap:balance}
.gear__rate{display:flex;align-items:center;gap:.5em;font-size:.82rem;font-weight:600;opacity:.92;margin-bottom:14px}
.stars{position:relative;display:inline-block;font-size:.95rem;line-height:1;letter-spacing:1px}
.stars::before{content:"★★★★★";color:rgba(27,19,16,.35)}
.stars::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--pct);overflow:hidden;white-space:nowrap;color:var(--saffron)}
.gear .btn{background:var(--ink);color:var(--cream)}
.gear:hover .btn{background:var(--saffron);color:var(--ink)}

/* feed: the menu board */
.board{max-width:1180px;margin:0 auto;columns:2;column-gap:clamp(30px,5vw,80px)}
.board li{break-inside:avoid}
.board a{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid rgba(255,241,212,.1);transition:padding .35s var(--ease),color .25s}
.board__t{flex:0 1 auto;max-width:68%;font-weight:700;font-size:clamp(1.050rem,1.500vw,1.250rem);line-height:1.25;letter-spacing:-.015em;text-wrap:pretty}
.board__d{flex:1 1 20px;min-width:16px;border-bottom:2px dotted rgba(255,241,212,.35);transform:translateY(-.3em)}
.board__s{flex:0 0 auto;max-width:34%;text-align:right;font:700 .7rem/1.300 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--saffron)}
.board__s i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.board a:hover{color:var(--flame);padding-left:12px}
.board a:hover .board__s i{transform:translate(3px,-3px)}

/* letters */
.letters{position:relative;z-index:1;margin-top:calc(var(--rad)*-1);border-radius:var(--rad) var(--rad) 0 0;overflow:hidden;padding:clamp(100px,14vw,200px) var(--pad);text-align:center;background:var(--iron2)}
.letters__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.letters::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(22,17,14,.35),rgba(22,17,14,.9))}
.letters__in{position:relative;z-index:2;max-width:820px;margin:0 auto}
.letters .eyebrow{color:var(--saffron)}
.join{display:flex;gap:10px;max-width:520px;margin:34px auto 0;padding:8px;border-radius:99px;background:rgba(255,241,212,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,241,212,.25)}
.join input[type=email]{flex:1;min-width:0;background:none;border:0;padding:0 18px;outline:0}
.join input::placeholder{color:rgba(255,241,212,.6)}
.join__msg{min-height:1.600em;margin-top:14px;font-weight:700;color:var(--saffron)}

/* page head (listings, 404) */
.phd{padding:clamp(130px,17vw,220px) var(--pad) calc(clamp(50px,7vw,90px) + var(--rad));max-width:1380px;margin:0 auto}
.phd__h{font-weight:800;font-size:clamp(3.200rem,11vw,9.500rem);line-height:.88;letter-spacing:-.05em;margin:.18em 0 .22em}
.phd__h em{color:var(--flame)}
.phd .sec__lede{margin:0}
.phd--404{min-height:86vh;padding-bottom:120px}
.phd--404 .btn{margin-top:30px}
.sec--list{min-height:50vh}
.pager{display:flex;justify-content:center;gap:8px;margin-top:70px;font-weight:800}
.pager .page-numbers{min-width:46px;height:46px;display:grid;place-items:center;border-radius:99px;border:1.500px solid var(--ink)}
.pager .current,.pager a:hover{background:var(--ink);color:var(--butter)}
.empty{text-align:center;font-size:1.200rem}
.empty a{text-decoration:underline}

/* article */
.art__hd{max-width:1080px;margin:0 auto;padding:clamp(130px,16vw,210px) var(--pad) clamp(36px,5vw,60px);text-align:center}
.art__h{font-weight:800;font-size:clamp(2.400rem,6.600vw,5.600rem);line-height:.96;letter-spacing:-.04em;margin:.35em 0 .35em;text-wrap:balance}
.art__lede{max-width:46ch;margin:0 auto;font-family:var(--ital);font-style:italic;font-size:clamp(1.200rem,2vw,1.600rem);line-height:1.35;color:var(--saffron)}
.art__meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px;font:700 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.art__meta span{padding:.6em .9em;border-radius:99px;background:rgba(255,241,212,.1)}
.art__fig{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.art__fig img{width:100%;aspect-ratio:16/8.500;object-fit:cover;border-radius:clamp(18px,3vw,36px);box-shadow:0 40px 80px rgba(0,0,0,.45)}
.art__body{background:var(--butter2);color:var(--ink);margin-top:clamp(-220px,-16vw,-80px);padding:clamp(140px,21vw,300px) var(--pad) calc(clamp(70px,9vw,130px) + var(--rad));border-radius:var(--rad) var(--rad) 0 0}
.art--page .art__body{margin-top:0;padding-top:clamp(60px,8vw,110px)}
.prose{max-width:68ch;margin:0 auto;font-size:clamp(1.080rem,1.250vw,1.200rem);line-height:1.75}
.prose>*+*{margin-top:1.250em}
.prose>p:first-child::first-letter{float:left;font-weight:800;font-size:4.400em;line-height:.8;padding:.06em .12em 0 0;color:var(--tomato)}
.prose h2{font-weight:800;font-size:clamp(1.700rem,3vw,2.300rem);line-height:1.08;letter-spacing:-.03em;margin-top:1.900em;padding-top:.9em;border-top:2px solid var(--ink)}
.prose h3{font-weight:800;font-size:1.250rem;letter-spacing:-.01em}
.prose a{color:var(--tomato);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:1.500em;margin-top:.5em}
.prose ul li::before{content:"";position:absolute;left:.2em;top:.55em;width:.5em;height:.7em;background:var(--tomato);border-radius:50% 50% 50% 50%/65% 65% 35% 35%}
.prose ol{counter-reset:s}
.prose ol li{counter-increment:s;position:relative;padding-left:3em;margin-top:1em}
.prose ol li::before{content:counter(s);position:absolute;left:0;top:-.1em;width:2.100em;height:2.100em;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--butter);font-weight:800;font-size:.95em}
.prose blockquote{margin:2em 0;padding:.2em 0 .2em 1.200em;border-left:5px solid var(--tomato);font-family:var(--ital);font-style:italic;font-size:1.500em;line-height:1.3;letter-spacing:-.01em}
.prose .recipe{background:var(--paper);padding:28px 26px 40px;margin:2.200em 0;box-shadow:0 18px 40px rgba(27,19,16,.16);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;transform:rotate(-.6deg)}
.prose .recipe h3{font:700 .8rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-bottom:14px;border-bottom:1.500px dashed rgba(27,19,16,.45);color:var(--tomato)}
.prose .recipe li{font-size:.98em}
.timer{position:fixed;z-index:80;right:18px;bottom:18px;width:66px;height:66px;border-radius:50%;background:var(--iron);box-shadow:0 10px 30px rgba(0,0,0,.4);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--ease);pointer-events:none}
.timer.is-on{opacity:1;transform:none}
.timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.timer circle{fill:none;stroke:rgba(255,241,212,.14);stroke-width:4}
.timer .timer__p{stroke:var(--flame);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--tp,0)*100)}
.timer span{font:700 .56rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.timer b{display:block;font:800 1.250rem/1 var(--disp);color:var(--saffron)}

/* footer */
.ft{position:relative;z-index:2;background:var(--iron);border-radius:var(--rad) var(--rad) 0 0;margin-top:calc(var(--rad)*-1);padding:clamp(60px,8vw,110px) var(--pad) 26px;overflow:hidden}
.ft__big{font-weight:800;font-size:clamp(4rem,17.500vw,16rem);line-height:.82;letter-spacing:-.055em;white-space:nowrap}
.ft__big em{color:var(--flame);font-weight:400}
.ft__cols{display:grid;grid-template-columns:1fr 1fr 1.400fr;gap:40px;margin-top:clamp(50px,7vw,90px);max-width:1100px}
.ft__h{font:700 .72rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--saffron);margin-bottom:16px}
.ft li{margin-top:8px}
.ft li a{font-weight:600;transition:color .2s}
.ft li a:hover{color:var(--flame)}
.ft__note p{font-size:.92rem;opacity:.7;max-width:38ch}
.ft__bar{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:22px;border-top:1px solid rgba(255,241,212,.14);font-size:.85rem;opacity:.8}

/* tablet */
@media (max-width:1020px){
	.rail{grid-template-columns:repeat(2,1fr)}
	.tk:nth-child(n){--tilt:.8deg}.tk:nth-child(2n+1){--tilt:-1.100deg}
	.rack{grid-template-columns:repeat(3,1fr)}
	.scale__in{grid-template-columns:1fr}
	.board{columns:1}
}
/* phone + small tablet nav */
@media (max-width:820px){
	.burger{display:block;z-index:2}
	.hero__eyebrow{display:none}
	.logo{z-index:2}
	.nav{position:fixed;inset:-14px calc((100vw - 100%)/-2) auto;height:100vh;height:100dvh;background:var(--iron);display:grid;place-items:center;clip-path:circle(0 at calc(100% - 46px) 46px);transition:clip-path .7s var(--ease);visibility:hidden}
	.nav.is-open{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
	.nav ul{flex-direction:column;align-items:center;gap:6px}
	.nav a{font-size:clamp(2rem,9vw,3rem);font-weight:800;letter-spacing:-.03em;padding:.2em .5em}
	.hd{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,17,14,.94)}
	.ft__cols{grid-template-columns:1fr 1fr}
	.ft__note{grid-column:1/-1}
}
@media (max-width:640px){
	.hero{--d:min(38vh,70vw);height:230vh}
	.hero__h{font-size:min(17vw,12vh)}
	.knob__dial{width:54px;height:54px}.knob__dial span{width:40px;height:40px}
	.hob{grid-template-columns:repeat(2,1fr)}
	.rail{grid-template-columns:1fr;gap:46px;max-width:420px}
	.rack{grid-template-columns:repeat(2,1fr);gap:50px 14px}
	.gear__name{font-size:1rem}
	.gear__rate{flex-direction:column;gap:.3em;font-size:.76rem}
	.gear .btn{font-size:.78rem;padding:.7em .95em}
	.board a{flex-wrap:wrap;gap:4px 10px}
	.board__t{max-width:100%;flex-basis:100%}
	.board__d{display:none}
	.board__s{max-width:100%;text-align:left}
	.join{flex-direction:column;border-radius:26px;padding:10px}
	.join input[type=email]{padding:14px 12px;text-align:center}
	.join .btn{justify-content:center}
	.chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);padding:0 var(--pad) 6px;scrollbar-width:none}
	.chips::-webkit-scrollbar{display:none}
	.chip{flex:0 0 auto}
	.ft__bar{flex-direction:column}
	.prose blockquote{font-size:1.300em}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
	html{scroll-behavior:auto}
	.rv{opacity:1;translate:none}
	.hero{height:100vh;--k:.7}
	.tape__row{transform:none}
}