/* The Stockroom (nft/collection.html, docs/COLLECTION.md). The site's packaging
   language at night: a dim stockroom, plywood shelves lit from under the board
   above, every token a sealed collector box. Labels are white paper with black
   ink, tape is brand green, the filter bar is a strip of kraft board. Fonts and
   brand colours match src/config.js (collection.js sets --f-* / --accent). */

:root {
  --ink: #14110d;
  --ink-2: #4b443a;
  --ink-3: #7d7466;
  --paper: #fbf9f2;
  --paper-2: #f0ece0;
  --rule: #d9d2c2;
  --kraft: #c8a479;
  --kraft-hi: #dcc19b;
  --kraft-lo: #a98458;
  --wall: #17110b;
  --dark: #100b06;
  --accent: #57b947;
  --accent-hi: #7ad866;
  --accent-dark: #2f7d2a;
  --red: #cf3a2e;
  --blue: #2456c4;
  --gold: #e8b84a;
  --wood-hi: #e6c08a;
  --wood: #c99c62;
  --wood-lo: #8a6031;

  /* tier inks (the gacha capsule colours of the story) */
  --t-common: #57b947;
  --t-rare: #4fa8ff;
  --t-epic: #b565ff;
  --t-legendary: #ffc23d;
  --t-grail: #ff5d8f;
  --holo: linear-gradient(120deg, #ff7ad9, #ffd76a 18%, #7dffb2 36%, #6ad1ff 54%, #b98cff 72%, #ff7ad9 90%);
  --gold-foil: linear-gradient(118deg, #a87a1f, #ffe9a0 28%, #e8b84a 46%, #fff6cf 62%, #b98628 80%, #f4d477);

  --f-logo: 'Bagel Fat One', 'Arial Black', sans-serif;
  --f-block: 'Bungee', 'Arial Black', sans-serif;
  --f-display: 'Bebas Neue', Impact, sans-serif;
  --f-ui: 'Fredoka', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --f-script: 'Permanent Marker', cursive;

  --gutter: clamp(12px, 4.4vw, 68px);
  --over: min(34px, var(--gutter)); /* how far a shelf board runs past the boxes */
  --maxw: 1560px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.3, 1.5, .5, 1);
  --hard: 0 4px 0 rgb(0 0 0 / .34);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--dark); scroll-padding-top: 0; -webkit-text-size-adjust: 100%; scrollbar-color: #5b4a36 #17110b; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--dark);
  color: var(--paper);
  font: 400 16px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px var(--blue); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent); color: #06130a; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 120; padding: 10px 14px;
  background: #fff; color: var(--ink); font: 400 13px/1 var(--f-block); text-decoration: none; border-radius: 8px;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------- shared bits */

.chip {
  display: inline-block;
  padding: .5em .7em .42em;
  border: 2px solid var(--ink);
  border-radius: .5em;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 4px 0 2px rgb(0 0 0 / .4);
  font: 400 clamp(10px, 1.05vw, 13px)/1 var(--f-block);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  rotate: -2deg;
}
.chip--green { background: var(--accent); rotate: 1.5deg; }

/* Primary: the price tag off the blister card (same as the dock and the story's finale). */
.btn-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .58em 1.1em .5em .7em;
  border: 3px solid #050505;
  border-radius: .42em .9em .9em .42em;
  background: linear-gradient(var(--accent-hi), var(--accent) 55%, #4aa83b);
  box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgb(0 0 0 / .5);
  font: 400 clamp(18px, 1.8vw, 26px)/1 var(--f-logo);
  letter-spacing: .01em;
  color: #081606;
  text-decoration: none;
  rotate: -2deg;
  transition: rotate .35s var(--ease-out), translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn-tag:hover, .btn-tag:focus-visible { rotate: -.5deg; translate: 0 -3px; box-shadow: 0 0 0 3px #fff, 0 9px 0 3px rgb(0 0 0 / .45); }
.btn-tag:active { translate: 0 2px; box-shadow: 0 0 0 3px #fff, 0 3px 0 3px rgb(0 0 0 / .5); transition-duration: .08s; }
.btn-tag.is-busy { pointer-events: none; }
.btn-tag__hole {
  flex: none; width: .5em; height: .5em; border-radius: 50%; background: #050505;
  box-shadow: inset 0 .08em .1em rgb(255 255 255 / .25), 0 0 0 .1em rgb(0 0 0 / .18);
}
.btn-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
}
.btn-tag:hover::after, .btn-tag:focus-visible::after { background-position: -40% 0; transition: background-position .7s var(--ease-out); }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .72em 1.1em .64em;
  border: 2px solid rgb(255 255 255 / .9);
  border-radius: 999px;
  background: rgb(10 6 2 / .9);
  box-shadow: 0 4px 0 rgb(0 0 0 / .35);
  font: 400 clamp(11.5px, 1vw, 14px)/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: background-color .25s ease, translate .3s var(--ease-out);
}
.btn-pill::after { content: '\2193' / ''; font: 700 1.15em/1 var(--f-mono); translate: 0 -.04em; transition: translate .3s var(--ease-out); }
.btn-pill:hover, .btn-pill:focus-visible { background: #fff; color: var(--ink); translate: 0 -2px; }
.btn-pill:hover::after, .btn-pill:focus-visible::after { translate: 0 .16em; }

.btn-ink {
  padding: .86em 1.4em .76em;
  border: 3px solid #fff;
  border-radius: 12px;
  background: var(--ink);
  box-shadow: var(--hard);
  font: 400 14px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  transition: translate .18s var(--ease-out), background-color .2s ease;
}
.btn-ink:hover { background: var(--accent); color: #07150a; translate: 0 -2px; }

/* --------------------------------------------------------------------- top */

.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: clamp(66px, 8vh, 84px);
  padding: env(safe-area-inset-top) var(--gutter) 0;
  /* the fascia over the display: dark board, a strip of brand tape under it */
  background: linear-gradient(180deg, #17110b, #100b06);
  border-bottom: 3px solid #050505;
  box-shadow: 0 5px 0 var(--accent), 0 8px 0 #050505, 0 18px 24px -6px rgb(30 14 0 / .55);
}

/* The logo (src/core/logo.js): the head on its spring nods, the letters hop. */
.logo { display: block; width: clamp(132px, 13.5vw, 196px); text-decoration: none; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .45)); transition: rotate .3s var(--ease-out); }
.logo__svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo__svg--mark { display: none; } /* the mark alone: narrow phones, as on the other pages (css/nav.css) */
.logo:hover, .logo:focus-visible { rotate: -1.5deg; }
@keyframes logo-nod { 0%, 100% { rotate: 0deg; } 20% { rotate: 13deg; } 45% { rotate: -9deg; } 70% { rotate: 5deg; } 88% { rotate: -2deg; } }
@keyframes logo-hop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -7px; } 60% { translate: 0 2px; } }
.logo:hover .logo__head, .logo:focus-visible .logo__head { animation: logo-nod .9s ease-out; }
.logo:hover .logo__l, .logo:focus-visible .logo__l { animation: logo-hop .5s ease-out calc(var(--i) * 55ms); }

