/* A1 — Back Bar. Photo-led, dark. Drinks stand on brass shelves in a
   bottle-green room; food sits on the kitchen pass in a warm ale-brown one. */
:root {
  --bg: #123524; --deep: #0b2218; --ink: #f1ead6; --muted: #a9bba6; --line: rgb(241 234 214 / .16);
  --accent: #d3de9b; --on-accent: #0b2218; --surface: #183f2c; --brass: #c9a25a;
  --sheet-bg: #f1ead6; --sheet-ink: #0b2218; --sheet-muted: #4d6353;
}
:root[data-world="food"] { --bg: #3a1a10; --deep: #24100a; --muted: #cdb3a3; --surface: #4a2416; --on-accent: #24100a; }
body { transition: background-color .7s var(--glide); background-image: radial-gradient(120% 60% at 50% 0, transparent, var(--deep)); background-attachment: fixed; }
.hm-sheet .hm-tag--new { background: #123524; color: #f1ead6; }

.top { padding: 2rem 1.25rem 1.25rem; text-align: center; }
.top__logo { width: min(62vw, 17rem); margin: 0 auto 1.5rem; }
.top__title { font: 500 italic clamp(1.5rem, 6vw, 2.25rem)/1.1 var(--display); color: var(--accent); }

/* sticky bar: the world switch + this world's categories */
.bar {
  position: sticky; top: 0; z-index: 4; padding: .6rem 1rem .5rem;
  background: color-mix(in srgb, var(--deep) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); transition: background-color .7s var(--glide);
}
.switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 24rem; margin: 0 auto; padding: 4px; border-radius: 99px; background: rgb(0 0 0 / .35); }
.switch button { position: relative; z-index: 1; min-height: 2.75rem; font: 600 1.125rem/1 var(--display); border-radius: 99px; transition: color .3s; }
.switch button[aria-selected="true"] { color: var(--on-accent); }
.switch__thumb { position: absolute; inset: 4px 50% 4px 4px; border-radius: 99px; background: var(--accent); transition: transform .55s var(--spring); }
[data-world="food"] .switch__thumb { transform: translateX(100%); }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: .1rem .9rem; margin-top: .45rem; }
.chips[hidden] { display: none; }
.chips button { font-size: .8125rem; font-weight: 600; color: var(--muted); padding: .35rem 0; position: relative; }
.chips button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .35s var(--spring); }
.chips button.is-on { color: var(--ink); }
.chips button.is-on::after { transform: scaleX(1); }

main { max-width: 64rem; margin: 0 auto; }
.world[hidden] { display: none; }
.world { animation: world-in .6s var(--glide); }
@keyframes world-in { from { opacity: 0; transform: translateY(30px); } }

.cat { padding: 3.5rem 1.25rem 1rem; scroll-margin-top: 6.5rem; }
.cat__head { margin-bottom: 1.5rem; }
.cat__title {
  font: 600 clamp(2.6rem, 13vw, 5rem)/.95 var(--display); letter-spacing: -.03em; text-wrap: balance;
  transform: translateX(calc((var(--p, .5) - .5) * -9%)); will-change: transform;
}
.cat__note { color: var(--muted); font-size: .875rem; margin-top: .6rem; }
.group { font: 600 italic 1.375rem/1.2 var(--display); color: var(--accent); margin: 2rem 0 .5rem; }

/* shelves: every bottle stands on a brass plank and rattles as you scroll */
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 1.25rem; }
.it { display: block; text-align: center; width: 100%; }
.it__stand {
  display: block; aspect-ratio: 3 / 3.6; padding: 0 12%; position: relative;
  border-bottom: 5px solid var(--brass); box-shadow: 0 9px 10px -6px rgb(0 0 0 / .55);
  background: linear-gradient(to top, rgb(0 0 0 / .28), transparent 45%);
}
.it__stand .hm-photo, .it__stand .hm-nophoto {
  transform-origin: 50% 100%; object-position: 50% 100%;
  transform: rotate(calc(var(--v) * var(--s, 1) * 7deg));
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / .45));
  transition: transform .5s var(--spring);
}
.it:nth-child(even) { --s: -1; }
.it:nth-child(3n) { --s: .6; }
.it:active .hm-photo { transform: translateY(-8px) scale(1.06); }
.it__name { display: block; font: 600 .8125rem/1.25 var(--body); padding: .55rem .3rem 0; text-wrap: balance; }
.it .hm-tags { margin-top: .3rem; justify-content: center; }
.it .hm-tag { font-size: .625rem; padding: .22rem .4rem; }
.it.hm-reveal { transform: translateY(-34px); }
.it.hm-reveal.is-in { transform: none; }

/* the pass: plates turn slowly as they travel up the screen */
.pass { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
.pass .it__stand { border: 0; box-shadow: none; background: none; padding: 0; aspect-ratio: 1; }
.pass .it__stand .hm-photo {
  object-position: 50% 50%; transform-origin: 50% 50%; scale: 1.25;
  transform: rotate(calc((var(--p, .5) - .5) * var(--s, 1) * 46deg));
  transition: none; filter: drop-shadow(0 12px 12px rgb(0 0 0 / .5));
}
.pass .it__name { font: 600 1.0625rem/1.2 var(--display); padding-top: .25rem; }

/* small categories get the long pour: big photo, words beside it */
.feature { display: grid; gap: 1.75rem; }
.feature .it { display: grid; grid-template-columns: 38% 1fr; gap: 1rem; align-items: center; text-align: left; }
.feature .it:nth-child(even) { grid-template-columns: 1fr 38%; }
.feature .it:nth-child(even) .it__stand { order: 2; }
.feature .it__stand { border: 0; box-shadow: none; background: none; padding: 0; aspect-ratio: 3 / 4; }
.feature .it__stand .hm-photo {
  object-position: 50% 50%; transform-origin: 50% 60%;
  transform: translateY(calc((.5 - var(--p, .5)) * 34px)) rotate(calc((var(--p, .5) - .5) * var(--s, 1) * -12deg));
  transition: none; filter: drop-shadow(0 14px 14px rgb(0 0 0 / .5));
}
.feature .it__name { font: 600 1.5rem/1.1 var(--display); padding: 0; }
.feature .it__desc { display: block; color: var(--muted); font-size: .875rem; margin-top: .4rem; white-space: pre-line; }
.feature .it .hm-tags { justify-content: flex-start; margin: .5rem 0 0; }
.feature .it .hm-tag { font-size: .6875rem; }

@media (min-width: 720px) {
  .shelf { grid-template-columns: repeat(6, 1fr); }
  .pass { grid-template-columns: repeat(4, 1fr); }
  .feature { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .cat { padding-inline: 2rem; }
}