/* Kinlo Coffee Roasters · motion demo
   Layout rule: the default CSS is the complete static page (no JS, or reduced
   motion). `html.motion` switches sections into their scroll-driven layouts. */

:root {
  --paper: #f4ece0;
  --paper-2: #eadcc8;
  --ink: #1c130e;
  --ink-2: #2a1d15;
  --muted: #6d5d50;      /* 5.38:1 on paper, 4.67:1 on paper-2 */
  --muted-deep: #5c4c40; /* for warmer backgrounds (gold, crema) */
  --roast: #b5562a;      /* large text and marks only */
  --roast-text: #93421d; /* small accent text on paper: 5.90:1 */
  --green: #7f8a5a;
  --night: #120c09;
  --crema: #e9d8c0;      /* light text on dark: 13.9:1 on night */
  --crema-2: #b9a891;    /* secondary light text: 8.38:1 on night */
  --olive: #343a2a;
  --line: rgba(28, 19, 14, 0.16);
  --line-light: rgba(233, 216, 192, 0.22);

  --header-h: 56px;
  --gutter: 16px;
  --col-gap: 16px;
  --radius: 4px;
  --focus: var(--roast);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);

  /* one "screen" of scroll: scenes fill the large viewport, their content stays inside the small one,
     so the iOS address bar showing or hiding never changes layout */
  --screen: 100vh;
  --screen-s: 100vh;
  --stage: #090604; /* behind a scene while it steps back */
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; --screen-s: 100svh; }
}
@media (min-width: 768px) {
  :root { --header-h: 64px; --gutter: 32px; --col-gap: 24px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: 1.0625rem; } }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
::selection { background: var(--roast); color: var(--paper); }
button { font: inherit; color: inherit; }
address { font-style: normal; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
section[tabindex="-1"]:focus, footer[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; }

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

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }

.fx-tag {
  display: inline-flex; align-items: baseline; gap: 0.5em; text-wrap: pretty;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5;
  letter-spacing: 0.02em; color: var(--muted);
  max-width: 76ch;
}
.fx-tag::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px;
  background: var(--roast); transform: translateY(-1px);
}
@media (max-width: 767px) {
  .fx-names { display: none; } /* phones: just the numbers; the Effects panel names them */
}

.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--roast-text);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(2.125rem, 1.4rem + 3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  text-wrap: balance;
}
h3 { font-family: var(--font-display); font-weight: 420; font-variation-settings: "SOFT" 40; line-height: 1.15; }

/* Lenis smooth scrolling (only ever started for a fine pointer, without reduced motion) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Header ───────────────────────────────────────────── */
.site-header {
  --hdr-bg: var(--paper); --hdr-fg: var(--ink); --hdr-line: var(--line);
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: var(--hdr-bg); color: var(--hdr-fg);
  border-bottom: 1px solid var(--hdr-line);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
/* over the roast the header tones are set every frame from the canvas, so no lagging transition */
.site-header.is-live, .site-header.is-live .btn { transition: none; }
.capture .site-header, .capture .btn { transition: none; }
.site-header[data-theme="dark"] {
  --hdr-bg: var(--night); --hdr-fg: var(--crema); --hdr-line: var(--line-light);
  --btn-bg: var(--crema); --btn-fg: var(--ink);
  --focus: var(--crema);
}
.header-row { height: 100%; display: flex; align-items: center; gap: 12px; }
.wordmark {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1;
  font-variation-settings: "SOFT" 100, "opsz" 72; letter-spacing: -0.01em;
  text-decoration: none; margin-right: auto; padding: 6px 0;
}
.site-nav { order: 2; }
.magnet { order: 1; display: inline-flex; }
.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.nav-toggle path { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.28s var(--ease-out); }
.nav-toggle[aria-expanded="true"] .l1 { transform: rotate(45deg) translateY(4px); }
.nav-toggle[aria-expanded="true"] .l2 { transform: rotate(-45deg) translateY(-4px); }
/* phone menu: a sheet that unrolls from the header (enter 280 ms, exit 160 ms, interruptible) */
.nav-list {
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line);
  padding: 8px var(--gutter) 16px;
  visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-6px);
  transition: opacity 0.14s var(--ease-in), clip-path 0.16s var(--ease-in), transform 0.16s var(--ease-in), visibility 0s linear 0.16s;
}
.nav-list.is-open {
  visibility: visible; opacity: 1; clip-path: inset(0 0 -2px 0); transform: none;
  transition: opacity 0.22s var(--ease-out), clip-path 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav-list, .nav-list.is-open { clip-path: none; transform: none; }
}
.nav-list a {
  display: block; padding: 12px 0; font-size: 1.125rem; text-decoration: none;
  border-top: 1px solid var(--hdr-line);
}
.nav-list li:first-child a { border-top: 0; }
.no-js .nav-toggle { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), scale 0.15s var(--ease-out);
}
.btn-label { display: inline-block; }
.site-header .btn:focus-visible { outline-color: var(--roast); }

