/* ==========================================================================
   CR COFFEE SHOP — next site (beta)
   Hero prototype v1. Token system will expand with the full build.
   ========================================================================== */

/* ---- Fonts (self-hosted, matches CSP font-src 'self') ------------------- */
/* Inter is ONE variable font covering the whole weight axis, so it is one file and one
   @font-face. It used to be four files, inter-400/500/600/700, which were byte-identical
   copies of this same variable font under four names: a browser needing 400, 500 and 600
   downloaded the same 47 KB three times. The weight range below is what lets one file
   serve every weight. Do not re-split it into per-weight files.
   The ?v= is required: _headers caches font/* as immutable for a year, so a font that
   changes has to change its URL or returning visitors keep the old one forever. */
@font-face { font-family: 'Inter'; src: url('../font/inter.woff2?v=2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Geist (Vercel, SIL OFL 1.1): the display face since 2026-09-02. Two static weights, no variable file.
   Subset to the standard Google Fonts latin range, which took each file from 44 KB to 11 KB.
   Subset to a standard range, not to the glyphs the site happens to use today, so a future
   article with an accented name or a curly quote still renders. */
@font-face { font-family: 'Geist'; src: url('../font/geist-400.woff2?v=2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../font/geist-500.woff2?v=2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --espresso: #151210;          /* hero + dark surfaces */
  --espresso-deep: #0c0a08;
  --cream: #FAF8F5;             /* carried from the live site */
  --cream-dim: rgba(250, 248, 245, 0.78);
  --charcoal: #2A2A2A;
  --red: #AE342C;               /* shipped brand red (site value, not the approximation) */
  --red-hover: #8F2A23;
  --hairline-light: rgba(250, 248, 245, 0.18);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (luxury register, 2026-09-02): display type sits small and light, hierarchy
     comes from case, weight, tracking, and space. Body stays Inter at 16px. */
  --fs-h1: clamp(2rem, 1.35rem + 2.2vw, 2.75rem);   /* 32 to 44px */
  --fs-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem);  /* 24 to 30px */
  --fs-label: 0.75rem;                               /* 12px eyebrows, nav, captions */
  --track-label: 0.14em;
  --chapter-gap: clamp(5rem, 11vh, 8.5rem);          /* 80 to 136px of air between chapters */

  --container: 1200px;
  --pad: clamp(1.25rem, 1rem + 2vw, 3rem);
  --header-h: 72px;
}

/* ---- Reset-ish ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; font-family: var(--font-display); font-weight: 400; } /* no widowed words in headings */

/* ---- Accessibility baseline ---------------------------------------------- */
.skip-nav {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cream); color: var(--charcoal);
  padding: 0.75rem 1.25rem; font-weight: 600; border-radius: 0 0 6px 0;
}
.skip-nav:focus { left: 0; }
/* Off-screen but readable by search engines and screen readers. Used where a page's
   heading is carried by the artwork rather than by visible type. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.header :focus-visible, .hero :focus-visible { outline-color: var(--cream); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; text-decoration: none; letter-spacing: 0.01em;
  border-radius: 4px; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn--primary { background: var(--red); color: var(--cream); padding: 0.7rem 1.4rem; font-size: 0.95rem; }
.btn--primary:hover { background: var(--red-hover); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
}
.btn--ghost {
  color: var(--cream); border: 1px solid var(--hairline-light);
  padding: 0.7rem 1.4rem; font-size: 0.95rem; background: rgba(12, 10, 8, 0.25);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: rgba(250, 248, 245, 0.55); }
.btn--lg { padding: 0.95rem 1.9rem; font-size: 1.02rem; }
.btn--bar { width: 100%; padding: 0.95rem; font-size: 1.05rem; border-radius: 6px; }

/* ---- Header ---------------------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  transition: background-color 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.header--solid {
  background: rgba(12, 10, 8, 0.72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline-light);
}
.header__inner {
  max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; gap: 2rem;
}
.header__brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.header__mark { width: 34px; height: 34px; border-radius: 3px; object-fit: cover; }
.header__wordmark {
  color: var(--cream); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.header__nav { display: flex; gap: 1.75rem; margin-left: auto; }
.header__link {
  color: var(--cream-dim); text-decoration: none;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s ease;
}
.header__link:hover { color: var(--cream); }
.header__order { flex-shrink: 0; }
.header__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.header__burger-line {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--cream);
}
@media (max-width: 760px) {
  .header__nav { display: none; }
  .header__order { display: none; } /* hero CTA + sticky bar cover mobile ordering */
  .header__brand { margin-right: auto; }
  .header__burger { display: flex; }
}

