/* Stagger Coffee — concept preview */

:root {
  --milk: #F3EFE7;
  --oat: #E7DFD0;
  --bone: #D8CFBF;
  --ink: #1C1B18;
  --ink-2: #5E584E;
  --line: rgba(28, 27, 24, .14);
  --night: #0E0F0C;
  --night-ink: #EDE8DC;
  --night-ink-2: #A9A493;
  --night-line: rgba(237, 232, 220, .16);
  --matcha: #9EC23F;
  --matcha-deep: #4B661A;

  --f-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --m: clamp(20px, 4.2vw, 72px);
  --gut: clamp(12px, 1.5vw, 24px);
  --nav-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  --bg: var(--milk);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --rule: var(--line);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--milk);
}
html:not(.motion) { scroll-behavior: auto; }

body {
  margin: 0;
  font: 400 16px/1.55 var(--f-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .9s var(--ease), color .9s var(--ease);
}
body[data-theme="oat"] { --bg: var(--oat); }
body[data-theme="night"] {
  --bg: var(--night);
  --fg: var(--night-ink);
  --fg-2: var(--night-ink-2);
  --rule: var(--night-line);
}
html:not(.motion) body { transition: none; }

main { overflow-x: clip; }

img, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 16px; background: var(--ink); color: var(--milk);
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--matcha-deep);
  outline-offset: 3px;
}
body[data-theme="night"] :focus-visible { outline-color: var(--matcha); }

/* Sections carry their own colour without JS; with JS the body crossfades instead. */
[data-theme="milk"] { background: var(--milk); }
[data-theme="oat"] { background: var(--oat); }
[data-theme="night"] { background: var(--night); color: var(--night-ink); --fg-2: var(--night-ink-2); --rule: var(--night-line); }
.themed main [data-theme] { background: transparent; color: inherit; }

/* ---------- Type ---------- */

.display {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .9;
}
.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}
.label {
  font: 500 11px/1.3 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.idx {
  display: inline-block;
  min-width: 2.4em;
  color: var(--fg-2);
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font: 500 14px/1 var(--f-body);
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: var(--matcha-deep); color: var(--milk); }
.btn:active { transform: translateY(0); }

.link {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 44px;
  font: 500 14px/1 var(--f-body);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .9em) / 100% 1px no-repeat;
  transition: background-size .5s var(--ease), color .3s;
}
.link:hover { background-size: 0 1px; background-position: 100% calc(50% + .9em); }
.link span { transition: transform .4s var(--ease); }
.link:hover span { transform: translateX(4px); }

/* ---------- Nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 40px;
  padding-inline: var(--m);
  color: var(--fg);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 -90px; z-index: -1;
  background: linear-gradient(to bottom, var(--bg) 18%, transparent 100%);
  opacity: .88;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--rule);
}
.nav__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.nav__logo img { width: 112px; height: auto; }
body[data-theme="night"] .nav__logo img,
.footer__base img { filter: invert(1) brightness(1.1); }

.nav__links { display: flex; gap: 6px; }
.nav__links a, .nav__cta {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  font: 500 12px/1 var(--f-body);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.nav__cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: none; padding: 0;
  position: relative; cursor: pointer;
}
.nav__toggle i {
  position: absolute; left: 10px; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease), width .45s var(--ease), top .45s var(--ease);
}
.nav__toggle i:first-of-type { top: 17px; width: 24px; }
.nav__toggle i:last-of-type { top: 25px; width: 16px; transform: translateX(8px); }
.nav__toggle[aria-expanded="true"] i:first-of-type { top: 21px; transform: rotate(45deg); width: 24px; }
.nav__toggle[aria-expanded="true"] i:last-of-type { top: 21px; transform: rotate(-45deg); width: 24px; }

.drawer {
  position: fixed; inset: 0; z-index: 40;
  background: var(--milk); color: var(--ink);
  padding: calc(var(--nav-h) + 6vh) var(--m) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.drawer[hidden] { display: none; }
.drawer-open .nav { color: var(--ink); background: transparent; box-shadow: none; }
.drawer-open .nav__logo img { filter: none; }
.lenis.lenis-stopped { overflow: hidden; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  font: 600 clamp(44px, 13vw, 72px)/1 var(--f-display);
  letter-spacing: -.045em;
  text-decoration: none;
  padding: 8px 0;
}
.drawer nav a:nth-child(2) { padding-left: 12vw; }
.drawer nav a:nth-child(3) { padding-left: 4vw; }
.drawer nav a:nth-child(4) { padding-left: 20vw; }
.drawer__meta { color: var(--ink-2); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: max(100svh, 720px);
  padding: calc(var(--nav-h) + 3vh) var(--m) 5vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gut);
}
.hero__top {
  grid-column: 1 / 6; grid-row: 1;
  position: relative; z-index: 3;
  display: grid; gap: 22px; align-content: start;
  padding-top: 2vh;
}
.hero__lede {
  max-width: 24ch;
  font: 400 clamp(18px, 1.5vw, 22px)/1.35 var(--f-body);
  color: var(--fg-2);
}
.hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.hero__stage {
  /* An oversized editorial object: its left arc cuts through the composition
     while the circle bleeds past the top, right and bottom edges. */
  position: absolute; z-index: 1;
  /* Capped so the 1080-wide footage is never blown up much past native size —
     a larger circle would only crop the frame tighter. */
  --d: clamp(560px, 62vw, 1100px);
  /* Always sits a little past the top edge, whatever the viewport ratio. */
  top: min(calc(46% - var(--d) / 2), -2vh);
  right: -9vw;
  width: var(--d);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__media {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: none;
  will-change: transform;
  transform: translate3d(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px), 0) scale(var(--ds, 1));
}
.hero__disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #2b2d2f url("../../stagger/video/hero/matcha-scrub-poster.webp") 50% 50% / cover no-repeat;
}
/* A little depth at the edge, as if the circle were the glass itself. */
.hero__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 -2.5vw 5vw rgba(20, 22, 12, .22), inset 0 1.5vw 4vw rgba(20, 22, 12, .16);
}
.hero__rim {
  position: absolute; inset: -1.6%;
  border-radius: 50%;
  border: 1px solid rgba(28, 27, 24, .16);
  animation: stage-spin 34s linear infinite reverse;
}
.hero__rim::after {
  content: ""; position: absolute; top: -1px; left: 50%;
  width: 46px; height: 1px; margin-left: -23px;
  background: var(--ink);
  opacity: .5;
}
.hero__light {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: 150%; height: 150%;
  margin: -75% 0 0 -75%;
  pointer-events: none;
}
.hero__light i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196, 150, 96, .20), rgba(196, 150, 96, .06) 52%, transparent 100%);
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
}
@keyframes stage-spin { to { transform: rotate(360deg); } }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 50%;
}
.js .hero__video { opacity: 0; transition: opacity .8s var(--ease); }
.js .hero__media.is-playing .hero__video { opacity: 1; }
/* Only spin while the hero is actually on screen. */
.hero:not(.is-live) .hero__rim { animation-play-state: paused; }