@media (min-width: 768px) {
  .site-nav { order: 0; margin-right: 24px; }
  .magnet { order: 0; }
  .nav-toggle { display: none; }
  .nav-list, .nav-list.is-open {
    display: flex; gap: 4px; position: static; padding: 0; border: 0; background: none;
    visibility: visible; opacity: 1; clip-path: none; transform: none; transition: none;
  }
  .nav-list a {
    padding: 8px 12px; font-size: 0.9375rem; border: 0;
    text-decoration: underline; text-decoration-color: transparent;
    transition: text-decoration-color 0.2s var(--ease-out), scale 0.15s var(--ease-out);
  }
}
@media (max-width: 767px) {
  .no-js .site-header { height: auto; }
  .no-js .header-row { flex-wrap: wrap; padding-block: 8px; }
  .no-js .site-nav { order: 3; width: 100%; }
  .no-js .nav-list { display: flex; position: static; gap: 16px; padding: 0; border: 0; overflow-x: auto; visibility: visible; opacity: 1; clip-path: none; transform: none; }
  .no-js .nav-list a { border: 0; padding: 8px 0; font-size: 0.9375rem; }
  .no-js .roast-sticky { padding-top: 136px; }
  html.no-js { scroll-padding-top: 112px; }
}

/* ── 1. Roast ─────────────────────────────────────────── */
.roast { position: relative; }
.roast-sticky { position: relative; padding: calc(var(--header-h) + 40px) 0 72px; }
.roast-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.roast-copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
.roast-copy .fx-tag { margin-bottom: 8px; }
.roast-title {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2.75rem, 1.2rem + 6vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  max-width: 11ch;
  text-wrap: balance;
}
.roast-title em { font-style: italic; color: var(--roast); font-variation-settings: "SOFT" 100, "opsz" 144; }
.roast-lede { max-width: 40ch; color: var(--muted); font-size: 1.0625rem; }
.roast-visual { grid-column: 1 / -1; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--night); }
.roast-canvas { width: 100%; height: 100%; }
.no-js .roast-visual { display: none; }
.readouts, .rail, .roast-scrim, .veil { display: none; }

.stages { margin-top: 16px; border-top: 1px solid var(--line); }
.stage { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.stage-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--roast-text); letter-spacing: 0.02em; }
.stage-name { font-size: 1.5rem; }
.stage-text { max-width: 52ch; color: var(--ink-2); }

@media (min-width: 768px) {
  .roast-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .roast-copy { grid-column: 1 / span 7; grid-row: 1; }
  .roast-visual { grid-column: 8 / -1; grid-row: 1; align-self: start; aspect-ratio: 3 / 4; position: sticky; top: calc(var(--header-h) + 24px); }
  .no-js .roast-copy { grid-column: 1 / span 8; }
}

