/* Benny Graves · the record plaque (.pq-)
   A deep shadow-box frame: satin-black mitred moulding, gold slip, black suede, a metal-plated record with its light cone,
   the song's cover art, and a brushed-brass nameplate. Everything that is the same on every plaque is pre-rendered
   (views/gallery/build/render_plaque.py → assets/*.webp); per song there are only two <img>s and a line of text.
   Layer order (paint order, no z-index): wall shadow (::before) → shell → record → label → cover → plate text → glass (::after).
   LAW: nothing is ever drawn over the cover or the label. The glass image has feathered holes over both; the record sits
   under them; the cover's shadow falls outward, away from the label.
   Sizing: plaque.js sets an explicit px width and height and --pq-u (= 1% of the width, in px); every length inside is
   calc(N * var(--pq-u)). No container queries (unreliable inside CSS 3D on WebKit). Geometry in % comes from the renderer. */

.pq {
  position: relative; display: block; margin: 0; padding: 0;
  width: 100%; aspect-ratio: 2332 / 1910; --pq-u: 4px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pq::before, .pq::after { content: ""; position: absolute; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat; }

/* the plaque's own shadow on the wall (the gallery can switch it off and draw its own: .pq-noshadow) */
.pq::before { inset: -6% -10% -16% -10%; background-image: url("assets/shadow-day.webp"); }
html[data-theme="night"] .pq::before { background-image: url("assets/shadow-night.webp"); }
.pq.pq-noshadow::before { display: none; }

.pq > i, .pq > img { position: absolute; display: block; margin: 0; }
.pq > i { background-size: 100% 100%; background-repeat: no-repeat; }
.pq > img { -webkit-user-drag: none; }

/* frame, slip, walls, suede, record mount shadow, blank brass plate */
.pq-shell { inset: 0; background-color: #121010; background-image: url("assets/shell-day-1600.webp"); }
html[data-theme="night"] .pq-shell { background-image: url("assets/shell-night-1600.webp"); }
.pq-lo .pq-shell { background-image: url("assets/shell-day-800.webp"); }
html[data-theme="night"] .pq-lo .pq-shell { background-image: url("assets/shell-night-800.webp"); }

/* the record (rotation-symmetric except its light cone: rotating it moves the sheen) */
.pq-rec { left: 11.235%; top: 14.7644%; width: 42.8816%; height: 52.356%; background-image: url("assets/record-day-704.webp"); transform-origin: 50% 50%; }
html[data-theme="night"] .pq-rec { background-image: url("assets/record-night-704.webp"); }
.pq-lo .pq-rec { background-image: url("assets/record-day-352.webp"); }
html[data-theme="night"] .pq-lo .pq-rec { background-image: url("assets/record-night-352.webp"); }
.pq.pq-live .pq-rec { will-change: transform; }

/* centre label: a circular crop of the cover with the spindle hole punched through: an SVG <image> clipped to a ring
   (clip-rule evenodd). A crop, nothing drawn on it, and no CSS mask (so nothing depends on mask support in CSS 3D). */
.pq > .pq-label { position: absolute; display: block; left: 24.9571%; top: 31.5183%; width: 15.4374%; height: 18.8482%; overflow: visible; pointer-events: none; }

/* the cover art: square, untouched. Its shadow falls down and to the right, onto the record and the suede. */
.pq-cover {
  left: 44.3396%; top: 13.822%; width: 44.4254%; height: 54.2408%;
  object-fit: cover;
  box-shadow:
    0 calc(-0.05 * var(--pq-u)) 0 0 rgba(255, 255, 255, .10),
    0 0 calc(0.45 * var(--pq-u)) rgba(0, 0, 0, .32),
    calc(0.12 * var(--pq-u)) calc(0.16 * var(--pq-u)) calc(0.22 * var(--pq-u)) rgba(0, 0, 0, .55),
    calc(0.55 * var(--pq-u)) calc(0.85 * var(--pq-u)) calc(1.5 * var(--pq-u)) rgba(0, 0, 0, .50),
    calc(1.1 * var(--pq-u)) calc(1.7 * var(--pq-u)) calc(3.2 * var(--pq-u)) rgba(0, 0, 0, .30);
}
html[data-theme="night"] .pq-cover {
  box-shadow:
    0 calc(-0.05 * var(--pq-u)) 0 0 rgba(255, 236, 200, .16),
    0 0 calc(0.45 * var(--pq-u)) rgba(0, 0, 0, .38),
    calc(0.08 * var(--pq-u)) calc(0.2 * var(--pq-u)) calc(0.2 * var(--pq-u)) rgba(0, 0, 0, .7),
    calc(0.25 * var(--pq-u)) calc(1.05 * var(--pq-u)) calc(1.25 * var(--pq-u)) rgba(0, 0, 0, .62),
    calc(0.5 * var(--pq-u)) calc(2.1 * var(--pq-u)) calc(3 * var(--pq-u)) rgba(0, 0, 0, .38);
}

/* the engraved nameplate text (the plate itself is in the shell) */
.pq-plate {
  left: 22.1269%; top: 72.2513%; width: 55.7461%; height: 14.0314%;
  position: absolute; margin: 0; padding: 0 calc(2.8 * var(--pq-u)); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.46 * var(--pq-u));
  text-align: center; color: #1e1609; pointer-events: none;
  text-shadow: 0 calc(0.045 * var(--pq-u)) 0 rgba(255, 238, 196, .55), 0 calc(-0.03 * var(--pq-u)) 0 rgba(70, 46, 12, .28);
}
html[data-theme="night"] .pq-plate { color: #1a1207; text-shadow: 0 calc(0.045 * var(--pq-u)) 0 rgba(255, 226, 170, .5), 0 calc(-0.03 * var(--pq-u)) 0 rgba(60, 38, 8, .3); }
.pq-plate > span { display: block; max-width: 100%; }
.pq-name {
  font: 650 calc(1.24 * var(--pq-u))/1.1 "Archivo", "Hanken Grotesk", ui-sans-serif, sans-serif;
  font-variation-settings: "wdth" 125; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
}
.pq-title {
  font: 600 var(--pq-ts, calc(3 * var(--pq-u)))/1.06 "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  font-variation-settings: "opsz" 11; letter-spacing: .005em;
  text-wrap: balance; overflow-wrap: break-word;
}
.pq-date {
  font: 650 calc(1.0 * var(--pq-u))/1.1 "Archivo", "Hanken Grotesk", ui-sans-serif, sans-serif;
  font-variation-settings: "wdth" 112; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; opacity: .86;
}

/* glass: reflections on the whole glazing, with feathered holes over the cover and the centre label */
.pq::after { inset: 0; background-image: url("assets/glass-day-1600.webp"); }
html[data-theme="night"] .pq::after { background-image: url("assets/glass-night-1600.webp"); }
.pq-lo::after { background-image: url("assets/glass-day-800.webp"); }
html[data-theme="night"] .pq-lo::after { background-image: url("assets/glass-night-800.webp"); }

/* the moving glint on the frame (only for a plaque in the hand): four strips over the moulding and slip, each clipping the
   same light band; the strips stop at the glass opening, so the glint can never cross the art */
.pq > .pq-gl { position: absolute; overflow: hidden; pointer-events: none; }
.pq-gl-t { left: 0; top: 0; width: 100%; height: calc(4.974 * var(--pq-u)); }
.pq-gl-b { left: 0; bottom: 0; width: 100%; height: calc(4.974 * var(--pq-u)); }
.pq-gl-l { left: 0; top: calc(4.974 * var(--pq-u)); bottom: calc(4.974 * var(--pq-u)); width: calc(4.974 * var(--pq-u)); }
.pq-gl-r { right: 0; top: calc(4.974 * var(--pq-u)); bottom: calc(4.974 * var(--pq-u)); width: calc(4.974 * var(--pq-u)); }
.pq-gl > i { position: absolute; display: block; width: calc(100 * var(--pq-u)); height: calc(81.885 * var(--pq-u)); will-change: transform;
  background: linear-gradient(112deg, rgba(255, 246, 228, 0) 41%, rgba(255, 246, 228, .2) 47%, rgba(255, 250, 238, .42) 50%, rgba(255, 246, 228, .2) 53%, rgba(255, 246, 228, 0) 59%); }
.pq-gl-t > i { left: 0; top: 0; }
.pq-gl-b > i { left: 0; bottom: 0; }
.pq-gl-l > i { left: 0; top: calc(-4.974 * var(--pq-u)); }
.pq-gl-r > i { right: 0; top: calc(-4.974 * var(--pq-u)); }
html[data-theme="day"] .pq-gl > i { opacity: .75; }