:root {
  /* Warm, light palette -- the reference's dark olive is deliberately not used. */
  --cream: #faf4ea;
  --cream-deep: #f2e7d6;
  --frosting: #fffdf9;
  --caramel: #c98b42;
  --cinnamon: #8a5a33;
  --cinnamon-dark: #5c3a1e;
  --ink: #2e1c0f;

  /* Depth on a light background comes from warm, soft shadows. */
  --shadow-soft: 0 10px 30px -12px rgba(92, 58, 30, 0.28);
  --shadow-lift: 0 26px 50px -18px rgba(92, 58, 30, 0.38);

  /* Fluid type scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.25rem + 1vw, 2.25rem);
  --step-3: clamp(1.73rem, 1.4rem + 1.8vw, 3.38rem);
  --step-5: clamp(2.99rem, 1.8rem + 6vw, 8rem);

  --measure: 62ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  color: var(--cinnamon-dark);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}

.section {
  padding: clamp(4rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem);
  max-width: 1400px;
  margin-inline: auto;
}

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinnamon);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Hero
   Proportions are measured off the reference: product ~55% of viewport height,
   flavor cards ~25%. Sizing is in vh (not vw) so the relationship between the
   roll and the cards holds as the window changes shape.
   --------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem);
}

.wordmark {
  font-family: 'Fraunces', serif;
  font-size: var(--step-1);
  color: var(--cinnamon-dark);
  text-decoration: none;
}

/* Five icon buttons in a floating pill, as in the reference. */
.nav-pill {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.6vw, 0.4rem);
  padding: 0.35rem;
  background: rgba(255, 253, 249, 0.78);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.nav-pill a,
.nav-pill button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cinnamon);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.nav-pill svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.nav-pill a:hover,
.nav-pill button:hover { background: var(--cream-deep); transform: translateY(-1px); }

/* The cart sits highlighted at the end of the pill, like the reference. */
.nav-cart { background: var(--cinnamon-dark) !important; color: var(--frosting) !important; }
.nav-cart:hover { background: var(--ink) !important; }

.ig-button {
  padding: 0.6rem 1.1rem;
  background: var(--cinnamon-dark);
  color: var(--frosting);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-content: center;
  overflow: clip;
  background:
    radial-gradient(120% 80% at 50% 42%, var(--frosting) 0%, var(--cream) 48%, var(--cream-deep) 100%);
  /* Clear the fixed topbar so the flavour name never sits under the nav pill. */
  padding-top: 5.5rem;
  /* The headline is in flow now, so the hero just needs breathing room at the
     bottom rather than a reserved band. */
  padding-bottom: 2rem;
}

