/* ============================================================
   SLAVI SAPUNOV — FOOD FOLIO (Volume II)
   A second world: cream base, saturated colour panels, products
   that break out of their stripe. Loud where the wine is quiet.
   Structure follows "Background idea and structure.png".
   ============================================================ */

:root {
  --f-cream:      #fff4de;
  --f-cream-deep: #ffe9c4;
  --f-ink:        #241c14;
  --f-ink-soft:   #6d5b47;
  --f-night:      #171a2e;

  --f-teal:   #00aec7;
  --f-yellow: #ffc93c;
  --f-pink:   #ff7ba8;
  --f-green:  #7ec24a;
  --f-red:    #e23b3b;

  --f-ease:  cubic-bezier(.22,.61,.36,1);
  --f-snap:  cubic-bezier(.65,0,.2,1);
  --f-wrap:  1220px;
}

/* ============================================================
   WORLDS
   ============================================================ */
.world[hidden] { display: none !important; }

/* the document canvas follows whichever world is on screen */
html:has(body[data-world="food"]) { background: var(--f-cream); }
body[data-world="food"] { background: var(--f-cream); color: var(--f-ink); }

/* wine chrome that has no business in the food world */
body[data-world="food"] #rail { display: none; }
body[data-world="wine"] .frail,
body[data-world="wine"] .fabstack--food { display: none; }
body[data-world="food"] .world--wine .fabstack { display: none; }

/* food skin for the back-to-top roundel */
.fab-top--food { background: var(--f-ink); color: var(--f-cream); }
.fab-top--food:hover { background: var(--f-yellow); color: var(--f-ink); }

body[data-world="food"] .topbar {
  background: transparent;
  border-bottom-color: transparent;
}
body[data-world="food"] .topbar--solid,
body[data-world="food"] .topbar.is-solid {
  background: rgba(255,244,222,.9);
}
body[data-world="food"] .topbar__mark { color: var(--f-ink); }
body[data-world="food"] .topbar__mail { color: var(--f-ink-soft); }
body[data-world="food"] .language-switcher button { color: var(--f-ink-soft); }
body[data-world="food"] .language-switcher button[aria-pressed="true"] {
  color: var(--f-ink);
  border-bottom-color: var(--f-ink);
}

/* ============================================================
   SHARED FOOD FURNITURE
   ============================================================ */
.fwrap {
  width: min(100% - 2 * clamp(20px, 5vw, 64px), var(--f-wrap));
  margin-inline: auto;
}

.fsec {
  position: relative;
  padding-block: clamp(72px, 9vw, 150px);
  background: var(--f-cream);
}

.fsec__head { max-width: 760px; }
.fsec__head--center { max-width: 720px; margin-inline: auto; text-align: center; }
.fsec__head--center .fsec__made { justify-content: center; }

.fsec__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
}
.fsec__head--center .fsec__eyebrow { justify-content: center; }
.fsec__eyebrow span {
  padding: 6px 12px 5px;
  border-radius: 999px;
  background: var(--accent, var(--f-red));
  /* light accents (gold, amber, yellow) need dark type to stay readable */
  color: var(--pill-ink, #fff);
  letter-spacing: .14em;
}
.fsec--peanut, .fsec--halva, .fsec--shots { --pill-ink: #241c14; }

.fsec__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 74px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .008em;
  text-transform: uppercase;
  color: var(--f-ink);
  text-wrap: balance;
}

.fsec__copy {
  margin: 0 0 26px;
  max-width: 60ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--f-ink-soft);
}
.fsec__head--center .fsec__copy { margin-inline: auto; }

.fsec__made {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fsec__made li {
  padding: 7px 15px 6px;
  border: 1.5px solid color-mix(in srgb, var(--accent, var(--f-red)) 42%, transparent);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, var(--f-red)) 72%, var(--f-ink));
  background: color-mix(in srgb, var(--accent, var(--f-red)) 8%, transparent);
}

.fsec__sub {
  margin: clamp(56px, 6vw, 88px) 0 26px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
}

