:root {
  --coffee-black: #150f0c;
  --coffee-black-soft: #1d1512;
  --coffee-cream: #f6efe4;
  --coffee-tan: #c8a876;
  --coffee-tan-dim: #a98c62;
  --coffee-brown: #6b4226;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--coffee-black);
  color: var(--coffee-cream);
  font-family: var(--font-body);
  /* Native smooth-scroll physics only -- no scroll-hijacking library, so
     trackpad/wheel/touch momentum stays exactly what the OS gives it and
     the rAF loop simply samples wherever that momentum has taken us. */
  scroll-behavior: smooth;
  /* No overflow-x:hidden backstop here on purpose: setting overflow-x to
     anything but "visible" on html/body forces overflow-y's computed value
     to "auto" too (CSS Overflow spec), which turns them into their own
     scroll container and breaks position:sticky for every descendant --
     .hero-sticky included, which is load-bearing for the whole hero. The
     actual horizontal-scroll source (100vw including the scrollbar gutter)
     is fixed at the root in coffee-hero.css/canvas-renderer.js instead. */
}

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }
}

img {
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   Shared container: every section (header, hero, journey, footer) insets
   its content through this width, never through ad-hoc padding -- that
   keeps the left/right rhythm identical across the whole page and avoids
   padding stacking on top of it on mobile.
--------------------------------------------------------------------- */
.container {
  width: 87%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}

/* ---------------------------------------------------------------------
   The Journey of the Bean -- brand story section following the hero.
--------------------------------------------------------------------- */
.journey {
  position: relative;
  /* Vertical spacing only -- horizontal inset comes from .journey-inner's
     .container class, not padding here. */
  padding: 7rem 0 8rem;
  background:
    linear-gradient(180deg, var(--coffee-black) 0%, rgba(21, 15, 12, 0.86) 28%, rgba(21, 15, 12, 0.93) 100%),
    url('../bg.jpg') center 30% / cover no-repeat;
}

.journey-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--coffee-tan);
  margin: 0 0 1rem;
}

.journey-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  max-width: 34rem;
}

.journey-lede {
  color: #d8cec0;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 34rem;
  margin: 0 0 4rem;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  border-top: 1px solid rgba(200, 168, 118, 0.22);
  padding-top: 3rem;
}

.journey-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0 0 0.75rem;
  color: var(--coffee-tan);
}

.journey-card p {
  color: #c9beb0;
  line-height: 1.65;
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* Footer styling now lives in css/site-footer.css -- it grew from a single
   copyright line into a full multi-column footer, big enough to earn its
   own file like every other major section. */

/* ---------------------------------------------------------------------
   Anchor-nav offset: every top-level section is a real `#id` target now
   (header nav, footer nav), and the header is `position: fixed` -- without
   this, jumping to a section tucks its first ~80px behind the header
   instead of just under it.
--------------------------------------------------------------------- */
section[id] {
  scroll-margin-top: 100px;
}

/* ---------------------------------------------------------------------
   Shared scroll-reveal -- any element with `data-reveal` fades/slides in
   the first time it crosses into view (see js/scroll-reveal.js's one-shot
   IntersectionObserver). Used by the newer static sections (Roasts,
   Testimonials, Brewing Guide, Contact) instead of each duplicating its
   own IntersectionObserver, the way ProductsSection.js's bespoke one does
   for its cards' pointer-tilt-driven reveal. Per-item stagger, where
   wanted, is set inline via `style="transition-delay: ..."` in the markup.
--------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Small gold-dot spec list -- the same marker style AboutSection's side
   panels use for their details list, generalized here so Roasts and
   Brewing Guide don't each redefine it.
--------------------------------------------------------------------- */
.dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dot-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: #c9beb0;
}

.dot-list li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e3c393, #b8894f);
}