/* EL STUDIO — 05 STUFF : uniform section head, one lit glass vitrine (the feature), three small tiles under it */
.stuff {
  --accent: #dff6ff;               /* cool LED white */
  --led: 150, 236, 255;            /* cool white LED, as an rgb triplet for alpha mixes */
  --metal-hi: #34343a;
  position: relative; isolation: isolate; overflow: clip;
  padding: var(--sec-pad) var(--gutter);
  background: #0c0909;
}
/* the room: warm plaster wall, cool spill from the cabinet, a little grain */
.stuff__room {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56% 40% at 50% 58%, rgba(var(--led), .075), rgba(var(--led), .018) 55%, transparent 75%),
    radial-gradient(90% 70% at 50% 45%, transparent 50%, rgba(0,0,0,.55)),
    linear-gradient(180deg, #0b0808 0%, #120e0d 40%, #100c0b 80%, #0a0707 100%);
}
.stuff__room::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .16; mix-blend-mode: overlay; }

.stuff__inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.stuff .sec-head__deck { max-width: 62ch; margin-top: 6px; }
/* Anton's glyph box runs ~.31em past its .9 line box: pad the title so bar, title and deck never share pixels */
.stuff .sec-head__row { margin-top: 6px; }
.stuff .sec-head__title { padding: .31em 0 .28em; }
.stuff { --k: 1; }
@media (min-width: 1800px) { .stuff { --k: 1.18; } }
@media (min-width: 2300px) { .stuff { --k: 1.38; } }

/* ---------------------------------------------------------------- vitrine */
.vitrine {
  --fr: clamp(10px, 1.05vw, 16px);   /* frame post thickness */
  --side: clamp(14px, 2.2vw, 30px);  /* depth of the side walls in perspective */
  position: relative; margin: 0 auto; padding: 0 var(--fr); border-radius: 3px 3px 2px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #0d0d0e 0, #2c2c30 calc(var(--fr) * .35), #18181a calc(var(--fr) * .8), #0b0b0c var(--fr), #0b0b0c calc(100% - var(--fr)), #18181a calc(100% - var(--fr) * .8), #2c2c30 calc(100% - var(--fr) * .35), #0d0d0e 100%);
  box-shadow:
    0 0 0 1px #040404,
    0 50px 70px -30px rgba(0,0,0,.9),
    0 26px 120px rgba(0,0,0,.55),
    0 0 160px rgba(var(--led), .07);
}
/* floor shadow under the cabinet */
.vitrine::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -26px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), transparent); filter: blur(6px); }

.vitrine__crown {
  position: relative; height: clamp(14px, 1.3vw, 20px); margin: 0 calc(var(--fr) * -1);
  border-radius: 3px 3px 0 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #303034 0, #1d1d20 22%, #141416 60%, #0a0a0b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #000;
}

.vitrine__case {
  position: relative; overflow: hidden; background: #0a0b0c;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.9);
}
/* back panel: flocked dark grey, lit from the crown, falling off towards the floor */
.vitrine__back {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 34% at 50% 0%, rgba(var(--led), .26), rgba(var(--led), .07) 55%, transparent 80%),
    radial-gradient(120% 70% at 50% 0%, rgba(var(--led), .07), transparent 70%),
    linear-gradient(180deg, #1b2022 0%, #141718 30%, #0f1112 60%, #0a0b0b 100%);
}
.vitrine__back::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .22; mix-blend-mode: overlay; }
/* side walls in perspective (they catch less light than the back) */
.vitrine__case::before, .vitrine__case::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: var(--side); pointer-events: none;
  background: linear-gradient(180deg, #232a2c 0%, #121516 35%, #08090a 100%);
}
.vitrine__case::before { left: 0; clip-path: polygon(0 0, 100% calc(var(--side) * .9), 100% calc(100% - var(--side) * .9), 0 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.05); }
.vitrine__case::after { right: 0; clip-path: polygon(0 calc(var(--side) * .9), 100% 0, 100% 100%, 0 calc(100% - var(--side) * .9)); filter: brightness(.82); }

