@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Archivo+Black&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#efe7d4;--ink:#293424;--green:#738047;--dark:#26372b;--cream:#f6efdc;--red:#ba4935;--mono:'DM Mono',monospace;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);font-size:14px;line-height:1.5}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.16;z-index:50;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.28' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}button{font:inherit;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #c65b39;outline-offset:5px}.site-header{max-width:1440px;padding:27px 45px 15px;margin:auto;display:flex;justify-content:space-between;align-items:center}.identity{font-size:14px;letter-spacing:-.4px;font-weight:600;text-decoration:none}.identity span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.4px;font-weight:400;margin-top:2px}.header-links{display:flex;gap:24px;font-size:11px}.page{max-width:1390px;margin:0 auto;display:grid;grid-template-columns:minmax(180px,1fr) minmax(530px,700px) minmax(150px,.75fr);gap:30px;align-items:center;padding:20px 45px 42px}.intro{padding-bottom:110px}.edition{font:9px var(--mono);letter-spacing:1.8px;text-transform:uppercase}.intro h1{font:clamp(40px,4.3vw,61px)/.96 var(--serif);letter-spacing:-1.7px;margin:21px 0 25px}.intro h1 em{font-weight:400}.intro p{font-size:12px;line-height:1.75;max-width:225px;color:#60664f}.stamp{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid var(--red);color:var(--red);width:67px;height:78px;border-radius:45% 45% 40% 40%;transform:rotate(-9deg);margin-top:23px;font-family:var(--serif);line-height:1.1}.stamp b{font-weight:400;font-size:28px}.stamp span{font-family:var(--mono);font-size:8px;letter-spacing:1px}.machine-wrap{position:relative;padding-bottom:15px}.machine-wrap:after{content:'';position:absolute;bottom:2px;left:3%;right:0;height:18px;border-radius:50%;background:#483e2929;filter:blur(5px)}.machine{position:relative;padding:20px 23px 23px;background:linear-gradient(100deg,#7c8951,#7a864c 45%,#6c7941 95%);border:2px solid #34452c;border-radius:12px 12px 5px 5px;box-shadow:inset 3px 3px 1px #c4c69380,inset -6px 0 1px #3e522c66,7px 5px 0 #536037,9px 7px 0 #34452c;z-index:1}.machine:before{content:'';position:absolute;inset:8px;pointer-events:none;border:1px solid #d1d1a53b;border-radius:5px}.machine-top{position:relative;border:2px solid #34412b;background:var(--cream);box-shadow:inset 0 0 0 3px #ddd5bb,0 2px 0 #34412b66;border-radius:5px;padding:11px 8px 9px;margin-bottom:19px;text-align:center}.machine-top .tiny{font:8px var(--mono);letter-spacing:2.8px;display:block}.machine-top h2{font:44px/.98 var(--serif);letter-spacing:-1.3px;margin:6px 0 3px}.machine-top h2 em{font-weight:400}.machine-top .sub{font:8px var(--mono);text-transform:uppercase;letter-spacing:2.5px}.machine-body{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:17px}.glass{border:4px solid #333d2c;border-bottom-width:6px;border-radius:8px 8px 3px 3px;background:#ced0b7;box-shadow:inset 4px 4px 7px #141c2055,0 0 0 2px #bfc194;position:relative;padding:6px 12px 8px;overflow:hidden}.glass:after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#ffffff13 25.5%,#ffffff1c 31%,transparent 31.5%,transparent 60%,#ffffff12 60.5%,transparent 74%)}.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative;padding:5px 0 11px;margin-bottom:12px}.shelf:last-child{margin-bottom:0}.shelf:after{content:'';position:absolute;bottom:4px;left:-12px;right:-12px;height:9px;background:linear-gradient(#eeebd9 20%,#a7ab94 30%,#2f3a2a 55%,#263322 80%);box-shadow:0 5px 6px #1920163b}.product{background:none;border:0;padding:0;cursor:pointer;position:relative;min-width:0;display:flex;align-items:center;flex-direction:column}.product .item-image{height:160px;width:100%;object-fit:contain;display:block;filter:drop-shadow(4px 5px 2px #21271730);transform-origin:center bottom;transition:transform .25s}.product:hover .item-image{transform:translateY(-6px) rotate(-3deg)}.product:active .item-image{transform:translateY(-3px) rotate(2deg)}.product-label{position:relative;z-index:2;background:#e8e5cf;border:1px solid #a7ab92;width:100%;font-family:var(--mono);font-size:8px;padding:3px 0 4px;display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.3;margin-top:4px;box-shadow:0 2px 0 #3b4833}.code{font-size:9px;font-weight:500}.product-label:after{content:'';width:4px;height:4px;background:#ce6a3c;border-radius:50%;box-shadow:0 0 3px #ffb55f;position:absolute;right:4px;top:6px}.controls{display:flex;flex-direction:column;gap:13px}.screen-frame{padding:7px;background:#c9ccb0;border:2px solid #34412b;box-shadow:inset 1px 1px #eeeecc;border-radius:3px}.screen{padding:10px 6px;background:#263b2c;box-shadow:inset 2px 3px 4px #101b1280;color:#c4d599;text-align:center;font:10px/1.6 var(--mono);min-height:67px;display:flex;flex-direction:column;justify-content:center}.screen .led{font-size:7px;letter-spacing:1px;color:#a6b88e;margin-bottom:5px}.screen strong{font-size:12px;font-weight:400}.keypad{border:1px solid #465531;background:#5b6a3c;padding:9px 8px 5px;border-radius:3px;box-shadow:inset 1px 1px 3px #273e2666}.keypad-title{font:7px var(--mono);letter-spacing:.7px;color:#eee9d5;text-align:center;margin-bottom:9px}.selection{display:flex;width:100%;align-items:center;gap:7px;background:transparent;border:0;padding:0;margin:0 0 9px;cursor:pointer;text-align:left}.selection .key{display:flex;align-items:center;justify-content:center;background:linear-gradient(#f7efda,#c8c9b0);border:1px solid #313d2a;border-radius:5px;box-shadow:0 3px 0 #263622,inset 0 1px 0 #fff8e8;min-width:31px;height:27px;font:11px var(--mono)}.selection .key-text{font-size:9px;color:#fff4d9;line-height:1.2}.selection:hover .key{background:#fff9e6}.selection:active .key,.selection.selected .key{transform:translateY(2px);box-shadow:0 1px 0 #263622;background:#e3bc67}.coin-unit{margin-top:auto;border:1px solid #39482c;padding:9px 8px;background:linear-gradient(110deg,#b5baa2,#d1d0b8,#a2aa91);border-radius:3px;display:flex;justify-content:space-between;align-items:center;box-shadow:inset 0 1px #ebe8d3}.coin{width:27px;height:27px;border-radius:50%;border:3px double #3d4938;background:linear-gradient(45deg,#7f8b72,#d4d5bd);position:relative}.coin:after{content:'';height:17px;width:3px;background:#293629;position:absolute;left:9px;top:2px;transform:rotate(20deg)}.coin-note{font:6px/1.5 var(--mono);text-align:center}.coin-note strong{display:block;font-size:9px}.machine-bottom{display:grid;grid-template-columns:1fr 128px;gap:17px;margin-top:18px}.bottom-left{display:grid;grid-template-columns:82px 1fr;gap:13px;align-items:center}.machine-sticker{border:1px solid #475336;background:#e5dec0;box-shadow:1px 2px 0 #465734;transform:rotate(-3deg);text-align:center;padding:8px 5px;font:8px/1.3 var(--mono)}.machine-sticker strong{display:block;font:28px/.9 var(--serif);margin:4px 0;color:#526442}.delivery{position:relative;background:#2c3328;border:4px solid #b5b69b;border-radius:3px;box-shadow:0 0 0 1px #35432d,inset 0 8px 10px #10160f;min-height:69px;overflow:hidden}.delivery:after{content:'';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#abae96;font:9px var(--mono);letter-spacing:5px;background:linear-gradient(0deg,#68735966,transparent 80%);border-bottom:2px solid #2e3927}.delivery.dispensing:after{animation:flap .65s ease}.drop-item{position:absolute;z-index:2;left:calc(50% - 30.8px);width:61.6px;height:86.8px;object-fit:contain;opacity:0}.delivery.dispensing .drop-item{animation:drop .75s ease-in forwards}.bottom-right{display:flex;flex-direction:column;justify-content:space-between;align-items:center}.free-label{background:var(--red);color:#fff1d3;font:8px var(--mono);padding:3px 7px;transform:rotate(2deg);border:1px solid #7c3627;box-shadow:1px 1px #273a2466}.vent{width:70px;height:26px;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#35462c 3px,#35462c 5px);opacity:.8}.machine-footer{font:7px var(--mono);letter-spacing:1.5px;color:#e3dec1;text-align:center;margin:18px 0 -8px}.foot{position:absolute;bottom:-11px;width:34px;height:11px;background:#697152;border:1px solid #35402c;border-radius:0 0 2px 2px;z-index:0}.foot.left{left:25px}.foot.right{right:20px}.guide{align-self:center;padding-top:30px}.guide .vertical{font-family:var(--serif);font-size:22px;color:var(--red);writing-mode:vertical-rl;letter-spacing:6px;margin:0 0 26px 10px}.guide h2{font:10px var(--mono);text-transform:uppercase;letter-spacing:1px;font-weight:400;margin:0 0 15px}.guide p{font-size:11px;line-height:1.8;max-width:160px;color:#60664f}.guide .number{color:var(--red);font-family:var(--mono);margin-right:5px}.guide .note{font:italic 20px/1.2 var(--serif);margin-top:25px}.plain-menu{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:22px;max-width:180px}.plain-menu button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:0;font-size:10px;color:#535f45}.page-footer{display:flex;justify-content:space-between;gap:20px;max-width:1350px;margin:0 auto;padding:9px 45px 22px;font:8px var(--mono);letter-spacing:.6px;color:#6e735b}.page-footer .light{display:inline-block;width:5px;height:5px;background:#7a854b;border-radius:50%;margin-right:7px}.selecting .selection{pointer-events:none}.selecting .product{pointer-events:none}.product.dispensing .item-image{animation:wobble .5s ease}dialog{border:1px solid #5a6549;border-radius:6px;background:#f7f2e4;padding:0;color:var(--ink);width:min(780px,calc(100% - 32px));max-height:calc(100dvh - 48px);box-shadow:9px 9px 0 #263d2822,0 25px 100px #18221a30}dialog::backdrop{background:#233121a6;backdrop-filter:blur(5px)}.dialog-top{position:sticky;top:0;background:#f7f2e4;z-index:2;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d5d8c5;padding:14px 23px}.dialog-top span{font:9px var(--mono);letter-spacing:1px}.close{border:1px solid #c7ccb4;background:none;border-radius:50%;width:32px;height:32px;font-size:22px;cursor:pointer}.dialog-body{padding:28px 36px 35px}.dialog-body .eyebrow{font:9px var(--mono);text-transform:uppercase;letter-spacing:1px;color:#858b70}.dialog-body h2{font:58px/1 var(--serif);letter-spacing:-1.5px;font-weight:400;margin:13px 0 20px}.dialog-body h3{font:29px/1.2 var(--serif);font-weight:400;margin:30px 0 12px}.dialog-body p,.dialog-body li{font-size:14px;line-height:1.8;color:#5e6855}.dialog-body .lead{font-size:18px;line-height:1.5;max-width:580px}.dialog-body .project-cover{width:100%;max-height:340px;object-fit:contain;background:#e5e8db;margin:15px 0}.dialog-body .portrait{width:110px;height:140px;object-fit:cover;float:right;border:7px solid #fff;transform:rotate(4deg);margin:0 0 20px 25px}.dialog-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.dialog-actions a,.dialog-actions button{font-size:11px;padding:10px 15px;background:#34462d;color:#f9f2dc;border:0;border-radius:3px;text-decoration:none;cursor:pointer}.job{padding:16px 0;border-bottom:1px solid #d4d8c3;display:grid;grid-template-columns:1fr auto;gap:15px}.job strong{font-size:14px;font-weight:500}.job small{display:block;font-size:12px;color:#667158;margin-top:3px}.job time{font:9px var(--mono);color:#667158;padding-top:4px}.skill-group{margin-top:24px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{font-size:12px;padding:7px 11px;border:1px solid #cdd3bc;border-radius:2px;background:#efeedf}.receipt-bottom{margin-top:32px;padding-top:14px;border-top:1px dashed #bec5ac;display:flex;justify-content:space-between;font:8px var(--mono);letter-spacing:.8px;color:#7b846d}.noscript{padding:20px;text-align:center}.intro .tiny-cat{font-family:var(--mono);font-size:14px;letter-spacing:2px;margin-top:30px;color:#81896c}@keyframes wobble{25%{transform:rotate(-7deg)}60%{transform:rotate(7deg)}100%{transform:rotate(0)}}@keyframes drop{0%{opacity:0;transform:translateY(-70px) rotate(-10deg)}20%{opacity:1}75%{transform:translateY(8px) rotate(14deg);opacity:1}100%{transform:translateY(12px) rotate(8deg);opacity:1}}@keyframes flap{50%{transform:rotateX(45deg);opacity:.3}}@media(min-width:1500px){.page{padding-top:40px}.product .item-image{height:185px}}@media(max-width:1100px){.page{grid-template-columns:180px minmax(450px,620px);gap:25px;padding:25px 35px 40px;justify-content:center}.guide{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:25px;padding-top:10px}.guide .vertical{writing-mode:horizontal-tb;margin:0;letter-spacing:3px}.guide h2,.guide .note{display:none}.guide p{margin:0;max-width:250px}.plain-menu{margin:0;max-width:200px}.machine{padding:17px 18px 20px}.machine-body,.machine-bottom{grid-template-columns:1fr 111px;gap:14px}.product .item-image{height:146px}.machine-top h2{font-size:38px}.selection .key-text{font-size:8px}.intro h1{font-size:48px}}@media(max-width:760px){.site-header{padding:20px 22px 5px}.header-links{gap:16px;font-size:10px}.page{display:flex;flex-direction:column;padding:22px 24px 30px;gap:25px}.intro{padding:0;max-width:540px;width:100%}.intro h1{font-size:42px;margin:12px 0 14px;max-width:340px}.intro h1 br{display:none}.intro p{max-width:340px;font-size:12px;margin:0}.intro .stamp,.intro .tiny-cat{display:none}.machine-wrap{width:min(100%,540px)}.guide{display:block;max-width:540px;width:100%;padding:0}.guide .vertical{display:none}.guide p{max-width:none;display:inline-block;margin:0 20px 8px 0}.plain-menu{max-width:none;margin-top:12px}.page-footer{padding:0 24px 23px;font-size:7px}.edition{font-size:8px}.machine-top h2{font-size:38px}.machine-body,.machine-bottom{grid-template-columns:minmax(0,1fr) 102px;gap:12px}.machine{padding:17px 16px 20px}.glass{padding:4px 7px 6px}.shelf{gap:4px}.product .item-image{height:145px}.product-label{font-size:6px;gap:3px}.product-label:after{display:none}.code{font-size:8px}.machine-sticker{font-size:6px}.machine-sticker strong{font-size:24px}.bottom-left{grid-template-columns:65px 1fr;gap:10px}.machine-top .tiny{font-size:7px;letter-spacing:2px}.machine-top .sub{font-size:7px;letter-spacing:1.8px}.selection .key{min-width:29px;height:27px}.keypad{padding:8px 6px 4px}.selection{gap:5px}.screen{font-size:8px}.screen strong{font-size:10px}.dialog-body{padding:22px}.dialog-body h2{font-size:45px}.dialog-body .lead{font-size:16px}.job{gap:10px}.job time{font-size:8px}.job strong{font-size:13px}.job small{font-size:11px}}@media(max-width:430px){.page{padding-left:15px;padding-right:20px}.machine{padding-left:12px;padding-right:12px}.machine-body,.machine-bottom{grid-template-columns:minmax(0,1fr) 89px;gap:9px}.product .item-image{height:128px}.selection .key-text{font-size:7px}.selection .key{min-width:24px;height:26px;font-size:10px}.keypad-title{font-size:6px;letter-spacing:0}.screen-frame{padding:5px}.coin-note{font-size:5px}.coin-note strong{font-size:7px}.machine-top h2{font-size:32px}.machine-top{margin-bottom:15px}.machine-top .sub{font-size:6px}.bottom-left{grid-template-columns:54px 1fr;gap:8px}.machine-sticker{padding:7px 3px}.machine-sticker strong{font-size:21px}.machine-footer{font-size:6px;letter-spacing:1px}.free-label{font-size:7px}.delivery{min-height:65px}.product-label{font-size:5.5px}.code{font-size:7px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

