.house .house-serve{--house-bamboo-lt:#b88252;--house-bamboo:#9a6638;--house-bamboo-dk:#5a3518;--house-wood-end:#3e230f;--house-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.34 0.007' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.03 0 0 0 2.1 -0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");--house-figure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.0035' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.03 0 0 0 2.1 -0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");--slab:calc(var(--cup) * .075);--rim:calc(var(--cup) * .07);--house-orange-rind:#e07a1f;--house-orange-pith:#f8e3be;--house-orange-lt:#ffc65a;--house-orange:#f29a2e;--house-glint:#fff;--house-water:#eef3f2;--house-shade:#2a1c10;--serve-gutter:var(--sp-4);--cup:min(52vw, calc((100svh - var(--lab-nav-h,64px) - var(--sp-6)) / 3.98));--bw:calc(var(--cup) * 1.76);--bh:calc(var(--cup) * 3.9);--cup-x:calc(var(--bw) / 2 - var(--cup) * .04);--cup-y:calc(var(--cup) * .86);--zone-w:calc(var(--cup) * .9);--zone-x:calc(var(--bw) / 2);--zone-y:calc(var(--cup) * 2);--glass:calc(var(--cup) * 1.1);--glass-x:calc(var(--bw) / 2);--glass-y:calc(var(--bh) - var(--cup) * .84);--card-w:min(84vw, 320px);--card-held:1;--strips:90deg;--mark:44px;--card-from:.08;--card-over:.5;--glass-from:.5;--glass-over:.5}@media (min-width:1024px),(orientation:landscape) and (max-height:620px){.house .house-serve{--serve-gutter:var(--sp-12);--cup:min(calc((100vw - var(--serve-gutter) * 2) / 4.7), calc((100svh - var(--lab-nav-h,64px) - var(--sp-12)) / 1.72), 320px);--bw:calc(var(--cup) * 4.7);--bh:calc(var(--cup) * 1.72);--cup-x:calc(var(--cup) * .86);--cup-y:calc(var(--bh) / 2);--zone-w:calc(var(--cup) * 1.12);--zone-x:calc(var(--cup) * 2.42);--glass:calc(var(--cup) * 1.14);--zone-y:calc(var(--bh) / 2);--glass-x:calc(var(--bw) - var(--cup) * .86);--glass-y:calc(var(--bh) / 2);--card-w:min(360px, 42vw);--card-held:1.15;--strips:0deg;--house-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.34' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.03 0 0 0 2.1 -0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");--house-figure:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.05' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.03 0 0 0 2.1 -0.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");--card-from:.25;--card-over:.75;--glass-from:.12;--glass-over:.8}}@media (max-width:1023px) and (orientation:landscape) and (max-height:620px){.house .house-serve{--serve-gutter:var(--sp-4);--card-w:min(300px, 40vw);--card-held:1}}@layer components{.house .serve-track{background:var(--jd-ink);color:var(--jd-oat);position:relative}.lab[data-motion=live] .house .serve-track{height:320svh}.house .serve-pin{padding:var(--sp-16) var(--serve-gutter);background:var(--jd-ink);place-items:center;display:grid;overflow:clip}.lab[data-motion=live] .house .serve-pin{height:100svh;padding:var(--lab-nav-h) var(--serve-gutter) env(safe-area-inset-bottom);position:sticky;top:0}.house .serve-board-box{z-index:1;pointer-events:none;will-change:transform;min-height:0;transform:translate3d(calc(var(--leave,0) * -1 * (50vw + var(--bw) / 2 + var(--cup) * .5)), 0, 0);place-items:center;display:grid;position:relative}.house .serve-after{margin:var(--sp-12) 0 0;font-family:var(--font-display);font-size:var(--fs-h2);letter-spacing:-.01em;text-align:center;text-wrap:balance;color:var(--jd-oat);line-height:1.02}.lab[data-motion=live] .house .serve-after{z-index:0;inset:var(--lab-nav-h) var(--serve-gutter) 0;opacity:clamp(0, calc((var(--leave,0) - .12) * 2.2), 1);transform:translate3d(calc((1 - var(--leave,0)) * 6vw), 0, 0);pointer-events:none;place-items:center;margin:0;display:grid;position:absolute}.house .serve-board{width:var(--bw);height:var(--bh);pointer-events:auto;border-radius:calc(var(--cup) * .9);background:linear-gradient(155deg, color-mix(in oklab, var(--house-glint) 16%, transparent), transparent 42%, color-mix(in oklab, var(--house-wood-end) 30%, transparent)), var(--house-grain), var(--house-figure), linear-gradient(160deg, var(--house-bamboo-lt), var(--house-bamboo) 65%);box-shadow: inset calc(var(--cup) * .012) calc(var(--cup) * .016) calc(var(--cup) * .02) color-mix(in oklab, var(--house-glint) 34%, transparent), inset calc(var(--cup) * -.014) calc(var(--cup) * -.02) calc(var(--cup) * .03) color-mix(in oklab, var(--house-wood-end) 62%, transparent),  0 calc(var(--slab) * .5) 0 var(--house-bamboo-dk), 0 var(--slab) 0 var(--house-wood-end),  0 calc(var(--slab) + 2px) 4px #000c, 0 calc(var(--cup) * .24) calc(var(--cup) * .34) calc(var(--cup) * -.08) #000000c7;background-size:auto,640px 640px,1100px 1100px,auto;flex:none;position:relative}@supports (color:lab(0% 0 0)){.house .serve-board{box-shadow: inset calc(var(--cup) * .012) calc(var(--cup) * .016) calc(var(--cup) * .02) color-mix(in oklab, var(--house-glint) 34%, transparent), inset calc(var(--cup) * -.014) calc(var(--cup) * -.02) calc(var(--cup) * .03) color-mix(in oklab, var(--house-wood-end) 62%, transparent),  0 calc(var(--slab) * .5) 0 var(--house-bamboo-dk), 0 var(--slab) 0 var(--house-wood-end),  0 calc(var(--slab) + 2px) 4px lab(0% 0 0/.8), 0 calc(var(--cup) * .24) calc(var(--cup) * .34) calc(var(--cup) * -.08) lab(0% 0 0/.78)}}.house .serve-board:before{content:"";z-index:0;inset:var(--rim);border-radius:calc(var(--cup) * .9 - var(--rim));background:linear-gradient(155deg, color-mix(in oklab, var(--house-wood-end) 26%, transparent), transparent 55%), var(--house-grain), var(--house-figure), linear-gradient(160deg, var(--house-bamboo), color-mix(in oklab, var(--house-bamboo) 80%, var(--house-bamboo-dk)) 70%);box-shadow: inset calc(var(--cup) * .03) calc(var(--cup) * .045) calc(var(--cup) * .05) color-mix(in oklab, var(--house-wood-end) 88%, transparent), inset calc(var(--cup) * .012) calc(var(--cup) * .018) calc(var(--cup) * .012) #00000073,  inset calc(var(--cup) * -.014) calc(var(--cup) * -.02) calc(var(--cup) * .012) color-mix(in oklab, var(--house-glint) 30%, transparent),  0 0 0 1px color-mix(in oklab, var(--house-wood-end) 70%, transparent), calc(var(--cup) * .006) calc(var(--cup) * .008) 0 1px color-mix(in oklab, var(--house-glint) 26%, transparent);background-position:0 0,37px 91px,210px 55px,0 0;background-size:auto,640px 640px,1100px 1100px,auto;position:absolute}@supports (color:lab(0% 0 0)){.house .serve-board:before{box-shadow: inset calc(var(--cup) * .03) calc(var(--cup) * .045) calc(var(--cup) * .05) color-mix(in oklab, var(--house-wood-end) 88%, transparent), inset calc(var(--cup) * .012) calc(var(--cup) * .018) calc(var(--cup) * .012) lab(0% 0 0/.45),  inset calc(var(--cup) * -.014) calc(var(--cup) * -.02) calc(var(--cup) * .012) color-mix(in oklab, var(--house-glint) 30%, transparent),  0 0 0 1px color-mix(in oklab, var(--house-wood-end) 70%, transparent), calc(var(--cup) * .006) calc(var(--cup) * .008) 0 1px color-mix(in oklab, var(--house-glint) 26%, transparent)}}.house .serve-cup{z-index:2;left:var(--cup-x);top:var(--cup-y);width:var(--cup);height:var(--cup);margin:calc(var(--cup) / -2) 0 0 calc(var(--cup) / -2);will-change:transform;transform:translate3d(0, calc((1 - var(--arrive,1)) * -88svh), 0) scale(calc(1 + (1 - var(--arrive,1)) * .16));position:absolute}.house .house-serve[data-gl=off] .latte-stage{scale:.8}.house .serve-ghost{z-index:3;width:var(--mark);height:var(--mark);margin:calc(var(--mark) / -2) 0 0 calc(var(--mark) / -2);color:var(--jd-red);background:color-mix(in oklab, var(--jd-oat) 46%, transparent);border:1px solid color-mix(in oklab, var(--jd-red) 55%, transparent);box-shadow:0 4px 10px -4px color-mix(in oklab, var(--house-shade) 50%, transparent);opacity:0;pointer-events:none;will-change:transform, opacity;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%}.house .serve-glass{z-index:2;left:var(--glass-x);top:var(--glass-y);width:var(--glass);height:var(--glass);margin:calc(var(--glass) / -2) 0 0 calc(var(--glass) / -2);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform;transform:translate3d(calc((1 - clamp(0, (var(--arrive,1) - var(--glass-from)) / var(--glass-over), 1)) * (50vw + var(--bw) / 2 - var(--glass-x) + var(--glass))), 0, 0);background:radial-gradient(circle closest-side, transparent 88%, color-mix(in oklab, var(--house-glint) 92%, transparent) 89.5%, color-mix(in oklab, var(--house-water) 26%, transparent) 91%, color-mix(in oklab, var(--house-shade) 22%, transparent) 95.5%, color-mix(in oklab, var(--house-glint) 96%, transparent) 98.2%, color-mix(in oklab, var(--house-glint) 20%, transparent) 100%);box-shadow: calc(var(--cup) * .08) calc(var(--cup) * .11) calc(var(--cup) * .1) calc(var(--cup) * -.02) color-mix(in oklab, var(--house-shade) 34%, transparent);border-radius:50%;position:absolute}.house .serve-glass:before{content:"";z-index:-1;background:radial-gradient(circle closest-side, transparent 80%, color-mix(in oklab, var(--house-glint) 38%, transparent) 91%, transparent 100%);width:100%;height:100%;filter:blur(calc(var(--cup) * .016));border-radius:50%;position:absolute;top:7%;left:5%;-webkit-mask-image:conic-gradient(from 80deg,#0000 0deg,#000 40deg 70deg,#0000 110deg);mask-image:conic-gradient(from 80deg,#0000 0deg,#000 40deg 70deg,#0000 110deg)}.house .serve-glass[data-stir]{cursor:grabbing}.house .serve-glass-water{isolation:isolate;background: radial-gradient(circle closest-side, transparent 61%, color-mix(in oklab, var(--house-glint) 55%, transparent) 63%, color-mix(in oklab, var(--house-glint) 12%, transparent) 67%, color-mix(in oklab, var(--house-shade) 12%, transparent) 70%, transparent 76%),  radial-gradient(circle at 70% 76%, color-mix(in oklab, var(--house-shade) 30%, transparent), transparent 58%), radial-gradient(circle closest-side, transparent 72%, color-mix(in oklab, var(--house-shade) 26%, transparent) 100%),  var(--house-figure), color-mix(in oklab, var(--house-water) 40%, var(--house-bamboo-lt));box-shadow:inset calc(var(--cup) * .02) calc(var(--cup) * .03) calc(var(--cup) * .06) color-mix(in oklab, var(--house-shade) 30%, transparent);border-radius:50%;position:absolute;inset:6%;overflow:hidden}.house .serve-glass-water:after{content:"";z-index:0;width:21%;height:21%;rotate:-9deg;translate:var(--slosh-x,0%) var(--slosh-y,0%);--pane:color-mix(in oklab, var(--house-glint) 82%, transparent);background:linear-gradient(var(--pane), var(--pane)) 0 0 / 46% 46% no-repeat, linear-gradient(var(--pane), var(--pane)) 100% 0 / 46% 46% no-repeat, linear-gradient(var(--pane), var(--pane)) 0 100% / 46% 46% no-repeat, linear-gradient(var(--pane), var(--pane)) 100% 100% / 46% 46% no-repeat;filter:blur(.6px);pointer-events:none;position:absolute;top:14%;left:17%}.lab[data-motion=live] .house .serve-glass-water:after{display:none}.house .serve-glass-rings{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.house .serve-glass-slice{z-index:1;width:56%;height:56%;filter:drop-shadow(calc(var(--cup) * .012) calc(var(--cup) * .022) calc(var(--cup) * .02) color-mix(in oklab, var(--house-shade) 55%, transparent));will-change:transform;position:absolute;top:22%;left:22%;transform:translate(-6%,5%)rotate(28.6479deg)}.house .glass-slice-art{width:100%;height:100%;display:block}.house .glass-rind{fill:var(--house-orange-rind)}.house .glass-pith,.house .glass-core{fill:var(--house-orange-pith)}.house .glass-flesh-in{stop-color:var(--house-orange-lt)}.house .glass-flesh-out{stop-color:var(--house-orange)}.house .glass-seg{stroke:var(--house-orange);stroke-width:1px;stroke-linejoin:round}.house .serve-glass-slice:after{content:"";background:radial-gradient(ellipse 46% 30% at 32% 24%, color-mix(in oklab, var(--house-glint) 50%, transparent), transparent 100%), radial-gradient(circle at 74% 78%, color-mix(in oklab, var(--house-shade) 28%, transparent), transparent 55%);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--house-glint) 35%, transparent);border-radius:50%;position:absolute;inset:0}.house .glass-sac{fill:none;stroke:color-mix(in oklab, var(--house-orange-pith) 55%, transparent);stroke-width:.7px;stroke-linecap:round}.house .serve-scrim{z-index:4;background:color-mix(in oklab, var(--jd-ink) 72%, transparent);opacity:0;pointer-events:none;transition:opacity .42s var(--ease-out);position:absolute;inset:-100vmax}.house .house-serve[data-card=held] .serve-scrim{opacity:1;pointer-events:auto;cursor:pointer}.house .serve-cards{z-index:1;left:var(--zone-x);top:var(--zone-y);width:var(--zone-w);aspect-ratio:1.45;margin:calc(var(--zone-w) / -2.9) 0 0 calc(var(--zone-w) / -2);perspective:1100px;will-change:translate;translate:0 calc((1 - clamp(0, (var(--arrive,1) - var(--card-from)) / var(--card-over), 1)) * (50svh + var(--bh) / 2 - var(--zone-y) + var(--zone-w)));transition:z-index 0s .7s;position:absolute}.house .house-serve[data-card=held] .serve-cards{z-index:5;transition:none}.house .serve-card{z-index:1;width:var(--card-w);aspect-ratio:1.45;cursor:pointer;color:var(--jd-ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transform-style:preserve-3d;translate:-50% -50%;scale:var(--card-down,.66);transition:translate .64s var(--ease-out), scale .64s var(--ease-out), rotate .7s var(--ease-out), transform .64s var(--ease-out);padding:0;position:absolute;top:50%;left:50%;transform:rotate(-3deg)}.house .serve-card[data-state=held]{translate:calc(-50% + var(--held-x,0px)) calc(-50% + var(--held-y,0px));scale:var(--card-held);rotate:y var(--flip,180deg);transition:translate .64s var(--ease-out), scale .64s cubic-bezier(.2, 1.35, .4, 1), rotate .7s var(--ease-out), transform .64s var(--ease-out);transform:rotate(0)}.house .serve-card:focus-visible{outline:3px solid var(--jd-ink);outline-offset:4px;border-radius:7px}.house .serve-card[data-state=held]:focus-visible{outline-color:var(--jd-paper)}.house .serve-face{padding:var(--sp-4) var(--sp-6);background:var(--jd-paper);backface-visibility:hidden;box-shadow:1px 1px 2px color-mix(in oklab, var(--house-shade) 45%, transparent), var(--card-sx,9px) 13px 18px -6px color-mix(in oklab, var(--house-shade) 55%, transparent);border-radius:7px;align-content:center;display:grid;position:absolute;inset:0}.house .serve-back{--card-sx:-9px}.house .serve-front{color:var(--jd-red);justify-items:center}.house .serve-front-mark{width:58%;height:auto}.house .serve-front-est{margin:var(--sp-1) 18% 0 0;font-family:var(--font-display);font-size:var(--fs-label);letter-spacing:.08em;justify-self:end}.house .serve-back{gap:var(--sp-2);text-align:center;transform:rotateY(180deg)}.house .serve-quote{font-family:var(--font-display);font-size:var(--fs-lead);text-wrap:balance;line-height:1.2}.house .serve-quote[data-long]{font-size:var(--fs-body);line-height:1.3}.house .serve-quote:before{content:"“"}.house .serve-quote:after{content:"”"}.house .serve-quote:lang(ro):before{content:"„"}.house .serve-cite{font-family:var(--font-display);font-style:italic;font-size:var(--fs-label);color:var(--jd-clay);justify-self:end}.house .serve-cite:before{content:"— "}.house .serve-cards[data-cue] .serve-cue{animation:serve-cue-sweep 1.9s var(--ease-out) both}.house .serve-cards[data-cue] .serve-card{animation:serve-card-peek 1.9s var(--ease-out) both}@keyframes serve-cue-sweep{0%{opacity:0;transform:translate3d(calc(var(--zone-w) * -.3), calc(var(--zone-w) * .19), 0) scale(1.3)}16%{opacity:1;transform:translate3d(calc(var(--zone-w) * -.3), calc(var(--zone-w) * .19), 0) scale(1)}66%{opacity:1;transform:translate3d(calc(var(--zone-w) * .3), calc(var(--zone-w) * .19), 0) scale(1)}82%,to{opacity:0;transform:translate3d(calc(var(--zone-w) * .3), calc(var(--zone-w) * .19), 0) scale(1.3)}}@keyframes serve-card-peek{0%,16%{rotate:y 0deg}66%{rotate:y 34deg}90%,to{rotate:y 0deg}}.house .serve-glass[data-cue] .serve-stir{animation:2.4s linear both serve-stir}@keyframes serve-stir{0%{opacity:0;transform:translate3d(0, calc(var(--glass) * -.2), 0) scale(1.3)}14%{opacity:1;transform:translate3d(calc(var(--glass) * 0), calc(var(--glass) * -.2), 0) scale(1)}21%{opacity:1;transform:translate3d(calc(var(--glass) * .141), calc(var(--glass) * -.141), 0) scale(1)}28%{opacity:1;transform:translate3d(calc(var(--glass) * .2), calc(var(--glass) * 0), 0) scale(1)}35%{opacity:1;transform:translate3d(calc(var(--glass) * .141), calc(var(--glass) * .141), 0) scale(1)}42%{opacity:1;transform:translate3d(calc(var(--glass) * 0), calc(var(--glass) * .2), 0) scale(1)}49%{opacity:1;transform:translate3d(calc(var(--glass) * -.141), calc(var(--glass) * .141), 0) scale(1)}56%{opacity:1;transform:translate3d(calc(var(--glass) * -.2), calc(var(--glass) * 0), 0) scale(1)}63%{opacity:1;transform:translate3d(calc(var(--glass) * -.141), calc(var(--glass) * -.141), 0) scale(1)}70%{opacity:1;transform:translate3d(calc(var(--glass) * 0), calc(var(--glass) * -.2), 0) scale(1)}77%{opacity:1;transform:translate3d(calc(var(--glass) * .141), calc(var(--glass) * -.141), 0) scale(1)}84%{opacity:1;transform:translate3d(calc(var(--glass) * .2), calc(var(--glass) * 0), 0) scale(1)}to{opacity:0;transform:translate3d(calc(var(--glass) * .2), calc(var(--glass) * 0), 0) scale(1.3)}}.house .house-serve[data-stage=arriving] .serve-ghost,.house .house-serve[data-stage=away] .serve-ghost,.house .house-serve[data-card=held] .serve-ghost{visibility:hidden}}@media (prefers-reduced-motion:reduce){.house .serve-card,.house .serve-card[data-state=held],.house .serve-scrim{transition:none}}