/* product captions ------------------------------------------------ */
.panels__name, .cards__name, .shelf__name, .barstack__name {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--f-ink-soft);
}
.panels__name b, .cards__name b, .shelf__name b, .barstack__name b {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--f-ink);
}

/* every product sits on a button — strip the UA chrome */
.panels__btn, .cards__btn, .shelf__btn, .barstack__btn, .bolts__btn, .boxes__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.panels__btn img, .cards__btn img, .shelf__btn img,
.barstack__btn img, .bolts__btn img, .boxes__btn img {
  display: block;
  width: 100%;
  height: auto;
  /* keep the image on its own compositing layer at all times —
     promoting it only mid-hover shows a brief rectangular seam
     around the artwork (transform + drop-shadow layerization) */
  will-change: transform;
}

/* ============================================================
   00 · FOOD COVER
   ============================================================ */
.fhero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(96px, 12vh, 150px) 0 clamp(90px, 12vh, 140px);
  overflow: hidden;
  background: var(--f-cream);
}

.fhero__stripes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.fhero__stripes i {
  background: var(--c);
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: .9;
  animation: stripeGrow 1.05s var(--f-snap) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.fhero__stripes i:nth-child(1) { --i: 0; }
.fhero__stripes i:nth-child(2) { --i: 1; }
.fhero__stripes i:nth-child(3) { --i: 2; }
.fhero__stripes i:nth-child(4) { --i: 3; }
.fhero__stripes i:nth-child(5) { --i: 4; }
@keyframes stripeGrow { to { transform: scaleY(1); } }

/* the stripes read as a wash behind the type, not a billboard */
.fhero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 78% at 30% 46%, rgba(255,244,222,.97) 0%, rgba(255,244,222,.9) 40%, rgba(255,244,222,.44) 72%, rgba(255,244,222,.12) 100%);
  pointer-events: none;
}

.fhero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * clamp(20px, 5vw, 64px), var(--f-wrap));
  margin-inline: auto;
}
/* leave the right-hand lane clear for the floating bars */
@media (min-width: 861px) { .fhero__inner { padding-right: 38%; } }

.fhero__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
}

.fhero__title {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-size: clamp(48px, 7.4vw, 108px);
  font-weight: 700;
  line-height: .89;
  letter-spacing: .004em;
  text-transform: uppercase;
  color: var(--f-ink);
}
.fhero__title span {
  color: var(--f-red);
  -webkit-text-stroke: 0;
}

.fhero__copy {
  margin: 0 0 34px;
  max-width: 52ch;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--f-ink-soft);
}

.fhero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fhero__stats li { display: grid; }
.fhero__stats b {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1;
  color: var(--f-ink);
}
.fhero__stats span {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
}

/* the three nougat bars from the reference board, floating in */
.fhero__float {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  bottom: -6%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1vw, 18px);
  width: min(46vw, 620px);
  pointer-events: none;
}
.fhero__float img {
  width: 33.333%;
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(60,36,10,.26));
  opacity: 0;
  transform: translateY(60px) rotate(var(--r, 0deg));
  animation: floatIn 1.15s var(--f-ease) forwards;
}
.fhero__float img:nth-child(1) { --r: -7deg; animation-delay: .30s; }
.fhero__float img:nth-child(2) { --r:  0deg; animation-delay: .42s; margin-bottom: 4%; }
.fhero__float img:nth-child(3) { --r:  7deg; animation-delay: .54s; }
@keyframes floatIn { to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }

.fhero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 44px);
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--f-ink-soft);
  text-decoration: none;
}
.fhero__cue i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--f-ink-soft), transparent);
  animation: cueDrop 1.9s ease-in-out infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: scaleY(1);   opacity: .9; }
  50%      { transform: scaleY(.55); opacity: .45; }
}

/* ============================================================
   01 · NUT BARS — colour bands wiping in from the left
   ============================================================ */
.barstack {
  margin-top: clamp(48px, 6vw, 84px);
  display: grid;
  gap: clamp(10px, 1.4vw, 22px);
}