/* ---- Mobile nav overlay -------------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(12, 10, 8, 0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  padding: 0 var(--pad) calc(1.5rem + env(safe-area-inset-bottom));
}
.mobile-nav[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav { animation: nav-in 0.28s ease; }
  @keyframes nav-in { from { opacity: 0; } to { opacity: 1; } }
}
.mobile-nav__head {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--cream); cursor: pointer;
}
.mobile-nav__links {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
}
.mobile-nav__link {
  color: var(--cream); text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 1.9rem); font-weight: 400; letter-spacing: 0;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(250, 248, 245, 0.08);
  transition: color 0.2s ease;
}
.mobile-nav__link:hover { color: rgba(250, 248, 245, 0.75); }
.mobile-nav__order { flex-shrink: 0; }
body.nav-open { overflow: hidden; }
@media (min-width: 761px) { .mobile-nav { display: none; } }

/* ---- Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--espresso);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__poster,
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__video { opacity: 0; transition: opacity 1.1s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(10, 8, 6, 0.84) 0%,
      rgba(10, 8, 6, 0.42) 34%,
      rgba(10, 8, 6, 0.10) 58%,
      rgba(10, 8, 6, 0.00) 74%,
      rgba(10, 8, 6, 0.30) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 2rem) var(--pad) clamp(3.5rem, 8vh, 6rem);
}
.hero__eyebrow {
  color: var(--cream-dim); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.hero__title {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.01em;
  max-width: 18ch;
  margin-bottom: 1.2rem;
}
.hero__sub {
  color: var(--cream-dim);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.16rem);
  max-width: 33rem; line-height: 1.65;
  margin-bottom: 1.9rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.1rem; }
.hero__proof {
  color: rgba(250, 248, 245, 0.62);
  font-size: 0.82rem; letter-spacing: 0.02em;
}

/* Entrance: gentle fade-up, disabled for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow, .hero__title, .hero__sub, .hero__actions, .hero__proof {
    opacity: 0; transform: translateY(14px);
    animation: hero-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .hero__title   { animation-delay: 0.08s; }
  .hero__sub     { animation-delay: 0.16s; }
  .hero__actions { animation-delay: 0.24s; }
  .hero__proof   { animation-delay: 0.32s; }
}
@keyframes hero-rise { to { opacity: 1; transform: translateY(0); } }

/* Pause control (WCAG 2.2.2: visible control for auto-playing motion) */
.hero__pause {
  position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-width: 44px; min-height: 44px; padding: 0 0.9rem;
  background: rgba(12, 10, 8, 0.55); color: var(--cream-dim);
  border: 1px solid var(--hairline-light); border-radius: 999px;
  font: 500 0.78rem/1 var(--font-sans); letter-spacing: 0.04em;
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hero__pause:hover { color: var(--cream); border-color: rgba(250, 248, 245, 0.5); }
.hero__pause-icon--play { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--play { display: inline; }

/* ---- Dark page body (Option A: Cinema) --------------------------------------- */
body { background: var(--espresso-deep); color: var(--cream); }
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400; letter-spacing: 0; color: var(--cream);
  line-height: 1.2;
}

/* Scroll reveal: felt, not noticed */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.65s ease, transform 0.65s ease; }
  .reveal.in-view { opacity: 1; transform: translateY(0); }
}