/* LED strip in an aluminium channel, tucked under the crown */
.vitrine__led {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, #232427, #151618 70%, #0b0c0d);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.35);
}
.vitrine__led i {
  position: absolute; left: calc(var(--side) + 2%); right: calc(var(--side) + 2%); bottom: -2px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #cdf6ff, #f6feff 12%, #fdffff 50%, #f6feff 88%, #cdf6ff);
  box-shadow: 0 0 3px #fff, 0 0 10px rgba(var(--led), .95), 0 3px 26px rgba(var(--led), .6), 0 12px 80px rgba(var(--led), .4);
}
@media (prefers-reduced-motion: no-preference) { .vitrine__led i { animation: led-hum 6s ease-in-out infinite; } }
@keyframes led-hum { 0%, 100% { opacity: 1; } 47% { opacity: .96; } 50% { opacity: .9; } 53% { opacity: .97; } }

/* ---------------------------------------------------------------- shelves (built by js/stuff.js) */
.vitrine__shelves {
  position: relative; z-index: 2; container-type: inline-size;
  padding: 14px 0 clamp(44px, 4vw, 58px);
}
.cab-shelf {
  --u: calc(100cqi / (var(--per, 4) * 225));   /* 1 design px; 225 per column (900 for a shelf of 4) */
  --sp: calc(var(--side) + 18 * var(--u));
  --gd: calc(34 * var(--u));            /* depth of the glass top seen from slightly above */
  --ge: max(4px, calc(7 * var(--u)));   /* glass thickness at the front edge */
  position: relative; display: grid;
  grid-template-columns: repeat(var(--per, 4), minmax(0, 1fr));
  grid-template-rows: auto calc(var(--gd) + var(--ge)) auto;
  column-gap: calc(14 * var(--u));
  padding: calc(30 * var(--u)) var(--sp) calc(6 * var(--u));
}
.cab-shelf__glass { grid-row: 2; grid-column: 1 / -1; position: relative; margin: 0 calc(var(--sp) * -1); pointer-events: none; }
.cab-shelf__top {
  position: absolute; left: 0; right: 0; top: 0; height: var(--gd);
  clip-path: polygon(var(--side) 0, calc(100% - var(--side)) 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(160,225,230,.05), rgba(160,225,230,.13) 85%, rgba(200,245,245,.2));
}
.cab-shelf__edge {
  position: absolute; left: 0; right: 0; top: var(--gd); height: var(--ge); opacity: calc(.55 + var(--lit) * .45);
  background: linear-gradient(180deg, #f2fffc 0, #f2fffc 1px, rgba(150, 222, 210, .7) 1.5px, rgba(70, 150, 140, .5) 55%, rgba(160, 235, 222, .65) calc(100% - 1px), rgba(0,0,0,.5) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 22%, #000 78%, rgba(0,0,0,.5));
  mask-image: linear-gradient(90deg, rgba(0,0,0,.5), #000 22%, #000 78%, rgba(0,0,0,.5));
  box-shadow: 0 0 12px rgba(var(--led), .35), 0 4px 30px rgba(var(--led), .12);
}
/* light passing through the glass falls on the back panel just below each shelf */
.cab-shelf__glass::after {
  content: ""; position: absolute; left: var(--side); right: var(--side); top: calc(var(--gd) + var(--ge)); height: calc(70 * var(--u));
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--led), .07), transparent 80%);
}
.cab-shelf__pin { position: absolute; top: calc(var(--gd) + 1px); width: max(5px, calc(8 * var(--u))); height: max(3px, calc(5 * var(--u))); border-radius: 1px; background: linear-gradient(#c9cfd1, #5f6466); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cab-shelf__pin--l { left: calc(var(--side) * .5); }
.cab-shelf__pin--r { right: calc(var(--side) * .5); }

/* a figure: cutout + top light + reflection in the glass + contact shadow */
.cab-fig {
  grid-row: 1; position: relative; z-index: 2; align-self: end; min-width: 0;
  display: flex; justify-content: center; align-items: flex-end;
  margin: 0 0 calc(var(--gd) * -.4); padding: 0; border: 0; background: none; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.cab-fig__body { position: relative; flex: none; display: block; line-height: 0; transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.2, .9, .3, 1); }
.cab-fig__img {
  display: block; height: calc(var(--vh) * var(--u)); width: auto; max-width: none;
  filter: brightness(var(--lit, 1)) contrast(1.04) saturate(.95);
  transition: filter .35s ease;
}
/* the LED is above: rim the tops, let the feet sink into shadow */
.cab-fig__lit {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat;
  background: linear-gradient(180deg, rgba(var(--led), .6) 0%, rgba(var(--led), .12) 22%, transparent 40%, transparent 62%, rgba(0,0,0,.6) 100%);
  mix-blend-mode: soft-light;
}
.cab-fig:not(.is-ld) .cab-fig__lit { opacity: 0; }
.cab-fig__refl {
  position: absolute; z-index: -1; left: -40%; right: -40%; top: 100%; height: calc(var(--gd) * .6); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 55%, transparent);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 55%, transparent);
}
.cab-fig__refl img {
  position: absolute; left: 50%; bottom: 100%; height: calc(var(--vh) * var(--u)); width: auto; max-width: none;
  transform: translateX(-50%) scaleY(-.5); transform-origin: 50% 100%;
  opacity: .32; filter: blur(.7px) brightness(calc(var(--lit, 1) * .9)) saturate(.8);
}
.cab-fig__shadow {
  position: absolute; z-index: -1; left: 50%; bottom: calc(var(--gd) * -.1); height: max(8px, calc(18 * var(--u)));
  width: min(92%, calc(var(--vh) * var(--ar, .6) * var(--u) * .78)); transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.92), rgba(0,0,0,.5) 50%, transparent);
}
@media (hover: hover) {
  .cab-fig:hover .cab-fig__body { transform: translateY(-3px) scale(1.025); }
  .cab-fig:hover .cab-fig__img { filter: brightness(calc(var(--lit, 1) + .16)) contrast(1.06) saturate(1.02); }
}
.cab-fig:focus-visible { outline: none; }
.cab-fig:focus-visible .cab-fig__body { transform: translateY(-3px) scale(1.025); }
.cab-fig:focus-visible .cab-fig__img { filter: brightness(calc(var(--lit, 1) + .16)) contrast(1.06); }
.cab-fig:active .cab-fig__body { transform: translateY(0) scale(.99); transition-duration: .1s; }