@media(min-width:1101px){.page{max-width:1280px;grid-template-columns:minmax(180px,1fr) minmax(440px,550px) minmax(150px,.8fr);gap:35px;padding-top:12px;padding-bottom:25px}.site-header{padding-top:20px;padding-bottom:9px}.machine-body,.machine-bottom{grid-template-columns:minmax(0,1fr) 111px;gap:14px}.machine{padding:16px 18px 20px}.machine-top{padding:8px;margin-bottom:15px}.machine-top h2{font-size:36px}.machine-top .tiny{font-size:7px}.machine-top .sub{font-size:7px;letter-spacing:2px}.product .item-image{height:135px}.shelf{margin-bottom:8px}.glass{padding-left:9px;padding-right:9px}.selection .key-text{font-size:8px}.keypad{padding-left:6px;padding-right:6px}.selection{gap:5px}.bottom-left{grid-template-columns:65px 1fr;gap:10px}.machine-sticker{font-size:6px}.machine-sticker strong{font-size:23px}.machine-footer{margin-top:14px}.intro{padding-bottom:65px}.intro h1{font-size:54px}.screen{min-height:61px}}

/* Original vector mark with soft airbrushed color; quiet, scattered accents. */
body{position:relative;isolation:isolate}.site-header,.page,.page-footer{position:relative;z-index:1}.air-star{position:absolute;pointer-events:none;user-select:none;width:65px;height:65px;z-index:-1}.intro,.guide{position:relative}.personal-logo{display:block;width:112px;height:112px;object-fit:contain;transform:rotate(5deg);margin:0 0 26px -5px}.intro-star{width:83px;height:83px;bottom:5px;right:7px;transform:rotate(-15deg);opacity:.9}.guide-star{width:68px;height:68px;bottom:-80px;left:42px;transform:rotate(17deg)}.page-star-pink{left:22%;top:13px;width:48px;height:48px;transform:rotate(-16deg)}.page-star-yellow{right:3%;top:3%;width:39px;height:39px;transform:rotate(21deg)}.header-star{left:42%;top:13px;width:38px;height:38px;transform:rotate(-11deg);z-index:0}
@media(max-width:1100px){.guide .personal-logo{width:83px;height:83px;margin:0 10px 0 0;flex-shrink:0}.guide-star{bottom:-20px;left:auto;right:0;width:43px;height:43px}.intro-star{right:-6px;bottom:-30px}.page-star-pink{left:19%;top:4px}.page-star-yellow{right:1%;top:2px}}
@media(max-width:760px){.page-star-pink{left:auto;right:30px;top:20px;width:49px;height:49px}.page-star-yellow{display:none}.header-star{left:45%;top:10px;width:27px;height:27px}.intro-star{bottom:-18px;right:4px;width:44px;height:44px}.intro h1{max-width:300px}.intro .edition{max-width:280px}.guide .personal-logo{width:85px;height:85px;float:left;margin:2px 24px 16px 0}.guide{padding-top:15px}.guide p{display:block;margin-bottom:6px;font-size:10px}.plain-menu{clear:both;padding-top:8px}.guide-star{right:5px;bottom:0;width:40px;height:40px}.page-footer{clear:both}}
.glass{display:flex;flex-direction:column}.shelf{flex:1;align-items:end}