/* motion layout: 3.2 screens of roast, then one screen where Origins slides up over the held scene */
.motion .roast { height: calc(var(--screen) * 5.2); background: var(--stage); }
.motion .roast-sticky {
  position: sticky; top: 0; height: var(--screen); overflow: hidden;
  padding: 0; background: var(--paper); transform-origin: 50% 50%;
}
.motion .roast-grid { display: block; position: static; height: var(--screen-s); padding-top: calc(var(--header-h) + 20px); padding-bottom: 72px; pointer-events: none; }
.motion .roast-visual { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; background: none; align-self: stretch; justify-self: stretch; }
.motion .roast-copy {
  position: relative; z-index: 2;
  height: 100%; display: flex; flex-direction: column; gap: 12px;
  /* tones are written by main.js from the canvas luminance (fallbacks = light backdrop) */
  color: var(--c-fg, var(--ink));
}
.motion .roast-copy > * { pointer-events: auto; }
.motion .roast-copy .fx-tag { margin-bottom: 0; }
.motion .roast-copy .eyebrow { display: none; }
.motion .roast-title { font-size: clamp(2.5rem, 1.2rem + 5.4vw, 6rem); }
/* hide the headline until it is split, with a CSS fail-safe if JS stalls */
.motion .roast-title:not(.is-ready) { visibility: hidden; animation: kinlo-show 0s linear 3s forwards; }
@keyframes kinlo-show { to { visibility: visible; } }
@media (min-height: 500px) {
  .motion .roast-title { font-size: min(clamp(2.5rem, 1.2rem + 5.4vw, 6rem), 10.5vh); }
}
.motion .roast-story { display: grid; margin-top: 8px; }
.motion .roast-story > *, .motion .stages > .stage { grid-area: 1 / 1; }
.motion .stages { display: grid; margin: 0; border: 0; }
.motion .stage { border: 0; padding: 0; align-content: start; }
.motion .stage-range { display: none; }
.motion .stage-meta { color: var(--c-meta, var(--roast-text)); }
.motion .stage-name { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.motion .stage-text { color: inherit; max-width: 40ch; }
.motion .roast-lede, .motion .roast .fx-tag { color: var(--c-sub, var(--muted-deep)); }
.motion .roast-title em { color: var(--c-accent, var(--roast)); }
.motion .readout dt, .motion .rail-num { color: var(--c-hud, var(--muted-deep)); }
.motion .roast-bottom { margin-top: auto; display: grid; gap: 14px; }

.motion .readouts { display: flex; gap: 28px; }
.readout dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.readout dd { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }

.motion .rail { display: block; }
.rail-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 460px; }
.rail-btn {
  display: grid; gap: 6px; width: 100%; min-height: 44px; padding: 10px 0 4px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
  transition: scale 0.15s var(--ease-out);
}
.rail-bar { display: block; height: 2px; background: currentColor; opacity: 0.25; position: relative; overflow: hidden; border-radius: 1px; transition: opacity 0.15s var(--ease-out); }
.rail-btn[aria-current="step"] .rail-bar, .rail-btn.is-done .rail-bar { opacity: 1; background: color-mix(in srgb, currentColor 25%, transparent); }
.rail-fill { position: absolute; inset: 0; background: var(--roast); transform-origin: 0 50%; transform: scaleX(0); }
.rail-num { font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.78; transition: opacity 0.15s var(--ease-out); }
.rail-btn[aria-current="step"] .rail-num { opacity: 1; font-weight: 500; }

/* Scrims keep copy readable where the canvas sits behind it. One paper layer and one espresso layer;
   main.js sets their strength from the canvas luminance (stronger near the light/dark crossover)
   and swaps them with the text when the backdrop crosses it. */
