/* Boxes module: the thirteen real box renders on a dark wood shelf. Scoped to .boxes and .box.
   Markup: <div class="boxes" data-boxes><a class="box" href data-slug data-accent><img><span class="box__name"></span></a>...</div>
   Exposes: --boxes-bg (page ground), --box-w (desktop box width), --boxes-shelf (wood color), --boxes-hairline (gold). */
.boxes {
  --boxes-bg: #120D0B; --boxes-shelf: #2A1B14; --boxes-shelf-dk: #150D0A; --boxes-hairline: #C9A227; --boxes-name: #F4EAD5;
  --box-w: clamp(84px, 6.4vw, 124px); --box-gap: clamp(8px, 0.85vw, 16px); --reflect-h: 34%; --tilt-x: 0deg; --tilt-y: 0deg;
  position: relative; display: flex; align-items: flex-end; gap: var(--box-gap);
  padding: 48px clamp(20px, 2.8vw, 44px) 16px; margin: 0; background: transparent;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  isolation: isolate; perspective: 900px; box-sizing: border-box;
}
.boxes::-webkit-scrollbar { display: none; }
/* the shelf surface the boxes stand on: a faint polished band between the box feet and the plank's front edge */
.boxes::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--shelf-h, 132px); height: var(--surface-h, 40px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(201,162,39,0) 0%, rgba(201,162,39,0.05) 60%, rgba(201,162,39,0.11) 100%);
}
/* the shelf: a plank whose top edge is the line the boxes stand on */
.boxes::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--shelf-h, 132px));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 18%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 38px, rgba(0,0,0,0.10) 38px 41px, rgba(0,0,0,0) 41px 80px),
    linear-gradient(180deg, var(--boxes-shelf) 0%, var(--boxes-shelf-dk) 100%);
  border-top: 1px solid var(--boxes-hairline); box-shadow: 0 -1px 0 rgba(0,0,0,0.6), 0 -14px 28px rgba(0,0,0,0.45) inset;
  z-index: 0; pointer-events: none;
}
.box {
  position: relative; flex: 0 0 var(--box-w); width: var(--box-w); display: block; text-decoration: none; color: var(--boxes-name);
  transform-style: preserve-3d; transform: translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-origin: 50% 100%;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms ease, filter 320ms ease; z-index: 1; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.box__art { position: relative; z-index: 2; display: block; }
.box__art::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -4px; height: 10px; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%); pointer-events: none; }
.box img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.box__glow {
  position: absolute; left: -30%; right: -30%; bottom: -8%; height: 60%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, var(--accent, #C9A227) 0%, transparent 62%);
  opacity: 0; filter: blur(14px); transition: opacity 420ms ease; transform: translateZ(-1px);
}
.box__reflect {
  display: block; position: relative; z-index: 1; height: var(--reflect-px, 40px); overflow: hidden; margin-top: 1px; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0) 92%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0) 92%);
  opacity: 0.62; filter: blur(1px) saturate(0.9);
}
.box__reflect img { transform: scaleY(-1); transform-origin: 50% 50%; }
.box__name {
  display: block; margin-top: 10px; font-family: "Oswald", "Archivo Narrow", Impact, sans-serif; font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; text-align: center; line-height: 1.2; color: var(--boxes-name); opacity: 0.62; transition: opacity 320ms ease, color 320ms ease;
  position: relative; z-index: 2; white-space: normal; max-width: 100%; overflow-wrap: normal;
}
/* hover and focus: lift, glow on the wood, the others step back */
.box:hover, .box:focus-visible, .box.is-lit { transform: translateY(-14px) scale(1.05) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); z-index: 3; }
.box:hover .box__glow, .box:focus-visible .box__glow, .box.is-lit .box__glow { opacity: 0.55; }
.box:hover .box__name, .box:focus-visible .box__name, .box.is-lit .box__name { opacity: 1; color: #fff; }
.box:focus-visible .box__art { outline: 2px solid var(--boxes-hairline); outline-offset: 4px; }
.boxes.is-active .box:not(:hover):not(.is-lit) { opacity: 0.58; filter: saturate(0.85); }
.boxes.is-active .box:not(:hover):not(.is-lit) .box__reflect { opacity: 0.3; }
/* count, added by the script, used on phones */
.boxes__count { display: none; }

@media (max-width: 1300px) and (min-width: 760px) {
  .box__name { font-size: 0.625rem; letter-spacing: 0.1em; }
}
@media (max-width: 759px) {
  .boxes {
    --box-w: 66vw; --box-gap: 8vw; --reflect-h: 26%; --shelf-h: 120px;
    padding: 28px 17vw 16px; scroll-snap-type: x mandatory; scroll-padding-inline: 17vw; perspective: none;
  }
  .box { scroll-snap-align: center; transform: none; transition: opacity 320ms ease, transform 320ms ease; opacity: 0.45; }
  .box.is-center { opacity: 1; }
  .box.is-center .box__glow { opacity: 0.5; }
  .box:hover, .box:focus-visible, .box.is-lit { transform: none; }
  .box__name { font-size: 0.6875rem; opacity: 0; }
  .box.is-center .box__name { opacity: 1; font-size: 1.125rem; letter-spacing: 0.22em; color: #fff; margin-top: 12px; }
  .boxes.is-active .box:not(:hover):not(.is-lit) { opacity: 0.45; filter: none; }
  .boxes.is-active .box.is-center { opacity: 1; }
  .boxes__count {
    display: block; position: absolute; right: 6vw; bottom: 14px; z-index: 4; font-family: "Courier Prime", "Courier New", monospace; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--boxes-name); opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .box, .box__glow, .box__name { transition: none; }
  .box:hover, .box:focus-visible, .box.is-lit { transform: none; }
}