.barstack__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
  align-items: center;
  gap: clamp(18px, 3vw, 52px);
  padding: clamp(14px, 2vw, 30px) clamp(20px, 5vw, 64px);
}

.barstack__band {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(74%, 1000px);
  background: var(--c);
  border-radius: 0 999px 999px 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s var(--f-snap);
}
.barstack__row.in .barstack__band { transform: scaleX(1); }

.barstack__btn {
  position: relative;
  z-index: 1;
  transform: translateX(-24px);
  opacity: 0;
  transition: transform 1s var(--f-ease) .18s, opacity .8s ease .18s;
}
.barstack__row.in .barstack__btn { transform: none; opacity: 1; }
.barstack__btn img {
  filter: drop-shadow(0 18px 26px rgba(50,30,8,.26));
  transition: transform .5s var(--f-ease);
}
.barstack__btn:hover img { transform: translateY(-8px) scale(1.015); }

.barstack__name { position: relative; z-index: 1; margin: 0; }

/* ============================================================
   02 / 03 · COLOUR PANELS — products breaking out of the stripe
   (the layout from the reference board)
   ============================================================ */
.panels {
  --pad: clamp(8px, 1.4vw, 26px);
  display: grid;
  gap: 0;
  align-items: end;
  margin-top: clamp(56px, 7vw, 96px);
  padding-inline: clamp(20px, 5vw, 64px);
}
.panels--3 { grid-template-columns: repeat(3, 1fr); }
.panels--4 { grid-template-columns: repeat(4, 1fr); }

.panels__cell {
  position: relative;
  padding-inline: var(--pad);
}

.panels__btn { position: relative; cursor: zoom-in; }
.panels__btn::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--pad));
  right: calc(-1 * var(--pad));
  top: 13%;
  bottom: 11%;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s var(--f-snap);
}
.panels__cell.in .panels__btn::before { transform: scaleY(1); }

.panels__btn img {
  position: relative;
  z-index: 1;
  width: min(100%, 260px);
  margin-inline: auto;
  filter: drop-shadow(0 24px 34px rgba(50,30,8,.24));
  transition: transform .55s var(--f-ease);
}
.panels__btn:hover img { transform: translateY(-14px) rotate(-1.5deg); }

.panels__name { position: relative; z-index: 1; text-align: center; }

/* ============================================================
   04 / 07 · CARD GRIDS — halva boxes and mint packs
   ============================================================ */
.cards {
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(48px, 6vw, 80px);
  grid-template-columns: repeat(2, 1fr);
}
.cards__item {
  position: relative;
  padding: clamp(24px, 3vw, 44px) clamp(20px, 2.6vw, 40px) clamp(22px, 2.4vw, 34px);
  border-radius: 26px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c) 20%, #fffaf0) 0%,
      color-mix(in srgb, var(--c) 7%, #fffaf0) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px rgba(60,40,16,.08);
  overflow: hidden;
  transition: transform .5s var(--f-ease), box-shadow .5s var(--f-ease);
}
.cards__item::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: var(--c);
}
.cards__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 30px 56px rgba(60,40,16,.14);
}
.cards__btn img {
  filter: drop-shadow(0 20px 28px rgba(50,30,8,.2));
  transition: transform .55s var(--f-ease);
}
.cards__btn:hover img { transform: scale(1.035) rotate(-1deg); }
.cards__name { text-align: left; }

/* ============================================================
   05 · SPREADS — jars on a colour arc
   ============================================================ */
