/* ==========================================================================
   Bitejoy — design tokens
   ========================================================================== */
:root {
  /* palette */
  --yellow:  #FED97C;
  --peach:   #FFC2B0;
  --red:     #F04521;
  --ink:     #000000;
  --cream:   #F8E4E4;
  --plum:    #1A1616;
  --paper:   #FFFFFF;

  /* type */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-script:  "Chewy", "Comic Sans MS", cursive;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --step-3:  clamp(2.4rem, 1.4rem + 4.6vw, 5rem);
  --step-4:  clamp(3rem, 1.2rem + 8.4vw, 8.5rem);

  /* space */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1440px;

  /* shape */
  --r-sm: 10px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --stroke: 3px;
  --shadow: 5px 6px 0 var(--ink);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* ==========================================================================
   fonts
   ========================================================================== */
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chewy"; src: url("fonts/chewy.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ==========================================================================
   reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.splash-lock { overflow: hidden; }

/* ==========================================================================
   splash
   ========================================================================== */
#splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--red);
  transform: translate3d(0, 0, 0);
  transition: transform 0.9s var(--ease);
}
#splash.is-done { transform: translate3d(0, -101%, 0); }

#splash .inner { display: grid; gap: 1.5rem; justify-items: center; }

#splash .bar {
  width: min(46vw, 320px);
  height: 8px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
#splash .bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s linear;
}
#splash .count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   scroll progress
   Scroll-driven where supported, so it costs no JS and no scroll listener.
   Browsers without animation-timeline simply never paint it.
   ========================================================================== */
.progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 150;
  height: 4px;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear;
    animation-timeline: scroll();
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* ==========================================================================
   logo
   ========================================================================== */
.logo {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.logo em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.15em;
  color: var(--red);
  /* the script cut is drawn lowercase — uppercasing it kills the bubble shape */
  text-transform: none;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  margin-left: 0.08em;
}
.logo--xl { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); }
.logo--light { color: var(--paper); }
.logo--light em { -webkit-text-stroke: 2px var(--paper); }

/* ==========================================================================
   header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.85rem, 2vw, 1.6rem) var(--gutter);
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s var(--ease);
}
.site-header.is-hidden { transform: translate3d(0, -130%, 0); }

.site-header__actions { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }

.cart { position: relative; display: grid; place-items: center; }
.cart svg { fill: currentColor; }
.cart__badge {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  background: var(--red);
  border-radius: var(--r-pill);
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.55rem 0.5rem 1.15rem;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.menu-toggle:hover { transform: translate3d(-2px, -2px, 0); box-shadow: 5px 6px 0 var(--ink); }
.menu-toggle:active { transform: translate3d(1px, 2px, 0); box-shadow: 1px 1px 0 var(--ink); }

.menu-toggle__label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-toggle__bun {
  display: grid;
  gap: 3px;
  align-content: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
}
.menu-toggle__bun i {
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bun i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bun i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bun i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   nav overlay
   ========================================================================== */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: 6rem var(--gutter) 3rem;
  background: var(--red);
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.6s var(--ease), opacity 0.3s linear;
}
.nav-panel.is-open { opacity: 1; transform: translate3d(0, 0, 0); }

.nav-panel__list { display: grid; gap: clamp(0.25rem, 1vw, 0.75rem); }
.nav-panel__list a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1rem + 7vw, 6rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transform: translate3d(0, 60%, 0);
  transition: transform 0.55s var(--ease), opacity 0.4s linear, color 0.2s linear;
}
.nav-panel.is-open .nav-panel__list a { opacity: 1; transform: translate3d(0, 0, 0); }
.nav-panel.is-open li:nth-child(1) a { transition-delay: 0.10s; }
.nav-panel.is-open li:nth-child(2) a { transition-delay: 0.16s; }
.nav-panel.is-open li:nth-child(3) a { transition-delay: 0.22s; }
.nav-panel.is-open li:nth-child(4) a { transition-delay: 0.28s; }
.nav-panel.is-open li:nth-child(5) a { transition-delay: 0.34s; }
.nav-panel__list a:hover { color: var(--yellow); }

