/* KYUU CAFE — photography first, calm UI.
   One accent: terracotta, for primary CTAs and the band only.
   Fraunces (display, lowercase) · Fredoka (wordmark + band only) · Nunito (body, labels). */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --header-total: calc(var(--header-h) + var(--safe-top));
  --bone: #f3efe8;
  --cocoa: #4a3226;
  --espresso: #1c1b1a;
  --terracotta: #c1602e;      /* the band */
  --terracotta-ink: #b75b2c;  /* primary CTA fill: white text passes AA (4.6:1) */
  --taupe: #7a6f68;           /* decorative */
  --taupe-ink: #6f645d;       /* muted text: AA on bone */
  --latte: #d9b98f;           /* borders, subtle fills */
  --latte-soft: #ece0cf;
  --matcha: #7a9a3f;
  --ube: #a98bc7;
  --strawberry: #d9534f;

  --r: 20px;
  --gutter: 20px;
  --sec: 72px;
  --header-h: 68px;
  --line: rgba(74, 50, 38, .14);
  --line-dark: rgba(243, 239, 232, .16);
  --warm: saturate(1.03) sepia(.07) contrast(1.02);

  --display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --brand: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* stand-ins sized to the web fonts' widths and metrics (measured from the Google files), so text keeps its line breaks
   and baseline while Fraunces and Nunito load, and nothing moves when they swap in. Fraunces' semibold narrows at display
   sizes (optical sizing), hence the smaller bold stand-in; 84% keeps "stay kyuurious." on one line from 360px up. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 100 599; size-adjust: 105%; ascent-override: 93.1%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; font-weight: 100 599; size-adjust: 105%; ascent-override: 93.1%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 84%; ascent-override: 116.4%; descent-override: 30.4%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 599; size-adjust: 100%; ascent-override: 101.1%; descent-override: 35.3%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 1000; size-adjust: 97.9%; ascent-override: 103.3%; descent-override: 36.1%; line-gap-override: 0%; }