.hero__title {
  grid-column: 1 / 13; grid-row: 2;
  align-self: end;
  position: relative; z-index: 2;
  font-size: clamp(64px, 11.6vw, 208px);
  pointer-events: none;
}
.ttl {
  /* flow-root on both copies, so the first line's negative margin can't collapse through one
     layer and not the other — the bone copy must sit in exact register with the ink copy. */
  display: flow-root;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .86;
}
.ttl--light {
  position: absolute; inset: 0;
  /* Where the headline crosses the matcha it turns warm bone, clipped exactly to the circle. */
  color: var(--milk);
  clip-path: inset(0 0 0 var(--split, 100%));
}
.hl { display: block; overflow: hidden; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.hl__in { display: inline-block; white-space: nowrap; will-change: transform; }
.hl--the { padding-left: 1.18em; }
.hl--the .the { display: inline-block; font-size: .8em; letter-spacing: -.02em; line-height: 1; translate: var(--the-x, 18px) 0; }
.lt { display: inline-block; transform: translateY(calc(var(--y) * 1em)); }

.hero__coords {
  grid-column: 12 / 13; grid-row: 1 / 3;
  align-self: end; justify-self: end;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--fg-2);
  letter-spacing: .2em;
}

/* ---------- Story ---------- */

.story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: clamp(96px, 16vh, 180px) var(--m) clamp(96px, 14vh, 160px);
}
.story__label { grid-column: 1 / 5; margin-bottom: 36px; }
.story__title {
  grid-column: 1 / 10; grid-row: 2;
  position: relative; z-index: 2;
  font-size: clamp(48px, 8.2vw, 150px);
}
.story__title .serif { font-size: 1.04em; }
.overlap-light {
  position: absolute; inset: 0;
  color: var(--milk);
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
}
.story__media {
  grid-column: 6 / 13; grid-row: 3;
  margin-top: -3.2vw;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.story__media { position: relative; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(24, 20, 14, .34), rgba(24, 20, 14, 0) 34%);
}
.story__body {
  grid-column: 1 / 5; grid-row: 3;
  align-self: end;
  padding-bottom: 6px;
}
.story__body p {
  max-width: 34ch;
  font: 400 clamp(17px, 1.35vw, 20px)/1.5 var(--f-body);
}
.pillars {
  grid-column: 2 / 13; grid-row: 4;
  margin-top: clamp(56px, 8vw, 110px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.pillars li {
  padding: 22px 0 0;
  font: 500 clamp(20px, 2vw, 30px)/1.1 var(--f-display);
  letter-spacing: -.03em;
}
.pillars li:nth-child(2) { padding-top: 46px; }
.pillars .idx { font: 400 italic 16px/1 var(--f-serif); letter-spacing: 0; min-width: 2em; }

/* ---------- Drinks ---------- */

.drinks { padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 12vh, 140px); }
.drinks__stage { position: relative; }
.drinks__head {
  padding-inline: var(--m);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px 24px;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.drinks__head > div { display: grid; gap: 18px; }
.drinks__title { font-size: clamp(48px, 8vw, 140px); }
.drinks__title .serif { padding-left: .12em; }

.drinks__list {
  display: grid;
  gap: clamp(56px, 9vw, 110px);
  padding-inline: var(--m);
}
.drink {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: center;
}
.drink__media {
  grid-column: 1 / 7;
  position: relative;
  height: clamp(320px, 44vw, 560px);
  display: grid; place-items: center;
}
.drink:nth-child(even) .drink__media { grid-column: 7 / 13; }
.drink:nth-child(even) .drink__copy { grid-column: 2 / 6; grid-row: 1; }
.drink__float {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transform: translate3d(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px), 0) scale(var(--ds, 1));
}
.drink__float img {
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100% * var(--fit, 1));
}
.drink__light { display: none; }
.drink__num {
  position: absolute; z-index: 0;
  right: -2%; bottom: 0;
  font: 600 clamp(88px, 13vw, 240px)/.8 var(--f-display);
  letter-spacing: -.06em;
  color: rgba(28, 27, 24, .07);
  transition: color .9s var(--ease);
}
.drink__copy { grid-column: 8 / 12; display: grid; gap: 16px; }
.drink__idx { color: var(--fg-2); }
.drink__name {
  font: 600 clamp(38px, 4.6vw, 80px)/.92 var(--f-display);
  letter-spacing: -.045em;
}
.drink__ing {
  max-width: 30ch;
  font: 400 clamp(15px, 1.15vw, 18px)/1.55 var(--f-body);
  color: var(--fg-2);
}
.drink__ing i { font-style: normal; color: var(--matcha-deep); padding: 0 .15em; }
.drink__price { font: 400 italic clamp(26px, 2.2vw, 38px)/1 var(--f-serif); }
.drinks__rail { display: none; }

/* One framed scene per drink (desktop, motion allowed) */
.drinks.is-sequenced { padding: 0; }
.drinks.is-sequenced .drinks__track { height: calc(var(--n, 5) * 55vh + 100vh); height: calc(var(--n, 5) * 55svh + 100svh); position: relative; }
.drinks.is-sequenced .drinks__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(8px, 1.6vh, 20px);
  padding: calc(var(--nav-h) + clamp(14px, 3vh, 36px)) var(--m) clamp(14px, 2.8vh, 32px);
}
.drinks.is-sequenced .drinks__head { padding: 0; margin: 0; position: relative; z-index: 3; }
.drinks.is-sequenced .drinks__head > div { gap: 12px; }
.drinks.is-sequenced .drinks__title { font-size: clamp(36px, 4.2vw, 72px); }
.drinks.is-sequenced .drinks__list { position: relative; display: block; padding: 0; min-height: 0; }
.drinks.is-sequenced .drink { position: absolute; inset: 0; grid-template-rows: minmax(0, 1fr); pointer-events: none; }
.drinks.is-sequenced .drink__copy {
  grid-column: 1 / 5; grid-row: 1;
  align-self: center;
  position: relative; z-index: 2;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .55s var(--ease), transform .9s var(--ease);
}
.drinks.is-sequenced .drink__media {
  grid-column: 5 / 13; grid-row: 1;
  height: 100%; min-height: 0;
  align-self: stretch;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.98);
  transition: opacity .7s var(--ease), transform 1.1s var(--ease);
}
.drinks.is-sequenced .drink.is-past .drink__copy { transform: translate3d(0, -12px, 0); }
.drinks.is-sequenced .drink.is-past .drink__media { transform: translate3d(0, -16px, 0) scale(.98); }
.drinks.is-sequenced .drink.is-active .drink__copy,
.drinks.is-sequenced .drink.is-active .drink__media {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: .06s;
}
.drinks.is-sequenced .drink__float img { max-height: calc(96% * var(--fit, 1)); }
.drinks.is-sequenced .drink__num {
  right: -1%; bottom: -2%;
  font-size: clamp(160px, 34vh, 360px);
}
.drinks.is-sequenced .drink__light {
  display: block;
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: min(92vh, 64vw); height: min(92vh, 64vw);
  margin: calc(min(92vh, 64vw) / -2) 0 0 calc(min(92vh, 64vw) / -2);
  pointer-events: none;
}
.drinks.is-sequenced .drink__light i {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--tone) / .30), rgb(var(--tone) / .12) 48%, rgb(var(--tone) / 0) 100%);
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
}
.drinks.is-sequenced .drinks__stage.is-lit .drink__num { color: rgba(28, 27, 24, .11); }

