/* =========================================================================
   MOTIQ — design concept
   Palette is sampled from the brand's own photography: the page ground
   changes to match the background of whatever is being shown.
   ========================================================================= */

:root{
  --bg:#121211;
  --fg:#F4F1EA;
  --accent:#8FB23A;

  --page-bg:#121211;
  --page-fg:#F4F1EA;

  --gutter:clamp(20px, 5vw, 92px);
  --maxw:1460px;
  --rule:1px;
  --nav-h:clamp(58px, 6.2vw, 78px);

  --step:clamp(64px, 9vw, 150px);   /* vertical section rhythm */

  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:180ms;
  --t-mid:320ms;
  --t-slow:640ms;

  --font-display:"Bodoni Moda", "Times New Roman", serif;
  --font-sans:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--page-bg);
}
html.lenis,html.lenis body{height:auto}
/* Native smooth scrolling is the no-JS fallback for the anchor links. Once
   Lenis is driving it has to go, and not only when Lenis says it is mid-scroll:
   `scroll-behavior:smooth` makes every programmatic scroll animate, so the one
   ScrollTrigger performs to measure the page never lands before it reads the
   positions back, and every trigger is recorded short by the scroll offset. */
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--page-bg);
  color:var(--page-fg);
  font-family:var(--font-sans);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow-x:hidden` turns <body> into a scroll
     container, which stops position:sticky working anywhere inside it. */
  overflow-x:clip;
}

/* height:auto matters: without it a width/height attribute pair on an <img>
   sets a presentational height that nothing overrides, so any rule relying on
   aspect-ratio is ignored and object-fit crops to the attribute's shape. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure,table{margin:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--accent);color:#0C0C0B}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:12px 18px;background:#F4F1EA;color:#121211;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transform:translateY(-160%);
  transition:transform var(--t-mid) var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  opacity:.62;margin-bottom:1.1em;
}
.chapter__title,.hero__title,.visit__title,.statement__text{
  font-family:var(--font-display);
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.chapter__title{
  font-size:clamp(2.35rem,5.6vw,4.9rem);
  line-height:1.02;
  margin-bottom:.4em;
}
.chapter__lede{
  max-width:46ch;
  font-size:clamp(1rem,.5vw + .92rem,1.16rem);
  opacity:.78;
}

/* ---------- theming ---------- */
[data-theme]{background:var(--bg);color:var(--fg);position:relative}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 1.6rem;
  border:var(--rule) solid currentColor;border-radius:999px;
  font-size:.82rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:inherit;background:transparent;
  cursor:pointer;
  transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.btn--accent{
  background:var(--accent);border-color:var(--accent);color:#101007;
}
.btn--accent:hover{background:transparent;color:var(--accent)}
.btn--ghost{opacity:.86}
.btn--ghost:hover{opacity:1;background:color-mix(in srgb, var(--fg) 10%, transparent)}
.btn--sm{min-height:42px;padding:0 1.15rem;font-size:.72rem}
.btn:active{transform:translateY(1px)}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  color:var(--nav-fg,#F4F1EA);
  transition:color var(--t-slow) var(--ease), background var(--t-slow) var(--ease),
             backdrop-filter var(--t-slow) var(--ease);
}
.nav--solid{
  background:color-mix(in srgb, var(--page-bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom:var(--rule) solid color-mix(in srgb, currentColor 14%, transparent);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(14px,2vw,22px) var(--gutter);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.wordmark{
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  letter-spacing:-.03em;text-decoration:none;line-height:1;
  margin-right:auto;
}
.wordmark span{color:var(--accent)}
.wordmark--lg{font-size:clamp(3rem,9vw,6.5rem)}

.nav__links{display:flex;gap:clamp(14px,1.8vw,28px)}
.nav__links a{
  position:relative;text-decoration:none;
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 0;opacity:.76;
  transition:opacity var(--t-mid) var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible{opacity:1}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}

.nav__toggle{
  display:none;width:48px;height:48px;padding:0;
  background:transparent;border:var(--rule) solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius:999px;color:inherit;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav__toggle-bars{display:block;width:17px}
.nav__toggle-bars i{
  display:block;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.nav__toggle-bars i+i{margin-top:5px}
.nav__toggle[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.nav__panel{
  position:fixed;inset:0;z-index:99;
  background:var(--page-bg);color:var(--page-fg);
  padding:clamp(88px,18vh,140px) var(--gutter) var(--gutter);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.nav__panel[hidden]{display:none}
.nav__panel nav{display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px)}
.nav__panel nav a{
  font-family:var(--font-display);
  font-size:clamp(2rem,9vw,3rem);line-height:1.12;
  text-decoration:none;letter-spacing:-.02em;
}
.nav__panel-foot{display:flex;flex-wrap:wrap;gap:12px}
.nav__panel-foot .btn{flex:1 1 180px}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:clamp(120px,18vh,190px) var(--gutter) clamp(20px,3vh,34px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(var(--hero-zoom,1));
  transform-origin:47% 50%;
}
.hero__video{opacity:0;transition:opacity 900ms var(--ease)}
.hero__video.is-playing{opacity:1}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(9,9,8,.88) 0%, rgba(9,9,8,.62) 38%, rgba(9,9,8,.18) 70%, rgba(9,9,8,.42) 100%),
    linear-gradient(to top, rgba(9,9,8,.92) 0%, rgba(9,9,8,.15) 44%, rgba(9,9,8,.5) 100%);
}
@media (min-width:600px){.hero{--hero-zoom:1.2}}
@media (min-width:900px){.hero{--hero-zoom:1.5}}

.hero__body{max-width:var(--maxw);width:100%;margin:0 auto;align-self:center}
.hero__eyebrow{opacity:.8}
.hero__title{
  font-size:clamp(3.6rem,13.5vw,11rem);
  line-height:.86;
  margin:0 0 clamp(20px,3vh,34px);
  letter-spacing:-.035em;
}
.hero__title .motion-line-mask{display:block}
.hero__lede{max-width:40ch;font-size:clamp(1.02rem,.6vw + .92rem,1.28rem);opacity:.88}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,42px)}

.hero__facts{
  max-width:var(--maxw);width:100%;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,2vw,30px);
  padding-top:clamp(18px,3vh,30px);
  border-top:var(--rule) solid color-mix(in srgb, currentColor 22%, transparent);
}
.hero__facts dt{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:.35em;
}
.hero__facts dd{margin:0;font-size:clamp(.82rem,.4vw + .72rem,.95rem)}
.hero__facts a{text-decoration:none;border-bottom:1px solid color-mix(in srgb, currentColor 40%, transparent);padding-bottom:1px}
.hero__facts a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* =========================================================================
   STATEMENT
   ========================================================================= */
.statement{
  padding:clamp(90px,16vh,190px) var(--gutter);
}
.statement__text{
  max-width:19ch;margin:0 auto;
  font-size:clamp(1.9rem,5.2vw,4.1rem);
  line-height:1.08;text-align:center;
}
.statement__meta{
  margin:clamp(24px,4vh,42px) auto 0;text-align:center;
  font-size:.86rem;letter-spacing:.06em;opacity:.6;
}

/* =========================================================================
   CHAPTERS — shared
   ========================================================================= */
.chapter{padding:var(--step) var(--gutter)}
.chapter__head{max-width:var(--maxw);margin:0 auto clamp(40px,6vw,76px)}
.chapter__head--split{
  display:grid;gap:clamp(20px,4vw,64px);
  grid-template-columns:minmax(0,1fr);
  align-items:end;
}
@media (min-width:900px){
  .chapter__head--split{grid-template-columns:1.1fr .9fr}
  .chapter__head--split .chapter__lede{padding-bottom:.65em}
}

.frame{overflow:hidden;background:color-mix(in srgb, currentColor 8%, transparent)}
.frame img{width:100%;height:100%;object-fit:cover}

/* ---------- matcha showcase ---------- */
.showcase{
  max-width:var(--maxw);margin:0 auto;
  display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:minmax(0,1fr);
}
.showcase__hero{overflow:hidden;aspect-ratio:4/5}
.showcase__hero img{width:100%;height:115%;object-fit:cover}
.showcase__side{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.showcase__side figure{overflow:hidden;aspect-ratio:3/4;background:color-mix(in srgb, currentColor 8%, transparent)}
.showcase__side img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .showcase{grid-template-columns:1.32fr .68fr;align-items:stretch}
  .showcase__hero{aspect-ratio:auto;min-height:clamp(460px,64vh,760px)}
  .showcase__side{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .showcase__side figure{aspect-ratio:auto}
}

/* ---------- menus ---------- */
.menu{max-width:var(--maxw);margin:clamp(44px,6vw,86px) auto 0}
.menu--tight{margin-top:clamp(36px,4vw,60px)}
.menu--bare{margin:0}
.menu__cat{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;
  padding-bottom:.9em;margin-bottom:1.4em;
  border-bottom:var(--rule) solid color-mix(in srgb, currentColor 18%, transparent);
}
.menu__list{display:grid;gap:clamp(18px,2.4vw,30px)}
@media (min-width:760px){
  .menu > .menu__list{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px) clamp(36px,6vw,96px)}
  .menu--bare .menu__list,.menu__list--compact{grid-template-columns:1fr}
}
.menu__item p{
  margin-top:.45em;font-size:.92rem;line-height:1.55;opacity:.66;max-width:48ch;
}
.menu__row{display:flex;align-items:baseline;gap:.6em}
.menu__row h3{
  font-family:var(--font-display);
  font-size:clamp(1.12rem,.7vw + 1rem,1.42rem);
  font-weight:400;letter-spacing:-.01em;line-height:1.25;
}
.menu__row h3 em{
  font-family:var(--font-sans);font-style:normal;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;margin-left:.6em;vertical-align:middle;
}
.menu__dots{
  flex:1 1 auto;height:1px;min-width:18px;
  background:repeating-linear-gradient(to right, currentColor 0 2px, transparent 2px 6px);
  opacity:.28;transform:translateY(-3px);
}
.menu__price{
  font-size:.92rem;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  opacity:.85;white-space:nowrap;
}
.menu__list--inline{margin-top:clamp(28px,4vw,44px)}

/* ---------- sequence: a sticky track that scroll walks through ----------
   Shared by the cream tops and the espresso beans. The track is a tall block
   of ordinary page; the stage inside it is sticky, and the panels share one
   grid cell so the stage sizes itself to the tallest of them. Nothing in JS
   touches layout height, so a ScrollTrigger refresh can never park a reveal.
   Each section supplies its own entrance; only the machinery is common. */
.seq{max-width:var(--maxw);margin:0 auto;position:relative}
.seq__stage{position:relative}

.seq__item{
  display:grid;gap:clamp(22px,3.4vw,58px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
.seq__item + .seq__item{margin-top:clamp(44px,6vw,84px)}   /* no-JS: a readable stack */
.seq__text{position:relative}
.seq__media{position:relative;min-height:0}

@media (max-width:899px){
  .seq__media{order:-1}          /* single column: lead with the picture */
}
@media (min-width:900px){
  .seq__item{grid-template-columns:.92fr 1.08fr}
}

/* ---- sequenced: the sticky track ---- */
.seq.is-sequenced{
  --seq-steps:2.9;
  height:calc(var(--seq-steps) * 100svh);
}
.seq.is-sequenced .seq__stage{
  position:sticky;top:0;height:100svh;
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  padding:calc(var(--nav-h) + clamp(6px,1.4vw,22px)) 0 clamp(16px,2.6vw,30px);
}
.seq.is-sequenced .seq__panels{
  position:relative;display:grid;min-height:0;
}
/* One shared grid cell: the stage sizes itself to the tallest panel. */
.seq.is-sequenced .seq__item{
  grid-area:1 / 1;margin:0;height:100%;min-height:0;
  opacity:0;visibility:hidden;pointer-events:none;
}
.seq.is-sequenced .seq__item.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
}
.seq.is-sequenced .seq__media{aspect-ratio:auto;height:100%;min-height:0}

@media (max-width:899px){
  .seq.is-sequenced .seq__item{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    align-items:stretch;align-content:center;
  }
  .seq.is-sequenced .seq__text{align-self:end}
}

.seq__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px clamp(20px,4vw,56px);margin-top:clamp(30px,4vw,54px);
}
.seq.is-sequenced .seq__foot{margin-top:clamp(18px,2.6vw,34px)}
.seq__rail{display:none}
.seq.is-enhanced .seq__rail{
  position:relative;display:flex;flex:1 1 320px;
  gap:clamp(16px,3.4vw,52px);
  border-top:var(--rule) solid color-mix(in srgb, currentColor 22%, transparent);
}
.seq__indicator{
  position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--accent);
}
.seq-tab{
  appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;
  font-family:inherit;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:.7em;white-space:nowrap;
  padding:1.15em 0 0;cursor:pointer;opacity:.45;
  transition:opacity var(--t-mid) var(--ease);
}
.seq-tab:hover{opacity:.8}
.seq-tab.is-active{opacity:1}
.seq-tab__num{font-variant-numeric:tabular-nums;display:none}
.seq__cta{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.4em;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb, currentColor 38%, transparent);
  transition:color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.seq__cta:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:759px){
  .seq-tab__num{display:inline}
  .seq-tab__label{display:none}
  .seq.is-enhanced .seq__rail{justify-content:space-between;gap:8px}
  .seq-tab{font-size:.74rem;letter-spacing:.14em}
}
/* A landscape phone is wide and short: stacking would squash the picture to a
   thumbnail, so the stage turns side-by-side instead — the desktop shape at a
   smaller size. */
@media (max-width:899px) and (max-height:620px) and (min-width:620px){
  .seq.is-sequenced .seq__item{
    grid-template-columns:1fr 1fr;
    grid-template-rows:minmax(0,1fr);
    gap:clamp(20px,4vw,40px);
    align-items:center;
  }
  .seq.is-sequenced .seq__media{order:0}
  .seq.is-sequenced .seq__text{align-self:center}
}

/* ---------- signature sequence (cream top) ---------- */
.plate__text > :not(.plate__num){position:relative;z-index:1}
.plate__index{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.58;margin-bottom:1.25em;
}
.plate__index span{color:var(--accent);opacity:1}
.plate__name{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,4.7vw,3.9rem);line-height:1.02;letter-spacing:-.022em;
  margin-bottom:.45em;text-wrap:balance;
}
.plate__desc{
  font-size:clamp(.95rem,.4vw + .88rem,1.06rem);line-height:1.62;
  opacity:.72;max-width:36ch;min-height:4.9em;
}
.plate__price{
  margin-top:1.3em;padding-top:1.1em;
  border-top:var(--rule) solid color-mix(in srgb, currentColor 20%, transparent);
  font-family:var(--font-display);font-size:1.45rem;
  color:var(--accent);font-variant-numeric:tabular-nums;
}

/* The drinks are cut out and flattened onto this section's own ground, so
   they read as objects standing on the page rather than framed photographs. */
.plate__media{aspect-ratio:5/6}
.plate__media img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
}

/* Ghost numeral: set behind the name, in the accent, barely there. */
.plate__num{
  position:absolute;left:-.04em;top:-.56em;z-index:0;
  pointer-events:none;user-select:none;
  font-family:var(--font-display);font-size:clamp(6.5rem,12vw,10.5rem);
  line-height:.72;color:var(--accent);opacity:.13;
}

@media (max-width:899px){
  .plate__num{top:-.44em;font-size:clamp(5rem,17vw,8rem);opacity:.11}
  /* The rail below already counts the drinks off on a phone, so the index
     line is redundant here — and dropping it clears the ghost numeral. */
  .seq.is-sequenced .plate__index{display:none}
}
@media (max-width:620px){
  .plate{gap:14px}
  .plate__media{aspect-ratio:1/1}
  .plate__index{margin-bottom:.8em}
  .plate__desc{min-height:4.2em}
  .plate__price{margin-top:.85em;padding-top:.85em}
}
@media (min-width:900px){
  .plate__media{aspect-ratio:auto;height:clamp(430px,62vh,640px)}
}
@media (max-width:899px) and (max-height:620px) and (min-width:620px){
  .seq.is-sequenced .plate__index{display:block}
  .seq.is-sequenced .plate__desc{min-height:0}
  .seq.is-sequenced .plate__num{display:none}
}
/* Narrow and short at once leaves room for the drink and its name only. */
@media (max-width:619px) and (max-height:620px){
  .seq.is-sequenced .plate__desc{display:none}
  .seq.is-sequenced .plate__num{display:none}
}

/* ---------- espresso ----------
   Two beans, one at a time, on the same sticky track as the cream tops. The
   entrance is different: these are framed photographs shot with one hard
   light, so the picture arrives dark and out of focus and is brought up as a
   band of light travels across the frame. */
.seq--beans.is-sequenced{--seq-steps:2.3}
@media (max-width:899px){.seq--beans.is-sequenced{--seq-steps:2.2}}

.bean__label{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;opacity:.5}
.bean__name{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1;letter-spacing:-.022em;
  margin:.28em 0 .78em;
}
.bean__spec{display:grid;gap:.85em}
.bean__spec > div{display:grid;grid-template-columns:5.2em 1fr;gap:1em;align-items:baseline}
.bean__spec dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.bean__spec dd{margin:0;font-size:.92rem;opacity:.86;line-height:1.5}
.bean__triad{
  margin-top:1.5em;padding-top:1.1em;
  border-top:var(--rule) solid color-mix(in srgb, currentColor 20%, transparent);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}

.beanpanel__media{
  overflow:hidden;aspect-ratio:4/5;
  background:rgba(255,255,255,.04);
}
.beanpanel__media img{width:100%;height:100%;object-fit:cover}

/* The travelling highlight. Decorative, and at rest it is invisible, so the
   frame is simply a photograph when nothing is animating it. */
.seq__sweep{
  position:absolute;top:-30%;bottom:-30%;left:0;width:46%;z-index:2;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--accent) 30%, #FFF3E0) ,
    transparent);
  filter:blur(9px);
}

@media (max-width:620px){
  .bean__spec > div{grid-template-columns:4.4em 1fr;gap:.8em}
  .bean__spec dd{font-size:.86rem}
  .bean__triad{margin-top:1.05em;padding-top:.85em}
  .beanpanel__media{aspect-ratio:1/1}
}
/* Short landscape. The nav alone eats a quarter of a 390px-tall screen, so
   the panel has to give up something — but origin, roast and process are the
   whole point of the page, so the type compresses instead of the list losing
   rows. */
@media (max-width:899px) and (max-height:620px){
  .seq--beans.is-sequenced .bean__name{
    font-size:clamp(1.6rem,3.4vw,2.1rem);margin:.12em 0 .42em;
  }
  .seq--beans.is-sequenced .bean__label{font-size:.58rem}
  .seq--beans.is-sequenced .bean__spec{gap:.4em}
  .seq--beans.is-sequenced .bean__spec dd{font-size:.8rem;line-height:1.38}
  .seq--beans.is-sequenced .bean__spec dt{font-size:.55rem}
  .seq--beans.is-sequenced .bean__triad{
    margin-top:.7em;padding-top:.6em;font-size:.62rem;letter-spacing:.16em;
  }
}

/* The price list, with the extraction still beside it. */
.espresso__coffee{
  max-width:var(--maxw);margin:clamp(56px,8vw,110px) auto 0;
  display:grid;gap:clamp(24px,3.4vw,56px);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
.espresso__still{overflow:hidden;aspect-ratio:4/5;background:rgba(255,255,255,.04)}
.espresso__still img{width:100%;height:100%;object-fit:cover}
.espresso__coffee .menu--bare .menu__list{gap:clamp(14px,1.6vw,20px)}
@media (min-width:900px){
  .espresso__coffee{grid-template-columns:.66fr 1fr}
}
@media (max-width:899px){
  .espresso__still{aspect-ratio:16/10}
}

/* ---------- hojicha ----------
   The same sticky track as the cream tops and the beans: scroll walks the
   two pours, and a press on the rail flies straight to one. The heading sits
   inside the stage beside the frame, because the chapter is one idea shown
   two ways rather than two separate subjects. */
.seq--hojicha.is-sequenced{--seq-steps:2.3}
@media (max-width:899px){.seq--hojicha.is-sequenced{--seq-steps:2.2}}

.hojicha{
  display:grid;gap:clamp(26px,4vw,72px);
  grid-template-columns:minmax(0,1fr);
  align-items:center;min-height:0;
}
@media (min-width:900px){.hojicha{grid-template-columns:.86fr 1.14fr}}
.hojicha__text .chapter__lede{margin-top:clamp(14px,1.8vw,22px)}

/* One window, re-filled. Both photographs share it, so the chapter holds a
   single shape while its contents change. */
.hojicha__menu{margin-top:clamp(40px,5vw,72px)}
.hojpanel__media{
  overflow:hidden;position:relative;
  aspect-ratio:4/3;
  background:rgba(255,255,255,.04);
  box-shadow:0 30px 74px -38px rgba(0,0,0,.8);
}
.hojpanel__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hojpanel__media figcaption{
  position:absolute;z-index:2;
  left:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);
  bottom:clamp(11px,1.6vw,20px);
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85;
}
.hojpanel__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to top, rgba(14,10,6,.66), transparent);
}
/* The frame is sized against the viewport, not against its parent: inside a
   centred grid the column has no definite height to resolve a percentage
   against, and the window would collapse to its intrinsic size. */
.seq--hojicha.is-sequenced .seq__panels{align-items:center}
/* This panel holds a picture and nothing else, so it drops the shared
   text-and-media column split it would otherwise inherit. */
.seq--hojicha .hojpanel{
  grid-template-columns:minmax(0,1fr);
  align-content:center;justify-items:center;
}
.seq--hojicha.is-sequenced .hojpanel__media{width:100%;margin-inline:auto}
@media (min-width:900px){
  .seq--hojicha.is-sequenced .hojpanel__media{
    height:clamp(320px, 58svh, 620px);
    width:auto;aspect-ratio:4/3;max-width:100%;
  }
}
@media (max-width:899px){
  .seq--hojicha.is-sequenced .hojicha{align-content:center}
  .hojpanel__media{margin-inline:calc(var(--gutter) * -1);aspect-ratio:5/4}
}
/* Short landscape: the lede is the first thing to give up its room. */
@media (max-width:899px) and (max-height:620px){
  .seq--hojicha.is-sequenced .chapter__lede{display:none}
}

/* ---------- kitchen ----------
   The dishes were shot as cutouts and flattened onto this chapter's own
   ground, so they sit on the page as plates on a dark table rather than as
   cropped photographs in boxes. Nothing is framed and nothing is cropped:
   every plate is whole, at its own proportions. */
.kitchen{
  max-width:var(--maxw);margin:0 auto;
  display:grid;gap:clamp(56px,7vw,112px);
}
.course{display:grid;gap:clamp(26px,3vw,40px)}
.course .menu__cat{margin-bottom:0;padding-bottom:1em}

/* Each photographed course is a sticky track, walked one plate at a time —
   the same machinery as the cream tops, so the page keeps one way of showing
   off a thing it made. The course label rides along at the top of the stage,
   because on a menu you need to know which list you are standing in. */
.seq--kitchen.is-sequenced{--seq-steps:2.7}
@media (max-width:899px){.seq--kitchen.is-sequenced{--seq-steps:2.5}}

.seq--kitchen.is-sequenced .seq__stage{
  grid-template-rows:auto minmax(0,1fr) auto;
}
.seq__label{margin-bottom:clamp(14px,2vw,26px)}
.seq.is-sequenced .seq__label{margin-bottom:clamp(10px,1.6vw,20px)}

/* A plate is wider than a glass, so the picture takes the larger share. */
@media (min-width:900px){
  .seq--kitchen.is-sequenced .seq__item{grid-template-columns:.84fr 1.16fr}
}

/* The items with no photograph keep the plain name-and-price row. */
.course__rest{
  padding-top:clamp(22px,2.6vw,34px);
  border-top:var(--rule) solid color-mix(in srgb, currentColor 14%, transparent);
}
@media (min-width:760px){
  .course__rest{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px) clamp(36px,6vw,96px)}
}
.course__rest--rows{padding-top:0;border-top:0}

/* A plate is shot from above and reads landscape, where a drink stands up.
   `contain` keeps every plate whole; the letterboxing is the section's own
   colour, so the box around it is invisible. */
.plate--dish .plate__media{aspect-ratio:3/2}
.plate--dish .plate__media img{object-position:center center}
@media (max-width:620px){
  .plate--dish .plate__media{aspect-ratio:4/3}
}
@media (min-width:900px){
  .plate--dish .plate__media{aspect-ratio:auto}
}

/* ---------- the room ---------- */
.wide{
  max-width:1080px;margin:0 auto;overflow:hidden;
}
.wide__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.wide__poster,.wide__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.wide__video{opacity:0;transition:opacity 900ms var(--ease)}
.wide__video.is-playing{opacity:1}
.wide figcaption{
  margin-top:1em;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.52;
}
.amenities{
  max-width:var(--maxw);margin:clamp(52px,7vw,96px) auto 0;
  display:grid;gap:clamp(22px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.amenity{border-top:var(--rule) solid color-mix(in srgb, currentColor 24%, transparent);padding-top:1.1em}
.amenity h3{
  font-family:var(--font-display);font-weight:400;
  font-size:1.2rem;letter-spacing:-.01em;margin-bottom:.35em;
}
.amenity p{font-size:.9rem;opacity:.68;line-height:1.5}
.room__panel{
  max-width:600px;margin:clamp(52px,7vw,100px) auto 0;
  display:flex;flex-direction:column;align-items:center;
}
.room__panel .frame{
  width:100%;aspect-ratio:3/4;position:relative;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.5);
}
.room__panel .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid color-mix(in srgb, var(--fg) 22%, transparent);
}
.room__panel__tag{
  align-self:flex-start;margin-bottom:.9em;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;
}
.room__panel figcaption{
  align-self:flex-start;margin-top:1.1em;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;
}
@media (max-width:519px){
  .room__panel{max-width:none;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
  .room__panel .frame{aspect-ratio:4/5}
  .room__panel__tag,.room__panel figcaption{padding-left:var(--gutter)}
}

/* ---------- visit ---------- */
.chapter--visit{padding-bottom:clamp(80px,11vw,150px)}
.visit{
  max-width:var(--maxw);margin:0 auto;
  display:grid;gap:clamp(40px,5vw,84px);
  grid-template-columns:minmax(0,1fr);align-items:center;
}
@media (min-width:900px){.visit{grid-template-columns:1fr 1fr}}
.visit__title{
  font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1;margin-bottom:.55em;
}
.visit__title .motion-line-mask{display:block}
.visit__address{font-style:normal;font-size:1.06rem;line-height:1.7;opacity:.86}
.hours{
  width:100%;max-width:26rem;margin:clamp(22px,3vw,34px) 0;
  border-collapse:collapse;text-align:left;
}
.hours th,.hours td{
  padding:.85em 0;font-weight:400;font-size:.95rem;
  border-top:var(--rule) solid color-mix(in srgb, currentColor 22%, transparent);
}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.visit__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.6em}
.visit__note{font-size:.9rem;opacity:.66}
.visit__note a{text-decoration:none;border-bottom:1px solid color-mix(in srgb, currentColor 45%, transparent)}
.visit__note a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* The sign is the brand mark: the frame keeps the photograph's own shape so
   the wordmark is never cropped, and the curtain that opens it is the last
   piece of motion on the page. */
.visit__media{overflow:hidden;position:relative}
.visit__media img{width:100%;height:auto;aspect-ratio:820/718;object-fit:cover}
@media (max-width:899px){
  .visit__media{margin-inline:calc(var(--gutter) * -1)}
  .visit__media figcaption{padding-inline:var(--gutter)}
}
.visit__media figcaption{
  margin-top:1em;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{padding:clamp(60px,8vw,110px) var(--gutter) clamp(30px,4vw,48px)}
.footer__top{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;padding-bottom:clamp(30px,4vw,54px);
}
.footer__top .wordmark{margin-right:0;line-height:.8}
.footer__line{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
.footer__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  padding-top:clamp(28px,3.5vw,48px);
  border-top:var(--rule) solid color-mix(in srgb, currentColor 18%, transparent);
}
.footer__grid h3{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:1em;font-weight:500;
}
.footer__grid p{font-size:.92rem;line-height:1.75;opacity:.82}
.footer__grid a{text-decoration:none;opacity:.9}
.footer__grid a:hover{color:var(--accent)}
.footer__legal{
  max-width:var(--maxw);margin:clamp(40px,5vw,66px) auto 0;
  font-size:.74rem;line-height:1.7;opacity:.42;max-inline-size:78ch;
}
.footer__legal a{color:inherit}

/* =========================================================================
   MOTION
   ========================================================================= */
html.has-motion [data-motion-text],
html.has-motion [data-reveal],
html.has-motion [data-reveal-group],
html.has-motion [data-image-reveal],
html.has-motion [data-soft-reveal]{visibility:hidden}

.motion-line-mask,.motion-word-mask{display:inline-block;overflow:hidden;vertical-align:top}
.motion-line,.motion-word{display:inline-block;will-change:transform,opacity}
[data-image-reveal]{overflow:hidden}
/* A soft-revealed item animates transform and opacity only, and stops when it
   settles: retire() strips the inline state once the tween is done. */
[data-soft-item] img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.has-motion [data-motion-text],
  html.has-motion [data-reveal],
  html.has-motion [data-reveal-group],
  html.has-motion [data-image-reveal],
  html.has-motion [data-soft-reveal]{visibility:visible !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__poster,.hero__video{transform:scale(1)}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:899px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav{background:color-mix(in srgb, var(--page-bg) 72%, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .hero__facts{grid-template-columns:1fr 1fr;gap:18px 16px}
}
@media (max-width:520px){
  .hero{padding-top:clamp(104px,16vh,150px)}
  .hero__title{font-size:clamp(3.1rem,17vw,5rem)}
  .btn{width:100%}
  .hero__actions,.visit__actions{flex-direction:column;align-items:stretch}
  .menu__row{flex-wrap:wrap}
  .menu__dots{display:none}
  .menu__price{margin-left:auto}
}