/* ---- Locations strip ----------------------------------------------------------- */
.locations {
  border-top: 1px solid var(--hairline-light);
  border-bottom: 1px solid var(--hairline-light);
}
.locations__grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--hairline-light);
}
.locations__card {
  position: relative;
  background: var(--espresso-deep);
  padding: 1.75rem 2rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  transition: background 0.35s ease;
}
.locations__card:hover, .locations__card:focus-within { background: #1b1613; }
.locations__tag {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.5);
}
.locations__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--cream); }
/* The name link stretches over the whole card; meta links sit above it on their own layer */
.locations__link { color: inherit; text-decoration: none; }
.locations__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.locations__link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.locations__arrow { display: inline-block; opacity: 0; transform: translateX(-5px); transition: opacity 0.3s ease, transform 0.3s ease; font-weight: 400; color: rgba(250, 248, 245, 0.7); }
.locations__card:hover .locations__arrow, .locations__card:focus-within .locations__arrow { opacity: 1; transform: none; }
.locations__meta { font-size: 0.88rem; color: rgba(250, 248, 245, 0.65); position: relative; z-index: 2; }
.locations__addr { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.locations__addr:hover { color: var(--cream); border-bottom-color: rgba(250, 248, 245, 0.4); }
/* A dimmed still of each shop that comes alive on hover. Fixed height, so nothing jumps. */
.locations__photo {
  margin-top: 1.05rem; height: 150px;
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(250, 248, 245, 0.12);
}
.locations__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.35; filter: grayscale(0.35);
  transition: opacity 0.5s ease, filter 0.5s ease, transform 0.65s ease;
}
.locations__card:hover .locations__photo img, .locations__card:focus-within .locations__photo img {
  opacity: 1; filter: none; transform: scale(1.045);
}
@media (hover: none) {
  .locations__photo img { opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .locations__photo img, .locations__arrow { transition: none; }
  .locations__card:hover .locations__photo img { transform: none; }
}
.open-status--open { color: rgba(250, 248, 245, 0.85); }
@media (max-width: 1000px) { .locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .locations__grid { grid-template-columns: 1fr; } }

/* ---- Beans: split with blend index ---------------------------------------------- */
.beans { padding: var(--chapter-gap) var(--pad); }
.beans__inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
.beans__figure { flex: 0 0 min(40%, 480px); }
.beans__figure img { width: 100%; height: auto; border-radius: 6px; }
.beans__list { flex: 1; display: flex; flex-direction: column; gap: 1.4rem; }
.blend-index { list-style: none; }
.blend-index__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.05rem 0; border-top: 1px solid var(--hairline-light);
}
.blend-index__row:last-child { border-bottom: 1px solid var(--hairline-light); }
.blend-index__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--cream); }
.blend-index__right { display: flex; gap: 1.4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; row-gap: 0.35rem; }
.blend-index__note { font-size: 0.85rem; color: rgba(250, 248, 245, 0.55); text-align: right; }
.blend-index__price { font-size: 0.95rem; color: var(--cream); }
.blend-index__buy {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; white-space: nowrap;
  color: var(--cream); border: 1px solid rgba(250, 248, 245, 0.35);
  padding: 0.34rem 0.78rem; border-radius: 999px; text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.blend-index__buy:hover, .blend-index__buy:focus-visible { background: var(--red); border-color: var(--red); }
.beans__cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.beans__ship { font-size: 0.82rem; color: rgba(250, 248, 245, 0.55); }
@media (max-width: 860px) {
  .beans__inner { flex-direction: column; align-items: stretch; }
  .beans__figure { flex: none; max-width: 100%; }
  .beans__figure img { max-height: 340px; object-fit: cover; object-position: center 40%; }
  .blend-index__note { display: none; }
}

/* ---- Royal No. 6 band ------------------------------------------------------------- */
.roaster { position: relative; overflow: hidden; min-height: 540px; display: flex; align-items: center; }
.roaster__media { position: absolute; inset: 0; }
.roaster__media img { width: 100%; height: 100%; object-fit: cover; }
.roaster__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.62) 45%, rgba(10, 8, 6, 0.2) 100%);
}
.roaster__content {
  position: relative; z-index: 2;
  max-width: var(--container); width: 100%; margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) var(--pad);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}
.roaster__plate { width: min(240px, 60vw); height: auto; border-radius: 4px; border: 1px solid rgba(250, 248, 245, 0.22); }
.roaster__body { font-size: 1.02rem; line-height: 1.7; color: rgba(250, 248, 245, 0.85); max-width: 34rem; }
.roaster__cta { display: flex; align-items: center; gap: 1rem; margin-top: 0.3rem; flex-wrap: wrap; }
.roaster__tag { font-size: 0.82rem; color: rgba(250, 248, 245, 0.55); }

/* Captioned photo strip: the port-to-cup journey on the homepage, menu moments on /drinks */
.photorow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; width: 100%; }
.photorow__fig { position: relative; margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid rgba(250, 248, 245, 0.16); }
.photorow__fig img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.photorow--tall .photorow__fig img { aspect-ratio: 4 / 5; }
/* Hover-swap drink cells: second photo of the same drink fades in on hover/keyboard focus */
.photorow__link { display: block; position: relative; height: 100%; }
.photorow__fig--swap .photorow__altpic { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.45s ease; }
.photorow__fig--swap .photorow__altpic img { height: 100%; }
.photorow__fig--swap:hover .photorow__altpic,
.photorow__fig--swap:focus-within .photorow__altpic { opacity: 1; }
.photorow__cap { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .photorow__fig--swap .photorow__altpic { transition: none; } }
.photorow--menu { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  /* Phones: the drinks wall becomes a feed, one full-width square per drink */
  .photorow--menu { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .photorow--menu .photorow__fig img { aspect-ratio: 1 / 1; }
  .photorow--menu .photorow__cap { font-size: 0.74rem; letter-spacing: 0.12em; padding: 1.1rem 0.9rem 0.7rem; }
}
/* Cells without a second photo get a slow zoom on hover instead */
.photorow--menu .photorow__fig:not(.photorow__fig--swap) img { transition: transform 0.6s ease; }
.photorow--menu .photorow__fig:not(.photorow__fig--swap):hover img,
.photorow--menu .photorow__fig:not(.photorow__fig--swap):focus-within img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .photorow--menu .photorow__fig:not(.photorow__fig--swap) img { transition: none; transform: none !important; }
}
/* Mood chips: filter the drink collage by style */
.mood-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.mood-chip {
  font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.72); background: transparent;
  border: 1px solid rgba(250, 248, 245, 0.3); border-radius: 999px;
  padding: 0.45rem 1.05rem; cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.mood-chip:hover { color: var(--cream); border-color: rgba(250, 248, 245, 0.55); }