.drinks.is-sequenced .drinks__rail {
  display: grid; gap: 4px;
  position: relative; z-index: 3;
}
.drinks__bar { height: 1px; background: var(--rule); position: relative; }
.drinks__bar span {
  position: absolute; inset: 0;
  background: var(--fg);
  transform: scaleX(0); transform-origin: left;
}
.drinks__ticks { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); }
.drinks__ticks button {
  min-height: 44px; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2);
  transition: color .35s var(--ease);
}
.drinks__ticks b { display: none; }
.drinks__ticks button span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 5px;
  transition: background-size .6s var(--ease);
}
.drinks__ticks button:hover { color: var(--fg); }
.drinks__ticks button[aria-current="true"] { color: var(--fg); }
.drinks__ticks button[aria-current="true"] span { background-size: 100% 1px; }

/* ---------- Matcha ---------- */

.matcha { padding: clamp(96px, 14vh, 160px) var(--m) clamp(96px, 14vh, 160px); }
.mstory__stage { position: relative; }
.mstory__light, .mstory__index { display: none; }

.mchap { display: grid; gap: clamp(28px, 5vw, 48px); }
.mchap + .mchap { margin-top: clamp(72px, 12vw, 140px); }
.mchap__copy { display: grid; gap: 14px; align-content: start; }
.matcha__title { font-size: clamp(46px, 6.4vw, 112px); }
.matcha__title .serif { color: var(--matcha); display: inline-block; margin-left: .6em; }
.mchap__n { color: var(--matcha); }
.mchap__t { font: 600 clamp(32px, 3.4vw, 60px)/1 var(--f-display); letter-spacing: -.04em; }
.mchap__b { max-width: 34ch; font: 400 clamp(16px, 1.25vw, 19px)/1.55 var(--f-body); color: var(--fg-2); }
.mchap__media { overflow: hidden; background: #0a0a09; }
.mchap__media img { width: 100%; height: 100%; object-fit: cover; }
.mchap--ritual .mchap__media { aspect-ratio: 4 / 5; width: min(88%, 620px); margin-left: auto; }
.mchap--ritual .mchap__media img { object-position: 50% 42%; }
.mchap--origin .mchap__media { aspect-ratio: 8 / 7; width: 92%; }
.mchap--ingredient .mchap__media { aspect-ratio: 12 / 11; }
.mchap--ingredient .mchap__t { font-size: clamp(26px, 2.4vw, 40px); }

.fade-ready .matcha:not(.is-sequenced) [data-fade] { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.fade-ready .matcha:not(.is-sequenced) [data-fade]:not(.is-in) { opacity: 0; transform: translate3d(0, 10px, 0); }

/* Pinned campaign story (desktop, motion allowed) */
.matcha.is-sequenced { padding-top: 0; }
.matcha.is-sequenced .mstory { height: calc(3 * 62vh + 100vh); height: calc(3 * 62svh + 100svh); position: relative; }
.matcha.is-sequenced .mstory__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.matcha.is-sequenced .mchap {
  position: absolute; inset: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  grid-template-rows: minmax(0, 1fr);
  padding: calc(var(--nav-h) + clamp(16px, 3vh, 40px)) 0 clamp(56px, 9vh, 96px);
  pointer-events: none;
}
.matcha.is-sequenced .mchap__copy {
  grid-row: 1; grid-column: 1 / 5;
  align-self: center;
  position: relative; z-index: 2;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .7s var(--ease), transform 1s var(--ease);
}
.matcha.is-sequenced .mchap__media {
  grid-row: 1;
  width: auto; height: 100%; min-height: 0; aspect-ratio: auto; margin: 0;
  align-self: stretch;
  background: transparent;
  opacity: 0;
  transform: scale(.98);
  transition: opacity 1.1s var(--ease), transform 1.4s var(--ease);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.matcha.is-sequenced .mchap--ritual .mchap__media { grid-column: 6 / 12; }
.matcha.is-sequenced .mchap--origin .mchap__media { grid-column: 5 / 13; }
.matcha.is-sequenced .mchap--origin .mchap__media img { object-position: 40% 55%; }
.matcha.is-sequenced .mchap--ingredient .mchap__media { grid-column: 4 / 13; }
.matcha.is-sequenced .mchap--ingredient .mchap__media img { object-position: 62% 58%; }
.matcha.is-sequenced .mchap--ingredient .mchap__copy { grid-column: 1 / 4; align-self: end; padding-bottom: 2vh; }
.matcha.is-sequenced .mchap--ingredient .mchap__b { font-size: 15px; }
.matcha.is-sequenced .mchap.is-past .mchap__copy { transform: translate3d(0, -12px, 0); }
.matcha.is-sequenced .mchap.is-active .mchap__copy,
.matcha.is-sequenced .mchap.is-active .mchap__media { opacity: 1; transform: none; pointer-events: auto; }
.matcha.is-sequenced .mchap.is-active .mchap__copy { transition-delay: .2s; }

.matcha.is-sequenced .mstory__light {
  display: block;
  position: absolute; z-index: 0;
  left: 62%; top: 52%;
  width: min(110vh, 80vw); height: min(110vh, 80vw);
  margin: calc(min(110vh, 80vw) / -2) 0 0 calc(min(110vh, 80vw) / -2);
  pointer-events: none;
  transition: transform 1.8s var(--ease), opacity 1.8s var(--ease);
}
.matcha.is-sequenced .mstory__light i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 138, 62, .16), rgba(120, 138, 62, .05) 55%, rgba(120, 138, 62, 0) 100%);
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
}
.matcha.is-sequenced .mstory__stage[data-chapter="1"] .mstory__light { transform: translate3d(-6vw, 2vh, 0); }
.matcha.is-sequenced .mstory__stage[data-chapter="2"] .mstory__light { transform: translate3d(-12vw, 6vh, 0) scale(1.08); opacity: .8; }

.matcha.is-sequenced .mstory__index {
  display: flex; gap: 28px;
  position: absolute; left: 0; bottom: clamp(20px, 4vh, 40px); z-index: 3;
}
.mstory__index li {
  font: 500 11px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-2); opacity: .5;
  transition: opacity .6s var(--ease), color .6s var(--ease);
}
.mstory__index li.is-active { opacity: 1; color: var(--fg); }