.nav-panel__social { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.nav-panel__social a {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s linear;
}
.nav-panel__social a:hover { border-color: var(--paper); }

/* ==========================================================================
   headings
   ========================================================================== */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  max-width: 16ch;
  margin-inline: auto;
}
.section-heading--left { text-align: left; margin-inline: 0; }
.section-heading em {
  display: inline-block;
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.16em;
  line-height: 0.9;
  text-transform: none;
  color: var(--red);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  transform: rotate(-2deg);
  vertical-align: -0.06em;
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  /* The tilt pushes the tiles past their layout box, so the bottom padding is
     clearance for the transform — `overflow: hidden` clips at the padding box
     and is what keeps the 190%-wide row from widening the document. */
  padding: clamp(7rem, 14vw, 11rem) var(--gutter) clamp(2rem, 5vw, 5rem);
  overflow: hidden;
}

.hero__heading {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-align: center;
}
.hero__heading .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__heading .word {
  display: inline-block;
  transform: translate3d(0, 105%, 0) rotate(4deg);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.5s linear;
}
.is-ready .hero__heading .word { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
.is-ready .hero__heading .word:nth-of-type(1) { transition-delay: 0.05s; }
.is-ready .hero__heading .word:nth-of-type(2) { transition-delay: 0.12s; }
.is-ready .line:last-child .word:nth-of-type(1) { transition-delay: 0.19s; }
.is-ready .line:last-child .word:nth-of-type(2) { transition-delay: 0.26s; }

.hero__heading .word--script {
  font-family: var(--font-script);
  font-size: 1.14em;
  text-transform: none;
  color: var(--red);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
}

/* ── 3D carousel ──────────────────────────────────────────────────────────
   N cards evenly spaced around a cylinder, --step degrees apart.

   Radius is a ratio of card width so the ring rescales as one piece. The
   edge-to-edge fit is the circumscribing radius W/(2·tan(π/N)) — at that value
   the cards touch and it reads as a solid wall, so the builder multiplies it by
   a slack factor (default 1.124) to open gaps between neighbours. Both --step
   and --ring-ratio are written by build.py from the card count. */
.stage {
  --card-w: clamp(13rem, 24vw, 22rem);
  --card-h: calc(var(--card-w) * var(--card-ratio, 0.818));
  --radius: calc(var(--card-w) * var(--ring-ratio, 1.545));
  --step: 40deg;
  --spin: 44s;

  display: flex;
  justify-content: center;
  align-items: center;
  /* Perspective scales the nearest card up by roughly 2000/(2000−radius), and
     the tilt drops the far half below it, so the ring paints outside its
     layout box and needs headroom or the hero's overflow clips it.

     Both terms matter: magnification scales with card height, the tilt drop
     scales with radius. A flat multiple of card height alone over-reserves for
     portrait cards (leaving a dead gap) and under-reserves for wide ones. */
  height: calc(var(--card-h) * 1.5 + var(--radius) * 0.2);
  margin-top: clamp(0.5rem, 1vw, 1rem);
  perspective: 2000px;
  perspective-origin: 50% 50%;
}

.ring-tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.9s var(--ease);
}
.is-tracking .ring-tilt { transition: transform 0.25s linear; }

.ring {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
  animation: ring-spin var(--spin) linear infinite;
}
/* Pausing beats unsetting the animation — the ring holds its current angle
   instead of snapping back to zero when the hero scrolls out of view. */
.ring.is-paused { animation-play-state: paused; }

@keyframes ring-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}

.card3d {
  position: absolute;
  inset: 0;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--peach);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));
  opacity: 0;
  transition: opacity 0.6s linear calc(0.35s + var(--i) * 0.05s);
}
.is-ready .card3d { opacity: 1; }