@media (min-width: 900px) { :root { --gutter: 48px; --sec: 120px; --header-h: 80px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* anchors (/#about), plain jumps and keyboard focus land flush under the header: 1px short of it, so a section starts
   behind the header's bottom border rather than a fraction of a pixel below it (site.js lands the same way) */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-total) - 1px); -webkit-text-size-adjust: 100%; }
/* menu page, phones: the category chips stick under the header (10px + 44px chip + 10px + 1px border), so focus and anchors clear both */
@media (max-width: 899px) { html:has(.menu-cats) { scroll-padding-top: calc(var(--header-total) + 65px + 12px); } }
body { font-family: var(--body); font-size: 1.03rem; line-height: 1.6; background: var(--bone); color: var(--cocoa); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* homepage: iOS Safari paints the status-bar strip from the body's colour while the header is still transparent over the
   hero (it ignores theme-color), so the body is espresso and the strip reads as part of the photo; main keeps the page
   bone. Once the header is frosted or solid, Safari takes the header's colour instead. */
.home { background: var(--espresso); }
.home main { background: var(--bone); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
abbr { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

.wrap { width: min(1280px, 100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--bone); color: var(--espresso); border-radius: 12px; }
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; }
.on-dark :focus-visible, .fall :focus-visible { outline-color: var(--bone); }
/* over the hero photo the header is transparent or frosted espresso, so rings there are bone too */
.hero :focus-visible, .header:not(.is-solid):not(.nav-open) :focus-visible { outline-color: var(--bone); }
.num { font-variant-numeric: tabular-nums; }

/* one photo treatment everywhere */
.ph { width: 100%; height: 100%; object-fit: cover; filter: var(--warm); }
.frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--latte-soft); }
.frame .ph { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
/* arch mask: a semicircle dome exactly half the frame wide */
.arch { container-type: inline-size; overflow: visible; background: none; }
.arch > .ph, .arch > picture .ph, .arch > .arch__fill { border-radius: 50cqi 50cqi var(--r) var(--r); }

/* type */
.title { font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 12vw, 7rem); line-height: .92; letter-spacing: -.02em; text-transform: lowercase; }
.title, .fcard h3, .mcard h3, .mcat__head h2, .dotd__name { text-wrap: balance; }
.label { font-family: var(--body); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.lede { color: var(--taupe-ink); font-size: 1.08rem; max-width: 34ch; }
.on-dark { background: var(--espresso); color: var(--bone); }
.on-dark .lede { color: rgba(243, 239, 232, .78); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s;
}
.btn--primary { background: var(--terracotta-ink); color: #fff; }
.btn--primary:hover { background: #9f4d24; }
.btn--outline { border-color: var(--cocoa); color: var(--cocoa); }
.btn--outline:hover { background: var(--cocoa); color: var(--bone); }
.btn--outline-light { border-color: rgba(255, 255, 255, .85); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--espresso); }
.btn--light { background: var(--bone); color: var(--cocoa); }
.btn--light:hover { background: #fff; }
.btn--sm { min-height: 42px; padding: 0 20px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--latte); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.textlink:hover { text-decoration-color: currentColor; }

/* ---------- Sections ---------- */
.sec { padding: var(--sec) 0; }
.sec-head { display: grid; gap: 16px; margin-bottom: 40px; }
.sec-head .lede { margin-top: 16px; }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-bottom: 64px; }
}

/* ---------- Nav: transparent over the hero, solid bone on scroll ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-total); padding-top: var(--safe-top); color: var(--bone); transition: background-color .3s, color .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.header.is-solid, .header.nav-open { background: var(--bone); color: var(--cocoa); border-bottom-color: var(--line); }
/* while still over the photo: a frosted espresso bar, so the nav never sits on top of the hero text */
.header.is-scrolled:not(.is-solid):not(.nav-open) { background: rgba(28, 27, 26, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: rgba(243, 239, 232, .1); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
/* logo mark as a mask, so it takes the nav text colour (bone over the hero, cocoa when solid) */
.brand__mark { width: 24px; aspect-ratio: 160 / 215; background: currentColor; -webkit-mask: url(images/logo-mark-mask.png) center / contain no-repeat; mask: url(images/logo-mark-mask.png) center / contain no-repeat; transition: background-color .3s; }
.brand span { font-family: var(--brand); font-weight: 600; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 359px) { .brand span { font-size: 1.45rem; } }
.header__actions { display: flex; align-items: center; gap: 6px; }
/* phones & tablets: Order sits beside the menu button at a full 44px tap height (desktop keeps its 42px pill) */
@media (max-width: 899px) { .header__actions { gap: 8px; } .header__order { min-height: 44px; padding: 0 18px; } }
.nav a { text-decoration: none; }
.menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; margin-right: -10px; -webkit-tap-highlight-color: transparent; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
/* phones & tablets: the menu is a bone panel that drops in under the header and ends below Directions / Call, over a
   dimmed page (tap it to close). The page behind is locked (site.js); a short landscape screen scrolls the panel. */
@media (max-width: 899px) {
  .nav {
    position: fixed; inset: var(--header-total) 0 auto; z-index: 49; display: flex; flex-direction: column;
    max-height: calc(100dvh - var(--header-total)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bone); color: var(--cocoa); border-radius: 0 0 24px 24px; box-shadow: 0 24px 48px -28px rgba(28, 27, 26, .45);
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 24px max(var(--gutter), env(safe-area-inset-left, 0px));
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
  .nav > a { display: flex; align-items: center; flex-shrink: 0; min-height: 62px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 500; font-size: 1.9rem; letter-spacing: -.02em; text-transform: lowercase; }
  .nav__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
  .nav__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 54px; padding: 0 12px;
    border: 1.5px solid var(--cocoa); border-radius: 999px; color: var(--cocoa);
    font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    transition: background-color .25s, color .25s;
  }
  .nav__btn:active { background: var(--cocoa); color: var(--bone); }
  .nav__btn svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* the dimmed page under the panel; it belongs to the header, so a tap on it reaches site.js as a tap on the header */
  .header::after {
    content: ""; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: 100dvh; background: rgba(28, 27, 26, .45);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .header.nav-open::after { opacity: 1; visibility: visible; transition: opacity .3s ease; }
}
html.nav-locked, html.nav-locked body { overflow: hidden; }
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .header__actions { justify-self: end; }
  .nav { display: flex; gap: 40px; }
  .nav__quick { display: none; }
  .nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
  .nav a::after { content: ""; position: absolute; left: 0; right: .12em; bottom: 9px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .nav a:hover::after { transform: none; }
  .brand__mark { width: 28px; }
  .brand span { font-size: 2rem; }
}

/* ---------- Open / Closed status ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .9rem; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.status b { font-weight: 700; }
.status[data-state="open"] { --st: #8fd49a; }
.status[data-state="soon"] { --st: #f3c27a; }
.status[data-state="closed"] { --st: #f09a8a; }

/* ---------- Hero: full-bleed counter photo ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; color: var(--bone); background: var(--cocoa); }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: center; filter: var(--warm); }
/* the hero photo is backdrop only: no image context menu, drag or long-press save */
.hero__media { pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hero__media img { -webkit-user-drag: none; }
/* phones: the landscape photo, framed on the logo arch and counter */
@media (max-width: 899px) { .hero__media img { object-position: 64% 50%; } }
/* motion.js' parallax (768px and up) starts the photo at scale(1.1). Painting it there from the start means the photo
   never zooms when the script takes over, however late that is on a slow connection. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) { .hero__media img { transform: scale(1.1); } }
/* (the portrait source already centres the arches, so phones use center too) */
/* readability only where the text sits (bottom-left), plus a light scrim under the transparent nav */
/* phones: text spans the full width, so the scrim rises from the bottom edge */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(28, 27, 26, .82) 0%, rgba(28, 27, 26, .72) 38%, rgba(28, 27, 26, 0) 62%),
    linear-gradient(to bottom, rgba(28, 27, 26, .72) 0, rgba(28, 27, 26, .45) var(--header-total), rgba(28, 27, 26, 0) calc(var(--header-total) + 70px));
}
@media (min-width: 900px) {
  .hero::after {
    /* bottom-left only: deep enough for AA over the lit floor, clear of the counter's arches and logo */
    background:
      linear-gradient(to top right, rgba(28, 27, 26, .88) 0%, rgba(28, 27, 26, .62) 36%, rgba(28, 27, 26, 0) 64%),
      linear-gradient(to bottom, rgba(28, 27, 26, .8) 0, rgba(28, 27, 26, .5) var(--header-total), rgba(28, 27, 26, 0) calc(var(--header-total) + 90px));
  }
}
.hero__body { position: relative; z-index: 1; padding-bottom: 36px; }
.hero__content { max-width: 560px; }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.03em; text-transform: lowercase; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero__ctas .btn { padding: 0 24px; }
/* View Menu gets a box a little wider than its label in either font, so it (and Order Online beside it) never moves
   when Nunito swaps in; both still fit on one row at 360px */
.hero__ctas .btn:first-child { min-width: 142px; }
/* one fixed line (the status text's own 1.6 line-height), filled by site.js or not, in either font */
.hero__status { display: flex; min-height: calc(.9rem * 1.6); margin-top: 16px; }
@media (min-width: 900px) {
  .hero { min-height: 620px; }
  .hero__body { padding-bottom: 64px; }
  .hero__ctas { gap: 12px; margin-top: 30px; }
  .hero__ctas .btn { padding: 0 32px; }
  .hero__ctas .btn:first-child { min-width: 164px; }
}

/* ---------- Order sheet (the only element with a shadow) ---------- */
.order-sheet { overscroll-behavior: contain; border: 0; margin: auto; padding: 28px; width: min(440px, calc(100% - 32px)); border-radius: 28px; background: var(--bone); color: var(--cocoa); box-shadow: 0 30px 80px -20px rgba(28, 27, 26, .5); }
.order-sheet::backdrop { background: rgba(28, 27, 26, .6); }
.order-sheet[open] { animation: pop-in .3s cubic-bezier(.2,.8,.2,1); }
.order-sheet__grip { display: none; }
.order-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.order-sheet__head h2 { font-family: var(--display); font-weight: 600; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; text-transform: lowercase; }
.order-sheet__head p { color: var(--taupe-ink); margin-top: 8px; font-size: .95rem; }
.order-sheet__close { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; margin: -6px -6px 0 0; border-radius: 50%; border: 1px solid var(--line); }
.order-sheet__close:hover { background: var(--latte-soft); }
.order-sheet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.order-option { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); background: #faf7f2; text-decoration: none; transition: border-color .2s; }
.order-option:hover { border-color: var(--cocoa); }
.order-option__mark { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.order-sheet .order-option__mark svg { stroke: none; }
.order-option__mark--dd { background: #ff3008; }
.order-sheet .order-option__mark--dd svg { width: 30px; height: 30px; fill: #fff; }
.order-option__mark--ue { background: #06c167; }
.order-sheet .order-option__mark--ue svg { width: 34px; height: 34px; fill: #000; }
.order-option__text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.order-option__text strong { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.order-option__text small { color: var(--taupe-ink); font-size: .88rem; }
.order-sheet__note { margin-top: 16px; font-size: .84rem; color: var(--taupe-ink); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 899px) {
  .order-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); }
  .order-sheet[open] { animation: sheet-up .32s cubic-bezier(.2,.8,.2,1); }
  .order-sheet__grip { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--latte); margin: 0 auto 18px; }
}

/* ---------- Motion: subtle, 400ms, only as things enter view ---------- */
.js .reveal.is-visible { animation: rise .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: .5; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* motion.js (homepage): Lenis smooth scroll, frames that clip their reveal over a cocoa placeholder */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
html.lenis.lenis-stopped { overflow: clip; }
.motion .band__track { animation: none; }
/* section titles rise from behind a per-line mask (motion.js); the tight line height would clip ascenders and the tails
   of letters like "y", so each mask reaches past its line without moving the layout */
.title-line-mask { padding: .18em 0 .3em; margin: -.18em 0 -.3em; }
.motion .about__main, .motion .about__g { overflow: hidden; border-radius: var(--r); }
.motion .about__main, .motion .about__g { background: #4a3226; }
/* card photos: a 20px blurred preview (scripts/lqip.py) sits behind each image until it has loaded and faded in */
.fcard__ph, .mcard__ph, .dotd__arch { position: relative; isolation: isolate; }
.fcard__ph::before, .mcard__ph::before, .dotd__arch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lqip) center / cover no-repeat; filter: blur(12px); transform: scale(1.05); }
.is-loaded::before { content: none; }
.motion .about__g picture { display: block; height: 100%; }
@media (hover: hover) { .card:hover .ph { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Shared card pieces ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; background: var(--latte-soft); color: var(--cocoa); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tag, var(--latte)); }
.tag--matcha { --tag: var(--matcha); background: #e6ebd8; }
.tag--ube { --tag: var(--ube); background: #ece4f3; }
.tag--strawberry { --tag: var(--strawberry); background: #f7e0de; }
.tag--seasonal { --tag: var(--latte); }
.placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, var(--latte-soft), #e3d3bd); }
.placeholder svg { width: 48px; height: 48px; fill: none; stroke: rgba(74, 50, 38, .35); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Fall menu (seasonal): the café's own terracotta and falling leaves ---------- */
/* sampled from the plaster arches behind the counter, deepened just enough that bone text and the
   small peach labels stay at 4.5:1 or better everywhere, including under the warm glow */
.fall { position: relative; isolation: isolate; overflow: hidden; color: var(--bone);
  --fall-ink: #fdebd9;
  background:
    radial-gradient(42% 52% at 84% 30%, rgba(214, 132, 88, .12), transparent 70%),
    linear-gradient(172deg, #9c452b 0%, #a44b30 46%, #a0482c 100%);
}
.fall__leaves { position: absolute; inset: 0; z-index: -1; pointer-events: none; container-type: size; }
.fall__leaf { position: absolute; left: var(--x); top: -60px; width: var(--s); height: var(--s); color: var(--c); opacity: .6; animation: leaf-fall var(--d) linear var(--dl) infinite; }
.fall__leaf svg { display: block; width: 100%; height: 100%; fill: currentColor; animation: leaf-sway var(--sw) ease-in-out infinite alternate; }
@keyframes leaf-fall { to { transform: translateY(calc(100cqh + 120px)); } }
@keyframes leaf-sway { from { transform: translateX(-18px) rotate(-35deg); } to { transform: translateX(18px) rotate(40deg); } }
/* no motion: leaves rest where they are, scattered */
@media (prefers-reduced-motion: reduce) { .fall__leaf { top: var(--y); opacity: .3; } }
@media (max-width: 899px) { .fall__leaf:nth-child(3n) { display: none; } }
/* fall decor: board-style leaf sprays in the top corners, pumpkins along the bottom */
.fall { padding-bottom: calc(var(--sec) + 70px); }
.fall__leaf--far { opacity: .3; filter: blur(2.5px); }
.fall__leaf--acorn { opacity: .85; }
.fall__leaf--acorn svg { animation-name: acorn-tumble; animation-timing-function: linear; animation-direction: normal; }
@keyframes acorn-tumble { to { transform: rotate(360deg); } }
.fall__spray { position: absolute; z-index: -1; top: 0; width: clamp(150px, 22vw, 300px); pointer-events: none; transform-origin: top right; animation: spray-sway 7s ease-in-out infinite alternate; }
.fall__spray svg { display: block; width: 100%; height: auto; overflow: visible; }
.fall__spray--r { right: -10px; }
.fall__spray--l { left: -10px; top: -34px; width: clamp(120px, 12vw, 170px); transform: scaleX(-1); transform-origin: 50% 0; animation-name: spray-sway-l; animation-delay: -3s; }
@keyframes spray-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(2deg); } }
@keyframes spray-sway-l { from { transform: scaleX(-1) rotate(-1.5deg); } to { transform: scaleX(-1) rotate(2deg); } }
.fall__patch { position: absolute; z-index: -1; bottom: 14px; display: flex; align-items: flex-end; pointer-events: none; }
.fall__patch--l { left: max(8px, calc((100% - 1280px) / 2 - 40px)); }
.fall__patch--r { right: max(8px, calc((100% - 1280px) / 2 - 40px)); }
.fall__pk { display: block; width: 110px; height: 96px; filter: drop-shadow(0 8px 10px rgba(80, 22, 8, .35)); transform-origin: 50% 100%; animation: pk-rock 5s ease-in-out infinite alternate; }
.fall__pk--lg { width: 140px; height: 122px; }
.fall__pk--md { width: 118px; height: 103px; margin-left: -18px; animation-delay: -2s; }
.fall__pk--sm { width: 78px; height: 68px; margin-left: -22px; animation-delay: -1s; }
.fall__patch--r .fall__pk--sm { margin-left: -6px; }
.fall__pk--cream { --pk: #f6e7d0; --pk-dark: #e3c9a6; --pk-stem: #6b5b3a; }
.fall__acorn { width: 26px; height: 32px; margin: 0 -2px -2px 4px; filter: drop-shadow(0 4px 4px rgba(80, 22, 8, .3)); }
.fall__patch--r .fall__acorn { margin: 0 4px -2px 0; transform: rotate(-18deg); }
@keyframes pk-rock { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.fall__eyepk { width: 18px; height: 16px; margin-right: 8px; vertical-align: -3px; }
@media (max-width: 899px) {
  .fall { padding-bottom: calc(var(--sec) + 44px); }
  .fall__pk { width: 72px; height: 63px; }
  .fall__pk--lg { width: 88px; height: 77px; }
  .fall__pk--md { width: 76px; height: 66px; }
  .fall__pk--sm { width: 52px; height: 45px; }
  .fall__spray { width: 120px; }
  .fall__spray--l { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fall__spray, .fall__pk, .fall__leaf--acorn svg { animation: none; } }
.fall__eyebrow { color: var(--fall-ink); margin-bottom: 14px; }
.fall .lede { color: var(--bone); }
/* pause and prev / next: mouse and trackpad only (on phones a finger on the row holds it still), once site.js drives them */
.fall__actions { justify-self: start; display: none; flex-wrap: wrap; align-items: center; gap: 12px; }
/* prev / next for the rail: mouse and trackpad only (touch swipes it), and only once site.js can drive them */
.fall__arrows { display: none; gap: 10px; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) { .js .fall__actions, .js .fall__arrows { display: flex; } }
.fall__arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(243, 239, 232, .6); color: var(--bone); transition: background-color .2s, border-color .2s, color .2s, opacity .2s; }
.fall__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fall__arrow:not([aria-disabled="true"]):hover { background: var(--bone); border-color: var(--bone); color: #8e3d24; }
.fall__arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
/* pause / play for the gliding row: shown on every device (site.js unhides it only when the row moves), icon only */
.fall__pause[hidden] { display: none; }
.fall__pause .i-pause path { stroke-width: 2.2; }
.fall__pause .i-play, .fall__pause.is-paused .i-pause { display: none; }
.fall__pause.is-paused .i-play { display: block; }
/* the drinks: one row that scrolls sideways and settles card by card. It runs out to the screen edges with the first card
   in line with the heading (--bleed is the space beside .wrap, worked out without % so scroll-padding can use it too).
   The extra room above and below keeps focus rings and the cards' 20px rise (motion.js) from being clipped. */
.fall__rail {
  --bleed: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), (100vw - 1280px) / 2);
  --fc-w: min(61vw, 255px); --fc-gap: 14px;
  display: flex; gap: var(--fc-gap);
  margin: -8px calc(-1 * var(--bleed)) -28px; padding: 8px var(--bleed) 28px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed);
  scrollbar-width: none;
}
.fall__rail::-webkit-scrollbar { display: none; }
/* gliding on its own (site.js): snapping would fight the slow drift */
.fall__rail.is-looping { scroll-snap-type: none; }
.fcard { position: relative; flex: 0 0 var(--fc-w); scroll-snap-align: start; display: flex; flex-direction: column; }
@media (min-width: 600px) { .fall__rail { --fc-gap: 18px; } }
.fall .sec-head { margin-bottom: 32px; }
.fcard__ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: rgba(120, 40, 18, .22); border: 1px dashed rgba(255, 226, 200, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fcard__ph:has(img) { border: 0; }
.fcard__zoom { display: block; width: 100%; padding: 0; color: inherit; cursor: zoom-in; }
.fcard__zoom .ph { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fcard__zoom:hover .ph { transform: scale(1.03); }
.fcard__zoom .mf__zoomicon { right: 10px; bottom: 10px; width: 30px; height: 30px; }
.fcard__zoom .mf__zoomicon svg { width: 16px; height: 16px; }
.fcard__zoom:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.fcard__ph .ph { position: absolute; inset: 0; }
.fcard__n { position: absolute; z-index: 1; top: 8px; left: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--bone); color: #8e3d24; font-family: var(--display); font-weight: 600; font-size: .85rem; }
.fcard__soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: rgba(255, 226, 200, .85); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fcard__soon svg { width: 44px; height: 44px; fill: currentColor; opacity: .8; }
.fcard__kind { margin-top: 12px; color: var(--fall-ink); font-size: .7rem; }
.fcard h3 { margin-top: 3px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.02em; }
.fcard__price { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .88rem; }
.fcard__oz { font-weight: 400; font-size: .72rem; }
/* the section ends on its next step: the sign line, then the way to the full fall menu */
.fall__end { margin-top: 32px; display: grid; justify-items: center; gap: 18px; }
.fall__sign { text-align: center; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--fall-ink); }
@media (min-width: 900px) {
  .fall__rail { --fc-w: clamp(255px, 22vw, 306px); --fc-gap: 22px; }
  .fall .sec-head { margin-bottom: 44px; }
  .fcard h3 { font-size: 1.2rem; }
}

/* ---------- Drink of the month: one featured drink ---------- */
.dotd__card {
  --tint: var(--latte-soft); --tint-deep: #e3d3bd; --muted: #645951;
  position: relative;
  display: grid; gap: 28px; padding: 16px 16px 28px; border-radius: 32px; background: var(--tint);
}
.dotd__card--matcha { --tint: #e6ebd8; --tint-deep: #d6dfc0; }
.dotd__card--strawberry { --tint: #f6e3df; --tint-deep: #eecdc6; }
.dotd__card--cocoa { --tint: #eadccb; --tint-deep: #dcc6ad; }

/* Monkey Business mascot, perched on the card's top-right corner */
.monkey { position: absolute; z-index: 3; top: -52px; right: 2px; width: 84px; height: 84px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.monkey__body { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; animation: monkey-idle 3.2s ease-in-out infinite; }
.monkey__body img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(74, 50, 38, .22)); transform: rotate(var(--look, 0deg)); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.monkey:hover .monkey__body { animation: monkey-wiggle .6s ease-in-out infinite; }
.monkey.is-hop .monkey__body { animation: monkey-hop .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes monkey-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4px) scale(1.02, .98); } }
@keyframes monkey-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes monkey-hop { 0% { transform: translateY(0) scale(1.1, .88); } 45% { transform: translateY(-26px) scale(.94, 1.08) rotate(-6deg); } 75% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
.monkey__bubble { position: absolute; right: 78%; bottom: 74%; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: var(--bone); color: var(--cocoa); box-shadow: 0 6px 16px rgba(74, 50, 38, .16); font-family: var(--brand); font-size: .86rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 100% 100%; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.monkey__bubble.is-on { opacity: 1; transform: none; }
.monkey__hint { position: absolute; right: 96%; top: 27%; display: flex; align-items: center; gap: 2px; color: var(--cocoa); white-space: nowrap; transform: rotate(-4deg); transform-origin: 100% 50%; animation: hint-nudge 2.4s ease-in-out infinite; transition: opacity .25s; pointer-events: none; }
/* a bone sticker-pill, so the words stay crisp over the section, the card's edge or its outline */
.monkey__hint-text { padding: 4px 11px 5px; border-radius: 999px; background: var(--bone); box-shadow: 0 4px 12px rgba(74, 50, 38, .16); font-family: var(--brand); font-size: 1rem; font-weight: 600; line-height: 1.1; }
/* the arrow ends level and is turned (--aim) so its tip points at the monkey's head: slightly up on phones and tablets,
   down toward the bigger monkey on desktop */
.monkey__hint svg { --aim: -4deg; width: 28px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(var(--aim)); }
.monkey.is-tapped .monkey__hint, .monkey:has(.monkey__bubble.is-on) .monkey__hint { opacity: 0; }
@keyframes hint-nudge { 0%, 100% { transform: rotate(-4deg) translateX(0); } 50% { transform: rotate(-4deg) translateX(-5px); } }
.monkey__pop { position: absolute; left: 50%; top: 30%; z-index: 4; font-size: 1.2rem; pointer-events: none; animation: monkey-pop 1s ease-out forwards; }
@keyframes monkey-pop { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), -70px) scale(1.1) rotate(var(--rot)); } }
.monkey:focus-visible { outline: 3px solid var(--terracotta-ink); outline-offset: 4px; border-radius: 50%; }
@media (min-width: 900px) { .monkey { top: -34px; right: 6px; width: 116px; height: 116px; } .monkey__hint { top: 2%; } .monkey__hint-text { font-size: 1.1rem; } .monkey__hint svg { --aim: 28deg; } }
@media (prefers-reduced-motion: reduce) { .monkey__body, .monkey:hover .monkey__body, .monkey.is-hop .monkey__body, .monkey__hint { animation: none; } .monkey__pop { display: none; } }

/* the photo sits in an arch, with a thin offset outline like the lit arches behind the counter */
.dotd__media { position: relative; container-type: inline-size; padding: 10px; }
.dotd__media::before { content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50cqi 50cqi 28px 28px; pointer-events: none; }
.dotd__arch { aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(50cqi - 10px) calc(50cqi - 10px) 20px 20px; background: var(--tint-deep); }
.dotd__arch picture { display: contents; }
/* rotating "drink of the month" sticker */
.dotd__badge { position: absolute; top: 4%; right: -2%; width: clamp(88px, 26cqi, 124px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--bone); color: var(--cocoa); }
.dotd__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.dotd__badge text { font-family: var(--body); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.dotd__badge span { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 6.5cqi, 1.7rem); line-height: 1; letter-spacing: -.02em; text-transform: lowercase; }
@keyframes spin { to { transform: rotate(360deg); } }
/* phones & tablets: the sticker sits in the space beside the drink's name, leaving the photo clear;
   desktop keeps it on the photo's corner, where it bridges the photo and the words */
.dotd__badge--photo { display: none; }
.dotd__badge--name { position: relative; top: auto; right: auto; flex-shrink: 0; width: 92px; }
.dotd__badge--name span { font-size: 1.35rem; }
.dotd__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.dotd__title .dotd__name { margin-top: 0; }
@media (min-width: 900px) { .dotd__badge--photo { display: grid; } .dotd__badge--name { display: none; } }
[data-dotm-stale] .dotd__badge { display: none; }

.dotd__body { padding-inline: 8px; }
.dotd__day { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.dotd__today { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cocoa); color: var(--bone); font-size: .72rem; }
.dotd__name { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: clamp(2.5rem, 9vw, 4.5rem); line-height: .95; letter-spacing: -.03em; }
/* credit the barista who dreamed it up */
.dotd__by { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.dotd__by-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--cocoa); color: var(--bone); font-family: var(--display); font-weight: 600; font-size: 1rem; }
.dotd__by > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.dotd__by-role { color: var(--muted); font-size: .72rem; }
.dotd__by-name { font-family: var(--display); font-weight: 500; font-size: 1.1rem; }
.dotd__blurb { margin-top: 18px; font-size: 1.08rem; line-height: 1.65; max-width: 44ch; }
.dotd__in { margin-top: 26px; color: var(--muted); }
.dotd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dotd__chips li { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(74, 50, 38, .1); font-size: .9rem; }
.dotd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(74, 50, 38, .14); }
.dotd__price { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; color: var(--muted); }
.dotd__price b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; color: var(--cocoa); }
.dotd__price i { font-style: normal; margin-inline: 4px; }
.dotd__note { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe-ink); }
.dotd__meta .tag { background: rgba(255, 255, 255, .6); }
.dotd__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 26px; }

@media (min-width: 900px) {
  .dotd .sec-head { align-items: end; }
  .dotd__card { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); padding: 32px clamp(32px, 5vw, 72px) 32px 32px; border-radius: 40px; }
  .dotd__body { padding: 0; }
  .dotd__badge { right: -6%; }
}

/* ---------- Menu highlights ---------- */
.highlights__head .lede { margin-top: 16px; }
.highlights__head .btn { margin-top: 28px; }
.highlights__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; margin-top: 44px; }
.mcard__ph { aspect-ratio: 4 / 5; }
.mcard__zoom { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.mcard__zoom picture, .mcard__zoom .ph { display: block; width: 100%; height: 100%; }
.mcard__zoom .mf__zoomicon { right: 12px; bottom: 12px; width: 34px; height: 34px; }
.mcard__zoom .mf__zoomicon svg { width: 18px; height: 18px; }
.mcard__zoom:hover .ph { transform: scale(1.03); }
.mcard__zoom:focus-visible { outline: 3px solid var(--terracotta-ink); outline-offset: 3px; }
.mcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 16px; }
.mcard h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.15; letter-spacing: -.02em; }
.mcard__row .num { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.mcard p { margin-top: 6px; font-size: .92rem; line-height: 1.45; color: var(--taupe-ink); }
.mcard .tag { margin-top: 12px; }
@media (max-width: 480px) {
  .mcard__row { flex-direction: column; gap: 2px; }
}
/* desktop: cards stay ≤ 240px so the 300px product photos are never upscaled */
@media (min-width: 900px) {
  .highlights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; margin-top: 56px; }
  .mcard h3 { font-size: 1.35rem; }
}
/* wide: the heading sits beside the grid; below 1200px its column is too narrow for the 7rem "menu", so it stays on top */
@media (min-width: 1200px) {
  .highlights__inner { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 768px); gap: 0 64px; align-items: start; }
  .highlights__head { position: sticky; top: calc(var(--header-total) + 48px); }
  .highlights__grid { grid-template-columns: repeat(3, minmax(0, 240px)); gap: 56px 24px; margin-top: 0; }
  .board { grid-column: 2; }
}

/* straight into the board: category chips, same pill as the menu page's mobile tabs */
.board { display: grid; gap: 22px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--latte); }
.board__title { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; text-transform: lowercase; }
.board__group { display: grid; gap: 10px; }
.board__label { font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-ink); }
.board__links { display: flex; flex-wrap: wrap; gap: 8px; }
.board__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #faf7f2; font-weight: 700; font-size: .93rem; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.board__links a:hover { background: var(--cocoa); border-color: var(--cocoa); color: var(--bone); }
@media (min-width: 900px) {
  .board { gap: 18px; margin-top: 72px; }
  .board__group { grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 16px; }
  .board__label { padding-top: 13px; align-self: start; }
}

/* ---------- About: the real room ---------- */
.about { position: relative; isolation: isolate; overflow: hidden; background: var(--latte-soft); }
/* sakura: quiet decoration behind the About content */
.about__sakura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.about__branch { position: absolute; height: auto; }
.about__branch--tr { top: 20px; right: -6px; width: clamp(300px, 43vw, 620px); }
.about__branch img { display: block; width: 100%; height: auto; opacity: .95; }
.about__petal svg { fill: #f2b6c3; }
.about__petals { position: absolute; inset: 0; container-type: size; }
.about__petal { position: absolute; top: -20px; left: var(--x); width: var(--s); height: var(--s); opacity: .55; animation: petal-fall var(--d) linear var(--dl) infinite; }
.about__petal svg { display: block; width: 100%; height: 100%; animation: petal-sway var(--sw) ease-in-out infinite alternate; }
@keyframes petal-fall { to { transform: translateY(calc(100cqh + 40px)); } }
@keyframes petal-sway { from { transform: translateX(-14px) rotate(var(--r)); } to { transform: translateX(14px) rotate(calc(var(--r) + 120deg)); } }
@media (max-width: 899px) { .about__branch--tr { top: 8px; right: -4px; width: 260px; opacity: .9; } .about__petal:nth-child(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .about__petal { display: none; } }
.about__grid { display: grid; gap: 32px; }
.about figure img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.about__main { position: relative; aspect-ratio: 3 / 4; }
.about__main img { object-position: 50% 30%; }
.about__cap { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(28, 27, 26, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--bone); font-size: .72rem; }
.about__copy em { font-style: italic; }
.about__copy p:not(.title) { margin-top: 18px; max-width: 52ch; line-height: 1.7; color: #5b4a40; }
.about__copy .title + p { margin-top: 22px; }
.about__copy .textlink { margin-top: 22px; }
/* four tall interior shots in a staggered row, like frames along a wall */
.about__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.about__g { aspect-ratio: 2 / 3; }
.about__g:nth-child(even) { margin-top: 36px; }
/* Psalm 23:5, a wide cocoa card closing the About section */
.verse-sec { padding-top: var(--sec); background: var(--latte-soft); }
.verse__card { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 22px; padding: 48px 26px 44px; border-radius: var(--r); background: var(--cocoa); color: var(--bone); text-align: center; }
.verse__card::before { content: "\201D"; position: absolute; z-index: -1; bottom: -.66em; right: .06em; font-family: var(--display); font-size: 12rem; line-height: 1; color: rgba(217, 185, 143, .12); }
.verse__side { display: grid; justify-items: center; gap: 12px; }
.verse__cup { width: 52px; height: 52px; fill: none; stroke: var(--latte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.verse__ref { color: var(--latte); }
.verse__ref cite { font-style: normal; }
.verse__rule { width: 40px; height: 1px; background: rgba(217, 185, 143, .45); }
.verse__text p { max-width: 30ch; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.15rem); line-height: 1.34; letter-spacing: -.01em; text-wrap: balance; }
.verse__text em { color: #f0cfa4; white-space: nowrap; }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
  .about__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 88px; }
  .about__g:nth-child(even) { margin-top: 72px; }
}

/* ---------- stay kyuurious band (the only other place terracotta appears) ---------- */
.band { background: var(--terracotta); color: var(--bone); overflow: hidden; padding: 26px 0; }
.band__track { display: flex; width: max-content; animation: marquee 85s linear infinite; }
.band__run { display: flex; align-items: center; gap: 32px; padding-right: 32px; }
.band__run span { font-family: var(--brand), "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif; font-weight: 600; font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: 1.1; white-space: nowrap; }
/* the Kyuu tree mark between phrases, same mask as the header logo */
.band__run .band__dot { flex-shrink: 0; width: clamp(30px, 4vw, 52px); aspect-ratio: 160 / 215; background: currentColor; opacity: .85; -webkit-mask: url(images/logo-mark-mask.png) center / contain no-repeat; mask: url(images/logo-mark-mask.png) center / contain no-repeat; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (min-width: 900px) { .band { padding: 36px 0; } }

/* ---------- Reviews: airy type ---------- */
.quotes { display: grid; gap: 40px; }
.quote { padding-top: 24px; border-top: 1px solid var(--latte); }
.quote blockquote { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 4.5vw, 1.7rem); line-height: 1.3; letter-spacing: -.01em; }
.quote figcaption { margin-top: 18px; color: var(--taupe-ink); }
.quote figcaption a { text-decoration: none; }
.quote figcaption a:hover { color: var(--cocoa); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* ---------- Visit ---------- */
.visit { background: #ebe4da; }
.visit__grid { display: grid; gap: 40px; }
.visit__addr { margin-top: 24px; font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1.4; letter-spacing: -.01em; }
.hours { margin-top: 28px; max-width: 420px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hours li span:last-child { color: var(--taupe-ink); }
.hours li.is-today { font-weight: 700; }
.hours li.is-today span:last-child { color: var(--cocoa); }
.hours li.is-today span:first-child::after { content: "Today"; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--cocoa); color: var(--bone); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; vertical-align: 2px; }
.visit__note { margin-top: 12px; font-size: .92rem; color: var(--taupe-ink); }
.visit__phone { margin-top: 18px; }
.visit__phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.1rem; text-decoration: underline; text-decoration-color: var(--latte); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.visit__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.catering { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--latte); max-width: 420px; scroll-margin-top: calc(var(--header-total) + 24px); }
.catering .label { color: var(--taupe-ink); }
.catering p:not(.label) { margin-top: 8px; }
.catering__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.visit__map { min-height: 360px; }
.visit__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(.35) sepia(.1); }
@media (min-width: 900px) {
  .visit__grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: stretch; }
  .visit__map { min-height: 620px; }
}

/* ---------- Footer ---------- */
.footer { padding: 72px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer__grid { display: grid; gap: 40px; }
.footer__logo { display: flex; align-items: center; gap: 12px; }
.footer__logo img { width: 30px; height: auto; filter: invert(1); mix-blend-mode: screen; }
.footer__logo span { font-family: var(--brand); font-weight: 600; font-size: 2.6rem; line-height: 1; }
.footer__muted { margin-top: 18px; color: rgba(243, 239, 232, .75); }
.footer a:not(.footer__icon), .footer .textlink { text-decoration-color: rgba(217, 185, 143, .6); }
.footer__muted a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__h { color: var(--latte); margin-bottom: 12px; }
.footer__hours li { display: flex; justify-content: space-between; gap: 16px; max-width: 260px; padding: 4px 0; }
.footer__hours li span:last-child { color: rgba(243, 239, 232, .75); }
.footer__end { display: flex; align-items: center; gap: 20px; }
.footer__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-dark); transition: background-color .25s, color .25s; }
.footer__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.footer__icon:hover { background: var(--bone); color: var(--espresso); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: .85rem; color: rgba(243, 239, 232, .7); }
@media (min-width: 900px) {
  .footer { padding: 96px 0 calc(36px + env(safe-area-inset-bottom, 0px)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr auto; align-items: start; gap: 48px; }
}

/* ---------- Full menu page: category rail (desktop) / sticky chips (mobile), search, one category at a time ---------- */
.page { padding-top: var(--header-total); }
.menu-page { padding-top: clamp(24px, 3.5vw, 44px); }
.menu-page .sec-head { margin-bottom: 32px; }
.menu-app { position: relative; }
.menu-side { display: contents; }
.menu-search { position: relative; }
.menu-search > svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; fill: none; stroke: var(--taupe-ink); stroke-width: 1.7; stroke-linecap: round; }
.menu-search input {
  width: 100%; height: 52px; padding: 0 48px 0 50px; border-radius: 999px; border: 1px solid var(--line); background: #faf7f2;
  font: inherit; font-size: 1rem; color: var(--cocoa); -webkit-appearance: none; appearance: none; transition: border-color .2s;
}
.menu-search input::placeholder { color: var(--taupe-ink); }
.menu-search input::-webkit-search-cancel-button { display: none; }
.menu-search input:hover { border-color: rgba(74, 50, 38, .4); }
.menu-search input:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 2px; border-color: var(--cocoa); }
.menu-search__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.menu-search__clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-search__clear:hover { background: #ebe4da; }

.menu-cats [role="tab"] { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; transition: background-color .2s, color .2s, border-color .2s; }
.menu-cats .cnt { font-size: .78rem; font-weight: 700; color: var(--taupe-ink); }
.menu-cats__group { font-weight: 800; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--taupe-ink); }
.menu-side__note { display: none; }

.mcat { scroll-margin-top: calc(var(--header-total) + 80px); }
.js .mcat:not([hidden]) { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
/* motion.js lifts the page title in; categories switch without motion (search results keep the plain rise). Until
   site.js has opened a category the title and categories are held back, so the title never shows before its start state
   and the full list never flashes; if the scripts never run they appear after 2s. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.menu-ready) .menu-page .title, html.js:not(.menu-ready) .mcat { animation: await-motion 0s 2s both; }
}
@keyframes await-motion { from { visibility: hidden; } }
.motion .menu-app:not(.is-searching) .mcat:not([hidden]) { animation: none; }
.mcat__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--latte); }
.mcat__head h2 { font-family: var(--display); font-size: clamp(2rem, 6vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.mcat__desc { margin-top: 8px; color: var(--taupe-ink); }
.mcat__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mcat__meta li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--taupe-ink); background: #faf7f2; }
.mcat__meta .is-note { color: var(--cocoa); }
.mcat__next { margin-top: 28px; }
.mcat__next.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
/* only the words are underlined, not the arrow */
.mcat__next-label { text-decoration: underline; text-decoration-color: var(--latte); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.is-searching .mcat__next { display: none; }
.is-searching .mcat + .mcat { margin-top: 48px; }

.mfeat { display: grid; gap: 12px; margin-top: 24px; }
/* tablets (iPad portrait and up): dishes in two columns, as on desktop */
/* two columns once each card can be at least 320px wide, else one; every card in a category the same size */
@media (min-width: 700px) { .mfeat { grid-template-columns: repeat(auto-fill, minmax(max(320px, calc(50% - 8px)), 1fr)); grid-auto-rows: 1fr; gap: 16px; } }
.mf { display: flex; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border-radius: var(--r); background: #faf7f2; border: 1px solid var(--line); transition: border-color .2s; }
.mf:hover { border-color: rgba(74, 50, 38, .4); }
.mf__ph { width: 96px; height: 96px; flex-shrink: 0; border-radius: 16px; }
.mf__body { min-width: 0; }
.mf__name { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; }
.mf__name .mi__note { font-family: var(--body); font-weight: 400; }
/* dish descriptions show in the photo close-up (tap the photo), not on the card; screen readers and search still get them */
.mf__desc, .fcard__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf__price { margin-top: 8px; font-size: .95rem; }
.mf__price span, .mf__price i { color: var(--taupe-ink); font-style: normal; font-size: .8rem; }
.mf__price b { font-weight: 700; }
/* the whole card opens the photo close-up; the button's hit area stretches over the card */
.mf { position: relative; }
/* current genie lamp: a small feature card in the matcha grid */
.glamp { display: flex; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border-radius: var(--r); background: var(--latte-soft); border: 1px dashed var(--latte); }
.glamp__art { position: relative; padding: 0; cursor: pointer; flex-shrink: 0; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: var(--bone); box-shadow: inset 0 0 0 1px rgba(217, 185, 143, .6); overflow: hidden; }
.glamp__art img { width: 84px; height: 84px; object-fit: contain; animation: glamp-bob 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 5px rgba(74, 50, 38, .18)); }
@keyframes glamp-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
.glamp__label { font-family: var(--body); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta-ink); }
.glamp__name { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.02em; }
.glamp__price { margin-top: 8px; font-size: .88rem; }
.glamp__price b { font-weight: 700; }
/* the lamp sits in the same size frame as the dish photos */
@media (max-width: 480px) { .glamp__art { width: 84px; height: 84px; } .glamp__art img { width: 72px; height: 72px; } }
@media (min-width: 900px) { .glamp__art { width: 116px; height: 116px; } .glamp__art img { width: 100px; height: 100px; } }
@media (prefers-reduced-motion: reduce) { .glamp__art img { animation: none; } }
.mi__thumb { flex-shrink: 0; align-self: center; width: 40px; height: 40px; margin-right: 2px; border-radius: 50%; background: var(--bone); box-shadow: inset 0 0 0 1px var(--line); object-fit: contain; padding: 5px; }
/* Drink of the month marker on its menu card */
.mf--dotm, .mf:has(.mf__badge) { border-color: var(--terracotta-ink); box-shadow: 0 0 0 1px var(--terracotta-ink) inset; }
/* a small pill above the name, inside the card, so it never sits on the title */
.mf__badge { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--terracotta-ink); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mf__badge svg { width: 11px; height: 11px; fill: #fbd9a5; }
.mf__zoom { flex-shrink: 0; border-radius: 16px; cursor: zoom-in; }
.mf__zoom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mf:has(.mf__zoom:focus-visible) { outline: 2px solid var(--cocoa); outline-offset: 3px; }
.mf__zoom:focus-visible { outline: none; }
.mf__phwrap { position: relative; display: block; }
.mf__zoomicon { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 239, 232, .92); color: var(--cocoa); transition: transform .2s; }
.mf__zoomicon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mf:hover .mf__zoomicon { transform: scale(1.1); }

/* ---------- Menu photo close-up ---------- */
.lightbox {
  border: 0; margin: auto; padding: 0; overflow: hidden; overscroll-behavior: contain;
  width: min(560px, calc(100% - 24px), calc((100svh - 200px) * .8));
  border-radius: 28px; background: var(--bone); color: var(--cocoa); box-shadow: 0 30px 80px -20px rgba(28, 27, 26, .5);
}
.lightbox.is-small { width: min(400px, calc(100% - 24px)); }
.lightbox::backdrop { background: rgba(28, 27, 26, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); animation: pop-in .3s cubic-bezier(.2,.8,.2,1); }
/* the photo gives up height first, so the name, description and price always fit on screen */
.lightbox__media { flex: 1 1 auto; min-height: 0; background: var(--latte-soft); }
.lightbox__media picture { display: block; height: 100%; }
.lightbox__media img { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: cover; object-position: 50% 55%; filter: var(--warm); }
.lightbox__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(243, 239, 232, .92); color: var(--cocoa); }
.lightbox__close:hover { background: var(--bone); }
.lightbox__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lightbox__body { flex: none; padding: 18px 24px 20px; }
.lightbox__name { font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; }
.lightbox__desc { margin-top: 10px; max-width: 60ch; font-size: 1rem; line-height: 1.5; color: var(--taupe-ink); text-wrap: pretty; }
.lightbox__name .mi__note { font-family: var(--body); font-weight: 400; font-size: .9rem; letter-spacing: 0; color: var(--taupe-ink); }

.mlist { margin-top: 12px; }
.mcol__legend { display: flex; justify-content: flex-end; padding: 14px 0 6px; font-weight: 800; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--taupe-ink); }
.mcol__legend span { width: 56px; text-align: right; }
.mi { padding: 15px 0; border-bottom: 1px solid var(--line); }
.mi__line { display: flex; align-items: baseline; gap: 8px; }
.mi__name { font-weight: 700; min-width: 0; }
.mi__tag { margin-left: 6px; font-family: var(--body); letter-spacing: .1em; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe-ink); white-space: nowrap; }
.mi__note { font-size: .8rem; color: var(--taupe-ink); white-space: nowrap; }
.mi__dots { flex: 1; min-width: 16px; border-bottom: 1.5px dotted rgba(122, 111, 104, .6); transform: translateY(-4px); }
.mi__p { width: 56px; flex-shrink: 0; text-align: right; font-weight: 700; }
.mlist:not(.mlist--sized) .mi__p { width: auto; min-width: 48px; }
.mi__p.is-na { color: var(--taupe); font-size: .78rem; font-weight: 400; }
.mi__desc { margin-top: 3px; font-size: .9rem; line-height: 1.5; color: var(--taupe-ink); }
.mlist--sized .mi__desc { padding-right: 120px; }
.menu-empty { padding: 48px 0; text-align: center; color: var(--taupe-ink); }
.menu-empty .btn { margin-top: 16px; }

@media (max-width: 899px) {
  .menu-cats {
    position: sticky; top: var(--header-total); z-index: 40; display: flex; align-items: center; gap: 8px;
    margin: 14px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter); background: var(--bone);
    border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter);
  }
  .menu-cats::-webkit-scrollbar { display: none; }
  .menu-cats [role="tablist"] { display: flex; flex-shrink: 0; gap: 8px; }
  .menu-cats__group { flex-shrink: 0; padding: 0 2px; }
  .menu-cats__group + [role="tablist"] + .menu-cats__group { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
  .menu-cats [role="tab"] { flex-shrink: 0; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #faf7f2; font-size: .93rem; }
  .menu-cats .cnt { display: none; }
  .menu-cats [aria-selected="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--bone); }
  .menu-stage { padding-top: 28px; }
  .mcol + .mcol .mcol__legend { display: none; }
  .is-searching .menu-cats [role="tab"] { opacity: .55; }
}
@media (max-width: 480px) {
  .mi__line { flex-wrap: wrap; }
  .mi__note { order: 2; flex-basis: 100%; margin-top: -2px; }
  .mi__name { flex: 1; }
  .mi__dots { display: none; }
  .mlist--sized .mi__desc { padding-right: 0; }
  .mf__ph { width: 84px; height: 84px; }
}
@media (min-width: 900px) {
  .menu-app { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
  .menu-side { display: block; position: sticky; top: calc(var(--header-total) + 24px); }
  .menu-cats { margin-top: 28px; }
  .menu-cats__group { margin: 0 0 8px 14px; }
  .menu-cats [role="tablist"] + .menu-cats__group { margin-top: 24px; }
  .menu-cats [role="tab"] { position: relative; width: 100%; justify-content: space-between; padding: 0 14px; border-radius: 12px; text-align: left; }
  .menu-cats [role="tab"]:hover { background: #ebe4da; }
  .menu-cats [aria-selected="true"] { background: var(--latte-soft); }
  .menu-cats [aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--cocoa); }
  .menu-side__note { display: flex; align-items: center; gap: 10px; margin: 24px 0 0 14px; font-size: .86rem; line-height: 1.45; color: var(--taupe-ink); }
  .menu-stage { min-height: 620px; }
  .mfeat { margin-top: 28px; }
  .mf__ph { width: 116px; height: 116px; }
  .mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 16px; }
  .mlist--sized .mi__desc { padding-right: 0; }
  .mlist > .mcol:only-child { grid-column: 1 / -1; max-width: calc(50% - 24px); }
  .mcat__next { margin-top: 36px; }
}


@media (min-width: 900px) {
  .verse__card { grid-template-columns: 160px 1px minmax(0, 1fr); justify-items: start; align-items: center; gap: 56px; padding: 72px 96px 72px 72px; text-align: left; }
  .verse__side { justify-self: center; }
  .verse__card::before { right: .1em; font-size: 24rem; }
  .verse__cup { width: 64px; height: 64px; }
  .verse__rule { width: 1px; height: 100%; min-height: 120px; }
  .verse__text p { max-width: none; font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
}

/* maple leaf on the Fall Menu tab (static) */
.tab-fall { display: inline-flex; align-items: center; gap: 8px; }
.tab-leaf { width: 21px; height: 21px; flex-shrink: 0; transform: rotate(-10deg); filter: drop-shadow(0 1px 1px rgba(120, 40, 18, .25)); }

/* genie lamp: tap targets */
.glamp__art::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(183, 91, 44, .35); animation: glamp-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes glamp-ring { 0% { transform: scale(.94); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.glamp__art:focus-visible, .glamp__play:focus-visible, .mi__thumbbtn:focus-visible { outline: 3px solid var(--terracotta-ink); outline-offset: 3px; }
.glamp__play { margin-top: 8px; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cocoa); text-decoration: underline; text-decoration-color: var(--latte); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.mi__thumbbtn { flex-shrink: 0; align-self: center; padding: 0; border-radius: 50%; cursor: pointer; }
.mi__thumbbtn:hover .mi__thumb { box-shadow: inset 0 0 0 1px var(--terracotta-ink); }

/* genie lamp: the dry-ice moment */
.lampbox { overscroll-behavior: contain; border: 0; margin: auto; padding: 0; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; border-radius: 28px; color: var(--bone);
  background: radial-gradient(70% 55% at 50% 42%, #5a3a2a 0%, #2c211c 60%, #1c1b1a 100%); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.lampbox .lightbox__close { z-index: 5; }
.lampbox::backdrop { background: rgba(28, 27, 26, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lampbox[open] { animation: pop-in .35s cubic-bezier(.2,.8,.2,1); }
.lampbox__stage { position: relative; display: grid; place-items: center; padding: clamp(56px, 12dvh, 96px) 0 44px; overflow: hidden; }
/* the fog is laid out against the figure's own box, and it all sits behind the capybara */
.lampbox__figure { position: relative; width: min(220px, 54vw); aspect-ratio: 1; }
.lampbox__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .45)); }
.lampbox__fog { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.puff { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, .28) 55%, transparent); filter: blur(8px); }
/* wisps curling up off the cloud cap */
.puff--rise { left: 50%; top: 8%; width: 30%; height: 22%; margin-left: -15%; animation: fog-rise 4s cubic-bezier(.3, .6, .4, 1) var(--dl) infinite; }
@keyframes fog-rise {
  0% { opacity: 0; transform: translate(0, 12%) scale(.5); }
  25% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx), -210%) scale(2, 1.6); }
}
/* heavy fog rolling off the shoulders and sliding down the sides */
.puff--spill { top: 30%; width: 34%; height: 24%; animation: fog-spill-l 5.4s ease-in var(--dl) infinite; }
.puff--l { left: 2%; } .puff--r { right: 2%; animation-name: fog-spill-r; }
@keyframes fog-spill-l {
  0% { opacity: 0; transform: translate(40%, 0) scale(.5); }
  25% { opacity: .7; }
  100% { opacity: 0; transform: translate(-70%, 230%) scale(1.8, 1.3); }
}
@keyframes fog-spill-r {
  0% { opacity: 0; transform: translate(-40%, 0) scale(.5); }
  25% { opacity: .7; }
  100% { opacity: 0; transform: translate(70%, 230%) scale(1.8, 1.3); }
}
/* a low cloud pooling around the feet */
.puff--pool { left: calc(50% + var(--x)); bottom: -6%; width: 70%; height: 20%; margin-left: -35%; animation: fog-pool 8s ease-in-out var(--dl) infinite alternate; }
@keyframes fog-pool { 0% { opacity: .3; transform: translateX(-10%) scaleX(1.2); } 100% { opacity: .55; transform: translateX(10%) scaleX(1.5); } }
.lampbox__body { position: relative; z-index: 3; padding: 0 28px 28px; text-align: center; }
.lampbox__label { font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #f0cfa4; }
.lampbox__name { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.05; letter-spacing: -.02em; }
.lampbox__note { margin-top: 8px; font-size: .82rem; color: rgba(243, 239, 232, .72); }
@media (prefers-reduced-motion: reduce) {
  .glamp__art::after, .lampbox__img { animation: none; }
  .puff { animation: none; opacity: .4; }
  .puff--rise { transform: translate(var(--dx), -60%) scale(1.3); }
  .puff--l { transform: translate(-30%, 110%) scale(1.3); } .puff--r { transform: translate(30%, 110%) scale(1.3); }
}

/* ---------- Privacy policy: long-form reading ---------- */
.legal-page { padding-top: clamp(24px, 3.5vw, 44px); }
.legal-page .sec-head { margin-bottom: 32px; }
.legal { max-width: 68ch; font-size: 1.02rem; line-height: 1.65; }
.legal h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.45rem, 3vw, 1.8rem); line-height: 1.15; letter-spacing: -.01em; margin: 48px 0 14px; text-wrap: balance; }
.legal h3 { font-weight: 700; font-size: 1.05rem; margin: 26px 0 8px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 14px; }
.legal ul { list-style: disc; padding-left: 1.25em; }
.legal li + li { margin-top: 10px; }
.legal li::marker { color: var(--terracotta-ink); }
.legal a { text-decoration: underline; text-decoration-color: var(--latte); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-color: currentColor; }