.mshop {
  margin-top: clamp(96px, 14vh, 180px);
  padding-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--rule);
}
.mshop__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: start;
}
.mshop__lead { grid-column: 1 / 5; display: grid; gap: 16px; justify-items: start; }
.mshop__name { font: 600 clamp(32px, 3.2vw, 56px)/1 var(--f-display); letter-spacing: -.04em; }
.mshop__name span { color: var(--fg-2); font-weight: 500; }
.mshop__note { max-width: 30ch; color: var(--fg-2); font-size: clamp(15px, 1.15vw, 18px); }
.mshop__price { font: 400 italic 30px/1 var(--f-serif); margin-bottom: 8px; }
.mshop__step { display: none; color: var(--fg-2); }
.mshop__objects {
  grid-column: 6 / 13;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut);
  align-items: start;
  margin-top: 8px;
}
.mobj:nth-child(2) { margin-top: 5vw; }
.mobj:nth-child(3) { margin-top: 2vw; }
.mobj a { display: grid; gap: 6px; text-decoration: none; }
.mobj figure { aspect-ratio: 3 / 4; overflow: hidden; background: #0a0a09; margin-bottom: 8px; }
.mobj img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mobj a:hover img { transform: scale(1.03); }
.mobj__cat { color: var(--fg-2); }
.mobj__name { font: 500 clamp(15px, 1.1vw, 18px)/1.25 var(--f-display); letter-spacing: -.01em; }
.mobj__price { font: 400 italic 19px/1 var(--f-serif); color: var(--fg-2); }
.mobj a:hover .mobj__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Assembling the ritual (desktop, motion allowed) */
.mshop.is-sequenced { border-top: 0; padding-top: 0; }
.mshop.is-sequenced .mshop__track { height: calc(4 * 46vh + 100vh); height: calc(4 * 46svh + 100svh); position: relative; }
.mshop.is-sequenced .mshop__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  align-items: stretch;
  padding: calc(var(--nav-h) + clamp(16px, 3vh, 40px)) 0 clamp(32px, 6vh, 64px);
}
.mshop.is-sequenced .mshop__lead { align-content: center; }
.mshop.is-sequenced .mshop__step { display: block; margin-top: 18px; }
.mshop.is-sequenced .mshop__objects {
  position: relative; display: block; margin: 0;
}
.mshop.is-sequenced .mobj {
  position: absolute; margin: 0;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.985);
  transition: opacity .8s var(--ease), transform 1.1s var(--ease), filter .8s var(--ease);
  filter: brightness(.72);
}
.mshop.is-sequenced .mobj.is-in { opacity: 1; transform: none; }
.mshop.is-sequenced .mobj.is-active { filter: brightness(1); }
.mshop.is-sequenced .mobj.is-active .mobj__name { color: var(--night-ink); }
.mshop.is-sequenced .mobj a { pointer-events: none; }
.mshop.is-sequenced .mobj.is-in a { pointer-events: auto; }
.mshop.is-sequenced .mobj--matcha { --h: 30vh; left: 0; top: 0; width: 31%; }
.mshop.is-sequenced .mobj--whisk { --h: 26vh; right: 1%; top: 4%; width: 25%; }
.mshop.is-sequenced .mobj--scoop { --h: 25vh; left: 7%; bottom: 1%; width: 26%; }
.mshop.is-sequenced .mobj--set { --h: 27vh; right: 6%; bottom: 0; width: 28%; }
/* Fixed heights keep each object in its own lane, so names and prices stay clear. */
.mshop.is-sequenced .mobj figure { height: var(--h, 26vh); aspect-ratio: auto; margin-bottom: 10px; }
.mshop.is-sequenced .mobj.is-active { z-index: 2; }
.mshop.is-sequenced .mobj.is-active figure { transform: scale(1.02); transition: transform 1s var(--ease); }
.mshop.is-sequenced .mobj__name { color: var(--fg-2); transition: color .6s var(--ease); }

/* ---------- Coffee: one film, seven beats ---------- */

.coffee { padding: clamp(96px, 14vh, 160px) var(--m); }
.cstory__stage { position: relative; display: grid; gap: clamp(28px, 5vw, 56px); }
.cfilm { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #d9cdb8; }
.cfilm__video, .cfilm__macro { width: 100%; height: 100%; object-fit: cover; }
.cfilm__macro { display: none; }
.cprod { overflow: hidden; aspect-ratio: 3 / 4; width: min(78%, 520px); margin-left: auto; }
.cprod img { width: 100%; height: 100%; object-fit: cover; }
.cbeats { display: grid; gap: 28px; order: 1; }
.cprod { order: 2; }
.cbeat { display: grid; gap: 12px; justify-items: start; align-content: start; }
.coffee__title { font-size: clamp(48px, 7.6vw, 136px); }
.cbeat__n { color: var(--fg-2); }
.cbeat__t { font: 600 clamp(32px, 3.6vw, 64px)/.98 var(--f-display); letter-spacing: -.04em; }
.cbeat__t .serif { font-size: 1.05em; padding: 0 .04em; }
.cbeat__b { max-width: 32ch; color: var(--fg-2); font-size: clamp(16px, 1.2vw, 19px); }
.cbeat__price { font: 400 italic clamp(26px, 2.2vw, 36px)/1 var(--f-serif); margin-bottom: 6px; }
.cbeat--impact { display: none; }
.notes { display: flex; flex-wrap: wrap; gap: 0 .5em; }
.notes li { font: 400 italic clamp(32px, 3.4vw, 60px)/1.05 var(--f-serif); letter-spacing: -.02em; }
.notes li + li::before { content: "·"; padding-right: .5em; color: var(--fg-2); }
.cstory__meter, .cstory__count { display: none; }

/* Pinned film (motion allowed): the footage is scrubbed by a damped scroll value. */
.coffee.is-sequenced { padding: 0; }
.coffee.is-sequenced .cstory { height: 300vh; height: 300svh; position: relative; }
.coffee.is-sequenced .cstory__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: block;
  --reveal: 0; --push: 0; --prod: 0;
}
.coffee.is-sequenced .cfilm {
  position: absolute; inset: 0; aspect-ratio: auto;
  background: #e2d6c1 url("../../stagger/video/coffee/bean-story-poster-1920.webp") 50% 50% / cover no-repeat;
  opacity: calc(1 - var(--prod) * .92);
}
.coffee.is-sequenced .cfilm__video {
  opacity: 0; transition: opacity .6s var(--ease);
  transform: scale(calc(1 + var(--push) * .1 + var(--prod) * .06));
  will-change: transform;
}
.coffee.is-sequenced .cfilm.is-ready .cfilm__video { opacity: 1; }
/* The close-up grows out of the resting bean: a circle opening from where it landed. */
.coffee.is-sequenced .cfilm__macro {
  display: block;
  position: absolute; inset: 0;
  clip-path: circle(calc(2.5vmax + var(--reveal) * 90vmax) at 50% 62%);
  opacity: 0;
  pointer-events: none;
}
.coffee.is-sequenced .cstory__stage.is-revealing .cfilm__macro { opacity: 1; }
.coffee.is-sequenced .cprod {
  position: absolute; margin: 0; aspect-ratio: auto;
  left: 44%; right: calc(var(--m) + 4vw);
  top: calc(var(--nav-h) + 3vh); bottom: 7vh;
  width: auto;
  clip-path: inset(calc((1 - var(--prod)) * 50%) calc((1 - var(--prod)) * 50%) round 2px);
  visibility: hidden;
}
.coffee.is-sequenced .cstory__stage.has-prod .cprod { visibility: visible; }
.coffee.is-sequenced .cprod img {
  transform: scale(calc(1.14 - var(--prod) * .14));
  object-position: 50% 60%;
}
.coffee.is-sequenced .cbeats {
  position: absolute; z-index: 2;
  left: var(--m); width: min(31vw, 460px);
  top: calc(var(--nav-h) + 4vh); bottom: 12vh;
  display: block;
}
.coffee.is-sequenced .cbeat {
  position: absolute; left: 0; right: 0; top: 50%;
  translate: 0 -50%;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .55s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.coffee.is-sequenced .cbeat--bean { top: 0; translate: none; }
.coffee.is-sequenced .cbeat--impact { display: grid; top: auto; bottom: 0; translate: none; }
.coffee.is-sequenced .cbeat.is-past { transform: translate3d(0, -18px, 0); }
.coffee.is-sequenced .cbeat.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
.coffee.is-sequenced .cbeat--product .btn { margin-top: 6px; }
.coffee.is-sequenced .notes { display: grid; gap: 2px; }
.coffee.is-sequenced .notes li { opacity: 0; transform: translate3d(0, .4em, 0); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.coffee.is-sequenced .notes li.is-in { opacity: 1; transform: none; }
.coffee.is-sequenced .notes li + li::before { content: none; }
.coffee.is-sequenced .notes li:nth-child(2) { padding-left: .9em; }
.coffee.is-sequenced .notes li:nth-child(3) { padding-left: .35em; }
.coffee.is-sequenced .cstory__stage > * { transition: color .6s var(--ease); }
.coffee.is-sequenced .cstory__stage.is-dark { --fg: var(--milk); --fg-2: rgba(243, 239, 231, .72); --rule: rgba(243, 239, 231, .24); }
.coffee.is-sequenced .cstory__stage.is-dark .cbeats { color: var(--milk); }
.coffee.is-sequenced .cstory__meter {
  display: block;
  position: absolute; z-index: 3; left: var(--m); bottom: clamp(24px, 4.5vh, 44px);
  width: min(31vw, 460px); height: 1px; background: var(--rule);
}
.coffee.is-sequenced .cstory__meter span { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }
.coffee.is-sequenced .cstory__count {
  display: block;
  position: absolute; z-index: 3; left: var(--m); bottom: calc(clamp(24px, 4.5vh, 44px) + 14px);
  color: var(--fg-2); font-variant-numeric: tabular-nums;
}

/* ---------- Objects ---------- */

.objects { padding: clamp(96px, 14vh, 160px) var(--m) clamp(120px, 18vh, 200px); }
.objects__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px 24px;
  margin-bottom: clamp(48px, 8vh, 96px);
}
.objects__head .label { grid-column: 1 / -1; }
.objects__title { font-size: clamp(48px, 8vw, 144px); }
.objects__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gut);
  align-items: start;
}
.object:nth-child(2) { margin-top: 9vw; }
.object:nth-child(3) { margin-top: 3vw; }
.object:nth-child(4) { margin-top: 13vw; }
.object a { display: grid; gap: 8px; text-decoration: none; }
.object figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--oat); margin-bottom: 10px; }
.object img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.object a:hover img { transform: scale(1.035); }
.object__cat { color: var(--fg-2); }
.object__name { font: 500 clamp(17px, 1.3vw, 21px)/1.2 var(--f-display); letter-spacing: -.02em; }
.object__price { font: 400 italic 21px/1 var(--f-serif); }
.object a:hover .object__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Community ---------- */

