/* ============================================================ displays == */
/* --on goes 0 to 1 when a piece is pointed at (or, on a phone, crosses the middle of the screen): its display lights up */
@property --on { syntax: "<number>"; inherits: true; initial-value: 0; }
.room { padding: var(--sc-section) var(--sc-gutter); overflow-x: clip; }
.room__head {
  max-width: var(--sc-maxw); margin: 0 auto clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 48px; align-items: end;
}
.room__head h2 { grid-row: 1 / span 2; }
.room__head p { grid-column: 2; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 34ch; }
.room__head .pill { grid-column: 2; justify-self: start; }
.rack { margin: 0 auto; max-width: var(--sc-maxw); }
.tile { --on: 0; transition: --on 280ms var(--sc-ease-out); position: relative; }
.tile.is-lit, .tile:has(:focus-visible) { --on: 1; }
@media (hover: hover) and (pointer: fine) { .tile:hover { --on: 1; } }
.tile__hit {
  display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tile__hit:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 8px; border-radius: 12px; }
.show { display: block; position: relative; }
.show img, .show .art { display: block; width: 100%; height: auto; }
.tile__label { margin-top: 14px; }
.tile__name { font: 400 var(--sc-t-lg)/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.tile__meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.tile__price { color: var(--sc-ink); font-weight: 600; }
.tile__price s { font-weight: 400; }
.fits { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fits::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fits--in { color: var(--in); }
.fits--few { color: var(--few); }
.fits--out { color: var(--sc-ink-soft); }
.tile[data-fits="out"] .show img, .tile[data-fits="out"] .show .art { filter: grayscale(1) brightness(0.55); }
.tile[data-fits="out"] .tile__name { color: var(--sc-ink-soft); }

/* boots: the boot wall. A matte dark-grey wall across the whole screen, softly lit from above,
   one boot standing on each small black L-bracket shelf; the shelf pointed at glows orange. */
:root {
  --wall-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --wall-light: radial-gradient(90% 70% at 50% 8%, rgb(255 250 244 / 0.13), transparent 70%), radial-gradient(140% 100% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.38));
}
.room--wall {
  --sc-ink: #F2F1EA; --sc-ink-soft: #C2BFB8; color: var(--sc-ink);
  background-color: #4A484C; background-image: var(--wall-light), var(--wall-grain); background-size: auto, auto, 220px 220px;
  background-blend-mode: normal, normal, soft-light;
}
.rack--wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(46px, 6vw, 92px) clamp(10px, 2vw, 32px); }
.k-shelf { text-align: center; }
.k-shelf .tile__hit { padding-top: 8px; }
.k-shelf .show { aspect-ratio: 2 / 1; display: flex; align-items: flex-end; justify-content: center; }
.k-shelf .show::before {   /* light falling on the wall behind the boot; warmer when pointed at */
  content: ""; position: absolute; inset: -50% -20% -6%; pointer-events: none;
  background: radial-gradient(45% 52% at 50% 50%, rgb(255 244 228 / calc(0.07 + var(--on) * 0.08)), transparent 72%);
}
.k-shelf .show img {
  position: relative; z-index: 1; width: 86%; height: auto; max-height: 100%; object-fit: contain; object-position: 50% 100%; margin-bottom: -2px;
  filter: drop-shadow(0 16px 14px rgb(0 0 0 / 0.42)) drop-shadow(0 3px 3px rgb(0 0 0 / 0.35));
  transform: translateY(calc(var(--on) * -3px)); transition: transform 300ms var(--sc-ease-out);
}
.k-shelf.is-photo .show img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; border-radius: 4px; }
.k-shelf.is-drawn .show .art { position: relative; width: 82%; }
/* the shelf: a small black metal L-bracket plate (the upright is screwed to the wall behind the boot) */
.k-shelf .base {
  display: block; position: relative; width: 50%; height: 4px; margin: 0 auto; border-radius: 1px;
  background: linear-gradient(rgb(255 106 0 / var(--on)), rgb(255 106 0 / var(--on))), #070707;
  box-shadow: 0 0 calc(var(--on) * 14px) calc(var(--on) * 2px) rgb(255 106 0 / calc(var(--on) * 0.9)),
              0 calc(var(--on) * 18px) calc(var(--on) * 46px) calc(var(--on) * 6px) rgb(255 106 0 / calc(var(--on) * 0.28)),
              0 10px 12px -3px rgb(0 0 0 / 0.5);
}
.k-shelf .base::before {   /* the top of the plate, seen from just above */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 9px;
  background: linear-gradient(#323235, #141415); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.tile[data-fits="out"].k-shelf .show img { filter: grayscale(1) brightness(0.55) drop-shadow(0 16px 14px rgb(0 0 0 / 0.42)); }
.tile[data-fits="out"].k-shelf .base { background: linear-gradient(rgb(150 150 150 / var(--on)), rgb(150 150 150 / var(--on))), #070707; box-shadow: 0 10px 12px -3px rgb(0 0 0 / 0.5); }
/* quiet label under the shelf */
.k-shelf .tile__label { margin-top: 20px; }
.k-shelf .tile__name { font: 600 var(--sc-t-xs)/1.25 var(--sc-font-text); letter-spacing: 0.08em; color: #E9E6E0; }
.k-shelf .tile__meta { justify-content: center; margin-top: 3px; gap: 2px 10px; font-size: var(--sc-t-xs); color: #C2BFB8; }
.k-shelf .tile__price { color: #E9E6E0; }
.k-shelf .tile__price s { color: #A9A59E; }
.k-shelf .fits--in { color: #7BE0A9; }
.k-shelf .fits--few { color: #FFC266; }
.rack-note { max-width: var(--sc-maxw); margin: 64px auto 0; color: var(--sc-ink-soft); }
.rack-note a { color: var(--sc-ink); font-weight: 600; }

/* jerseys: on hangers along a chrome rail; the one pointed at swings and catches the light */
.room--rail { background: linear-gradient(#15120F, #0D0C0B); }
.rack--rail { position: relative; display: flex; justify-content: center; gap: clamp(10px, 3vw, 48px); padding-top: 12px; }
.rack--rail::before {
  content: ""; position: absolute; left: 2%; right: 2%; top: 13px; height: 10px; border-radius: 5px;
  background: linear-gradient(#F4F6F8, #9AA1A8 55%, #5F666D); box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
}
.k-hanger { width: clamp(150px, 22vw, 270px); margin-top: -15px; }   /* the hook goes over the rail */
.k-hanger .show { transform-origin: 50% 4%; z-index: 1; }
.k-hanger .base {
  position: absolute; inset: -12% -30% 10%; z-index: 0; pointer-events: none; opacity: var(--on);
  background: radial-gradient(45% 50% at 50% 35%, rgb(255 106 0 / 0.3), transparent 70%);
}
.k-hanger .tile__label { text-align: center; }
.k-hanger .tile__meta { justify-content: center; }
@keyframes swing { 18% { rotate: 4deg; } 42% { rotate: -2.6deg; } 66% { rotate: 1.2deg; } 100% { rotate: 0deg; } }
.tile.is-lit:is(.k-hanger, .k-peg) .show { animation: swing 1300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .tile:hover:is(.k-hanger, .k-peg) .show { animation: swing 1300ms var(--sc-ease-out); } }

/* balls: one to a box; the box's light comes on */
.rack--boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 40px 34px; }
.k-box .show {
  aspect-ratio: 1; border-radius: 4px; overflow: hidden; display: grid; place-items: end center; padding-bottom: 12%;
  background: linear-gradient(#120B07, #21160E);
  box-shadow: inset 0 28px 34px rgb(0 0 0 / 0.75), inset 0 -10px 18px rgb(0 0 0 / 0.4), 0 0 0 10px #2B1D13, 0 0 0 11px rgb(0 0 0 / 0.35), 0 26px 30px -10px rgb(70 25 0 / 0.6);
}
.k-box .show::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 3px; border-radius: 2px; background: #EDE6DA; opacity: calc(0.45 + var(--on) * 0.55); }
.k-box .show::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--on); background: radial-gradient(75% 65% at 50% 0%, rgb(255 150 60 / 0.55), transparent 72%); }
.k-box .show .art, .show__ball {
  position: relative; z-index: 1; width: 64%; filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.55));
  transform: translateY(calc(var(--on) * -5px)) rotate(calc(var(--on) * 24deg)); transition: transform 420ms var(--sc-ease-out);
}
.show__ball { display: block; aspect-ratio: 1; border-radius: 50%; background: url("img/p7.jpg") 60.3% 50.3% / 204.1% auto no-repeat; }
.k-box .base { display: none; }
.k-box .tile__label { margin-top: 24px; text-align: center; }
.k-box .tile__meta { justify-content: center; }

/* kit: hung on hooks on a pegboard */
.rack--pegs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px clamp(16px, 3vw, 40px); padding: clamp(28px, 4vw, 56px);
  border-radius: 14px; background: radial-gradient(circle, #9C8E78 0 2.6px, transparent 3.2px) 0 0 / 26px 26px, #D8CDB9;
  box-shadow: inset 0 0 0 8px #CBBFA9, 0 30px 40px -24px rgb(40 30 10 / 0.5);
}
.k-peg .tile__hit { padding-top: 20px; }
.k-peg .base {
  position: absolute; top: 0; left: 50%; width: 12px; height: 26px; margin-left: -6px; border-radius: 6px; z-index: 2;
  background: linear-gradient(90deg, #8E959C, #E9ECEF 45%, #7B828A); box-shadow: 0 4px 6px rgb(0 0 0 / 0.35);
}
.k-peg .base::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; opacity: var(--on); background: radial-gradient(rgb(255 106 0 / 0.65), transparent 70%); }
.k-peg .show { aspect-ratio: 4 / 5; display: flex; justify-content: center; transform-origin: 50% 0; filter: drop-shadow(0 14px 12px rgb(40 30 10 / 0.35)); }
.k-peg .show .art { width: auto; height: 100%; max-width: 100%; }
.k-peg .tile__label { margin-top: 18px; padding: 10px 12px; border-radius: 6px; background: #F7F2E8; text-align: center; box-shadow: 0 2px 0 rgb(0 0 0 / 0.08); }
.k-peg .tile__meta { justify-content: center; }

/* ===================================================== the closer look == */
html.spot-open { overflow: hidden; }
.spot {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  background: #151517; color: #F2F1EA; --sc-ink: #F2F1EA; --sc-ink-soft: #BAB8B1; --few: #FFC266;
}
.spot[open] { animation: spot-in 240ms var(--sc-ease-out); }
@keyframes spot-in { from { opacity: 0; } }
.spot::backdrop { background: rgb(0 0 0 / 0.6); }
.spot__in { position: relative; height: 100%; display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
.spot__panel { overflow: auto; padding: 56px clamp(24px, 3vw, 44px) 32px; display: flex; flex-direction: column; gap: 16px; background: #151517; box-shadow: 1px 0 0 rgb(255 255 255 / 0.06); z-index: 2; }
.spot__panel h2.display { font-size: var(--sc-t-3xl); }
.spot__panel .kicker { color: var(--sc-ink-soft); }
.spot__colours, .spot__about { color: var(--sc-ink-soft); }
.spot__price { font-size: var(--sc-t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.spot .opt { background: #26262A; color: #F2F1EA; }
.spot .opt[aria-pressed="true"] { background: #F2F1EA; color: #151517; }
.spot .opt[aria-pressed="true"] .few { color: #8A5300; }
.spot__note { color: #FFC266; }
.spot__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.spot__actions .pill-line { color: #F2F1EA; }
.spot__added { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; color: var(--in); }
.link { min-height: 44px; padding: 0; border: 0; background: none; color: #F2F1EA; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.spot__stage { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.spot[data-kind="shelf"] .spot__stage { background-color: #4A484C; background-image: var(--wall-light), var(--wall-grain); background-size: auto, auto, 220px 220px; background-blend-mode: normal, normal, soft-light; }
.spot[data-kind="shelf"] .spot__piece.is-here { width: min(70%, 880px); }

.spot[data-kind="hanger"] .spot__stage { background: radial-gradient(80% 70% at 50% 25%, #2A231C, #0D0C0B 75%); }
.spot[data-kind="box"] .spot__stage { background: radial-gradient(80% 70% at 50% 30%, #FF8A3D, #C24C00 82%); }
.spot[data-kind="peg"] .spot__stage { background: radial-gradient(circle, #9C8E78 0 2.6px, transparent 3.2px) 0 0 / 26px 26px, #D8CDB9; }
.spot__piece { grid-area: 1 / 1; --on: 1; }
.spot__piece.is-here { position: relative; z-index: 1; width: min(66%, 820px); }
.spot__piece.is-prev, .spot__piece.is-next { position: absolute; top: 50%; translate: 0 -50%; width: min(40%, 480px); opacity: 0.32; cursor: pointer; --on: 0; }
.spot__piece.is-prev { right: 90%; }
.spot__piece.is-next { left: 90%; }
.spot__piece .show img, .spot__piece .show .art { -webkit-user-drag: none; }
.spot[data-kind="hanger"] .spot__piece.is-here { width: min(36%, 400px); }
.spot[data-kind="hanger"] .spot__piece:not(.is-here) { width: min(24%, 280px); }
.spot[data-kind="box"] .spot__piece.is-here { width: min(44%, 460px); }
.spot[data-kind="box"] .spot__piece:not(.is-here) { width: min(28%, 300px); }
.spot[data-kind="peg"] .spot__piece.is-here { width: min(34%, 360px); }
.spot[data-kind="peg"] .spot__piece:not(.is-here) { width: min(22%, 240px); }
.spot__piece.k-peg .show { width: 100%; }
.spot__piece.k-hanger { margin-top: 0; }
.spot__piece.k-peg .base { top: -26px; }
.spot__piece.k-box .show { box-shadow: inset 0 28px 34px rgb(0 0 0 / 0.75), 0 0 0 14px #2B1D13, 0 40px 50px -16px rgb(70 25 0 / 0.7); }
.spot__nav, .spot__close {
  position: absolute; z-index: 4; width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(0 0 0 / 0.5); color: #FFFFFF; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out); touch-action: manipulation;
}
.spot__nav:active, .spot__close:active { transform: scale(0.94); }
.spot__nav svg, .spot__close svg { width: 24px; height: 24px; }
.spot__nav { top: 50%; margin-top: -26px; }
.spot__nav--prev { left: 18px; }
.spot__nav--next { right: 18px; }
.spot__close { top: 16px; right: 16px; }
@media (hover: hover) and (pointer: fine) { .spot__nav:hover, .spot__close:hover { background: rgb(0 0 0 / 0.75); } }
.spot__count { position: absolute; bottom: 18px; left: 50%; translate: -50% 0; z-index: 3; font-size: var(--sc-t-sm); font-weight: 600; color: rgb(255 255 255 / 0.8); font-variant-numeric: tabular-nums; }
.spot[data-kind="peg"] .spot__count { color: #3A2F1E; }

@media (max-width: 1000px) {
  .rack--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rack--pegs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .spot { overflow: auto; overscroll-behavior: contain; }
  .spot__in { grid-template-columns: 1fr; grid-template-rows: 48svh auto; height: auto; min-height: 100%; }
  .spot__stage { order: -1; }
  .spot__panel { overflow: visible; padding: 22px var(--sc-gutter) 0; box-shadow: none; }
  .spot__panel h2.display { font-size: var(--sc-t-2xl); }
  .spot__actions { position: sticky; bottom: 0; margin: 0 calc(var(--sc-gutter) * -1); padding: 12px var(--sc-gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: #151517; box-shadow: 0 -1px 0 rgb(255 255 255 / 0.08); }
  .spot__added { order: 9; padding-bottom: 8px; }
  .spot__piece.is-here { width: 80%; }
  .spot[data-kind="hanger"] .spot__piece.is-here { width: 50%; }
  .spot[data-kind="box"] .spot__piece.is-here { width: 60%; }
  .spot[data-kind="peg"] .spot__piece.is-here { width: 46%; }
  .spot__piece.is-prev { right: 93%; }
  .spot__piece.is-next { left: 93%; }
  .spot__nav { width: 44px; height: 44px; margin-top: -22px; }
  .spot__nav--prev { left: 8px; }
  .spot__nav--next { right: 8px; }
  .spot__close { top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; width: 44px; height: 44px; }
}
@media (max-width: 700px) {
  .room__head { grid-template-columns: 1fr; }
  .room__head h2, .room__head p, .room__head .pill { grid-row: auto; grid-column: 1; }
  .room__head p { font-size: var(--sc-t-base); }
  .rack--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 18px; }
  .tile__name { font-size: var(--sc-t-base); }
  .rack--rail { gap: 6px; }
  .k-hanger { width: 32%; }
  .rack--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 30px; padding-inline: 10px; }
  .rack--pegs { padding: 22px 16px; gap: 28px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile .show, .tile.is-lit .show { animation: none !important; transition: none; }
  .spot[open] { animation: none; }
}
.spot__piece.k-shelf .show img { width: 100%; }

/* the boot wall as the shop's own photo (displays.js layoutWall): panels of the real wall, each boot on a real shelf.
   A tile's top is the line its boot stands on; the boot sits above it, a small white price tag hangs under the shelf. */
.rack.rack--photo { display: block; position: relative; max-width: 1680px; }
.rack--photo .wallpanel {
  position: absolute; left: 0; right: 0; list-style: none; background-repeat: no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.rack--photo .tile { position: absolute; z-index: 1; translate: -50% 0; }
.rack--photo .k-shelf .tile__hit { position: absolute; left: 0; right: 0; bottom: 100%; padding-top: 0; }
.rack--photo .k-shelf .show img { width: 100%; filter: drop-shadow(0 10px 9px rgb(0 0 0 / 0.38)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.4)); }
.rack--photo .k-shelf .show::before { inset: -40% -25% -10%; background: radial-gradient(45% 50% at 50% 62%, rgb(255 150 70 / calc(var(--on) * 0.32)), transparent 72%); }
/* the photo has the black plate: only its glow is drawn */
.rack--photo .k-shelf .base {
  position: absolute; left: 12%; right: 12%; bottom: -3px; width: auto; height: 3px; background: rgb(255 106 0 / var(--on)); opacity: var(--on);
  box-shadow: 0 0 12px 2px rgb(255 106 0 / 0.8), 0 14px 36px 6px rgb(255 106 0 / 0.25);
}
.rack--photo .k-shelf .base::before { display: none; }
.rack--photo .k-shelf .tile__label {
  position: relative; left: 50%; translate: -50% 0; width: max-content; max-width: 136%; margin-top: 10px; padding: 4px 9px 5px; border-radius: 3px; background: #F7F5F0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 6px 14px -6px rgb(0 0 0 / 0.35);
}
.rack--photo .k-shelf .tile__name { color: #161514; font-size: 0.7rem; letter-spacing: 0.06em; }
.rack--photo .k-shelf .tile__meta { font-size: 0.7rem; margin-top: 1px; gap: 0 8px; }
.rack--photo .k-shelf .tile__meta { color: #4A4743; }
.rack--photo .k-shelf .tile__price { color: #161514; }
.rack--photo .k-shelf .tile__price s { color: #8A867F; }
.rack--photo .k-shelf .fits--in { color: #17703F; }
.rack--photo .k-shelf .fits--few { color: #9A5300; }
.rack--photo .k-shelf .fits--out { color: #6F6B65; }
.rack--photo .tile[data-fits="out"] .tile__name { color: #6F6B65; }
.rack--photo .tile[data-fits="out"].k-shelf .base { background: rgb(150 150 150 / var(--on)); box-shadow: none; }
.rack--photo.is-along { margin: 0; max-width: none; }
.rack--photo .tile__note { font-size: 0.62rem; letter-spacing: 0.04em; color: #8A867F; margin-bottom: 1px; }
.rack--photo .k-shelf.is-drawn .show { visibility: hidden; }
/* the wall shows only the boots: name, price and sizes come up when one is tapped (the closer look) */
.rack--photo .k-shelf .tile__label { display: none; }

/* pointed at (a mouse) or reached by the keyboard: the piece grows a little off its shelf and its orange line comes on.
   On a phone nothing lights on the wall: a tap opens the closer look, where the line is lit. */
.rack--photo .tile__hit { transform: translateY(calc(var(--sink, 0) * 100%)); }
.rack--photo .show img, .rack--photo .show__ball {
  transform-origin: 50% 100%; transform: translateY(calc(var(--on) * -4px)) scale(calc(1 + var(--on) * 0.16));
  transition: transform 320ms var(--sc-ease-out), filter 320ms var(--sc-ease-out);
}
.rack--photo .tile { z-index: 1; }
.rack--photo .tile:hover, .rack--photo .tile:has(:focus-visible) { z-index: 3; }
/* a spotlight that follows the mouse over the wall: bright where it points, the rest of the wall a little darker */
.rack--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 400ms var(--sc-ease-out);
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgb(255 246 228 / 0.2), rgb(255 246 228 / 0) 55%, rgb(8 6 4 / 0.32) 100%);
}
.rack--photo.is-spot::after { opacity: 1; }
.rack--photo .tile:hover, .rack--photo .tile:has(:focus-visible) { z-index: 3; }

/* the ball wall: one ball in each ring, sitting down into it */
.rack--photo .k-box { text-align: center; }
.rack--photo .k-box .tile__hit { position: absolute; left: 0; right: 0; bottom: 100%; padding: 0; }
.rack--photo .k-box .show { aspect-ratio: 1; display: grid; place-items: center; padding: 0; overflow: visible; border-radius: 50%; background: none; box-shadow: none; }
.rack--photo .k-box .show::before, .rack--photo .k-box .show::after { display: none; }
.rack--photo .k-box .show__ball, .rack--photo .k-box .show img { width: 100%; filter: drop-shadow(0 10px 9px rgb(0 0 0 / 0.38)); }
.rack--photo .k-box .tile__label { display: none; }
.rack--photo .k-box .base {
  display: block; position: absolute; left: 14%; right: 14%; bottom: 14%; height: 3px; border-radius: 2px; opacity: var(--on);
  background: rgb(255 106 0); box-shadow: 0 0 12px 2px rgb(255 106 0 / 0.8), 0 14px 36px 6px rgb(255 106 0 / 0.25);
}