.card3d__media { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
   curved section arcs
   ========================================================================== */
.arc { position: absolute; left: 0; width: 100%; height: clamp(40px, 6vw, 90px); }
/* Fill and outline are separate paths on purpose: stroking the closed shape
   also draws its straight closing edge, which reads as a stray rule across
   the page. Only the curve itself is stroked. */
.arc__fill { fill: var(--peach); stroke: none; }
.arc__edge { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.arc--top { top: 0; transform: translateY(-99%); }
.arc--bottom { bottom: 0; transform: translateY(99%); }
.arc--footer { top: 0; transform: translateY(-99%); }
.arc--footer path { fill: var(--plum); stroke: none; }

/* ==========================================================================
   menu
   ========================================================================== */
.menu {
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section-y);
  background: var(--peach);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
}
.tab {
  padding: 0.6rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  border: var(--stroke) solid rgba(0, 0, 0, 0.25);
  border-radius: var(--r-pill);
  transition: transform 0.25s var(--ease), background-color 0.25s linear,
              color 0.25s linear, border-color 0.25s linear, box-shadow 0.25s var(--ease);
}
.tab:hover { color: var(--ink); border-color: var(--ink); transform: translate3d(0, -2px, 0); }
.tab.is-active {
  color: var(--ink);
  background: var(--yellow);
  border-color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
}

/* Fixed 3-up rather than auto-fit: the burger tab holds exactly six items and
   a 4-column track leaves a two-card orphan row. */
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 1180px;
  margin-inline: auto;
}
.products[hidden] { display: none; }
.products.is-switching .card { opacity: 0; transform: translate3d(0, 14px, 0); }

.card { position: relative; }
.card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover img { transform: translate3d(-3px, -4px, 0); box-shadow: 8px 10px 0 var(--ink); }

.card__price {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--r-sm);
}
.card h3 {
  margin-top: 0.8rem;
  font-size: var(--step-0);
  font-weight: 600;
}

/* ==========================================================================
   reviews
   ========================================================================== */
.reviews { padding: var(--section-y) var(--gutter); }

.reviews__stage {
  position: relative;
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
}
.reviews__quote {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  z-index: -1;
  width: clamp(180px, 26vw, 300px);
  transform: translateX(-50%);
  fill: rgba(0, 0, 0, 0.06);
}

.stars { color: var(--red); font-size: 1.1rem; letter-spacing: 0.15em; }

.reviews__body {
  margin-top: 1.25rem;
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  text-wrap: pretty;
  transition: opacity 0.3s linear, transform 0.4s var(--ease);
}
.reviews__meta {
  margin-top: 1.25rem;
  display: grid;
  font-size: var(--step--1);
  transition: opacity 0.3s linear;
}
.reviews__meta strong { font-weight: 700; }
.reviews__meta span { color: rgba(0, 0, 0, 0.6); }
.reviews__stage.is-swapping .reviews__body { opacity: 0; transform: translate3d(0, 10px, 0); }
.reviews__stage.is-swapping .reviews__meta { opacity: 0; }

.avatars {
  display: flex;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.avatar {
  display: block;
  padding: 0;
  border-radius: var(--r-pill);
  transform: scale(0.86);
  opacity: 0.65;
  transition: transform 0.4s var(--ease), opacity 0.3s linear;
}
.avatar img {
  width: clamp(58px, 8vw, 80px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  transition: border-color 0.3s linear;
}
/* Monogram stand-in for reviews by real, named people — never an invented face. */
.avatar__mono {
  display: grid;
  place-items: center;
  width: clamp(58px, 8vw, 80px);
  aspect-ratio: 1;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  transition: border-color 0.3s linear;
}

.avatar:hover { opacity: 1; transform: scale(0.96); }
.avatar.is-active { opacity: 1; transform: scale(1); }
.avatar.is-active img,
.avatar.is-active .avatar__mono { border-color: var(--ink); }

/* ==========================================================================
   about
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
/* The frame lives on the figure, not on the media, so the media can move
   inside it and stay clipped by the rounded corner. */
.about__media {
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  background: var(--peach);
  overflow: hidden;
}
.about__media img,
.about__media video {
  width: 100%;
  aspect-ratio: 7 / 6;
  object-fit: cover;
  display: block;
}

/* A slow camera push on a real photograph.
   Generating a dolly shot of a room full of the business's own signage
   repaints that text into gibberish, and it costs credits to find out. Moving
   the camera over their actual photo is free, cannot hallucinate, and keeps
   every pixel of the menu boards theirs. Transform only, so it stays on the
   compositor. `alternate` breathes in and out rather than cutting back. */
@keyframes camera-push {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.6%, -1.1%, 0); }
}
/* Stills only. A loop that already carries a camera move must not have a
   second one layered on top of it. */