.shelf {
  position: relative;
  margin-top: clamp(52px, 6vw, 88px);
  padding: clamp(40px, 5vw, 76px) clamp(20px, 5vw, 64px) clamp(30px, 4vw, 56px);
}
.shelf__arc {
  position: absolute;
  left: 50%;
  top: clamp(30px, 4vw, 60px);
  width: min(96%, 1320px);
  height: 78%;
  transform: translateX(-50%);
  border-radius: 999px 999px 40px 40px;
  background: linear-gradient(180deg, var(--f-cream-deep) 0%, color-mix(in srgb, var(--f-cream-deep) 55%, #fff) 100%);
}
.shelf__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: end;
}
.shelf__item { position: relative; text-align: center; }
.shelf__item::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 74px;
  width: clamp(96px, 11vw, 156px);
  height: clamp(96px, 11vw, 156px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--c);
  opacity: .17;
}
.shelf__btn img {
  filter: drop-shadow(0 22px 30px rgba(50,30,8,.26));
  transition: transform .55s var(--f-ease);
}
.shelf__btn:hover img { transform: translateY(-12px) scale(1.03); }
.shelf__name { text-align: center; }

/* ============================================================
   06 · ENERGY SHOTS — the loud one
   ============================================================ */
.fsec--shots {
  background:
    radial-gradient(90% 70% at 50% 0%, #2b2f56 0%, var(--f-night) 62%);
  color: #fff;
  overflow: hidden;
}
.fsec--shots::before {
  content: '';
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  background:
    conic-gradient(from 200deg at 50% 0%,
      rgba(255,212,0,.16), rgba(229,0,109,.16), rgba(123,63,191,.16), rgba(255,212,0,.16));
  filter: blur(60px);
  pointer-events: none;
}
.fsec--shots .fsec__title,
.fsec--shots .fhero__stats b { color: #fff; }
.fsec--shots .fsec__copy,
.fsec--shots .fsec__eyebrow,
.fsec--shots .fsec__sub { color: rgba(255,255,255,.68); }
.fsec--shots .fsec__made li {
  border-color: rgba(255,212,0,.42);
  color: #ffe7a3;
  background: rgba(255,212,0,.08);
}
.fsec--shots .fwrap { position: relative; z-index: 1; }

.bolts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  margin-top: clamp(48px, 6vw, 82px);
  align-items: end;
}
.bolts__item { position: relative; text-align: center; }
.bolts__item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: 78%;
  height: 88%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(60% 50% at 50% 50%, var(--c) 0%, transparent 72%);
  opacity: .5;
  filter: blur(10px);
}
/* fan the shelf: the artwork leans ~5° left, so the left pair keeps its
   lean and the right pair is rotated past upright to mirror it */
/* each render has its own baked-in lean (measured: −7.9°, +5.7°,
   +5.5°, −7.2°); these values compensate so every bottle sits at
   exactly −15° (left pair) or +15° (right pair) — parallel pairs */
.bolts__item:nth-child(1) { --tilt: -7deg; }
.bolts__item:nth-child(2) { --tilt: -21deg; }
.bolts__item:nth-child(3) { --tilt: 9.5deg; }
.bolts__item:nth-child(4) { --tilt: 22deg; }
.bolts__btn img {
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.5));
  transition: transform .5s var(--f-ease);
  transform: rotate(var(--tilt, 0deg));
}
.bolts__btn:hover img { transform: translateY(-14px) rotate(calc(var(--tilt, 0deg) + 3deg)); }
.bolts__name {
  position: relative;
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 28px);
}
.boxes__item { margin: 0; }
.boxes__btn img {
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
  transition: transform .5s var(--f-ease);
}
.boxes__btn:hover img { transform: translateY(-8px) scale(1.02); }

/* ============================================================
   THE GATE — two volumes, offered right after the introduction
   Lives in the wine world, but it is a doorway, so it belongs
   with the rest of the crossing furniture.
   ============================================================ */
/* charcoal, so it slots between the cover's dark foot and chapter 01
   without introducing a theme change the painted bridges would have to cover */
.gateway {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 120px);
  background: #292929;
  text-align: center;
}

.gateway__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--taupe, #9b8d80);
}

.gateway__title {
  margin: 0 0 clamp(34px, 4.4vw, 60px);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper, #ddd2c1);
}
.gateway__title span { color: var(--gold-bright, #f6d292); }

.gateway__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 26px);
  width: min(100% - 2 * clamp(20px, 5vw, 64px), var(--f-wrap));
  margin-inline: auto;
  transition: grid-template-columns .6s var(--f-ease);
}
/* the pane you point at takes the floor */
@media (hover: hover) and (min-width: 861px) {
  .gateway__panes:has(.gate--wine:hover) { grid-template-columns: 1.18fr .82fr; }
  .gateway__panes:has(.gate--food:hover) { grid-template-columns: .82fr 1.18fr; }
}