/* museum label plate, clipped under the glass edge */
.cab-plaque {
  grid-row: 3; justify-self: center; align-self: stretch; position: relative;
  width: min(100%, calc(214px * var(--k))); margin: calc(10 * var(--u) + 4px) 0 0; padding: calc(9px * var(--k)) calc(12px * var(--k)) calc(10px * var(--k));
  border-radius: 2px; text-align: left;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1f2022 0%, #151617 50%, #101112 100%);
  box-shadow: inset 0 1px 0 rgba(var(--led), .26), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.75), 0 8px 16px rgba(0,0,0,.55);
  transition: box-shadow .3s ease;
}
.cab-plaque::before { /* clip holding the plate to the glass */
  content: ""; position: absolute; left: 50%; top: calc((10 * var(--u) + 6px) * -1); width: 12px; height: calc(10 * var(--u) + 8px); margin-left: -6px; z-index: -1;
  border-radius: 1px; background: linear-gradient(90deg, #232527, #6c7174 45%, #3a3e41 70%, #1b1c1e); box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.cab-plaque__no { display: block; margin-bottom: 4px; font: 400 calc(17px * var(--k))/1 var(--f-crt); letter-spacing: .08em; color: var(--accent); opacity: .75; }
.cab-plaque__name { display: block; font: 400 calc(20px * var(--k))/1.05 var(--f-crt); letter-spacing: .05em; text-transform: uppercase; color: var(--text); overflow-wrap: anywhere; }
.cab-plaque__name[lang] { font: 400 calc(15px * var(--k))/1.2 var(--f-type); letter-spacing: .02em; }
.cab-plaque__tag { display: block; margin-top: 6px; font: 400 calc(14px * var(--k))/1.35 var(--f-type); color: var(--muted); }
.cab-fig:hover + .cab-plaque, .cab-fig:focus-visible + .cab-plaque { box-shadow: inset 0 1px 0 rgba(var(--led), .6), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.75), 0 8px 16px rgba(0,0,0,.55); }

/* the glass doors, in front of everything */
.vitrine__glass {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.05);
}
.vitrine__glare {
  position: absolute; inset: -6% -14%;
  background:
    linear-gradient(108deg, transparent 0 16%, rgba(255,255,255,.075) 19%, rgba(255,255,255,.02) 25%, transparent 27.5%, transparent 61%, rgba(255,255,255,.045) 63%, transparent 66.5%),
    radial-gradient(40% 30% at 12% 6%, rgba(255,240,230,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%);
  transform: translate3d(calc(var(--gx, 0) * -28px), calc(var(--gy, 0) * -10px), 0);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.vitrine__seam { /* where the two doors meet */
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px;
  background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(0,0,0,.4) 40%, rgba(0,0,0,.4) 60%, rgba(255,255,255,.07));
}
.vitrine__seam::after { /* lock barrel */
  content: ""; position: absolute; left: 50%; bottom: clamp(12px, 1.2vw, 18px); width: 10px; height: 18px; margin-left: -5px; border-radius: 3px;
  background: linear-gradient(90deg, #3a3c3e, #b9bec0 35%, #eef2f3 48%, #80868a 70%, #2e3032);
  box-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.vitrine__plinth {
  position: relative; height: clamp(34px, 3.4vw, 50px); margin: 0 calc(var(--fr) * -1);
  border-radius: 0 0 3px 3px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a2a2e 0, #18181a 10%, #111113 60%, #080808 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.vitrine__plinth i { position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--led), .45), transparent); }

/* ---------------------------------------------------------------- three small tiles under the cabinet */
.stuff__extras {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: calc(720px * var(--k)); margin: clamp(64px, 9vh, 96px) auto 0;
}
.stuff-tile { margin: 0; min-width: 0; border: 1px solid var(--line-2); background: rgba(255,255,255,.015); transition: border-color .2s; }
.stuff-tile:hover, .stuff-tile:focus-within { border-color: rgba(255,255,255,.4); }
.stuff-tile__btn { display: block; width: 100%; padding: 0; border: 0; background: none; line-height: 0; }
.stuff-tile__btn img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85) brightness(.9); transition: filter .25s ease; }
.stuff-tile:hover img, .stuff-tile__btn:focus-visible img { filter: none; }
.stuff-tile__btn:focus-visible { outline: 1px solid var(--text); outline-offset: -1px; }
.stuff-tile__cap {
  padding: 9px 12px 8px; border-top: 1px solid var(--line-2);
  font: 400 calc(18px * var(--k))/1 var(--f-crt); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- responsive */
/* wide: one long shelf of eight; keep the whole cabinet inside one screen */
@media (min-width: 1080px) {
  .vitrine { width: min(100%, calc((100svh - var(--osd-h, 54px) - 230px) * 4.6)); }
}
@media (min-width: 1080px) and (max-width: 1380px) {
  .cab-plaque { padding: 8px 9px 9px; }
  .cab-plaque__name { font-size: 18px; letter-spacing: .03em; }
}
@media (max-width: 700px) {
  .vitrine { --side: 12px; }
  .cab-shelf { --u: calc(100cqi / 470); --sp: calc(var(--side) + 6px); column-gap: 8px; }
  .cab-plaque { padding: 8px 9px 9px; }
  .cab-plaque__name { font-size: 18px; }
  .cab-plaque__name[lang] { font: 400 15px/1.2 var(--f-type); letter-spacing: .02em; }
.cab-plaque__tag { font-size: 14px; }
  .stuff__extras { gap: 8px; margin-top: 48px; }
  .stuff-tile__cap { min-height: calc(2em + 15px); padding: 8px 7px 7px; font-size: 15px; line-height: 1; letter-spacing: .02em; white-space: normal; }
}

/* short landscape (phone on its side): one shelf of the cabinet fits one screen, plaques stay readable */
@media (orientation: landscape) and (max-height: 540px) {
  .stuff { padding-top: calc(var(--osd-h) + 40px); }
  .vitrine { width: min(100%, calc((100svh - var(--osd-h)) * 1.85)); }
  .cab-plaque { padding: 7px 9px 8px; }
  .cab-plaque__name { font-size: 17px; letter-spacing: .03em; }
  .cab-plaque__tag { font-size: 13px; }
  .stuff__extras { max-width: min(720px, calc((100svh - var(--osd-h)) * 1.9)); margin-top: 44px; }
}