.about__media img {
  animation: camera-push 22s ease-in-out infinite alternate;
  will-change: transform;
}
.about__copy { display: grid; gap: 1.1rem; justify-items: start; }
.about__copy p { max-width: 46ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--peach);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-pill);
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translate3d(-2px, -3px, 0); box-shadow: 7px 8px 0 var(--ink); }
.btn:active { transform: translate3d(1px, 2px, 0); box-shadow: 1px 1px 0 var(--ink); }
.btn__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   categories
   ========================================================================== */
.categories { padding: 0 var(--gutter) var(--section-y); }
.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 1180px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}
.cat {
  position: relative;
  display: block;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cat:hover { transform: translate3d(-3px, -4px, 0); box-shadow: 8px 10px 0 var(--ink); }
.cat video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--peach);
  transition: transform 0.6s var(--ease);
}
.cat:hover video { transform: scale(1.04); }
.cat__label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem;
  color: var(--paper);
  background: var(--plum);
}
.site-footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: var(--maxw);
  margin-inline: auto;
}
.site-footer__tag { margin-top: 0.6rem; font-size: var(--step--1); color: rgba(255, 255, 255, 0.6); }

.site-footer__col h2 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.site-footer__col ul { display: grid; gap: 0.5rem; margin-top: 1rem; }
.site-footer__col a { font-size: var(--step--1); transition: color 0.2s linear; }
.site-footer__col a:hover { color: var(--yellow); }

.site-footer__social { display: flex; gap: 0.6rem; align-items: start; }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-pill);
  transition: background-color 0.25s linear, color 0.25s linear, border-color 0.25s linear;
}
.site-footer__social a:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--maxw);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-footer__bottom a:hover { color: var(--yellow); }

/* ==========================================================================
   scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.5s linear var(--delay, 0s), transform var(--dur) var(--ease) var(--delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 900px) {
  .stage { perspective: 1400px; }
  .products, .categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__media { order: -1; }
}

@media (max-width: 600px) {
  :root { --stroke: 2.5px; --shadow: 4px 5px 0 var(--ink); }
  /* Tighter perspective keeps the ring readable once the cards get small,
     and a slower turn stops it feeling frantic on a narrow screen. */
  .stage { perspective: 900px; --spin: 52s; }
  .products, .categories__grid { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { padding-left: 0.9rem; }
  .menu-toggle__label { font-size: 0.75rem; }
  .section-heading em { -webkit-text-stroke-width: 3px; }
  .hero__heading .word--script { -webkit-text-stroke-width: 3.5px; }
  .avatars { gap: 0.5rem; }
  .site-footer__bottom { flex-direction: column; }
}

/* ==========================================================================
   reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .hero__heading .word { opacity: 1 !important; transform: none !important; }
  .card3d { opacity: 1 !important; }
  /* The ring keeps its geometry — only the spin and the pointer tilt stop. */
  .ring { animation: none !important; }
  .ring-tilt { transform: rotateX(6deg) !important; }
  /* The camera push settles at its start frame rather than a half-zoom. */
  .about__media img { animation: none !important; transform: none !important; }
}