.mood-chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--cream); }
.photorow--moods .photorow__fig { display: none; }
.photorow--moods[data-mood="iced"] .photorow__fig[data-mood="iced"],
.photorow--moods[data-mood="hot"] .photorow__fig[data-mood="hot"],
.photorow--moods[data-mood="frozen"] .photorow__fig[data-mood="frozen"] { display: block; animation: moodfade 0.5s ease; }
.photorow--moods[data-mood="frozen"] { grid-template-columns: minmax(0, 460px); justify-content: center; }
@keyframes moodfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .photorow--moods .photorow__fig { animation: none !important; } }
.photorow__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.1rem 0.75rem 0.55rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.85);
  background: linear-gradient(to top, rgba(10, 8, 6, 0.78), rgba(10, 8, 6, 0));
}
.roaster__journey { max-width: 46rem; margin-top: 0.5rem; }
@media (max-width: 640px) {
  .photorow { gap: 0.5rem; }
  .photorow__cap { font-size: 0.56rem; letter-spacing: 0.08em; padding: 0.8rem 0.5rem 0.4rem; }
}

/* ---- Find your roast ----------------------------------------------------------------- */
.finder { padding: var(--chapter-gap) var(--pad); }
.finder__card {
  max-width: 1100px; margin: 0 auto;
  border: 1px solid var(--hairline-light); border-radius: 8px;
  background: var(--espresso);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
}
.finder__text { flex: 1; display: flex; flex-direction: column; gap: 0.7rem; }
.finder__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); font-weight: 400; color: var(--cream); }
.finder__sub { font-size: 0.98rem; line-height: 1.6; color: rgba(250, 248, 245, 0.72); }
.finder__chips { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.finder__chip {
  border: 1px solid rgba(250, 248, 245, 0.25); border-radius: 999px;
  padding: 0.45rem 0.95rem; font-size: 0.8rem; color: rgba(250, 248, 245, 0.68);
}
.finder__btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) { .finder__card { flex-direction: column; align-items: flex-start; } }

/* ---- News ------------------------------------------------------------------------------ */
.news { padding: 0 var(--pad) var(--chapter-gap); }
.news__head {
  max-width: var(--container); margin: 0 auto 2rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.news__all { color: rgba(250, 248, 245, 0.7); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s ease; }
.news__all:hover { color: var(--cream); }
.news__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem;
}
.news-card { display: flex; flex-direction: column; gap: 0.7rem; text-decoration: none; }
.news-card__img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px;
  transition: opacity 0.25s ease;
}
.news-card:hover .news-card__img { opacity: 0.85; }
.news-card__date {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.5);
}
.news-card__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; line-height: 1.4; color: var(--cream); transition: color 0.2s ease; }
.news-card:hover .news-card__title { color: rgba(250, 248, 245, 0.8); }
@media (max-width: 860px) { .news__grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  /* Phones: news cards read as a feed, a full-width square photo with the date and title beneath */
  .news__grid { gap: 2rem; }
  .news-card__img { aspect-ratio: 1 / 1; }
}

/* ---- Inner-page kit ------------------------------------------------------------------------ */
.page-hero {
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 5.5rem)) var(--pad) clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--hairline-light);
}

/* Film hero: full-bleed imagery with type on top, the homepage treatment for inner pages */
.page-hero--film {
  position: relative;
  min-height: min(66vh, 680px);
  display: flex; align-items: flex-end;
  padding: 0;
  overflow: hidden;
  background: var(--espresso);
}
.page-hero--film .page-hero__media { position: absolute; inset: 0; }
.page-hero--film .page-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.page-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(10, 8, 6, 0.86) 0%,
      rgba(10, 8, 6, 0.44) 34%,
      rgba(10, 8, 6, 0.12) 58%,
      rgba(10, 8, 6, 0.02) 74%,
      rgba(10, 8, 6, 0.32) 100%);
}
/* A film hero with no scrim (see /visit): the loop plays at full strength, but the fixed header
   still needs a ground to sit on. Measured 1.6:1 nav contrast over the bright river shot with
   nothing behind it. This darkens only the strip behind the header and is gone before the frame's
   subject, so the video itself is untouched. */
.page-hero--bare .page-hero__media::after {
  content: ""; position: absolute; inset: 0 0 auto 0; pointer-events: none;
  height: calc(var(--header-h) * 2);
  background: linear-gradient(to bottom,
    rgba(10, 8, 6, 0.60) 0%,
    rgba(10, 8, 6, 0.34) 50%,
    rgba(10, 8, 6, 0) 100%);
}
.page-hero--film .page-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: calc(var(--header-h) + 3rem) var(--pad) clamp(2.2rem, 6vh, 3.5rem);
}
/* A film hero that carries the pause pill keeps its buttons clear of it on narrow screens. */
.page-hero--film:has(.hero__pause) .page-hero__inner { padding-bottom: clamp(4.75rem, 9vh, 5.5rem); }
@media (max-width: 700px) {
  .page-hero--film:has(.hero__pause) .page-hero__inner { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero--film .kicker, .page-hero--film .page-hero__title,
  .page-hero--film .page-hero__sub, .page-hero--film .chips, .page-hero--film .page-hero__proof {
    opacity: 0; transform: translateY(14px);
    animation: hero-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .page-hero--film .page-hero__title { animation-delay: 0.08s; }
  .page-hero--film .page-hero__sub { animation-delay: 0.16s; }
  .page-hero--film .chips { animation-delay: 0.24s; }
}

/* Full-width image interlude band */
.imageband {
  position: relative; min-height: clamp(300px, 46vh, 480px);
  display: flex; align-items: flex-end; overflow: hidden;
  border-top: 1px solid var(--hairline-light); border-bottom: 1px solid var(--hairline-light);
}
.imageband__media { position: absolute; inset: 0; }
.imageband__media img { width: 100%; height: 100%; object-fit: cover; }
.imageband__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.65) 0%, rgba(10, 8, 6, 0.05) 45%);
}
.imageband__caption {
  position: relative; z-index: 2;
  max-width: var(--container); width: 100%; margin: 0 auto;
  padding: 1.4rem var(--pad);
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.75);
}
.page-hero__inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.kicker {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: rgba(250, 248, 245, 0.55);
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; color: var(--cream);
  max-width: 22ch;
}
.page-hero__sub { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.13rem); line-height: 1.65; color: rgba(250, 248, 245, 0.78); max-width: 40rem; }
.page-hero__proof { font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(250, 248, 245, 0.55); margin-top: 0.9rem; }
.chips { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.chip {
  border: 1px solid rgba(250, 248, 245, 0.25); border-radius: 999px;
  padding: 0.5rem 1rem; font-size: 0.82rem; color: rgba(250, 248, 245, 0.75);
  text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.chip:hover { color: var(--cream); border-color: rgba(250, 248, 245, 0.55); }

.section-pad { padding: var(--chapter-gap) var(--pad); }
.section-inner { max-width: var(--container); margin: 0 auto; }

/* Expanded item index (blends on /coffee, drinks on /drinks) */
.xindex { display: flex; flex-direction: column; }
.xindex__row {
  display: grid; grid-template-columns: 280px 1fr 200px; gap: 2.5rem;
  padding: 1.9rem 0; border-top: 1px solid rgba(250, 248, 245, 0.15);
  align-items: start; scroll-margin-top: calc(var(--header-h) + 12px);
}
.xindex__row:first-of-type { border-top-color: rgba(250, 248, 245, 0.35); }
.xindex__row:last-of-type { border-bottom: 1px solid rgba(250, 248, 245, 0.35); }
.xindex__row--plain { grid-template-columns: 280px 1fr; }
.xindex__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--cream); }
.xindex__type {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.5); margin-top: 0.3rem;
}
.xindex__tag { font-size: 1rem; font-weight: 600; color: rgba(250, 248, 245, 0.9); margin-bottom: 0.45rem; }
.xindex__body { font-size: 0.92rem; line-height: 1.65; color: rgba(250, 248, 245, 0.65); }
.xindex__watch { display: inline-block; margin-top: 0.55rem; font-size: 0.85rem; color: rgba(250, 248, 245, 0.55); text-decoration: none; transition: color 0.2s ease; }
.xindex__watch:hover { color: var(--cream); }
.xindex__buy { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; }
.xindex__price { font-size: 1.05rem; color: var(--cream); }
.xindex__more { font-size: 0.85rem; font-weight: 600; color: rgba(250, 248, 245, 0.6); text-decoration: none; transition: color 0.2s ease; }
.xindex__more:hover { color: var(--cream); }
@media (max-width: 900px) {
  .xindex__row, .xindex__row--plain { grid-template-columns: 1fr; gap: 0.8rem; }
  .xindex__buy { flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* Film band: click-to-play facade */
.film { position: relative; min-height: 540px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1px solid var(--hairline-light); border-bottom: 1px solid var(--hairline-light); }
.film__media { position: absolute; inset: 0; }
.film__media img { width: 100%; height: 100%; object-fit: cover; }
.film__media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 6, 0.55); }
.film__facade {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  background: none; border: 0; cursor: pointer; color: var(--cream); padding: 4rem var(--pad);
  font-family: var(--font-sans); text-align: center; width: 100%;
}
.film__play {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(12, 10, 8, 0.6); border: 1.5px solid rgba(250, 248, 245, 0.65);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.film__facade:hover .film__play { border-color: var(--cream); transform: scale(1.05); }
.film__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem); font-weight: 400; letter-spacing: 0; text-shadow: 0 2px 30px rgba(12, 10, 8, 0.8); }
.film__note { font-size: 0.9rem; color: rgba(250, 248, 245, 0.75); }
.film.is-playing { display: block; min-height: 0; border: 0; }
.film.is-playing .film__media, .film.is-playing .film__facade { display: none; }
.film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.transcript { max-width: var(--container); margin: 1.5rem auto 0; color: rgba(250, 248, 245, 0.65); }
.transcript summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: rgba(250, 248, 245, 0.75); padding: 0.5rem 0; }
.transcript p { font-size: 0.92rem; line-height: 1.7; padding: 0.6rem 0 1rem; max-width: 62rem; }