/* Its own 3D context, so cards tip without forcing page layout. */
.hero-arc {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Cards are ~25% of viewport height and deliberately overflow the screen
   edges, so the arc reads as continuing past the frame. */
.arc-card {
  position: absolute;
  /* Set from JS to the product's actual centre; the literal is only a
     pre-paint fallback. */
  top: var(--arc-y, 46%);
  left: 50%;
  width: 31vh;
  height: 31vh;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  background: var(--frosting);
  border-radius: 24%;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.3s, outline-color 0.2s;
  outline: 2px solid transparent;
  outline-offset: 4px;
}

.arc-card img { width: 62%; height: auto; }

.arc-card-label {
  font-size: clamp(0.6rem, 1.5vh, 0.85rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinnamon);
}

.arc-card:hover { box-shadow: var(--shadow-lift); }
.arc-card:focus-visible { outline-color: var(--caramel); }
.arc-card.is-selected { box-shadow: var(--shadow-lift); }
.arc-card.is-seasonal .arc-card-label { color: var(--caramel); font-weight: 600; }

.hero-stage {
  position: relative;
  z-index: 10;
  display: grid;
  justify-items: center;
}

/* The product: ~55% of viewport height, the anchor of the whole screen. */
.hero-rolls {
  position: relative;
  z-index: 1;
  width: 55vh;
  height: 55vh;
  max-width: 92vw;
}

.hero-roll {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity, transform;
}

.hero-roll.is-active { opacity: 1; }

/* Name sits ABOVE the roll now -- below, it competed with the pill and the
   headline for the same band of space. */
.hero-flavor {
  font-family: 'Fraunces', serif;
  font-size: var(--step-3);
  color: var(--cinnamon-dark);
  margin: 0 0 0.15em;
  text-align: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.5rem 0.5rem 1.2rem;
  /* Pulled up so it overlaps the lower part of the product, as in the
     reference, instead of pushing the layout taller. Must sit ABOVE the roll
     in the stack or the product simply hides it. */
  margin-top: -6vh;
  position: relative;
  z-index: 3;
  background: var(--frosting);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
}

.hero-price { font-weight: 600; color: var(--cinnamon-dark); }

.hero-order {
  padding: 0.6rem 1.4rem;
  background: var(--cinnamon-dark);
  color: var(--frosting);
  border-radius: 999px;
  text-decoration: none;
}

/* Sits in normal flow directly beneath the price pill. It used to be pinned
   to the bottom of the viewport and run behind the product, but at desktop
   sizes the pill landed on top of the words, and on phones the headline was
   stranded far below everything else. In flow it stays tight to the pill at
   every size. */
.hero-headline {
  position: static;
  z-index: 1;
  margin: 1.2rem 0 0;
  max-width: 96vw;
  text-align: center;
  font-size: clamp(2.3rem, 1.4rem + 4.2vw, 5rem);
  line-height: 0.94;
  color: var(--cinnamon-dark);
  opacity: 0.92;
  pointer-events: none;
}

/* Keyboard access to the arc. Visually hidden until focused -- never
   display:none, which would drop them from the tab order. */
.arc-controls {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.arc-controls:focus-within {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.arc-controls button {
  font: inherit;
  font-size: var(--step--1);
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--cinnamon-dark);
  color: var(--frosting);
  cursor: pointer;
}

@media (max-width: 767px) {
  /* Roll drops to ~40% so the nav, name, pill and headline all still fit. */
  /* A 375px screen cannot fit desktop-sized cards beside the product: they
     end up tucked behind it with their labels clipped. Both shrink here so
     each card sits fully on screen with its label readable. */
  .hero-rolls { width: 28vh; height: 28vh; }
  /* Lifted above the roll's widest band: at the shared centre line the
     product overlapped each card's lower half, clipping its label. */
  .arc-card { width: 15vh; height: 15vh; border-radius: 26%; box-shadow: 0 8px 18px -8px rgba(92, 58, 30, 0.3); }
  .nav-pill { gap: 0.05rem; padding: 0.25rem; }
  .nav-pill a, .nav-pill button { width: 2.1rem; height: 2.1rem; }
  .nav-pill svg { width: 1.05rem; height: 1.05rem; }
  .wordmark { font-size: var(--step-0); }
  .ig-button { display: none; }
  .hero-headline { font-size: clamp(1.7rem, 6.4vw, 2.6rem); max-width: 92vw; margin-top: 1rem; }
  .hero { padding-top: 4.5rem; padding-bottom: 1.5rem; }
  .hero-pill { margin-top: -4vh; }
}


.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  perspective: 1000px;
  margin-top: 2.5rem;
}

.menu-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--frosting);
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s;
  transform-origin: 50% 100%;
}

.menu-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

.menu-card h3 { font-size: var(--step-1); margin-bottom: 0.35em; }

.menu-price {
  font-size: var(--step-2);
  font-family: 'Fraunces', serif;
  color: var(--caramel);
  margin: 0 0 0.4em;
}

.menu-note-sm { color: var(--cinnamon); font-size: var(--step--1); margin: 0; }

.menu-note {
  margin-top: 2.5rem;
  max-width: var(--measure);
  color: var(--cinnamon);
  font-size: var(--step--1);
}

/* The tipped-back start state applies ONLY once we know scripting is alive
   (the inline head script sets .js, and main.js removes it again if GSAP
   failed to load). Without this gate, a blocked CDN would leave the whole
   menu invisible -- a far worse outcome than no animation. */
/* Only opacity here. The tipped start transform is supplied by gsap.fromTo,
   which writes it inline when the trigger fires; declaring it in CSS as well
   left the cards stuck tipped after the reveal, because this rule kept
   winning over GSAP's inline transform. */
.js .menu-card {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Must match the .js gate's specificity (0,2,0) or it loses and the cards
     stay at opacity 0, leaving reduced-motion users with a blank section. */
  .js .menu-card { opacity: 1; transform: none; }
  .menu-card:hover { transform: none; }
}