.machine-top.name-banner{padding:0;background:#6bc7db;aspect-ratio:4.7;overflow:hidden}.banner-art{display:block;width:100%;height:100%;object-fit:fill}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.apple-art{display:block;width:min(205px,100%);height:auto;aspect-ratio:1;object-fit:contain;margin:24px 0 0;transform:rotate(-5deg)}.intro{padding-bottom:0}.intro-star{bottom:8px;right:-8px;width:54px;height:54px}@media(max-width:1100px){.apple-art{width:165px}.intro-star{right:-14px;bottom:0;width:42px;height:42px}}@media(max-width:760px){.apple-art{width:140px;margin:15px 0 0;transform:rotate(-5deg)}.intro-star{right:30px;bottom:30px;width:52px;height:52px}}

.machine-top.name-banner{background:var(--paper)}

.machine-top.quiet-nameplate{padding:0;min-height:78px;display:flex;align-items:center;justify-content:center;background:var(--paper)}.machine-top.quiet-nameplate h2{font-family:var(--sans);font-size:23px;font-weight:500;line-height:1.3;letter-spacing:3px;text-transform:uppercase;color:#34452c;margin:0;padding:20px 12px}@media(max-width:760px){.machine-top.quiet-nameplate{min-height:72px}.machine-top.quiet-nameplate h2{font-size:20px;letter-spacing:2.2px}}@media(max-width:430px){.machine-top.quiet-nameplate{min-height:64px}.machine-top.quiet-nameplate h2{font-size:18px;letter-spacing:1.8px}}
/* Taller cabinet proportions with a generous lower service panel. */
.machine-wrap{container-type:inline-size}
.machine{display:flex;flex-direction:column;min-height:138cqw}
.machine-bottom{flex:1;min-height:34cqw;padding-top:8px;padding-bottom:18px}
.bottom-left{grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:start;gap:28px}
.machine-sticker{width:90px;justify-self:start;padding:14px 8px;font-size:7px}
.machine-sticker strong{font-size:30px}
.delivery{width:90%;justify-self:end;min-height:78px}
.bottom-right{height:100%;padding-top:4px}
.machine-footer{margin-top:8px}
@media(max-width:760px){.machine-sticker{width:72px;padding:10px 6px;font-size:6px}.machine-sticker strong{font-size:25px}.machine-bottom{min-height:34cqw;padding-bottom:12px}.delivery{width:95%;min-height:65px}.bottom-left{gap:24px}}
/* A quiet tiled storefront, with the functional machine in the foreground. */
.page{isolation:isolate}
.street-backdrop{position:absolute;inset:0 15px 0;z-index:-2;pointer-events:none;overflow:hidden;border-radius:4px;background-color:#e9e6d7;background-image:linear-gradient(#a8ae9729 1px,transparent 1px),linear-gradient(90deg,#a8ae9729 1px,transparent 1px);background-size:48px 24px;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 93%,transparent)}
.street-shutter{position:absolute;left:24%;right:19%;top:18px;bottom:48px;border:7px solid #b2bba12b;border-top:12px solid #a4af963b;background:repeating-linear-gradient(to bottom,#ccd5c2a3 0px,#dce1ceaa 5px,#a2af994d 6px,#e3e6d3a8 8px);box-shadow:inset 0 12px 16px #65745914}
.street-floor{position:absolute;bottom:0;height:50px;width:100%;background:linear-gradient(#c5c6b5,#e5dfcd);border-top:2px solid #acb6a04d}
.intro{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;padding-top:90px;position:relative}
.intro h1{margin-top:0}.intro p{margin-top:0}.station-bench{display:block;width:calc(100% + 35px);max-width:340px;height:auto;object-fit:contain;margin-top:auto;margin-left:-15px;margin-bottom:2px;filter:drop-shadow(0 8px 4px #48513b20)}
.intro-star{bottom:235px;right:0}.guide{background:#efe7d4c9;box-shadow:0 0 35px 25px #efe7d4b3;border-radius:40px}
@media(min-width:1101px){.intro h1{font-size:49px}.intro{padding-bottom:0}}
@media(max-width:1100px) and (min-width:761px){.intro{padding-top:55px}.station-bench{width:calc(100% + 25px);margin-left:-10px}.street-backdrop{bottom:160px}.street-shutter{left:24%;right:2%}}
@media(max-width:760px){.intro{padding-top:12px;display:block}.station-bench{width:170px;margin:16px 0 0 auto}.intro p{max-width:310px}.intro-star{left:15px;right:auto;bottom:30px}.street-backdrop{inset:0 0 160px;background-size:40px 22px}.street-shutter{left:9%;right:5%;top:370px;bottom:30px}.street-floor{height:35px}.guide{background:none;box-shadow:none}.page{gap:20px}}

/* Keep the cabinet flush against one continuous tiled wall. */
.machine-wrap:after{height:7px;bottom:5px;left:4%;right:0;filter:blur(2px);background:#483e291c}
.guide{background:none;box-shadow:none}
.street-backdrop{background-color:#e9e6d7}
/* Flat illustrated seating, aligned with the cabinet feet. */
.station-bench{filter:none;margin-bottom:0;align-self:flex-start}
.street-floor{background:#d8d7c5;border-top:2px solid #a8ae9759}
@media(min-width:761px){.station-bench{transform:translateY(11px)}}

/* Illustrated yellow bin rests on the same floor plane as the machine. */
.station-bin{display:block;width:148px;max-width:65%;height:auto;object-fit:contain;margin:auto 0 0 38px;transform:translateY(6px)}
@media(max-width:1100px) and (min-width:761px){.station-bin{width:130px;margin-left:15px}}
@media(max-width:760px){.station-bin{width:105px;margin:20px 15px 0 auto;transform:none}}

/* Matching bins share a baseline: regular trash left, recycling right. */
.station-bins{display:flex;align-items:flex-end;gap:2px;width:300px;max-width:calc(100% + 20px);margin:auto 0 0 -5px;transform:translateY(6px)}
.station-bins .station-bin{width:calc((100% - 2px)/2);max-width:none;margin:0;transform:none}
@media(max-width:760px){.station-bins{width:210px;max-width:100%;margin:20px 0 0 auto;transform:none}}
/* Compensate for transparent image margins so the bins sit together. */
.station-bins{gap:0}
.station-bins .station-bin{width:50%}
.station-bins .station-bin + .station-bin{margin-left:-24px}
@media(max-width:760px){.station-bins .station-bin + .station-bin{margin-left:-17px}}
/* Preserve the yellow bin position; move only the blue bin toward it. */
.station-bins{gap:2px}
.station-bins .station-bin{width:calc((100% - 2px)/2)}
.station-bins .station-bin + .station-bin{margin-left:0}
.station-bins .station-bin:first-child{transform:translateX(24px)}
@media(max-width:760px){.station-bins .station-bin + .station-bin{margin-left:0}.station-bins .station-bin:first-child{transform:translateX(17px)}}

/* Architectural storefront: a framed steel shutter offset right of the cabinet. */
.street-backdrop{inset:-12px 0 0;border-radius:0;mask-image:none;background-color:#e3e1d4;background-image:linear-gradient(#9b9e8b70 1px,transparent 1px),linear-gradient(90deg,#9b9e8b70 1px,transparent 1px),linear-gradient(135deg,#ffffff26,transparent 65%);background-size:48px 24px,48px 24px,100% 100%;box-shadow:inset 0 2px 0 #f6f2e6}
.street-shutter{left:39%;right:2.5%;top:0;bottom:39px;border:0;border-top:15px solid #b9bcb6;border-bottom:8px solid #777f79;background:linear-gradient(90deg,#303a381f,transparent 24%,#f5eee51c 70%,#26353126),repeating-linear-gradient(to bottom,#cbd0c9 0px,#e0e1d8 2px,#858e87 4px,#a5aca6 7px,#adb3ad 34px,#818a83 36px,#d6d9cf 38px,#e2e3d9 40px);box-shadow:inset 0 7px 9px #28342e38,0 0 0 2px #747d72}
.shutter-rail{position:absolute;top:-15px;bottom:-8px;width:14px;background:radial-gradient(circle at 50% 20px,#647168 1px,#e5e7dc 2px,#8d978c 3px,transparent 4px) 0 0/14px 78px,linear-gradient(90deg,#828d83,#d8dcd1 35%,#a7afa4 85%,#737e74);border-left:1px solid #6d796e;border-right:1px solid #e4e6da}.rail-left{left:0}.rail-right{right:0}
.street-floor{height:40px;background-color:#cfcec0;background-image:linear-gradient(90deg,#929a893d 1px,transparent 1px),linear-gradient(#929a893d 1px,transparent 1px);background-size:65px 28px;border-top:2px solid #7e8976}
@media(max-width:1100px) and (min-width:761px){.street-backdrop{bottom:160px}.street-shutter{left:39%;right:1%;bottom:39px}}
@media(max-width:760px){.street-backdrop{inset:0 0 160px}.street-shutter{left:24%;right:0;top:350px;bottom:34px}.street-floor{height:35px}.shutter-rail{width:10px;background-size:10px 65px,100% 100%}}
/* Continuous wall above the header and concrete below the storefront. */
body{min-height:100vh;overflow-x:clip}
.site-header{z-index:3;background:transparent}
.street-backdrop{top:calc(-1 * var(--scene-top,70px));bottom:calc(-1 * var(--scene-tail,55px));left:calc(50% - 50vw);right:calc(50% - 50vw);box-shadow:none}
.street-floor{height:calc(var(--floor-base,40px) + var(--scene-tail,55px));border-top:1px solid #899080;background-color:#c8c7ba;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='concrete'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath d='M0 0h220v220H0z' filter='url(%23concrete)' opacity='.3'/%3E%3C/svg%3E"),radial-gradient(ellipse at 15% 40%,#ece9dd40,transparent 55%),radial-gradient(ellipse at 75% 90%,#8d91802b,transparent 60%),linear-gradient(#b9bbae,#d2d0c3);background-size:220px 220px,100% 100%,100% 100%,100% 100%;box-shadow:inset 0 5px 9px #616b5420}
.street-shutter{bottom:calc(var(--floor-base,40px) + var(--scene-tail,55px) - 1px)}
@media(max-width:1100px){.street-backdrop{--floor-base:200px}}
@media(max-width:760px){.street-backdrop{--floor-base:195px}.street-shutter{top:calc(350px + var(--scene-top,70px))}}
/* Retain the original floor color as a continuous, ungridded surface. */
.street-floor{background:#cfcec0;box-shadow:none}
/* Roomy square wall tiles with slightly stronger grout lines. */
.street-backdrop{background-image:linear-gradient(#9b9e8b73 2px,transparent 2px),linear-gradient(90deg,#9b9e8b73 2px,transparent 2px),linear-gradient(135deg,#ffffff26,transparent 65%);background-size:40px 40px,40px 40px,100% 100%}
/* Personal mark and a tactile, tear-off contact flyer. */
.identity{display:flex;align-items:center;gap:10px}.header-logo{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.contact-flyer{position:relative;width:204px;max-width:100%;background:#b5dce0;color:#26342d;transform:rotate(3deg);box-shadow:2px 4px 2px #26342d40;margin:0 0 38px;border:1px solid #719da060;isolation:isolate}
.contact-flyer:before,.contact-flyer:after{content:'';position:absolute;top:-12px;width:56px;height:24px;background:#e7e4c58a;border:1px solid #eee9cf55;box-shadow:0 1px 1px #4e594b19;z-index:2;pointer-events:none}
.contact-flyer:before{left:-10px;transform:rotate(-25deg)}.contact-flyer:after{right:-10px;transform:rotate(20deg)}
.flyer-copy{padding:25px 13px 20px;background:linear-gradient(125deg,transparent 44%,#ffffff29 45%,transparent 47%),linear-gradient(28deg,transparent 65%,#375e5e0d 66%,transparent 68%)}
.guide .contact-flyer h2{display:block;font:900 28px/.95 var(--sans);letter-spacing:-1.5px;margin:0 0 12px;white-space:nowrap}
.guide .contact-flyer p{display:block;margin:0;max-width:none;font:17px/1.15 var(--sans);color:inherit;letter-spacing:-.4px}
.flyer-tabs{display:flex;border-top:1px dashed #47646780}.call-tab{flex:1;min-width:0;height:72px;background:transparent;border:0;border-right:1px dashed #47646780;padding:8px 0;font:13px var(--mono);writing-mode:vertical-rl;cursor:pointer;transition:transform .18s,background .18s;transform-origin:top center}.call-tab:last-child{border-right:0}.call-tab:nth-child(2){height:77px;background:#b5dce0}.call-tab:nth-child(4){height:74px;background:#b5dce0}.call-tab:hover{background:#cee9e8;transform:rotate(-4deg) translateY(3px)}
#contact-dialog{max-width:520px}#contact-dialog .dialog-body{padding-bottom:40px}#contact-dialog a{overflow-wrap:anywhere}
@media(min-width:1101px){.guide{align-self:start;padding-top:110px}}
@media(max-width:1100px) and (min-width:761px){.contact-flyer{flex-shrink:0;width:190px;margin:10px 10px 0 0}.guide{align-items:center}}
@media(max-width:760px){.header-logo{width:36px;height:36px}.identity{gap:7px}.identity span{font-size:7px}.identity{font-size:12px}.contact-flyer{width:204px;float:none;margin:8px auto 35px}.guide .contact-flyer p{font-size:17px}.guide .contact-flyer h2{font-size:28px}}
/* Heavy ink headline and two genuinely missing tear-off strips. */
.guide .contact-flyer h2{font-family:'Arial Black','Helvetica Neue',var(--sans);font-weight:950;letter-spacing:-1.7px;-webkit-text-stroke:1.1px currentColor;font-size:28px}
.contact-flyer{background:transparent;border:0;box-shadow:none;filter:drop-shadow(2px 4px 1px #26342d40)}
.flyer-copy{background-color:#b5dce0;border:1px solid #719da060;border-bottom:0}
.flyer-tabs{align-items:flex-start;border-top:0}
.call-tab,.call-tab:nth-child(2),.call-tab:nth-child(4){height:76px;background:#b5dce0;border-top:1px dashed #47646780;border-right:1px dashed #47646780}
.call-tab:hover{background:#cee9e8}
.torn-tab{flex:1;min-width:0;height:14px;background:#b5dce0;clip-path:polygon(0 0,100% 0,100% 65%,88% 48%,77% 82%,62% 51%,47% 92%,33% 60%,21% 85%,9% 50%,0 72%)}
.torn-tab-3{height:20px;clip-path:polygon(0 0,100% 0,100% 45%,86% 65%,74% 39%,61% 70%,44% 48%,30% 87%,14% 65%,0 90%)}

/* Slightly smaller flyer, nudged right, with the final two strips missing. */
.contact-flyer{width:190px;max-width:calc(100% - 14px);margin-left:14px}.flyer-copy{padding:22px 12px 17px}.guide .contact-flyer h2{font-size:26px}.guide .contact-flyer p{font-size:16px}.call-tab,.call-tab:nth-child(2),.call-tab:nth-child(4){height:69px}.call-tab:nth-child(3){border-right:0}
@media(max-width:760px){.contact-flyer{margin-left:auto;margin-right:8px}}
.call-tab{white-space:nowrap;font-size:12px;padding:6px 0}

.call-tab{font-size:11px;padding:4px 0}
@media(min-width:1101px){.contact-flyer{margin-left:74px}}
/* Pink printed instruction poster, with soft white stars. */
.how-flyer{position:relative;width:222px;margin:0 0 0 28px;background:#edcddd;color:#4b4d43;transform:rotate(-3deg);box-shadow:2px 3px 2px #26342d38;border:1px solid #c5aeb98c;padding:13px 14px 0;isolation:isolate}
.how-topline{display:flex;justify-content:space-between;gap:8px;font:700 6px/1.1 var(--sans);letter-spacing:-.1px}
.how-stars{height:76px;position:relative;margin:5px -8px 2px;pointer-events:none}.how-stars img{position:absolute;width:60px;height:60px;top:11px;left:0;transform:rotate(-13deg)}.how-stars img:nth-child(2){width:81px;height:81px;top:-7px;left:58px;transform:rotate(12deg)}.how-stars img:nth-child(3){width:54px;height:54px;top:18px;left:145px;transform:rotate(-20deg)}
.guide .how-flyer h2{display:block;font:900 39px/.87 'Arial Black','Helvetica Neue',var(--sans);letter-spacing:-2px;text-transform:none;-webkit-text-stroke:.5px currentColor;margin:5px 0 15px}
.how-steps{list-style:none;counter-reset:steps;padding:0;margin:0 0 15px}.how-steps li{counter-increment:steps;font:500 11px/1.3 var(--sans);margin:0 0 8px;padding-left:22px;position:relative}.how-steps li:before{content:'0' counter(steps);position:absolute;left:0;top:1px;font:700 9px var(--mono)}
.how-flyer-footer{margin:0 -14px;padding:9px 10px 10px;background:#f5f0e9;font:700 9px/1.2 var(--sans)}.how-flyer .plain-menu{margin:7px 0 0;padding:0;max-width:none;gap:8px}.how-flyer .plain-menu button{font-size:8px;color:#4b4d43}
@media(max-width:1100px) and (min-width:761px){.guide{gap:20px}.how-flyer{flex-shrink:0;margin:10px 0 0}.street-backdrop{--floor-base:370px}}
@media(max-width:760px){.how-flyer{margin:0 auto 18px;width:222px}.how-flyer .plain-menu{clear:none}.street-backdrop{--floor-base:600px}}

.how-flyer-footer{height:23px;padding:0}

/* Mixed-letter sticker heading on the contact flyer. */
.guide .contact-flyer h2{font-size:0;line-height:1;letter-spacing:0;-webkit-text-stroke:0;margin:0 -7px 13px}.hello-wordmark{display:block;width:calc(100% + 0px);height:auto;min-height:40px;object-fit:contain}

/* Compact instruction poster without the bottom strip. */
.how-flyer{zoom:.8;padding-bottom:1px}
.hello-wordmark{width:80%;min-height:0;margin-right:auto}

/* Consistent packaging-inspired type across page and modal headings. */
:root{--heading:'Archivo Black','Arial Black',sans-serif;--tea:'DM Serif Display',Georgia,serif}
h1,h2,h3,h4,h5,h6{font-family:var(--heading);font-weight:400;text-transform:uppercase}
.intro h1{font-family:var(--heading);font-size:42px;font-weight:400;line-height:1.06;letter-spacing:-.5px;text-transform:uppercase}
.intro h1 em{display:block;font-family:var(--tea);font-size:43px;font-style:italic;font-weight:400;line-height:1.04;letter-spacing:-1.2px;text-transform:none;margin-top:5px}
.guide .how-flyer h2{font-family:var(--heading);font-weight:400;font-size:39px;line-height:1;letter-spacing:-.3px;text-transform:uppercase;-webkit-text-stroke:0}
.dialog-body h2{font-family:var(--heading);font-weight:400;font-size:48px;line-height:1.1;letter-spacing:0;text-transform:uppercase}
.dialog-body h3{font-family:var(--heading);font-weight:400;font-size:25px;line-height:1.2;letter-spacing:.1px;text-transform:uppercase}
@media(max-width:1100px) and (min-width:761px){.intro h1{font-size:33px}.intro h1 em{font-size:34px}}
@media(max-width:760px){.intro h1{font-size:36px;max-width:320px}.intro h1 em{font-size:38px}.dialog-body h2{font-size:38px}.dialog-body h3{font-size:23px}}

.intro h1{font-size:34px}.guide .how-flyer h2{font-size:34px}.dialog-body h2{font-size:42px}.dialog-body h3{font-size:23px}
@media(max-width:1100px) and (min-width:761px){.intro h1{font-size:27px}}
@media(max-width:760px){.intro h1{font-size:32px}.dialog-body h2{font-size:32px}.dialog-body h3{font-size:21px}}

/* Wide, rounded italic lettering inspired by the supplied wordmark. */
.intro h1,.intro h1 em{font-family:'Days One',sans-serif;font-size:28px;font-weight:400;font-style:normal;line-height:1.17;letter-spacing:-1.1px;text-transform:uppercase}
.intro h1 em{margin-top:0;font-size:28px}
@media(max-width:1100px) and (min-width:761px){.intro h1,.intro h1 em{font-size:23px;letter-spacing:-1px}}
@media(max-width:760px){.intro h1,.intro h1 em{font-size:30px;letter-spacing:-1.2px}.intro h1{max-width:360px}}

.intro h1,.intro h1 em{font-size:32px;letter-spacing:-.7px;-webkit-text-stroke:.35px currentColor}
@media(max-width:1100px) and (min-width:761px){.intro h1,.intro h1 em{font-size:27px}}

.intro h1{transform:skewX(-12deg);transform-origin:left center;max-width:270px}.intro h1,.intro h1 em{font-size:29px;letter-spacing:-1px;line-height:1.22;-webkit-text-stroke:.65px currentColor}
@media(max-width:1100px) and (min-width:761px){.intro h1,.intro h1 em{font-size:23px}}

/* White sticker-style edge keeps the dark headline legible on the wall. */
.intro h1,.intro h1 em{-webkit-text-stroke:9px #fffdf6;paint-order:stroke fill}

.intro h1{transform:none;text-align:left}.intro h1 .headline-line{display:block;white-space:nowrap;transform:skewX(-12deg);transform-origin:left center;text-align:left}
@media(max-width:1100px) and (min-width:761px){.intro h1{font-size:20px}}

/* Equal-height tile-colored header buttons. */
.site-header{--header-button-height:64px;align-items:center;gap:16px}
.site-header .identity,.header-links a{height:var(--header-button-height);display:flex;align-items:center;background:#e3e1d4;border:2px solid #293424;border-radius:0;padding:8px 15px;text-decoration:none}
.header-links{align-items:stretch;gap:12px}
.header-links a{justify-content:center;min-width:102px;white-space:nowrap}
.site-header .identity:hover,.header-links a:hover{background:#efeddf}
@media(max-width:760px){.site-header{--header-button-height:58px;flex-wrap:wrap;gap:10px}.site-header .identity{padding:6px 10px}.header-links{gap:10px}.header-links a{padding:6px 12px;min-width:92px}}

.site-header .identity,.header-links a{border-width:1px}

/* Compact contact links aligned with the identity card's top edge. */
.site-header{align-items:flex-start}
.header-links{align-self:flex-start}
.header-links a{height:38px;min-width:0;padding:8px 14px}
@media(max-width:760px){.header-links a{height:36px;min-width:0;padding:7px 12px}}

.page-footer{color:var(--ink)}

/* Beige introduction card aligned with the header identity card. */
.intro-card{background:#e3e1d4;border:1px solid #293424;padding:20px;width:max-content;max-width:calc(100% + 80px)}
.intro-card h1{margin:0 0 20px;max-width:none;-webkit-text-stroke:0;paint-order:normal}
.intro-card p{margin:0;max-width:255px}
@media(min-width:1101px){.intro-card{margin-left:calc(min(0px,(1280px - 100vw)/2) - min(0px,(1440px - 100vw)/2))}}
@media(max-width:1100px) and (min-width:761px){.intro-card{margin-left:10px;padding:12px;max-width:100%}.intro-card h1{font-size:17px}}
@media(max-width:760px){.intro-card{margin-left:-2px;max-width:100%;padding:16px}.intro-card h1{font-size:26px}}
@media(max-width:430px){.intro-card{margin-left:7px;max-width:calc(100% - 7px)}}

/* Match the identity subtitle's monospace type. */
.header-links a,.intro-card p{font-family:var(--mono)}

/* Compensate for the poster's 80% scale to match the 11px email tags. */
.how-steps li,.how-steps li:before{font-family:var(--mono);font-size:13.75px;font-weight:400;line-height:1.4}

.header-links a{text-transform:uppercase}

/* Exact typography match for the identity subtitle and header links. */
.header-links a{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.4px}
@media(max-width:760px){.header-links a{font-size:7px}}

/* Center the contact flyer heading and invitation. */
.contact-flyer .flyer-copy{text-align:center}
.contact-flyer .hello-wordmark{margin-left:auto;margin-right:auto}
.guide .contact-flyer p{text-align:center}

@media(max-width:760px){.station-bins{display:none}}

.guide .contact-flyer p{font-size:14px}

/* Match the contact invitation's sans-serif font for body copy. */
.intro-card p,.how-steps li,.how-steps li:before{font-family:var(--sans)}

.close{display:grid;place-items:center;padding:0;line-height:1;flex-shrink:0}.close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Pale lemon stock sign with chunky chartreuse lettering. */
.screen{aspect-ratio:1;min-height:0;width:100%;padding:7px 3px;background:#faf6d2;box-shadow:none;position:relative;display:flex;align-items:center;justify-content:center}
.stock-label{display:block;color:#cbd34e;font:400 20px/.91 'Archivo Black',sans-serif;letter-spacing:-1px;text-align:center;-webkit-text-stroke:.8px #cbd34e}
.screen-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:430px){.stock-label{font-size:17px;letter-spacing:-.9px;-webkit-text-stroke:.6px #cbd34e}}

/* Modal section labels match the identity subtitle exactly. */
.dialog-body h3{font-family:var(--mono);font-size:9px;font-weight:400;line-height:1.5;letter-spacing:.4px;color:var(--ink);text-transform:uppercase}
@media(max-width:760px){.dialog-body h3{font-size:7px}}

.screen{overflow:hidden}.stock-squiggle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#ee883b;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.stock-label{position:relative;z-index:1}

/* Decorative Japanese vending-machine payment hardware. */
.payment-panel{padding:6px;background:#bac0a0;border:1px solid #465039;box-shadow:inset 1px 1px #e4e5cc;border-radius:2px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.payment-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:3px}
.payment-display{background:#2e3932;box-shadow:inset 1px 1px 2px #171e19;color:#d28653;font:7px var(--mono);padding:3px 4px;letter-spacing:.5px}
.coin-reader{width:32px;height:29px;background:#354038;border:1px solid #27332c;border-radius:48% 48% 43% 40%;position:relative;box-shadow:1px 1px 0 #e5e2c0}
.coin-aperture{position:absolute;right:3px;top:3px;width:15px;height:15px;border:2px solid #b2b5a2;border-radius:50%;background:linear-gradient(#8d9482,#d6d4bc 48%,#555f51 52%,#929985);box-shadow:0 0 0 1px #1c281f}
.coin-aperture:after{content:'';position:absolute;top:4px;left:1px;width:9px;height:2px;background:#1d281f;transform:rotate(-15deg)}
.coin-return{position:absolute;left:4px;bottom:4px;width:14px;height:4px;border-radius:4px;background:#c79b42;transform:rotate(-16deg)}
.payment-reader{position:relative;background:#3f493c;border:1px solid #27332a;padding:3px 3px 4px;border-radius:2px;box-shadow:inset 1px 1px #64705c,0 1px #e0dfc5;min-height:36px}
.reader-label{display:block;color:#e1dfc4;font:5px var(--mono);letter-spacing:.5px;line-height:1.4}
.bill-mouth,.card-mouth{display:block;background:#1a251e;border:1px solid #828a73;box-shadow:inset 0 2px #111b15;height:6px;margin-top:3px}
.bill-guide{display:block;font:5px var(--mono);text-align:center;color:#c9cbaa;background:#627443;margin-top:2px;border-bottom:1px solid #acb981}
.card-mouth{height:3px;margin-top:5px;border-color:#a4ad93}
.card-indicator{position:absolute;right:4px;top:5px;width:3px;height:3px;background:#b3c481;border-radius:50%}
.card-mark{display:block;font-size:9px;line-height:9px;text-align:right;color:#b9bea4}
@media(max-width:430px){.payment-panel{padding:4px;gap:3px}.payment-display{font-size:6px;padding:3px 2px}.coin-reader{width:27px}.reader-label,.bill-guide{font-size:4px}}

/* Quiet concrete wall and smaller printed flyers. */
.street-backdrop{background-color:#e3e1d4;background-image:url('assets/concrete-wall.svg?v=2');background-size:640px 640px;background-repeat:repeat}
.contact-flyer{zoom:.8}
.how-flyer{zoom:.64}
@media(min-width:1101px){.contact-flyer{margin-left:92.5px}.how-flyer{margin-left:35px}}

/* Let the left-side text sit directly on the concrete wall. */
.site-header .identity,.site-header .identity:hover,.intro-card{background:transparent;border-color:transparent}
/* Bring the instruction text into the star artwork. */
.guide .how-flyer h2{position:relative;z-index:1;margin-top:-32px}
.how-steps{position:relative;z-index:1}

/* Prominent chartreuse identity panel, including the personal logo. */
.site-header .identity,.site-header .identity:hover{background:#c2b500;border-color:transparent;height:auto;min-height:84px;padding:12px 18px;gap:14px;font-size:18px}
.site-header .identity .header-logo{width:58px;height:58px}
.site-header .identity span{font-size:11.25px}
@media(max-width:760px){.site-header .identity{min-height:70px;padding:10px 12px;gap:10px;font-size:15px;max-width:100%}.site-header .identity .header-logo{width:44px;height:44px}.site-header .identity span{font-size:8.5px}}

.site-header .identity,.site-header .identity:hover{background:transparent}

.header-links a{font-size:11.25px}
@media(max-width:760px){.header-links a{font-size:8.5px}}

/* Oversized sage stars painted behind the lower-panel poster. */
.machine-bottom{position:relative;isolation:isolate}
.machine-bottom:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:-14px;right:-14px;top:0;height:clamp(110px,15cqw,170px);background:url('assets/lower-panel-stars.svg') center/100% 100% no-repeat;opacity:.88}

.free-label{background:#ee883b}

/* A small printed LinkedIn sticker on the shutter wall. */
.linkedin-sticker{display:flex;width:55px;height:55px;align-items:center;justify-content:center;margin:22px 0 0 130px;border:4px solid #f6f1e4;border-radius:10px;background:#286c9b;color:#fff;box-shadow:1px 2px 2px #25302355;transform:rotate(9deg);transition:transform .18s}
.linkedin-sticker svg{display:block;width:39px;height:39px}
.linkedin-sticker:hover{transform:rotate(3deg) translateY(-2px)}
@media(max-width:1100px){.linkedin-sticker{margin:0;flex-shrink:0}}
@media(max-width:760px){.linkedin-sticker{margin:20px auto 0}}

/* Let oversized stars extend beneath the display and dispensing slot. */
.machine-bottom{isolation:auto}
.machine-bottom:before{z-index:-1;left:-18px;right:-18px;top:-95px;height:310px;background-size:145% 100%}
@media(max-width:760px){.machine-bottom:before{top:-70px;height:250px}}

.machine-bottom:before{opacity:.6}

@font-face{font-family:'Fraunces Heavy';src:url('assets/fraunces-black.ttf') format('truetype');font-weight:900;font-display:swap}
.guide .how-flyer h2{font-family:'Fraunces Heavy',Georgia,serif;font-weight:900;font-size:43px;line-height:.88;letter-spacing:-2px;text-transform:none;filter:url('#rough-type')}
.bottom-left .delivery{grid-row:2}

.keypad-title{font-size:10px;letter-spacing:1px}
.selection .key-text{font-size:10px}
@media(max-width:760px){.keypad-title{font-size:9px}.selection .key-text{font-size:9px}}
@media(max-width:430px){.selection .key-text{font-size:8px}}

.guide .how-flyer h2{font-family:'Archivo Black',Arial,sans-serif;font-weight:400;font-size:34px;line-height:.95;letter-spacing:-1px;text-transform:uppercase;filter:none;color:#699407;-webkit-text-stroke:.8px currentColor}

#detail .dialog-top{border-bottom:0;justify-content:flex-end}
.dialog-body h2{font-family:'Days One',sans-serif;font-weight:400;font-style:normal;text-transform:uppercase;letter-spacing:-1.1px;transform:skewX(-12deg);transform-origin:left center}

.guide .how-flyer h2{filter:blur(.35px);text-shadow:0 0 1.2px #69940766}

/* Airbrushed stars scattered across the whole instruction flyer. */
.guide .how-flyer h2{color:#91ad4f;text-shadow:0 0 1.2px #91ad4f66;text-align:center;margin:45px 0 18px}
.how-stars{position:absolute;inset:0;height:auto;margin:0;z-index:0}
.how-stars img:nth-child(1){width:64px;height:64px;top:4px;left:5px;transform:rotate(-17deg)}
.how-stars img:nth-child(2){width:75px;height:75px;top:34%;left:auto;right:-7px;transform:rotate(15deg)}
.how-stars img:nth-child(3){width:64px;height:64px;top:auto;bottom:0;left:4px;transform:rotate(-10deg)}

@font-face{font-family:'Jacquard 12';src:url('assets/jacquard-12.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.guide .how-flyer h2{font-family:'Jacquard 12',serif;font-size:48px;line-height:.83;font-weight:400;text-transform:lowercase;letter-spacing:0;color:#f579c5;filter:none;text-shadow:none;-webkit-text-stroke:0;margin:12px 0 20px;text-align:center}
.how-steps li,.how-steps li:before{font-family:var(--sans);font-size:17.5px;line-height:1.4}

.how-steps li{padding-left:30px}

/* Retro black lettering with a lime die-cut sticker edge. */
.guide .how-flyer h2{font-family:'Fraunces Heavy',Georgia,serif;font-size:43px;font-weight:900;line-height:.88;letter-spacing:-1.7px;color:#171b13;text-transform:none;filter:url('#how-sticker');text-shadow:none;transform:rotate(-5deg);margin:17px 0 27px}

/* Halve the blank space before selection content while retaining the close control. */
#detail .dialog-top{padding-top:6px;padding-bottom:6px}
#detail .dialog-body{padding-top:0}

/* Match the main headline while retaining the lime sticker treatment. */
.guide .how-flyer h2{font-family:'Days One',sans-serif;font-size:32px;font-weight:400;font-style:normal;line-height:1.17;letter-spacing:-1.1px;text-transform:uppercase;text-align:center;transform:skewX(-12deg);transform-origin:center;margin:8px 0 24px}
.how-flyer{padding-bottom:12px}

#detail .dialog-top{padding-top:9px}
#contact-dialog .dialog-top{padding-top:21px}

#detail .dialog-top,#contact-dialog .dialog-top{padding-top:24px}

.job time{font-size:11px;text-transform:uppercase}
@media(max-width:760px){.job time{font-size:10px}}

/* Bring content higher without moving the close control. */
#detail .dialog-top{background:transparent;margin-bottom:-31px;pointer-events:none}
#detail .dialog-top .close{pointer-events:auto;background:#f7f2e4}
#detail .dialog-body>.eyebrow,.case-study>.eyebrow{padding-right:55px}
.case-study figure{margin:28px 0 36px}
.case-study figure img{display:block;width:100%;height:auto;border-radius:4px}
.case-study figcaption{font-size:11px;line-height:1.5;color:#60664f;margin-top:10px}
.case-study ul{padding-left:20px;color:#60664f;line-height:1.8}
.case-study li{margin-bottom:10px}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0;border-block:1px solid #d5d8c5;margin:25px 0}
.case-facts dt{font:9px var(--mono);text-transform:uppercase;letter-spacing:.4px}
.case-facts dd{margin:5px 0 0;font-size:13px}
.case-study blockquote{margin:25px 0;padding:18px 22px;border-left:3px solid #788b51;background:#e9e7d7;font-size:18px;line-height:1.5}
.case-evidence>div,.case-directions>section{padding:17px 0;border-bottom:1px solid #d5d8c5}
.case-study h4{margin:0;font-size:15px}.case-evidence p,.case-directions p{margin:7px 0 0}
.case-chosen{border-left:3px solid #788b51;padding-left:16px!important}
.case-standalone{max-width:850px;margin:35px auto;background:#f7f2e4;padding:30px 36px}
@media(max-width:760px){.case-standalone{margin:0;padding:24px}.case-facts{gap:14px}.case-study blockquote{font-size:16px}}

/* Darkened sticker orange keeps section headings readable on cream. */
.dialog-body h3,.dialog-body h4{color:#a64c12}

/* Give the drinks slightly more presence while keeping shelf alignment. */
.product[data-select^="A"] .item-image{scale:1.1;transform-origin:center bottom}

/* Case-study subheadings match bold body labels. */
.dialog-body .case-study h4{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.8;letter-spacing:normal;text-transform:none;color:#60664f}

/* Mobile wall collage sits beside the introduction, above the machine. */
@media(max-width:760px){
 .page{display:grid;grid-template-columns:minmax(0,1fr) 160px;column-gap:22px;align-items:start}
 .intro{grid-column:1;grid-row:1;padding:0;min-width:0;align-self:center}
 .intro h1{font-size:clamp(20px,4.3vw,32px);max-width:none}
 .intro p{max-width:none}
 .guide{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:none;padding:0;margin:0;align-self:start}
 .contact-flyer{margin:8px 0 0;max-width:none}
 .how-flyer{margin:0;max-width:none}
 .linkedin-sticker{margin:0;width:42px;height:42px;border-width:3px}
 .linkedin-sticker svg{width:30px;height:30px}
 .machine-wrap{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:20px}
}
@media(max-width:480px){
 .page{grid-template-columns:minmax(0,1fr) 120px;column-gap:17px}
 .guide{gap:15px}
 .guide .contact-flyer{zoom:.6}
 .guide .how-flyer{zoom:.5}
 .intro h1{font-size:20px;letter-spacing:-.8px}
 .intro p{font-size:11px;line-height:1.65}
}
@media(max-width:760px){
 .intro-card .header-links{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px;margin-top:22px}
 .intro-card .header-links a{font-size:9px;padding:10px 12px;white-space:nowrap}
 .site-header{padding-bottom:12px}
}
@media(max-width:480px){.intro-card .header-links a{font-size:8px;padding:9px 8px}}

@media(max-width:760px){
 .dialog-body h3{font-size:12px;line-height:1.6;letter-spacing:.3px}
 .street-shutter{display:none}
}

/* Contact follows the same clean modal header and close spacing. */
#contact-dialog .dialog-top{border-bottom:0;justify-content:flex-end;padding-top:24px;padding-bottom:6px;background:transparent;margin-bottom:-31px;pointer-events:none}
#contact-dialog .dialog-top .close{pointer-events:auto;background:#f7f2e4}
#contact-dialog .dialog-body{padding-top:0}
#contact-title{padding-right:48px}

/* Modal actions use the same quiet, outlined treatment as navigation. */
.dialog-actions a{display:inline-flex;align-items:center;justify-content:center;background:#e3e1d4;color:var(--ink);border:1px solid #293424;border-radius:0;height:38px;padding:8px 14px;font-family:var(--mono);font-size:11.25px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;text-decoration:none}
.dialog-actions a:hover{background:#efeddf}
@media(max-width:760px){.dialog-actions a{height:36px;font-size:9px;padding:7px 12px}}

/* A small apple companion for mouse users; keep text and resize cursors native. */
@media(hover:hover) and (pointer:fine){
 body,button,a,[role="button"]{cursor:url('assets/star-cursor.svg?v=mint') 2 2,auto}
 input,textarea,[contenteditable="true"]{cursor:text}
}

/* Restore the original airbrushed pastel stars along the left wall. */
.left-wall-stars{position:absolute;inset:0;pointer-events:none;user-select:none}
.left-wall-stars img{position:absolute;width:65px;height:65px;opacity:.9}
.left-star-pink{top:10px;left:42%;transform:rotate(-17deg)}
.left-star-yellow{top:350px;right:-12px;transform:rotate(18deg)}
.left-star-mint{bottom:85px;left:-27px;transform:rotate(-10deg)}
.intro-card,.station-bins{position:relative}
@media(max-width:760px){
 .left-wall-stars img{width:40px;height:40px;opacity:.75}
 .left-star-pink{top:-40px;left:58%}
 .left-star-yellow{top:45%;right:-15px}
 .left-star-mint{bottom:-35px;left:0}
}

/* Avoid soft offscreen shadow layers and sticky hover transforms on touch screens. */
@media(hover:none) and (pointer:coarse){
 .product .item-image{filter:none}
 .product:hover .item-image{transform:none}
}

/* Keep tear-off labels centered and prevent mobile text inflation. */
@media(max-width:760px){
 .contact-flyer{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .call-tab{position:relative;writing-mode:horizontal-tb;overflow:hidden;padding:0}
 .call-tab span{position:absolute;left:50%;top:50%;display:block;white-space:nowrap;font-size:11px;line-height:1;transform:translate(-50%,-50%) rotate(90deg)}
}

/* Keep close controls quiet, including when focused on modal open. */
.close:focus-visible{outline:1px solid #7a826b;outline-offset:3px}
@media(max-width:760px){.product .item-image{filter:none}}