@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root { --ink:#121212; --paper:#f7f7f4; --fog:#e7e7e2; --smoke:#5d5d5a; --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; }
a,button { font:inherit; -webkit-tap-highlight-color:transparent; } a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; left:14px; top:-100px; z-index:10; padding:10px 14px; background:var(--paper); border:2px solid var(--ink); border-radius:7px; font-weight:700; }.skip-link:focus { top:14px; }
.site-header { height:82px; max-width:1320px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); }
.brand { display:flex; align-items:center; height:62px; overflow:hidden; }.brand-logo { display:block; width:58px; height:58px; object-fit:cover; object-position:center; border-radius:50%; }
.menu-link,.kicker { font:500 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.menu-link { white-space:nowrap; }
.hero { min-height:calc(100dvh - 82px); max-width:1320px; margin:auto; padding:42px 32px 70px; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); align-items:center; gap:60px; }.hero-copy { max-width:620px; }.kicker { margin:0 0 19px; }
h1,h2,p { text-wrap:balance; } h1 { margin:0; max-width:660px; font-size:clamp(3.8rem,7.5vw,7.2rem); line-height:.83; letter-spacing:-.095em; } h1 em { display:block; padding:3px 0 8px; font:700 .62em "DM Sans",sans-serif; font-style:italic; letter-spacing:-.095em; line-height:1.02; }
.hero-intro { max-width:440px; margin:26px 0 0; font-size:17px; line-height:1.46; }.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px; }.button { min-height:47px; border:1.5px solid var(--ink); padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:14px; cursor:pointer; border-radius:999px; font-weight:700; transition:transform .2s ease,background .2s ease,color .2s ease; }.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(1px) scale(.98); }.button-primary { background:var(--ink); color:var(--paper); }.button-ghost { background:transparent; }
.hero-visual { position:relative; justify-self:end; width:min(100%,500px); aspect-ratio:4/5; border:1.5px solid var(--ink); border-radius:var(--radius); overflow:visible; background:var(--ink); box-shadow:10px 10px 0 var(--ink); }.hero-visual img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:calc(var(--radius) - 2px); }.sticker { position:absolute; z-index:1; padding:10px 13px; background:var(--paper); border:1.5px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); color:var(--ink); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }.sticker-top { top:7%; right:2%; transform:rotate(9deg); }.sticker-bottom { bottom:8%; left:-9%; transform:rotate(-7deg); }
.menu-section { margin:0; padding:106px max(32px,calc((100vw - 1256px) / 2)) 118px; background:var(--fog); color:var(--ink); }.section-head { max-width:625px; margin:0 auto 54px; }.section-head h2,.callout h2 { margin:0; font-size:clamp(2.9rem,5.4vw,5.6rem); line-height:.88; letter-spacing:-.045em; }.section-head h2 { word-spacing:.08em; }.section-head > p:last-child { max-width:440px; margin:18px 0 0; color:#363636; font-size:16px; line-height:1.46; }
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; max-width:1060px; margin:auto; }.menu-card { min-height:258px; border-top:1.5px solid var(--ink); }.card-content { min-height:inherit; padding:19px 2px 25px; display:flex; flex-direction:column; align-items:flex-start; }.drink-number { font:500 10px "DM Mono",monospace; }.drink-name { max-width:88%; margin:30px 0 0; font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700; letter-spacing:-.075em; line-height:.88; }.drink-detail { display:block; max-width:84%; margin-top:12px; color:#555; font:500 10px/1.35 "DM Mono",monospace; letter-spacing:.025em; text-transform:uppercase; }.recipe { max-width:62ch; margin:17px 0 0; padding-top:14px; border-top:1px solid #8c8c89; font-size:13px; line-height:1.4; }.menu-card.picked { animation:pick .85s ease both; } @keyframes pick { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-8px); } }
.callout { background:var(--ink); color:var(--paper); padding:57px max(32px,calc((100vw - 1256px) / 2)); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:31px; }.callout-star { margin:0; font-size:57px; line-height:1; }.callout h2 { color:var(--paper); }.callout p:not(.kicker):not(.callout-star) { margin:16px 0 0; font-size:16px; }.button-light { background:var(--paper); color:var(--ink); border-color:var(--paper); white-space:nowrap; }
footer { max-width:1320px; margin:auto; padding:29px 32px 40px; display:flex; justify-content:space-between; gap:20px; font:10px "DM Mono",monospace; text-transform:uppercase; }.toast { position:fixed; left:50%; bottom:24px; z-index:4; transform:translate(-50%,130px); opacity:0; margin:0; padding:12px 17px; background:var(--ink); color:var(--paper); border:1px solid var(--paper); border-radius:999px; font:11px "DM Mono",monospace; transition:transform .25s ease,opacity .25s ease; }.toast.show { transform:translate(-50%,0); opacity:1; }:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; gap:42px; padding-top:30px; }.hero-visual { justify-self:center; width:min(78vw,430px); order:-1; }.callout { grid-template-columns:auto 1fr; }.callout .button { grid-column:1/-1; justify-self:start; } }
@media (max-width:540px) { .site-header { height:72px; padding:0 20px; }.brand { height:55px; }.brand-logo { width:51px; height:51px; }.hero { min-height:auto; padding:31px 20px 64px; gap:37px; }.hero-visual { order:initial; width:100%; aspect-ratio:5/4; box-shadow:7px 7px 0 var(--ink); }.sticker-bottom { left:2%; }.hero-copy { max-width:none; } h1 { font-size:clamp(3.45rem,16vw,5.2rem); }.hero-intro { margin-top:21px; font-size:16px; }.hero-actions { gap:10px; margin-top:25px; }.button { min-height:45px; padding:0 15px; font-size:14px; }.menu-section { padding:76px 20px 85px; }.section-head { margin-bottom:36px; }.section-head h2 { font-size:clamp(2.9rem,14vw,4.25rem); }.menu-grid { grid-template-columns:1fr; gap:0; }.menu-card { min-height:218px; }.card-content { padding:18px 1px 21px; }.drink-name { max-width:90%; margin-top:27px; font-size:2.15rem; }.recipe { margin-top:14px; padding-top:12px; font-size:12px; }.callout { grid-template-columns:1fr; gap:21px; padding:45px 20px; }.callout .button { grid-column:auto; }.callout h2 { font-size:clamp(2.9rem,14vw,4.25rem); }.callout p:not(.kicker):not(.callout-star) { font-size:16px; } footer { flex-direction:column; gap:8px; padding:25px 20px 31px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }