/* ==========================================================================
   Motion layer — October 2026 redesign
   Loads after site.css. Every hidden "before" state is scoped to
   html.has-gsap (set by motion.js), so the site reads fine without JS.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* Skip link: fully hidden until focused (it used to peek out under the demo banner). */
.skip-link { transform: translateY(calc(-100% - var(--demo-h) - 24px)); }
.skip-link:focus { transform: none; }

/* ---------- Page curtain (load + leave) ---------- */
html::before,
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
html::before { background: var(--night); clip-path: inset(100% 0 0 0); }
html::after {
  content: 'Exe Roast House';
  display: grid;
  place-items: center;
  color: var(--brand);
  font: italic 300 clamp(40px, 7vw, 104px)/1 var(--display);
  letter-spacing: -.04em;
  opacity: 0;
}
html.is-loading::before { clip-path: inset(0); }
html.is-loading::after { opacity: 1; transform: translateY(0); }
html.is-loading.is-loaded::before { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-io) .1s; }
html.is-loading.is-loaded::after { opacity: 0; transform: translateY(-40px); transition: opacity .45s, transform .8s var(--ease-io); }
html.is-leaving::before { clip-path: inset(0) !important; transition: clip-path .6s var(--ease-io) !important; }
html.is-loading:not(.is-loaded) [data-intro],
html.is-loading:not(.is-loaded) [data-intro-fade],
html.is-loading:not(.is-loaded) [data-intro] .ch,
html.is-loading:not(.is-loaded) .route-hero-arch::before { animation-play-state: paused !important; }

/* ---------- Logo: railway arch + coffee bean, drawn in on load ---------- */
.brand { gap: 12px; }
.brand-logo { width: 34px; height: 39px; flex: 0 0 auto; overflow: visible; }
.logo-arch, .logo-ground { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.logo-ground { stroke: var(--brand); }
.logo-bean ellipse { fill: var(--accent); transition: fill .35s; }
.logo-crease { fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 100; }
.logo-bean, .logo-bean-hover { transform-box: fill-box; transform-origin: 50% 85%; }
body[data-page='coffee'] .site-header:not(.is-scrolled) .logo-bean ellipse { fill: var(--brand); }
body[data-page='coffee'] .site-header:not(.is-scrolled) .brand-name em { color: #fff3d4; }
.brand-name { display: grid; gap: 6px; text-transform: none; letter-spacing: 0; font: 500 21px/1 var(--display); }
.brand-name .brand-word { display: block; overflow: hidden; margin: 0 -.15em -.1em 0; padding: 0 .15em .1em 0; font: inherit; letter-spacing: -.025em; opacity: 1; }
.brand-name .brand-word-in { display: block; margin: 0; font: inherit; letter-spacing: inherit; opacity: 1; }
.brand-name em { font-style: italic; font-weight: 300; color: var(--brand); }
.brand-name .brand-sub { display: block; margin: 0; font: 500 8.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .62; }
.logo-ground { animation: logo-draw .8s var(--ease-io) .1s both; }
.logo-arch { animation: logo-draw 1.1s var(--ease-io) .25s both; }
.logo-bean { animation: bean-drop .9s cubic-bezier(.34, 1.56, .64, 1) .85s both; }
.logo-crease { animation: logo-draw .6s var(--ease-out) 1.45s both; }
.brand-word-in { animation: brand-rise .9s var(--ease-out) .55s both; }
.brand-sub { animation: brand-sub 1.1s var(--ease-out) .9s both; }
@keyframes logo-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bean-drop { from { opacity: 0; transform: translateY(-22px) rotate(-70deg) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes brand-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes brand-sub { from { opacity: 0; letter-spacing: .5em; } to { opacity: .62; letter-spacing: .18em; } }
@keyframes bean-wiggle { 0%, 100% { transform: none; } 30% { transform: rotate(-16deg); } 62% { transform: rotate(9deg); } }
html.is-loading:not(.is-loaded) .brand * { animation-play-state: paused !important; }
.brand:hover .logo-bean-hover { animation: bean-wiggle .75s var(--ease-out); }
.brand:hover .logo-bean ellipse { fill: var(--brand); }

/* ---------- Scroll progress + header behaviour ---------- */
.scroll-progress {
  position: fixed;
  z-index: 121;
  top: var(--demo-h);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.site-header { transition: color .35s, background .35s, border-color .35s, transform .55s var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
body.menu-open .site-header.is-hidden { transform: none; }
.filter-bar { transition: top .55s var(--ease-out); }
body:has(.site-header.is-hidden) .filter-bar { top: var(--demo-h); }

/* ---------- Cursor follower (fine pointers only) ---------- */
.cursor { display: none; }
html.has-cursor .cursor {
  display: grid;
  place-items: center;
  position: fixed;
  z-index: 9998;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
  transition: width .4s var(--ease-out), height .4s var(--ease-out), margin .4s var(--ease-out), background .3s, opacity .3s;
}
/* A cream ring plus a faint dark edge keep the amber dot visible on orange and amber sections too. */
html.has-cursor .cursor { box-shadow: 0 0 0 2px rgba(246, 240, 228, .95), 0 0 0 3px rgba(33, 21, 14, .3); }
html.has-cursor .cursor.is-hover { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(204, 136, 0, .22); box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 1.5px rgba(246, 240, 228, .9), 0 0 0 2.5px rgba(33, 21, 14, .3); }
html.has-cursor .cursor.has-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--brand); box-shadow: 0 0 0 2px rgba(246, 240, 228, .95), 0 6px 20px rgba(33, 21, 14, .25); }
html.has-cursor .cursor.is-hidden { opacity: 0; }
.cursor-label { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .25s; }
.cursor.has-label .cursor-label { opacity: 1; }

/* ---------- Shared split-text states ---------- */
.ch, .wd,
.hero h1 .line span.wd, .hero h1 .line span.ch,
.route-hero h1 .line span.wd, .route-hero h1 .line span.ch { display: inline-block; }
.wd { white-space: nowrap; }
[data-intro].is-split { opacity: 1; transform: none; animation: none; }
/* Headline line masks get room for descenders ("y", "j", "p"); the
   negative margin keeps the original line spacing. */
.hero h1 .line, .route-hero h1 .line, .page-hero h1 .line { padding-bottom: .3em; margin-bottom: -.32em; }
[data-intro].is-split .ch {
  transform: translateY(140%) rotate(7deg);
  transform-origin: left bottom;
  animation: char-up 1.05s var(--ease-out) forwards;
  animation-delay: calc(var(--intro-delay, .1s) + var(--ci) * 26ms);
}
@keyframes char-up { to { transform: none; } }

/* Padding gives italic overhangs and descenders (the tails of "y", "f", "j")
   room inside the mask; negative margins keep the line spacing unchanged. */
.sw-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .14em .3em; margin: -.06em -.14em -.3em; }
.sw-in { display: inline-block; }
html.has-gsap [data-split] .sw-in { transform: translateY(140%); }

/* ---------- Media cover reveal ---------- */
.rm-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--surface-tint);
  transform-origin: top;
  pointer-events: none;
  display: none;
}
html.has-gsap .rm-cover { display: block; }
.team-card figure, .map-frame, .article-image, .story-hero-image, .blog-article-hero { position: relative; }

/* ==========================================================================
   HOME — Hero
   ========================================================================== */
.hero.hero-v2 {
  min-height: calc(100svh - var(--demo-h));
  padding: 0;
  display: block;
  align-items: initial;
  background: var(--night);
}
.hero-v2::before, .hero-v2::after { display: none; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--night) url('media/hero-pour-poster.webp') center / cover no-repeat; }
.hero-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(33, 21, 14, .62) 0%, rgba(33, 21, 14, .12) 30%, rgba(33, 21, 14, .18) 52%, rgba(33, 21, 14, .9) 88%, var(--night) 100%),
    linear-gradient(90deg, rgba(33, 21, 14, .55) 0%, transparent 55%);
}
.hero-inner {
  position: relative;
  min-height: calc(100svh - var(--demo-h));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: calc(var(--header-h) + 26px) 0 clamp(28px, 4vw, 48px);
}
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.hero-top .eyebrow { color: var(--brand); margin: 0; }
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(246, 240, 228, .22);
  background: rgba(33, 21, 14, .35);
  backdrop-filter: blur(10px);
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); position: relative; }
.status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; color: inherit; opacity: 0; }
.hero-status.is-open .status-dot { background: #7fc47a; color: #7fc47a; }
.hero-status.is-open .status-dot::after { animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

/* Two clean axes: line one and the lede sit flush left, line two and the
   buttons sit flush right; the badge fills the space beside line one. */
.hero-headline { position: relative; align-self: end; padding-bottom: clamp(18px, 2.2vw, 30px); }
.hero-v2 .hero-title {
  max-width: none;
  font-size: clamp(64px, min(12.2vw, 23svh), 224px);
  line-height: .86;
  letter-spacing: -.055em;
  text-wrap: initial;
}
.hero-v2 .hero-title .line { padding: .04em 0 .3em; margin-bottom: -.32em; }
.hero-v2 .hero-title .line + .line { padding: .04em .06em .3em 0; text-align: right; }
.hero-v2 .hero-title em { color: var(--brand); }
.hero-headline .spin-badge { position: absolute; top: 0; right: 0; }
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid rgba(246, 240, 228, .2);
}
.hero-lede { color: rgba(246, 240, 228, .8); max-width: 400px; }
.hero-v2 .hero-actions { flex-wrap: nowrap; }
.btn-ghost-light { color: var(--paper); }
.spin-badge {
  justify-self: end;
  position: relative;
  width: clamp(104px, 9.5vw, 138px);
  aspect-ratio: 1;
  color: var(--paper);
}
.spin-badge svg { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.spin-badge text { fill: currentColor; font: 500 9.5px var(--mono); letter-spacing: 2.4px; text-transform: uppercase; }
.spin-badge-core {
  position: absolute;
  inset: 28%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font: 600 11px var(--mono);
  letter-spacing: .06em;
}
.spin-badge-core svg { width: 46%; height: 46%; animation: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hero-scroll {
  position: absolute;
  right: calc((100vw - var(--page)) / 2 - 6px);
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  font: 500 9px var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 240, 228, .7);
}
.hero-scroll-line { width: 1px; height: 64px; background: rgba(246, 240, 228, .25); position: relative; overflow: hidden; }
.hero-scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--brand); transform: translateY(-100%); animation: scroll-line 2.2s var(--ease-io) infinite; }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ==========================================================================
   HOME — Marquee
   ========================================================================== */
.marquee { background: var(--night); color: var(--paper); overflow: hidden; padding: clamp(20px, 3vw, 44px) 0 clamp(26px, 3.4vw, 50px); }
.marquee-row { display: flex; white-space: nowrap; will-change: transform; }
.marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(22px, 3vw, 48px);
  padding-right: clamp(22px, 3vw, 48px);
  font: 400 clamp(46px, 7.4vw, 124px)/1.08 var(--display);
  letter-spacing: -.045em;
}
.marquee-track em { font-weight: 300; color: var(--brand); }
.marquee-track i {
  flex: 0 0 auto;
  width: .34em;
  height: .48em;
  border-radius: 50%;
  background: var(--accent);
  transform: rotate(28deg);
  position: relative;
}
.marquee-track i::after { content: ''; position: absolute; left: 47%; top: 12%; bottom: 12%; width: 2px; border-radius: 2px; background: var(--night); transform: rotate(8deg); }
/* Solid, muted second row: outline strokes trace Fraunces' overlapping contours. */
.marquee-row-alt .marquee-track { color: rgba(246, 240, 228, .26); }
.marquee-row-alt .marquee-track em { color: rgba(204, 136, 0, .62); }
.marquee-row-alt .marquee-track i { background: var(--brand); }
/* Slim single-row ticker used on the inner pages (accent by default). */
.marquee-slim { padding: 14px 0 16px; background: var(--accent); }
.marquee-slim .marquee-track { font-size: clamp(30px, 3.6vw, 58px); color: #fff; }
.marquee-slim .marquee-track em { color: var(--night); }
.marquee-slim .marquee-track i { background: var(--brand); }
.marquee-slim .marquee-track i::after { background: var(--accent); }

/* ==========================================================================
   HOME — Manifesto + stats
   ========================================================================== */
.manifesto-line .sw { transition: opacity .2s linear; }
html.has-gsap .manifesto-line .sw { opacity: .14; }
.manifesto-line .inline-photo { transition: none; }

/* Manifesto v2: pinned statement, polaroid cards drift past on both sides */
.manifesto-v2 { padding: 0 0 clamp(70px, 9vw, 130px); }
.manifesto-stage { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
.manifesto-center { position: relative; z-index: 2; width: min(60vw, 900px); text-align: center; display: grid; justify-items: center; gap: clamp(22px, 2.6vw, 36px); }
.manifesto-center .eyebrow { color: var(--accent); }
.manifesto-v2 .manifesto-line { font-size: clamp(44px, 5.4vw, 92px); line-height: 1.04; font-weight: 400; text-wrap: balance; }
.manifesto-v2 .inline-photo { width: clamp(84px, 9vw, 150px); border-radius: 999px; vertical-align: -.14em; box-shadow: 0 0 0 3px var(--mist); }
.manifesto-v2 .manifesto-aside { border: 0; padding: 0; max-width: 460px; display: grid; justify-items: center; gap: 18px; }
.manifesto-v2 .manifesto-aside p { margin: 0; color: var(--ink-soft); }
.manifesto-fly { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fly-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  margin: 0;
  padding: 8px 8px 0;
  background: #fbf7ee;
  box-shadow: 0 18px 40px rgba(33, 21, 14, .16), 0 2px 6px rgba(33, 21, 14, .1);
  transform: rotate(var(--r));
  will-change: transform;
}
.fly-card.fly-right { left: auto; right: var(--x); }
.fly-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fly-card figcaption { padding: 9px 2px 11px; font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.has-gsap .manifesto-v2.is-flying .manifesto-track { height: 230svh; }
.manifesto-v2 .stat-row { margin-top: 0; }
html.has-gsap .manifesto-v2.is-flying .manifesto-stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; }
@media (max-width: 899px) {
  .manifesto-stage { display: block; padding: 70px 0 20px; }
  /* Three equal columns that always fit the screen, with gentle tilts. */
  .manifesto-fly { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.6vw, 18px); width: var(--page); margin: 0 auto 30px; padding: 8px 0 18px; overflow: visible; }
  .fly-card, .fly-card.fly-right { position: relative; left: auto; right: auto; top: auto; width: auto; padding: 6px 6px 0; }
  .fly-card:nth-child(1) { transform: rotate(-4deg); }
  .fly-card:nth-child(2) { transform: translateY(10px) rotate(2deg); }
  .fly-card:nth-child(3) { transform: rotate(4deg); }
  .fly-card:nth-child(n+4) { display: none; }
  body .fly-card figcaption { padding: 7px 1px 9px; font-size: 9px; letter-spacing: .06em; line-height: 1.3; white-space: normal; overflow: visible; }
  .manifesto-center { width: var(--page); margin: 0 auto; }
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(64px, 9vw, 130px);
  border-top: 1px solid var(--ink);
}
.stat { padding: 22px 22px 0 0; border-right: 1px solid var(--line); }
.stat + .stat { padding-left: 22px; }
.stat:last-child { border-right: 0; }
.stat dt { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.stat dd { margin: 18px 0 0; font: 300 clamp(64px, 8vw, 132px)/.85 var(--display); letter-spacing: -.06em; display: flex; align-items: baseline; gap: 8px; }
.stat dd small { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ==========================================================================
   HOME — Horizontal drinks (pinned on desktop, swipe on touch)
   ========================================================================== */
.hscroll { background: var(--paper); padding: clamp(70px, 9vw, 120px) 0; overflow: hidden; }
.hscroll-pin { position: relative; }
.hscroll-track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: min(76svh, 760px);
  min-height: 520px;
  padding-inline: calc((100vw - var(--page)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hscroll-track::-webkit-scrollbar { display: none; }
.hscroll-track > * { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-inline: calc((100vw - var(--page)) / 2); }
.hscroll.is-pinned { padding: 0; }
.hscroll.is-pinned .hscroll-pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 26px; padding-top: calc(var(--demo-h) + 30px); }
.hscroll.is-pinned .hscroll-track { overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform; height: min(70svh, 740px); }
.hscroll-intro { width: min(40vw, 580px); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(16px, 3vw, 56px) 8px 0; }
.hscroll-intro .eyebrow { margin-bottom: 20px; color: var(--accent); }
.hscroll-intro .section-title { font-size: clamp(52px, 5.3vw, 88px); }
.hscroll-intro .section-copy { margin-top: 26px; max-width: 380px; }
.hscroll-hint { display: flex; align-items: center; gap: 12px; margin-top: 30px; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hint-mobile { display: none; }
@media (max-width: 899px) { .hint-desktop { display: none; } .hint-mobile { display: inline; } }
.hscroll-hint-arrow { display: inline-block; animation: nudge 1.6s var(--ease-io) infinite; color: var(--accent); font-size: 16px; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

.drink-panel { position: relative; width: clamp(290px, 29vw, 460px); overflow: hidden; color: #fff; background: var(--night); isolation: isolate; }
.drink-panel:nth-of-type(even) { margin-top: clamp(0px, 3vw, 48px); }
.drink-panel-media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.drink-panel-media img { width: 124%; max-width: none; height: 100%; object-fit: cover; margin-left: -12%; transition: scale 1.1s var(--ease-out), filter .6s; filter: saturate(.9); }
.drink-panel:hover .drink-panel-media img { scale: 1.06; filter: saturate(1.05); }
.drink-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(33, 21, 14, .3) 0%, transparent 26%, transparent 55%, rgba(33, 21, 14, .55) 100%); }
.drink-panel-num { position: absolute; top: 16px; right: 20px; font: italic 300 clamp(54px, 5vw, 84px)/1 var(--display); letter-spacing: -.05em; color: var(--paper); }
.drink-panel-label { position: absolute; left: 16px; right: 16px; bottom: 18px; }
.drink-panel-tag { display: inline-block; margin-bottom: 10px; padding: 6px 9px; background: var(--brand); color: var(--ink); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.drink-panel h3 { font: 400 clamp(38px, 3.4vw, 58px)/1.04 var(--display); letter-spacing: -.04em; }
.drink-panel p { margin-top: 8px; font-size: 13px; line-height: 1.5; max-width: 330px; }
.drink-panel .mark { background: var(--night); color: var(--paper); padding: .04em .22em .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.drink-panel p .mark { padding: .18em .4em; line-height: 1.9; background: rgba(33, 21, 14, .88); }
.drink-panel:hover h3 .mark { background: var(--accent); }
.hscroll-end { width: min(40vw, 560px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 30px; padding: 0 clamp(20px, 5vw, 80px); }
.hscroll-end .display { font-size: clamp(52px, 5.4vw, 92px); }
.hscroll-end em { color: var(--accent); }
.hscroll-meter { display: flex; align-items: center; gap: 18px; margin-top: 24px; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.hscroll.is-pinned .hscroll-meter { margin-top: 0; }
.hscroll-meter-bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.hscroll-meter-bar span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   HOME — Roast carousel
   ========================================================================== */
.roast-v2 { padding-bottom: clamp(80px, 10vw, 150px); }
.roast-head { display: grid; justify-items: center; text-align: center; gap: 22px; }
.roast-head .eyebrow { color: var(--brand); margin: 0; }
.roast-head h2 { font-size: clamp(58px, 8.4vw, 140px); }
.roast-head h2 em { color: var(--brand); }
.roast-head > p { max-width: 520px; color: rgba(246, 240, 228, .66); }
.roast-stage { position: relative; height: clamp(360px, 42vw, 600px); margin-top: clamp(44px, 6vw, 84px); touch-action: pan-y; user-select: none; }
.roast-cards { position: absolute; inset: 0; cursor: grab; }
.roast-cards.is-dragging { cursor: grabbing; }
.roast-card {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  transform: translateX(-50%);
  transition: transform 1s var(--ease-out), opacity .8s var(--ease-out), filter .8s;
  will-change: transform;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}
.roast-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1.2s var(--ease-out); }
.roast-card.is-active img { transform: scale(1.04); }
.roast-card-tag { position: absolute; left: 14px; top: 14px; padding: 6px 9px; background: var(--brand); color: var(--ink); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.roast-info { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: clamp(30px, 4vw, 52px); }
.roast-counter { font: 500 11px var(--mono); letter-spacing: .14em; color: rgba(246, 240, 228, .6); }
.roast-counter span { color: var(--brand); }
.roast-title-wrap { text-align: center; overflow: hidden; padding-inline: .2em; }
.roast-name { font: italic 300 clamp(48px, 6.4vw, 108px)/1 var(--display); letter-spacing: -.05em; padding-bottom: .08em; }
.roast-notes { margin-top: 8px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.roast-name.is-swapping, .roast-notes.is-swapping { animation: swap-in .8s var(--ease-out); }
@keyframes swap-in { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
.roast-nav { justify-self: end; display: flex; gap: 10px; }
.roast-arrow {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(246, 240, 228, .3);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 20px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.roast-arrow:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); transform: scale(1.06); }
.roast-lower { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 5vw, 80px); align-items: end; margin-top: clamp(36px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--line-light); }
.roast-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.roast-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(246, 240, 228, .24);
  background: transparent;
  color: rgba(246, 240, 228, .7);
  cursor: pointer;
  font: 500 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.roast-tab span { color: var(--brand); }
.roast-tab:hover { border-color: var(--paper); color: var(--paper); }
.roast-tab[aria-pressed='true'] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.roast-tab[aria-pressed='true'] span { color: var(--accent); }
.roast-v2 .roast-detail { padding: 0; }

/* ==========================================================================
   HOME — Ritual (sticky media timeline)
   ========================================================================== */
.ritual-v2 { background: var(--paper-deep); }
.ritual-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.ritual-sticky { position: sticky; top: calc(var(--demo-h) + var(--header-h) + 22px); height: calc(100svh - var(--demo-h) - var(--header-h) - 44px); }
.ritual-media {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), calc(100% - 54px) 100%, 0 100%);
}
.ritual-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition: clip-path 1.1s var(--ease-io), transform 1.6s var(--ease-out);
}
.ritual-frame.is-active { clip-path: inset(0); transform: scale(1); z-index: 2; }
.ritual-frame.was-active { clip-path: inset(0); transform: scale(1); z-index: 1; }
.ritual-media::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, transparent 55%, rgba(33, 21, 14, .7)); pointer-events: none; }
.ritual-clock { position: absolute; z-index: 4; left: clamp(18px, 2.4vw, 34px); bottom: clamp(14px, 2vw, 26px); color: var(--paper); font: 300 clamp(70px, 8.6vw, 150px)/.9 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; overflow: hidden; }
.ritual-clock span { display: inline-block; }
.ritual-clock span.is-ticking { animation: swap-in .7s var(--ease-out); }
.ritual-content > .eyebrow { margin-bottom: 22px; color: var(--accent); }
.ritual-v2 .ritual-content h2 { font-size: clamp(58px, 7.6vw, 128px); }
.ritual-v2 .ritual-list { position: relative; margin-top: clamp(36px, 5vw, 70px); padding-left: clamp(30px, 3vw, 44px); border-top: 0; }
.ritual-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.ritual-progress span { position: absolute; inset: 0; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.ritual-v2 .ritual-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: center;
  min-height: 52svh;
  padding: 0;
  border: 0;
  opacity: .26;
  transition: opacity .6s var(--ease-out);
  position: relative;
}
.ritual-v2 .ritual-row::before {
  content: '';
  position: absolute;
  left: calc(clamp(30px, 3vw, 44px) * -1 - 6px);
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper-deep);
  border: 2px solid var(--line);
  transform: translateY(-50%);
  transition: background .4s, border-color .4s, transform .4s var(--ease-out);
}
.ritual-v2 .ritual-row.is-active { opacity: 1; }
.ritual-v2 .ritual-row.is-active::before { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.25); }
.ritual-v2 .ritual-row h3 { font-size: clamp(42px, 5vw, 80px); }
.ritual-v2 .ritual-row p { max-width: 440px; font-size: 15px; }
.ritual-v2 .ritual-time { font-size: 12px; }

/* ---------- Visit banner badge ---------- */
.visit-banner { position: relative; }
/* Seal sitting on the right end of the info rule. */
.visit-side { position: relative; }
.visit-badge { position: absolute; z-index: 2; right: 0; top: 0; transform: translateY(-50%); color: #fff; background: var(--accent); border-radius: 50%; }
.visit-badge .spin-badge-core { background: var(--night); font-size: 12px; }

/* ---------- Footer motion ---------- */
.site-footer { position: relative; overflow: hidden; }
.footer-links a { width: fit-content; }
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .5s var(--ease-out); }
.roll > span + span { position: absolute; left: 0; top: 100%; color: var(--brand); }
.footer-links a:hover .roll > span, .footer-links a:focus-visible .roll > span { transform: translateY(-100%); }
.footer-links .footer-status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.is-open > .status-dot { background: #7fc47a; color: #7fc47a; }
.is-open > .status-dot::after { animation: ping 2s var(--ease-out) infinite; }
.footer-links p.is-today { color: var(--brand); }
.footer-links p.is-today::after { content: ' · today'; font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.footer-wordmark { position: relative; border-top: 0; }
.footer-wordmark::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-light); transform: scaleX(var(--draw, 1)); transform-origin: left; }
.footer-bottom { align-items: center; }
.to-top { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line-light); background: transparent; color: var(--paper); font: 500 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s; }
.to-top:hover, .to-top:focus-visible { border-color: var(--brand); color: var(--brand); }
.to-top-arrow { display: inline-block; }
.to-top:hover .to-top-arrow { animation: arrow-up .7s var(--ease-out); }
@keyframes arrow-up { 0% { transform: none; } 45% { transform: translateY(-140%); opacity: 0; } 46% { transform: translateY(140%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Footer wordmark ---------- */
.footer-wordmark { padding-top: 26px; }
.footer-wordmark span { color: var(--brand); font-size: clamp(30px, 12.1vw, 230px); letter-spacing: -.065em; line-height: .82; padding-bottom: .06em; }
.footer-wordmark span .wd, .footer-wordmark span .ch { display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; padding: 0; }
.footer-wordmark span .ch { translate: 0 calc(var(--lift, 0) * -12%); color: color-mix(in srgb, #ffe1a8 calc(var(--lift, 0) * 100%), var(--brand)); transition: translate .5s var(--ease-out), color .4s; }
html.has-gsap .footer-wordmark .ch { transform: translateY(105%); }

/* ---------- Route heroes (inner pages) ---------- */
.route-hero-arch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--brand);
  transform-origin: top;
  animation: cover-out 1.25s var(--ease-io) .35s both;
}
@keyframes cover-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-quick::after { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1050px) {
  .hero-scroll { display: none; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(n+3) { padding-top: 28px; border-top: 1px solid var(--line); }
}

@media (max-width: 899px) {
  .hscroll-track { height: auto; min-height: 0; gap: 12px; padding-bottom: 6px; }
  /* Intro becomes a normal block above the swipe row (moved there by motion.js). */
  .hscroll-pin > .hscroll-intro { width: var(--page); margin: 0 auto 28px; padding: 0; }
  .hscroll-intro .section-title { font-size: clamp(48px, 13vw, 76px); }
  .hscroll-intro .section-copy { margin-top: 18px; }
  .hscroll-hint { margin-top: 20px; }
  .drink-panel { width: 78vw; height: min(118vw, 560px); }
  .drink-panel:nth-of-type(even) { margin-top: 0; }
  .hscroll-end { width: 78vw; padding: 24px; background: var(--paper-deep); }
  .ritual-layout { display: flex; flex-direction: column; gap: 0; }
  .ritual-content { display: contents; }
  .ritual-content > .eyebrow { order: 1; }
  .ritual-content > h2 { order: 2; margin-bottom: 28px; }
  .ritual-sticky { order: 3; z-index: 2; height: 34svh; top: calc(var(--demo-h) + 10px); width: 100%; }
  .ritual-sticky::before { content: ''; position: absolute; z-index: -1; left: -20px; right: -20px; top: -240px; bottom: -18px; background: var(--paper-deep); }
  .ritual-clock { font-size: clamp(56px, 16vw, 84px); }
  .ritual-v2 .ritual-list { order: 4; margin-top: 18px; }
  .ritual-v2 .ritual-row { min-height: 44svh; }
  .roast-lower { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero-v2 .hero-title { font-size: clamp(58px, 17.5vw, 96px); }
  .hero-v2 .hero-title .line + .line { text-align: left; }
  .brand-name { font-size: 18px; }
  .brand-logo { width: 30px; height: 34px; }
  .hero-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 24px; }
  .spin-badge { display: none; }
  .hero-v2 .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .marquee-track { font-size: clamp(40px, 13vw, 64px); }
  .stat dd { font-size: clamp(56px, 16vw, 80px); }
  .stat { padding-right: 12px; }
  .stat + .stat { padding-left: 12px; }
  .stat:nth-child(3) { padding-left: 0; }
  .roast-stage { height: min(108vw, 440px); }
  .roast-info { grid-template-columns: 1fr auto; }
  .roast-counter { display: none; }
  .roast-title-wrap { text-align: left; }
  .roast-arrow { width: 50px; height: 50px; }
  .roast-tab { flex: 1 1 calc(50% - 4px); justify-content: flex-start; }
  .visit-badge { display: none; }
}

/* ==========================================================================
   Mobile & responsive polish (audit at 320 / 375 / 768 / 1024)
   ========================================================================== */
/* Safety net against stray horizontal scroll; `clip` keeps sticky elements working. */
html, body { overflow-x: clip; }

/* The old site.css pushed ritual copy into a second column on phones;
   the mobile backing panel behind the sticky photo is wider than the page. */
.ritual-v2 { overflow-x: clip; }
.ritual-v2 .ritual-row > * { grid-column: 1; min-width: 0; }

/* Comfortable 44px touch targets for secondary links and controls. */
.text-link { min-height: 44px; }
.to-top { min-height: 44px; }
@media (max-width: 900px) {
  .footer-links a { padding: 10px 0; margin: 0; }
  .footer-links p { margin: 6px 0; }
  .demo-banner a { display: inline-block; padding: 4px 0; }
}

/* Readable micro-type on phones: mono labels never drop below ~10.5px. */
@media (max-width: 720px) {
  body .eyebrow { font-size: 11px; }
  body .footer-links h3, body .footer-bottom, body .to-top { font-size: 10px; }
  body .brand-sub { font-size: 9px; }
  body .drink-panel-tag, body .roast-card-tag, body .product-category, body .chapter-index,
  body .team-role, body .number-label, body .stat dt, body .menu-facts dt, body .journal-facts dt,
  body .contents-meta, body .read-meter-label, body .roast-detail strong, body .hscroll-meter-label,
  body .fly-card figcaption, body .fan-card figcaption, body .value-num, body .collage-item figcaption,
  body .story-hours dt::after, body .visit-info dt, body .ritual-time, body .roast-notes,
  body .roast-counter, body .contents-label, body .filter-btn, body .hero-status, body .story-reel-note,
  body .story-reel-kicker, body .blog-article-aside dt { font-size: 10.5px; }
}

/* Tablets: hero buttons keep their labels on one line and wrap as a row instead. */
.hero-v2 .hero-actions .btn { white-space: nowrap; }
@media (max-width: 1050px) and (min-width: 721px) {
  .hero-bottom { flex-wrap: wrap; }
  .hero-v2 .hero-actions { flex-wrap: wrap; }
}

/* Very small phones (≤380px): keep the header on one line. */
@media (max-width: 380px) {
  .nav-shell { gap: 12px; }
  .brand { gap: 9px; }
  .brand-logo { width: 26px; height: 30px; }
  .brand-name { font-size: 16px; }
  .nav-actions { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after, .cursor, .scroll-progress { display: none !important; }
  [data-intro].is-split .ch { transform: none; animation: none; }
  .spin-badge svg, .hscroll-hint-arrow, .hero-scroll-line::after { animation: none; }
  .ritual-frame { transition: none; }
  .route-hero-arch::before { display: none; }
}