.gate {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 54vh, 600px);
  padding: clamp(24px, 2.8vw, 44px);
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .55s var(--f-ease), box-shadow .55s var(--f-ease);
}
.gate:hover { transform: translateY(-6px); }
.gate:active { transform: translateY(-1px); }
.gate:focus-visible { outline: 3px solid #a67c3d; outline-offset: 4px; }

/* on charcoal the wine pane needs its own edge to read as a card */
.gate--wine {
  background: linear-gradient(158deg, #423d38 0%, #262524 62%);
  color: var(--paper, #ddd2c1);
  box-shadow: 0 0 0 1px rgba(201,161,94,.28) inset, 0 22px 46px rgba(0,0,0,.34);
}
.gate--wine:hover {
  box-shadow: 0 0 0 1px rgba(246,210,146,.5) inset, 0 34px 68px rgba(0,0,0,.46);
}

/* and the food pane reads as a lit window cut into the dark room */
.gate--food {
  background: var(--f-cream);
  color: var(--f-ink);
  box-shadow: 0 22px 46px rgba(0,0,0,.34);
}
.gate--food:hover { box-shadow: 0 34px 68px rgba(0,0,0,.46); }

/* --- artwork --------------------------------------------------- */
.gate__stripes {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.gate__stripes { opacity: .72; }
.gate__stripes i { background: var(--c); }
.gate--food::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--f-cream) 16%, rgba(255,244,222,.8) 40%, rgba(255,244,222,.08) 100%);
}

.gate__art {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.gate--wine .gate__art {
  right: -4%;
  bottom: -14%;
  width: 46%;
  transform: rotate(6deg);
  transition: transform .7s var(--f-ease);
}
.gate--wine:hover .gate__art { transform: rotate(2deg) translateY(-14px) scale(1.04); }
.gate--wine .gate__art img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.55));
}

.gate__art--food {
  right: -2%;
  bottom: -3%;
  width: 54%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2%;
  transition: transform .7s var(--f-ease);
}
.gate--food:hover .gate__art--food { transform: translateY(-14px) scale(1.04); }
.gate__art--food img {
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 34px rgba(70,44,12,.34));
}
.gate__art--food img:nth-child(1) { width: 26%; transform: rotate(-6deg); }
.gate__art--food img:nth-child(2) { width: 30%; transform: rotate(3deg); margin-bottom: -4%; }
.gate__art--food img:nth-child(3) { width: 38%; transform: rotate(7deg); margin-bottom: -8%; }

