@font-face{font-family:"Roux Archivo";src:url("assets/fonts/Archivo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Roux Archivo";src:url("assets/fonts/Archivo-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Roux Archivo";src:url("assets/fonts/Archivo-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Roux Archivo";src:url("assets/fonts/Archivo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
/* Hero composition owner: one transparent device over a shared food subject. */
.hero{--hero-height:885px;--device-width:350px;--device-height:738px;--device-radius:54px;--glass-stroke:rgba(255,255,255,.95);text-align:center;padding-top:38px;overflow:hidden}.hero .eyebrow{display:inline-block;font-size:12px;letter-spacing:0;padding:9px 15px;border-radius:30px;box-shadow:0 3px 18px #00000009;margin-bottom:21px;color:#777}.hero h1{font-size:clamp(40px,4.2vw,56px);font-weight:400;line-height:1.03;letter-spacing:-.05em;margin:0 auto 24px}.hero-copy{font-size:18px;letter-spacing:-.025em;line-height:1.4}.hero-art{position:relative;max-width:1040px;height:var(--hero-height);margin:110px auto 0;isolation:isolate}.dish{position:absolute;width:850px;left:50%;top:-78px;transform:translateX(-50%);filter:drop-shadow(0 22px 20px #2820180d);animation:arrive 1.4s var(--ease) both}.dish>img{width:100%;height:auto;display:block}.steam{position:absolute;left:30%;top:14%;width:39%;height:42%;overflow:visible;pointer-events:none}.steam path{transform-origin:center bottom;animation:steam-rise 7s linear infinite;opacity:0}.steam path:nth-child(2){animation-delay:-2.4s}.steam path:nth-child(3){animation-delay:-4.8s}.hero-device{font-family:"Roux Archivo",sans-serif;font-synthesis:none;position:absolute;left:50%;top:0;transform:translateX(-50%);width:var(--device-width);height:var(--device-height);border:2px solid #dfdfdfa8;border-radius:var(--device-radius);background:linear-gradient(120deg,#fff4 0%,#fff0 35%,#fff0 67%,#fff4 100%);box-shadow:inset 0 0 0 5px #ffffff91,inset 0 0 0 7px #d7d7d764,0 14px 25px #00000008;animation:arrive 1s var(--ease) both}.hero-device:after{content:"";position:absolute;inset:9px;border-radius:calc(var(--device-radius) - 9px);border:1px solid #fff9;pointer-events:none}.device-island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:101px;height:28px;background:linear-gradient(135deg,#363630,#191916);border-radius:30px;box-shadow:inset 0 1px 2px #0009}.device-island:after{content:"";position:absolute;right:13px;top:9px;width:7px;height:7px;border-radius:50%;background:#263331;box-shadow:inset 0 0 2px black}.device-home{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);height:4px;width:93px;background:#58574e66;border-radius:5px}.hero-caption{position:absolute;display:flex;align-items:center;gap:14px;text-align:left;font-size:17px;letter-spacing:-.5px;background:#ffffff75;backdrop-filter:blur(12px);padding:18px 24px;border:1px solid #fff9;border-radius:24px;animation:arrive 1.6s var(--ease) both}.hero-caption small{display:block;font-size:12px;letter-spacing:-.1px;color:#777;margin-top:6px}.caption-left{left:45px;top:240px}.caption-right{right:30px;top:540px}.caption-dot{width:9px;height:9px;border-radius:50%;border:1px solid #adb49d;box-shadow:0 0 0 5px #d9ddcf30}.hero-art:after{content:"";position:absolute;bottom:0;left:0;right:0;height:125px;background:linear-gradient(transparent,#fff);pointer-events:none}.editorial{margin-top:35px}
@media(max-width:700px){.hero{--device-width:278px;--device-height:590px;--device-radius:43px;--hero-height:720px;padding-top:38px}.hero h1{font-size:42px;letter-spacing:-.05em;padding:0 15px}.hero .eyebrow{font-size:10px;margin-bottom:22px}.hero-copy{font-size:15px;padding:0 30px}.hero-art{margin-top:78px}.dish{width:610px;top:-38px}.device-island{width:80px;height:23px;top:17px}.hero-caption{font-size:12px;gap:8px;padding:12px 14px;border-radius:18px}.hero-caption small{font-size:9px}.caption-left{left:6px;top:225px}.caption-right{right:7px;top:585px}.hero-art:after{height:65px}.editorial{margin-top:35px}}
@media(prefers-reduced-motion:reduce){.steam{display:none}}

/* Recipe preview mirrors Roux's cover, ingredient rows, and floating bottom controls. */
.device-status{position:absolute;inset:26px 31px auto;display:flex;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:-.3px}.device-status span+span{font-size:10px;letter-spacing:1px}.sheet-handle{position:absolute;top:62px;left:50%;width:31px;height:4px;transform:translateX(-50%);background:#9c9da575;border-radius:8px}.recipe-cover{position:absolute;top:77px;left:20px;right:20px;height:384px;border-radius:23px;overflow:hidden;border:1px solid #ffffff25;background:rgba(255,255,255,.035)}.cover-caption{position:absolute;left:14px;right:14px;bottom:18px;color:white;text-shadow:0 1px 6px #201b1760;isolation:isolate}.cover-caption:before{content:"";position:absolute;z-index:-1;inset:-22px -14px -18px;backdrop-filter:blur(24px) saturate(.85);-webkit-backdrop-filter:blur(24px) saturate(.85);mask-image:linear-gradient(transparent,#000 18%);-webkit-mask-image:linear-gradient(transparent,#000 18%);background:rgba(63,53,43,.10);pointer-events:none}.cover-caption h2{font-size:25px;letter-spacing:-.5px;font-weight:700;line-height:1.13;margin:0 0 10px}.cover-caption p{font-size:11px;margin:0 0 18px;color:#ffffffd9}.cover-actions{display:flex;gap:7px}.cover-actions button{flex:1;padding:11px 8px;border-radius:30px;border:1px solid #ffffff45;background:#ffffff32;color:white;box-shadow:inset 0 1px 2px #fff4;font-size:12px;backdrop-filter:blur(8px)}.cover-actions button:first-child{background:#211f1ee8;border-color:#48443d}.cover-actions span{font-size:9px;margin-right:4px}.recipe-glass{position:absolute;top:469px;left:20px;right:20px;bottom:22px;border-radius:23px;background:rgba(255,255,255,.68);border:1px solid #ffffff55;backdrop-filter:blur(32px) saturate(.72);-webkit-backdrop-filter:blur(32px) saturate(.72);box-shadow:inset 0 1px 0 white,inset 0 -1px 0 #ffffff60,0 6px 20px #23201505;text-align:left;padding:19px 18px;overflow:hidden;transition:box-shadow .3s}.recipe-glass h3{font-size:12px;font-weight:500;letter-spacing:-.4px;margin:0 0 12px}.ingredient{display:grid;grid-template-columns:67px 1fr;padding:12px 0;border-bottom:1px solid #6d6d642d;font-size:12px;color:#45453f}.ingredient:last-child{border:0}.ingredient span:first-child{color:#42423d}.device-controls{position:absolute;left:26px;right:26px;bottom:27px;display:flex;gap:7px;z-index:2}.device-controls:before{content:"";position:absolute;inset:-22px -6px -10px;z-index:-1;pointer-events:none;background:linear-gradient(#fff0,#eeeef2c9 45%);filter:blur(8px)}.device-controls button{height:48px;width:48px;border-radius:50%;background:#ffffff95;border:1px solid #c9c9c64d;box-shadow:inset 0 1px 2px white,0 7px 18px #3535350d;backdrop-filter:blur(15px);font-size:23px;font-weight:300}.device-controls .serving-control{flex:1;border-radius:40px;font-size:11px;line-height:1.3}.serving-control strong{font-weight:500;display:block}.serving-control small{display:block;color:#888;font-size:9px}.device-controls button:last-child{font-size:11px;letter-spacing:2px}.hero-device.details-active .recipe-glass{background:rgba(255,255,255,.88)}.hero-caption{box-shadow:0 8px 35px #38382a06}.hero-caption:after{content:"";position:absolute;width:45px;height:1px;background:linear-gradient(90deg,#bfc2b06b,transparent);top:50%;right:-45px}.caption-right:after{right:auto;left:-45px;transform:rotate(180deg)}
@media(max-width:700px){.device-status{inset:24px 24px auto;font-size:10px}.device-status span+span{font-size:8px}.sheet-handle{top:53px;width:26px;height:3px}.recipe-cover{top:66px;left:17px;right:17px;height:302px;border-radius:20px}.cover-caption{left:10px;right:10px;bottom:13px}.cover-caption h2{font-size:21px;margin-bottom:7px}.cover-caption p{font-size:9px;margin-bottom:13px}.cover-actions button{font-size:10px;padding:9px 5px}.recipe-glass{top:376px;left:17px;right:17px;bottom:19px;border-radius:20px;padding:15px}.recipe-glass h3{font-size:10px;margin-bottom:8px}.ingredient{font-size:10px;grid-template-columns:55px 1fr;padding:10px 0}.device-controls{left:22px;right:22px;bottom:24px;gap:6px}.device-controls button{height:39px;width:39px;font-size:20px}.device-controls .serving-control{font-size:10px}.serving-control small{font-size:8px}.hero-caption{font-size:11px;padding:12px}.hero-caption small{font-size:8px}.caption-left{left:4px;top:174px;max-width:142px}.caption-right{right:12px;top:610px}.caption-left:after{width:20px;right:-20px}}

/* Fine material grain is local to the frosted surfaces; it never blurs live media. */
.recipe-glass:before,.cover-caption:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");mix-blend-mode:multiply}.recipe-glass h3,.recipe-glass .ingredient{position:relative}.recipe-glass h3{font-weight:600}.cover-caption h2{font-size:27px;text-wrap:balance}.cover-caption p{color:#fffffff2}.device-controls:before{background:#ffffff40;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);mask-image:linear-gradient(transparent,#000 60%);-webkit-mask-image:linear-gradient(transparent,#000 60%)}
@media(max-width:700px){.cover-caption h2{font-size:22px}}

/* A second masked glass layer spreads defocus above the title without a color ramp. */
.cover-actions button{box-shadow:inset 0 1px 1px #ffffff80,0 3px 8px #00000008}.cover-actions button:first-child{background:#25231fac;color:white;border-color:#ffffff38;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* Native iOS status chrome uses the system face; app content uses bundled Archivo. */
.device-status{font-family:-apple-system,BlinkMacSystemFont,sans-serif}.hero-device button{font-family:inherit}.ingredient{letter-spacing:0}.cover-caption p{font-weight:400}.cover-actions button{font-weight:500}

/* The clear cover is the only unfrosted window; phone chrome sits on white glass. */
.device-status:before{content:"";position:absolute;z-index:-1;inset:-12px -14px -12px;border-radius:28px;background:#ffffff85;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.device-status{isolation:isolate}.recipe-cover{background:transparent}.cover-actions button:first-child{border-color:#ffffff55}.device-controls button{background:#ffffffb3}

/* Status chrome uses proportional vector symbols, not font-dependent glyphs. */
.device-status{inset:28px 30px auto;font-size:12px;line-height:12px;align-items:center}.device-status .status-icons{display:flex;align-items:center;gap:4px;letter-spacing:0}.status-icons svg{display:block;width:15px;height:11px;fill:currentColor}.status-icons svg:nth-child(2){fill:none;width:14px}.status-icons svg:last-child{fill:none;width:23px}.device-status:before{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.recipe-glass{box-shadow:inset 0 1px 0 #ffffff60,0 6px 20px #23201505}.cover-actions button{box-shadow:inset 0 1px 1px #ffffff35,0 3px 8px #00000004}.device-controls button{box-shadow:inset 0 1px 2px #ffffff85,0 5px 14px #35353517}
@media(max-width:700px){.device-status{inset:24px 25px auto;font-size:10px;line-height:11px}.device-status .status-icons{gap:3px}.status-icons svg{width:12px;height:9px}.status-icons svg:nth-child(2){width:11px}.status-icons svg:last-child{width:19px}}
/* Continuous app surface, with one transparent aperture for the cover image. */
.hero-device{isolation:isolate;background:transparent}
.hero-device:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:calc(var(--device-radius) - 2px);background:rgba(239,239,243,.58);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 346 734' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='cut'%3E%3Crect width='346' height='734' fill='white'/%3E%3Crect x='20' y='77' width='306' height='384' rx='23' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='346' height='734' fill='white' mask='url(%23cut)'/%3E%3C/svg%3E");mask-size:100% 100%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 346 734' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='cut'%3E%3Crect width='346' height='734' fill='white'/%3E%3Crect x='20' y='77' width='306' height='384' rx='23' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='346' height='734' fill='white' mask='url(%23cut)'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;pointer-events:none}
.recipe-glass{background:rgba(255,255,255,.78)}
/* Restore the cover's progressive glass while retaining the app-surface cutout. */
.recipe-cover:before{content:"";position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(8px) saturate(.95);-webkit-backdrop-filter:blur(8px) saturate(.95);mask-image:linear-gradient(transparent 22%,#000 88%);-webkit-mask-image:linear-gradient(transparent 22%,#000 88%)}
.cover-caption{isolation:auto}
.cover-caption:before{z-index:0;inset:-32px -14px -18px;background:rgba(63,53,43,.10);backdrop-filter:blur(24px) saturate(.85);-webkit-backdrop-filter:blur(24px) saturate(.85);mask-image:linear-gradient(transparent,#000 55%);-webkit-mask-image:linear-gradient(transparent,#000 55%)}
.cover-caption>h2,.cover-caption>p,.cover-caption>.cover-actions{position:relative;z-index:1}
/* Registered copy of the same dish provides reliable progressive defocus across browsers. */
.recipe-cover:before{inset:-42px;background:none;z-index:1;filter:none;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);mask-image:linear-gradient(transparent 24%,#000 65%);-webkit-mask-image:linear-gradient(transparent 24%,#000 65%)}
@media(max-width:700px){.recipe-cover:before{inset:-33px;background-size:610px 610px;background-position:center -71px;filter:blur(11px)}}

/* Ingredient surface is separated by tone; its outline stays nearly imperceptible. */
.recipe-glass,.hero-device.details-active .recipe-glass{border-color:rgba(255,255,255,.22);box-shadow:none}

/* Clip every glass layer to the same rounded food window. */
.recipe-cover{border:0;border-radius:23px;clip-path:inset(0 round 23px)}
@media(max-width:700px){.recipe-cover{border-radius:20px;clip-path:inset(0 round 20px)}}

@media(max-width:700px){.hero-device:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 586' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='cut'%3E%3Crect width='274' height='586' fill='white'/%3E%3Crect x='17' y='66' width='240' height='302' rx='20' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='274' height='586' fill='white' mask='url(%23cut)'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 274 586' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='cut'%3E%3Crect width='274' height='586' fill='white'/%3E%3Crect x='17' y='66' width='240' height='302' rx='20' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='274' height='586' fill='white' mask='url(%23cut)'/%3E%3C/svg%3E")}}

/* Material finishing: quiet dotted rules and reflective pill controls. */
.recipe-glass,.hero-device.details-active .recipe-glass{background:rgba(255,255,255,.56);backdrop-filter:blur(40px) saturate(.8);-webkit-backdrop-filter:blur(40px) saturate(.8)}
.ingredient{border-bottom:0;background-image:radial-gradient(circle,rgba(80,80,75,.17) .7px,transparent .9px);background-size:4px 2px;background-position:left bottom;background-repeat:repeat-x}
.ingredient:last-child{background-image:none}
.cover-actions button,.cover-actions button:first-child{position:relative;overflow:hidden;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.48);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1px rgba(255,255,255,.16),0 3px 8px rgba(30,20,10,.1)}
.cover-actions button:first-child{background:rgba(45,36,30,.26)}
.cover-actions button:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(165deg,rgba(255,255,255,.24),transparent 45%,transparent 75%,rgba(255,255,255,.08))}

/* Cover contrast and soft, light ingredient material. */
.cover-caption h2{text-shadow:0 3px 28px rgba(35,24,16,.42)}
.cover-actions button,.cover-actions button:first-child{border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 2px rgba(255,255,255,.22),0 3px 8px rgba(30,20,10,.08)}
.cover-actions button:first-child{background:rgba(25,21,18,.78)}
.cover-actions button:before{opacity:.55}
.recipe-glass,.hero-device.details-active .recipe-glass{background:rgba(255,255,255,.9)}

/* The device owns the final clip for every internal glass layer. */
.hero-device{overflow:hidden}

/* Status chrome follows the screen safe-area inset. */
.device-status{left:37px;right:37px}
.status-icons svg:nth-child(2){width:15px;height:12px}
@media(max-width:700px){.device-status{left:31px;right:31px}.status-icons svg:nth-child(2){width:12px;height:10px}}

/* Round the inner control material without creating a backdrop root on the phone. */
.device-controls:before{border-radius:0 0 30px 30px;clip-path:inset(0 round 0 0 30px 30px);filter:none}
.hero-device:before{backdrop-filter:blur(40px) saturate(.8);-webkit-backdrop-filter:blur(40px) saturate(.8)}

/* Center icon geometry independently of text baselines. Back: Phosphor caret-left. */
.device-controls button[data-hero-back],.device-controls button[data-hero-more]{display:grid;place-items:center;padding:0;line-height:1;letter-spacing:0;flex-shrink:0}
.device-controls button>svg{display:block;width:20px;height:20px}
@media(max-width:700px){.device-controls button>svg{width:18px;height:18px}}

.device-controls button[data-hero-back]>svg{width:16px;height:16px}
@media(max-width:700px){.device-controls button[data-hero-back]>svg{width:15px;height:15px}}

/* Restrained hover tilt; individual rotate keeps exploration positioning intact. */
.hero-art{perspective:none}
.hero .hero-device{rotate:0 1 0 0deg;transition:background .25s,rotate .85s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.hero-device{rotate:none!important;transition:none}}

/* Give the tilting cover its own sharp source; backdrop sampling changes in 3D. */
.recipe-cover{background-color:#fff;background-image:none;background-repeat:no-repeat;background-size:850px 850px;background-position:center -155px}
@media(max-width:700px){.recipe-cover{background-size:610px 610px;background-position:center -104px}}

/* Track promptly, then settle gently when the pointer leaves. */
.hero .hero-device[data-tilting]{transition:background .25s,rotate .18s cubic-bezier(.2,.8,.2,1)}
/* Stable local footer material avoids transformed backdrop sampling seams. */
.device-controls:before{background:linear-gradient(transparent,rgba(249,249,250,.94) 60%);backdrop-filter:none;-webkit-backdrop-filter:none;mask-image:none;-webkit-mask-image:none}
.device-controls button{background:rgba(255,255,255,.96);backdrop-filter:none;-webkit-backdrop-filter:none}

/* A small illuminated reel badge introduces Roux's video understanding. */
.hero .hero-badge{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;margin-bottom:23px;color:#45443f;font-size:13px;font-weight:500;letter-spacing:-.025em;line-height:1.2;border:1px solid rgba(255,255,255,.94);background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 2px 5px #24201603;isolation:isolate}
.hero-badge:before{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-1;background:radial-gradient(ellipse at 17% 50%,#e0d9b13d,transparent 60%);filter:blur(9px);pointer-events:none}
.hero-badge:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffffb3 47%,transparent 64%);background-size:300% 100%;animation:badge-sheen 8s ease-in-out infinite;opacity:.7}
.badge-reel{position:relative;display:grid;place-items:center;width:24px;height:24px;flex:none;color:#92916c}
.badge-reel svg{width:23px;height:23px;filter:drop-shadow(0 1px 4px #b4aa7840)}
.badge-spark{position:absolute;right:-3px;bottom:-1px;font-size:11px;color:#b4a46d;text-shadow:0 0 8px #d8c89080;animation:badge-glint 5s ease-in-out infinite;background:#fff;border-radius:50%;line-height:12px}
@keyframes badge-sheen{0%,55%{background-position:100% 0;opacity:0}65%{opacity:.65}85%,100%{background-position:0 0;opacity:0}}
@keyframes badge-glint{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.12);opacity:1}}
[data-paused] .hero-badge:after,[data-paused] .badge-spark{animation-play-state:paused}
@media(max-width:700px){.hero .hero-badge{font-size:12px;gap:8px;padding:9px 15px 9px 11px}}

/* Soft moving color lives behind the quiet white badge. */
@property --badge-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.hero .hero-badge{padding:12px 20px;background:transparent}
.hero-badge:before{inset:-4px;z-index:-2;background:conic-gradient(from var(--badge-angle),#e6a99e,#e8d09c,#aed5c3,#b9b5e4,#e6a99e);filter:blur(8px);opacity:.8;animation:badge-orbit 12s linear infinite}
.hero-badge:after{inset:0;z-index:-1;background:rgba(255,255,255,.96);opacity:1;animation:none;box-shadow:inset 0 1px 0 #fff}
@keyframes badge-orbit{to{--badge-angle:360deg}}
[data-paused] .hero-badge:before{animation-play-state:paused}

/* Tighter badge and a more prominent single hero statement. */
.hero .hero-badge{padding:9px 15px;transition:transform .65s cubic-bezier(.22,1,.36,1);transform:perspective(700px) rotateX(0) rotateY(0) rotateZ(0)}
@media(hover:hover) and (pointer:fine){.hero .hero-badge:hover{transform:perspective(700px) rotateX(4deg) rotateY(-6deg) rotateZ(-1deg);transition-duration:.3s}}
.hero h1{font-size:clamp(40px,4vw,48px);line-height:1.02;letter-spacing:-.05em;margin-bottom:0}
@media(max-width:700px){.hero .hero-badge{padding:8px 13px}.hero h1{font-size:clamp(34px,7.8vw,44px)}}
@media(prefers-reduced-motion:reduce){.hero .hero-badge,.hero .hero-badge:hover{transform:none;transition:none}}
[data-paused] .hero .hero-badge{transform:none}

/* Fine-tune hero spacing and compact badge proportions. */
.hero{padding-top:24px}
.hero .hero-badge{padding:7px 12px;font-size:12px}
.hero-art{margin-top:84px}
@media(max-width:700px){.hero{padding-top:32px}.hero .hero-badge{padding:6px 11px;font-size:11px}.hero-art{margin-top:48px}}

/* The kitchen scene fades into the canvas; its registered copy stays clear inside the glass cover. */
.dish{filter:none;animation:none;mask-image:radial-gradient(ellipse 46% 35% at 50% 47%,#000 0%,#000 32%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.18) 76%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 46% 35% at 50% 47%,#000 0%,#000 32%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.18) 76%,transparent 96%)}
.dish:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.dish>video{display:block;width:100%;height:auto}
.recipe-cover>video{position:absolute;width:850px;height:850px;max-width:none;left:50%;top:-155px;transform:translateX(-50%);object-fit:cover;pointer-events:none}
.cover-caption{z-index:2}
@media(max-width:700px){.recipe-cover>video{width:610px;height:610px;top:-104px}.recipe-cover:before{filter:none;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}}

/* Keep both copies of the scene aligned as the kitchen moves lower. */
.dish{top:-54px}
.recipe-cover>video{top:-131px}
@media(max-width:700px){.dish{top:-20px}.recipe-cover>video{top:-86px}}

/* A faint defocused outer scene extends beyond the clear oval. */
.scene-haze{position:absolute;left:50%;top:-54px;width:850px;transform:translateX(-50%) scaleX(1.42);opacity:.46;filter:blur(54px);mask-image:radial-gradient(ellipse 49% 37% at 50% 47%,#000 15%,#000d 35%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.065) 78%,transparent 100%);pointer-events:none}
.scene-haze video,.scene-haze img{display:block;width:100%;height:auto}
@media(max-width:700px){.scene-haze{width:610px;top:-20px;filter:blur(40px)}}

/* HeroScene owns responsive atmosphere spread independently of the clear cover. */
.hero-art{--scene-spread:1.42;--scene-softness:54px}
.scene-haze{transform:translateX(-50%) scaleX(var(--scene-spread));filter:blur(var(--scene-softness))}
@media(min-width:1100px){.hero-art{--scene-spread:1.85;--scene-softness:68px}}
@media(min-width:1440px){.hero-art{--scene-spread:2.3;--scene-softness:82px}}
@media(max-width:700px){
 .hero{--hero-height:610px}
 .hero-art{--scene-spread:1.02;--scene-softness:38px}
 .hero-device{transform:translateX(-50%) scale(.85);transform-origin:50% 0}
 .dish{top:-17px;transform:translateX(-50%) scale(.85);transform-origin:50% 0}
 .scene-haze{top:-17px;width:518.5px}
}
@media(max-width:420px){.hero-art{--scene-spread:.86;--scene-softness:34px}}
@media(max-width:700px){.dish{mask-image:radial-gradient(ellipse 35% 35% at 50% 47%,#000 0%,#000 32%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.18) 76%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 35% 35% at 50% 47%,#000 0%,#000 32%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.18) 76%,transparent 96%)}}

/* The complete non-mobile composition settles as one unit, preserving video alignment. */
@media(min-width:701px){
 .hero-art{transform:scale(var(--hero-scroll-scale,1.22));transform-origin:50% 0}
 .scene-haze{opacity:var(--hero-edge-opacity,.46)}
 .dish{mask-image:radial-gradient(ellipse var(--hero-mask-width,46%) 35% at 50% 47%,#000 0%,#000 32%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.18) 76%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse var(--hero-mask-width,46%) 35% at 50% 47%,#000 0%,#000 32%,rgba(0,0,0,.92) 43%,rgba(0,0,0,.58) 58%,rgba(0,0,0,.18) 76%,transparent 96%)}
}
@media(prefers-reduced-motion:reduce){.hero-art{transform:none}}

.hero-value{max-width:440px;margin:18px auto 0;padding:0 20px;color:#77777d;font-size:16px;line-height:1.45;letter-spacing:-.02em;text-wrap:balance}
@media(max-width:700px){.hero-value{max-width:330px;font-size:14px;margin-top:15px}}

/* Exit begins only after half the phone has crossed the viewport's top. */
.hero-device{translate:0 var(--phone-exit-y,0px);opacity:var(--phone-exit-opacity,1)}
.dish{translate:0 var(--scene-exit-y,0px);opacity:var(--scene-exit-opacity,1)}
.scene-haze{translate:0 var(--scene-exit-y,0px);opacity:var(--hero-edge-opacity,.46)}
@media(max-width:700px){.hero-device{transform:translateX(-50%) scale(calc(.85*var(--hero-exit-scale,1)))}.dish{transform:translateX(-50%) scale(calc(.85*var(--hero-exit-scale,1)))}}

/* Animated zoom must not invite browser scroll anchoring corrections. */
.hero{overflow-anchor:none}

/* Render glass from local material rather than resampling a moving backdrop.
   Static filter layers can be rasterized once and composited with the device. */
.hero-art{will-change:transform}
.hero .hero-device,.hero .hero-device[data-tilting]{transition:none}
.hero-device:before{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(239,239,243,.88)}
.recipe-cover:before{backdrop-filter:none;-webkit-backdrop-filter:none;background-image:url('assets/kitchen-simmer.jpg');background-size:850px 850px;background-position:center -89px;filter:blur(32px)}
.cover-caption:before{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(63,53,43,.10)}
.recipe-glass,.hero-device.details-active .recipe-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94)}
.cover-actions button,.cover-actions button:first-child{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:700px){.recipe-cover:before{background-size:610px 610px;background-position:center -53px;filter:blur(26px)}}

@media(min-width:701px) and (max-width:1099px){.hero{--hero-height:790px}.hero-art{transform:scale(1)}}

/* Mobile composition: a readable phone with side breathing room and a wider kitchen vignette. */
@media(max-width:540px){
 .hero{--hero-height:720px;padding-top:26px}
 .hero h1{max-width:410px;padding:0 24px;font-size:clamp(30px,8.2vw,38px);line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
 .hero-value{margin-top:16px;max-width:310px;line-height:1.5}
 .hero-art{margin-top:34px;transform-origin:50% 0;transform:scale(1.28);--scene-spread:1.12;--scene-softness:32px}
 .dish{mask-image:radial-gradient(ellipse 46% 36% at 50% 45%,#000 22%,#000e 40%,#0006 65%,transparent 96%);-webkit-mask-image:radial-gradient(ellipse 46% 36% at 50% 45%,#000 22%,#000e 40%,#0006 65%,transparent 96%)}
 .hero-art:after{display:none}
}
@media(max-width:360px){.hero{--hero-height:640px}.hero h1{padding-inline:16px;font-size:26px;letter-spacing:-.05em}}

/* Keep the moving phone and soft scene on stable compositor layers. */
.hero-device{will-change:transform,rotate,opacity}
.scene-haze{will-change:transform,opacity}

/* Optical centering: the pot sits to the right within the source frame. */
.dish,.scene-haze{margin-left:-11px}
@media(max-width:700px){.dish,.scene-haze{margin-left:-7px}}