.nav { display: flex; align-items: center; gap: clamp(4px, .6vw, 8px); }
.nav__link {
  padding: .74em .95em .62em;
  border: 1.5px solid rgb(255 255 255 / .34);
  border-radius: 999px;
  background: rgb(0 0 0 / .5);
  font: 400 clamp(9.5px, 1.04vw, 15.6px)/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, translate .25s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { background: #fff; border-color: #fff; color: #050505; translate: 0 -1px; }
.nav__link[aria-current='page'] { border-color: #050505; background: var(--accent); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); color: #07150a; }
/* The Ticket Booth's link (raffle.html): roomy screens only, as in every header (css/nav.css). */
@media (max-width: 900px) { .nav__link--raffle { display: none; } }

/* The sound switch (collection/sound.js; the hub's switch, css/nav.css .site-sound):
   aria-pressed="true" = sound on (waves), "false" = muted (a cross). */
.snd {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  box-sizing: content-box;
  border: 1.5px solid rgb(255 255 255 / .34);
  border-radius: 50%;
  background: rgb(0 0 0 / .5);
  font: 400 clamp(9.5px, .86vw, 13px)/1 sans-serif;
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, translate .25s var(--ease-out);
}
.snd:hover, .snd:focus-visible { background: #fff; border-color: #fff; color: #050505; translate: 0 -1px; }
.snd__icon { display: block; width: 1.55em; height: 1.55em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd__horn { fill: currentColor; stroke-width: 1; }
.snd__cross { display: none; }
.snd[aria-pressed='false'] .snd__wave { display: none; }
.snd[aria-pressed='false'] .snd__cross { display: inline; }
.snd[aria-pressed='false']:not(:hover, :focus-visible) { color: rgb(255 255 255 / .62); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --fascia: clamp(66px, 8vh, 84px);
  --pb: clamp(30px, 4.6vh, 54px);
  --counter: calc(var(--pb) + 36px);
  padding: calc(var(--fascia) + clamp(22px, 3.4vh, 44px)) var(--gutter) var(--pb);
  background: #c4925a;
}
.hero__set { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The back wall: real boxes on lit shelves (collection/hero.js stocks it with
   the same boxes and the same shelves as the wall below, at a smaller scale).
   Sharp and bright; the depth comes from scale and overlap, not from blur. */
.hero__wall {
  --over: 0px;
  --board: 18px;
  position: absolute;
  inset: 0 0 var(--counter) 0;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle, rgb(66 38 12 / .3) 0 1.2px, transparent 1.7px) 0 0 / 18px 18px,
    linear-gradient(180deg, #e6bd80, #c4925a 45%, #a3723f);
}
.hero__wall .bx { cursor: pointer; }
.hero__wall .bx:hover { z-index: 3; transform: translateY(-.7em); }
/* air between the wall and what stands in front of it: a warm haze of light
   (the far boxes get paler, never darker or softer), thicker behind the copy */
.hero__wall::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 78% at 22% 56%, rgb(255 244 220 / .36), rgb(255 244 220 / .12) 62%, transparent 82%),
    linear-gradient(180deg, rgb(255 240 210 / .1), rgb(255 240 210 / .1));
}
/* the counter in front of the wall: the pulled box stands on it */
.hero__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--counter);
  background:
    radial-gradient(ellipse 30% 150% at 76% 30%, rgb(255 250 232 / .85), rgb(255 236 190 / 0) 70%),
    repeating-linear-gradient(90deg, transparent 0 220px, rgb(90 56 20 / .14) 220px 221px),
    linear-gradient(180deg, #fbe5b8 0, #f0d09c 3px, #e2bc82 55%, #cfa468 100%);
  box-shadow: 0 -12px 22px -8px rgb(40 20 4 / .55), inset 0 1px 0 rgb(255 255 255 / .7);
}
.hero__dust i {
  position: absolute;
  left: calc(52% + var(--x, 0) * 1%);
  top: calc(18% + var(--y, 0) * 1%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(255 226 170 / .7);
  opacity: 0;
  animation: dust 9s linear infinite;
  animation-delay: calc(var(--d, 0) * -1s);
}
.hero__dust i:nth-child(1) { --x: 14; --y: 6; --d: 1; }
.hero__dust i:nth-child(2) { --x: 22; --y: 30; --d: 3.5; }
.hero__dust i:nth-child(3) { --x: 30; --y: 12; --d: 6; }
.hero__dust i:nth-child(4) { --x: 18; --y: 44; --d: 2.2; }
.hero__dust i:nth-child(5) { --x: 36; --y: 26; --d: 7.4; }
.hero__dust i:nth-child(6) { --x: 26; --y: 52; --d: 4.8; }
.hero__dust i:nth-child(7) { --x: 10; --y: 22; --d: 8.1; width: 2px; height: 2px; }
.hero__dust i:nth-child(8) { --x: 33; --y: 40; --d: 5.3; width: 2px; height: 2px; }
.hero__dust i:nth-child(9) { --x: 20; --y: 16; --d: .4; width: 2px; height: 2px; }
.hero__dust i:nth-child(10) { --x: 28; --y: 34; --d: 6.9; }
.hero__dust i:nth-child(11) { --x: 16; --y: 58; --d: 3; width: 2px; height: 2px; }
.hero__dust i:nth-child(12) { --x: 38; --y: 8; --d: 1.8; }
@keyframes dust {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: .9; }
  80% { opacity: .5; }
  100% { opacity: 0; translate: 26px 70px; }
}

.hero__in {
  position: relative;
  pointer-events: none; /* the boxes of the back wall can be picked between the copy */
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr);
  align-items: end;
  gap: clamp(20px, 4vw, 70px);
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero__copy > *, .pick__slot, .cartons { pointer-events: auto; }
.hero__kicker { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: clamp(12px, 1.6vw, 20px); }
.hero__title {
  font: 400 clamp(46px, 7vw, 108px)/.86 var(--f-logo);
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  filter:
    drop-shadow(.045em 0 0 #fff) drop-shadow(-.045em 0 0 #fff)
    drop-shadow(0 .045em 0 #fff) drop-shadow(0 -.045em 0 #fff)
    drop-shadow(0 .09em 0 rgb(0 0 0 / .5)) drop-shadow(0 .2em .3em rgb(36 18 2 / .5));
  rotate: -2deg;
  transform-origin: 0 100%;
}
.stk { position: relative; display: block; width: max-content; isolation: isolate; white-space: nowrap; }
.stk::before { content: attr(data-text); position: absolute; inset: 0; z-index: -1; color: #000; -webkit-text-stroke: .19em #000; }
.stk--green { color: var(--accent); }
/* the lede: a black shelf label, so it reads over the lit wall */
.hero__lede { width: fit-content; max-width: 34em; margin-top: clamp(18px, 2.4vw, 30px); padding: .75em 1.05em .8em; border: 2px solid #050505; border-radius: 12px; background: rgb(18 13 8 / .94); box-shadow: 0 0 0 2px rgb(255 255 255 / .16), 0 5px 0 rgb(0 0 0 / .4); font: 600 clamp(14px, 1.2vw, 17.5px)/1.5 var(--f-ui); color: #f8f0e2; text-wrap: pretty; rotate: -.6deg; }

/* three shelf-edge labels */
.hero__stats { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(16px, 2vw, 24px); }
.stat {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 .6em;
  padding: .42em .8em .36em .7em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: linear-gradient(175deg, #fffefa, var(--paper) 45%, #f1ecdf);
  box-shadow: 0 0 0 2px rgb(255 255 255 / .1), var(--hard);
  color: var(--ink);
  rotate: -.8deg;
}
.stat:nth-child(2) { rotate: .7deg; }
.stat b { font: 400 clamp(20px, 2.1vw, 30px)/1 var(--f-block); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat span { max-width: 7.5em; font: 700 clamp(9px, .78vw, 10.5px)/1.25 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.stat--grail { border-color: #050505; background: #0c0c0c; color: #ffe9a8; rotate: 1deg; }
.stat--grail b { background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat--grail span { color: #cdb679; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: min(100%, calc(34 * clamp(14px, 1.2vw, 17.5px))); gap: 14px 22px; margin-top: clamp(24px, 3vw, 38px); }
.hero__actions [hidden] { display: none; }

@keyframes slap { 0% { opacity: 0; scale: 1.2; rotate: -7deg; } 55% { opacity: 1; scale: .975; rotate: -1.3deg; } 100% { opacity: 1; scale: 1; rotate: -2deg; } }
@keyframes pop { 0% { opacity: 0; scale: .5; } 70% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.hero__title { animation: slap .75s var(--ease-out) .1s both; }
.hero__kicker .chip { animation: pop .5s var(--ease-out) .45s both; }
.hero__kicker .chip:nth-child(2) { animation-delay: .55s; }
.hero__lede { animation: rise .8s var(--ease-out) .55s both; }
.hero__stats { animation: rise .8s var(--ease-out) .65s both; }
.hero__actions { animation: rise .8s var(--ease-out) .75s both; }
.top .logo, .top .nav { animation: rise .7s var(--ease-out) .05s both; }

/* the pulled box, on two cartons, under the stock lamp */
.hero__pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-self: center; width: min(100%, 360px); animation: rise .9s var(--ease-out) .3s both; }
.lamp { position: absolute; left: 50%; top: -994px; width: 0; height: 0; transform-origin: 0 0; animation: sway 7s ease-in-out infinite; pointer-events: none; }
.lamp__cord { position: absolute; left: -1.5px; top: 0; width: 3px; height: 900px; background: #060403; }
.lamp__shade {
  position: absolute; left: -62px; top: 896px; width: 124px; height: 44px;
  background: linear-gradient(100deg, #1d5d1a, #57b947 30%, #7ad866 46%, #2f7d2a 78%, #164713);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.lamp__shade { filter: drop-shadow(0 2.5px 0 #050505) drop-shadow(0 -2.5px 0 #050505) drop-shadow(2.5px 0 0 #050505) drop-shadow(-2.5px 0 0 #050505) drop-shadow(0 8px 10px rgb(40 20 4 / .4)); }
.lamp__shade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgb(0 0 0 / .35); }
.lamp__bulb { position: absolute; left: -17px; top: 934px; width: 34px; height: 16px; border-radius: 50%; background: #fffbe8; box-shadow: 0 0 30px 14px rgb(255 232 170 / .95), 0 0 110px 46px rgb(255 214 140 / .55); }
.lamp__cone {
  position: absolute; left: -330px; top: 940px; width: 660px; height: 620px;
  background: linear-gradient(180deg, rgb(255 248 222 / .5), rgb(255 244 214 / .2) 60%, transparent 96%);
  clip-path: polygon(45.5% 0, 54.5% 0, 100% 100%, 0 100%);
}
@keyframes sway { 0%, 100% { rotate: -1deg; } 50% { rotate: 1deg; } }

.pick { position: relative; z-index: 2; display: grid; justify-items: center; width: 100%; perspective: 1100px; }
/* the shadow the pulled box throws on the wall behind it */
.pick::before { content: ''; position: absolute; left: 50%; top: 9%; width: calc(var(--pw) * .96); height: calc(var(--pw) * 1.3); margin-left: calc(var(--pw) * -.4); border-radius: 12px; background: rgb(46 24 4 / .5); filter: blur(22px); pointer-events: none; }
.hero__pick { --pw: clamp(160px, 18vw, 250px); }
.pick__slot { --bw: var(--pw); position: relative; width: var(--bw); height: calc(var(--bw) * 1.4); transform-style: preserve-3d; animation: idle 8s ease-in-out infinite; }
@keyframes idle { 0%, 100% { transform: rotateY(-25deg); } 50% { transform: rotateY(-11deg); } }
.pick.is-pulling .pick__slot { animation: shuffle .26s linear infinite; }
.pick.is-landed .pick__slot { animation: land .43s var(--ease-back) both; }
@keyframes shuffle { 0% { transform: rotateY(-24deg) translateY(0); } 50% { transform: rotateY(-8deg) translateY(-10px) rotateZ(1.5deg); } 100% { transform: rotateY(-24deg) translateY(0); } }
@keyframes land { 0% { transform: rotateY(-24deg) scale(1); } 45% { transform: rotateY(0deg) scale(1.1); } 100% { transform: rotateY(0deg) scale(1.03); } }
.pick__shadow { width: 76%; height: 16px; margin-top: -8px; border-radius: 50%; background: rgb(40 20 4 / .6); filter: blur(7px); }
.pick__tag {
  position: absolute; z-index: 3; right: -4%; top: 4%;
  padding: .5em .8em .45em 1.3em;
  background: #f6f2e7; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 4px 9px 9px 4px;
  font: 400 clamp(11px, 1vw, 14px)/1 var(--f-script);
  box-shadow: var(--hard);
  rotate: 7deg;
  white-space: nowrap;
}
.pick__tag::before { content: ''; position: absolute; left: .45em; top: 50%; width: .42em; height: .42em; margin-top: -.21em; border-radius: 50%; background: var(--ink); }

.cartons { position: relative; z-index: 1; width: 100%; height: clamp(58px, 8vw, 96px); margin-top: -4px; }
.carton {
  position: absolute; bottom: 0;
  display: grid; place-items: center;
  background-color: #b98d5a;
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 9px), linear-gradient(180deg, rgb(255 236 200 / .22), rgb(60 34 10 / .28));
  box-shadow: inset 0 0 0 2px rgb(40 22 6 / .78), 0 12px 14px -8px rgb(40 20 4 / .7);
  color: rgb(38 24 12 / .86);
}
.carton b { font: 400 clamp(8px, .8vw, 11px)/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; }
.carton--a { left: 4%; width: 74%; height: 100%; }
.carton--a b { margin-left: 46%; }
.carton--b { right: 0; width: 34%; height: 62%; rotate: 2deg; background-color: #a87d4c; }
.carton__tape { position: absolute; top: 0; bottom: 0; left: 22%; width: 22%; background: linear-gradient(90deg, #2f7d2a 0 9%, rgb(232 255 224 / .5) 9% 11%, #57b947 11% 89%, rgb(232 255 224 / .5) 89% 91%, #2f7d2a 91%); opacity: .92; }
.carton--b .carton__tape { left: 60%; width: 26%; }
.carton--b b { margin-right: 36%; }

/* ------------------------------------------------------------------- vault */

/* The grail vault (collection/vault.js): a glass cabinet at the back of the
   stockroom. Black lacquer frame with a brass edge, oxblood velvet, a lamp
   rail with one spot per grail; every grail stands on a lacquer plinth with a
   brass plaque, on glass shelves. */
.vault {
  position: relative;
  padding: clamp(40px, 5.6vw, 80px) var(--gutter) clamp(46px, 6vw, 88px);
  border-top: 3px solid #050505;
  background:
    radial-gradient(ellipse 56% 62% at 50% 46%, rgb(255 190 110 / .1), transparent 72%),
    repeating-linear-gradient(90deg, rgb(255 236 200 / .022) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #0f0905, #1a110a 42%, #140c06);
  overflow: hidden;
}
.vault__in { max-width: var(--maxw); margin: 0 auto; }
.vault__head { display: grid; justify-items: center; gap: clamp(12px, 1.4vw, 18px); margin-bottom: clamp(24px, 3vw, 40px); text-align: center; }
.vault__kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.chip--gold { background: var(--gold-foil); rotate: 1.5deg; }
.vault__title { font: 400 clamp(38px, 5.4vw, 82px)/.9 var(--f-logo); letter-spacing: -.012em; text-transform: uppercase; rotate: -1.2deg; filter: drop-shadow(0 .07em 0 rgb(0 0 0 / .55)) drop-shadow(0 0 .45em rgb(255 196 90 / .28)); }
.vault__title .stk { margin: 0 auto; }
.stk--gold { color: #ffd76a; }
.stk--gold::before { -webkit-text-stroke-width: .17em; }
.vault__lede { max-width: 36em; padding: .7em 1.05em .75em; border: 1.5px solid rgb(255 224 138 / .28); border-radius: 12px; background: rgb(10 6 3 / .72); font: 600 clamp(14px, 1.1vw, 16.5px)/1.5 var(--f-ui); color: #f3e6cc; text-wrap: pretty; }
.vault__swipe { display: none; }

.case {
  --cols: 6;
  --gx: clamp(8px, 1.3vw, 22px);
  position: relative;
  padding: 30px clamp(14px, 2.2vw, 34px) 26px;
  border: 12px solid #0b0806;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 220 220 / .03) 0 .6px, transparent 1px) 0 0 / 4px 4px,
    radial-gradient(ellipse 90% 55% at 50% 0, rgb(130 30 44 / .5), transparent 72%),
    linear-gradient(180deg, #3a0c15, #26070d 55%, #170409);
  box-shadow:
    inset 0 0 0 2px #b8913f, inset 0 0 0 3.5px #3a2a10,
    inset 0 34px 50px -24px rgb(0 0 0 / .85), inset 0 -30px 40px -26px rgb(0 0 0 / .8),
    0 0 0 1px rgb(255 224 138 / .22), 0 34px 60px -22px rgb(0 0 0 / .95), 0 0 110px rgb(255 190 100 / .07);
}
/* the lamp rail along the top of the case */
.case__rail { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 12px; background: linear-gradient(180deg, #f2d48a, #b8913f 45%, #6e5220); box-shadow: 0 3px 6px rgb(0 0 0 / .6); pointer-events: none; }
.case__row { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 40px var(--gx); }

.vt { --bw: clamp(94px, 9.2vw, 150px); position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 34px; }
/* its lamp on the rail, and the cone of light it throws on the grail */
.vt::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -30px;
  z-index: 4;
  width: 30px;
  height: 16px;
  margin-left: -15px;
  border-radius: 3px 3px 9px 9px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, #fffbe6 0 40%, transparent 70%), linear-gradient(90deg, #5d4416, #e8c46e 40%, #8a6420);
  box-shadow: 0 8px 20px 5px rgb(255 228 168 / .42);
}
.vt__spot {
  position: absolute;
  left: 50%;
  top: -16px;
  bottom: 0;
  z-index: 0;
  width: calc(var(--bw) * 2);
  margin-left: calc(var(--bw) * -1);
  background: linear-gradient(180deg, rgb(255 244 214 / .42), rgb(255 236 196 / .14) 72%, transparent 96%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: .5;
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}
/* pointing at a grail switches its lamp fully on: a short flicker like a real bulb striking, a much brighter cone,
   a flare on the lamp and a warm rim on the box (the owner wanted the light coming on to be clearly visible) */
.vt.is-lit .vt__spot { opacity: 1; filter: brightness(1.9) saturate(1.15); animation: spot-on .5s linear both; }
.vt.is-lit::before { box-shadow: 0 10px 34px 12px rgb(255 232 170 / .9), 0 0 70px 26px rgb(255 214 140 / .45); animation: bulb-on .5s linear both; }
.vt.is-lit .bx__body { filter: brightness(1.14); box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 1em 1em -.5em rgb(0 0 0 / .85), 0 0 3.4em .6em rgb(255 226 160 / .55), 0 0 2.6em .2em var(--glow); }
.vt .bx__body { transition: filter .35s ease, box-shadow .35s ease; }
@keyframes spot-on { 0% { opacity: .5; } 10% { opacity: 1; } 20% { opacity: .55; } 32% { opacity: 1; } 42% { opacity: .8; } 100% { opacity: 1; } }
@keyframes bulb-on { 0% { filter: brightness(1); } 10% { filter: brightness(2.2); } 20% { filter: brightness(1.1); } 32% { filter: brightness(2.4); } 100% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { .vt.is-lit .vt__spot, .vt.is-lit::before { animation: none; } }
.vt__stand { position: relative; z-index: 2; width: var(--bw); height: calc(var(--bw) * 1.4); margin-bottom: -6px; }
.vt .bx { --ew: .7em; left: 0; bottom: 0; cursor: pointer; }
.vt .bx__body { box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 1em 1em -.5em rgb(0 0 0 / .85), 0 0 2.6em .2em var(--glow); }
.vt .bx:hover, .vt .bx:focus-visible { z-index: 3; transform: perspective(60em) translateY(-.9em) rotateY(-14deg); }
.vt .bx:focus-visible .bx__body { box-shadow: 0 0 0 .22em #fff, 0 0 0 .5em var(--blue), 0 1em 1em -.5em rgb(0 0 0 / .9); }
.vt .bx[data-tier='grail'] .bx__win::before { animation: glint 6.4s ease-in-out calc(var(--k, 0) * .53s) infinite; }
.vt .bx.is-out { transform: none; }
.vt .bx.is-out::after { inset: 2em 0 0 0; border: .16em dashed rgb(255 224 138 / .35); border-image: none; background: rgb(0 0 0 / .25); }
.vt .bx.is-back { animation: put-back .45s var(--ease-back); }
/* the plinth: velvet top, brass trim, black lacquer, the plaque on its front */
.vt__plinth {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: calc(var(--bw) * 1.34);
  padding: 15px 9px 12px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .06), transparent 12%, transparent 86%, rgb(0 0 0 / .45)),
    linear-gradient(180deg, #221a14, #0d0a08 70%);
  box-shadow: 0 16px 18px -8px rgb(0 0 0 / .8), inset 0 -2px 0 rgb(255 224 138 / .2);
}
.vt__plinth::before {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: -11px;
  height: 13px;
  background: radial-gradient(ellipse 46% 120% at 50% 0, rgb(255 236 200 / .4), transparent 70%), linear-gradient(180deg, #6a1826, #34080f);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
}
.vt__plinth::after { content: ''; position: absolute; left: -4%; right: -4%; top: 2px; height: 4px; background: linear-gradient(90deg, #6e5220, #f2d48a 30%, #b8913f 60%, #6e5220); box-shadow: 0 2px 3px rgb(0 0 0 / .6); }
.vt__plaque {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 7px 10px 8px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 6px 7px, #5a3c0c 0 1.6px, rgb(255 240 200 / .7) 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 6px) 7px, #5a3c0c 0 1.6px, rgb(255 240 200 / .7) 2px, transparent 2.6px),
    linear-gradient(160deg, #f6dc8c, #c9a04a 40%, #e7c56f 62%, #a37a2c);
  box-shadow: inset 0 0 0 1px rgb(255 248 220 / .55), inset 0 -1px 0 rgb(80 50 10 / .6), 0 2px 3px rgb(0 0 0 / .65);
  color: #2a1a05;
  text-align: center;
}
.vt__no { font: 700 8.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #5a3c0c; }
.vt__name { font: 400 clamp(10.5px, .92vw, 13.5px)/1.08 var(--f-block); letter-spacing: .01em; text-transform: uppercase; color: #1f1303; text-shadow: 0 1px 0 rgb(255 245 210 / .55); text-wrap: balance; }
.vt__lore { font: 600 clamp(10px, .76vw, 11.5px)/1.32 var(--f-ui); color: #3b2808; text-wrap: balance; }
/* the glass: a few reflections and a slow sheen that crosses now and then */
.case__glass {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: 4px;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 0 7%, rgb(255 255 255 / .06) 7% 12%, transparent 12% 14%, rgb(255 255 255 / .035) 14% 16%, transparent 16%),
    linear-gradient(104deg, transparent 0 63%, rgb(255 255 255 / .045) 63% 71%, transparent 71%),
    linear-gradient(180deg, rgb(255 255 255 / .05), transparent 28%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 0 50px rgb(150 190 230 / .05);
}
.case__glass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(104deg, transparent 38%, rgb(255 255 255 / .08) 50%, transparent 62%); transform: translateX(-100%); animation: case-sheen 12s ease-in-out 2s infinite; }
@keyframes case-sheen { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* the glass shelves the plinths stand on */
.vt::after {
  content: '';
  position: absolute;
  left: calc(var(--gx) / -2 - 1px);
  right: calc(var(--gx) / -2 - 1px);
  bottom: -12px;
  height: 12px;
  border-top: 1.5px solid rgb(236 248 255 / .55);
  background: linear-gradient(180deg, rgb(200 230 250 / .22), rgb(140 180 210 / .06));
  box-shadow: 0 10px 16px -4px rgb(0 0 0 / .7);
  pointer-events: none;
}

@media (max-width: 1099px) {
  .case { --cols: 4; }
  .vt { --bw: clamp(100px, 15vw, 150px); }
  .vt__lore { font-size: 11px; }
}

/* -------------------------------------------------------------------- find */

.find {
  position: sticky;
  top: 0;
  z-index: 30;
  border-top: 3px solid #050505;
  border-bottom: 3px solid #050505;
  background-color: var(--kraft);
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgb(255 240 214 / .2), rgb(70 40 10 / .12));
  box-shadow: 0 14px 26px -10px rgb(0 0 0 / .85);
  color: var(--ink);
}
.find__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  min-height: 62px;
  margin: 0 auto;
  padding: 9px var(--gutter);
}
.find__title { display: none; margin-right: 6px; font: 400 15px/1 var(--f-block); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.find :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px #fff; }

/* the search: a white label with a black "BOX No." tab */
.lbl {
  flex: 1 1 170px;
  display: flex;
  align-items: stretch;
  min-width: 0;
  max-width: 290px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--hard);
  overflow: hidden;
  cursor: text;
}
.lbl:focus-within { box-shadow: var(--hard), 0 0 0 3px var(--paper), 0 0 0 6px var(--accent-dark); }
.lbl__k { flex: none; display: grid; place-items: center; padding: 0 9px; background: var(--ink); font: 400 10px/1 var(--f-block); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.lbl__in { flex: 1; min-width: 0; padding: 0 4px 0 10px; border: 0; background: none; font: 700 14px/1 var(--f-mono); color: var(--ink); outline: none; }
.lbl__in::placeholder { font-weight: 400; color: #8a8273; }
.lbl__x { flex: none; width: 34px; font: 700 20px/1 var(--f-mono); color: var(--ink-2); }
.lbl__x:hover { color: var(--red); }

/* stockroom labels: tiers, the grail switch, chapters */
.find__tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.find__bar .find__tiers { flex-wrap: nowrap; }
.find__bar > :not(.lbl) { flex: none; }
.find__bar .lbl { flex: 1 1 110px; min-width: 92px; }
@media (min-width: 1280px) and (max-width: 1379px) { .find__bar { gap: 7px; } .find__bar .tag, .find__bar .tab { padding-left: .62em; } .find__bar .tag { padding-right: .62em; } .find__bar .find__size .ic { width: 26px; } }
@media (max-width: 1519px) { .find__bar .tag--tier .tag__n { display: none; } }
@media (max-width: 1439px) { .find__bar .lbl__k { display: none; } .find__bar .tag--grail span { display: none; } }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  height: 38px;
  padding: 0 .8em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 0 rgb(0 0 0 / .3);
  font: 400 11.5px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: translate .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s ease, color .18s ease;
}
.tag:hover { translate: 0 -2px; box-shadow: 0 5px 0 rgb(0 0 0 / .28); }
.tag:active { translate: 0 2px; box-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.tag[aria-pressed='true'] { background: var(--ink); color: #fff; translate: 0 2px; box-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.tag__dot { flex: none; width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 3px; background: var(--t-common); }
.tag[aria-pressed='true'] .tag__dot { border-color: #fff; }
.tag[data-tier='rare'] .tag__dot { background: var(--t-rare); }
.tag[data-tier='epic'] .tag__dot { background: var(--t-epic); }
.tag[data-tier='legendary'] .tag__dot { background: var(--t-legendary); }
.tag__n { font: 700 10.5px/1 var(--f-mono); letter-spacing: 0; color: var(--ink-3); }
.tag[aria-pressed='true'] .tag__n { color: #cfc6b4; }
.tag.is-dim:not([aria-pressed='true']) { opacity: .55; }
.tag.is-zero { opacity: .45; }
.tag__no { font: 700 10.5px/1 var(--f-mono); font-style: normal; color: var(--accent-dark); }
.tag[aria-pressed='true'] .tag__no { color: var(--accent-hi); }
.tag--grail { border-color: #050505; background: var(--gold-foil); }
.tag--grail { gap: .4em; }
.tag--grail i { font-style: normal; font-size: 1.15em; translate: 0 -.04em; }
.tag--grail span { margin-left: -.4em; }
.tag--grail[aria-pressed='true'] { background: #0b0b0b; color: #ffe08a; }

/* drawer tags: Chapter, Traits, Filters */
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 38px;
  padding: 0 1.9em 0 .85em;
  border: 2px solid var(--ink);
  border-radius: 8px 8px 3px 3px;
  background: var(--kraft-hi);
  box-shadow: inset 0 -5px 0 rgb(70 40 10 / .16), 0 3px 0 rgb(0 0 0 / .3);
  font: 400 11.5px/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: translate .18s var(--ease-out), background-color .18s ease;
}
.tab::after { content: ''; position: absolute; right: .75em; top: 50%; width: .5em; height: .5em; margin-top: -.42em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; transition: rotate .25s var(--ease-out), margin .25s var(--ease-out); }
.tab:hover { translate: 0 -2px; background: #ecd6b4; }
.tab[aria-expanded='true'] { background: var(--accent); translate: 0 2px; box-shadow: inset 0 -5px 0 rgb(0 60 0 / .16), 0 1px 0 rgb(0 0 0 / .3); }
.tab[aria-expanded='true']::after { rotate: -135deg; margin-top: -.1em; }
.tab b { min-width: 1.5em; padding: .22em .4em .14em; border-radius: 99px; background: var(--ink); font: 700 10.5px/1 var(--f-mono); color: #fff; text-align: center; }
.tab b:empty { display: none; }

.find__sort { display: flex; margin-left: auto; border: 2px solid var(--ink); border-radius: 8px; background: #fff; box-shadow: 0 3px 0 rgb(0 0 0 / .3); overflow: hidden; }
.sw { display: inline-flex; align-items: center; gap: .3em; height: 34px; padding: 0 .75em; font: 400 11px/1 var(--f-block); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.sw + .sw { border-left: 2px solid var(--ink); }
.sw:hover { background: var(--paper-2); color: var(--ink); }
.sw[aria-pressed='true'] { background: var(--ink); color: #fff; }
.sw i { width: .8em; font: 700 12px/1 var(--f-mono); font-style: normal; color: var(--accent-hi); }
.sw:focus-visible { outline-offset: -5px; box-shadow: none; }

.find__size { display: flex; gap: 2px; }
.ic { display: inline-grid; place-items: center; width: 30px; height: 34px; border-radius: 6px; color: rgb(20 17 13 / .42); transition: color .15s, background-color .15s; }
.ic svg { width: 13px; height: 13px; fill: currentColor; }
.ic:hover { color: var(--ink); }
.ic[aria-pressed='true'] { color: var(--ink); background: rgb(255 255 255 / .5); }

/* the count: a stock counter */
.find__count { display: flex; align-items: baseline; gap: .6em; padding: .55em .8em .45em; border-radius: 8px; background: #0e0b08; box-shadow: inset 0 2px 0 rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / .3); white-space: nowrap; }
.find__count b { font: 700 18px/1 var(--f-mono); color: var(--accent-hi); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgb(122 216 102 / .5); }
.find__count span { font: 700 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #a89c86; }
.find__narrow { display: none; }

/* active filters: small labels that peel off */
.find__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: -2px auto 0; padding: 0 var(--gutter) 9px; }
.chipx { display: inline-flex; align-items: center; gap: .5em; height: 26px; padding: 0 .6em 0 .7em; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--paper); font: 600 12px/1 var(--f-ui); white-space: nowrap; color: var(--ink); transition: background-color .15s, rotate .2s var(--ease-out); }
.chipx:hover { background: #ffe9e5; rotate: -1.5deg; }
.chipx__k { font: 700 9.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.chipx svg { width: 8px; height: 8px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.chipx--clear { border-style: dashed; background: none; font: 400 10px/1 var(--f-block); letter-spacing: .05em; text-transform: uppercase; }

/* the drawer: pulled out under the bar */
.drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 3px;
  max-height: min(64vh, 480px);
  padding: 18px max(var(--gutter), calc((100% - var(--maxw)) / 2)) 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 3px solid #050505;
  background-color: #b8925f;
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .04) 0 2px, transparent 2px 9px), linear-gradient(180deg, rgb(40 22 6 / .34), transparent 22px);
  box-shadow: 0 26px 40px -14px rgb(0 0 0 / .9);
  outline: none;
  animation: drawer .3s var(--ease-out) both;
}
@keyframes drawer { from { opacity: 0; translate: 0 -12px; } }
.drawer__head { display: none; }
.drawer__h { margin-bottom: 10px; font: 400 12px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; color: rgb(20 17 13 / .7); }
.drawer[data-panel='chapter'] .drawer__sec:not([data-sec='chapter']),
.drawer[data-panel='traits'] .drawer__sec:not([data-sec='traits']) { display: none; }
.drawer__chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 8px; }
.drawer__chapters .tag { justify-content: flex-start; }
.drawer__chapters .tag__n { margin-left: auto; }

.traits { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0 22px; }
.traits__types { display: flex; flex-direction: column; gap: 4px; }
.traits__values { align-self: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)); gap: 4px 12px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: var(--hard); }
.tr { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; break-inside: avoid; }
.tr__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr__n { margin-left: auto; font: 700 10.5px/1 var(--f-mono); color: var(--ink-3); }
.tr--type { height: 30px; padding: 0 10px; border: 2px solid transparent; border-radius: 7px; font: 400 11px/1 var(--f-block); letter-spacing: .04em; text-transform: uppercase; color: rgb(20 17 13 / .78); transition: background-color .15s; }
.tr--type:hover { background: rgb(255 255 255 / .28); }
.tr--type[aria-current='true'] { border-color: var(--ink); background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 rgb(0 0 0 / .28); }
.tr--type.has-pick .tr__n { padding: .22em .45em .14em; border-radius: 99px; background: var(--accent-dark); color: #fff; }
/* a trait value: its picture (a crop out of the icon atlas), its name, a rarity bar, the count on the shelves */
.tr--value { --ic: 46px; min-height: 56px; padding: 5px 8px 5px 5px; border-radius: 8px; font: 600 13px/1.2 var(--f-ui); color: var(--ink); transition: background-color .12s, color .12s; }
.tr--value:hover { background: var(--paper-2); }
.tr--value:hover .tr__ic { translate: 0 -1px; rotate: -2deg; }
.tr--value[aria-pressed='true'] { background: var(--ink); color: #fff; font-weight: 800; }
.tr--value[aria-pressed='true'] .tr__n, .tr--value[aria-pressed='true'] .tr__share { color: #cfc6b4; }
.tr--value[aria-pressed='true'] .tr__bar { background: rgb(255 255 255 / .18); }
.tr--value.is-zero { color: #a59b89; }
.tr--value.is-zero .tr__ic { opacity: .45; filter: grayscale(.7); }
.tr__ic {
  position: relative;
  flex: none;
  width: var(--ic);
  height: var(--ic);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, #e6dcc6 0 4px, #efe7d4 4px 8px);
  box-shadow: 0 2px 0 rgb(0 0 0 / .22);
  transition: translate .18s var(--ease-out), rotate .18s var(--ease-out);
}
.tr__ic.has-pic {
  background: var(--atlas) calc(var(--ix) * var(--ic) * -1) calc(var(--iy) * var(--ic) * -1) / calc(var(--atlas-cols) * var(--ic)) calc(var(--atlas-rows) * var(--ic)) no-repeat border-box, #d8cdb6;
}
/* an empty slot ("None", "Empty Hands"): a dashed ring, struck through */
.tr__ic.is-blank { background: #f6f2e7; }
.tr__ic.is-blank::before { content: ''; position: absolute; inset: 7px; border: 2px dashed rgb(20 17 13 / .38); border-radius: 50%; background: linear-gradient(135deg, transparent 46%, rgb(20 17 13 / .38) 46% 54%, transparent 54%); }
/* picked: a green check badge on the picture */
.tr--value[aria-pressed='true'] .tr__ic { border-color: #fff; }
.tr--value[aria-pressed='true'] .tr__ic::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -6px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.8 5.2l2.2 2.3L8.3 2.8' fill='none' stroke='%2314110d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  box-shadow: 0 0 0 2px var(--ink);
}
.tr__txt { flex: 1; min-width: 0; display: grid; gap: 5px; }
.tr__meta { display: flex; align-items: center; gap: 7px; }
.tr__bar { --rc: var(--t-common); position: relative; flex: 0 1 64px; height: 6px; border-radius: 3px; background: rgb(20 17 13 / .12); overflow: hidden; }
.tr__bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit; background: var(--rc); }
.tr--value[data-r='rare'] .tr__bar { --rc: var(--t-rare); }
.tr--value[data-r='epic'] .tr__bar { --rc: var(--t-epic); }
.tr--value[data-r='legendary'] .tr__bar { --rc: linear-gradient(90deg, #d79a1c, var(--t-legendary)); }
.tr__share { font: 700 9.5px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr--value .tr__n { align-self: center; }
.scrim { display: none; }

/* --------------------------------------------------------------- stockroom */

.stockroom {
  position: relative;
  min-height: 72vh;
  padding: 26px var(--gutter) 90px;
  background-color: #2a1c10;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 236 200 / .03) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, rgb(0 0 0 / .35), transparent 120px);
  overflow: hidden;
}
/* the racking uprights */
.stockroom::before, .stockroom::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(calc(var(--gutter) - var(--over) - 16px), calc((100% - var(--maxw)) / 2 - var(--over) - 16px));
  width: 16px;
  background:
    radial-gradient(circle at 50% 50%, #07090c 0 2.6px, transparent 3.2px) 0 0 / 100% 26px,
    linear-gradient(90deg, #222a33, #4c5866 38%, #2c343f 70%, #171c23);
  box-shadow: 4px 0 10px rgb(0 0 0 / .5);
}
.stockroom::after { left: auto; right: max(calc(var(--gutter) - var(--over) - 16px), calc((100% - var(--maxw)) / 2 - var(--over) - 16px)); box-shadow: -4px 0 10px rgb(0 0 0 / .5); }

.wall { --bw: 168px; --row-h: 300px; --board: 32px; --head: 38px; position: relative; max-width: var(--maxw); margin: 0 auto; outline: none; }
/* the top board of the rack: the first shelf's lights hang under it */
.wall::before { content: ''; position: absolute; left: calc(-1 * var(--over)); right: calc(-1 * var(--over)); top: -14px; height: 14px; background: linear-gradient(180deg, #e9c58c 0, #d6ab6e 5px, #b98a4d 5px, #94693a 100%); box-shadow: 0 2px 0 rgb(40 20 4 / .55); }
.is-loading .wall::before { display: none; }
.is-loading .wall {
  min-height: 130vh;
  background: repeating-linear-gradient(180deg, transparent 0 268px, var(--wood-hi) 268px 278px, var(--wood-lo) 278px 300px);
  opacity: .5;
  animation: stocking 1.4s ease-in-out infinite alternate;
}
@keyframes stocking { to { opacity: .28; } }

/* A lit store display. Every shelf has an LED strip under the board above, one
   segment over each box (--pitch / --x0 / --gap come from the layout): it
   throws a pool of light on the pegboard behind the box and on the board. */
.shelf { --lx: calc(var(--x0, 0px) - var(--gap, 0px) / 2 + var(--over)); position: absolute; left: 0; right: 0; top: 0; height: var(--row-h); }
.shelf:hover { z-index: 2; }
.shelf:focus-within { z-index: 3; }
.shelf::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--over));
  right: calc(-1 * var(--over));
  top: 0;
  bottom: var(--board);
  background:
    radial-gradient(ellipse 62% 94% at 50% 0, rgb(255 248 226 / .86), rgb(255 230 176 / .44) 40%, rgb(255 216 152 / 0) 78%) var(--lx) 0 / var(--pitch, 200px) 100% repeat-x,
    radial-gradient(circle, rgb(66 38 12 / .3) 0 1.2px, transparent 1.7px) 0 0 / 18px 18px,
    linear-gradient(180deg, #e6bd80, #c4925a 45%, #a3723f);
}
.shelf::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--over));
  right: calc(-1 * var(--over));
  top: 0;
  height: 6px;
  background:
    linear-gradient(90deg, transparent 0 15%, #fffdf3 15% 85%, transparent 85%) var(--lx) 0 / var(--pitch, 200px) 100% repeat-x,
    linear-gradient(180deg, #3b2c1c, #5a452d);
  box-shadow: 0 3px 28px 7px rgb(255 226 160 / .8), 0 1px 5px 1px rgb(255 246 220 / .95);
}
.shelf__bay { position: absolute; inset: 0; z-index: 1; }
/* the board: plywood, seen a little from above; the lip carries the locator labels */
.shelf__board {
  position: absolute;
  left: calc(-1 * var(--over));
  right: calc(-1 * var(--over));
  bottom: 0;
  height: var(--board);
  background:
    radial-gradient(ellipse 46% 100% at 50% 0, rgb(255 253 242 / .95), rgb(255 242 204 / 0) 74%) var(--lx) 0 / var(--pitch, 200px) 11px repeat-x,
    repeating-linear-gradient(90deg, rgb(90 56 20 / .0) 0 180px, rgb(90 56 20 / .16) 180px 181px),
    linear-gradient(180deg, #e3bd82 0, #f0d39f 2px, #e2bb80 10px, #fbe5b8 10px, #dcb277 12px, #cda064 15px, #c4965a 20px, #b0834a 100%);
  box-shadow: 0 14px 16px -8px rgb(40 20 4 / .75), 0 2px 0 rgb(40 20 4 / .5);
}
.shelf__tag {
  position: absolute;
  left: calc(var(--over) + 2px);
  bottom: 3px;
  height: 14px;
  padding: 0 6px;
  border-radius: 2px;
  background: #f6f2e7;
  box-shadow: 0 0 0 1.5px rgb(30 18 6 / .7);
  font: 700 9px/14.5px var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.shelf__tag--r { left: auto; right: calc(var(--over) + 2px); background: #ffd24a; }
.wall[data-size='s'] .shelf__tag { bottom: 2px; height: 12px; font-size: 8px; line-height: 12.5px; }

/* --------------------------------------------------------------------- box */

.bx, .ob {
  /* Factory green: the common box */
  --hd: #57b947;
  --hd2: #46a53a;
  --hd-bg: var(--hd);
  --base: #d9eed6;
  --band-a: #8cc8ea;
  --band-b: #4a90d9;
  --pl: #101010;
  --pl-ink: #f4f4f0;
  --tc: var(--t-common);
  --tc-ink: #07150a;
  --word: #fff;
  --word-ink: #0b2408;
  --frame: #f6f6f0;
  --rail-ink: #164d19;
  --hex: #e8b84a;
  --foil: none;
  --glow: rgb(0 0 0 / 0);
}
.bx[data-tier='rare'], .ob[data-tier='rare'] {
  --hd: #3d92ee; --hd2: #2a76cf; --base: #d6e8fb; --band-a: #ffd24a; --band-b: #ff8a3d;
  --pl: #091a33; --tc: var(--t-rare); --tc-ink: #041428; --word-ink: #06204a; --rail-ink: #174a8f; --hex: #dfe9f5;
  --foil: linear-gradient(135deg, #f4faff, #7fb6f2 28%, #ffffff 50%, #6aa4ea 72%, #f4faff) 1;
  --glow: rgb(79 168 255 / .16);
}
.bx[data-tier='epic'], .ob[data-tier='epic'] {
  --hd: #9a5cf2; --hd2: #7b3fd9; --base: #e9defF; --band-a: #ff5fd8; --band-b: #45f0a0;
  --pl: #180b30; --tc: var(--t-epic); --tc-ink: #1a0638; --word-ink: #24074f; --rail-ink: #53309f; --hex: #ffd6f6;
  --foil: var(--holo) 1;
  --glow: rgb(181 101 255 / .24);
}
.bx[data-tier='legendary'], .ob[data-tier='legendary'] {
  --hd: #e8b84a; --hd2: rgb(120 80 10 / .35); --hd-bg: var(--gold-foil); --base: #1a140b; --band-a: #e8b84a; --band-b: #7b5a17;
  --pl: #0c0904; --pl-ink: #ffe9a8; --tc: var(--t-legendary); --tc-ink: #2a1c02; --word: #fff8de; --word-ink: #3b2803; --frame: #ffd76a; --rail-ink: #ffd76a; --hex: #fff3c4;
  --foil: var(--gold-foil) 1;
  --glow: rgb(255 194 61 / .34);
}
.bx[data-tier='grail'], .ob[data-tier='grail'] {
  --hd: #0d0d0d; --hd2: rgb(255 255 255 / .07); --hd-bg: #0d0d0d; --base: #0b0b0b; --band-a: rgb(255 122 217 / .5); --band-b: rgb(106 209 255 / .5);
  --pl: #050505; --pl-ink: #ffe9a8; --tc: #ffe08a; --tc-ink: #1a1203; --word: #ffe9a8; --word-ink: #000; --frame: #ffe08a; --rail-ink: #ffe9a8; --hex: #ffe08a;
  --foil: var(--holo) 1;
  --glow: rgb(255 122 217 / .34);
}

.bx {
  position: absolute;
  bottom: calc(var(--board) - 6px);
  display: block;
  width: var(--bw);
  height: calc(var(--bw) * 1.4);
  font-size: calc(var(--bw) / 25); /* 1em = 4% of the box width: the box is 25 x 35 em (2 em of hang tab) */
  line-height: 1;
  text-decoration: none;
  color: var(--pl-ink);
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-out);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
/* the hang tab with its slot */
.bx::before {
  content: '';
  position: absolute;
  left: 50%;
  top: .1em;
  width: 8.6em;
  height: 2.6em;
  margin-left: -4.3em;
  border-radius: 1.1em 1.1em 0 0;
  background:
    radial-gradient(ellipse 1.75em .52em at 50% 50%, #0c0805 0 94%, transparent 100%),
    linear-gradient(rgb(0 0 0 / .14), rgb(0 0 0 / .14)),
    var(--hd);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .45);
}
/* foil edge + the light from above */
.bx::after {
  content: '';
  position: absolute;
  inset: 2em 0 0 0;
  z-index: 5;
  border: .32em solid transparent;
  border-image: var(--foil);
  border-radius: .3em;
  background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / .05) 22%, transparent 40%, transparent 82%, rgb(0 0 0 / .1));
  pointer-events: none;
}
.bx__body {
  position: absolute;
  inset: 2em 0 0 0;
  overflow: hidden;
  border-radius: .3em;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .5) 0 .1em, transparent .12em) 0 0 / .72em .72em,
    linear-gradient(116deg, transparent 0 16%, var(--band-a) 16% 36%, transparent 36% 44%, var(--band-b) 44% 50%, transparent 50% 74%, var(--band-b) 74% 88%, transparent 88% 93%, var(--band-a) 93%),
    var(--base);
  /* outline, the contact shadow on the board, the shade it throws on the back wall, the tier's glow */
  box-shadow: 0 0 0 1px rgb(0 0 0 / .55), 0 1em .9em -.55em rgb(40 20 4 / .8), .35em 1.2em 1.5em -.3em rgb(70 38 8 / .55), 0 0 2.2em .1em var(--glow);
}
/* the rails: print running bottom to top beside the window */
.bx__body::before, .bx__body::after {
  position: absolute;
  /* lengths in each rail's own em: 6.5 / 21.3 / 2.4 box units */
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  rotate: 180deg;
  overflow: hidden;
  white-space: nowrap;
  color: var(--rail-ink);
}
.bx__body::before { content: var(--box-sub, 'COLLECTIBLE VINYL DEGEN'); left: 0; top: 4.33em; height: 14.2em; width: 1.6em; font: 400 1.5em/1 var(--f-display); letter-spacing: .14em; }
.bx__body::after { content: var(--box-tick, '$BOBBLE  •  $BOBBLE  •  $BOBBLE'); right: 0; top: 7.22em; height: 23.67em; width: 2.667em; font: 400 .9em/1 var(--f-block); white-space: pre; }

.bx__head {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6em;
  background: repeating-linear-gradient(-58deg, transparent 0 2.2em, var(--hd2) 2.2em 3em), var(--hd-bg);
}
.bx__head::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: .62em; background: radial-gradient(circle at 50% 0, var(--hd) 0 .5em, transparent .56em) 0 0 / 1.25em .62em repeat-x; }
.bx__word {
  position: absolute;
  left: .26em; /* in its own em (4.1 box units) */
  top: .25em;
  font: 400 4.1em/1 var(--f-logo);
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--word);
  -webkit-text-stroke: .2em var(--word-ink);
  paint-order: stroke fill;
  text-shadow: 0 .075em 0 var(--word-ink);
  rotate: -2.5deg;
}
.bx__hex {
  position: absolute;
  right: .85em;
  top: .7em;
  display: grid;
  place-items: center;
  width: 4.7em;
  height: 4.7em;
  background: var(--pl);
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}
.bx__hex::before { content: ''; position: absolute; inset: .36em; background: var(--hex); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.bx__hex b { position: relative; font: 400 1.2em/1 var(--f-block); letter-spacing: -.03em; color: #14110d; }

/* the window: the figure behind its film */
.bx__win {
  position: absolute;
  left: 2.4em;
  top: 7.15em;
  width: 20.2em;
  height: 20.2em;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.7em;
  background: repeating-linear-gradient(135deg, #b0895a 0 .5em, #be9868 .5em 1em);
  box-shadow: 0 0 0 .2em var(--pl), 0 0 0 .6em var(--frame), 0 0 0 .78em rgb(0 0 0 / .42);
}
.bx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.bx.is-in .bx__img { opacity: 1; }
.bx__img:not([src]) { visibility: hidden; }
.bx__win::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgb(255 255 255 / .28) 0 13%, transparent 13.6% 26%, rgb(255 255 255 / .12) 26.6% 32%, transparent 32.6%),
    linear-gradient(180deg, rgb(0 0 0 / .14), transparent 13%, transparent 88%, rgb(0 0 0 / .1));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .26), inset 0 .4em .9em rgb(0 0 0 / .2);
  pointer-events: none;
}
/* the sheen that runs over the film when the box is pointed at */
.bx__win::before {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 3;
  width: 56%;
  background: linear-gradient(100deg, transparent 18%, rgb(255 255 255 / .6) 50%, transparent 82%);
  transform: translateX(-140%) skewX(-12deg);
  pointer-events: none;
}
.bx.is-missing .bx__win::before {
  content: 'Not packed yet';
  inset: 0;
  width: auto;
  display: grid;
  place-items: center;
  background: none;
  transform: none;
  font: 400 1.25em/1 var(--f-block);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(38 24 12 / .7);
}

/* the bottom plate: the number, the tier, a barcode */
.bx__plate {
  position: absolute;
  inset: auto 0 0 0;
  height: 5em;
  display: flex;
  align-items: center;
  padding: .1em 1.1em 0 1.15em;
  border-top: .3em solid var(--tc);
  background: var(--pl);
}
.bx__no { font: 400 2.5em/1 var(--f-block); letter-spacing: -.02em; color: var(--pl-ink); font-variant-numeric: tabular-nums; }
.bx__tier {
  position: absolute;
  right: .72em; /* in its own em (1.3 box units) */
  top: .42em;
  padding: .34em .5em .24em;
  border-radius: .26em;
  background: var(--tc);
  font: 400 1.3em/1 var(--f-block);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-ink);
}
.bx__plate::after {
  content: '';
  position: absolute;
  right: .95em;
  bottom: .6em;
  width: 6.6em;
  height: .8em;
  background: repeating-linear-gradient(90deg, var(--pl-ink) 0 .14em, transparent .14em .36em, var(--pl-ink) .36em .44em, transparent .44em .8em, var(--pl-ink) .8em 1.06em, transparent 1.06em 1.26em);
  opacity: .7;
}
.bx__seal { display: none; }
/* the rare tiers catch the light now and then (legendary, grail) */
@keyframes glint { 0%, 62% { transform: translateX(-140%) skewX(-12deg); } 100% { transform: translateX(270%) skewX(-12deg); } }
.wall .bx[data-tier='legendary'] .bx__win::before,
.wall .bx[data-tier='grail'] .bx__win::before { animation: glint 5.2s ease-in-out calc(var(--i, 0) * .37s) infinite; }
.bx[data-tier='legendary'] .bx__body::before, .bx[data-tier='legendary'] .bx__body::after { color: #1a140b; }
/* the grail box: black lacquer, holo foil, the one-of-one's name on the plate */
.bx[data-tier='grail'] .bx__tier, .bx[data-tier='grail'] .bx__plate::after { display: none; }
.bx[data-tier='grail'] .bx__seal {
  position: absolute;
  z-index: 4;
  right: .7em; /* in its own em (1.3 box units) */
  bottom: .36em;
  width: 10.6em;
  height: 2.9em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font: 400 1.3em/1.08 var(--f-block);
  letter-spacing: .01em;
  text-transform: uppercase;
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: hidden;
}
.bx[data-tier='grail'] .bx__no { font-size: 2em; }
.bx[data-tier='grail'] .bx__word { -webkit-text-stroke-color: #000; }
.bx[data-tier='grail'] .bx__head { background: repeating-linear-gradient(-58deg, transparent 0 2.2em, rgb(255 255 255 / .06) 2.2em 3em), linear-gradient(180deg, #1c1c1c, #070707); box-shadow: inset 0 -.3em 0 0 #ffe08a; }
.bx[data-tier='grail'] .bx__head::after { display: none; }
.bx[data-tier='grail'] .bx__plate { border-top-color: #ffe08a; }

/* thickness. At rest: a sliver of the side the aisle lets you see. */
.bx__edge {
  position: absolute;
  top: 2em;
  bottom: 0;
  width: var(--ew, 0em);
  background: linear-gradient(rgb(0 0 0 / .46), rgb(0 0 0 / .46)), linear-gradient(180deg, var(--hd) 0 18%, var(--base) 18% 85%, var(--pl) 85%);
  transition: opacity .2s;
}
.bx--er .bx__edge { left: calc(100% - .5px); clip-path: polygon(0 0, 100% 1.3%, 100% 98.7%, 0 100%); }
.bx--el .bx__edge { right: calc(100% - .5px); clip-path: polygon(0 1.3%, 100% 0, 100% 100%, 0 98.7%); }

/* Pointed at or focused: the box tips out of the shelf and shows its spine. */
.bx__side {
  display: none;
  position: absolute;
  left: 100%;
  top: 2em;
  bottom: 0;
  width: 9.6em;
  flex-direction: column;
  align-items: center;
  gap: .7em;
  padding: 1em 0 .8em;
  overflow: hidden;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
  background:
    linear-gradient(90deg, rgb(0 0 0 / .1), rgb(0 0 0 / .34)),
    linear-gradient(180deg, var(--hd) 0 5.9em, var(--pl) 5.9em);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6);
  color: var(--pl-ink);
}
.bx__side-no { height: 1.95em; display: grid; place-items: center; font: 400 1.9em/1 var(--f-block); letter-spacing: -.02em; color: var(--word); -webkit-text-stroke: .16em var(--word-ink); paint-order: stroke fill; }
.bx__side-list { flex: 1; min-height: 0; display: flex; flex-direction: row-reverse; justify-content: center; gap: .5em; margin-top: 1.2em; }
.bx__side-t { display: flex; align-items: center; gap: .6em; writing-mode: vertical-rl; font: 800 1.42em/1.15 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.bx__side-t em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.bx__side-t i { flex: none; font: 700 .86em/1 var(--f-mono); font-style: normal; color: var(--tc); }
.bx__side-rank { font: 400 1.05em/1 var(--f-block); letter-spacing: .04em; text-transform: uppercase; color: var(--tc); white-space: nowrap; }
.bx[data-tier='grail'] .bx__side { background: linear-gradient(90deg, rgb(0 0 0 / .1), rgb(0 0 0 / .34)), linear-gradient(180deg, #1c1c1c 0 5.9em, #050505 5.9em); }

/* Every box on the wall is a layer of its own from the start. Without this a
   box that tips out, comes back from the unboxing or is stocked gets promoted
   mid-wall, and every box painted after it is rastered again: a 100-190 ms
   hitch per hover (measured; none with it). */
.wall .bx { will-change: transform; }
.bx.is-tip, .bx--pick { transform-style: preserve-3d; }
.bx.is-tip { z-index: 6; transform: perspective(72em) translate3d(-1.6em, -1.2em, 5em) rotateY(-34deg); }
.bx.is-tip .bx__side, .bx--pick .bx__side { display: flex; }
.bx.is-tip .bx__edge, .bx--pick .bx__edge { opacity: 0; }
.bx.is-tip .bx__win::before { transform: translateX(270%) skewX(-12deg); transition: transform .85s var(--ease-out) .1s; }
@media (hover: hover) {
  .wall .bx:hover { z-index: 6; transform: perspective(72em) translate3d(-1.6em, -1.2em, 5em) rotateY(-34deg); transform-style: preserve-3d; }
  .wall .bx:hover .bx__side { display: flex; }
  .wall .bx:hover .bx__edge { opacity: 0; }
  .bx:hover .bx__win::before { transform: translateX(270%) skewX(-12deg); transition: transform .85s var(--ease-out) .1s; }
}
.wall .bx:focus-visible { z-index: 7; transform: perspective(72em) translate3d(-1.6em, -1.2em, 5em) rotateY(-34deg); transform-style: preserve-3d; box-shadow: none; }
.wall .bx:focus-visible .bx__side { display: flex; }
.wall .bx:focus-visible .bx__edge { opacity: 0; }
.wall .bx:focus-visible .bx__body { box-shadow: 0 0 0 .22em #fff, 0 0 0 .5em var(--blue), 0 1em 1em -.5em rgb(0 0 0 / .9); }
.bx:focus-visible .bx__win::before { transform: translateX(270%) skewX(-12deg); transition: transform .85s var(--ease-out) .1s; }
.bx:active { transition-duration: .12s; }

/* the first shelves are stocked box by box */
@keyframes stock { from { opacity: 0; transform: translateY(-1.6em) rotate(-2deg); } }
.wall.is-stocking .bx { animation: stock .55s var(--ease-out) calc(var(--i, 0) * 40ms + var(--r, 0) * 110ms) backwards; }

/* off the shelf (open in the unboxing): its place stays empty, a dashed outline on the board */
.bx.is-out { transform: none !important; }
.bx.is-out > * { visibility: hidden; }
.bx.is-out::before { visibility: hidden; }
.bx.is-out::after { border: .16em dashed rgb(255 236 200 / .3); border-image: none; background: rgb(0 0 0 / .18); }
@keyframes put-back { from { transform: translateY(-1.6em) scale(1.05); } }
.bx.is-back { animation: put-back .45s var(--ease-back); }

/* the hero's box: the same box, bigger, always showing its spine */
.bx--pick { position: absolute; left: 0; top: 0; bottom: auto; transform: none; }
.bx--pick .bx__body { box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 1.6em 2em -.6em rgb(40 20 4 / .6), 0 0 3em .3em var(--glow); }
.bx--pick:focus-visible .bx__body { box-shadow: 0 0 0 .22em #fff, 0 0 0 .5em var(--blue); }

/* the copy that flies to the unboxing */
.bx--fly { position: fixed; bottom: auto; z-index: 4; margin: 0; pointer-events: none; transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform; transition: none; }
.bx--fly .bx__side { display: flex; }
.bx--fly .bx__edge { opacity: 0; }

/* ------------------------------------------------------------ sealed carton */

/* Sealed until the drop (collection/config.js mode 'sealed'): the rest of the series in ONE shipping carton
   under a stock lamp, taped shut and stencilled, its label saying where the unboxing happens. CSS 3D: a front,
   a top with two flaps and the brand tape over the seam, a right side; it sways a little on the lamp's breath,
   drops onto its spot the first time it is seen, and knocks when a box inside is asked for (?open=<id>). */
.sealed {
  --cw: clamp(268px, 36vw, 520px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(56px, 7vw, 110px) var(--gutter) clamp(64px, 7.5vw, 120px);
  border-top: 3px solid #050505;
  background:
    radial-gradient(ellipse 46% 54% at 30% 58%, rgb(255 205 130 / .17), transparent 70%),
    linear-gradient(180deg, transparent 72%, rgb(0 0 0 / .32) 72.2%, transparent 74%),
    linear-gradient(180deg, transparent 72%, #3b2614 72%, #2a1a0c 86%, #1c1107),
    repeating-linear-gradient(90deg, rgb(255 236 200 / .03) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #120b05, #1d130a 50%, #150d06 72%);
}
.sealed__in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 88px);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* the stage: lamp, light, carton */
.sealed__stage { position: relative; display: grid; place-items: center; min-height: calc(var(--cw) * 1.22); padding-top: calc(var(--cw) * .2); perspective: 1500px; }
.sealed__lamp { position: absolute; left: 50%; top: calc(var(--cw) * -.2 - clamp(56px, 7vw, 110px)); width: 0; height: 0; transform-origin: 0 0; animation: sway 8s ease-in-out infinite; pointer-events: none; }
.sealed__lamp .lamp__cord { height: calc(var(--cw) * .2 + 40px); }
.sealed__lamp .lamp__shade { position: absolute; left: -62px; top: calc(var(--cw) * .2 + 36px); width: 124px; height: 44px; background: linear-gradient(100deg, #1d5d1a, #57b947 30%, #7ad866 46%, #2f7d2a 78%, #164713); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); filter: drop-shadow(0 2.5px 0 #050505) drop-shadow(0 -2.5px 0 #050505) drop-shadow(2.5px 0 0 #050505) drop-shadow(-2.5px 0 0 #050505); }
.sealed__lamp .lamp__bulb { top: calc(var(--cw) * .2 + 74px); }
.sealed__cone {
  position: absolute; left: calc(var(--cw) * -.85); top: calc(var(--cw) * .2 + 80px);
  width: calc(var(--cw) * 1.7); height: calc(var(--cw) * 1.25);
  background: linear-gradient(180deg, rgb(255 238 200 / .24), rgb(255 226 170 / .08) 64%, transparent 96%);
  clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
}
/* the light it throws on the floor around the carton */
.sealed__pool { position: absolute; left: 50%; bottom: calc(var(--cw) * -.02); z-index: -1; width: calc(var(--cw) * 1.9); height: calc(var(--cw) * .42); margin-left: calc(var(--cw) * -.95); border-radius: 50%; background: radial-gradient(closest-side, rgb(255 214 150 / .2), rgb(255 200 120 / .06) 70%, transparent); pointer-events: none; }

.crate { position: relative; font-size: calc(var(--cw) / 30); transition: translate 1s var(--ease-back), opacity .45s ease; }
.sealed.is-armed:not(.is-in) .crate { translate: 0 -70px; opacity: 0; }
.crate.is-knock { animation: crate-knock .8s ease-out .45s; }
@keyframes crate-knock {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  14% { rotate: -1.6deg; translate: 0 -9px; }
  30% { rotate: 1.2deg; translate: 0 0; }
  46% { rotate: -.7deg; translate: 0 -3px; }
  62% { rotate: .4deg; translate: 0 0; }
}
.crate__body {
  --cd: calc(var(--cw) * .6);
  --ch: calc(var(--cw) * .72);
  position: relative;
  width: var(--cw);
  height: var(--ch);
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(-27deg);
  animation: crate-idle 11s ease-in-out infinite;
}
@keyframes crate-idle { 0%, 100% { transform: rotateX(-15deg) rotateY(-29deg); } 50% { transform: rotateX(-14deg) rotateY(-22deg); } }
.crate__front, .crate__side, .crate__top { position: absolute; backface-visibility: hidden; }
/* corrugated kraft: fine flutes, a warm wash from the lamp, worn edges */
.crate__front, .crate__side, .crate__flap {
  background-color: #c39462;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 240 210 / .06) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 80% 70% at 40% 20%, rgb(255 236 200 / .32), transparent 70%),
    linear-gradient(180deg, rgb(255 232 196 / .12), rgb(70 40 12 / .24));
}
.crate__front {
  inset: 0;
  transform: translateZ(calc(var(--cd) / 2));
  box-shadow: inset 0 0 0 .22em rgb(52 30 10 / .82), inset 0 0 1.6em rgb(70 38 10 / .45);
  color: rgb(34 20 8 / .86);
}
.crate__side {
  top: 0; left: calc(50% - var(--cd) / 2);
  width: var(--cd); height: var(--ch);
  transform: rotateY(90deg) translateZ(calc(var(--cw) / 2));
  background-color: #9c6f41;
  box-shadow: inset 0 0 0 .22em rgb(40 22 6 / .85), inset 0 0 2.4em rgb(30 14 2 / .5);
}
/* a hand hole and the side's print */
.crate__side::before { content: ''; position: absolute; left: 50%; top: 22%; width: 34%; height: 9%; margin-left: -17%; border-radius: 999px; background: #1a0f06; box-shadow: inset 0 .25em .4em #000, 0 .1em 0 rgb(255 236 200 / .2); }
.crate__side-print { position: absolute; left: 0; right: 0; top: 46%; padding: 0 10%; text-align: center; font: 400 1.05em/1.15 var(--f-block); letter-spacing: .06em; text-transform: uppercase; color: rgb(30 16 4 / .62); }
.crate__top {
  left: 0; top: calc((var(--ch) - var(--cd)) / 2);
  width: var(--cw); height: var(--cd);
  transform: rotateX(90deg) translateZ(calc(var(--ch) / 2));
}
.crate__flap { position: absolute; top: 0; bottom: 0; width: 50%; box-shadow: inset 0 0 0 .22em rgb(52 30 10 / .82), inset 0 0 1.4em rgb(70 38 10 / .35); }
.crate__flap--l { left: 0; background-color: #d3a572; }
.crate__flap--r { right: 0; background-color: #caa06c; }
/* the brand tape: over the seam of the top and down the front */
.crate__tape {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: space-around; overflow: hidden;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .22), transparent 8% 92%, rgb(0 0 0 / .22)),
    linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .34) 45%, transparent 60%) no-repeat,
    linear-gradient(90deg, #3f9a35, #5cbf4c 30%, #57b947 70%, #3d9233);
  background-size: 100% 100%, 300% 100%, 100% 100%;
  background-position: 0 0, 160% 0, 0 0;
  font: 400 .78em/1 var(--f-block); letter-spacing: .14em; text-transform: uppercase; color: rgb(8 30 6 / .78);
  animation: tape-sheen 7s ease-in-out 1.4s infinite;
}
@keyframes tape-sheen { 0%, 62% { background-position: 0 0, 160% 0, 0 0; } 92%, 100% { background-position: 0 0, -60% 0, 0 0; } }
.crate__tape--top { left: 41%; width: 18%; top: -1%; bottom: -1%; flex-direction: column; }
.crate__tape--top b { writing-mode: vertical-rl; rotate: 180deg; }
.crate__tape--front { left: 41%; width: 18%; top: 0; height: 21%; padding: 0 .3em; text-align: center; font-size: .5em; line-height: 1.2; letter-spacing: .1em; border-bottom: .3em solid rgb(36 96 30 / .9); clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 76% 93%, 62% 100%, 48% 92%, 34% 100%, 20% 93%, 8% 100%, 0 94%); }
/* stencils, printed on the board (the gaps of a stencil cut through the strokes) */
.crate__stencil { position: absolute; margin: 0; font-family: var(--f-block); text-transform: uppercase; color: rgb(30 17 6 / .8); mix-blend-mode: multiply;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 .9em, transparent .9em 1em); mask: repeating-linear-gradient(90deg, #000 0 .9em, transparent .9em 1em); }
.crate__stencil--word { left: 6%; top: 23%; font-size: 3.6em; line-height: 1; letter-spacing: .02em; }
.crate__stencil--series { left: 6.4%; top: 38.5%; font-size: 1.5em; letter-spacing: .2em; color: rgb(30 80 20 / .82); }
.crate__arrows { position: absolute; right: 6%; top: 6%; display: grid; grid-template-columns: auto auto; justify-items: center; gap: .1em .25em; margin: 0; color: rgb(30 17 6 / .78); }
.crate__arrows i { width: 1.5em; height: 2.2em; background: currentColor; clip-path: polygon(50% 0, 100% 45%, 68% 45%, 68% 100%, 32% 100%, 32% 45%, 0 45%); }
.crate__arrows span { grid-column: 1 / -1; font: 400 .62em/1 var(--f-block); letter-spacing: .14em; text-transform: uppercase; }
.crate__fragile { position: absolute; right: 6%; top: 41%; margin: 0; padding: .35em .55em .3em; border: .14em solid rgb(150 30 20 / .75); border-radius: .3em; font: 400 .66em/1 var(--f-block); letter-spacing: .1em; text-transform: uppercase; color: rgb(150 30 20 / .82); mix-blend-mode: multiply; rotate: 2deg; }
/* the shipping label: what is inside, where it goes */
.crate__label {
  position: absolute; left: 6%; bottom: 6.5%; width: 52%;
  padding: .6em .75em .5em;
  border-radius: .25em;
  background: linear-gradient(170deg, #fffdf6, #f4efe2 60%, #ebe4d2);
  box-shadow: 0 0 0 .1em rgb(0 0 0 / .55), .15em .3em .4em -.1em rgb(40 20 4 / .55);
  color: var(--ink);
  rotate: -1.6deg;
}
.crate__label p { margin: 0; }
.crate__label-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .4em; margin-bottom: .45em !important; border-bottom: .12em solid var(--ink); }
.crate__label-head > span, .crate__label-row > span { font: 700 .55em/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #6b6150; }
.crate__label-head b { font: 400 1.25em/1 var(--f-block); letter-spacing: .03em; text-transform: uppercase; }
.crate__label-row { display: grid; grid-template-columns: 5.2em 1fr; align-items: baseline; gap: .4em; padding: .18em 0; border-bottom: .06em dashed #b9ae96; }
.crate__label-row b { font: 700 .72em/1.2 var(--f-ui); }
.crate__label-row--note b { color: #1f6a19; }
.crate__bars { display: flex; align-items: center; gap: .5em; margin-top: .5em !important; }
.crate__bars i { flex: 1; height: 1.7em; background: repeating-linear-gradient(90deg, #111 0 .1em, transparent .1em .22em, #111 .22em .26em, transparent .26em .4em, #111 .4em .58em, transparent .58em .66em); }
.crate__bars span { font: 700 .5em/1 var(--f-mono); letter-spacing: .06em; }
/* the rubber stamp over the corner of the label */
.crate__stamp {
  position: absolute; right: 7%; bottom: 31%; margin: 0;
  padding: .18em .45em .1em; border: .16em solid currentColor; border-radius: .25em;
  font: 400 2.05em/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase;
  color: rgb(196 40 30 / .86); mix-blend-mode: multiply; rotate: -13deg;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 52%, rgb(0 0 0 / .55) 70%, #000 86%); mask: radial-gradient(circle at 30% 40%, #000 52%, rgb(0 0 0 / .55) 70%, #000 86%);
}
.crate__qty { position: absolute; right: 6%; bottom: 8%; display: grid; justify-items: end; margin: 0; padding: .4em .55em .35em; border: .18em solid rgb(30 17 6 / .72); color: rgb(30 17 6 / .8); mix-blend-mode: multiply; }
.crate__qty span { font: 400 .62em/1 var(--f-block); letter-spacing: .2em; }
.crate__qty b { font: 400 2.2em/1 var(--f-block); letter-spacing: .02em; }
.crate__shadow { position: absolute; left: 50%; top: 100%; z-index: -1; width: 130%; height: calc(var(--cw) * .2); margin: calc(var(--cw) * -.02) 0 0 -60%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .72), rgb(0 0 0 / .3) 60%, transparent); filter: blur(4px); }
.sealed.is-armed:not(.is-in) .crate__shadow { opacity: .3; }
.crate__shadow { transition: opacity .9s ease; }

/* the copy */
.sealed__copy { display: grid; justify-items: start; gap: clamp(14px, 1.6vw, 22px); }
.sealed__kicker { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; }
.sealed__title { margin: 0; font: 400 clamp(40px, 5.2vw, 84px)/.9 var(--f-logo); letter-spacing: -.015em; text-transform: uppercase; color: #fff; rotate: -1.6deg;
  filter: drop-shadow(.045em 0 0 #fff) drop-shadow(-.045em 0 0 #fff) drop-shadow(0 .045em 0 #fff) drop-shadow(0 -.045em 0 #fff) drop-shadow(0 .09em 0 rgb(0 0 0 / .5)); }
.sealed__ask { margin: 0; padding: .55em .9em .5em; border: 2px solid #050505; border-radius: 10px; background: #f6f2e7; box-shadow: var(--hard); font: 600 clamp(13.5px, 1.1vw, 16px)/1.4 var(--f-ui); color: var(--ink); rotate: .6deg; }
.sealed__ask b { font-family: var(--f-block); font-weight: 400; letter-spacing: .03em; color: #b42a1f; }
.sealed__lede { max-width: 32em; margin: 0; padding: .75em 1.05em .8em; border: 2px solid #050505; border-radius: 12px; background: rgb(18 13 8 / .94); box-shadow: 0 0 0 2px rgb(255 255 255 / .12), 0 5px 0 rgb(0 0 0 / .4); font: 600 clamp(14px, 1.15vw, 17px)/1.5 var(--f-ui); color: #f8f0e2; text-wrap: pretty; }
.sealed__where { margin: 0; font: 400 clamp(18px, 1.7vw, 25px)/1.15 var(--f-script); color: var(--accent-hi); rotate: -1.5deg; }
.sealed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: clamp(4px, .6vw, 10px) 0 0; }
.btn-x {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .78em 1.2em .7em;
  border: 2px solid #fff; border-radius: 999px;
  background: #050505;
  box-shadow: 0 0 0 2px #050505, 0 5px 0 2px rgb(0 0 0 / .45);
  font: 400 clamp(12px, 1.05vw, 15px)/1 var(--f-block); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: #fff;
  transition: background-color .25s ease, color .25s ease, translate .3s var(--ease-out);
}
.btn-x svg { flex: none; width: 1.25em; height: 1.25em; fill: currentColor; }
.btn-x b { font-weight: 400; color: var(--accent-hi); transition: color .25s ease; }
.btn-x:hover, .btn-x:focus-visible { background: #fff; color: #050505; translate: 0 -2px; }
.btn-x:hover b, .btn-x:focus-visible b { color: var(--accent-dark); }
.btn-x--quiet { box-shadow: none; border-color: rgb(255 255 255 / .5); background: rgb(0 0 0 / .4); }
.sealed__fine { margin: 0; font: 700 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #8f8370; }

@media (max-width: 860px) {
  .sealed { --cw: min(78vw, 400px); padding-top: clamp(40px, 9vw, 64px); }
  .sealed__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sealed__stage { min-height: calc(var(--cw) * 1.08); padding-top: calc(var(--cw) * .14); }
  .sealed__lamp { top: calc(var(--cw) * -.26 - clamp(40px, 9vw, 64px)); }
  .sealed__lamp .lamp__shade { scale: .8; }
  .sealed__copy { justify-items: center; text-align: center; }
  .sealed__title .stk { margin: 0 auto; }
  .sealed__actions { justify-content: center; }
  .sealed { background:
    radial-gradient(ellipse 70% 30% at 50% 30%, rgb(255 205 130 / .17), transparent 70%),
    linear-gradient(180deg, #120b05, #1d130a 30%, #2a1a0c 46%, #1c1107 60%, #140c06); }
}
@media (prefers-reduced-motion: reduce) {
  .sealed.is-armed:not(.is-in) .crate { translate: none; opacity: 1; }
}

/* ------------------------------------------------------------ empty, notes */

.empty { display: grid; justify-items: center; gap: 16px; padding: 12vh 0 16vh; text-align: center; }
.empty__stamp { padding: .4em .7em .3em; border: 4px solid currentColor; border-radius: 12px; font: 400 clamp(26px, 5vw, 54px)/1 var(--f-block); letter-spacing: .04em; text-transform: uppercase; color: #e2574a; rotate: -6deg; opacity: .9; }
.empty__line { font: 600 16px/1.4 var(--f-ui); color: #d9cdb8; }
.note { max-width: 520px; margin: 12vh auto; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); font: 400 13px/1.5 var(--f-mono); color: var(--ink); text-align: center; }

.foot { padding: clamp(18px, 2.4vw, 28px) var(--gutter) max(24px, env(safe-area-inset-bottom)); background: #0d0905; border-top: 1px solid #3a2f22; font: 400 11.5px/1.5 var(--f-mono); color: #9d917c; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; max-width: var(--maxw); margin: 0 auto; }
.logo--foot { width: 128px; }
.foot__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2vw, 26px); }
.foot__nav a, .foot__top { padding: 6px 0; font: 400 11.5px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #e7dfcf; transition: color .2s; }
.foot__nav a:hover, .foot__top:hover, .foot__nav a[aria-current='page'] { color: var(--accent-hi); }
.foot__copy { max-width: var(--maxw); margin: 14px auto 0; letter-spacing: .04em; }

/* ---------------------------------------------------------------- unboxing */

.is-unbox { overflow: hidden; }
.is-deep body > main, .is-deep body > header, .is-deep body > footer { visibility: hidden; }
/* A deep link (?open=<id>) starts under the veil: until the table is in and the
   box stands there, a carton rocks in the dark instead of an empty screen. */
.is-deep body::before {
  content: '';
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 90;
  width: 58px;
  height: 52px;
  margin: -26px 0 0 -29px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 39%, var(--accent, #57b947) 39% 61%, transparent 61%),
    linear-gradient(180deg, rgb(0 0 0 / .28) 0 22%, transparent 22%),
    #b98a55;
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .35), 0 14px 18px -8px rgb(0 0 0 / .8);
  animation: deep-rock 1.1s ease-in-out infinite;
}
.is-deep body::after {
  content: 'Fetching the box';
  position: fixed;
  inset: calc(46% + 44px) 0 auto 0;
  z-index: 90;
  text-align: center;
  font: 700 11px/1 ui-monospace, 'JetBrains Mono', Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b8ab93;
}
@keyframes deep-rock { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }

.ub {
  --gutter: clamp(12px, 3.4vw, 48px);
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* the open top's canvas reaches past the box's sides */
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  color: var(--paper);
}
.ub__dim {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 44% 62% at 34% 52%, rgb(190 124 50 / .34), transparent 72%),
    linear-gradient(180deg, rgb(8 5 3 / .95), rgb(20 13 7 / .95));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity .32s ease;
}
.ub.is-in .ub__dim { opacity: 1; }
.ub.is-instant .ub__dim { opacity: 1; transition: none; } /* a deep link: no fade up from the shelves */
.ub.is-leaving { opacity: 0; transition: opacity .2s ease; pointer-events: none; }

.ub__bar { position: sticky; top: 0; z-index: 3; flex: none; display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) var(--gutter) 8px; opacity: 0; transition: opacity .3s ease .1s; }
.ub.is-in .ub__bar { opacity: 1; }
.ub__nav { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: var(--hard); color: var(--ink); transition: translate .18s var(--ease-out), background-color .18s; }
.ub__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ub__nav:hover { translate: 0 -2px; background: var(--accent); }
.ub__nav:active { translate: 0 2px; }
.ub__nav:disabled { opacity: .35; pointer-events: none; }
.ub__nav--x { margin-left: auto; background: var(--ink); border-color: #fff; color: #fff; }
.ub__nav--x:hover { background: var(--red); }

.ub__body {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: auto minmax(320px, 440px);
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 5vw, 84px);
  padding: 0 var(--gutter) 34px;
}
/* room above the box for its open lid (9.4em of the box's 25em width) */
.ub__stage { --ow: max(240px, min(44vw, (100vh - 150px) / 1.72, 520px)); width: var(--ow); padding-top: calc(var(--ow) * .376); }

/* the opened box: the wall box at full size, 25 x 33 em */
.ob { position: relative; width: var(--ow); height: calc(var(--ow) * 1.32); font-size: calc(var(--ow) / 25); line-height: 1; color: var(--pl-ink); }
.ob__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: .3em;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / .5) 0 .1em, transparent .12em) 0 0 / .72em .72em,
    linear-gradient(116deg, transparent 0 16%, var(--band-a) 16% 36%, transparent 36% 44%, var(--band-b) 44% 50%, transparent 50% 74%, var(--band-b) 74% 88%, transparent 88% 93%, var(--band-a) 93%),
    var(--base);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 2.4em 2.6em -1em rgb(0 0 0 / .95), 0 0 5em .4em var(--glow);
}
.ob__body::before, .ob__body::after {
  position: absolute;
  /* lengths in each rail's own em: 6.5 / 21.3 / 2.4 box units */
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  rotate: 180deg;
  overflow: hidden;
  white-space: nowrap;
  color: var(--rail-ink);
}
.ob__body::before { content: var(--box-sub, 'COLLECTIBLE VINYL DEGEN'); left: 0; top: 4.33em; height: 14.2em; width: 1.6em; font: 400 1.5em/1 var(--f-display); letter-spacing: .14em; }
.ob__body::after { content: var(--box-tick, '$BOBBLE'); right: 0; top: 7.22em; height: 23.67em; width: 2.667em; font: 400 .9em/1 var(--f-block); white-space: pre; }
.ob[data-tier='legendary'] .ob__body::before, .ob[data-tier='legendary'] .ob__body::after { color: #1a140b; }
.ob__head { position: absolute; inset: 0 0 auto 0; height: 6em; background: repeating-linear-gradient(-58deg, transparent 0 2.2em, var(--hd2) 2.2em 3em), var(--hd-bg); }
.ob__head::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: .62em; background: radial-gradient(circle at 50% 0, var(--hd) 0 .5em, transparent .56em) 0 0 / 1.25em .62em repeat-x; }
.ob[data-tier='grail'] .ob__head { background: repeating-linear-gradient(-58deg, transparent 0 2.2em, rgb(255 255 255 / .06) 2.2em 3em), linear-gradient(180deg, #1c1c1c, #070707); box-shadow: inset 0 -.3em 0 0 #ffe08a; }
.ob[data-tier='grail'] .ob__head::after { display: none; }
.ob__word { position: absolute; left: .26em; top: .25em; font: 400 4.1em/1 var(--f-logo); letter-spacing: -.012em; text-transform: uppercase; color: var(--word); -webkit-text-stroke: .2em var(--word-ink); paint-order: stroke fill; text-shadow: 0 .075em 0 var(--word-ink); rotate: -2.5deg; }
.ob__hex { position: absolute; right: .85em; top: .7em; display: grid; place-items: center; width: 4.7em; height: 4.7em; background: var(--pl); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.ob__hex::before { content: ''; position: absolute; inset: .36em; background: var(--hex); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.ob__hex b { position: relative; font: 400 1.2em/1 var(--f-block); letter-spacing: -.03em; color: #14110d; }

.ob__win {
  position: absolute;
  left: 2.4em;
  top: 7.15em;
  width: 20.2em;
  height: 20.2em;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.7em;
  background: repeating-linear-gradient(135deg, #b0895a 0 .5em, #be9868 .5em 1em);
  box-shadow: 0 0 0 .2em var(--pl), 0 0 0 .6em var(--frame), 0 0 0 .78em rgb(0 0 0 / .42);
}
.ob__win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
/* the figure's picture: rises out of the box as it opens (collection/reveal.js), pivoting on its base */
.ob__fig { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
/* while it rises the window is the inside of the box: dark, the light coming in from the open top */
.ob.is-rising .ob__win { background: radial-gradient(ellipse 80% 60% at 50% 0, #3a2814, #0d0804 72%), #0d0804; }
.ob.is-rising .ob__hint { opacity: 0 !important; transition: none; }
.ob__shade, .ob__beam, .ob__flash, .ob__shim { position: absolute; pointer-events: none; opacity: 0; }
.ob__shade { inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(8 4 1 / .96), rgb(8 4 1 / .6) 55%, rgb(8 4 1 / .34)); }
.ob__beam {
  inset: 0;
  z-index: 2;
  transform-origin: 50% 0;
  background:
    radial-gradient(ellipse 30% 92% at 50% 0, rgb(255 246 222 / .5), rgb(255 238 200 / .16) 58%, transparent 100%),
    radial-gradient(ellipse 60% 40% at 50% 0, rgb(255 240 210 / .3), transparent 100%);
  mix-blend-mode: screen;
}
.ob__flash { inset: 0; z-index: 4; background: radial-gradient(circle at 50% 44%, #fffbe8, rgb(255 236 180 / .6) 42%, transparent 76%); mix-blend-mode: screen; }
.ob[data-tier='grail'] .ob__flash { background: radial-gradient(circle at 50% 44%, #fff, rgb(255 190 236 / .6) 38%, rgb(150 220 255 / .3) 58%, transparent 78%); }
/* the shimmer: one band of light over the window (the grail's is holo, twice) */
.ob__shim {
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 4;
  width: 46%;
  opacity: 1;
  transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(100deg, transparent 15%, rgb(255 255 255 / .55) 50%, transparent 85%);
  mix-blend-mode: screen;
}
.ob[data-moment='legendary'] .ob__shim { background: linear-gradient(100deg, transparent 15%, rgb(255 226 140 / .75) 50%, transparent 85%); }
.ob[data-moment='grail'] .ob__shim { width: 60%; background: linear-gradient(100deg, transparent 8%, rgb(255 122 217 / .55) 28%, rgb(255 215 106 / .65) 41%, rgb(125 255 178 / .55) 54%, rgb(106 209 255 / .6) 67%, transparent 90%); }
/* the burst behind the box: a glow in the tier's colour, rays for the rarest */
.ob__burst {
  --c1: rgb(79 168 255 / .5);
  --ray: rgb(160 210 255 / .5);
  --rays: .25;
  position: absolute;
  left: 12.5em;
  top: 17.25em;
  z-index: -1;
  width: 72em;
  height: 72em;
  margin: -36em 0 0 -36em;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.ob__burst::before, .ob__burst::after { content: ''; position: absolute; border-radius: 50%; }
.ob__burst::before {
  inset: 0;
  opacity: var(--rays);
  background: repeating-conic-gradient(from 3deg, var(--ray) 0 3.5deg, transparent 3.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 6%, rgb(0 0 0 / .55) 28%, transparent 60%);
  mask: radial-gradient(circle, #000 6%, rgb(0 0 0 / .55) 28%, transparent 60%);
}
.ob__burst::after { inset: 16%; background: radial-gradient(circle, var(--c1), transparent 68%); }
.ob[data-tier='epic'] .ob__burst { --c1: rgb(181 101 255 / .55); --ray: rgb(222 176 255 / .5); --rays: .45; }
.ob[data-tier='legendary'] .ob__burst { --c1: rgb(255 196 80 / .62); --ray: rgb(255 226 140 / .7); --rays: 1; }
.ob[data-tier='grail'] .ob__burst { --c1: rgb(255 176 232 / .55); --rays: 1; }
.ob[data-tier='grail'] .ob__burst::before {
  background: repeating-conic-gradient(from 2deg, rgb(255 122 217 / .62) 0 3deg, transparent 3deg 9deg, rgb(255 215 106 / .66) 9deg 12deg, transparent 12deg 18deg, rgb(125 255 178 / .58) 18deg 21deg, transparent 21deg 27deg, rgb(106 209 255 / .62) 27deg 30deg, transparent 30deg 36deg);
}
/* glints round the box: four-point stars that flash on and turn */
.ob__glints { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ob__glint {
  position: absolute;
  width: calc(3.4em * var(--gs, 1));
  height: calc(3.4em * var(--gs, 1));
  margin: calc(-1.7em * var(--gs, 1)) 0 0 calc(-1.7em * var(--gs, 1));
  opacity: 0;
  background:
    radial-gradient(circle, #fff 0 9%, rgb(255 255 255 / 0) 32%),
    linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, #fff 50%, transparent 53%);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 68%);
  mask: radial-gradient(circle, #000 14%, transparent 68%);
  filter: drop-shadow(0 0 .35em rgb(255 236 190 / .95));
}
.ob[data-moment='rare'] .ob__glint { filter: drop-shadow(0 0 .35em rgb(140 200 255 / .95)); }
.ob[data-moment='epic'] .ob__glint { filter: drop-shadow(0 0 .35em rgb(214 160 255 / .95)); }
.ob[data-moment='grail'] .ob__glint:nth-child(3n + 1) { filter: drop-shadow(0 0 .4em rgb(255 122 217 / .95)); }
.ob[data-moment='grail'] .ob__glint:nth-child(3n + 2) { filter: drop-shadow(0 0 .4em rgb(106 209 255 / .95)); }
.ob__win img:not([src]) { visibility: hidden; }
.ob__hi { opacity: 0; transition: opacity .35s ease; }
.ob__win.has-hi .ob__hi { opacity: 1; }
.ob__frame { position: absolute; inset: 0; z-index: 1; }
.ob__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .4s ease; }
.ob__win.is-live .ob__iframe { opacity: 1; }
.ob__win.is-missing::before { content: 'Not packed yet'; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 400 1.25em/1 var(--f-block); text-transform: uppercase; color: rgb(38 24 12 / .7); }
/* the film over the window: peeled off as the box opens */
.ob__film {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(112deg, rgb(255 255 255 / .28) 0 13%, transparent 13.6% 26%, rgb(255 255 255 / .12) 26.6% 32%, transparent 32.6%),
    linear-gradient(180deg, rgb(0 0 0 / .14), transparent 13%, transparent 88%, rgb(0 0 0 / .1));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .26), inset 0 .4em .9em rgb(0 0 0 / .2);
  pointer-events: none;
  transform-origin: 0 100%;
  transition: opacity .5s ease .42s, transform .6s var(--ease-out) .42s;
}
.ob.is-open .ob__film { opacity: 0; transform: translate(-18%, 4%) rotate(-7deg); }
.ob__hint {
  position: absolute;
  left: 50%;
  bottom: .9em;
  z-index: 4;
  translate: -50% 0;
  padding: .55em .9em .45em;
  border-radius: 99px;
  background: rgb(0 0 0 / .62);
  font: 700 max(10.5px, .62em)/1 var(--f-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ob__win.is-waiting .ob__hint { opacity: 1; transition-delay: .5s; }

.ob__plate { position: absolute; inset: auto 0 0 0; height: 5em; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .1em 1.1em 0 1.15em; border-top: .3em solid var(--tc); background: var(--pl); }
.ob__no { font: 400 2.5em/1 var(--f-block); letter-spacing: -.02em; color: var(--pl-ink); }
.ob__switch { display: flex; border: 2px solid var(--pl-ink); border-radius: 8px; overflow: hidden; }
.ob__switch button { min-width: 3.4em; padding: .62em .8em .52em; font: 400 max(10.5px, .5em)/1 var(--f-block); letter-spacing: .06em; text-transform: uppercase; color: var(--pl-ink); transition: background-color .18s, color .18s; }
.ob__switch { font-size: max(1em, 21px); }
.ob__switch button + button { border-left: 2px solid var(--pl-ink); }
.ob__switch button:hover { background: rgb(255 255 255 / .16); }
.ob__switch button[aria-pressed='true'] { background: var(--tc); color: var(--tc-ink); }
.ob__switch button:focus-visible { outline-offset: -4px; box-shadow: none; }
.ob[data-tier='grail'] .ob__plate { border-top-color: #ffe08a; }

/* The open top: lid with its tuck flap, dust flaps, hang tab, the inside of the
   box and the torn tape, drawn as a small 3D carton on one canvas
   (collection/boxtop.js). It reaches 10.4em above the box, 5em past each side
   and 3.4em down over the front's header (the tape left on it). */
.ob__top { position: absolute; left: -5em; top: -10.4em; z-index: 2; width: 35em; height: 13.8em; pointer-events: none; }

/* the packing slip */
.slip {
  position: relative;
  align-self: center;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9c1ae transparent;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(175deg, #fffefa, var(--paper) 40%, #f4f0e4);
  box-shadow: 0 6px 0 rgb(0 0 0 / .5), 0 30px 40px -18px rgb(0 0 0 / .8);
  color: var(--ink);
  opacity: 0;
  transform: translateX(46px) rotate(2.4deg);
  transition: opacity .45s ease .3s, transform .7s var(--ease-out) .3s;
}
.ub.is-opened .slip { opacity: 1; transform: rotate(.6deg); }
.slip__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 10px; padding: .8em 1.1em .66em; background: var(--accent); border-bottom: 3px solid var(--ink); font: 400 11.5px/1 var(--f-block); letter-spacing: .07em; text-transform: uppercase; color: #0d1a0b; }
.slip__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.slip__k { font: 400 10px/1 var(--f-block); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.slip__k--list { display: flex; justify-content: space-between; align-items: baseline; padding: 0 18px 6px; }
.slip__k--list span { font: 400 9.5px/1 var(--f-mono); letter-spacing: .04em; text-transform: none; }
.slip__name { margin-top: 6px; font: 400 clamp(24px, 2.5vw, 34px)/.98 var(--f-block); letter-spacing: -.005em; text-transform: uppercase; }
.slip__name span { color: var(--accent-dark); }
.slip__one { margin-top: 6px; font: 600 13.5px/1.3 var(--f-ui); color: var(--ink-2); }
.stamp {
  flex: none;
  margin-top: 2px;
  padding: .74em .95em .62em;
  border: 3px solid currentColor;
  border-radius: 9px;
  outline: 1.5px solid currentColor;
  outline-offset: -7px;
  font: 400 clamp(13px, 1.3vw, 17px)/1 var(--f-block);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-dark);
  rotate: -7deg;
  opacity: .92;
  -webkit-mask-image: repeating-linear-gradient(97deg, #000 0 7px, rgb(0 0 0 / .76) 7px 8px, #000 8px 19px, rgb(0 0 0 / .84) 19px 21px);
  mask-image: repeating-linear-gradient(97deg, #000 0 7px, rgb(0 0 0 / .76) 7px 8px, #000 8px 19px, rgb(0 0 0 / .84) 19px 21px);
}
.stamp[data-tier='rare'] { color: #1f5fc0; }
.stamp[data-tier='epic'] { color: #7b3fd9; }
.stamp[data-tier='legendary'] { color: #b07a10; }
.stamp[data-tier='grail'] { color: var(--red); }
@keyframes stamp { 0% { opacity: 0; scale: 1.9; rotate: -16deg; } 60% { opacity: 1; scale: .94; rotate: -6deg; } 100% { opacity: .92; scale: 1; rotate: -7deg; } }
.ub.is-opened .stamp { animation: stamp .42s cubic-bezier(.3, .9, .4, 1) .75s both; }

.slip__facts { display: grid; grid-template-columns: .9fr 1.2fr 1.3fr; margin: 0 18px 14px; border: 2px solid var(--ink); background: #fff; }
.slip__facts > div { min-width: 0; padding: 8px 10px 7px; }
.slip__facts > div + div { border-left: 2px solid var(--ink); }
.slip__facts dt { font: 400 8.5px/1 var(--f-block); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.slip__facts dd { margin-top: 5px; font: 400 11px/1.25 var(--f-mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.slip__facts dd b { display: block; font: 400 15px/1.1 var(--f-block); letter-spacing: -.01em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip__facts > div:nth-child(3) dd b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 12px; line-height: 1.15; }

.slip__attrs { margin: 0 18px; border-top: 2px solid var(--ink); }
.slip__row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: center; gap: 0 10px; min-height: 25px; border-bottom: 1px dashed var(--rule); }
.slip__row dt { font: 400 10.5px/1.2 var(--f-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip__row dd { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.slip__value { min-width: 0; padding: 3px 0; font: 600 13px/1.2 var(--f-ui); text-align: left; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s, color .15s; }
.slip__value:hover { color: var(--accent-dark); text-decoration-color: currentColor; }
.slip__value.is-none { font-weight: 400; color: #a59b89; }
.slip__share { margin-left: auto; flex: none; font: 700 10.5px/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.slip__bar { flex: none; width: 34px; height: 6px; border: 1.5px solid var(--ink); border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--w, 0%), #fff var(--w, 0%)); }
.slip__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px 12px; border-top: 2px dashed var(--ink); background: var(--paper-2); font: 700 10.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-2); }
.slip__bars { flex: none; width: 128px; height: 22px; background: repeating-linear-gradient(90deg, #14110d 0 2px, transparent 2px 5px, #14110d 5px 6px, transparent 6px 11px, #14110d 11px 14px, transparent 14px 17px); }
.slip :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px var(--accent); }

/* ------------------------------------------------------------------ narrow */

@media (min-width: 1620px) {
  .find__title { display: block; }
}

@media (max-width: 1279px) {
  .find__wide { display: none !important; }
  .find__narrow { display: inline-flex; }
  .lbl { max-width: none; }
  .find__sort { margin-left: 0; }
  .find__count { margin-left: auto; }

  /* the drawer becomes a sheet from the bottom with every filter in it */
  .scrim { display: block; position: fixed; inset: 0; z-index: 1; background: rgb(8 5 2 / .66); animation: fade .25s ease both; }
  .drawer {
    position: fixed;
    top: auto;
    bottom: 0;
    z-index: 2;
    max-height: 86vh;
    margin: 0;
    padding: 0 max(16px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom));
    border: 3px solid #050505;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    animation: sheet .34s var(--ease-out) both;
  }
  .drawer__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 14px; padding: 12px 16px 10px; border-bottom: 2px solid rgb(20 17 13 / .5); background: #b8925f; }
  .drawer__title { font: 400 15px/1 var(--f-block); letter-spacing: .04em; text-transform: uppercase; }
  .drawer__done { padding: .6em 1em .5em; border: 2px solid var(--ink); border-radius: 8px; background: var(--ink); font: 400 11px/1 var(--f-block); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
  .drawer__sec { margin-bottom: 20px; }
  .drawer__chapters { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .drawer__chapters .tag { padding: 0 .6em; gap: .45em; font-size: 10.5px; letter-spacing: .02em; }
  .drawer__sec--tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .drawer__sec--tiers .drawer__h { flex: 0 0 100%; margin-bottom: 4px; }
  .drawer__sec--size .find__size { display: flex; }
  .traits { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 0 12px; }
  .traits__values { columns: auto; max-height: 46vh; overflow-y: auto; padding: 8px 10px; }
  .tr--type { height: 32px; padding: 0 8px; font-size: 10px; }
}
@media (min-width: 1280px) {
  /* wide: the trait types are a row of drawer tabs over the values */
  .traits { display: block; }
  .traits__types { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .tr--type { width: auto; height: 32px; padding: 0 .8em; border: 2px solid var(--ink); border-radius: 8px 8px 3px 3px; background: var(--kraft-hi); box-shadow: inset 0 -4px 0 rgb(70 40 10 / .16), 0 2px 0 rgb(0 0 0 / .28); color: var(--ink); }
  .tr--type:hover { background: #ecd6b4; }
  .tr--type[aria-current='true'] { background: var(--paper); box-shadow: 0 2px 0 rgb(0 0 0 / .28), 0 0 0 2px var(--accent-dark); }
  .tr--type .tr__n { margin-left: .1em; }
  .drawer__sec--tiers, .drawer__sec--size, .drawer__sec--sort { display: none; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes sheet { from { translate: 0 100%; } }

@media (max-width: 880px) {
  .hero { --fascia: 60px; }
  .top { height: 60px; }
  /* the pulled box stands on a ledge fixed across the wall */
  .cartons::after { content: ''; position: absolute; left: -100vw; right: -100vw; top: 100%; height: 16px; background: linear-gradient(180deg, #fbe5b8 0, #e6c288 8px, #c79859 8px, #a67a41 100%); box-shadow: 0 12px 14px -6px rgb(40 20 4 / .6); }
  .hero__wall::after { background: radial-gradient(ellipse 110% 46% at 50% 72%, rgb(36 20 4 / .42), rgb(36 20 4 / .16) 62%, transparent 82%); }
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hero__pick { order: -1; width: 220px; margin: 56px 0 26px; }
  .hero__pick { --pw: 150px; }
  .cartons { height: 46px; }

  .ub__body { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; gap: 22px; padding-bottom: 40px; }
  .ub__stage { --ow: min(86vw, 400px, (100vh - 150px) / 1.72); }
  .slip { width: 100%; max-width: 480px; max-height: none; overflow: visible; }
  .slip__head { position: static; border-radius: 9px 9px 0 0; }
  .slip__foot { border-radius: 0 0 9px 9px; }
}

@media (max-width: 640px) {
  .nav__long { display: none; }
  .logo { width: 116px; }
  .nav__link { padding: .8em .8em .68em; font-size: 9.5px; letter-spacing: .04em; }
  .stockroom { padding-top: 18px; padding-bottom: 60px; }
  .stockroom::before, .stockroom::after { display: none; }
  .find__bar { gap: 7px; min-height: 56px; padding-top: 7px; padding-bottom: 7px; }
  .lbl { height: 40px; flex-basis: 110px; }
  .lbl__k { display: none; }
  .lbl__in { font-size: 16px; padding-left: 9px; } /* 16px keeps iOS from zooming into the field */
  .tab { height: 40px; }
  .find__sort { display: none; }
  .find__count { flex-direction: column; align-items: flex-end; gap: 3px; padding: .45em .6em .38em; }
  .find__count b { font-size: 15px; }
  .find__count span { font-size: 7.5px; }
  .drawer__sec--sort .find__sort { display: inline-flex; }
  .stat { padding: .38em .5em .32em .5em; gap: 0 .45em; }
  .stat b { font-size: 18px; }
  .stat span { max-width: 6.4em; font-size: 8px; }
  .hero__stats { flex-wrap: nowrap; gap: 6px; }
  .slip__facts { grid-template-columns: 1fr 1.3fr; }
  .slip__facts > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 2px solid var(--ink); }
  .snd { font-size: 9.5px; width: 2.56em; height: 2.56em; }
  .nav { gap: 4px; }
  .tr--value { --ic: 38px; gap: 8px; padding: 4px 5px 4px 4px; }
  .tr__bar { flex-basis: 44px; }

  /* the vault: one shelf that swipes, a grail in the middle, its neighbours peeking in */
  .vault { padding-left: 0; padding-right: 0; }
  .vault__head { padding: 0 var(--gutter); }
  .case { --gx: 0px; margin: 0 10px; padding: 30px 0 22px; border-width: 9px; }
  .case__row {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .case__row::-webkit-scrollbar { display: none; }
  .case__row::before, .case__row::after { content: ''; flex: 0 0 17%; }
  .vt { --bw: min(40vw, 168px); flex: 0 0 66%; scroll-snap-align: center; }
  .vt::after { left: 0; right: 0; }
  .vt__lore { font-size: 11.5px; }
  .vault__swipe { display: flex; justify-content: center; align-items: baseline; gap: .8em; margin-top: 14px; font: 700 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #b8ab93; }
  .vault__swipe span::before { content: '\2190\2002'; }
  .vault__swipe span::after { content: '\2002\2192'; }
  .vault__swipe b { color: #ffd76a; font-variant-numeric: tabular-nums; }
}
@media (min-width: 641px) {
  .drawer__sec--sort { display: none; }
}
/* Narrow phones: the mark alone beside the four links (the same switch as css/nav.css). */
@media (max-width: 379px) {
  .top .logo { width: 44px; }
  .top .logo__svg--full { display: none; }
  .top .logo__svg--mark { display: block; }
}

@media (hover: none) {
  .bx:active { transform: scale(.97); }
}

/* -------------------------------------------------- reduced motion, checks */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .wall .bx:hover, .wall .bx:focus-visible, .bx.is-tip { transform: none; }
  .wall .bx:hover .bx__side, .wall .bx:focus-visible .bx__side { display: none; }
  .wall .bx:hover .bx__edge, .wall .bx:focus-visible .bx__edge { opacity: 1; }
  .wall .bx:hover .bx__body { box-shadow: 0 0 0 .22em #fff, 0 1em 1em -.5em rgb(0 0 0 / .9); }
  .pick__slot { transform: rotateY(-18deg); }
  .ub__dim, .slip, .ub__bar { transition: opacity .2s ease !important; }
  .slip { transform: none; }
  .ub.is-opened .slip { transform: none; }
  .vt .bx:hover, .vt .bx:focus-visible { transform: none; }
}
.is-check *, .is-check *::before, .is-check *::after { animation: none !important; transition: none !important; }
.is-check .pick__slot { transform: rotateY(-20deg); }
.is-check .hero__dust i { opacity: .7; }