/* Split band (media + text) */
.split { display: flex; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; max-width: var(--container); margin: 0 auto; }
.split--flip { flex-direction: row-reverse; }
.split__media { flex: 0 0 min(42%, 520px); }
.split__media img { width: 100%; height: auto; border-radius: 6px; }
.split__inset {
  width: min(240px, 55%); height: auto; border-radius: 4px;
  border: 1px solid rgba(250, 248, 245, 0.22);
  margin: -3.2rem 0 0 auto; position: relative; display: block;
}
.split__text { flex: 1; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.split__body { font-size: 1rem; line-height: 1.7; color: rgba(250, 248, 245, 0.8); }
.split__aside { font-size: 0.95rem; line-height: 1.7; color: rgba(250, 248, 245, 0.62); }
@media (max-width: 860px) { .split, .split--flip { flex-direction: column; align-items: stretch; } .split__media { flex: none; } }

/* FAQ answer blocks (visible, crawlable) */
/* Embedded Google map, tinted to sit inside the dark theme */
.map-embed {
  position: relative; overflow: hidden;
  border-radius: 6px; border: 1px solid rgba(250, 248, 245, 0.16);
  aspect-ratio: 16 / 7; background: #0c0a08;
}
.map-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: invert(0.9) hue-rotate(180deg) saturate(0.55) brightness(0.95) contrast(0.92);
}
@media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 3; } }

/* Fold-down FAQ accordion (homepage) */
.faq-fold { border-top: 1px solid rgba(250, 248, 245, 0.15); }
.faq-fold__item { border-bottom: 1px solid rgba(250, 248, 245, 0.15); }
.faq-fold__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; padding: 1.15rem 0; list-style: none;
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; color: var(--cream);
  transition: color 0.2s ease;
}
.faq-fold__item summary::-webkit-details-marker { display: none; }
.faq-fold__item summary::marker { content: none; }
.faq-fold__item summary:hover { color: rgba(250, 248, 245, 0.75); }
.faq-fold__item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.faq-fold__chev { flex: none; color: rgba(250, 248, 245, 0.5); transition: transform 0.25s ease; }
.faq-fold__item[open] .faq-fold__chev { transform: rotate(45deg); }
.faq-fold__a { padding: 0 0 1.35rem; font-size: 0.95rem; line-height: 1.68; color: rgba(250, 248, 245, 0.68); max-width: 56rem; }

.faq { display: flex; flex-direction: column; }
.faq__item { padding: 1.4rem 0; border-top: 1px solid rgba(250, 248, 245, 0.15); display: flex; flex-direction: column; gap: 0.5rem; }
.faq__item:last-child { border-bottom: 1px solid rgba(250, 248, 245, 0.15); }
.faq__q { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; color: var(--cream); }
.faq__a { font-size: 0.95rem; line-height: 1.68; color: rgba(250, 248, 245, 0.65); max-width: 56rem; }

/* Prose (about, articles, legal) */
.prose { max-width: 46rem; display: flex; flex-direction: column; gap: 1.1rem; }
.prose img { height: auto; }
.prose p { font-size: 1.02rem; line-height: 1.75; color: rgba(250, 248, 245, 0.8); }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; color: var(--cream); margin-top: 1rem; }
.prose a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(250, 248, 245, 0.4); }
.prose a:hover { text-decoration-color: var(--red); }

/* Timeline (about) */
.timeline { display: flex; flex-direction: column; max-width: 46rem; }
.timeline__row { display: grid; grid-template-columns: 90px 1fr; gap: 1.8rem; padding: 1.1rem 0; border-top: 1px solid rgba(250, 248, 245, 0.15); }
.timeline__row:last-child { border-bottom: 1px solid rgba(250, 248, 245, 0.15); }
.timeline__year { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--red); }
.timeline__text { font-size: 0.95rem; line-height: 1.65; color: rgba(250, 248, 245, 0.75); }

/* Photo grid (about gallery) */
.photogrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.photogrid picture { display: block; min-width: 0; }
.photogrid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
@media (max-width: 700px) {
  .photogrid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .photogrid img { aspect-ratio: 1 / 1; }
  .photorow:not(.photorow--menu) { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .photorow:not(.photorow--menu) .photorow__fig img { aspect-ratio: 1 / 1; }
}

/* ---- Closing CTA (the peak at the end) --------------------------------------------------- */
.closer {
  padding: clamp(5rem, 12vh, 8.5rem) var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  text-align: center;
  border-top: 1px solid var(--hairline-light);
}
.closer__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 400; letter-spacing: -0.01em; color: var(--cream);
}
.closer__note { font-size: 0.85rem; color: rgba(250, 248, 245, 0.55); }