.motion .roast-scrim { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.roast-scrim::before, .roast-scrim::after { content: ""; position: absolute; inset: 0; }
.roast-scrim::before {
  opacity: var(--scrim-l, 0.8);
  background:
    linear-gradient(180deg, rgba(244, 236, 224, 0.75) 0%, rgba(244, 236, 224, 0.6) 34%, rgba(244, 236, 224, 0.3) 46%, rgba(244, 236, 224, 0) 58%),
    linear-gradient(0deg, rgba(244, 236, 224, 1) 0, rgba(244, 236, 224, 0.9) 150px, rgba(244, 236, 224, 0) 260px);
}
.roast-scrim::after {
  opacity: var(--scrim-d, 0);
  background:
    linear-gradient(180deg, rgba(18, 12, 9, 0.8) 0%, rgba(18, 12, 9, 0.66) 34%, rgba(18, 12, 9, 0.32) 46%, rgba(18, 12, 9, 0) 58%),
    linear-gradient(0deg, rgba(18, 12, 9, 1) 0, rgba(18, 12, 9, 0.9) 150px, rgba(18, 12, 9, 0) 260px);
}
@media (min-width: 768px) {
  .motion .roast-grid { padding-top: calc(var(--header-h) + clamp(20px, 5vh, 56px)); padding-bottom: 76px; }
}
/* landscape: copy in the left column, bean on the right (roast.js "wide" layout) */
@media (min-width: 768px) and (min-aspect-ratio: 11/10) {
  .motion .roast-copy { width: min(46%, 600px); }
  .roast-scrim::before {
    background:
      linear-gradient(90deg, rgba(244, 236, 224, 0.75) 0%, rgba(244, 236, 224, 0.62) 30%, rgba(244, 236, 224, 0.4) 44%, rgba(244, 236, 224, 0) 58%),
      radial-gradient(ellipse 58% 30% at 0% 100%, rgba(244, 236, 224, 0.85) 0%, rgba(244, 236, 224, 0.6) 50%, rgba(244, 236, 224, 0) 100%);
  }
  .roast-scrim::after {
    background:
      linear-gradient(90deg, rgba(18, 12, 9, 0.78) 0%, rgba(18, 12, 9, 0.64) 30%, rgba(18, 12, 9, 0.42) 44%, rgba(18, 12, 9, 0) 58%),
      radial-gradient(ellipse 58% 30% at 0% 100%, rgba(18, 12, 9, 0.85) 0%, rgba(18, 12, 9, 0.6) 50%, rgba(18, 12, 9, 0) 100%);
  }
}

/* ── Layered hand-off (motion only) ─────────────────────
   The next section slides up over the current one, which is held in place, steps back
   (main.js scales it to 0.94) and dims under a veil. The stage colour shows round its edges. */
.motion .veil {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: var(--screen);
  z-index: 3; background: var(--stage); opacity: 0; pointer-events: none;
}
@media (max-width: 767px) {
  .motion .readouts { gap: 20px; }
  .readout dd { font-size: 1.125rem; }
  .motion .stage-text { font-size: 0.9375rem; }
  .motion .roast-lede { font-size: 0.9375rem; }
}

/* ── 2. Origins ───────────────────────────────────────── */
.origins { position: relative; background: #ead9bf; overflow: hidden; }
.origins-bg { display: none; }
.origins-frame { position: relative; padding: 96px 0; }
.origins-index { display: none; }
.origins-track {
  display: grid; gap: var(--col-gap);
  padding-inline: var(--gutter); max-width: 1360px; margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}
.origins-intro { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; color: var(--ink-2); }
.origins-intro h2 { color: var(--ink); max-width: 12ch; }
.origins-lede { max-width: 42ch; }
.origins-hint { display: none; }

.origin-card {
  --focus: var(--roast-text);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 24px;
}
.contour { width: 100%; height: clamp(110px, 22vh, 210px); margin-bottom: 4px; overflow: visible; }
.contour .c { fill: none; stroke: var(--ink); stroke-width: 0.9; opacity: 0.55; }
.contour .c-peak { stroke: var(--roast); stroke-width: 1.5; opacity: 1; }
.origin-num { font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--muted); }
.origin-name { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.05; }
.origin-name span { display: block; font-style: italic; font-weight: 340; color: var(--roast-text); font-size: 0.62em; margin-top: 4px; }
.origin-desc { color: var(--ink-2); max-width: 40ch; }
.origin-facts { display: grid; border-top: 1px solid var(--line); }
.origin-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.origin-facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.origin-facts dd { font-size: 0.9375rem; }
.notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.notes li {
  font-size: 0.8125rem; padding: 4px 10px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
}

@media (min-width: 768px) {
  .origins-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .origins-intro { grid-column: 1 / -1; }
}

/* motion layout: pinned, horizontal; it arrives as a sheet over the held roast */
.motion .origins {
  height: var(--screen); margin-top: calc(var(--screen) * -1);
  background: var(--stage); border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 48px -18px rgba(18, 12, 9, 0.55);
}
.motion .origins-scene { position: relative; height: 100%; transform-origin: 50% 50%; }
.motion .origins-bg { display: block; position: absolute; inset: 0; }
.motion .obg { position: absolute; inset: 0; background: var(--tone); opacity: 0; }
.motion .obg:first-child { opacity: 1; }
.motion .origins-frame {
  height: var(--screen-s); padding: calc(var(--header-h) + 48px) 0 28px;
  display: flex; align-items: stretch;
}
.motion .origins-index {
  display: block; position: absolute; z-index: 2; right: var(--gutter); top: calc(var(--header-h) + 16px);
  font-size: 0.75rem; color: var(--ink-2); letter-spacing: 0.04em;
}
.motion .origins-track {
  display: flex; gap: 20px; width: max-content; max-width: none; margin: 0;
  padding-inline: var(--gutter) calc(var(--gutter) + 8px);
  will-change: transform;
}
.motion .origins-intro {
  flex: 0 0 min(84vw, 460px); justify-content: center; padding: 0 16px 0 0;
}
.motion .origins-hint { display: inline-flex; gap: 8px; font-size: 0.75rem; color: var(--ink-2); margin-top: 8px; }
.motion .origin-card { flex: 0 0 min(84vw, 440px); overflow: hidden; }
@media (min-width: 768px) {
  .motion .origins-intro { flex-basis: min(36vw, 480px); }
  .motion .origin-card { flex-basis: clamp(340px, 32vw, 440px); padding: 28px; }
}
@media (max-width: 767px) {
  .motion .origins-intro { flex-basis: 82vw; }
  .motion .origins-track { align-items: center; }
  .motion .origin-card { flex-basis: 82vw; padding: 20px; gap: 10px; }
  .motion .notes { margin-top: 4px; }
  .motion .contour { height: clamp(80px, 15vh, 150px); }
  .motion .origin-desc { font-size: 0.9375rem; }
}
@media (max-height: 700px) {
  .motion .contour { height: clamp(70px, 14vh, 140px); }
  .motion .origin-card { gap: 10px; }
  .motion .origin-facts div { padding: 6px 0; }
}

/* ── 3. Brew ──────────────────────────────────────────── */
.brew { position: relative; }
.brew-inner {
  --focus: var(--crema);
  background: var(--night); color: var(--crema);
  padding: 112px 0 128px;
}
.brew .fx-tag { color: var(--crema-2); }
.brew-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.brew-lede { color: var(--crema-2); max-width: 46ch; }

.brew-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap);
  margin: 56px 0 64px; border-top: 1px solid var(--line-light);
}
.stat { padding: 20px 0; border-bottom: 1px solid var(--line-light); display: flex; flex-direction: column-reverse; gap: 4px; }
.stat dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crema-2); }
.stat dd { display: flex; align-items: baseline; gap: 6px; }
.stat-n {
  font-family: var(--font-display); font-weight: 340; font-size: clamp(2.75rem, 1.6rem + 4vw, 5rem); line-height: 1;
  font-variation-settings: "SOFT" 100, "opsz" 144; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em;
}
.stat-u { font-family: var(--font-mono); font-size: 0.875rem; color: var(--crema-2); }
@media (min-width: 768px) {
  .brew-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.brew-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.brew-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pour { width: min(100%, 360px); height: auto; color: var(--crema); overflow: visible; }
.pour .slurry { fill: #3b2416; }
html:not(.motion) .pour .slurry { display: none; }
.pour .bed { fill: #6b4529; }
.pour .liquid { fill: #4a2c1a; }
.pour .surface { fill: #8a5a36; }
.pour .stream { stroke: #c9a27a; stroke-dasharray: 7 6; opacity: 0; }
.pour .drip { fill: #c9a27a; opacity: 0; }
.pour .rib { opacity: 0.35; }
.pour-readout {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font-size: 0.8125rem; color: var(--crema-2);
}
.pour-readout b { color: var(--crema); font-weight: 500; font-variant-numeric: tabular-nums; }

.brew-steps { display: grid; gap: 40px; }
.brew-step { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line-light); }
.step-meta { font-size: 0.75rem; color: var(--crema-2); letter-spacing: 0.02em; }
.brew-step h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.brew-step .reveal { color: var(--crema); max-width: 42ch; font-size: 1.0625rem; }

@media (min-width: 768px) {
  .brew-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .brew-figure { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
  .brew-steps { grid-column: 8 / -1; }
}

/* clip-path is set inline by main.js during the reveal only: the circle opens over the receding
   Origins (brew overlaps the last screen of the Origins pin), then Brew is held while Menu slides over */
.motion .brew { margin-top: calc(var(--screen) * -1); background: var(--stage); }
.motion .brew-inner { transform-origin: 50% calc(100% - var(--screen) / 2); }
.motion .brew-steps { gap: 0; }
.motion .brew-step { min-height: 62vh; align-content: start; }
.motion .brew-step:last-child { min-height: 50vh; }
.motion .brew-figure { justify-content: center; }
@media (min-width: 768px) {
  .motion .brew-figure { height: calc(100svh - var(--header-h) - 120px); }
  .motion .pour { height: calc(100% - 40px); width: auto; max-width: 100%; }
}
@media (max-width: 767px) {
  .motion .brew-figure {
    position: sticky; top: var(--header-h); z-index: 2;
    background: var(--night); padding: 8px 0 10px; margin-inline: calc(var(--gutter) * -1);
    height: 38svh; border-bottom: 1px solid var(--line-light);
  }
  .motion .pour { height: calc(100% - 26px); width: auto; }
  .motion .brew-step { min-height: 52svh; }
  .pour-readout { font-size: 0.75rem; }
}

/* split helpers (text reveal + headline) */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.wi { display: inline-block; }
.roast-title .wi { will-change: transform; }

/* ── 4. Menu ──────────────────────────────────────────── */
.menu { padding: 112px 0 120px; }
.menu-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.menu-head h2 { max-width: 14ch; }
.menu-lede { max-width: 44ch; color: var(--muted); }

.deck { display: grid; gap: 20px; }
.card { position: relative; border-radius: 6px; }
.card-body {
  --c-bg: var(--paper-2); --c-fg: var(--ink); --c-meta: var(--roast-text); --c-art: var(--roast); --c-sub: var(--muted);
  position: relative; display: grid; gap: 20px; align-content: stretch; grid-template-rows: 1fr auto;
  min-height: 100%; padding: 28px 24px; border-radius: 6px;
  background: var(--c-bg); color: var(--c-fg);
  grid-template-columns: minmax(0, 1fr);
}
.card--espresso .card-body { --c-bg: var(--ink-2); --c-fg: var(--crema); --c-meta: var(--crema-2); --c-sub: var(--crema-2); --focus: var(--crema); }
.card--flatwhite .card-body { --c-bg: var(--crema); --c-fg: var(--ink); --c-meta: var(--roast-text); --c-sub: var(--muted-deep); }
.card--filter .card-body { --c-bg: #d8c3a5; --c-fg: var(--ink); --c-meta: var(--ink-2); --c-sub: var(--ink-2); --c-art: var(--roast-text); }
.card--coldbrew .card-body { --c-bg: var(--olive); --c-fg: var(--crema); --c-meta: var(--crema-2); --c-sub: var(--crema-2); --c-art: #b5562a; --focus: var(--crema); }
.card-text { display: flex; flex-direction: column; gap: 12px; }
.card-name { margin-top: 28px; }
.card-num { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--c-meta); }
.card-name { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem); font-weight: 340; line-height: 1; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.card-desc { max-width: 38ch; font-size: 1.0625rem; }
.card-spec { font-size: 0.8125rem; color: var(--c-sub); }
.card-art { width: clamp(120px, 30vw, 300px); height: auto; justify-self: end; align-self: end; color: var(--c-fg); }
.card-art .art-accent { fill: var(--c-art); }
.card-shade { position: absolute; inset: 0; border-radius: inherit; background: var(--night); opacity: 0; pointer-events: none; }
@media (min-width: 768px) {
  .card-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: 1fr; padding: 44px 48px; align-items: stretch; }
  .card-art { align-self: center; }
}

.motion .deck { gap: 0; padding-bottom: 4vh; }
.motion .card {
  position: sticky; top: calc(var(--header-h) + 20px + var(--i, 0) * 18px);
  height: 70vh; height: 70svh; min-height: 380px; max-height: 640px; margin-bottom: 14vh;
  transform-origin: 50% 0; perspective: 1400px;
}
.motion .card:last-child { margin-bottom: 0; }
.motion .menu {
  position: relative; padding: 0; background: var(--stage);
  border-radius: 22px 22px 0 0; overflow: clip;
  box-shadow: 0 -20px 48px -18px rgba(0, 0, 0, 0.7);
}
.motion .menu-scene { background: var(--paper); padding: 112px 0 72px; transform-origin: 50% calc(100% - var(--screen) / 2); }
.motion .card:nth-child(1) { --i: 0; }
.motion .card:nth-child(2) { --i: 1; }
.motion .card:nth-child(3) { --i: 2; }
.motion .card:nth-child(4) { --i: 3; }
.motion .card-body { height: 100%; transform-style: preserve-3d; will-change: transform; }
.motion .card-name { margin-top: auto; padding-top: 24px; }

/* ── 5. Visit ─────────────────────────────────────────── */
.visit { --visit-fg: var(--ink); --visit-sub: var(--muted-deep); position: relative; }
.visit-story { padding: 112px 0 56px; }
.visit-sky { display: none; }
.visit-copy { display: flex; flex-direction: column; gap: 16px; }
.visit-times { display: grid; gap: var(--col-gap); margin-top: 24px; }
.vt { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 6px; background: var(--paper-2); }
html:not(.motion) .vt:nth-child(2) { background: #f0d3a8; }
html:not(.motion) .vt:nth-child(3) { background: var(--night); color: var(--crema); --visit-sub: var(--crema-2); --focus: var(--crema); }
.vt-time { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--visit-sub); }
.vt h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 360; font-variation-settings: "SOFT" 100, "opsz" 144; }
.vt p:last-child { max-width: 40ch; }
@media (min-width: 768px) {
  .visit-times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.visit-info { --focus: var(--crema); background: var(--night); color: var(--crema); padding: 72px 0 96px; }
.info-grid { display: grid; gap: 40px; }
.info-block { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line-light); }
.info-block h3 { font-size: 1.5rem; }
.info-block p, .info-block address { color: var(--crema); max-width: 40ch; }
.info-note { font-size: 0.875rem; color: var(--crema-2) !important; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line-light); max-width: 320px; }
.hours dt { color: var(--crema-2); }
.hours dd { font-family: var(--font-mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
}

/* motion layout: sticky day-to-night (2.2 screens), then one held screen while the info slides over */
.motion .visit-story {
  position: relative; height: calc(var(--screen) * 4.2); padding: 0; background: var(--stage);
  border-radius: 22px 22px 0 0; overflow: clip; /* clip, not hidden: the sticky scene keeps working */
  box-shadow: 0 -20px 48px -18px rgba(18, 12, 9, 0.45);
}
.motion .visit-sticky {
  position: sticky; top: 0; height: var(--screen); overflow: hidden; color: var(--visit-fg);
  border-radius: 22px 22px 0 0; transform-origin: 50% 50%;
}
.motion .visit-info {
  position: relative; margin-top: calc(var(--screen) * -1);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -1px 0 var(--line-light), 0 -24px 48px -16px rgba(0, 0, 0, 0.7);
}
.motion .visit-sky { display: block; position: absolute; inset: 0; }
.motion .sky { position: absolute; inset: 0; }
.motion .sky--day { background: var(--paper); }
.motion .sky--gold { background: #f0d3a8; opacity: 0; }
.motion .sky--night { background: var(--night); opacity: 0; }
.sky-art { position: absolute; color: var(--visit-fg); right: 0; bottom: 0; width: 100%; height: 46%; }
.sky-art .sun, .sky-art .moon { transform-box: view-box; }
.sky-art .moon, .sky-art .stars, .sky-art .lit { opacity: 0; }
.sky-art .roastery { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: 0.7; }
.sky-art .lit { fill: #e9a35c; }
.sky-art .smoke { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: 0.35; }
@media (min-width: 768px) {
  .sky-art { width: 52%; height: 100%; top: 0; }
}
.motion .visit-grid { position: relative; z-index: 1; height: var(--screen-s); padding-top: calc(var(--header-h) + clamp(24px, 6vh, 72px)); }
.motion .visit-copy { max-width: 560px; }
.motion .visit-copy .fx-tag { color: var(--visit-sub); }
.motion .visit-times { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 16px; max-width: 30rem; }
.motion .vt { grid-area: 1 / 1; background: none; padding: 0; color: var(--visit-fg); }
.motion .vt p:last-child { color: var(--visit-fg); }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { --focus: var(--crema); background: var(--night); color: var(--crema); padding: 56px 0 120px; border-top: 1px solid var(--line-light); overflow: hidden; }
.site-footer .fx-tag { color: var(--crema-2); display: flex; }
.marquee { margin: 28px 0 56px; overflow: hidden; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group {
  flex: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 320; font-style: italic;
  font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem); line-height: 1.1; letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.marquee-group i { font-style: normal; color: var(--roast); padding: 0 0.25em; }
.footer-grid { display: grid; gap: 40px; }
.footer-close { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.1; font-weight: 360; max-width: 18ch; font-variation-settings: "SOFT" 80, "opsz" 72; }
.footer-close em { color: var(--crema-2); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-nav a { display: inline-block; padding: 8px 0; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s var(--ease-out), scale 0.15s var(--ease-out); }
.credit { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line-light); font-size: 0.9375rem; color: var(--crema-2); max-width: 44ch; }
.credit-link { color: var(--crema); font-weight: 600; text-decoration: underline; display: inline-block; padding: 6px 0; transition: color 0.2s var(--ease-out), scale 0.15s var(--ease-out); }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .footer-close { grid-column: 1 / span 6; }
  .footer-nav { grid-column: 8 / span 2; }
  .footer-nav ul { flex-direction: column; }
  .credit { grid-column: 10 / -1; }
}

/* ── Effects panel ────────────────────────────────────── */
.fx-panel { position: fixed; left: 16px; bottom: 16px; z-index: 60; }
.fx-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: var(--radius); background: var(--ink); color: var(--crema);
  border: 1px solid rgba(233, 216, 192, 0.32);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), scale 0.15s var(--ease-out);
}
.fx-summary::-webkit-details-marker { display: none; }
.fx-summary:focus-visible { outline: 2px solid var(--roast); outline-offset: 2px; }
.fx-dot { width: 6px; height: 6px; border-radius: 1px; background: var(--roast); }
.fx-panel[open] .fx-summary { background: var(--roast-text); border-color: transparent; color: #fff; }
.fx-body {
  position: absolute; left: 0; bottom: calc(100% + 8px); transform-origin: 0% 100%;
  width: min(400px, calc(100vw - 32px)); max-height: min(72vh, 620px); overflow: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink); --focus: var(--roast-text);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(28, 19, 14, 0.08), 0 12px 32px -8px rgba(28, 19, 14, 0.28);
  padding: 20px 20px 16px;
}
.fx-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 420; line-height: 1.15; }
.fx-intro { font-size: 0.875rem; color: var(--muted); margin: 6px 0 12px; }
.fx-list { display: grid; }
.fx-list a {
  display: grid; grid-template-columns: 2.2em 1fr; column-gap: 8px; row-gap: 2px;
  padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none;
  transition: scale 0.15s var(--ease-out);
}
.fx-name { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s var(--ease-out); }
.fx-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--roast-text); padding-top: 2px; grid-row: span 2; }
.fx-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.fx-desc { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.fx-foot { font-size: 0.8125rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.capture .fx-panel { display: none; }

/* ── Interaction feedback ─────────────────────────────── */
/* hover only where a pointer can hover; press = scale 0.96 over 150 ms (the `scale` property, so it
   composes with the magnetic button's GSAP transform) */
@media (hover: hover) {
  .nav-list a:hover, .footer-nav a:hover { text-decoration-color: currentColor; }
  .fx-list a:hover .fx-name { text-decoration-color: currentColor; }
  .btn:hover { background: color-mix(in srgb, var(--btn-bg) 84%, var(--btn-fg)); }
  .nav-toggle:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
  .rail-btn:hover .rail-num { opacity: 1; }
  .rail-btn:hover .rail-bar { opacity: 0.55; }
  .fx-summary:hover { border-color: rgba(233, 216, 192, 0.6); }
  .fx-panel[open] .fx-summary:hover { background: #7f3818; }
  .credit-link:hover { color: #fff; }
}
.nav-toggle { transition: background-color 0.2s var(--ease-out), scale 0.15s var(--ease-out); }
.wordmark { transition: scale 0.15s var(--ease-out); }
:is(.btn, .nav-toggle, .rail-btn, .fx-summary, .nav-list a, .footer-nav a, .credit-link, .fx-list a, .wordmark):active:not(:disabled):not([aria-disabled="true"]) { scale: 0.96; }

/* ── Film grain ───────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.capture):not(.force-reduced) .grain { animation: grain 1.2s steps(6) infinite; }
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  17% { transform: translate3d(-3%, 2%, 0); }
  33% { transform: translate3d(2%, -3%, 0); }
  50% { transform: translate3d(-2%, -1%, 0); }
  67% { transform: translate3d(3%, 3%, 0); }
  83% { transform: translate3d(-1%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ── Motion helpers (drips and stream only animate in motion mode) ── */
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(var(--drop, 60px)); opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -26; } }
.motion .pour.is-dripping .drip { animation: drip 0.9s cubic-bezier(0.5, 0, 1, 1) infinite; }
.motion .pour.is-dripping .drip--2 { animation-delay: 0.45s; }
.motion:not(.capture) .pour .stream { animation: flow 0.5s linear infinite; }
/* capture mode: drips hold still so a frame-stepping recorder gets clean frames */
.capture .pour.is-dripping .drip { animation: none; opacity: 1; transform: translateY(calc(var(--drop, 60px) * 0.45)); }
.capture .pour.is-dripping .drip--2 { opacity: 0; }