.community {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: clamp(96px, 14vh, 160px) var(--m);
  align-items: start;
}
.community__head { grid-column: 1 / 8; grid-row: 1; display: grid; gap: 20px; margin-bottom: clamp(48px, 7vh, 80px); }
.community__title { font-size: clamp(48px, 8vw, 144px); }
.community__sub { font-size: clamp(17px, 1.3vw, 20px); color: var(--fg-2); }
.community figure { overflow: hidden; }
.community figure img, .community figure video { width: 100%; height: 100%; object-fit: cover; }
.community__a { grid-column: 1 / 8; grid-row: 2; aspect-ratio: 3 / 2; }
.community__b { grid-column: 9 / 12; grid-row: 1 / 3; align-self: end; aspect-ratio: 9 / 16; background: #d9d4cb; }
.community__c { grid-column: 2 / 5; grid-row: 3; aspect-ratio: 3 / 4; margin-top: var(--gut); }
.community__d { grid-column: 6 / 9; grid-row: 3; aspect-ratio: 3 / 4; margin-top: 12vw; }
.press { grid-column: 10 / 13; grid-row: 3; margin-top: 6vw; display: grid; gap: 16px; justify-items: start; }
.press__list { display: grid; gap: 2px; }
.press__list li { font: 500 clamp(20px, 1.8vw, 28px)/1.2 var(--f-display); letter-spacing: -.03em; }
.press__list li:nth-child(even) { padding-left: 1.2em; }
.press__list a {
  display: inline-flex; align-items: center; gap: .3em;
  min-height: 44px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .28em) / 0 1px no-repeat;
  transition: background-size .5s var(--ease), opacity .3s var(--ease);
}
.press__list a:hover { background-size: 100% 1px; }
.press__arrow { font-size: .6em; opacity: 0; transform: translate3d(-4px, 2px, 0); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.press__list a:hover .press__arrow, .press__list a:focus-visible .press__arrow { opacity: .7; transform: none; }
.press__desc {
  display: block;
  font: 400 13px/1.4 var(--f-body); letter-spacing: 0;
  color: var(--fg-2);
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity .5s var(--ease), max-height .5s var(--ease), margin .5s var(--ease);
}
.press.is-open .press__desc { opacity: 1; max-height: 3em; margin: 2px 0 10px; }
.press__toggle { background: none; border: 0; padding: 0; cursor: pointer; }
.press__toggle[aria-expanded="true"] span[aria-hidden] { transform: rotate(90deg); }

/* ---------- Visit ---------- */

.visit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: clamp(96px, 14vh, 160px) var(--m) clamp(96px, 14vh, 160px);
  align-items: start;
}
.visit__info { grid-column: 1 / 5; display: grid; gap: 26px; justify-items: start; }
.visit__title { font-size: clamp(56px, 7vw, 128px); }
.visit__addr { font: 500 clamp(22px, 1.9vw, 30px)/1.2 var(--f-display); letter-spacing: -.03em; }
.hours { display: grid; width: 100%; border-top: 1px solid var(--rule); }
.hours div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hours dt { font: 500 11px/1.9 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.hours dd { font-variant-numeric: tabular-nums; }
.visit__note {
  font-size: 12.5px; line-height: 1.45;
  color: var(--fg-2);
  padding-left: 12px; border-left: 2px solid var(--matcha);
  max-width: 34ch;
}
.visit__actions { display: grid; gap: 4px; justify-items: start; margin-top: 4px; }
.visit__actions .btn { margin-bottom: 10px; }

.visit__map {
  grid-column: 5 / 10;
  margin-top: 12vh;
  height: clamp(420px, 62vh, 640px);
  background: #EDE8DD;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
}
.map-fallback {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: start; gap: 10px;
  padding: 32px;
  font: 500 22px/1.2 var(--f-display); letter-spacing: -.02em;
}
.visit__map .leaflet-container { width: 100%; height: 100%; background: #EFEBE2; font-family: var(--f-body); }
.visit__map .leaflet-tile-pane { filter: grayscale(1) sepia(.22) brightness(1.1) contrast(.78); }
.visit__map .leaflet-container::after {
  content: ""; position: absolute; inset: 0; z-index: 250; pointer-events: none;
  background: rgba(158, 194, 63, .07); mix-blend-mode: multiply;
}
.visit__map .leaflet-control-attribution { background: rgba(243, 239, 231, .85); color: var(--ink-2); font-size: 10px; }
.visit__map .leaflet-control-attribution a { color: var(--ink-2); }
.visit__map .leaflet-bar { border: 0; box-shadow: none; }
.visit__map .leaflet-bar a,
.visit__map .leaflet-touch .leaflet-bar a {
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  background: var(--milk); color: var(--ink); border-bottom: 1px solid var(--line);
}
.map-pin { position: relative; }
.map-pin span {
  position: absolute; left: -9px; top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--matcha-deep);
  box-shadow: 0 0 0 6px rgba(158, 194, 63, .35);
}
.map-pin b {
  position: absolute; left: 18px; top: -12px;
  white-space: nowrap;
  font: 600 13px/24px var(--f-display); letter-spacing: -.01em;
  padding: 0 10px; background: var(--ink); color: var(--milk);
}

.visit__media { grid-column: 10 / 13; margin-top: 30vh; display: grid; gap: 12px; }
.visit__media video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #e6e0d4; }
.visit__media figcaption { color: var(--fg-2); }

/* ---------- Footer ---------- */

.footer {
  background: var(--ink); color: var(--milk);
  padding: clamp(80px, 12vh, 140px) var(--m) 32px;
  --fg-2: #A39D90; --rule: rgba(243, 239, 231, .16);
  position: relative; z-index: 1;
}
.footer__big {
  font-size: clamp(48px, 10.4vw, 188px);
  line-height: .9;
  margin-bottom: clamp(64px, 10vh, 120px);
}
.footer__big .serif { font-size: .8em; }
.footer__un { display: inline-block; white-space: nowrap; }
.footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gut);
  padding-top: 28px; border-top: 1px solid var(--rule);
}
.footer__cols .label { color: var(--fg-2); margin-bottom: 14px; }
.footer__cols p { font-size: 15px; line-height: 1.7; }
.footer__cols a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer__cols p { line-height: 1.5; }
.footer__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__base {
  margin-top: clamp(64px, 10vh, 120px);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--fg-2);
}
.footer__base img { width: 96px; height: auto; margin-right: auto; }