/* --- copy ------------------------------------------------------- */
.gate__body {
  position: relative;
  display: grid;
  gap: 10px;
  max-width: min(100%, 29ch);
}
/* the food pane's artwork reaches further in, and Bulgarian runs longer */
.gate--food .gate__body { max-width: min(100%, 25ch); }
.gate__vol {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.gate--wine .gate__vol { color: var(--gold, #c9a15e); }
.gate--food .gate__vol { color: #c2410c; }

.gate__name {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .012em;
  text-transform: uppercase;
}
.gate--wine .gate__name { color: #fff; }
.gate--food .gate__name { color: var(--f-ink); }

.gate__meta {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.55;
}
.gate--wine .gate__meta { color: rgba(255,255,255,.62); }
.gate--food .gate__meta { color: var(--f-ink-soft); }

.gate__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gate--wine .gate__cta { color: var(--gold-bright, #f6d292); }
.gate--food .gate__cta { color: #241c14; }
.gate__cta i {
  position: relative;
  width: 30px;
  height: 8px;
  background: linear-gradient(currentColor, currentColor) left 50% / 100% 2px no-repeat;
  transition: transform .45s var(--f-ease);
}
.gate__cta i::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.gate:hover .gate__cta i { transform: translateX(7px); }

@media (max-width: 860px) {
  .gateway__panes { grid-template-columns: 1fr; }
  .gate { min-height: clamp(330px, 46vh, 420px); }
  .gate__body, .gate--food .gate__body { max-width: 57%; }
  .gate--wine .gate__art { width: 38%; }
  .gate__art--food { width: 44%; }
}
@media (max-width: 520px) {
  .gate__body, .gate--food .gate__body { max-width: 70%; }
  .gate--wine .gate__art { width: 44%; right: -10%; }
  .gate__art--food { width: 54%; right: -8%; }
}

/* ============================================================
   CROSSOVER BANDS — the doorways between the two worlds
   ============================================================ */
.crossover {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 11vw, 168px) 0;
  text-align: center;
  isolation: isolate;
}
.crossover--towine { background: var(--f-cream); }

.crossover__stripes {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.crossover__stripes i {
  background: var(--c);
  transform: translateY(101%);
  transition: transform 1.1s var(--f-snap);
}
.crossover.in-view .crossover__stripes i { transform: none; }
.crossover__stripes i:nth-child(1) { transition-delay: .00s; }
.crossover__stripes i:nth-child(2) { transition-delay: .07s; }
.crossover__stripes i:nth-child(3) { transition-delay: .14s; }
.crossover__stripes i:nth-child(4) { transition-delay: .21s; }
.crossover__stripes i:nth-child(5) { transition-delay: .28s; }

.crossover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.crossover--towine::after {
  background: radial-gradient(76% 66% at 50% 50%, rgba(255,244,222,.95) 0%, rgba(255,244,222,.78) 46%, rgba(255,244,222,.12) 100%);
}

.crossover__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * clamp(20px, 5vw, 64px), 900px);
  margin-inline: auto;
}
.crossover__eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.crossover__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
}
.crossover__copy {
  margin: 0 auto 38px;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}
.crossover--towine .crossover__eyebrow { color: #a67c3d; }
.crossover--towine .crossover__title   { color: var(--f-ink); }
.crossover--towine .crossover__title span { color: #a67c3d; }
.crossover--towine .crossover__copy    { color: var(--f-ink-soft); }

/* the button itself ------------------------------------------------ */
.switchbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 19px 30px 17px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--f-ease), box-shadow .4s var(--f-ease);
}
.switchbtn--food {
  background: var(--f-yellow);
  color: #241c14;
  box-shadow: 0 14px 34px rgba(255,201,60,.34);
}
.switchbtn--wine {
  background: #242424;
  color: #f6d292;
  box-shadow: 0 14px 34px rgba(36,36,36,.3);
}
.switchbtn:hover { transform: translateY(-3px) scale(1.02); }
.switchbtn--food:hover { box-shadow: 0 20px 44px rgba(255,201,60,.46); }
.switchbtn--wine:hover { box-shadow: 0 20px 44px rgba(36,36,36,.42); }
.switchbtn:active { transform: translateY(0) scale(.99); }

/* a colour sweep that runs across the pill on hover */
.switchbtn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--f-teal), var(--f-pink), var(--f-yellow));
  transform: translateX(-101%);
  transition: transform .55s var(--f-snap);
}
.switchbtn--wine::before {
  background: linear-gradient(90deg, #6e5632, #c9a15e, #f6d292);
}
.switchbtn:hover::before { transform: none; }

.switchbtn__arrow {
  width: 34px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) left 50% / 100% 2px no-repeat;
  position: relative;
  transition: transform .4s var(--f-ease);
}
.switchbtn__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.switchbtn:hover .switchbtn__arrow { transform: translateX(6px); }

/* persistent escape hatch inside the food world -------------------- */
/* lives inside the .fabstack cluster, which owns the fixed position */
.backpill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 12px 17px;
  border: 0;
  border-radius: 999px;
  background: #242424;
  color: #f6d292;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  transition: transform .4s var(--f-ease), box-shadow .4s var(--f-ease), opacity .4s ease;
}
.backpill:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,.4); }
/* stands down once the full-size doorway is on screen */
.backpill.is-tucked {
  opacity: 0;
  transform: translateY(26px) scale(.9);
  pointer-events: none;
}
.backpill__glass {
  width: 13px;
  height: 17px;
  border: 1.6px solid currentColor;
  border-radius: 2px 2px 9px 9px;
  border-top-width: 3px;
}