/* ---- Footer ------------------------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--hairline-light);
  background: var(--espresso-deep);
  padding: clamp(3rem, 7vh, 4rem) var(--pad) 6.5rem;
}
.footer__grid {
  max-width: var(--container); margin: 0 auto 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem;
}
.footer__lockup { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.footer__lockup img { width: 30px; height: 30px; border-radius: 3px; object-fit: cover; }
.footer__wordmark { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.footer__tagline { font-size: 0.88rem; line-height: 1.6; color: rgba(250, 248, 245, 0.6); max-width: 240px; }
.footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer__heading {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 248, 245, 0.6); margin-bottom: 0.3rem;
}
.footer__link { color: rgba(250, 248, 245, 0.7); text-decoration: none; font-size: 0.9rem; transition: color 0.2s ease; }
.footer__link:hover { color: var(--cream); }
.footer__bottom {
  max-width: var(--container); margin: 0 auto;
  border-top: 1px solid rgba(250, 248, 245, 0.1); padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: rgba(250, 248, 245, 0.6);
}
.footer__legal { display: flex; gap: 1.5rem; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---- Sticky mobile order bar -------------------------------------------------- */
.mobile-order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0.75rem var(--pad) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(42, 42, 42, 0.12);
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.mobile-order-bar.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .mobile-order-bar { transition: none; } }
@media (min-width: 761px) { .mobile-order-bar { display: none; } }