/* ---------- Reveals (JS + motion only) ---------- */

.motion [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.motion [data-split] .w > span { display: inline-block; }

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
  .nav__links a { padding: 0 8px; }
  .nav { gap: 20px; }

  .hero__top { grid-column: 1 / 8; }
  /* Tablet: anchor the circle bottom-right so the intro copy keeps a clean cream field. */
  .hero__stage { --d: min(max(58vw, 46vh), 640px); right: -6vw; top: auto; bottom: -6vh; }
  .hero__title { font-size: clamp(64px, 13vw, 140px); }

  .story__title { grid-column: 1 / 13; }
  .story__media { grid-column: 3 / 13; margin-top: 32px; }
  .story__body { grid-column: 1 / 11; grid-row: 4; margin-top: 40px; }
  .pillars { grid-row: 5; grid-column: 1 / 13; }

  .drink__media { grid-column: 1 / 8; }
  .drink__copy { grid-column: 8 / 13; }
  .drink:nth-child(even) .drink__media { grid-column: 6 / 13; }
  .drink:nth-child(even) .drink__copy { grid-column: 1 / 6; }

  .mshop__lead { grid-column: 1 / 13; margin-bottom: 56px; }
  .mshop__objects { grid-column: 1 / 13; }
  .drinks.is-sequenced .drink__copy { grid-column: 1 / 6; }
  .drinks.is-sequenced .drink__media { grid-column: 6 / 13; }

  .objects__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .object:nth-child(2) { margin-top: 12vw; }
  .object:nth-child(3) { margin-top: 0; }
  .object:nth-child(4) { margin-top: 12vw; }

  .community__head { grid-column: 1 / 13; }
  .community__a { grid-column: 1 / 13; grid-row: 2; }
  .community__b { grid-column: 8 / 13; grid-row: 3; align-self: start; margin-top: -10vw; }
  .community__c { grid-column: 1 / 7; grid-row: 3; }
  .community__d { grid-column: 2 / 7; grid-row: 4; margin-top: 32px; }
  .press { grid-column: 8 / 13; grid-row: 4; margin-top: 48px; }

  .visit__info { grid-column: 1 / 7; }
  .visit__media { grid-column: 8 / 12; margin-top: 18vh; }
  .visit__map { grid-column: 1 / 13; grid-row: 2; margin-top: 64px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; margin-right: -10px; }
  .nav__logo img { width: 100px; }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2vh);
    padding-bottom: 56px;
    grid-template-rows: auto auto auto;
    overflow: clip;
  }
  /* The circle leads, then the headline — no text over moving video on a phone. */
  .hero__stage {
    position: relative; top: auto; right: auto;
    --d: 116vw; width: var(--d);
    grid-column: 1 / 13; grid-row: 1;
    justify-self: end;
    margin-right: -24vw;
  }
  .hero__title { grid-row: 2; grid-column: 1 / 13; font-size: clamp(50px, 16.6vw, 96px); margin: 4vh 0 0; }
  .ttl--light { display: none; }
  .hero__top { grid-column: 1 / 13; grid-row: 3; margin-top: 26px; gap: 18px; padding-top: 0; }
  .hero__top .label { display: none; }
  .hero__rim::after { width: 30px; margin-left: -15px; }
  .hero__coords { display: none; }

  .story__label, .story__title, .story__media, .story__body, .pillars { grid-column: 1 / 13; }
  .story__media { margin-right: calc(var(--m) * -1); margin-left: 14%; }
  .pillars { grid-template-columns: 1fr; }
  .pillars li, .pillars li:nth-child(2) { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .pillars li:nth-child(2) { padding-left: 14%; }

  .drinks__head { grid-template-columns: 1fr; }
  .drinks__list { gap: 56px; }
  .drink, .drink:nth-child(even) { grid-template-columns: 1fr; }
  .drink .drink__media, .drink:nth-child(even) .drink__media { grid-column: 1; width: 86%; height: clamp(280px, 84vw, 380px); }
  .drink:nth-child(even) .drink__media { justify-self: end; }
  .drink .drink__copy, .drink:nth-child(even) .drink__copy { grid-column: 1; grid-row: 2; margin-top: 12px; }
  .drink:nth-child(even) .drink__copy { padding-left: 14%; }
  .drink__num { font-size: 104px; bottom: -4%; right: auto; left: -4%; }
  .drink:nth-child(even) .drink__num { left: auto; right: -4%; }

  .matcha__title .serif { margin-left: 0; }
  .mchap--ritual .mchap__media { width: 86%; }
  .mchap--origin .mchap__media { width: 100%; }
  .mchap--origin .mchap__copy { padding-left: 10%; }
  .mshop__stage { display: block; }
  .mshop__objects { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; margin-top: 48px; }
  .mobj:nth-child(2), .mobj:nth-child(4) { margin-top: 44px; }
  .mobj:nth-child(3) { margin-top: 0; }

  .objects__head { grid-template-columns: 1fr; }
  .objects__list { column-gap: 12px; }
  .object:nth-child(2), .object:nth-child(4) { margin-top: 56px; }
  .object__price { font-size: 18px; }

  .community { display: flex; flex-direction: column; gap: 20px; }
  .community__head { margin-bottom: 20px; }
  .community__b { width: 58%; align-self: flex-end; margin-top: -64px; }
  .community__c { width: 64%; margin-top: 0; }
  .community__d { width: 64%; align-self: flex-end; margin-top: -40px; }
  .press { margin-top: 28px; }

  .visit { display: flex; flex-direction: column; gap: 40px; }
  .visit__media { width: 62%; align-self: flex-end; margin-top: 0; order: 2; }
  .visit__map { order: 3; margin-top: 0; width: 100%; height: 380px; }

  .footer__cols { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .footer__big { font-size: clamp(44px, 14vw, 80px); }
}

/* ---------- Mobile composition (motion or not) ---------- */

@media (max-width: 760px) {
  /* Hero: the glass leads from the top right, the headline crosses its lower edge. */
  .hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 10px);
    padding-bottom: 28px;
    grid-template-rows: auto minmax(min(54svh, 128vw), 1fr) auto auto;
  }
  .hero__top { display: contents; }
  .hero__top .label { display: block; grid-row: 1; grid-column: 1 / 8; position: relative; z-index: 3; max-width: 13em; }
  .hero__stage {
    position: absolute;
    /* Short phones: the circle is bounded by height so it never sits under the intro line. */
    --d: min(112vw, 54svh);
    width: var(--d);
    top: calc(var(--nav-h) + 26px); right: calc(var(--d) * -.3);
    margin: 0;
  }
  .hero__title { grid-row: 2; align-self: end; margin: 0; font-size: clamp(54px, 17.4vw, 96px); }
  .ttl--light { display: flow-root; }
  .hero__lede { grid-row: 3; grid-column: 1 / 11; margin-top: 22px; font-size: 17px; position: relative; z-index: 3; }
  .hero__actions { grid-row: 4; grid-column: 1 / 13; margin-top: 18px; position: relative; z-index: 3; }

  /* Story: “Reconnect.” lands on the photograph; the paragraph overlaps its lower edge. */
  .story { padding-top: 88px; padding-bottom: 88px; }
  .story__label { margin-bottom: 24px; }
  .story__title { font-size: clamp(46px, 13.4vw, 64px); }
  .story__media { margin-top: -.95em; font-size: clamp(46px, 13.4vw, 64px); margin-left: 12%; aspect-ratio: 4 / 5; }
  .story__media img { object-position: 38% 50%; }
  .story__body {
    position: relative; z-index: 2;
    width: 88%; margin-top: -72px;
    padding: 22px 22px 0 0;
    background: var(--bg);
  }
  .story__body p { font-size: 17px; }
  .pillars { margin-top: 44px; }
}