/* ============================================================
   FOOD CHAPTER RAIL
   ============================================================ */
.frail {
  position: fixed;
  left: clamp(12px, 2vw, 26px);
  top: 50%;
  z-index: 60;
  transform: translateY(-50%);
}
.frail ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.frail a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  color: color-mix(in srgb, var(--f-ink) 42%, transparent);
  transition: color .3s ease;
}
.frail a:hover, .frail a.active { color: var(--f-ink); }
.frail__t {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  transition: max-width .45s var(--f-ease), opacity .35s ease;
}
/* labels open on hover only — the active one would sit under the body copy */
.frail a:hover .frail__t { max-width: 170px; opacity: 1; }
.frail a.active .frail__n { color: var(--f-red); }

/* over the dark energy-shots chapter the rail has to invert */
.frail--light a { color: rgba(255,255,255,.45); }
.frail--light a:hover, .frail--light a.active { color: #fff; }
.frail--light a.active .frail__n { color: var(--f-yellow); }

/* ============================================================
   FOOD FOOTER
   ============================================================ */
/* ============================================================
   FOOD CLOSING — the wine sign-off, remixed loud
   ============================================================ */
.fclosing {
  position: relative;
  padding: clamp(80px, 10vw, 150px) 24px clamp(64px, 8vw, 110px);
  background: var(--f-cream);
  text-align: center;
  overflow: hidden;
}
.fclosing__stripes {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  height: 10px;
}
.fclosing__stripes i { flex: 1; }
.fclosing__stripes i:nth-child(1) { background: var(--f-teal); }
.fclosing__stripes i:nth-child(2) { background: var(--f-yellow); }
.fclosing__stripes i:nth-child(3) { background: var(--f-pink); }
.fclosing__stripes i:nth-child(4) { background: var(--f-green); }
.fclosing__stripes i:nth-child(5) { background: var(--f-red); }
.fclosing__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1; letter-spacing: .01em;
  color: var(--f-ink);
}
.fclosing__roles {
  margin: 16px 0 0;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--f-ink-soft);
}
.fclosing__roles span { margin-inline: .3em; }
.fclosing__roles span:nth-of-type(1) { color: var(--f-teal); }
.fclosing__roles span:nth-of-type(2) { color: var(--f-yellow); }
.fclosing__roles span:nth-of-type(3) { color: var(--f-pink); }
.fclosing__roles span:nth-of-type(4) { color: var(--f-green); }
.fclosing__slogan {
  margin: clamp(36px, 4.5vw, 64px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.6vw, 78px);
  font-weight: 700; line-height: .96; letter-spacing: .008em;
  text-transform: uppercase;
  color: var(--f-ink);
}
.fclosing__slogan span {
  display: inline-block;
  padding: .02em .16em;
  background: var(--f-yellow);
  transform: rotate(-1.5deg);
}
.fclosing__mail {
  display: inline-block;
  margin-top: clamp(26px, 3.2vw, 42px);
  padding: 15px 38px;
  border-radius: 999px;
  background: var(--f-ink);
  color: var(--f-cream);
  font-family: var(--font-display);
  font-weight: 600; font-size: 19px;
  letter-spacing: .12em; text-transform: uppercase;
  transition: transform .35s var(--f-ease), box-shadow .35s var(--f-ease);
}
.fclosing__mail:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(36, 28, 20, .28);
}

.ffoot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding: 34px clamp(20px, 5vw, 64px) 40px;
  background: var(--f-cream);
  border-top: 1px solid color-mix(in srgb, var(--f-ink) 12%, transparent);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--f-ink-soft);
}
.ffoot p { margin: 0; }
.ffoot a { color: var(--f-ink); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ============================================================
   THE TRANSITION CURTAIN
   Six panels wipe across, the destination is named, panels leave.
   ============================================================ */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  visibility: hidden;
}
.curtain.is-active { visibility: visible; pointer-events: all; }