/* Footer email capture (posts to the CoreRail forms Worker; see hero.js) */
.footer-signup { margin-top: 1.2rem; max-width: 22rem; position: relative; }
.footer-signup__label { display: block; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250, 248, 245, 0.62); margin-bottom: 0.55rem; }
.footer-signup__row { display: flex; gap: 0.5rem; }
.footer-signup__input { flex: 1; min-width: 0; background: rgba(250, 248, 245, 0.06); border: 1px solid rgba(250, 248, 245, 0.24); color: var(--cream); padding: 0.58rem 0.75rem; border-radius: 4px; font: inherit; font-size: 0.88rem; }
.footer-signup__input::placeholder { color: rgba(250, 248, 245, 0.38); }
.footer-signup__btn { font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; color: var(--espresso); background: var(--cream); border: 0; border-radius: 4px; padding: 0.58rem 0.95rem; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
.footer-signup__btn:hover { background: var(--red); color: var(--cream); }
.footer-signup__btn[disabled] { opacity: 0.6; cursor: default; }
.footer-signup__status { font-size: 0.82rem; color: rgba(250, 248, 245, 0.78); margin-top: 0.5rem; min-height: 1.1em; }
.footer-signup__fine { font-size: 0.74rem; line-height: 1.5; color: rgba(250, 248, 245, 0.6); margin-top: 0.35rem; }
.footer-signup__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Bayou Beast (seasonal, mid-July through Halloween) ------------------- */
/* Found-footage monitor over swamp fog. hero.js hides every [data-beast] block
   after Halloween or when BAYOU_BEAST_SEASON is false. */
.beast { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline-light); background: radial-gradient(120% 90% at 78% 40%, #0c4a30 0%, #06281c 38%, #0c0a08 74%); }
.beast[hidden] { display: none; }
.beast__fog { position: absolute; inset: -20% -10%; pointer-events: none; background: radial-gradient(60% 40% at 30% 70%, rgba(52, 209, 125, 0.16) 0%, rgba(52, 209, 125, 0) 70%); }
.beast__fog--2 { background: radial-gradient(45% 35% at 70% 30%, rgba(234, 255, 243, 0.10) 0%, rgba(234, 255, 243, 0) 70%); }
.beast__vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 10, 8, 0.85) 0%, rgba(12, 10, 8, 0) 22%, rgba(12, 10, 8, 0) 78%, rgba(12, 10, 8, 0.9) 100%); }
.beast__inner { position: relative; max-width: var(--container); margin: 0 auto; padding: var(--chapter-gap) var(--pad); display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4rem); }
.beast__monitor { flex: 0 0 min(36%, 420px); position: relative; border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; box-shadow: 0 0 0 1px rgba(250, 248, 245, 0.14), 0 40px 80px rgba(0, 0, 0, 0.6); }
.beast__monitor picture { display: contents; }
.beast__monitor img, .beast__monitor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.1); }
.beast__monitor video { opacity: 0; transition: opacity 0.6s ease; }
.beast__monitor video.is-playing { opacity: 1; }
.beast__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0.22) 3px, rgba(0, 0, 0, 0.22) 4px); }
.beast__glass { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 80% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%); }
.beast__roll { position: absolute; top: 0; left: 0; right: 0; height: 90px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 100%); }
.beast__hud { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); pointer-events: none; }
.beast__hud--top { top: 16px; }
.beast__hud--bottom { bottom: 16px; font-size: 0.66rem; font-weight: 500; color: rgba(250, 248, 245, 0.75); }
.beast__rec { display: inline-flex; align-items: center; gap: 8px; }
.beast__rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(174, 52, 44, 0.9); }
.beast__timecode { font-variant-numeric: tabular-nums; }
.beast__pause {
  position: absolute; right: 14px; bottom: 44px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(250, 248, 245, 0.35); background: rgba(12, 10, 8, 0.55);
  color: var(--cream); cursor: pointer; padding: 0;
}
.beast__pause:hover { border-color: rgba(250, 248, 245, 0.7); }
.beast__pause[hidden] { display: none; }
.beast__pause-icon--play { display: none; }
.beast__pause[aria-pressed="true"] .beast__pause-icon--pause { display: none; }
.beast__pause[aria-pressed="true"] .beast__pause-icon--play { display: inline; }
.beast__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 1.25rem; }
.beast__kicker { color: #34d17d; }
.beast__title { max-width: 14ch; }
.beast__timer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.beast__unit { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; border: 1px solid var(--hairline-light); border-radius: 4px; background: rgba(6, 40, 28, 0.35); }
.beast__num { font-family: var(--font-display); font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--cream); font-variant-numeric: tabular-nums; }
.beast__label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(234, 255, 243, 0.62); }
.beast__log { display: flex; flex-direction: column; border-top: 1px solid var(--hairline-light); }
.beast__log-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(250, 248, 245, 0.12); font-size: 0.92rem; }
.beast__log-key { flex: 0 0 auto; color: rgba(250, 248, 245, 0.62); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; }
.beast__log-val { color: var(--cream); text-align: right; }
.beast__log-val--live { color: #34d17d; }
.beast__actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.beast__proof { font-size: 0.82rem; color: rgba(250, 248, 245, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .beast__fog { animation: beastFog 18s ease-in-out infinite; }
  .beast__fog--2 { animation: beastFog2 24s ease-in-out infinite; }
  .beast__monitor { animation: beastGlitch 9s linear infinite; }
  .beast__roll { animation: beastRoll 6s linear infinite; }
  .beast__rec-dot { animation: beastRec 1.2s steps(1) infinite; }
}
@keyframes beastFog { 0% { transform: translateX(-6%) translateY(0); } 50% { transform: translateX(4%) translateY(-3%); } 100% { transform: translateX(-6%) translateY(0); } }
@keyframes beastFog2 { 0% { transform: translateX(5%) translateY(2%); } 50% { transform: translateX(-5%) translateY(-2%); } 100% { transform: translateX(5%) translateY(2%); } }
@keyframes beastGlitch { 0%, 92%, 100% { transform: translate(0, 0); filter: none; } 93% { transform: translate(-3px, 1px); filter: hue-rotate(20deg); } 95% { transform: translate(3px, -1px); } 97% { transform: translate(-1px, 2px); filter: hue-rotate(-15deg); } }
@keyframes beastRoll { 0% { transform: translateY(-100%); } 100% { transform: translateY(600%); } }
@keyframes beastRec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
@media (max-width: 860px) {
  .beast__inner { flex-direction: column; align-items: stretch; }
  .beast__monitor { flex: none; width: min(100%, 360px); margin: 0 auto; }
  .beast__title { max-width: none; }
  .beast__timer { gap: 0.6rem; }
  .beast__unit { padding: 0.9rem 0.9rem; }
  .beast__log-row { flex-direction: column; gap: 0.2rem; }
  .beast__log-val { text-align: left; }
}

/* Two-up form fields stack on phones */
@media (max-width: 600px) { .form-2col { grid-template-columns: minmax(0, 1fr) !important; } }

/* Index rows with a photo per item (drinks page, coffee page) */
.xindex--photos .xindex__row { grid-template-columns: 128px 280px 1fr 200px; align-items: center; }
.xindex--photos .xindex__row--plain { grid-template-columns: 128px 280px 1fr; align-items: center; }
.xindex__pic { width: 128px; height: 128px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(250, 248, 245, 0.16); background: var(--espresso); }
.xindex__pic picture { display: block; width: 100%; height: 100%; }
.xindex__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  /* Phones: the photo goes full width and square, the words sit under it, like a feed */
  .xindex--photos .xindex__row, .xindex--photos .xindex__row--plain { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; align-items: start; }
  .xindex--photos .xindex__pic { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* Made by CoreRail credit ---------------------------------------------- */
.corerail-credit {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
  color: rgba(250, 248, 245, 0.72);
  margin-top: 2rem;
}
.corerail-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  color: inherit;
}
.corerail-badge:hover .corerail-badge__label,
.corerail-badge:focus-visible .corerail-badge__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.corerail-badge__label {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.corerail-badge__art {
  height: 1.3em;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.corerail-credit [fill="#6B7F5E"] { fill: var(--corerail-sage, #6B7F5E); }
/* ---------------------------------------------------------------------- */