/* ---------- Mobile sequences (motion allowed) ---------- */

@media (max-width: 760px) {
  /* Signature menu: one stage, the drink stays centre while its details change around it. */
  .drinks.is-sequenced .drinks__track { height: calc(var(--n, 5) * 44svh + 100svh); }
  .drinks.is-sequenced .drinks__stage {
    padding: calc(var(--nav-h) + 6px) var(--m) 10px;
    row-gap: 4px;
  }
  .drinks.is-sequenced .drinks__head { grid-template-columns: 1fr auto; align-items: end; }
  .drinks.is-sequenced .drinks__head > div { gap: 8px; }
  .drinks.is-sequenced .drinks__title { font-size: 34px; }
  .drinks.is-sequenced .drinks__more { font-size: 13px; }
  .drinks.is-sequenced .drink,
  .drinks.is-sequenced .drink:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .drinks.is-sequenced .drink .drink__media,
  .drinks.is-sequenced .drink:nth-child(even) .drink__media {
    grid-column: 1; grid-row: 1; width: 100%; height: 100%;
    justify-self: stretch;
  }
  .drinks.is-sequenced .drink .drink__copy,
  .drinks.is-sequenced .drink:nth-child(even) .drink__copy {
    grid-column: 1; grid-row: 2;
    margin: 0; padding: 4px 0 8px;
    gap: 6px;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 24px, 0);
    transition: opacity .5s var(--ease), transform .9s var(--ease), clip-path .9s var(--ease);
  }
  .drinks.is-sequenced .drink:nth-child(even) .drink__copy { padding-left: 14%; }
  .drinks.is-sequenced .drink.is-active .drink__copy,
  .drinks.is-sequenced .drink.is-active:nth-child(even) .drink__copy { clip-path: inset(0 0 0 0); transform: none; }
  .drinks.is-sequenced .drink.is-past .drink__copy,
  .drinks.is-sequenced .drink.is-past:nth-child(even) .drink__copy { clip-path: inset(100% 0 0 0); transform: translate3d(0, -12px, 0); }
  .drinks.is-sequenced .drink__name { font-size: clamp(32px, 9.4vw, 44px); }
  .drinks.is-sequenced .drink__ing { font-size: 14px; line-height: 1.45; max-width: 34ch; }
  .drinks.is-sequenced .drink__price { font-size: 24px; }
  .drinks.is-sequenced .drink__idx { display: none; }
  /* Odd drinks sit a little left, even a little right: balanced, never centred. */
  .drinks.is-sequenced .drink__float { transform: translate3d(-5%, 0, 0); }
  .drinks.is-sequenced .drink:nth-child(even) .drink__float { transform: translate3d(5%, 0, 0); }
  .drinks.is-sequenced .drink__float img { max-height: calc(94% * var(--fit, 1)); }
  .drinks.is-sequenced .drink.is-active .drink__float img {
    transform: translate3d(0, calc((.5 - var(--cp, .5)) * 26px), 0) rotate(calc((var(--cp, .5) - .5) * 2.4deg));
  }
  .drinks.is-sequenced .drink__num,
  .drinks.is-sequenced .drink:nth-child(even) .drink__num {
    left: auto; right: -3%; bottom: 2%;
    font-size: min(46vw, 30svh);
    color: rgba(28, 27, 24, .08);
  }
  .drinks.is-sequenced .drink:nth-child(even) .drink__num { right: auto; left: -3%; }
  .drinks.is-sequenced .drink__light {
    display: block;
    width: 110vw; height: 110vw; margin: -55vw 0 0 -55vw;
  }
  .drinks__ticks b { display: inline; font: 500 11px/1 var(--f-body); letter-spacing: .14em; padding-bottom: 5px; }
  .drinks__ticks button span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .drinks__ticks button[aria-current="true"] b { box-shadow: inset 0 -1px 0 currentColor; }

  /* Matcha ritual: full-bleed campaign frames that transform rather than reset. */
  .matcha.is-sequenced { padding-inline: 0; }
  .matcha.is-sequenced .mstory { height: calc(3 * 58svh + 100svh); }
  .matcha.is-sequenced .mchap {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .matcha.is-sequenced .mchap .mchap__media,
  .matcha.is-sequenced .mchap--ritual .mchap__media,
  .matcha.is-sequenced .mchap--origin .mchap__media,
  .matcha.is-sequenced .mchap--ingredient .mchap__media {
    position: absolute; left: 0; right: 0; top: calc(var(--nav-h) - 8px); bottom: 24svh;
    grid-column: auto;
    height: auto; width: auto;
    transform: scale(1.06);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 70%, transparent);
  }
  .matcha.is-sequenced .mchap.is-active .mchap__media { transform: none; }
  .matcha.is-sequenced .mchap--ritual .mchap__media img { object-position: 50% 44%; }
  .matcha.is-sequenced .mchap__media img { transition: transform .4s linear; }
  .matcha.is-sequenced .mchap--ritual.is-active .mchap__media img { transform: scale(calc(1.08 - var(--cp, 0) * .08)); }
  /* Origin starts on the powder in the lid and pulls back to reveal the tin. */
  .matcha.is-sequenced .mchap--origin .mchap__media img { object-position: 52% 60%; transform-origin: 62% 66%; transform: scale(1.7); }
  .matcha.is-sequenced .mchap--origin.is-active .mchap__media img { transform: scale(calc(1.7 - var(--cp, 0) * .7)); }
  .matcha.is-sequenced .mchap--ingredient .mchap__media img { object-position: 58% 56%; }
  .matcha.is-sequenced .mchap--ingredient.is-active .mchap__media img { transform: translate3d(calc(var(--cp, 0) * -3%), 0, 0) scale(1.06); }
  .matcha.is-sequenced .mchap .mchap__copy,
  .matcha.is-sequenced .mchap--ingredient .mchap__copy {
    position: absolute; left: var(--m); right: var(--m); bottom: calc(8svh + 22px);
    grid-column: auto; align-self: auto; padding: 0;
    gap: 10px;
  }
  .matcha.is-sequenced .mchap--ritual .mchap__copy { bottom: auto; top: calc(var(--nav-h) + 6px); }
  .matcha.is-sequenced .matcha__title { font-size: clamp(44px, 12.8vw, 60px); }
  .matcha.is-sequenced .mchap__t { font-size: clamp(36px, 10.4vw, 48px); }
  .matcha.is-sequenced .mchap--ingredient .mchap__t { font-size: clamp(36px, 10.4vw, 48px); }
  .matcha.is-sequenced .mchap__b { font-size: 16px; max-width: 30ch; }
  .matcha.is-sequenced .mchap--ingredient .mchap__b { font-size: 16px; }
  .matcha.is-sequenced .mstory__index { left: var(--m); gap: 18px; bottom: 4svh; }
  .matcha.is-sequenced .mstory__light { left: 50%; top: 42%; width: 120vw; height: 120vw; margin: -60vw 0 0 -60vw; }

}