.curtain i {
  background: var(--cc, #242424);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .52s var(--f-snap);
  transition-delay: var(--d, 0ms);
}
.curtain.is-closing i { transform: scaleY(1); }
.curtain.is-opening i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition-duration: .58s;
}

.curtain i:nth-child(1) { --d: 0ms;   }
.curtain i:nth-child(2) { --d: 48ms;  }
.curtain i:nth-child(3) { --d: 96ms;  }
.curtain i:nth-child(4) { --d: 144ms; }
.curtain i:nth-child(5) { --d: 192ms; }
.curtain i:nth-child(6) { --d: 240ms; }
/* leaving, the wipe runs the other way for a rolling feel */
.curtain.is-opening i:nth-child(1) { --d: 240ms; }
.curtain.is-opening i:nth-child(2) { --d: 192ms; }
.curtain.is-opening i:nth-child(3) { --d: 144ms; }
.curtain.is-opening i:nth-child(4) { --d: 96ms;  }
.curtain.is-opening i:nth-child(5) { --d: 48ms;  }
.curtain.is-opening i:nth-child(6) { --d: 0ms;   }

.curtain__panels { display: contents; }

.curtain__word {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 11vw, 150px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cw, #fff);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .34s ease, transform .6s var(--f-ease);
}
.curtain.is-closing .curtain__word {
  opacity: 1;
  transform: none;
  transition-delay: .3s;
}
.curtain.is-opening .curtain__word {
  opacity: 0;
  transform: scale(1.06);
  transition-duration: .28s, .4s;
  transition-delay: 0s;
}

/* the incoming world settles in behind the leaving curtain */
.world.is-arriving { animation: worldArrive .85s var(--f-ease) both; }
@keyframes worldArrive {
  from { opacity: .35; transform: scale(1.035); }
  to   { opacity: 1;   transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .frail { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .fhero__float { width: min(62vw, 380px); opacity: .55; }
  .fhero__title { font-size: clamp(44px, 12vw, 76px); }

  .barstack__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-inline: clamp(16px, 5vw, 30px);
  }
  .barstack__band { width: 88%; }

  .panels--3, .panels--4 { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px, 6vw, 46px); }
  .panels__btn::before { top: 10%; bottom: 8%; }

  .cards { grid-template-columns: 1fr; }
  .shelf__row { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px, 7vw, 44px); }
  .bolts, .boxes { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 6vw, 40px); }
  /* the shot bottles are tall and narrow — full column width blows them up */
  .bolts__btn img { width: min(100%, 230px); margin-inline: auto; }

  .backpill { padding: 11px 17px 10px 14px; font-size: 12px; }
}

@media (max-width: 520px) {
  .panels--3, .panels--4 { grid-template-columns: 1fr; }
  .panels__btn img { width: min(100%, 210px); }
  .shelf__row { grid-template-columns: 1fr; }
  .shelf__btn img { width: min(100%, 260px); margin-inline: auto; }
  .bolts, .boxes { grid-template-columns: 1fr; }
  .bolts__btn img { width: min(100%, 200px); }
  .fhero__float { display: none; }
  .fhero__stats { gap: 22px 34px; }
}

/* ============================================================
   REDUCED MOTION — keep the meaning, drop the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fhero__stripes i,
  .fhero__float img {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .barstack__band,
  .panels__cell .panels__btn::before,
  .crossover__stripes i { transform: none; transition: none; }
  .barstack__btn { opacity: 1; transform: none; }
  .fhero__cue i { animation: none; }
  .gateway__panes { transition: none; }
  .gate, .gate__art, .gate__art--food, .gate__cta i { transition: none; }
  .gate:hover { transform: none; }
  .curtain i, .curtain__word { transition-duration: .22s; }
  .world.is-arriving { animation: none; }
  .switchbtn::before { display: none; }
}