/* ==========================================================
   Slow Pour — built 1:1 from the Figma artboards
   desktop 1366px / mobile 390px; each section is a "stage" in
   artboard pixels, scaled to the screen with zoom (see <head>).
   ========================================================== */
:root {
  --bg: #F8F5ED; --card: #FFFDF7; --ink: #3B2418; --ink-soft: #75594A;
  --pink: #F4A6C1; --mustard: #F2C14E; --blue: #A8D8EA; --tomato: #E4572E; --matcha: #B5C96A;
  --f-display: "Instrument Serif", Georgia, serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --f-hand: "Fuzzy Bubbles", cursive;
  --f-body: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--tomato); outline-offset: 3px; border-radius: 8px; }
.hand { font-family: var(--f-hand); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* custom cursors: arrow (tip at 8,1) and pointing hand (fingertip at 10,1); PNG @2x for retina */
html {
  cursor: url(images/v2/cursor@1x.png) 8 1, auto;
  cursor: -webkit-image-set(url(images/v2/cursor@1x.png) 1x, url(images/v2/cursor@2x.png) 2x) 8 1, auto;
  cursor: image-set(url(images/v2/cursor@1x.png) 1x, url(images/v2/cursor@2x.png) 2x) 8 1, auto;
}
a, button, label, summary, [role="button"], .tags li, .key, .footer .stk, .reviews .stk {
  cursor: url(images/v2/cursor-pointer@1x.png) 10 1, pointer;
  cursor: -webkit-image-set(url(images/v2/cursor-pointer@1x.png) 1x, url(images/v2/cursor-pointer@2x.png) 2x) 10 1, pointer;
  cursor: image-set(url(images/v2/cursor-pointer@1x.png) 1x, url(images/v2/cursor-pointer@2x.png) 2x) 10 1, pointer;
}
button:disabled { cursor: inherit; }

/* stage */
.sec { position: relative; overflow: hidden; }
.stage { position: relative; margin: 0 auto; zoom: var(--k, 1); }
.stage > * { position: absolute; margin: 0; }
.bleed { top: 0; bottom: 0; left: calc(-1 * var(--bleed, 0px)); right: calc(-1 * var(--bleed, 0px)); pointer-events: none; }

/* type */
.h2 { font: 400 92px/.98 var(--f-display); white-space: nowrap; }
.h2 em, .hero-title em { font-style: italic; color: var(--tomato); }
.ln, .hero-title .line { display: block; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 36px; border: 0; border-radius: 100px;
  font: 500 16px/1.302 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--spring), background-color .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn__arrow { width: 17.77px; height: 16.27px; transition: translate .35s var(--spring); }
.btn:hover .btn__arrow { translate: 3px 0; }
.btn__icon { width: 21px; height: 21px; }
.btn--tomato { background: var(--tomato); color: #fff; }
.btn--mustard { background: var(--mustard); color: var(--ink); }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--soft { background: #F9E3AE; color: var(--ink); }
.btn--outline { background: transparent; color: var(--tomato); border: 1px solid var(--tomato); }

/* stickers */
.stk { z-index: 4; pointer-events: none; user-select: none; -webkit-user-select: none; }

/* reveal on scroll */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* pink highlighter: draws itself left to right when it comes into view */
.js .hero-hl, .js .story-hl { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.65, 0, .35, 1) .25s; }
.js .hero-hl.is-drawn, .js .story-hl.is-drawn { clip-path: inset(0 0 0 0); }

/* ---------- 1. hero ---------- */
.hero { background: var(--bg); }
.hero-loop { pointer-events: none; }
.logo { display: block; z-index: 20; }
.logo img { width: 187.4px; height: 43.38px; }
.nav { z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 51px; }
.nav__links { display: flex; align-items: center; gap: 55px; }
.nav__links a { font: 400 14px/1.481 var(--f-mono); text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 88% / 0 35%; transition: background-size .35s var(--ease); }
.nav__links a:hover { background-size: 100% 35%; }
.nav__toggle { display: none; }
.kicker { font: 400 12px/1.481 var(--f-mono); text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.hero-hl { background: var(--pink); }
.hero-title { font: 400 134px/.92 var(--f-display); white-space: nowrap; z-index: 1; }
.hero-lede { font: 400 20px/1.5 var(--f-body); }
.hero-note { font: 400 16px/1.44 var(--f-hand); letter-spacing: -.16px; text-align: center; color: var(--ink); }
.hero-cup { overflow: hidden; z-index: 2; }
.hero-cup img { width: 100%; height: auto; transform-origin: 70% 100%; transition: rotate .8s var(--spring); }
.hero-cup:hover img { rotate: -2deg; }
.marquee { bottom: 0; left: calc(-1 * var(--bleed, 0px)); right: calc(-1 * var(--bleed, 0px)); z-index: 3; overflow: hidden; background: var(--bg); border-block: 1.5px solid var(--ink-soft); padding: 10px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track span { font: 400 16px/1.16 var(--f-mono); letter-spacing: .16px; color: var(--ink-soft); white-space: pre; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { translate: -50% 0; } }

/* ---------- 2. stickers ---------- */
.guide { background: var(--bg); }
.grid--blue { background-image: linear-gradient(rgba(152,222,247,.24) 0 2px, transparent 2px), linear-gradient(90deg, rgba(152,222,247,.24) 0 2px, transparent 2px); }
.grid--pink { background-image: linear-gradient(rgba(247,195,176,.28) 0 2px, transparent 2px), linear-gradient(90deg, rgba(247,195,176,.28) 0 2px, transparent 2px); }
.guide-sub, .reviews-sub { font: 400 20px/1.5 var(--f-body); white-space: nowrap; }
.tidy { z-index: 5; }
.tidy__arrow { width: 14.25px; height: 14.25px; rotate: -90deg; }
.key { border: 0; background: none; padding: 0; z-index: 3; rotate: var(--r); touch-action: none; user-select: none; -webkit-user-select: none; transition: scale .3s var(--spring), rotate .45s var(--spring); }
.key img { width: 100%; height: 100%; pointer-events: none; }
.key:hover { rotate: calc(var(--r) - 6deg); }
.key.is-dragging { cursor: grabbing; scale: 1.08; z-index: 6; animation: none; }
.key.is-active { scale: 1.08; }
.key.is-active::after { content: "✶ filtering"; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; font: 700 12px var(--f-mono); color: var(--tomato); white-space: nowrap; rotate: calc(var(--r) * -1); }

/* ---------- 3. menu ---------- */
.menu { background: var(--blue); }
.panel { background: var(--bg); }
.footnote { font: 400 14px/1.481 var(--f-mono); letter-spacing: -.84px; }
.footnote u { text-decoration-color: var(--tomato); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.seg { background: var(--card); border-radius: 100px; }
.seg > * { position: absolute; top: 16.43px; font: 400 14px/.98 var(--f-mono); }
.seg__label { left: 20.14px; }
.seg__btn { border: 0; background: none; padding: 7px 9px; margin: -7px -9px; border-radius: 100px; font-weight: 700; color: var(--ink-soft); opacity: .6; transition: background-color .25s, color .25s, opacity .25s; }
.seg__btn:hover { opacity: 1; }
.seg__btn.is-active { background: #F9E3AE; color: var(--ink); opacity: 1; }
.seg__btn--num { left: 89.15px; }
.seg__btn--score { left: 123.78px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; background: #F9E3AE; padding: 6px 6px 6px 16px; border-radius: 999px; font: 400 14px var(--f-mono); white-space: nowrap; animation: pop .4s var(--spring); z-index: 5; }
.filter-chip button { border: 0; background: var(--card); width: 28px; height: 28px; border-radius: 50%; font-size: 12px; }
@keyframes pop { from { scale: .6; opacity: 0; } }
.round-btn { width: 46.69px; height: 46.69px; border: 0; border-radius: 50%; background: var(--card); display: grid; place-items: center; padding: 0; transition: transform .3s var(--spring), opacity .2s; }
.round-btn .ico { width: 21px; height: 19.2px; background: currentColor; -webkit-mask: url(images/v2/arrow.svg) center / contain no-repeat; mask: url(images/v2/arrow.svg) center / contain no-repeat; }
.round-btn { color: var(--tomato); }
.round-btn--prev .ico { scale: -1 1; }
.round-btn:hover { transform: translateY(-3px); }
.round-btn:disabled { opacity: .4; pointer-events: none; }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.item { position: relative; flex: 0 0 390px; height: 545.2px; background: var(--card); border-radius: 24px; scroll-snap-align: start; transition: translate .45s var(--spring); }
.item:hover { translate: 0 -6px; }
.item > * { position: absolute; }
.item.is-out { display: none; }
.item.is-entering { animation: card-in .55s var(--spring); }
@keyframes card-in { from { opacity: 0; scale: .92; translate: 0 18px; } }
.item__num { left: 20px; top: 20px; font: 700 14px/.98 var(--f-mono); }
.item__meta { right: 20px; top: 20px; font: 400 14px/.98 var(--f-mono); color: var(--ink-soft); text-align: right; white-space: nowrap; }
.item__photo { left: 19.76px; top: 59.07px; width: 350.48px; height: 243.21px; border-radius: 14px; overflow: hidden; }
.item__photo img { width: 100%; height: 100%; object-fit: cover; }
.item__tape { left: 133.06px; top: 43.1px; width: 123.92px; height: 31.86px; z-index: 2; }
.score { left: 288.04px; top: 256.04px; width: 92.47px; height: 92.47px; border-radius: 50%; background: var(--accent); outline: 5px solid var(--card); z-index: 3; transition: rotate .45s var(--spring); }
.item:hover .score { rotate: -8deg; }
.score b { position: absolute; left: 0; right: 0; top: 15.71px; text-align: center; font: 400 45.66px/1 var(--f-display); letter-spacing: .4566px; }
.score small { position: absolute; left: 0; right: 0; top: 61.15px; text-align: center; font: 400 11.39px/.98 var(--f-mono); color: var(--ink-soft); }
.item__body { left: 20px; top: 325.2px; width: 350px; display: flex; flex-direction: column; gap: 20px; }
.item__name { font: 400 38px/1 var(--f-display); letter-spacing: .38px; }
.item__notes { display: flex; flex-direction: column; gap: 14px; }
.notes-label { font: 700 14px/.98 var(--f-mono); text-transform: uppercase; }
.notes { font: 400 14px/1.72 var(--f-mono); letter-spacing: -.42px; margin-top: -14px; padding-top: 14px; }
.notes li::before { content: "✶ "; color: var(--accent); }
.tags { display: flex; gap: 11px; }
.tags li { background: var(--soft); padding: 6px 18px 7px; border-radius: 100px; font: 700 10px/.98 var(--f-mono); letter-spacing: -.1px; text-transform: uppercase; white-space: nowrap; }
.item__pick { background: var(--tomato); color: #fff; padding: 7px 19px; border-radius: 100px; font: 700 14px/1.481 var(--f-mono); text-transform: uppercase; white-space: nowrap; z-index: 5; }
.empty { font: 400 15px var(--f-mono); text-align: center; }

/* ---------- 4. story ---------- */
.story { background: var(--bg); }
.story-loop, .story-hl { pointer-events: none; }
.story-hl { background: var(--pink); }
.story-text { font: 400 36px/1.3 var(--f-display); }
.story-sign { font: 400 20px/1.44 var(--f-hand); letter-spacing: -.2px; color: var(--ink-soft); white-space: nowrap; }
.facts { inset: 0; pointer-events: none; }
.fact { position: absolute; border-radius: 50%; pointer-events: auto; transition: rotate .4s var(--spring), scale .4s var(--spring); }
.fact:hover { rotate: -8deg; scale: 1.06; }
.fact--1 { background: var(--pink); } .fact--2 { background: var(--blue); } .fact--3 { background: var(--matcha); }
.fact b { position: absolute; left: 0; right: 0; text-align: center; font: 400 45.66px/1 var(--f-display); letter-spacing: .4566px; }
.fact span { position: absolute; left: 50%; translate: -50% 0; text-align: center; font: 400 11.39px/1.13 var(--f-mono); text-transform: uppercase; }
.polaroid { width: 258.62px; height: 288.96px; background: var(--card); rotate: var(--r); z-index: 2; transition: scale .45s var(--spring); }
.polaroid:hover { scale: 1.03; z-index: 5; }
.polaroid img { position: absolute; left: 13.23px; top: 12.95px; width: 232.16px; height: 207.06px; object-fit: cover; }
.polaroid figcaption { position: absolute; font: 400 14px/1.44 var(--f-hand); letter-spacing: -.14px; text-align: center; white-space: nowrap; }

/* ---------- 5. events ---------- */
.events { background: #F9E3AE; }
.stripes { background-image: linear-gradient(90deg, rgba(255,255,255,.15) 0 22.14px, transparent 22.14px); background-size: 40.69px 100%; }
.stripes--20 { background-image: linear-gradient(90deg, rgba(255,255,255,.2) 0 22.14px, transparent 22.14px); }
.events-title { text-align: center; }
.events-sub { font: 400 20px/1.44 var(--f-hand); letter-spacing: -.2px; text-align: center; }
.ticket { width: 396.08px; height: 499.16px; background: var(--img) center / 100% 100% no-repeat; transition: translate .45s var(--spring); }
.ticket:hover { translate: 0 -6px; }
.ticket > * { position: absolute; }
.ticket__when { left: 37.92px; top: 32.51px; font: 700 14px/1.66 var(--f-mono); text-transform: uppercase; white-space: nowrap; }
.ticket__body { left: 37.72px; top: 255.57px; width: 320px; }
.ticket--3 .ticket__body, .ticket--3 .ticket__btn { left: 40.5px; }
.ticket__title { font: 400 38px/1 var(--f-display); letter-spacing: .38px; white-space: nowrap; }
.ticket__desc { font: 400 16px/1.5 var(--f-body); width: 285.01px; margin-top: 13px; }
.ticket--3 .ticket__desc { width: 240.27px; }
.ticket__spots { font: 400 14px/1.72 var(--f-mono); letter-spacing: -.42px; color: var(--ink-soft); margin-top: 17px; }
.ticket__btn { left: 37.72px; top: 406.57px; }
/* the ticket already lifts on hover, so its button only lightens */
.ticket__btn:hover, .ticket__btn:active { transform: none; background: #EC7652; }
.ticket__btn.is-done { background: var(--matcha); color: var(--ink); }
.ticket__btn.is-done:hover { background: #C3D383; }
.burst { position: absolute; pointer-events: none; width: 16px; height: 16px; color: var(--tomato); left: 50%; top: 50%; animation: burst .8s var(--ease) forwards; }
@keyframes burst { from { translate: -50% -50%; scale: .4; opacity: 1; } to { translate: calc(-50% + var(--dx)) calc(-50% + var(--dy)); scale: 1; opacity: 0; rotate: 120deg; } }

/* ---------- 6. reviews ---------- */
.reviews { background: #F9E3AE; }
.reviews-fill { background: var(--bg); }
.reviews-wave { pointer-events: none; }
.note { background: var(--img) center / 100% 100% no-repeat; rotate: var(--r); transition: translate .45s var(--spring); z-index: 2; }
.note:hover { translate: 0 -6px; }
/* the doodles on the notes tilt on hover, alternating directions */
.reviews .stk { pointer-events: auto; transition: rotate .45s var(--spring); }
.stk--r1:hover, .stk--r3:hover { rotate: calc(var(--r) - 10deg); }
.stk--r2:hover { rotate: calc(var(--r) + 10deg); }
.note > * { position: absolute; }
.note__tape { width: 123.92px; height: 31.86px; translate: -50% -50%; }
.note__stars { width: 129px; height: 21px; }
.note blockquote { font: 400 20px/1.5 var(--f-body); letter-spacing: -.2px; }
.note figcaption { font: 400 20px/1.44 var(--f-hand); letter-spacing: -.2px; margin-top: 28.8px; }

/* ---------- 7. visit ---------- */
.visit { background: var(--bg); }
.visit-card, .map-card { background: var(--card); }
.visit-eyebrow { font: 500 20px/1.5 var(--f-body); letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.visit-title { white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: .3em; padding: 6px 21px; border-radius: 100px; background: #DFE8B9; font: 400 20px/1.5 var(--f-body); white-space: nowrap; }
.status__dot { color: var(--matcha); }
.status.is-closed { background: #F7C3B0; }
.status.is-closed .status__dot { color: var(--tomato); }
.hours { display: flex; flex-direction: column; font: 400 18px/1.5 var(--f-mono); }
.hours div { display: flex; justify-content: space-between; }
.hours dd { font-weight: 700; }
.hours div.is-today dt::after { content: "← today"; margin-left: .6em; font: 700 .78em/1 var(--f-hand); color: var(--tomato); white-space: nowrap; }
.visit-tip { font: 400 17px/1.44 var(--f-hand); letter-spacing: .17px; color: var(--ink-soft); }
.map { z-index: 2; }
.map > * { position: absolute; }
.map__clip { inset: 0; overflow: hidden; }
.map__img { position: absolute; }
.map__label { font: 700 14px/1.44 var(--f-hand); white-space: nowrap; }
.map__label--lane { letter-spacing: .28px; }
.map__label--linden { letter-spacing: .14px; }
.map__pin { animation: bounce 2s var(--ease) infinite; }
@keyframes bounce { 0%, 100% { translate: 0 0; } 40% { translate: 0 -12px; } }
.map__callout { background: var(--card); border-radius: 7px; }
.map__callout-text { font: 700 14px/1.44 var(--f-hand); text-align: center; translate: -50% 0; white-space: nowrap; }

/* ---------- scroll cup ---------- */
.refill {
  position: fixed; right: 24px; bottom: 24px; z-index: 100;
  display: flex; align-items: center; gap: 0; height: 64px; padding: 0 8px;
  border: 0; border-radius: 100px; background: #FFFDF7; color: var(--ink);
  font: 500 16px/1 var(--f-body);
  opacity: 0; translate: 0 16px; pointer-events: none;
  transition: opacity .35s var(--ease), translate .35s var(--ease), transform .35s var(--spring), gap .35s var(--ease), padding .35s var(--ease);
}
.refill.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.refill:hover { transform: translateY(-3px); }
.refill__cup { width: 48px; height: 48px; flex: none; translate: 1px 1px; } /* optical centring: the handle makes the exact centre look left-heavy */
.refill__coffee { fill: #8A5A3B; }
.refill__wave { transition: transform .25s linear; }
.refill__steam { opacity: 0; transition: opacity .4s; }
.refill__label { color: #8A5A3B; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s var(--ease); }
.refill.is-full { gap: 6px; padding: 0 22px 0 8px; }
.refill.is-full .refill__label { max-width: 90px; }
.refill.is-full .refill__steam { opacity: 1; animation: steam 1.6s ease-in-out infinite; }
@keyframes steam { 50% { translate: 0 -2px; opacity: .55; } }
@media (max-width: 1023.98px) { .refill { right: 16px; bottom: 16px; height: 56px; padding: 0 6px; } .refill__cup { width: 44px; height: 44px; } .refill.is-full { padding: 0 18px 0 6px; } }

/* ---------- 8. footer ---------- */
.footer { background: var(--bg); }
.footer-bg { bottom: auto; background: var(--pink); }
.wordmark { font: 400 369.09px/.98 var(--f-display); color: var(--ink); white-space: nowrap; letter-spacing: -22.15px; z-index: 1; }
.wordmark__slow { letter-spacing: -14.64px; }
.wordmark__pour { font-style: italic; color: var(--tomato); letter-spacing: -17.3px; }
.footer .stk { pointer-events: auto; }
.footer .stk { transition: rotate .45s var(--spring); }
.footer .stk:hover { rotate: calc(var(--r) - 8deg); }
.pill { translate: -50% -50%; rotate: var(--r); transition: rotate .45s var(--spring); padding: 6px 20px; border-radius: 100px; font: 700 14px/1.481 var(--f-mono); text-transform: uppercase; white-space: nowrap; z-index: 5; }
.pill--1:hover, .pill--3:hover { rotate: calc(var(--r) - 6deg); }
.pill--2:hover { rotate: calc(var(--r) + 6deg); }
.pill--1 { background: var(--mustard); } .pill--2 { background: var(--blue); } .pill--3 { background: var(--matcha); }
.copyright { font: 400 16px/1.5 var(--f-mono); white-space: nowrap; }
.footer-links { display: flex; font: 400 16px/1.481 var(--f-mono); white-space: nowrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--tomato); }

/* ===================== desktop artboard ===================== */
@media (min-width: 1024px) {
  .stage{width:1366px}
  .hero .stage{height:805px}
  .guide .stage{height:595px}
  .story .stage{height:815px}
  .events .stage{height:854px}
  .reviews .stage{height:772px}
  .visit .stage{height:669px}
  .footer .stage{height:481px}
  .hero-loop{left:auto;right:calc(-82.92px - var(--bleed,0px));top:0;width:785.92px;height:484.69px;scale:-1 1}
  .logo{left:103px;top:20.71px}
  .nav{left:103px;top:20px;width:1160px;height:44.83px}
  .kicker{left:103px;top:167.87px}
  .hero-hl{left:372.17px;top:423.52px;width:350.19px;height:48.05px}
  .hero-title{left:103px;top:225.87px}
  .hero-lede{left:103px;top:511.87px;width:508.58px}
  .hero-btn1{left:103px;top:604.89px}
  .hero-btn2{left:325.27px;top:604.89px}
  .hero-note{left:665.43px;top:493.16px;width:211.35px;height:46.08px;--r:-13.96deg;rotate:var(--r)}
  .hero-arrow{left:732.3px;top:459.4px;width:29.71px;height:27.1px}
  .hero-cup{left:863px;top:182.88px;width:469.06px;height:584px}
  .grid--blue{background-size:42.6875px 42.6875px;background-position:var(--bleed,0px) -3.7px}
  .guide-title{left:103px;top:80px}
  .guide-sub{left:103px;top:190.16px}
  .tidy{left:1112.51px;top:89px}
  .key--1{left:89.11px;top:267.02px;width:252.11px;height:252.11px;--r:-11.02deg;rotate:var(--r)}
  .key--2{left:342.5px;top:278.9px;width:228.35px;height:228.35px;--r:7.52deg;rotate:var(--r)}
  .key--3{left:578.5px;top:278.9px;width:228.35px;height:228.35px;--r:0deg;rotate:var(--r)}
  .key--4{left:813px;top:278.9px;width:228.35px;height:228.35px;--r:5.26deg;rotate:var(--r)}
  .key--5{left:1038.38px;top:278.9px;width:228.35px;height:228.35px;--r:-8.75deg;rotate:var(--r)}
  .menu .stage{--fr:calc(48px / var(--k,1));height:calc(950.38px + 2 * var(--fr))}
  .panel{left:calc(var(--fr) - var(--bleed,0px));right:calc(var(--fr) - var(--bleed,0px));top:var(--fr);height:950.38px;border-radius:24px}
  .menu-title{left:102.78px;top:calc(80.19px + var(--fr))}
  .footnote{left:1006.63px;top:calc(80px + var(--fr));width:256.13px}
  .seg{left:103.4px;top:calc(221.59px + var(--fr));width:192.1px;height:46.86px}
  .filter-chip{left:315px;top:calc(226.6px + var(--fr))}
  .round-btn--prev{left:1155.1px;top:calc(221.76px + var(--fr))}
  .round-btn--next{left:1216.07px;top:calc(221.76px + var(--fr))}
  .track{left:calc(var(--fr) - var(--bleed,0px));right:calc(var(--fr) - var(--bleed,0px));top:calc(280px + var(--fr));height:600px;gap:37.31px;padding:39.17px 60px 0 calc(104.27px - var(--fr) + var(--bleed,0px));scroll-padding-left:calc(104.27px - var(--fr) + var(--bleed,0px))}
  .empty{left:104px;top:calc(560px + var(--fr));width:1160px}
  .stk--c1{left:-44.16px;top:194.49px;width:88.18px;height:92.83px;--r:-3.89deg;rotate:var(--r)}
  .stk--c2{left:325.3px;top:392.2px;width:78.8px;height:91.2px;--r:0deg;rotate:var(--r)}
  .stk--c3{left:-23.39px;top:120.95px;width:86.78px;height:70.1px;--r:-5.5deg;rotate:var(--r)}
  .stk--c4{left:348.45px;top:418.4px;width:52.5px;height:75.2px;--r:20deg;rotate:var(--r)}
  .stk--c5{left:329.03px;top:158.03px;width:87.54px;height:77.13px;--r:0deg;rotate:var(--r)}
  .item__pick{left:136.44px;top:-6.64px;transform:translate(-50%,-50%) rotate(-3.94deg)}
  .story-loop{left:867.07px;top:454.9px;width:785.92px;height:484.69px;--r:-10.09deg;rotate:var(--r)}
  .story-hl{left:289.2px;top:395.2px;width:273.8px;height:38.95px}
  .story-title{left:102.78px;top:78.08px}
  .story-text{left:102.78px;top:294.4px;width:580.46px}
  .story-sign{left:102.78px;top:517.6px}
  .fact--1{left:102.78px;top:615.93px;width:117.64px;height:117.64px}
  .fact--2{left:233.96px;top:615.93px;width:117.64px;height:117.64px}
  .fact--3{left:365.14px;top:615.93px;width:117.64px;height:117.64px}
  .fact b{top:17.55px}.fact span{top:63.55px;width:62.46px}
  .polaroid--1{left:758.99px;top:112.51px;width:258.62px;height:288.96px;--r:-7.25deg;rotate:var(--r)}
  .polaroid--2{left:1053.89px;top:169.79px;width:258.62px;height:288.96px;--r:5.65deg;rotate:var(--r)}
  .polaroid--3{left:800.96px;top:453.74px;width:258.62px;height:288.96px;--r:1.83deg;rotate:var(--r)}
  .polaroid--1 figcaption{left:5px;right:0;top:241.22px}
  .polaroid--2 figcaption{left:0.86px;right:0;top:242.67px}
  .polaroid--3 figcaption{left:51.82px;width:158.33px;top:233.48px;white-space:normal;line-height:1.3;--r2:.26deg;rotate:var(--r2)}
  .stk--story{left:1058.08px;top:479.2px;width:89.24px;height:98.01px;--r:4.07deg;rotate:var(--r)}
  .stripes{background-position:calc(var(--bleed,0px) + 9.82px) 0}
  .events-title{left:168.65px;top:79.04px;width:1028.71px}
  .events-sub{left:476.36px;top:190.47px;width:407.58px}
  .ticket--1{left:75.28px;top:270.47px}
  .ticket--2{left:486.24px;top:270.47px}
  .ticket--3{left:897.19px;top:270.47px}
  .reviews-fill{top:45px}
  .reviews-wave{left:-146px;top:5.33px;width:1658px;height:986.6px}
  .reviews-title{left:103px;top:80px}
  .reviews-sub{left:107.15px;top:189.13px}
  .note--1{left:89.85px;top:291.7px;width:387.77px;height:352.58px;--r:-2.17deg;rotate:var(--r)}
  .note--1 .note__tape{left:194.5px;top:4.3px}
  .note--1 .note__stars{left:54.6px;top:66.75px}
  .note--1 .note__text{left:54.8px;top:116.6px;width:270.23px}
  .note--2{left:484.59px;top:325.04px;width:396.62px;height:361.69px;--r:2.19deg;rotate:var(--r)}
  .note--2 .note__tape{left:192.8px;top:7.15px}
  .note--2 .note__stars{left:57.5px;top:69.3px}
  .note--2 .note__text{left:57.7px;top:119.1px;width:270.23px}
  .note--3{left:877.62px;top:287.3px;width:400.37px;height:361.38px;--r:-0.46deg;rotate:var(--r)}
  .note--3 .note__tape{left:200.19px;top:8.99px}
  .note--3 .note__stars{left:55px;top:71.15px}
  .note--3 .note__text{left:55.2px;top:120.95px;width:270.23px}
  .stk--r1{left:308.87px;top:530.72px;width:73.66px;height:105.57px;--r:17.68deg;rotate:var(--r)}
  .stk--r2{left:753.34px;top:592.75px;width:72.73px;height:97.5px;--r:-32.52deg;rotate:var(--r)}
  .stk--r3{left:1197.29px;top:473.91px;width:86.42px;height:80.58px;--r:8.43deg;rotate:var(--r)}
  .grid--pink{background-size:42.6875px 42.6875px;background-position:var(--bleed,0px) 0}
  .visit-card{left:103.03px;top:78.83px;width:573.17px;height:510.58px;border-radius:20px}
  .map-card{left:689.62px;top:78.83px;width:573.17px;height:510.58px;border-radius:20px}
  .visit-eyebrow{left:141.1px;top:116.42px}
  .visit-title{left:141px;top:158.64px}
  .status{left:141px;top:268.95px}
  .hours{left:141px;top:344.24px;width:397px;gap:21px}
  .visit-tip{left:141px;top:452.54px;width:496px}
  .visit-insta{left:141px;top:509.67px;width:227px}
  .visit-dir{left:379px;top:509.67px;width:260px}
  .map{left:703.46px;top:91.17px;width:545.48px;height:485.09px}
  .map__clip{border-radius:13px}
  .map__img{left:-177.94px;top:-49.87px;width:758.76px;height:569.06px}
  .map__label--river{left:399.95px;top:451.57px;transform:translate(-50%,-50%) rotate(-4.03deg);width:240.25px}
  .map__label--lane{left:251.59px;top:144.62px;transform:translate(-50%,-50%) rotate(15.2deg)}
  .map__label--linden{left:72.7px;top:205.09px;transform:translate(-50%,-50%) rotate(-75.61deg)}
  .map__label--park{left:385.1px;top:20.08px}
  .map__shadow{left:185.21px;top:268.87px;width:40.93px;height:13.18px}
  .map__pin{left:177.86px;top:203.3px;width:55.55px;height:72.12px}
  .map__callout{left:283.61px;top:205.09px;width:159.32px;height:84.14px}
  .map__callout-text{left:366.62px;top:226.52px}
  .map__arrow{left:240.88px;top:247.12px;width:35.15px;height:32.04px;--r:-71.52deg;rotate:var(--r)}
  .footer-bg{top:-0.3px;height:907.64px;border-radius:43px}
  .wordmark{left:92.02px;top:43.53px}
  .stk--f1{left:71.76px;top:154.94px;width:88.18px;height:92.83px;--r:-3.89deg;rotate:var(--r)}
  .stk--f2{left:402.98px;top:255.29px;width:87.54px;height:77.13px;--r:0deg;rotate:var(--r)}
  .stk--f3{left:644.81px;top:168.75px;width:86.78px;height:70.1px;--r:-11.34deg;rotate:var(--r)}
  .stk--f4{left:1008.82px;top:109.06px;width:68.17px;height:91.39px;--r:-24.19deg;rotate:var(--r)}
  .stk--f5{left:1171.43px;top:237.8px;width:84.14px;height:92.41px;--r:-19.33deg;rotate:var(--r)}
  .pill--1{left:467.78px;top:92.03px;--r:-8.2deg}
  .pill--2{left:1113.7px;top:85.57px;--r:10.23deg}
  .pill--3{left:813.37px;top:353.03px;--r:5.84deg}
  .copyright{left:103px;top:401px}
  .footer-links{right:116px;top:401px;gap:40px;line-height:1.5}
}

/* ===================== mobile artboard ===================== */
@media (max-width: 1023.98px) {
  .stk--c1{left:-44.16px;top:194.49px;width:88.18px;height:92.83px;--r:-3.89deg;rotate:var(--r)}
  .stk--c2{left:325.3px;top:392.2px;width:78.8px;height:91.2px;--r:0deg;rotate:var(--r)}
  .stk--c3{left:-23.39px;top:120.95px;width:86.78px;height:70.1px;--r:-5.5deg;rotate:var(--r)}
  .stk--c4{left:348.45px;top:418.4px;width:52.5px;height:75.2px;--r:20deg;rotate:var(--r)}
  .stk--c5{left:329.03px;top:158.03px;width:87.54px;height:77.13px;--r:0deg;rotate:var(--r)}
  .item__pick{left:136.44px;top:-6.64px;transform:translate(-50%,-50%) rotate(-3.94deg)}
  .polaroid--1 figcaption{left:5px;right:0;top:241.22px}
  .polaroid--2 figcaption{left:0.86px;right:0;top:242.67px}
  .polaroid--3 figcaption{left:51.82px;width:158.33px;top:233.48px;white-space:normal;line-height:1.3;--r2:.26deg;rotate:var(--r2)}
  .stage{width:390px}
  .hero .stage{height:1036px}
  .guide .stage{height:838px}
  .story .stage{height:1771px}
  .events .stage{height:1734px}
  .reviews .stage{height:1434px}
  .visit .stage{height:1198px}
  .footer .stage{height:581px}
  .h2{font-size:76px;white-space:normal}
  .hero-loop{left:auto;right:calc(-66.7px - var(--bleed,0px));top:380.38px;width:640.61px;height:395.07px;scale:1 -1;rotate:-175.61deg}
  .logo{left:20px;top:22.21px}
  .nav{left:16px;right:16px;top:76px;width:auto;height:auto;flex-direction:column;align-items:stretch;gap:6px;background:var(--card);border-radius:22px;padding:14px;opacity:0;translate:0 -8px;pointer-events:none;transition:opacity .25s,translate .3s var(--ease)}
  .nav.is-open{opacity:1;translate:0 0;pointer-events:auto}
  .nav__links{flex-direction:column;align-items:stretch;gap:2px}
  .nav__links a{font-size:16px;padding:12px;border-radius:12px;background:none}
  .nav__links a:hover{background:var(--bg)}
  .nav__toggle{display:flex;align-items:center;justify-content:center;gap:7px;left:262px;top:21.9px;width:108px;height:43.7px;border:0;border-radius:100px;background:var(--card);font:400 16px/1.481 var(--f-mono);z-index:21}
  .nav__toggle-icon{display:grid;gap:2.3px;width:11.68px}
  .nav__toggle-icon i{display:block;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon i:first-child{transform:translateY(1.6px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon i:last-child{transform:translateY(-1.6px) rotate(-45deg)}
  .kicker{left:19.95px;top:118.69px}
  .hero-hl,.hero-note,.hero-arrow{display:none}
  .hero-title{font-size:76px}
  .hero-title{left:19.95px;top:166.46px}
  .hero-lede{font-size:17px}
  .hero-lede{left:19.95px;top:336.3px;width:350.41px}
  .hero-btn1{left:20px;top:446.92px}
  .hero-btn2{left:242px;top:444.92px}
  .hero-cup{left:25.13px;top:561.93px;width:350.98px;height:438px}
  .marquee__track span{font-size:15px;letter-spacing:.15px}
  .grid--blue{background-size:30.23px 30.23px;background-position:var(--bleed,0px) 0;background-image:linear-gradient(rgba(152,222,247,.24) 0 1.42px,transparent 1.42px),linear-gradient(90deg,rgba(152,222,247,.24) 0 1.42px,transparent 1.42px)}
  .guide-title{left:19.98px;top:48px;width:320.43px}
  .guide-sub,.reviews-sub{font-size:16px;white-space:normal}
  .guide-sub{left:19.98px;top:214.96px;width:320.43px}
  .tidy{left:20px;top:285px;color:#684F41}
  .key--1{left:10.24px;top:324.79px;width:200.2px;height:200.2px;--r:-11.02deg;rotate:var(--r)}
  .key--2{left:193.02px;top:344.06px;width:181.33px;height:181.33px;--r:7.52deg;rotate:var(--r)}
  .key--3{left:13.67px;top:490.21px;width:181.33px;height:181.33px;--r:0deg;rotate:var(--r)}
  .key--4{left:196.94px;top:476.75px;width:181.33px;height:181.33px;--r:5.26deg;rotate:var(--r)}
  .key--5{left:111.8px;top:605.63px;width:181.33px;height:181.33px;--r:3.81deg;rotate:var(--r)}
  .menu .stage{--fr:calc(20px / var(--k,1));--frs:calc(20px / var(--k,1));height:calc(829.12px + 2 * var(--fr))}
  .panel{left:calc(var(--frs) - var(--bleed,0px));right:calc(var(--frs) - var(--bleed,0px));top:var(--fr);height:829.12px;border-radius:14px}
  .menu-title{left:39.98px;top:calc(40.06px + var(--fr));width:320.43px}
  .footnote{left:39.98px;top:calc(207.02px + var(--fr));width:256.13px}
  .seg{left:39.98px;top:calc(268.06px + var(--fr));width:192.1px;height:46.86px}
  .filter-chip{left:240px;top:calc(274.06px + var(--fr));font-size:12px;gap:6px;padding:4px 4px 4px 12px}
  .filter-chip button{width:24px;height:24px}
  .round-btn{display:none}
  .track{left:calc(var(--frs) - var(--bleed,0px));right:calc(var(--frs) - var(--bleed,0px));top:calc(312.06px + var(--fr));height:480px;gap:29.61px;padding:33.81px 40px 0 calc(59px - var(--frs) + var(--bleed,0px));scroll-padding-left:calc(59px - var(--frs) + var(--bleed,0px))}
  .item{zoom:.79354}
  .empty{left:40px;top:calc(512.06px + var(--fr));width:310px}
  .story-loop{left:-39.92px;top:891.3px;width:646.24px;height:398.54px;--r:-10.09deg;rotate:var(--r)}
  .story-hl{left:57.03px;top:485.84px;width:197.45px;height:29.64px}
  .story-title{left:19.98px;top:47.82px;width:320.43px}
  .story-text{font-size:26px;line-height:1.43}
  .story-text{left:19.98px;top:371.74px;width:320.43px}
  .story-sign{font-size:16px;letter-spacing:-.16px}
  .story-sign{left:19.98px;top:583.64px}
  .fact--1{left:20px;top:646.73px;width:108.35px;height:108.35px}
  .fact--2{left:140.82px;top:646.73px;width:108.35px;height:108.35px}
  .fact--3{left:261.65px;top:646.73px;width:108.35px;height:108.35px}
  .fact b{top:15.16px}.fact span{top:58.53px;width:57.53px}
  .polaroid--1{left:37.19px;top:805.62px;width:258.62px;height:288.96px;--r:-7.25deg;rotate:var(--r)}
  .polaroid--2{left:97.79px;top:1125.12px;width:258.62px;height:288.96px;--r:5.65deg;rotate:var(--r)}
  .polaroid--3{left:33.67px;top:1430.12px;width:258.62px;height:288.96px;--r:1.83deg;rotate:var(--r)}
  .stk--story{left:285.3px;top:1506.4px;width:73.4px;height:80.4px;--r:9.79deg;rotate:var(--r)}
  .stripes{background-position:calc(var(--bleed,0px) - 2.39px) 0;background-image:linear-gradient(90deg,rgba(255,255,255,.15) 0 22.14px,transparent 22.14px)}
  .events-title{text-align:left}
  .events-title{left:19.98px;top:47.82px;width:285px}
  .events-sub{font-size:16px;line-height:1.5;letter-spacing:0;text-align:left}
  .events-sub{left:19.98px;top:289.26px;width:320.43px}
  .ticket--1{left:-2.71px;top:321.72px;scale:.89109}
  .ticket--2{left:-2.71px;top:764.55px;scale:.89109}
  .ticket--3{left:-2.71px;top:1214.18px;scale:.89109}
  .reviews-fill{top:30px}
  .reviews-wave{left:-364.01px;top:1.15px;width:1118.02px;height:1823.4px}
  .reviews-wave{content:url(images/v2/wave-m.svg)}
  .reviews-title{left:19.98px;top:48px;width:321.53px}
  .reviews-sub{left:19.98px;top:289.44px;width:320.43px}
  .note--1{left:15.57px;top:379.86px;width:352.14px;height:320.19px;--r:-2.17deg;rotate:var(--r)}
  .note--1 .note__tape{left:176.58px;top:3.96px;width:112.5px;height:29.02px}
  .note--1 .note__stars{left:49.6px;top:60.6px;width:117.1px;height:19.06px}
  .note--1 .note__text{left:49.73px;top:105.2px;width:245.4px}
  .note--2{left:11.2px;top:721.27px;width:360.18px;height:328.46px;--r:2.19deg;rotate:var(--r)}
  .note--2 .note__tape{left:175.09px;top:6.56px;width:112.5px;height:29.02px}
  .note--2 .note__stars{left:52.24px;top:62.9px;width:117.1px;height:19.06px}
  .note--2 .note__text{left:52.39px;top:107.53px;width:245.4px}
  .note--3{left:9.68px;top:1064.23px;width:363.58px;height:328.17px;--r:-0.46deg;rotate:var(--r)}
  .note--3 .note__tape{left:181.79px;top:8.17px;width:112.5px;height:29.02px}
  .note--3 .note__stars{left:49.9px;top:64.6px;width:117.1px;height:19.06px}
  .note--3 .note__text{left:50.09px;top:109.19px;width:245.4px}
  .stk--r1{left:266.53px;top:604.31px;width:65.98px;height:94.45px;--r:17.68deg;rotate:var(--r)}
  .stk--r2{left:254.33px;top:918.68px;width:65.13px;height:87.34px;--r:-32.52deg;rotate:var(--r)}
  .stk--r3{left:256.66px;top:1256.61px;width:77.39px;height:72.18px;--r:8.43deg;rotate:var(--r)}
  .grid--pink{background-size:30.23px 30.23px;background-position:var(--bleed,0px) 0;background-image:linear-gradient(rgba(247,195,176,.28) 0 1.42px,transparent 1.42px),linear-gradient(90deg,rgba(247,195,176,.28) 0 1.42px,transparent 1.42px)}
  .visit-card{left:20px;top:48px;width:350px;height:596.51px;border-radius:14px}
  .map-card{left:20px;top:660.51px;width:350px;height:489.96px;border-radius:14px}
  .visit-eyebrow{font-size:16px;letter-spacing:.64px}
  .visit-eyebrow{left:39.98px;top:75.8px}
  .visit-title{white-space:normal}
  .visit-title{left:39.98px;top:112.41px;width:382.18px}
  .status{font-size:16px}
  .status{left:39.98px;top:277.97px}
  .hours{font-size:16px}
  .hours div.is-today dt::after{margin-left:.35em;font-size:.7em}
  .hours{left:45px;top:344.09px;width:282px;gap:14px}
  .visit-tip{font-size:16px;letter-spacing:.16px}
  .visit-tip{left:45px;top:436.24px;width:306.36px}
  .visit-insta{left:45px;top:509px;width:300px}
  .visit-dir{left:45px;top:565px;width:300px}
  .map{left:31.03px;top:671.06px;width:327.95px;height:468.46px}
  .map__clip{border-radius:10px}
  .map__img{left:-192.9px;top:-48.06px;width:734.83px;height:551.1px}
  .map__label--river{left:231.42px;top:441.23px;transform:translate(-50%,-50%) rotate(-4.03deg);width:240.25px}
  .map__label--lane{left:186.67px;top:131.2px;transform:translate(-50%,-50%) rotate(15.2deg)}
  .map__label--linden{left:55.75px;top:189.24px;transform:translate(-50%,-50%) rotate(-75.61deg)}
  .map__label--park{left:283.44px;top:124.76px;transform:translate(-50%,-50%) rotate(15deg)}
  .map__shadow{left:142.79px;top:264.22px;width:40.93px;height:13.18px}
  .map__pin{left:135.46px;top:198.69px;width:55.57px;height:72.12px}
  .map__callout{left:146.64px;top:290.92px;width:159.32px;height:84.14px}
  .map__callout-text{left:229.74px;top:312.99px}
  .map__arrow{left:194.9px;top:251.49px;width:35.15px;height:32.1px;--r:-2.39deg;rotate:var(--r)}
  .footer-bg{top:0;height:907.64px;border-radius:29px}
  .wordmark{font-size:212.81px;line-height:.86;white-space:normal;letter-spacing:-12.77px}
  .wordmark__slow{letter-spacing:-8.51px}.wordmark__pour{letter-spacing:-12.77px}
  .wordmark{left:27.61px;top:47.1px;width:351.45px}
  .stk--f1,.stk--f4{display:none}
  .stk--f2{left:33.92px;top:126.38px;width:59.32px;height:52.29px;--r:0deg;rotate:var(--r)}
  .stk--f3{left:281.94px;top:196.82px;width:58.13px;height:46.96px;--r:7.9deg;rotate:var(--r)}
  .stk--f5{left:59.69px;top:333.57px;width:63.46px;height:69.68px;--r:-23.8deg;rotate:var(--r)}
  .pill--1{left:253.27px;top:59.73px;--r:-4.69deg}
  .pill--2{left:196.29px;top:251.82px;--r:10.23deg}
  .pill--3{left:319px;top:398.35px;--r:-11.64deg}
  .copyright{opacity:.5}
  .copyright{left:20.01px;top:498.58px}
  .footer-links{right:auto;line-height:1.481}
  .footer-links{left:20px;top:437px;gap:37px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}