@media (max-width: 1023px) {
  /* Matcha shop: the ritual assembles into one arrangement. */
  .mshop.is-sequenced { margin-top: 0; }
  .mshop.is-sequenced .mshop__track { height: calc(4 * 42svh + 100svh); }
  .mshop.is-sequenced .mshop__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 14px;
    padding: calc(var(--nav-h) + 8px) var(--m) 16px;
  }
  .mshop.is-sequenced .mshop__lead {
    grid-column: 1; grid-row: 1;
    grid-template-columns: 1fr auto; align-items: end;
    gap: 6px 16px; margin: 0;
  }
  .mshop.is-sequenced .mshop__lead .label:first-child,
  .mshop.is-sequenced .mshop__name { grid-column: 1 / -1; }
  .mshop.is-sequenced .mshop__name { font-size: clamp(26px, 7.6vw, 34px); }
  .mshop.is-sequenced .mshop__note { display: none; }
  .mshop.is-sequenced .mshop__price { grid-column: 1; margin: 0; font-size: 26px; align-self: center; }
  .mshop.is-sequenced .mshop__lead .btn { grid-column: 2; grid-row: 3; min-height: 44px; padding: 0 20px; }
  .mshop.is-sequenced .mshop__step { grid-column: 1 / -1; margin-top: 6px; }
  .mshop.is-sequenced .mshop__objects { grid-column: 1; grid-row: 2; }
  .mshop.is-sequenced .mobj--matcha { --h: min(24svh, 54vw); left: 0; top: 0; width: 50%; }
  .mshop.is-sequenced .mobj--whisk { --h: min(19svh, 44vw); right: 0; top: 7%; width: 42%; }
  .mshop.is-sequenced .mobj--scoop { --h: min(18svh, 42vw); left: 5%; top: auto; bottom: 0; width: 41%; }
  .mshop.is-sequenced .mobj--set { --h: min(21svh, 48vw); right: 2%; top: auto; bottom: 3%; width: 47%; }
  .mshop.is-sequenced .mobj figure { margin-bottom: 6px; }
  .mshop.is-sequenced .mobj__cat { display: none; }
  .mshop.is-sequenced .mobj__name { font-size: 13px; line-height: 1.25; }
  .mshop.is-sequenced .mobj__price { font-size: 16px; }
  .mshop.is-sequenced .mobj a { gap: 2px; }

}

@media (max-width: 760px) {
  /* Coffee: the film fills the phone; copy rises from a warm scrim at the bottom. */
  .coffee.is-sequenced .cstory { height: 320svh; }
  .coffee.is-sequenced .cstory__stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(231, 223, 208, 0), rgba(231, 223, 208, .86) 48%, var(--oat) 78%);
  }
  .coffee.is-sequenced .cfilm__video { object-position: 50% 50%; }
  .coffee.is-sequenced .cbeats {
    left: var(--m); right: var(--m); width: auto;
    top: calc(var(--nav-h) + 8px); bottom: 64px;
  }
  .coffee.is-sequenced .cbeat { top: auto; bottom: 0; translate: none; }
  .coffee.is-sequenced .cbeat--bean { top: 0; bottom: auto; }
  .coffee.is-sequenced .cbeat--bean .cbeat__n { margin-top: 6px; }
  .coffee.is-sequenced .coffee__title { font-size: clamp(46px, 13.4vw, 64px); }
  .coffee.is-sequenced .cbeat__t { font-size: clamp(38px, 11vw, 52px); }
  .coffee.is-sequenced .notes li { font-size: clamp(38px, 11vw, 52px); }
  .coffee.is-sequenced .cprod { left: 0; right: 0; top: 0; bottom: 34svh; }
  .coffee.is-sequenced .cstory__meter { left: var(--m); right: var(--m); width: auto; bottom: 28px; }
  .coffee.is-sequenced .cstory__stage.is-dark { --fg: var(--ink); --fg-2: var(--ink-2); --rule: var(--line); }
  .coffee.is-sequenced .cstory__stage.is-dark .cbeats { color: var(--ink); }
  .coffee.is-sequenced .cstory__count { bottom: 40px; }
}

/* Reduce Motion: no looping decoration or smooth scrolling. Crossfades between chapters stay,
   because the sticky stages are how the content is laid out, not an effect. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Phone scrubbers draw to a canvas in place of the <video>. */
canvas.hero__video, canvas.cfilm__video { display: block; width: 100%; height: 100%; }