/* ================= Home: media unit, DVDs, TV ================= */
.home { background: #120c08; color: #f3ece4; }
.home .site-header { background: #2f2219; padding: 18px 24px; }   /* the wall's own brown, top to bottom */
.home .site-header .logo img { width: min(560px, 70vw); }
.home .site-header .logo img { mix-blend-mode: lighten; }   /* the logo's black ground drops away against the brown */

.store-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  padding: 12px 16px; background: #2f2219;
  font-family: "Oswald", var(--font); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem;
}
.store-nav a { text-decoration: none; color: #d9cbbd; }
.store-nav a:hover { color: #fff; }

/* ---------- the room ---------- */
.room {
  --directing: #ff5bd8; --writing: #6dffc6; --producing: #ffcb4f;
  --spine-w: 38px; --spine-h: clamp(110px, calc((100vw - 150px) / 5.9), 240px); --spine-font: 15.2px;
  position: relative; overflow: hidden;
  background:
    linear-gradient(#2f2219, rgba(47,34,25,.6) 50px, rgba(47,34,25,0) 150px),   /* the brown header melts into the wall, no darker */
    radial-gradient(ellipse 38% 55% at 22% -8%, rgba(255, 205, 145, .30), transparent 72%),  /* key lamp */
    radial-gradient(ellipse 45% 50% at 72% 35%, rgba(120, 165, 255, .06), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.55)),           /* room falloff */
    linear-gradient(#2f2219, #1a120c);
}
.room::before { /* soft plaster texture on the wall */
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.room.tv-glow::after { /* the TV lights up the room while playing */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 45% at 70% 40%, rgba(140, 180, 255, .14), transparent 70%);
  animation: flicker 2.4s infinite alternate;
}
@keyframes flicker { 0% { opacity: .7; } 40% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: .95; } }
.room-inner { /* TV on its stand, the shelving unit underneath, both the same width */
  --furniture-w: min(1160px, 100%);
  position: relative; max-width: 1360px; margin: 0 auto; padding: 36px 24px 0;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0;  /* the TV stands right on top of the shelving unit */
}
.tv-area { grid-row: 1; width: var(--furniture-w); }
.floor {
  position: relative; height: 64px; margin-top: -2px;
  background: linear-gradient(rgba(20,10,4,.55), rgba(10,5,2,.85)), var(--oak-h) 0 0 / 520px auto, #7a5a3a;
  box-shadow: inset 0 10px 18px rgba(0,0,0,.55);
}

/* ---------- the shelving unit ----------
   Light rig used across the scene (kept consistent so everything reads as one room):
   key  = warm lamp up and to the left       --key
   leds = warm-white strip under each shelf  --led
   fill = cool TV spill on the right, only while playing */
.room { --key: 255, 214, 160; --led: 255, 236, 205; --oak-v: url("/images/textures/oak-v-seamless.webp"); --oak-h: url("/images/textures/oak-h-seamless.jpg"); }
.unit {
  position: relative; padding: 0 20px; width: var(--furniture-w); box-sizing: border-box;
  background:
    linear-gradient(90deg, rgba(255,240,215,.10), transparent 35%, rgba(0,0,0,.28)),   /* key from the left */
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.35)),                              /* falloff toward the floor */
    var(--oak-v) 0 0 / 420px auto, #b98f62;
  box-shadow: 0 40px 60px -10px rgba(0,0,0,.75), 22px 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(60,35,15,.6);
}
.unit::before, .unit::after { /* inner edges of the side panels catch the light */
  content: ""; position: absolute; top: 24px; bottom: 36px; width: 4px;
}
.unit::before { left: 16px; background: linear-gradient(90deg, rgba(255,235,205,.35), rgba(70,40,15,.55)); }
.unit::after { right: 16px; background: linear-gradient(90deg, rgba(40,22,8,.7), rgba(255,235,205,.15)); }
.unit-crown {
  position: relative; height: 24px; margin: 0 -12px;
  background: linear-gradient(rgba(255,245,225,.35), rgba(255,245,225,0) 30%, rgba(0,0,0,.35)), var(--oak-h) 0 0 / 420px auto, #b98f62;
  border-radius: 3px 3px 0 0; box-shadow: 0 7px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,250,235,.6), inset 0 -2px 0 rgba(60,35,15,.5);
}
.unit-base {
  height: 36px; margin: 0 -20px;
  background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)), var(--oak-h) 0 0 / 420px auto, #9c764e;
  box-shadow: inset 0 2px 0 rgba(255,235,205,.25);
}
.cubby { --neon: var(--directing); }
.cubby.shelf-writing { --neon: var(--writing); }
.cubby.shelf-producing { --neon: var(--producing); }
.spines {
  position: relative; display: flex; align-items: flex-end; gap: 1px;
  min-height: calc(var(--spine-h) + 28px); padding: 28px 14px 0;
  background:
    linear-gradient(rgba(var(--led), .38), rgba(var(--led), .12) 22%, rgba(var(--led), 0) 60%), /* LED wash on the back panel */
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.62)),                                    /* back panel sits in shade */
    var(--oak-v) 0 0 / 420px auto, #8d6a45;
  box-shadow: inset 0 26px 22px -18px rgba(0,0,0,.45), inset 16px 0 20px -10px rgba(0,0,0,.6), inset -16px 0 20px -10px rgba(0,0,0,.7), inset 0 -10px 12px -8px rgba(0,0,0,.6);
}
.spines::before { /* the LED strip itself, tucked under the shelf above */
  content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 2px;
  background: rgb(255, 248, 232); box-shadow: 0 0 6px 1px rgba(var(--led), .9), 0 4px 22px 4px rgba(var(--led), .35);
}
.board {
  position: relative; height: 30px; margin: 0 -20px;
  border-top: 7px solid transparent;
  background:
    linear-gradient(rgba(255,245,225,.55), rgba(255,245,225,.35)) top / 100% 7px no-repeat border-box, /* lit top surface */
    linear-gradient(rgba(255,240,215,.15), rgba(0,0,0,.3)) padding-box,
    var(--oak-h) 0 0 / 420px auto border-box, #b98f62;
  box-shadow: 0 10px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,250,235,.55);
  display: flex; align-items: center; justify-content: center;
}
.board::before { /* contact shadow where the cases meet the shelf */
  content: ""; position: absolute; left: 20px; right: 20px; top: -7px; height: 4px;
  background: linear-gradient(rgba(0,0,0,.45), transparent);
}
.shelf-tag {
  margin: 0; padding: 0 12px 0 16px; position: relative;
  font-family: "Oswald", var(--font); font-weight: 600; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; line-height: 16px;
  color: #2a1d10; background: linear-gradient(#fbf5e7, #e6d9bd);
  border: 2px solid #b8924c; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 #fff;
}
.shelf-tag::before { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); }
.bookend {
  flex: 0 0 auto; width: 16px; height: calc(var(--spine-h) * .55); margin-left: 6px;
  background: linear-gradient(90deg, #3a3a40, #8a8a92 30%, #4a4a52 60%, #202024); border-radius: 3px 3px 0 0;
  box-shadow: 5px 2px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.shelf-extra { margin-left: auto; align-self: flex-end; display: flex; align-items: flex-end; gap: 18px; padding-right: 2px; }

/* things standing in front of a case (Pizzato's puppet, the Brownie) */
.prop-anchor { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; }

/* ---------- Directing shelf: DVDs face-out in 3/4 view, fanned like a store display ---------- */
/* Featured shelf: the headline titles face-out, like a video store's new-release wall */
.sticker { /* price-gun style sticker on the cover */
  position: absolute; z-index: 3; top: 4%; right: 4%; width: 30cqw; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 3cqw; box-sizing: border-box;
  background: radial-gradient(circle at 35% 30%, #fff36b, #ffd200 55%, #e3a900); color: #1a1200;
  font-family: "Oswald", var(--font); font-weight: 600; font-size: 5.6cqw; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  transform: rotate(12deg); box-shadow: 1px 2px 4px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.6);
}
.cover-placeholder { /* Drive Me To Rap until there's art: motion-capture markers on black */
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.5cqw; padding: 9cqw 8cqw 10cqw;
  background:
    radial-gradient(circle, #c9f7ff 0 1.6%, transparent 2.2%) 18% 22% / 100% 100% no-repeat,
    radial-gradient(circle, #c9f7ff 0 1.6%, transparent 2.2%) 34% 30% / 100% 100% no-repeat,
    radial-gradient(circle, #c9f7ff 0 1.6%, transparent 2.2%) 26% 42% / 100% 100% no-repeat,
    radial-gradient(circle, #c9f7ff 0 1.6%, transparent 2.2%) 42% 46% / 100% 100% no-repeat,
    radial-gradient(circle, #c9f7ff 0 1.6%, transparent 2.2%) 22% 58% / 100% 100% no-repeat,
    radial-gradient(circle, #c9f7ff 0 1.6%, transparent 2.2%) 38% 60% / 100% 100% no-repeat,
    radial-gradient(ellipse at 30% 35%, rgba(90, 40, 160, .55), transparent 60%), #08070c;
  color: #fff;
}
.ph-kicker { font-family: "Oswald", var(--font); font-size: 4.4cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }
.ph-title { font-family: "Bebas Neue", "Oswald", var(--font); font-size: 19cqw; line-height: .9; letter-spacing: .02em; }
.ph-format { font-family: "Oswald", var(--font); font-size: 4cqw; letter-spacing: .1em; text-transform: uppercase; color: #cfd6e6; }
.ph-band { margin-top: 3cqw; align-self: flex-start; padding: 1.5cqw 3cqw; background: #fff; color: #000; font-family: "Oswald", var(--font); font-weight: 600; font-size: 4cqw; letter-spacing: .12em; text-transform: uppercase; }

/* Directing shelf: the rest of the work spine-out, the puppet beside Pizzato */
.shelf-directing .spines { gap: 1px; padding-left: 14px; }
.dvd34 {
  --h: var(--spine-h); --w: calc(var(--h) / 1.48); --d: 17px;
  position: relative; flex: 0 0 auto; width: var(--w); height: var(--h); margin-right: calc(var(--w) * -0.76);
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; perspective: 1000px;
}
.dvd34 .case { transform: rotateY(30deg); transform-origin: 30% 50%; transition: transform .35s ease; }
.dvd34:hover, .dvd34:focus-visible { z-index: 5; outline: none; }
.dvd34:hover .case, .dvd34:focus-visible .case { transform: translateY(-14px) rotateY(10deg); }
.dvd34:focus-visible .face.front { box-shadow: 0 0 0 3px var(--directing); }
.dvd34 .face.front > img { width: 100%; height: 100%; object-fit: cover; }
.dvd34 .face.front .cover-fill { position: absolute; inset: 0; transform: scale(1.15); filter: blur(10px) brightness(.45) saturate(1.2); }
.dvd34 .face.front .cover-still { position: absolute; left: 0; top: 16%; height: auto; object-fit: contain; }
.dvd34 .face.front { box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.dvd34 .face.front::before { /* the LED strip above lights the top of each cover */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(var(--led), .18), transparent 25%); }
.dvd34 .face.spine { display: flex; flex-direction: column; align-items: center; background: linear-gradient(90deg, #050505, #1c1c1f 50%, #070707); }
.dvd34 .face.spine .spine-title { font-size: calc(var(--d) * .62); padding: 6px 0; }
.dvd34 .face.spine .spine-band { height: 10px; }
.dvd34 .face.spine .spine-logo { font-size: 6px; margin-bottom: 6px; }
.dvd34::after { /* contact shadow */
  content: ""; position: absolute; left: 4%; right: -12%; bottom: -5px; height: 10px; background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%); }
.dvd34.out { opacity: 0; transition: none; }
.dvd34.playing .face.front { box-shadow: 0 0 0 2px var(--directing), 0 0 22px var(--directing); }
.dvd-slot { flex: 0 0 auto; width: 64px; margin-left: calc(var(--spine-h) / 1.42 * .7); }  /* saved for Drive Me To Rap */

/* the real Pizzato puppet: about 6 inches tall next to 7.5-inch DVD cases */
.puppet-stand { position: relative; flex: 0 0 auto; height: calc(var(--spine-h) * .8); margin: 0 12px 0 4px; }
.puppet { display: block; height: 100%; width: auto; filter: drop-shadow(-5px 4px 5px rgba(0,0,0,.5)) brightness(.97) sepia(.06); }
.puppet-stand::after { content: ""; position: absolute; left: 6%; right: 2%; bottom: -4px; height: 9px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }

/* the theatre corner: the Rinde Eckert documentary, then the two Playbills side by side, each on a clear acrylic stand */
.theatre { margin-left: auto; display: flex; align-items: flex-end; gap: calc(var(--spine-h) * .05); padding-right: 4px; }
.theatre .dvd34 { margin-right: calc(var(--spine-h) * .04); }
.playbill-stand {
  --pbw: calc(var(--spine-h) * .9 * 11 / 17);  /* a little shorter than the DVDs */
  position: relative; flex: 0 0 auto; width: var(--pbw); padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px;
}
.pb-cover {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 11 / 17; overflow: hidden; container-type: inline-size;
  transform: rotateX(8deg) rotateY(-6deg); transform-origin: bottom center; transition: transform .3s ease;
  box-shadow: 12px 8px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.15);
}
.pb-cover::after { /* glossy paper + LED from above */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(var(--led), .16), transparent 30%), linear-gradient(115deg, rgba(255,255,255,.18), transparent 35%); }
.playbill-stand:hover .pb-cover, .playbill-stand:focus-visible .pb-cover { transform: rotateX(3deg) rotateY(0) translateY(-8px); }
.playbill-stand:hover, .playbill-stand:focus-visible { z-index: 3; outline: none; }
.playbill-stand:focus-visible .pb-cover { box-shadow: 0 0 0 2px #fff, 12px 8px 16px rgba(0,0,0,.55); }
.playbill-stand.out { opacity: 0; transition: none; }

/* the cover itself: bright yellow masthead, venue line, show art */
.pb-mast { flex: 0 0 23%; background: #ffe500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5cqw; padding: 0 4cqw; }
.pb-name { font-family: "Ultra", "Rockwell Extra Bold", serif; font-size: 11.5cqw; line-height: .95; color: #111; text-transform: uppercase; text-align: center; letter-spacing: .01em; }
.pb-line { font-family: "Montserrat", var(--font); font-weight: 600; font-size: 4.3cqw; letter-spacing: .1em; color: #1b1b1b; text-transform: uppercase; text-align: center; }
.pb-art { position: relative; flex: 1; min-height: 0; background: #1a1206; }
.pb-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-showtitle { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 8.4cqw; letter-spacing: .1em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.85); padding: 0 6cqw; line-height: 1.2; }

/* opening a Playbill in your hands: the cover swings open like a booklet */
.viewer.shelf-playbill { --neon: #ffe500; }
.viewer.shelf-playbill .viewer-stage { --W: min(360px, 42vw, calc((100vh - 130px) / 1.545)); --H: calc(var(--W) * 1.545); --d: 3px; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.viewer.shelf-playbill .big-case.hinged { transform-origin: left center; }
.viewer.shelf-playbill .big-case.flipped { transform: rotateY(-168deg) !important; }
.viewer.shelf-playbill .viewer-stage:has(.big-case.flipped) { transform: translateX(50%); }
.pb-front { display: flex; flex-direction: column; container-type: inline-size; }
.pb-front .pb-mast, .pb-front .pb-art { display: flex; }
.pb-front .pb-art { display: block; }
.inside-page { position: absolute; inset: 0; background: #fbfaf5; color: #1b1b1b; overflow-y: auto; container-type: inline-size;
  box-shadow: inset 6px 0 14px -6px rgba(0,0,0,.35); }
.inside-page[hidden] { display: none; }
.inside-art, .pb-inside-cover { padding: 9cqw 8cqw; font-family: Georgia, "Times New Roman", serif; font-size: clamp(11px, 3.6cqw, 15px); line-height: 1.5; display: flex; flex-direction: column; gap: .7em; }
.back-art.pb-inside-cover { background: #fbfaf5 !important; color: #1b1b1b; min-height: 100%; font-family: Georgia, "Times New Roman", serif; }
.back-art.pb-inside-cover p { color: #1b1b1b; }
.back-art.pb-inside-cover .pb-role { color: #666; } .back-art.pb-inside-cover .pb-kicker { color: #8a6d00; }
.inside-art h3, .pb-inside-cover h3 { margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 8cqw; line-height: 1.1; letter-spacing: .04em; }
.pb-kicker { margin: 0; font-family: "Montserrat", var(--font); font-weight: 600; font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: #8a6d00; }
.inside-art p, .pb-inside-cover p, .inside-art blockquote { margin: 0; }
.pb-role { font-family: "Montserrat", var(--font); font-weight: 600; font-size: .7em; letter-spacing: .12em; text-transform: uppercase; color: #666; margin-top: .6em !important; }
.pb-person { font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 1.15em; }
.pb-stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.pb-stills img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.inside-art blockquote { font-style: italic; border-left: 3px solid #ffe500; padding-left: .8em; }
.pb-links a { color: #1b1b1b; margin-right: 1em; }
.pb-mark { margin-top: auto !important; font-family: "Montserrat", var(--font); font-size: .65em; letter-spacing: .1em; border: 1px solid #999; align-self: flex-start; padding: 0 .4em; color: #777; }
.playbill-spine { background: #ffe500 !important; }

/* ---------- cork board, below the shelving unit on its own wall: real cork, aluminum frame ---------- */
.bts-wall { padding: 44px 24px 56px; background: linear-gradient(#17100b, #0d0907); }
.bts-wall .corkboard.gallery { width: min(1160px, 100%); margin: 0 auto; }
.bts-title { margin: 0 auto 18px; width: fit-content; font-family: "Oswald", var(--font); font-weight: 600; font-size: .8rem; letter-spacing: .3em;
  text-transform: uppercase; color: #e8dccb; }
.corkboard.gallery {
  order: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0 0 30px; padding: 22px 26px 24px; box-sizing: border-box;
  border: 9px solid transparent; border-radius: 2px;
  background:
    linear-gradient(rgba(255,240,215,.08), rgba(0,0,0,.12)) padding-box,
    url("/images/textures/cork.jpg") 0 0 / 456px auto padding-box,
    linear-gradient(135deg, #f4f5f7, #b9bdc4 30%, #e9ebee 50%, #a3a7ae 75%, #d8dbdf) border-box;  /* brushed aluminum frame */
  box-shadow: 0 16px 28px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.25), inset 0 0 14px rgba(0,0,0,.25);
}
.cork-row { display: flex; gap: 14px; align-items: flex-start; }
.print { position: relative; margin: 0; flex: var(--r) 1 0; min-width: 0; transform: rotate(var(--t, -.8deg)); transition: transform .25s ease; }
.print:nth-child(4n+1) { --t: -1.4deg; } .print:nth-child(4n+2) { --t: 1deg; } .print:nth-child(4n+3) { --t: -.4deg; } .print:nth-child(4n) { --t: 1.6deg; }
.print:hover { transform: rotate(0) scale(1.06); z-index: 3; }
.print::before { /* push pin */
  content: ""; position: absolute; z-index: 2; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9a8a, #d32f2f 55%, #7f1515); box-shadow: 1px 3px 3px rgba(0,0,0,.5); }
.corkboard.gallery button { display: block; width: 100%; height: auto; aspect-ratio: var(--r); background: #222; box-shadow: 2px 4px 8px rgba(0,0,0,.45); }
.corkboard.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corkboard.gallery figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Playbills with real paper depth, leaning back against the shelf ---------- */
.playbill-stand { perspective: 900px; }
.playbill-stand:first-child { z-index: 2; }  /* Theatre of NOTE in front of Second Stage */
.pb-3d { position: relative; display: block; transform-style: preserve-3d; transform: rotateY(-16deg); transform-origin: bottom center; transition: transform .35s ease; }
.playbill-stand + .playbill-stand .pb-3d { transform: rotateY(-10deg); }
.playbill-stand:hover .pb-3d, .playbill-stand:focus-visible .pb-3d { transform: rotateY(-4deg) translateY(-8px); }
.pb-3d .pb-cover { transform: none; transition: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.playbill-stand::after { /* shadow it throws on the back panel and the shelf */
  content: ""; position: absolute; z-index: -1; left: 10%; right: -2%; bottom: -2px; height: 70%;
  background: radial-gradient(ellipse at 40% 100%, rgba(0,0,0,.55), transparent 70%); filter: blur(6px); transform: skewX(-18deg); transform-origin: bottom; }
.pb-presents { font-family: "Montserrat", var(--font); font-weight: 600; font-size: .62em; letter-spacing: .2em; text-transform: uppercase; color: #777; margin-top: -.3em !important; }
.pb-section { font-family: "Montserrat", var(--font); font-weight: 600; font-size: .7em; letter-spacing: .16em; text-transform: uppercase; color: #8a6d00;
  border-top: 1px solid #ddd6c4; padding-top: .7em; margin-top: .6em !important; }
.pb-note { font-style: italic; color: #444; }
.inside-art .pb-section { border-top: 0; margin-top: 0 !important; padding-top: 0; }
.pb-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4cqw; }
.pb-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* ---------- The Game: best seller, with its YouTube award beside it ---------- */

/* CDs on the Directing shelf, at jewel-case scale next to the DVDs */
.shelf-cds { display: flex; gap: 10px; align-items: flex-end; margin-left: 8px; }
.shelf-cds .cd { width: calc(var(--spine-h) * .54); }

/* ---------- Writing shelf ---------- */
.shelf-writing .spines { gap: 26px; padding-left: 26px; }
.script-feature { position: relative; flex: 0 0 auto; width: calc(var(--spine-h) * 1.04 / 1.294); padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.sf-cover {
  position: relative; display: block; aspect-ratio: 8.5 / 11; overflow: hidden; container-type: inline-size;
  transform: rotateX(10deg) rotateY(-12deg); transform-origin: bottom center; transition: transform .35s ease;
  box-shadow: 12px 8px 16px rgba(0,0,0,.55), 4px 0 0 #e9e3d6, 5px 0 0 #cfc8b8, 7px 1px 0 #e9e3d6;  /* cover + page edges */
}
.script-feature:hover .sf-cover, .script-feature:focus-visible .sf-cover { transform: rotateX(4deg) rotateY(-3deg) translateY(-8px); }
.script-feature:focus-visible { outline: none; }
.script-feature:focus-visible .sf-cover { box-shadow: 0 0 0 2px #fff, 12px 8px 16px rgba(0,0,0,.55); }
.sf-cover > img, .sf-front > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cover .brad, .sf-front .brad { position: absolute; left: 5cqw; top: 14%; width: 4.4cqw; aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #fff4c2, #d8b04f 45%, #8a6a20); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.sf-cover .brad.b2, .sf-front .brad.b2 { top: auto; bottom: 14%; }
.laurels { position: absolute; z-index: 2; left: 4cqw; right: 4cqw; bottom: 16cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw 3cqw; }
.laurel { position: relative; display: grid; place-items: center; color: #e9c86a; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.laurel-wreath { width: 100%; height: auto; }
.laurel-text { position: absolute; inset: 0 18% 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-family: "Cinzel", Georgia, serif; font-size: 3.4cqw; line-height: 1.1; color: #f6e2a4; }
.laurel-text b { font-size: 1.15em; font-weight: 600; }
.sf-variety { position: absolute; z-index: 2; left: 0; right: 0; bottom: 5cqw; text-align: center; font-family: "Montserrat", var(--font); font-weight: 600;
  font-size: 3.6cqw; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; }
.sf-variety b { font-family: Georgia, serif; font-size: 1.5em; letter-spacing: .02em; text-transform: none; font-style: italic; }
.sf-front { container-type: inline-size; }

/* the rest of the screenplays stand upright, edge out like binders: card-stock covers in revision colors, brass brads, typed labels */
.script-row { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 1px; margin-left: calc(var(--spine-h) * .12); }
.script-flat {
  --t: .115; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px;
  width: calc(var(--spine-h) * var(--t)); height: calc(var(--spine-h) * .98); padding: calc(var(--spine-h) * .05) 0; box-sizing: border-box;
  border: 0; border-radius: 2px 2px 1px 1px; cursor: pointer; transition: transform .25s ease;
  background:
    linear-gradient(90deg, rgba(255,255,255,.4), transparent 14%, transparent 80%, rgba(0,0,0,.22)),
    linear-gradient(rgba(var(--led), .22), transparent 22%),
    var(--stock, #f4efe2);
  box-shadow: 3px 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
}
.script-flat:nth-child(6n+2) { --stock: #cfe0f2; } .script-flat:nth-child(6n+3) { --stock: #f3cdd6; }
.script-flat:nth-child(6n+4) { --stock: #f5ec9c; } .script-flat:nth-child(6n+5) { --stock: #cfe8c6; }
.script-flat:nth-child(6n) { --stock: #f0d3a4; }
.script-flat:hover, .script-flat:focus-visible { transform: translateY(-10px); outline: none; box-shadow: 0 0 0 2px var(--writing), 3px 8px 10px rgba(0,0,0,.45); z-index: 2; }
.ss-brad { flex: 0 0 auto; width: calc(var(--spine-h) * .036); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4c2, #d8b04f 45%, #8a6a20); box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.ss-label { /* typed label strip */
  flex: 1; min-height: 0; width: 72%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fbfaf6; box-shadow: 0 0 0 1px rgba(0,0,0,.12); writing-mode: vertical-rl;
  font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; font-size: calc(var(--spine-h) * .047); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; color: #1b1b1b; white-space: nowrap; padding: 4px 0; }
.script-flat.out, .script-feature.out { opacity: 0; transition: none; }

/* ---------- produced films: framed one-sheets on the wall beside the TV ---------- */
.now-playing { order: 3; }
.tv-row { order: 1; width: 100%; display: flex; justify-content: center; align-items: center; gap: 30px; }
.tv-row .tv { order: 0; flex: 0 1 620px; }
.wall-posters { flex: 0 0 auto; display: flex; flex-direction: column; gap: 30px; }
.poster.hung { position: relative; width: 232px; padding: 14px 0 0; border: 0; background: none; cursor: pointer; transition: transform .3s ease; }
.poster.hung .nail { position: absolute; top: 0; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ddd, #555); box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.poster.hung .poster-frame { padding: 8px; }
.poster.hung .poster-frame::before { /* picture wire up to the nail */
  content: ""; position: absolute; left: 16%; right: 16%; top: -11px; height: 12px;
  background: linear-gradient(to top right, transparent calc(50% - .6px), #9a8f80 calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) left / 50% 100% no-repeat,
              linear-gradient(to top left, transparent calc(50% - .6px), #9a8f80 calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) right / 50% 100% no-repeat; }
.poster.hung:hover, .poster.hung:focus-visible { transform: rotate(-1deg); outline: none; }
.poster.hung:focus-visible .poster-frame { box-shadow: 0 0 0 2px #fff, 14px 14px 22px rgba(0,0,0,.6); }
.poster.hung.playing .poster-frame { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255,255,255,.35), 14px 14px 22px rgba(0,0,0,.6); }

/* screenplays: card stock covers, page edges, two brass brads */
.spine.script {
  --stock: #e9d9a6;
  width: calc(var(--spine-w) * .78); height: calc(var(--spine-h) * 1.06); border-radius: 1px; margin-right: 1px;
  background:
    linear-gradient(90deg, var(--stock) 0 3px, transparent 3px calc(100% - 3px), var(--stock) calc(100% - 3px)),
    repeating-linear-gradient(90deg, #f6f2e8 0 1px, #e3ddcf 1px 2px), #f3efe5;
  box-shadow: 3px 1px 5px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.08);
}
.spine.script:nth-of-type(3n+2) { --stock: #c9dcef; }
.spine.script:nth-of-type(3n) { --stock: #e8c3c8; }
.spine.script::before { /* brad heads poking out past the front cover */
  inset: auto; left: -3px; top: 0; bottom: 0; width: 6px; filter: none;
  background: radial-gradient(circle at 3px 16%, #e6c46a 0 2.6px, #8a6a20 3px, transparent 3.5px), radial-gradient(circle at 3px 84%, #e6c46a 0 2.6px, #8a6a20 3px, transparent 3.5px);
}
.spine.script::after { background: linear-gradient(rgba(var(--led), .25), transparent 18%), linear-gradient(90deg, rgba(255,255,255,.25), transparent 40%, rgba(0,0,0,.12)); }
.spine.script .spine-title { color: #1b1f2a; text-shadow: none; font-family: "Permanent Marker", "Oswald", cursive; font-weight: 400; font-size: calc(var(--spine-font) * .98); letter-spacing: .02em; }
.spine.script:hover, .spine.script:focus-visible { box-shadow: 0 0 0 2px var(--writing), 0 10px 18px rgba(0,0,0,.6); }

/* the title page you see when you take a screenplay down */
.front-art.title-page {
  background: #fbfaf6; color: #111; font-family: "Courier Prime", "Courier New", monospace; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0 12cqw; gap: 2.4cqw;
}
.title-page .tp-title { font-weight: 700; font-size: 6.2cqw; line-height: 1.25; text-decoration: underline; text-underline-offset: .2em; margin-bottom: 6cqw; }
.title-page .tp-by { font-size: 3.6cqw; }
.title-page .tp-name { font-size: 4cqw; }
.title-page .tp-meta { position: absolute; left: 10cqw; bottom: 9cqw; font-size: 2.8cqw; text-align: left; color: #444; }
.title-page .tp-mark { position: absolute; right: 10cqw; bottom: 9cqw; font-size: 2.8cqw; border: 1px solid #444; padding: 0 .4em; }
.title-page .brad { position: absolute; left: 6cqw; top: 16%; width: 3.2cqw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4c2, #d8b04f 45%, #8a6a20); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.title-page .brad.b2 { top: auto; bottom: 16%; }
.face.front:has(.title-page)::after { background: linear-gradient(110deg, rgba(255,255,255,.1), transparent 30%); box-shadow: inset 2px 0 0 rgba(0,0,0,.12); }

/* the Brownie box camera standing in front of the Drawing From Life script */
.brownie-prop { position: relative; flex: 0 0 auto; width: calc(var(--spine-h) * .74); margin: 0 calc(var(--spine-h) * .1) 0 0; align-self: flex-end;
  pointer-events: none; }
.brownie-prop img { display: block; width: 100%; height: auto; filter: saturate(.55) brightness(.92) drop-shadow(-6px 4px 6px rgba(0,0,0,.5)); }
.brownie-prop::after { content: ""; position: absolute; left: 4%; right: 0; bottom: -3px; height: 8px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%); }

/* the CDs & Awards shelf */
.shelf-music .spines { justify-content: center; }
.shelf-music .shelf-extra { margin: 0 auto; gap: 26px; padding-bottom: 2px; }

/* YouTube Silver Creator Award (the real one) */
.award { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 124px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.award-plate {
  display: block; width: 100%; height: auto; border-radius: 2px;
  box-shadow: 12px 10px 18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.4);
  transform: perspective(600px) rotateX(4deg) rotateY(8deg); transform-origin: bottom center; transition: transform .35s ease, box-shadow .35s;
}
.award:hover .award-plate, .award:focus-visible .award-plate { transform: perspective(600px) rotateX(2deg) rotateY(0deg) translateY(-6px); }
.award:focus-visible { outline: none; }
.award:focus-visible .award-plate { box-shadow: 12px 10px 18px rgba(0,0,0,.6), 0 0 0 2px #fff; }
.award-hint { font-family: "Oswald", var(--font); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #f4e2c4; opacity: .85; }
.award:hover .award-hint { opacity: 1; }
.award.playing .award-plate { box-shadow: 12px 10px 18px rgba(0,0,0,.6), 0 0 18px 3px rgba(255, 60, 60, .55); }

/* ---------- posters on the wall ---------- */
.poster { padding: 0; border: 0; background: none; cursor: pointer; width: 150px; transition: transform .3s ease; }
.poster:hover, .poster:focus-visible { transform: translateY(-4px) rotate(-.6deg); outline: none; }
.poster:focus-visible .poster-frame { box-shadow: 0 0 0 2px #fff, 14px 14px 22px rgba(0,0,0,.6); }
.poster-frame { position: relative; display: block; padding: 6px; background: linear-gradient(135deg, #2b2b2e, #0d0d0f); box-shadow: 14px 14px 22px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.poster-frame::after { /* glass, catching the lamp */
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  background: linear-gradient(125deg, rgba(var(--key), .22), rgba(255,255,255,.04) 35%, transparent 55%); }
.one-sheet { position: relative; display: block; aspect-ratio: 27 / 40; overflow: hidden; background: #111; }
.one-sheet img { width: 100%; height: 100%; object-fit: cover; }
.poster-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 30% 8% 8%; background: linear-gradient(transparent, rgba(0,0,0,.9) 60%);
  font-family: "Bebas Neue", "Oswald", var(--font); font-size: 1.3rem; color: #fff; text-align: center; letter-spacing: .04em; }
/* ---------- a poster shown on the TV ---------- */
.tv-screen { container-type: inline-size; }
.tv-card-slot { position: absolute; inset: 0; z-index: 1; }
.tv-card-slot[hidden] { display: none; }
.tv-screen.on .tv-card-slot:not([hidden]) { animation: crt-on .6s ease-out; }
.tv-card { position: absolute; inset: 0; display: flex; gap: 4cqw; align-items: center; padding: 5cqw 6cqw; color: #f1ece4;
  background: radial-gradient(ellipse at 30% 40%, #2c2620, #0d0b09 75%); }
.tv-card img { height: 100%; width: auto; max-width: 38%; object-fit: cover; box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.7); }
.card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.4cqw; font-size: 2.3cqw; line-height: 1.35; }
.card-text h3 { margin: 0; font-family: "Bebas Neue", "Oswald", var(--font); font-weight: 400; font-size: 6.4cqw; line-height: 1; letter-spacing: .03em; color: #fff; }
.card-text p, .card-text blockquote { margin: 0; }
.card-format { font-family: "Oswald", var(--font); text-transform: uppercase; letter-spacing: .14em; font-size: .85em; color: #f3c52c; }
.card-tagline { font-weight: 600; }
.card-note { color: #cfc6ba; }
.card-text blockquote { font-style: italic; color: #e3dbcf; border-left: 2px solid #f3c52c; padding-left: .8em; }
.card-links a { color: #fff; margin-right: 1em; text-underline-offset: 3px; }
.tv-card.stage { background: radial-gradient(ellipse at 50% 30%, #3a1414, #120606 75%); padding-left: 12cqw; padding-right: 12cqw; padding-top: 9cqw; }
.tv-card.stage::before, .tv-card.stage::after { /* red velvet curtains */
  content: ""; position: absolute; top: 0; bottom: 0; width: 9cqw;
  background: repeating-linear-gradient(90deg, #6e0f12 0 1.4cqw, #a3181d 1.4cqw 2.4cqw, #5a0b0e 2.4cqw 3cqw); box-shadow: 0 0 3cqw rgba(0,0,0,.6);
}
.tv-card.stage::before { left: 0; border-radius: 0 0 40% 0; } .tv-card.stage::after { right: 0; border-radius: 0 0 0 40%; }
.tv-card.stage .card-format { color: #ffd76a; }
.tv-card.stage h3 { position: relative; }
.tv-card.stage::marker { content: none; }
@container (max-width: 380px) { .card-note, .card-text blockquote, .card-tagline { display: none; } .card-text { font-size: 3.4cqw; } }

/* a CD in your hands: a square jewel case instead of a DVD case */
.viewer.shelf-cd { --neon: #ff5bd8; }
.viewer.shelf-cd .viewer-stage { --W: min(460px, 86vw, calc((100vh - 130px) / .88)); --H: calc(var(--W) * .88); }
.cd-front { background: #0d0d10; }
.cd-front .cd-art { position: absolute; inset: 4% 3% 4% 11%; background: var(--art) 50% 40% / cover; }
.cd-front .cd-text { position: absolute; left: 11%; right: 3%; bottom: 4%; padding: 16% 5% 4%; display: flex; flex-direction: column; gap: .6cqw;
  background: linear-gradient(transparent, rgba(0,0,0,.88) 45%); color: #fff; font-family: "Oswald", var(--font); line-height: 1.05; }
.cd-front .cd-text b { font-size: 3cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--neon); font-weight: 600; }
.cd-front .cd-text i { font-style: normal; font-family: "Bebas Neue", "Oswald", var(--font); font-size: 9cqw; letter-spacing: .02em; }
.cd-front .cd-text small { font-size: 2.4cqw; letter-spacing: .08em; text-transform: uppercase; color: #ddd; }
.cd-front .cd-hinge { position: absolute; left: 0; top: 0; bottom: 0; width: 11%; background: repeating-linear-gradient(#2a2a2e 0 4px, #141416 4px 7px); }
.cd-spine { background: repeating-linear-gradient(#2a2a2e 0 3px, #141416 3px 5px) !important; }
.cd.out { opacity: 0; transition: none; }

/* the CD, face-on in its jewel case: clear lid over the printed insert, black hinge with knuckles */
.cd-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cd {
  position: relative; width: 142px; aspect-ratio: 142 / 125; padding: 0; border: 0; cursor: pointer; border-radius: 2px;
  transform: perspective(700px) rotateX(5deg) rotateY(-9deg); transform-origin: bottom center; transition: transform .35s ease, box-shadow .35s;
  background: linear-gradient(90deg, #0b0b0d, #1d1d21);
  box-shadow:
    1px 1px 0 rgba(255,255,255,.35) inset, -1px -1px 0 rgba(0,0,0,.6) inset,
    3px 3px 0 #2a2a2f, 4px 4px 0 rgba(255,255,255,.12), 6px 6px 0 #18181b,  /* the case's thickness */
    14px 12px 18px rgba(0,0,0,.55);
}
.cd:hover, .cd:focus-visible { transform: perspective(700px) rotateX(2deg) rotateY(0deg) translateY(-6px); outline: none; }
.cd:focus-visible { box-shadow: 0 0 0 2px var(--directing), 14px 12px 18px rgba(0,0,0,.55); }
.cd-art { position: absolute; inset: 4% 3.5% 4% 12.5%; background: var(--art) 50% 40% / cover; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.cd-text {
  position: absolute; left: 12.5%; right: 3.5%; bottom: 4%; padding: 14% 6% 5%; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.85) 45%); color: #fff; line-height: 1.1;
  display: flex; flex-direction: column; gap: 2px; font-family: "Oswald", var(--font);
}
.cd-text b { font-size: 6cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--directing); font-weight: 600; }
.cd-text i { font-style: normal; font-family: "Bebas Neue", "Oswald", var(--font); font-size: 12.5cqw; line-height: .95; letter-spacing: .02em; }
.cd-text small { font-size: 5cqw; letter-spacing: .04em; color: #ddd; text-transform: uppercase; white-space: nowrap; }
.cd-hinge { /* ridged black hinge with a knuckle at top and bottom */
  position: absolute; left: 0; top: 0; bottom: 0; width: 11%; border-radius: 2px 0 0 2px;
  background:
    linear-gradient(#3a3a40, #222226) top / 100% 9% no-repeat,
    linear-gradient(#222226, #3a3a40) bottom / 100% 9% no-repeat,
    repeating-linear-gradient(90deg, #0d0d0f 0 2px, #2b2b30 2px 3px, #141416 3px 5px);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.18), 1px 0 0 rgba(0,0,0,.7);
}
.cd::after { /* the clear lid: edge highlights, a soft glare, and the little tab on the right */
  content: ""; position: absolute; inset: 0 0 0 10%; border-radius: 0 2px 2px 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(100% - 3px), rgba(255,255,255,.35) calc(100% - 3px) calc(100% - 2px), transparent calc(100% - 2px)) 0 44% / 100% 12% no-repeat,
    linear-gradient(120deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 22%, transparent 42%, transparent 70%, rgba(255,255,255,.14) 92%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.5);
}
.cd.playing { box-shadow: 3px 3px 0 #2a2a2f, 6px 6px 0 #18181b, 0 0 18px 2px var(--directing), 14px 12px 18px rgba(0,0,0,.55); }


/* spine-out DVD case */
.spine {
  position: relative; flex: 0 0 auto; width: var(--spine-w); height: var(--spine-h);
  padding: 0; border: 0; cursor: pointer; color: #fff; font: inherit;
  background: #0a0a0b; border-radius: 3px 3px 2px 2px; overflow: hidden;
  box-shadow: inset 2px 0 0 rgba(255,255,255,.16), inset -2px 0 0 rgba(0,0,0,.7), 3px 1px 5px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.spine::before { content: ""; position: absolute; inset: 3px 2px; background: var(--art) center / auto 100% no-repeat; filter: saturate(1.1) brightness(.32) blur(.5px); }
.spine::after { /* plastic sleeve: LED from above + key from the left */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(var(--led), .22), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 25%, transparent 60%, rgba(0,0,0,.4));
}
.spine > span { position: relative; z-index: 1; }
.spine-band { width: 100%; height: 14px; background: var(--neon); flex: 0 0 auto; }
.spine-title {
  flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; text-align: center; overflow: hidden; padding: 8px 0;
  font-family: "Barlow Condensed", "Oswald", var(--font); font-weight: 600; font-size: var(--spine-font); text-transform: uppercase;
  letter-spacing: .06em; line-height: 1.05; color: #fff; text-shadow: 0 1px 2px #000;
}
.spine-logo { margin-bottom: 8px; font-family: "Oswald", var(--font); font-weight: 600; font-size: 8.5px; letter-spacing: .04em; border: 1px solid rgba(255,255,255,.75); padding: 0 2px; line-height: 1.35; border-radius: 1px; }
.spine:hover, .spine:focus-visible { transform: translateY(-14px); box-shadow: 0 0 0 2px var(--neon), 0 10px 18px rgba(0,0,0,.65); outline: none; }
.spine.out { transform: translateY(-30px); opacity: 0; transition: transform .25s ease, opacity .2s ease .15s; }
.spine.playing .spine-band { animation: playing 1.2s ease-in-out infinite alternate; }
@keyframes playing { from { filter: brightness(.6); } to { filter: brightness(1.4); box-shadow: 0 0 10px var(--neon); } }

/* 3D camera on the Writing shelf (WebGL; the SVG shows until it loads or if WebGL is missing) */
.cam3d { position: relative; width: 240px; aspect-ratio: 5 / 3; margin-bottom: -4px; }
.cam3d canvas, .cam-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cam3d canvas { opacity: 0; transition: opacity .6s ease; cursor: grab;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent); }
.cam3d.ready canvas { opacity: 1; }
.cam3d.ready .cam-fallback { opacity: 0; transition: opacity .6s ease; }

/* standing photo on the Producing shelf */
.shelf-photo { display: block; perspective: 500px; text-decoration: none; margin-right: 6px; }
.photo-frame {
  display: block; width: 138px; padding: 9px; transform: rotateX(5deg) rotateY(-8deg); transform-origin: bottom center;
  background: linear-gradient(135deg, rgba(255,235,200,.25), rgba(0,0,0,.45)), var(--oak-v) 0 0 / 300px auto, #3b2412;
  background-blend-mode: normal, multiply;
  box-shadow: 12px 8px 16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,230,190,.35), inset 0 0 6px rgba(0,0,0,.6);
  transition: transform .4s ease;
}
.shelf-photo:hover .photo-frame { transform: rotateX(2deg) rotateY(0deg); }
.photo-mat { display: block; padding: 8px; background: #f2ece0; box-shadow: inset 0 1px 4px rgba(0,0,0,.35); position: relative; }
.photo-mat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.photo-mat::after { content: ""; position: absolute; inset: 8px; background: linear-gradient(120deg, rgba(255,255,255,.25), transparent 40%); }

/* ---------- the TV: silver CRT-style combo with a DVD drive ---------- */
.tv-area { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.viewer-open .tv-area { z-index: 41; }
.tv { position: relative; width: 100%; max-width: 720px; }
.tv-shell {
  --silver-hi: #eef0f3; --silver: #c7cad0; --silver-lo: #9da1a8;
  position: relative; padding: 2.6% 2.6% 1.6%; border-radius: 10px 10px 6px 6px;
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%, rgba(var(--key), .28), transparent 70%),     /* lamp highlight */
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(0,0,0,.12)),
    linear-gradient(var(--silver-hi), var(--silver) 12%, var(--silver) 70%, var(--silver-lo));
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.5), inset -2px 0 0 rgba(0,0,0,.15),
    0 2px 0 #7d8188;
  transition: box-shadow .6s;
}
.tv-area.playing .tv-shell { box-shadow:
    inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.5), inset -2px 0 0 rgba(0,0,0,.15),
    0 2px 0 #7d8188, 0 0 160px rgba(130,170,255,.25); }
.tv-face { display: grid; grid-template-columns: 11% minmax(0, 1fr) 11%; gap: 2.2%; align-items: stretch; }
.grille {
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%, #55585e 0 .9px, transparent 1.3px) 0 0 / 4px 4px,
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(255,255,255,.12), rgba(0,0,0,.1)), #b9bcc2;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.7);
}
.screen-bezel {
  padding: 3.2%; border-radius: 8px;
  background: linear-gradient(#a7abb2, #bfc2c8 40%, #b3b6bc);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(255,255,255,.8);
}
.tv-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px / 18px;
  background: radial-gradient(ellipse at 50% 45%, #3a3f3d, #262a29 60%, #161918);
  box-shadow: 0 0 0 3px #1b1c1e, inset 0 0 40px rgba(0,0,0,.75);
}
.tv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tv-glass { /* curved CRT glass: lamp reflection, edge falloff, faint scanlines */
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 35% at 22% 12%, rgba(255,240,220,.16), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.tv-hint {
  position: absolute; left: 0; right: 0; bottom: 8%; margin: 0; text-align: center;
  font-family: "Oswald", var(--font); text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.6rem, 1.3vw, .78rem); color: #8fa39a;
}
.tv-screen.on .tv-hint, .tv-screen.on .screensaver { display: none; }
.tv-screen.on iframe { animation: crt-on .6s ease-out; }
.tv-screen.off-anim iframe { animation: crt-off .35s ease-in forwards; }
@keyframes crt-on { 0% { transform: scale(1, .004); filter: brightness(6); } 45% { transform: scale(1, .004); filter: brightness(6); } 75% { transform: none; filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@keyframes crt-off { 60% { transform: scale(1, .004); filter: brightness(5); } 100% { transform: scale(0, .004); filter: brightness(5); } }

.screensaver { position: absolute; inset: 0; }
.ss-x { position: absolute; inset: 0; }
.ss-y { /* moved by home.js: bounces off the edges of the screen and changes color only when it hits one */
  position: absolute; left: 0; top: 0; padding: .05em .45em; border: 3px solid currentColor; border-radius: 50% / 42%;
  font-family: "Bebas Neue", "Oswald", var(--font); font-size: clamp(1.2rem, 3.2vw, 2.2rem); line-height: 1.1; letter-spacing: .06em;
  color: var(--ss-color, var(--directing)); will-change: transform;
}

.tv-badge { text-align: center; padding: 1.4% 0 1.2%; font-family: "Oswald", var(--font); font-weight: 600; font-size: clamp(.6rem, 1.4vw, .85rem); letter-spacing: .22em; color: #3a3d42; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.tv-deck {
  display: flex; align-items: center; justify-content: space-between; gap: 4%;
  padding: 1.4% 3%; border-top: 1px solid rgba(0,0,0,.18); border-bottom: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.6);
  background: linear-gradient(#cfd2d7, #bfc2c8);
}
.player-display {
  font-family: ui-monospace, Menlo, monospace; font-size: clamp(.5rem, 1.1vw, .66rem); color: #7fe3ff; text-shadow: 0 0 5px #6fd2ff;
  background: #061016; padding: 3px 8px; border-radius: 2px; min-width: 9ch; text-align: center; white-space: nowrap;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255,255,255,.6);
}
.player { width: 46%; flex: 0 0 auto; }
.tv-deck .player-display { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: left; }
.player-display.scrolling { text-align: left; }
.vfd-track { display: inline-flex; white-space: nowrap; animation: vfd 14s linear infinite; }
.vfd-track > span { padding-right: 4em; }
@keyframes vfd { to { transform: translateX(-50%); } }

/* the drive: a real 3D tray that slides out toward you */
.drive {
  --h: clamp(14px, 2.6vw, 22px); --depth: 150px;
  position: relative; height: var(--h); border-radius: 2px;
  background: #1b1c1f; box-shadow: inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.2);
}
.drive-window { /* clips the tray to what's outside the TV; the viewer looks down slightly */
  position: absolute; left: -40%; right: -40%; top: 0; height: 320px; overflow: hidden; pointer-events: none; z-index: 5;
  perspective: 900px; perspective-origin: 50% -420px;
}
.tray { /* same width as the drive: the window is 1.8× wider */
  position: absolute; left: 50%; top: 0; width: calc(100% / 1.8); height: var(--h);
  transform-style: preserve-3d; transform: translateX(-50%) translateZ(0);
  transition: transform .7s cubic-bezier(.3, .7, .25, 1);
}
.drive.open .tray { transform: translateX(-50%) translateZ(var(--depth)); }
.tray-front {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(#d9dce1, #b5b9bf 60%, #a7abb1);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10%;
}
.dvd-mark { font-family: "Oswald", var(--font); font-weight: 600; font-style: italic; font-size: calc(var(--h) * .5); line-height: .9; color: #5d6168; display: flex; flex-direction: column; align-items: center; }
.dvd-mark small { font-size: .38em; font-style: normal; letter-spacing: .12em; }
.tray-plate { /* lies flat, attached to the top edge of the front, reaching back into the TV */
  position: absolute; left: 3%; right: 3%; bottom: 100%; height: var(--depth);
  transform-origin: bottom center; transform: rotateX(90deg);
  background: linear-gradient(#1f2023, #2b2c30); border-radius: 3px 3px 0 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; transition: visibility 0s .72s; /* only exists while the tray is out */
}
.drive.open .tray-plate { visibility: visible; transition: visibility 0s 0s; }
.tray-recess {
  width: 76%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #3a3b40 0 9%, #0f1012 10% 100%); box-shadow: inset 0 2px 6px #000;
  display: grid; place-items: center;
}
.tray-disc { width: 96%; aspect-ratio: 1; border-radius: 50%; position: relative; opacity: 0;
  background: radial-gradient(circle, transparent 0 8%, #d8d8d8 8.5% 13%, transparent 13.5%), conic-gradient(from 30deg, #e8e8f0, #b9d7ff, #f2c6ff, #fff7b8, #b8ffe6, #e8e8f0); }
.tray-disc::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: var(--label) center / cover, #222;
  -webkit-mask: radial-gradient(circle, transparent 0 15%, #000 16%); mask: radial-gradient(circle, transparent 0 15%, #000 16%); }
.drive.loaded .tray-disc { opacity: 1; }

.tv-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 3%; padding: 2% 3% 0; }
.ctl-group, .ctl-power { display: flex; gap: 10px; }
.tv-controls i { position: relative; display: block; width: 9px; height: 18px; border-radius: 2px; font-style: normal;
  background: linear-gradient(#f4f5f7, #c3c6cc); box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 #fff; margin-top: 12px; }
.tv-controls i::before { content: attr(data-l); position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: "Oswald", var(--font); font-size: 7px; letter-spacing: .06em; color: #4a4d53; }
.player-eject { padding: 0; border: 0; background: none; cursor: pointer; }
.player-eject:disabled { cursor: default; }
.player-eject:not(:disabled) i { box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 #fff, 0 0 0 2px rgba(111,210,255,.7); }
.player-eject:not(:disabled):hover i { background: linear-gradient(#fff, #d3d6db); }
.player-eject:focus-visible { outline: 2px solid #6fd2ff; outline-offset: 4px; }
.ctl-power { align-items: flex-end; gap: 6px; }
.power-led { width: 5px; height: 5px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 6px #ff3b30; margin-bottom: 2px; }
.tv-area.playing .power-led { background: #39e07a; box-shadow: 0 0 6px #39e07a; }

.now-playing { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; /* read aloud; shown on the TV's display */
  margin: 10px 0 0; min-height: 1.4em; font-family: "Oswald", var(--font); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #f1d9b5; text-align: center; }

/* the disc */
.disc, .flying-disc {
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 8%, #d8d8d8 8.5% 13%, transparent 13.5%),
    conic-gradient(from 30deg, #e8e8f0, #b9d7ff, #f2c6ff, #fff7b8, #b8ffe6, #e8e8f0);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.5);
}
.flying-disc { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; will-change: transform; }
.flying-disc[hidden] { display: none; }
.disc-label {
  position: absolute; inset: 17%; border-radius: 50%;
  background: var(--label) center / cover, #222;
  -webkit-mask: radial-gradient(circle, transparent 0 15%, #000 16%); mask: radial-gradient(circle, transparent 0 15%, #000 16%);
}

/* ---------- the case in your hands (3D) ---------- */
.viewer { --neon: var(--directing, #ff5bd8); position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.viewer[hidden] { display: none; }
.viewer.shelf-directing { --neon: #ff5bd8; } .viewer.shelf-writing { --neon: #6dffc6; } .viewer.shelf-producing { --neon: #ffcb4f; }
.viewer > * { pointer-events: auto; }
.viewer-backdrop { position: absolute; inset: 0; background: rgba(8, 5, 3, .82); opacity: 0; transition: opacity .4s; }
.viewer.open .viewer-backdrop { opacity: 1; }
.viewer-close {
  position: absolute; top: 12px; right: 16px; z-index: 3; border: 0; background: none; color: #fff;
  font-size: 40px; line-height: 1; cursor: pointer; padding: 6px 12px;
}
.viewer-pos {
  position: absolute; left: var(--stage-x, 50%); top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.viewer-stage {
  --W: min(400px, 86vw, calc((100vh - 130px) / 1.48)); --H: calc(var(--W) * 1.48); --d: 22px;
  position: relative; width: var(--W); height: var(--H); perspective: 1600px;
}
.viewer-controls button {
  font-family: "Oswald", var(--font); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; white-space: nowrap;
  background: none; color: #fff; border: 1px solid rgba(255,255,255,.5); padding: 9px 18px; cursor: pointer; border-radius: 3px;
}
.viewer-controls button:hover { background: #fff; color: #000; }
.viewer.leaving .viewer-controls, .viewer.leaving .viewer-close { opacity: 0; transition: opacity .2s; }

.case, .big-case { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.big-case { transition: transform .7s cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
.face { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.front, .face.back { inset: 0; overflow: hidden; border-radius: 2px 4px 4px 2px; container-type: inline-size; }
.face.front { transform: translateZ(calc(var(--d) / 2)); background: #111; }
.face.back { transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); background: #0e0e10; overflow-y: auto; overscroll-behavior: contain; cursor: auto; }
.face.spine, .face.edge { top: 0; height: 100%; width: var(--d); }
.face.spine { left: 0; transform-origin: left center; transform: translateZ(calc(var(--d) / -2)) rotateY(-90deg); background: #0c0c0c; overflow: hidden; }
.face.spine .spine { width: 100%; height: 100%; pointer-events: none; --spine-w: var(--d); --spine-font: 9px; }
.face.spine .spine-logo { display: none; }
.face.edge { right: 0; transform-origin: right center; transform: translateZ(calc(var(--d) / -2)) rotateY(90deg); background: repeating-linear-gradient(90deg, #222 0 2px, #111 2px 4px); }
.front-art, .back-art { position: absolute; inset: 0; }
.front-art img { width: 100%; height: 100%; object-fit: cover; }
.front-art .cover-fill { position: absolute; inset: 0; transform: scale(1.15); filter: blur(14px) brightness(.45) saturate(1.2); }
.front-art .cover-still { position: absolute; left: 0; top: 16%; height: auto; aspect-ratio: auto; object-fit: contain; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.face.front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,.22), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.08));
  box-shadow: inset 4px 0 0 rgba(0,0,0,.55), inset 5px 0 0 rgba(255,255,255,.12);
}
.cover-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30cqw 7cqw 7cqw;
  background: linear-gradient(transparent, rgba(0,0,0,.92) 55%);
  font-family: "Bebas Neue", "Oswald", var(--font); color: #fff; line-height: .95; font-size: 15cqw; letter-spacing: .02em; text-align: left;
}
.cover-kicker { display: block; margin-bottom: 3cqw; font-family: "Oswald", var(--font); font-size: 4.6cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }

/* back cover */
.back-art {
  position: static; min-height: 100%; padding: 7cqw 7cqw 5cqw;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--neon) 18%, transparent), transparent 60%), #0e0e10;
  color: #e9e4dd; font-size: clamp(11px, 3.4cqw, 15px); line-height: 1.45;
  display: flex; flex-direction: column; gap: .75em;
}
.back-art p, .back-art blockquote, .back-art ul { margin: 0; }
.back-title { font-family: "Bebas Neue", "Oswald", var(--font); font-weight: 400; font-size: 11cqw; line-height: .95; color: var(--neon); text-shadow: 0 0 14px color-mix(in srgb, var(--neon) 50%, transparent); margin: 0; }
.back-format { font-family: "Oswald", var(--font); text-transform: uppercase; letter-spacing: .14em; font-size: .78em; color: #b9b1a7; }
.back-tagline { font-family: "Oswald", var(--font); font-weight: 600; text-transform: uppercase; font-size: 1.12em; line-height: 1.3; }
.back-stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.back-stills img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid rgba(255,255,255,.15); }
.back-art blockquote { font-style: italic; border-left: 2px solid var(--neon); padding-left: .8em; color: #d6d0c8; }
.back-laurels { list-style: none; padding: 0; display: grid; gap: .35em; }
.back-laurels li { font-family: "Oswald", var(--font); text-transform: uppercase; font-size: .82em; letter-spacing: .06em; }
.back-laurels li::before { content: "★ "; color: var(--neon); }
.back-note { color: #c4bcb2; font-size: .92em; }
.back-actions { display: flex; flex-wrap: wrap; gap: .5em; }
.play-btn {
  font-family: "Oswald", var(--font); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .9em;
  background: var(--neon); color: #000; border: 0; border-radius: 999px; padding: .6em 1.2em; cursor: pointer;
  box-shadow: 0 0 14px color-mix(in srgb, var(--neon) 60%, transparent);
}
.play-btn:hover { filter: brightness(1.15); }
.play-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.back-links { display: flex; flex-wrap: wrap; gap: .3em 1em; font-size: .9em; }
.back-links a { color: #fff; text-decoration-color: var(--neon); text-underline-offset: 3px; }
.billing { font-family: "Oswald", var(--font); text-transform: uppercase; font-size: .66em; line-height: 1.3; letter-spacing: .02em; color: #9d958b; text-align: center; margin-top: auto !important; padding-top: .6em; }
.back-foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; border-top: 1px solid rgba(255,255,255,.15); padding-top: .6em; font-family: "Oswald", var(--font); text-transform: uppercase; letter-spacing: .1em; font-size: .62em; color: #8c857c; }
.logo-mark { border: 1px solid currentColor; padding: .1em .45em; font-weight: 600; }

/* ---------- about / bts / contact ---------- */
.about { max-width: 1000px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.about h2, .bts h2 { font-family: "Bebas Neue", "Oswald", var(--font); font-weight: 400; letter-spacing: .12em; font-size: 2.4rem; }
.about p { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; max-width: 760px; margin: 0 auto 1em; }
.about .signature { width: min(320px, 80%); margin: 12px auto 0; }
.bts { background: #0b0806; }
.bts h2 { text-align: center; margin-bottom: 28px; }
.bts .gallery button { background: #222; }
.contact-section { background: #000; }
.contact h2 { text-align: center; margin-bottom: 28px; font-size: 1.9rem; }
.contact label { color: #e8e2da; }
.home .btn { border-color: var(--mint); color: var(--mint); }
.home .btn:hover { background: var(--mint); color: #000; }

/* ---------- DVDs binding-out, as in V1: the spine faces you, a sliver of the cover shows ---------- */
.dvd34 {
  --h: var(--spine-h); --w: calc(var(--h) / 1.48); --d: calc(var(--h) * .1); --turn: 56deg;  /* cases match the 27x40 one-sheet posters, so nothing is cropped top or bottom */
  width: calc(var(--d) * .83 + var(--w) * .56 + 2px); margin-right: 0; perspective: 1100px;
}
.dvd34 .case { width: var(--w); transform: translateX(calc(var(--d) * .42)) rotateY(var(--turn)); transform-origin: 0 50%; }
.dvd34:hover .case, .dvd34:focus-visible .case { transform: translateX(calc(var(--d) * .42)) translateY(-12px) rotateY(30deg); }
.dvd34.faceout { width: var(--w); }
.dvd34.faceout .case { transform: none; }
.dvd34.faceout:hover .case, .dvd34.faceout:focus-visible .case { transform: translateY(-12px); }
.dvd34:hover, .dvd34:focus-visible { z-index: 6; }
.dvd34::after { left: -4%; right: -10%; }
.dvd34 .face.spine { background: linear-gradient(90deg, #050505, #1d1d21 50%, #070707); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.dvd34 .face.spine .spine-band { height: calc(var(--h) * .07); }
.dvd34 .face.spine .spine-title { font-size: calc(var(--d) * .56); padding: 6px 0; }
.dvd34 .face.spine .spine-logo { display: block; font-size: calc(var(--d) * .3); margin-bottom: 6px; padding: 0 1px; }
.spine-sticker { /* price-gun sticker on the cover, near the spine so it shows */
  position: absolute; left: 6%; top: 5%; width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center;
  transform: translateZ(calc(var(--d) / 2 + 1px)) rotate(-10deg); backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff36b, #ffd200 55%, #e3a900); color: #1a1200; box-shadow: 1px 2px 3px rgba(0,0,0,.45);
  font-family: "Oswald", var(--font); font-weight: 600; font-size: calc(var(--w) * .06); line-height: 1; text-transform: uppercase; padding: 3%; }
.dvd-row { display: flex; align-items: flex-end; flex: 0 0 auto; gap: 1px; }
.shelf-featured .spines { justify-content: center; gap: calc(var(--spine-h) * .3); }
.shelf-directing .spines { gap: 0; }
.shelf-directing .dvd-row { margin: 0 calc(var(--spine-h) * .06) 0 0; }

/* The Game: just the case and the Silver Play Button leaning on the back panel beside it */
.game-set { display: flex; align-items: flex-end; gap: calc(var(--spine-h) * .08); flex: 0 0 auto; }
.game-set .award { width: auto; perspective: 700px; padding: 0; }
.game-set .award-plate { width: auto; height: calc(var(--spine-h) * .84); transform: rotateX(16deg) rotateY(0); transform-origin: bottom center;
  box-shadow: 0 12px 16px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .5s cubic-bezier(.3,.7,.25,1); }
.game-set .award:hover .award-plate, .game-set .award:focus-visible .award-plate { transform: rotateX(10deg) translateY(-4px); }
.game-set .award.playing .award-plate, .game-set .award.tilt .award-plate { transform: rotateX(-10deg) translateY(-6px); } /* tips its top toward you */

/* Pizzato: the real clay puppet (about 6") standing next to its 7.5" case */
.shelf-directing .puppet-stand { height: calc(var(--spine-h) * .8); margin: 0 calc(var(--spine-h) * .04) 0 calc(var(--spine-h) * .05); }

/* produced films: binding-out to the right of the scripts, with their own tag on the shelf edge */
.fan-producing { margin-left: calc(var(--spine-h) * .1); }

/* CDs overlap a little, Something Still Here on top */
/* CDs side by side, each propped on a clear acrylic easel */
.shelf-cds { gap: calc(var(--spine-h) * .07); margin-left: 0; }
.cd-wrap, .playbill-stand { position: relative; }
.cd-wrap::before, .playbill-stand::before { /* the acrylic stand's front lip */
  content: ""; position: absolute; z-index: 2; left: -5%; right: -5%; bottom: -3px; height: 9px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.1) 60%, rgba(255,255,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.35); backdrop-filter: blur(1px); }
.cd { container-type: inline-size; }
.cd-sticker { top: 6%; bottom: auto; right: 5%; width: 30cqw; padding: 2cqw; font-size: 5.4cqw; transform: rotate(-12deg); }
.cd-front .cd-sticker { font-size: 3.2cqw; }

/* placeholder cover: by-line */
.ph-format { text-transform: none; letter-spacing: .04em; font-size: 4.4cqw; }

/* ---------- the console top: poster basket and cordless phone ---------- */
.phone-card { position: fixed; z-index: 45; left: 50%; bottom: 8vh; transform: translateX(-50%); width: min(320px, 90vw);
  padding: 18px 16px 14px; border-radius: 26px; background: linear-gradient(#e3e6ea, #a7abb3); box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 1px 0 #fff;
  animation: pc-in .35s ease; }
.phone-card[hidden] { display: none; }
@keyframes pc-in { from { opacity: 0; transform: translate(-50%, 20px); } }
.pc-screen { background: #2a1c06; border-radius: 10px; padding: 14px 16px; color: #ffb547; font-family: ui-monospace, Menlo, monospace; text-shadow: 0 0 6px rgba(255,181,71,.7);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.8); display: flex; flex-direction: column; gap: 8px; }
.pc-top { margin: 0; font-size: .62rem; letter-spacing: .14em; opacity: .7; }
.pc-screen h3 { margin: 0; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.pc-role { margin: 0 0 6px; font-size: .62rem; opacity: .8; }
.pc-screen a { color: #ffd28a; text-decoration: none; font-size: .78rem; display: flex; justify-content: space-between; border-top: 1px dashed rgba(255,181,71,.3); padding-top: 6px; }
.pc-screen a span { opacity: .75; }
.pc-screen a:hover { color: #fff; }
.pc-mail { margin-top: 10px; display: grid; gap: 6px; }
.pc-slot-label { margin: 0; font: 600 .62rem/1 "Oswald", var(--font); letter-spacing: .16em; text-transform: uppercase; color: #3b3f46; }
.pc-mail input, .pc-mail textarea { width: 100%; box-sizing: border-box; border: 0; border-radius: 6px; padding: 8px 10px; background: #f6f7f9;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.28); font: .82rem/1.35 var(--font); color: #1b1d21; resize: vertical; }
.pc-mail input:focus, .pc-mail textarea:focus { outline: 2px solid #4a7bd1; outline-offset: 1px; }
.pc-send { justify-self: end; padding: 7px 16px; border: 0; border-radius: 16px; background: linear-gradient(#5aa05a, #2f7a35); color: #fff;
  font: 600 .72rem/1 "Oswald", var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.pc-send:disabled { background: #8d939c; cursor: default; }
.pc-note { margin: 0; min-height: 1em; font-size: .68rem; color: #3b3f46; }
.pc-hangup { display: block; margin: 12px auto 0; padding: 8px 22px; border: 0; border-radius: 18px; background: #c0392b; color: #fff; font-family: "Oswald", var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* wider furniture on big screens so everything has room */
@media (min-width: 1340px) { .room-inner { --furniture-w: min(1300px, 100%); } }


/* festival laurel stickers, stuck on the Where the Mountain Women Sing title page */
.title-page:has(.accolades) { justify-content: flex-start; padding-top: 16cqw; }
.accolades { position: absolute; left: 6cqw; right: 6cqw; bottom: 7cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw 4cqw; }
.laurel-sticker {
  position: relative; display: block; aspect-ratio: 200 / 140; background: #fff; border-radius: 2.4cqw;
  box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06); transform: rotate(var(--tilt, 0deg));
}
.ls-wreath { position: absolute; left: 4%; right: 4%; top: 2%; width: 92%; height: auto; }
.ls-text { position: absolute; inset: 14% 24% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw;
  font-family: "Gill Sans", "Gill Sans MT", "Montserrat", var(--font); text-transform: uppercase; text-align: center; color: #111; line-height: 1.05; font-size: 2.3cqw; letter-spacing: .02em; }
.ls-text b { font-weight: 600; font-size: 1.12em; }
.ls-text em { font-style: normal; margin-top: .9cqw; font-size: 1.05em; }
.variety-sticker { position: absolute; right: -2cqw; top: -10cqw; display: flex; flex-direction: column; align-items: center; padding: 1.4cqw 3.4cqw 1.8cqw;
  background: #111; color: #fff; border-radius: 1.8cqw; transform: rotate(6deg); box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.35); }
.variety-sticker small { font-family: "Montserrat", var(--font); font-weight: 600; font-size: 1.9cqw; letter-spacing: .16em; text-transform: uppercase; }
.variety-sticker b { font-family: Georgia, serif; font-style: italic; font-size: 5.6cqw; line-height: 1; }


/* the phone and the poster basket each get their own spot on the console, either side of the TV */
.tv-row { align-items: flex-end; gap: 22px; }
.console-side { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 160px; margin-bottom: -2px; }
.tv-row .tv { flex: 0 1 620px; min-width: 0; }
@media (max-width: 900px) { .console-side { width: 120px; } .phone { width: 104px; } }
@media (max-width: 640px) { /* the TV takes the whole top shelf; the phone sits on the Featured shelf */
  .tv-row { gap: 0; }
  .console-side { display: none; }
  .tv-row .tv { flex: 1 1 100%; }
  .phone-slot { display: flex; align-items: flex-end; flex: 0 0 auto; order: -1; }
  .phone-slot .phone { width: 74px; margin-right: 8px; }
}
.phone-slot:empty { display: none; }

/* mid-2000s silver cordless phone in its charging cradle (handset about a third the TV's height) */
.phone { position: relative; display: block; width: 132px; padding: 0; border: 0; background: none; cursor: pointer; }
.phone-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ph-handset { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,.7,.25,1); }
.phone:hover .ph-handset, .phone:focus-visible .ph-handset { transform: translateY(-6px) rotate(-3deg); }
.phone.ringing .ph-handset { transform: translate(-6px, -40px) rotate(-12deg); }
.ph-led { filter: drop-shadow(0 0 3px #39e07a); }
.phone:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }

/* the featured screenplay: real paper depth, grain, brads, accolade stickers */
.sf-3d { position: relative; display: block; transform-style: preserve-3d; transform: rotateY(-12deg); transform-origin: bottom center; transition: transform .35s ease; }
.script-feature:hover .sf-3d, .script-feature:focus-visible .sf-3d { transform: rotateY(-4deg) translateY(-8px); }
.sf-3d .sf-cover { transform: none !important; transition: none; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.sf-edge-r { position: absolute; top: 0; bottom: 0; right: 0; width: 8px; transform-origin: right center; transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f6f2e8 0 1px, #dcd5c6 1px 2px); }
.sf-edge-b { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; transform-origin: center bottom; transform: rotateX(-90deg);
  background: repeating-linear-gradient(#f6f2e8 0 1px, #dcd5c6 1px 2px); }
.script-feature::after { content: ""; position: absolute; z-index: -1; left: 8%; right: -2%; bottom: -2px; height: 60%;
  background: radial-gradient(ellipse at 40% 100%, rgba(0,0,0,.55), transparent 70%); filter: blur(6px); transform: skewX(-18deg); transform-origin: bottom; }
.sf-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
              linear-gradient(115deg, rgba(255,255,255,.22), transparent 35%, transparent 70%, rgba(0,0,0,.18)); }
/* on the shelf: four small laurels along the foot, Variety tucked in the top corner, so the title and the three women stay clear */
.sf-cover .accolades { top: 0; left: 3cqw; right: 3cqw; bottom: 3cqw; grid-template-columns: repeat(4, 1fr); gap: 1.5cqw; z-index: 2; align-content: end; }
.sf-cover .ls-text { font-size: 1.45cqw; }
.sf-cover .variety-sticker { top: 3cqw; right: 1cqw; padding: 1cqw 2.6cqw 1.4cqw; }
.sf-cover .variety-sticker small { font-size: 1.7cqw; }
.sf-cover .variety-sticker b { font-size: 5.4cqw; }

/* ---------- smaller screens ---------- */
@media (max-width: 700px) {
  .room { --spine-w: 22px; --spine-h: 204px; --spine-font: 10.5px; }
  .room-inner { padding: 24px 12px 0; gap: 28px; }
  .unit { padding: 0 8px; }
  .unit::before { left: 6px; } .unit::after { right: 6px; }
  .unit-crown { margin: 0 -6px; }
  .unit-base, .board { margin: 0 -8px; }
  .spines { padding: 20px 6px 0; }
  .cd { width: 74px; }
  .cd-info, .award-hint { font-size: .48rem; letter-spacing: .08em; }
  .award { width: 64px; }
  .photo-frame { width: 70px !important; padding: 4px !important; }
  .photo-mat { padding: 3px !important; }
  .shelf-music .shelf-extra { gap: 10px; }
  .shelf-directing .spines, .shelf-writing .spines { overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: -6px; }
  .poster.hung { width: 100px; }
  .wall-posters { gap: 12px; }
  .corkboard.gallery { padding: 12px 10px 14px; gap: 8px; border-width: 6px; }
  .cork-row { gap: 6px; }
  .bts-wall { padding: 32px 12px 40px; }
  .shelf-featured .spines, .shelf-writing .spines { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; gap: 14px; }
  .shelf-cds .cd { width: calc(var(--spine-h) * .72); }

  .bookend { width: 9px; margin-left: 3px; }
  .spine-band { height: 10px; }
  .spine-logo { font-size: 6.5px; padding: 0 1px; margin-bottom: 6px; }
  .cam3d { width: 120px; }
  .photo-frame { width: 96px; padding: 6px; }
  .photo-mat { padding: 5px; }
  .tv-face { grid-template-columns: 8% minmax(0, 1fr) 8%; }
  .ctl-group, .ctl-power { gap: 6px; }
  .tv-controls { gap: 2%; }
  .drive { --depth: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .vfd-track { animation: none; }
  .spine, .big-case, .photo-frame, .tray, .poster { transition: none !important; }
  .room.tv-glow::after { animation: none; }
  .tv-screen.on iframe, .tv-screen.off-anim iframe { animation: none; }
}

/* ---------- stickers: embossed gold-foil starbursts, stamped in typewriter ink ---------- */
.sticker, .spine-sticker, .cd-sticker, .variety-sticker {
  clip-path: polygon(50.0% 0.0%, 54.2% 7.2%, 59.8% 1.0%, 62.5% 8.9%, 69.1% 3.8%, 70.3% 12.1%, 77.8% 8.4%, 77.3% 16.8%, 85.4% 14.6%, 83.2% 22.7%, 91.6% 22.2%, 87.9% 29.7%, 96.2% 30.9%, 91.1% 37.5%, 99.0% 40.2%, 92.8% 45.8%, 100.0% 50.0%, 92.8% 54.2%, 99.0% 59.8%, 91.1% 62.5%, 96.2% 69.1%, 87.9% 70.3%, 91.6% 77.8%, 83.2% 77.3%, 85.4% 85.4%, 77.3% 83.2%, 77.8% 91.6%, 70.3% 87.9%, 69.1% 96.2%, 62.5% 91.1%, 59.8% 99.0%, 54.2% 92.8%, 50.0% 100.0%, 45.8% 92.8%, 40.2% 99.0%, 37.5% 91.1%, 30.9% 96.2%, 29.7% 87.9%, 22.2% 91.6%, 22.7% 83.2%, 14.6% 85.4%, 16.8% 77.3%, 8.4% 77.8%, 12.1% 70.3%, 3.8% 69.1%, 8.9% 62.5%, 1.0% 59.8%, 7.2% 54.2%, 0.0% 50.0%, 7.2% 45.8%, 1.0% 40.2%, 8.9% 37.5%, 3.8% 30.9%, 12.1% 29.7%, 8.4% 22.2%, 16.8% 22.7%, 14.6% 14.6%, 22.7% 16.8%, 22.2% 8.4%, 29.7% 12.1%, 30.9% 3.8%, 37.5% 8.9%, 40.2% 1.0%, 45.8% 7.2%);
  border-radius: 0; box-shadow: none; aspect-ratio: 1; display: grid; place-items: center; align-content: center; text-align: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,252,225,.95), rgba(255,240,180,.35) 22%, transparent 42%),
    radial-gradient(circle, transparent 69%, rgba(110,70,15,.35) 70% 71.5%, rgba(255,240,190,.45) 72.5% 73.5%, transparent 74.5%),
    conic-gradient(from 25deg, #a9771f, #f3d36d, #c28d2a, #fff0a8, #9e6f1c, #e7bf55, #b4832a, #f8e08a, #a9771f);
  color: #3a230c; font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; letter-spacing: -.02em; line-height: .95;
  text-shadow: 0 1px 0 rgba(255,246,205,.6), 0 -1px 0 rgba(90,55,10,.3);
}
.variety-sticker { width: 30cqw; padding: 0; gap: .3cqw; }
.variety-sticker small { font-family: inherit; font-weight: 700; letter-spacing: 0; }
.variety-sticker b { color: #3a230c; }
.sf-cover .variety-sticker { width: 26cqw; padding: 0; top: 2cqw; right: 2cqw; }
.dvd34.faceout .spine-sticker { left: auto; right: 5%; transform: translateZ(calc(var(--d) / 2 + 1px)) rotate(12deg); }

/* Where the Mountain Women Sing in a clear-view presentation cover */
.sf-cover > img { left: 7%; width: 93%; }
.sf-sleeve { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.34) 0 9%, rgba(255,255,255,.06) 22%, transparent 38%, transparent 64%, rgba(255,255,255,.16) 78%, rgba(255,255,255,.03) 90%),
    linear-gradient(rgba(var(--led), .16), transparent 26%),
    rgba(225,238,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset -2px 0 0 rgba(255,255,255,.18); }
.sf-bar { /* the slide-on binding bar */
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 9%; border-radius: 2px 4px 4px 2px;
  background: linear-gradient(90deg, #050505, #2a2a2e 38%, #0e0e10 62%, #1c1c1f 86%, #050505);
  box-shadow: 1px 0 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.sf-cover .accolades { left: 11cqw; z-index: 3; }
.sf-cover .variety-sticker { z-index: 3; }


/* ---------- the shelves run on past both edges of the screen, so nothing ever hangs off the end ---------- */
.room { overflow-x: clip; --spine-h: clamp(110px, calc((100vw - 60px) / 6.1), 240px); }
.unit { width: 100vw; margin-inline: calc(50% - 50vw); padding: 0; box-shadow: 0 40px 60px -10px rgba(0,0,0,.75); }
.unit::before, .unit::after { display: none; }
.unit-base, .board { margin: 0; }
.spines { --gutter: max(16px, calc((100vw - 1180px) / 2)); padding-left: var(--gutter) !important; padding-right: var(--gutter);
  box-shadow: inset 0 26px 22px -18px rgba(0,0,0,.45), inset 0 -10px 12px -8px rgba(0,0,0,.6); }

/* the top of the unit is a deep shelf: the TV and phone stand back from its front edge */
.unit-crown { height: 66px; margin: 0; border-radius: 0; border-bottom: 16px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.08) 55%, rgba(255,245,225,.22)) padding-box,
    linear-gradient(rgba(255,245,225,.5), rgba(255,245,225,.18) 3px, rgba(0,0,0,.28)) border-box,
    var(--oak-h) 0 0 / 420px auto border-box, #b98f62;
  box-shadow: 0 7px 12px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,250,235,.55); }
.tv-area { position: relative; z-index: 2; margin-bottom: -16px; }
.tv-row { position: relative; }


/* the bottom shelf holds three groups, each with its own plaque on the shelf edge under it */
.shelf-writing .spines { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: calc(var(--spine-h) * .2); }
.shelf-writing .grp-writing { justify-self: start; } .shelf-writing .grp-producing { justify-self: center; } .shelf-writing .grp-theater { justify-self: end; }
.shelf-group { position: relative; display: flex; align-items: flex-end; flex: 0 0 auto; }
.grp-tag { position: absolute; z-index: 3; left: 50%; top: calc(100% + 13px); transform: translateX(-50%); white-space: nowrap; margin: 0; }
.grp-producing .fan-producing { margin-left: 0; }
.grp-theater .theatre { margin-left: 0; padding-right: 0; }

/* ---------- shelf plaques: engraved brass nameplates ---------- */
.shelf-tag {
  padding: 3px 16px 2px; border: 1px solid #7d5a1b; border-radius: 3px; line-height: 16px;
  font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: #3a240b; text-shadow: 0 1px 0 rgba(255,246,205,.65);
  background:
    linear-gradient(100deg, transparent 30%, rgba(255,252,230,.45) 46%, transparent 60%),
    linear-gradient(#f5e2a0, #dcb75e 42%, #b98b30 58%, #e7c66d);
  outline: 1px solid rgba(110,75,18,.45); outline-offset: -4px;
  box-shadow: inset 0 1px 0 rgba(255,250,222,.85), inset 0 -1px 0 rgba(90,60,10,.45), 0 2px 3px rgba(0,0,0,.5);
}
.shelf-tag::before { display: none; }

/* ---------- a screenplay opens to a single page: title, logline, details, a photo paper-clipped on ---------- */
.viewer.shelf-script { --neon: #6dffc6; }
.viewer.shelf-script .viewer-stage { --W: min(470px, 88vw, calc((100vh - 110px) / 1.294)); --H: calc(var(--W) * 1.294); --d: 3px; }
.viewer.shelf-script .big-case { cursor: default; }
.script-page { background: #fbfaf6; color: #111; font-family: "Courier Prime", "Courier New", monospace; container-type: inline-size; overflow-y: auto;
  display: flex; flex-direction: column; padding: 39cqw 10cqw 10cqw; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.script-page .sp-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2cqw; }
.script-page .tp-title { font-weight: 700; font-size: 6cqw; line-height: 1.25; text-decoration: underline; text-underline-offset: .2em; margin-bottom: 2cqw; }
.script-page .tp-by { font-size: 3.4cqw; } .script-page .tp-name { font-size: 3.8cqw; margin-bottom: 4cqw; }
.script-page p { margin: 0; }
.sp-logline { font-size: clamp(11px, 3.5cqw, 15px); line-height: 1.55; text-align: left; }
.sp-meta { font-size: clamp(10px, 2.9cqw, 13px); color: #555; margin-top: 2cqw !important; }
.sp-note { font-size: clamp(10px, 2.9cqw, 13px); color: #555; }
.sp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw 4cqw; margin-top: 3cqw; }
.sp-actions a { color: #1b1b1b; font-size: clamp(10px, 3cqw, 13px); }
.sp-actions .play-btn { font-size: clamp(10px, 3cqw, 13px); }
.script-page .tp-mark { position: absolute; right: 6cqw; bottom: 2.5cqw; font-size: 2.6cqw; border: 1px solid #444; padding: 0 .4em; }
.sp-photo { /* reference photo, paper-clipped to the top corner */
  position: absolute; right: 8cqw; top: 2.4cqw; width: 32cqw; transform: rotate(1.2deg); transform-origin: 30% 0; }
.sp-paper { position: relative; z-index: 1; display: block; background: #fff; padding: 1.6cqw 1.6cqw 4cqw; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.sp-paper img { display: block; width: 100%; height: auto; }  /* the photo at its own proportions */
/* the clip grips the top edge of the page: its loops poke up above the paper, the front loop lies over the photo,
   and the inner leg is hidden behind the page except where it wraps over the edge */
.sp-clip { position: absolute; left: 15%; top: -8.6cqw; width: 8cqw; height: auto; overflow: visible; }
.sp-clip.clip-back { z-index: 0; clip-path: inset(0 0 76% 0); }
.sp-clip.clip-front { z-index: 2; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.35)); }
.viewer.shelf-script .face.front { overflow: visible; }
.script-page { overflow: visible !important; }
/* Where the Mountain Women Sing: poster clipped on, laurels in a row near the foot, Variety in the top corner */
.script-page.has-accolades { padding-top: 44cqw; padding-bottom: 8cqw; }
.script-page.has-accolades .sp-photo { width: 27cqw; }
.script-page .accolades { position: static; margin-top: auto; padding-top: 6cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.script-page .ls-text { font-size: 1.7cqw; }
.script-page .variety-sticker { position: absolute; left: 9cqw; right: auto; top: 8cqw; width: 24cqw; transform: rotate(-8deg); }
.script-page .variety-sticker small { font-size: 2.1cqw; } .script-page .variety-sticker b { font-size: 5.4cqw; }

/* ---------- cases open like the real thing: the cover swings left (details), the disc sits on the right ---------- */
.viewer.booklet .viewer-stage { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.viewer.booklet .big-case.hinged { transform-origin: left center; }  /* only while it opens on its hinge; it grows from the shelf around its centre */
.viewer.booklet .big-case.flipped { transform: rotateY(-168deg) !important; }
.viewer.booklet .viewer-stage:has(.big-case.flipped) { transform: translateX(50%); }
.viewer.booklet:not(.shelf-playbill):not(.shelf-cd):not(.shelf-writing) .viewer-stage { --W: min(380px, 45vw, calc((100vh - 130px) / 1.48)); --d: 12px; }
.viewer.booklet.shelf-cd .viewer-stage { --W: min(420px, 45vw, calc((100vh - 130px) / .88)); --d: 8px; }
.viewer.booklet.shelf-writing .viewer-stage { --W: min(400px, 45vw, calc((100vh - 120px) / 1.294)); --H: calc(var(--W) * 1.294); --d: 6px; }

.inside-page:has(.disc-tray) { background: linear-gradient(90deg, #0b0b0d, #1c1c20 8%, #141417 92%, #0b0b0d); color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 10px 0 18px -8px rgba(0,0,0,.8); }
.disc-tray { position: absolute; inset: 0; padding: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; }
.tray-hub { position: absolute; left: 50%; top: 50%; width: 22cqw; aspect-ratio: 1; transform: translate(-50%, -62%); border-radius: 50%;
  background: repeating-conic-gradient(#3a3a40 0 10deg, #1e1e22 10deg 20deg); box-shadow: inset 0 0 0 2cqw #2a2a2f, 0 0 0 1px rgba(255,255,255,.08); }
.tray-cd { position: relative; width: 84cqw; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: transform .25s ease, filter .25s ease; }
.cd-tray .tray-cd { width: 76cqw; }
.tray-cd:hover, .tray-cd:focus-visible { transform: scale(1.03) rotate(8deg); filter: drop-shadow(0 0 14px var(--neon)); outline: none; }
.tray-cd.off { cursor: default; opacity: .55; }
.tray-cd.lifted { visibility: hidden; }
.tray-disc-art { position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 15.5%, rgba(255,255,255,.55) 16% 17%, rgba(0,0,0,.25) 17.5% 18.5%, transparent 19%),
    conic-gradient(from 30deg, rgba(255,255,255,.18), transparent 12%, rgba(255,255,255,.12) 25%, transparent 40%, rgba(255,255,255,.16) 62%, transparent 75%, rgba(255,255,255,.1) 90%, rgba(255,255,255,.18)),
    var(--label) center / cover, #c9ccd2;
  -webkit-mask: radial-gradient(circle, transparent 0 7.5%, #000 8%); mask: radial-gradient(circle, transparent 0 7.5%, #000 8%);
  box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.tray-disc-art.blank { background: conic-gradient(from 10deg, #d7dbe2, #9aa1ab, #eef0f3, #a7adb6, #d7dbe2); }
.tray-hint { margin: 0; font-family: "Oswald", var(--font); font-size: clamp(10px, 3cqw, 13px); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* Where the Mountain Women Sing: the presentation cover in your hands, details inside the cover, title page on the right */
.wtm-front { container-type: inline-size; }
.wtm-cover { position: absolute !important; inset: 0; aspect-ratio: auto !important; transform: none !important; box-shadow: none !important; }
.back-art.wtm-titlepage { background: #fbfaf6 !important; box-shadow: inset -10px 0 16px -10px rgba(0,0,0,.3); }
.inside-page:has(.wtm-notes) { background: #f6f3ea; }
.wtm-notes { padding: 9cqw 9cqw 8cqw !important; font-family: "Courier Prime", "Courier New", monospace; color: #1b1b1b; gap: 1.1em !important; }
.wtm-notes p { margin: 0; }
.wn-kicker { font-size: .82em; color: #666; letter-spacing: .04em; }
.wn-logline { font-size: clamp(11px, 3.4cqw, 15px); line-height: 1.5; }
.wn-accolades { position: relative; margin-top: 2cqw; }
.wn-accolades .accolades { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3cqw 4cqw; width: 64%; margin: 0 auto; }
.wn-accolades .ls-text { font-size: 1.95cqw; }
.wn-accolades .variety-sticker { position: absolute; left: auto; right: -2cqw; top: -14cqw; width: 26cqw; transform: rotate(10deg); }
.wn-accolades .variety-sticker small { font-size: 2.3cqw; } .wn-accolades .variety-sticker b { font-size: 6cqw; }
.wn-links { margin-top: auto !important; }
.wn-links a { color: #1b1b1b; }
.tp-sheet { position: absolute; inset: 0; color: #111; font-family: "Courier Prime", "Courier New", monospace; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 12cqw; gap: 2.4cqw; }

/* WTMWS: the Variety sticker on the title page, top right */
.wtm-titlepage .variety-sticker { position: absolute; z-index: 2; top: 5cqw; right: 5cqw; width: 26cqw; transform: rotate(8deg); }
.wtm-titlepage .variety-sticker small { font-size: 2.3cqw; } .wtm-titlepage .variety-sticker b { font-size: 6cqw; }

/* ---------- an open DVD/CD case is black molded plastic: insert under a clear sleeve on the left, the disc tray on the right ---------- */
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back {
  background: #0b0b0d; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 2.6cqw #0b0b0d, inset 0 0 0 calc(2.6cqw + 1px) rgba(255,255,255,.12), inset -14px 0 18px -12px rgba(0,0,0,.9); }
.back-art.case-inside { margin: 2.6cqw; min-height: calc(100% - 5.2cqw); padding: 6cqw 6cqw 4cqw; border-radius: 2px; position: relative;
  background:
    linear-gradient(118deg, rgba(255,255,255,.1) 0 8%, transparent 26%, transparent 70%, rgba(255,255,255,.05) 86%),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--neon) 16%, transparent), transparent 60%), #121215; }
.inside-page:has(.disc-tray) { border-radius: 4px;
  box-shadow: inset 0 0 0 2.6cqw #0d0d0f, inset 0 0 0 calc(2.6cqw + 1px) rgba(255,255,255,.1), inset 12px 0 18px -8px rgba(0,0,0,.9); }
.inside-page:has(.disc-tray)::before { /* the hinge ribs down the middle of the case */
  content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3cqw;
  background: repeating-linear-gradient(90deg, #050506 0 2px, #24242a 2px 3px); }
.case-section { font-family: "Oswald", var(--font); font-size: .72em; letter-spacing: .2em; text-transform: uppercase; color: var(--neon); margin-top: .6em !important; }
.case-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.case-gallery figure { margin: 0; }
.case-gallery button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.case-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(255,255,255,.15); transition: transform .2s; }
.case-gallery button:hover img { transform: scale(1.04); }
.case-gallery figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.case-credits p { font-family: "Oswald", var(--font); font-size: .74em; letter-spacing: .04em; color: #c9c2b8; line-height: 1.45; white-space: pre-line; }
.scene-menu { list-style: none; padding: 0; display: grid; gap: .3em; }
.scene-menu .play-btn.scene { all: unset; cursor: pointer; font-family: "Oswald", var(--font); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--neon) 60%, transparent); }
.scene-menu .play-btn.scene::before { content: "▸ "; color: var(--neon); }

/* ---------- shelf DVDs: beveled molded-plastic cases with real thickness ---------- */
.dvd34 { --d: calc(var(--h) * .11); perspective-origin: 50% 12%; }
.dvd34 .face.front { border-radius: 3px 5px 5px 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.2), inset 3px 0 4px -1px rgba(0,0,0,.6), inset -2px 0 3px -1px rgba(255,255,255,.12); }
.dvd34 .face.front::after { /* the clear sleeve's gloss */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(108deg, rgba(255,255,255,.2) 0 6%, rgba(255,255,255,.05) 22%, transparent 38%, transparent 72%, rgba(255,255,255,.08) 88%, transparent); }
.dvd34 .face.spine { border-radius: 3px;
  background: linear-gradient(90deg, #000 0, #26262a 16%, #3c3c42 42%, #26262a 72%, #000 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.dvd34 .face.top { position: absolute; left: 0; top: 0; width: 100%; height: var(--d); transform-origin: top center;
  transform: translateZ(calc(var(--d) / 2)) rotateX(-90deg); border-radius: 3px;
  background: linear-gradient(90deg, #1b1b1f, #3b3b41 30%, #2a2a2f 70%, #141417); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); backface-visibility: hidden; }

/* ---------- the two CDs on little floating shelves, one above the other ---------- */
.shelf-cds { flex-direction: column; align-items: center; justify-content: flex-end; gap: calc(var(--spine-h) * .07); margin-left: calc(var(--spine-h) * .1); }
.shelf-cds .cd { width: calc(var(--spine-h) * .47); }
.shelf-cds .cd-wrap { padding-bottom: 6px; }
.shelf-cds .cd-wrap::before { left: -14%; right: -14%; bottom: -2px; height: 7px; border-radius: 1px; backdrop-filter: none;
  background: linear-gradient(rgba(255,245,225,.55), rgba(255,245,225,.1) 2px, rgba(0,0,0,.25)), var(--oak-h) 0 0 / 300px auto, #b98f62;
  box-shadow: 0 6px 8px rgba(0,0,0,.5), inset 0 -1px 0 rgba(60,35,15,.5); }
.shelf-cds .cd-wrap + .cd-wrap { margin-left: 0; }

/* ---------- the TV's buttons work: volume and channel (with an on-screen display), stop, play, power ---------- */
.tv-btn { padding: 0; border: 0; background: none; cursor: pointer; }
.tv-btn:hover i { background: linear-gradient(#fff, #d3d6db); }
.tv-btn:active i { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.tv-btn:focus-visible { outline: 2px solid #6fd2ff; outline-offset: 4px; border-radius: 2px; }
.tv-osd { position: absolute; z-index: 4; left: 5%; top: 7%; pointer-events: none; opacity: 0; transition: opacity .2s;
  font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: clamp(11px, 2.4vw, 20px); letter-spacing: .08em; color: #5dff7a;
  text-shadow: 0 0 6px rgba(93,255,122,.8), 2px 2px 0 rgba(0,0,0,.8); display: flex; flex-direction: column; gap: .2em; }
.tv-osd.show { opacity: 1; }
.tv-osd small { font-size: .6em; letter-spacing: .06em; text-transform: uppercase; }
.osd-bars span { opacity: .25; }
.tv-screen.static::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #222 1px 2px, #888 2px 3px), #444; opacity: .85; animation: tv-static .08s steps(2) infinite; }
@keyframes tv-static { 50% { background-position: 3px 2px; filter: brightness(1.4); } }
.tv-screen.power-off > :not(.tv-glass) { visibility: hidden; }
.tv-screen.power-off { background: #050606 !important; }
.tv-area.powered-off .power-led { background: #3a0d0b; box-shadow: none; }

/* the puppet keeps clear of Pizzato's case */
.shelf-directing .puppet-stand { position: relative; z-index: 3; margin-left: calc(var(--spine-h) * .16); }

/* ---------- the photo booklet tucked inside a DVD case ---------- */
.booklet-thumb { display: flex; align-items: center; gap: 4cqw; width: 100%; padding: 2.4cqw; border: 0; border-radius: 2px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.05); color: #e9e4dd; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .2s; }
.booklet-thumb:hover, .booklet-thumb:focus-visible { background: rgba(255,255,255,.1); outline: none; box-shadow: inset 0 0 0 1px var(--neon); }
.bt-cover { position: relative; flex: 0 0 28cqw; aspect-ratio: 1 / 1.45; display: flex; flex-direction: column; justify-content: flex-end; padding: 2cqw;
  background: linear-gradient(transparent 45%, rgba(0,0,0,.8)), var(--art) center / cover; border-radius: 1px; transform: rotate(-3deg);
  box-shadow: 2px 3px 0 #ddd, 3px 4px 0 #bbb, 5px 7px 10px rgba(0,0,0,.6); }
.bt-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 35%); }
.bt-label { font-family: "Oswald", var(--font); font-size: 2.3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }
.bt-title { font-family: "Bebas Neue", "Oswald", var(--font); font-size: 4.6cqw; line-height: 1; color: #fff; }
.bt-count { font-family: "Oswald", var(--font); font-size: .78em; letter-spacing: .1em; text-transform: uppercase; }

.pbk { position: fixed; inset: 0; z-index: 48; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.pbk[hidden] { display: none; }
.pbk-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.pbk-close { position: absolute; top: 14px; right: 18px; z-index: 2; border: 0; background: none; color: #fff; font-size: 2.2rem; cursor: pointer; }
.pbk-book { --pw: min(330px, 44vw, calc((100vh - 140px) / 1.45)); position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) * 1.45); perspective: 2200px;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
.pbk-page, .pbk-leaf { position: absolute; top: 0; width: var(--pw); height: 100%; container-type: inline-size; }
.pbk-left { left: 0; } .pbk-right { right: 0; }
.pbk-leaf { right: 0; transform-origin: left center; transform-style: preserve-3d; z-index: 2; }
.pbk-leaf[hidden] { display: none; }
.pbk-face { position: absolute; inset: 0; backface-visibility: hidden; }
.pbk-back { transform: rotateY(180deg); }
.pbk-page > *, .pbk-face > * { position: absolute; inset: 0; }
/* glossy paper: white page, sheen, a soft crease shadow at the spine */
.pbk-photo, .pbk-blank, .pbk-cover { margin: 0; background: #fbfbf8; }
.pbk-left .pbk-photo, .pbk-left .pbk-blank, .pbk-back .pbk-photo, .pbk-back .pbk-blank { box-shadow: inset -18px 0 22px -14px rgba(0,0,0,.35); }
.pbk-right .pbk-photo, .pbk-right .pbk-blank, .pbk-front .pbk-photo, .pbk-front .pbk-blank, .pbk-front .pbk-cover, .pbk-right .pbk-cover { box-shadow: inset 18px 0 22px -14px rgba(0,0,0,.35); }
.pbk-photo::after, .pbk-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.45), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18)); }
.pbk-photo { display: flex; flex-direction: column; justify-content: space-evenly; padding: 7cqw 8cqw 9cqw; }
.pbk-photo figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.pbk-photo button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; line-height: 0; }
.pbk-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 52cqw; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pbk-photo figcaption { font-family: Georgia, serif; font-style: italic; font-size: clamp(10px, 3.4cqw, 14px); color: #333; text-align: center; }
.pbk-folio { position: absolute; bottom: 3cqw; left: 0; right: 0; text-align: center; font-family: "Oswald", var(--font); font-size: 3cqw; color: #999; }
.pbk-cover { display: flex; flex-direction: column; justify-content: flex-end; padding: 10cqw; gap: 2cqw;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.85)), var(--art) center / cover; color: #fff; }
.pbk-cover span { font-family: "Oswald", var(--font); font-size: 4cqw; letter-spacing: .2em; text-transform: uppercase; }
.pbk-cover b { font-family: "Bebas Neue", "Oswald", var(--font); font-weight: 400; font-size: 13cqw; line-height: .95; }
.pbk-cover i { position: absolute; top: 6cqw; right: 7cqw; font-style: normal; font-family: "Oswald", var(--font); font-size: 3.4cqw; border: 1px solid #fff; padding: 0 .4em; }
.pbk-left:has(.pbk-blank:only-child) { visibility: hidden; }
.pbk-nav { position: relative; display: flex; align-items: center; gap: 18px; color: #ddd; font-family: "Oswald", var(--font); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.pbk-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pbk-nav button:disabled { opacity: .3; cursor: default; }

/* ---------- open DVD case, take two: matte molded black plastic ---------- */
.disc-tray {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background:
    var(--grain),
    /* the round well the disc sits in, with its raised rim */
    radial-gradient(circle at 50% var(--disc-y, 46%), transparent 0 43.5cqw, rgba(0,0,0,.75) 43.6cqw 44.4cqw, rgba(255,255,255,.1) 44.6cqw 45.2cqw, transparent 45.4cqw),
    /* finger notches either side of the disc */
    radial-gradient(circle at 5.5cqw var(--disc-y, 46%), #040405 0 6cqw, rgba(255,255,255,.08) 6.2cqw 6.6cqw, transparent 6.8cqw),
    radial-gradient(circle at calc(100% - 5.5cqw) var(--disc-y, 46%), #040405 0 6cqw, rgba(255,255,255,.08) 6.2cqw 6.6cqw, transparent 6.8cqw),
    linear-gradient(160deg, #1d1d21, #111114 55%, #0c0c0e);
}
.disc-tray .tray-cd { position: absolute; left: 50%; top: var(--disc-y, 46%); translate: -50% -50%; width: 86cqw; }
.disc-tray .tray-cd:hover, .disc-tray .tray-cd:focus-visible { transform: scale(1.03) rotate(8deg); }
.disc-tray .tray-hub { left: 50%; top: var(--disc-y, 46%); transform: translate(-50%, -50%); width: 20cqw;
  background:
    radial-gradient(circle, #2c2c31 0 34%, #0b0b0d 36% 40%, transparent 41%),
    repeating-conic-gradient(#3b3b41 0 7deg, #141417 7deg 15deg);
  box-shadow: 0 0 0 1.4cqw #18181b, 0 0 0 calc(1.4cqw + 1px) rgba(255,255,255,.1); }
.disc-tray .tray-hint { position: absolute; left: 0; right: 0; bottom: 5%; text-align: center; }
.disc-tray::after { /* embossed logo moulded into the plastic */
  content: "DVD"; position: absolute; right: 7cqw; top: 6cqw; font-family: "Oswald", var(--font); font-weight: 600; font-size: 4.4cqw; letter-spacing: .08em;
  color: #121215; text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.8); }
.cd-tray::after { content: none; }
.inside-page:has(.disc-tray) { box-shadow: inset 0 0 0 2.4cqw #0e0e10, inset 0 0 0 calc(2.4cqw + 1px) rgba(255,255,255,.14), inset 0 0 0 calc(2.4cqw + 3px) rgba(0,0,0,.6), inset 12px 0 18px -8px rgba(0,0,0,.9); }
/* the left side: the printed insert sits under a clear plastic sleeve held by the case's lip */
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back { background: var(--grain-l, #0d0d0f); }
.back-art.case-inside::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
  background: linear-gradient(112deg, rgba(255,255,255,.14) 0 7%, rgba(255,255,255,.03) 20%, transparent 34%, transparent 74%, rgba(255,255,255,.07) 90%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

.face.back { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }

/* ---------- open DVD case, matched to a real one: matte charcoal plastic, raised lip, booklet clips,
   a round recess for the disc, a silver-edged disc with a clear centre ring over a grey toothed hub ---------- */
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) {
  --case: #2c2d30; --case-hi: rgba(255,255,255,.13); --case-lo: rgba(0,0,0,.55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* left: inside of the front cover, with the booklet held in two hook clips */
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back {
  overflow: hidden; border-radius: 5px;
  background: var(--grain), linear-gradient(150deg, #34353a, var(--case) 45%, #252629);
  box-shadow: inset 0 0 0 1px var(--case-hi), inset 0 0 0 1.2cqw var(--case), inset 0 0 0 calc(1.2cqw + 1px) var(--case-lo),
    inset -10px 0 14px -10px rgba(0,0,0,.7); }
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back::before,
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back::after { /* the booklet clips */
  content: ""; position: absolute; z-index: 3; left: 3.4cqw; width: 9cqw; height: 10cqw; border-radius: 1.4cqw 3cqw 3cqw 1.4cqw;
  background: linear-gradient(90deg, #232427, #3d3e43 55%, #2a2b2e); box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 var(--case-hi); }
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back::before { top: 4cqw; }
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .face.back::after { bottom: 4cqw; }
.back-art.case-inside { /* the printed booklet itself, tucked under the clips; it scrolls, the case doesn't */
  position: absolute; inset: 6cqw 5cqw 6cqw 7cqw; margin: 0; min-height: 0; overflow-y: auto; border-radius: 1px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.55); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.back-art.case-inside::after { content: none; }

/* right: the tray */
.inside-page:has(.disc-tray) { border-radius: 5px; background: var(--grain), linear-gradient(150deg, #34353a, var(--case) 45%, #252629);
  box-shadow: inset 0 0 0 1px var(--case-hi), inset 0 0 0 1.2cqw var(--case), inset 0 0 0 calc(1.2cqw + 1px) var(--case-lo),
    inset 12px 0 16px -10px rgba(0,0,0,.75); }  /* a slim lip, so no inner box frames the disc */
.inside-page:has(.disc-tray)::before { /* the hinge nubs on the spine edge, top and bottom */
  content: ""; position: absolute; z-index: 1; left: .6cqw; top: 18%; bottom: 18%; width: 3cqw; background:
    linear-gradient(#3a3b40, #23242a) top / 100% 8cqw no-repeat, linear-gradient(#3a3b40, #23242a) bottom / 100% 8cqw no-repeat; border-radius: 1cqw; }
.disc-tray { background:
    radial-gradient(circle at 50% var(--disc-y, 46%), transparent 0 44cqw, rgba(0,0,0,.55) 44.2cqw 45.6cqw, var(--case-hi) 45.8cqw 46.4cqw, transparent 46.6cqw),
    radial-gradient(circle at 50% var(--disc-y, 46%), #26272a 0 44cqw, transparent 44.2cqw); }
.disc-tray::after { color: var(--case); text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 -1px 0 rgba(0,0,0,.6); }
.disc-tray .tray-hub { width: 29cqw; box-shadow: none;
  background:
    radial-gradient(circle, #232427 0 17%, #5c5e63 18% 22%, #6b6d72 23% 40%, transparent 41%),
    repeating-conic-gradient(from 3deg, #74767b 0 9deg, #46484c 9deg 15deg),
    #66686d;
  -webkit-mask: radial-gradient(circle, #000 0 64%, transparent 66%); mask: radial-gradient(circle, #000 0 64%, transparent 66%); }
.tray-disc-art {
  background:
    radial-gradient(circle closest-side, transparent 0 96.4%, #e3e6ea 96.8%, #9ea3aa 98.6%, transparent 99.2%),   /* silver outer edge */
    radial-gradient(circle closest-side, transparent 0 33%, rgba(255,255,255,.55) 33.4% 34.2%, transparent 34.6%),  /* edge of the printed label */
    radial-gradient(circle closest-side, rgba(210,215,222,.18) 0 33%, transparent 33.2%),                          /* clear plastic centre ring */
    conic-gradient(from 30deg, rgba(255,255,255,.16), transparent 12%, rgba(255,255,255,.1) 25%, transparent 40%, rgba(255,255,255,.14) 62%, transparent 75%, rgba(255,255,255,.08) 90%, rgba(255,255,255,.16)),
    var(--label) var(--label-pos, center) / var(--label-size, cover), #c9ccd2;
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 15%, rgba(0,0,0,.2) 15.4% 33%, #000 33.4% 99.2%, transparent 99.6%);
  mask: radial-gradient(circle closest-side, transparent 0 15%, rgba(0,0,0,.2) 15.4% 33%, #000 33.4% 99.2%, transparent 99.6%);
  box-shadow: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
/* CD jewel case: shorter than a DVD case, so the disc and its recess are smaller */
.disc-tray.cd-tray .tray-cd { width: 64cqw; top: 46%; }
.disc-tray.cd-tray .tray-hub { width: 21.5cqw; top: 46%; }
.disc-tray.cd-tray { background:
    radial-gradient(circle at 50% 46%, transparent 0 33cqw, rgba(0,0,0,.55) 33.2cqw 34.6cqw, var(--case-hi) 34.8cqw 35.4cqw, transparent 35.6cqw),
    radial-gradient(circle at 50% 46%, #26272a 0 33cqw, transparent 33.2cqw); }
.disc-tray.cd-tray .tray-hint { bottom: 3%; }
.disc-print { position: absolute; left: 50%; top: 7%; width: 58%; transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }

/* the printed insert fits on its own: title, logline, booklet; no scrolling */
.back-art.case-inside { overflow: hidden; display: flex; flex-direction: column; gap: .7em; }
.case-inside .back-tagline { font-size: clamp(11px, 3.6cqw, 15px); }
.case-booklet { margin-top: auto; }
.case-inside .back-foot { margin-top: 0; }
.bt-count { display: flex; flex-direction: column; gap: .5em; line-height: 1.35; }
.bt-count b { font-weight: 600; color: var(--neon); letter-spacing: .12em; }
/* booklet text pages: about the film, credits */
.pbk-text { margin: 0; background: #fbfbf8; padding: 10cqw 10cqw 12cqw; display: flex; flex-direction: column; gap: 2.6cqw; color: #222;
  font-family: Georgia, serif; font-size: clamp(10px, 3.6cqw, 14px); line-height: 1.5; overflow: hidden; }
.pbk-text p, .pbk-text blockquote, .pbk-text ul { margin: 0; }
.pbk-text blockquote { font-style: italic; border-left: 2px solid #c9a24a; padding-left: .8em; }
.pbk-text .bk-note { color: #555; font-size: .92em; }
.pbk-head { font-family: "Oswald", var(--font); font-size: 3.4cqw !important; letter-spacing: .24em; text-transform: uppercase; color: #8a6d00; margin-bottom: 1.4cqw !important; }
.pbk-credits p:not(.pbk-head) { font-family: "Oswald", var(--font); font-size: clamp(9px, 3.1cqw, 12px); letter-spacing: .03em; text-transform: uppercase; line-height: 1.35; }
.pbk-left .pbk-text, .pbk-back .pbk-text { box-shadow: inset -18px 0 22px -14px rgba(0,0,0,.35); }
.pbk-right .pbk-text, .pbk-front .pbk-text { box-shadow: inset 18px 0 22px -14px rgba(0,0,0,.35); }

/* ---------- shelf DVD cases: square, flush joins at the spine crease (no rounding there), bevels only on the outer edges, and more depth ---------- */
.dvd34 { --d: calc(var(--h) * .14); perspective-origin: 50% 0%; }
.dvd34:not(.faceout) { width: calc(var(--d) * .83 + var(--w) * .56 + 2px); }
.dvd34 .face.front { border-radius: 0 5px 5px 0; }
.dvd34 .face.spine { border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6); }
.dvd34 .face.top { border-radius: 0 3px 0 0; }
.dvd34 .face.edge { background: linear-gradient(90deg, #0d0d0f, #26262b 40%, #15151a); border-radius: 0 4px 4px 0; }
.dvd34::after { height: 14px; bottom: -6px; background: radial-gradient(ellipse, rgba(0,0,0,.75), transparent 70%); }
/* Playbill: the praise reads dark on the cream page */
.back-art.pb-inside-cover blockquote, .pb-inside-cover blockquote { color: #1b1b1b !important; font-style: italic; border-left: 3px solid #ffe500; padding-left: .8em; margin: 0; }

/* ---------- CD jewel cases, matched to a real one: clear plastic all round, a clear ridged hinge with the
   insert's spine showing through, the cover insert set just inside a clear rim, glossy lid ---------- */
.cd, .cd-front { background: linear-gradient(135deg, rgba(235,240,245,.34), rgba(190,198,206,.18)) !important; border-radius: 3px; }
.cd { box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 2px rgba(120,128,136,.35),
    2px 2px 0 rgba(215,222,230,.45), 3px 3px 0 rgba(140,148,156,.4), 4px 4px 0 rgba(215,222,230,.25),   /* clear plastic thickness */
    12px 12px 16px rgba(0,0,0,.5); }
.cd-art, .cd-front .cd-art { inset: 3% 2.6% 3% 12.2%; border-radius: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.cd-text, .cd-front .cd-text { left: 12.2%; right: 2.6%; bottom: 3%; }
.cd-hinge, .cd-front .cd-hinge {
  left: 1.4%; top: 1.5%; bottom: 1.5%; width: 9.6%; border-radius: 1px;
  background:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.08)) top / 100% 7% no-repeat,       /* hinge knuckles */
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.35)) bottom / 100% 7% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px 4px),  /* moulded ridges */
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.2)), var(--art, #223) 8% 50% / cover;      /* the insert's spine behind */
  box-shadow: inset -1px 0 0 rgba(255,255,255,.45), 1px 0 0 rgba(0,0,0,.25); }
.cd::after, .cd-front::after { /* the clear lid: rim highlights and broad glare */
  content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 11.4%, rgba(255,255,255,.55) 11.4% 11.8%, transparent 11.8%),
    linear-gradient(118deg, rgba(255,255,255,.38), rgba(255,255,255,.07) 26%, transparent 44%, transparent 68%, rgba(255,255,255,.12) 86%, rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 0 0 3px rgba(255,255,255,.08); }
.cd-front { position: absolute; }
.cd-front::after { z-index: 3; }
.cd.playing { box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 3px 3px 0 rgba(140,148,156,.4), 0 0 18px 2px var(--directing), 12px 12px 16px rgba(0,0,0,.5); }
/* an open jewel case: the lid is clear plastic with little tabs holding the booklet; the tray is black */
.viewer.booklet.shelf-cd .face.back { background: linear-gradient(135deg, rgba(225,232,240,.3), rgba(160,168,178,.16)), #1a1b1e !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 0 0 1.2cqw rgba(210,218,226,.14), inset -10px 0 14px -10px rgba(0,0,0,.6) !important; }
.viewer.booklet.shelf-cd .face.back::before, .viewer.booklet.shelf-cd .face.back::after { background: linear-gradient(90deg, rgba(235,240,245,.55), rgba(190,198,206,.35)); width: 6cqw; height: 7cqw; }

/* ---------- the left side of an open case is the booklet itself, held in the clips: a full-bleed photo cover ---------- */
.back-art.case-inside { background: none !important; padding: 0; box-shadow: none; overflow: visible; }
.booklet-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.6cqw;
  padding: 8cqw 7cqw 8cqw 8cqw; border: 0; border-radius: 1px; cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(transparent 45%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.5) 100%), var(--art, linear-gradient(#222, #111)) center / cover, #151517;
  box-shadow: 3px 4px 10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .25s ease; }
.booklet-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.22), transparent 30%, transparent 70%, rgba(255,255,255,.08)); }
.booklet-cover:hover, .booklet-cover:focus-visible { transform: translateY(-2px) rotate(-.4deg); outline: none; box-shadow: 3px 8px 16px rgba(0,0,0,.65), 0 0 0 2px var(--neon); }
.bc-kicker { font-family: "Oswald", var(--font); font-size: clamp(9px, 2.8cqw, 12px); letter-spacing: .2em; text-transform: uppercase; color: var(--neon); }
.bc-title { font-family: "Bebas Neue", "Oswald", var(--font); font-size: 11cqw; line-height: .92; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.bc-lead { font-family: Georgia, serif; font-size: clamp(11px, 3.3cqw, 14px); line-height: 1.45; color: #eee; }
.bc-open { margin-top: 1.4cqw; font-family: "Oswald", var(--font); font-size: clamp(10px, 3cqw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--neon); }
.bc-mark { position: absolute; top: 5cqw; right: 5cqw; font-family: "Oswald", var(--font); font-size: 2.8cqw; border: 1px solid rgba(255,255,255,.8); padding: 0 .4em; }
.bk-scenes { position: absolute; z-index: 4; left: 8cqw; right: 7cqw; top: 6cqw; display: flex; flex-wrap: wrap; gap: 1cqw 2.4cqw; }
.bk-scenes-title { width: 100%; font-family: "Oswald", var(--font); font-size: 2.6cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--neon); }
.bk-scenes .play-btn.scene { all: unset; cursor: pointer; font-family: "Oswald", var(--font); font-size: clamp(9px, 2.8cqw, 12px); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; }
.bk-scenes .play-btn.scene::before { content: "▸ "; color: var(--neon); }
.pbk-text .bk-lead { font-size: 1.05em; font-weight: 600; }
.pbk-text .bk-links a { color: #8a6d00; margin-right: 1em; }

/* an open jewel case: the clear tray shows the back insert's artwork through the plastic */
.inside-page:has(.cd-tray) { background: #1a1b1e; }
.disc-tray.cd-tray { background: none; }
.disc-tray.cd-tray::before { content: ""; position: absolute; inset: 1.2cqw; z-index: 0; background: var(--insert) center / cover; filter: blur(1.5px) brightness(.62) saturate(.9); }
.disc-tray.cd-tray > * { z-index: 1; }
.disc-tray.cd-tray .tray-hub { opacity: .55; mix-blend-mode: screen; }
.disc-tray.cd-tray::after { content: ""; position: absolute; inset: 1.2cqw; z-index: 2; pointer-events: none; color: transparent; text-shadow: none;
  background: radial-gradient(circle at 50% 46%, transparent 0 33cqw, rgba(255,255,255,.25) 33.4cqw 34cqw, transparent 34.6cqw),
    linear-gradient(118deg, rgba(255,255,255,.2), transparent 32%, transparent 70%, rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }

/* ---------- the booklet: lifted out of the case, then flipped open; glossy pages with real thickness ---------- */
.pbk.arriving .pbk-book, .pbk.arriving .pbk-nav, .pbk.leaving .pbk-book, .pbk.leaving .pbk-nav { visibility: hidden; }
.pbk:not([hidden]) .pbk-backdrop { animation: pbk-fade .35s ease; }
.pbk.leaving .pbk-backdrop { opacity: 0; transition: opacity .5s ease .1s; }
@keyframes pbk-fade { from { opacity: 0; } }
.pbk-fly { position: fixed; z-index: 3; container-type: inline-size; transform-origin: 0 0; border-radius: 2px; overflow: hidden; }
.pbk-fly > * { position: absolute; inset: 0; }
.booklet-thumb.lifted-out { visibility: hidden; }
.pbk-measure { position: absolute; left: 0; visibility: hidden; pointer-events: none; }
/* heft: page-stack edges on both outer sides and a little thickness under each page */
.pbk-left, .pbk-right { box-shadow: 0 1px 0 #ecebe6, 0 2px 0 #c9c8c2, 0 3px 0 #eeede8, 0 4px 0 #bdbcb6, 0 5px 0 #e3e2dc, 0 7px 10px rgba(0,0,0,.35); }
.pbk-book::before, .pbk-book::after { content: ""; position: absolute; top: 1px; bottom: -4px; width: 5px; z-index: 0;
  background: repeating-linear-gradient(90deg, #f3f2ed 0 1px, #c6c5bf 1px 2px); }
.pbk-book::before { left: -5px; border-radius: 3px 0 0 3px; }
.pbk-book::after { right: -5px; border-radius: 0 3px 3px 0; }
/* gloss: a crisp specular band on every page, brighter on photo pages */
.pbk-text::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.4), rgba(255,255,255,0) 26%, rgba(255,255,255,0) 72%, rgba(255,255,255,.14)); }
.pbk-photo::after, .pbk-cover::after { background: linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 66%, rgba(255,255,255,.22) 84%, rgba(255,255,255,0)); }
.pbk-photo img { box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.2); }
/* the page bends a little as it turns: shading sweeps across it */
.pbk-leaf.turning .pbk-face::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 40%, rgba(255,255,255,.25) 80%, rgba(0,0,0,.05)); animation: leaf-shade .65s ease both; }
@keyframes leaf-shade { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
.pbk-leaf { filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
/* credits run under the logline */
.pbk-credits-head { margin-top: 2.4cqw !important; }
.pbk-text .pbk-credit { font-family: "Oswald", var(--font); font-size: clamp(9px, 3cqw, 12px); letter-spacing: .03em; text-transform: uppercase; line-height: 1.35; color: #333; }

/* "As seen on" logo stickers (LA Weekly Asia on Will You Be My Quaran-tine?) */
.logo-sticker { position: absolute; z-index: 4; display: block; aspect-ratio: 1; border-radius: 50%; transform: rotate(-8deg);
  box-shadow: 0 0 0 2px #fff, 1px 2px 4px rgba(0,0,0,.5); }
.logo-sticker img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.logo-sticker b { position: absolute; left: 50%; top: -14%; transform: translateX(-50%) rotate(6deg); white-space: nowrap; padding: .15em .5em;
  background: #ffd200; color: #1a1200; border-radius: 2px; font-family: "Oswald", var(--font); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.logo-sticker.on-case { left: 8%; top: 9%; width: 30%; transform: translateZ(calc(var(--d) / 2 + 1px)) rotate(-8deg); }
.logo-sticker.on-case b { font-size: calc(var(--w) * .045); }
.front-art .logo-sticker { left: 6%; top: 8%; width: 28%; }
.front-art .logo-sticker b { font-size: 3.4cqw; }

/* ---------- one typeface across the store: Oswald on every binding, every plaque and the BTS & press heading ---------- */
:root { --brand: "Oswald", "Barlow Condensed", sans-serif; }
.spine-title, .dvd34 .face.spine .spine-title, .face.spine .spine-title { font-family: var(--brand); font-weight: 500; letter-spacing: .08em; }
.ss-label { font-family: var(--brand); font-weight: 500; letter-spacing: .1em; font-size: calc(var(--spine-h) * .046); }
.shelf-tag { font-family: var(--brand); font-weight: 600; font-size: .68rem; letter-spacing: .3em; }
.bts-title { font-family: var(--brand); font-weight: 600; font-size: .8rem; letter-spacing: .3em; }

/* soft contact shadows where the TV and the phone sit on the shelf */
.tv-row .tv { position: relative; }
.tv-row .tv::after, .phone::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.6), rgba(0,0,0,.28) 45%, transparent 72%); filter: blur(2px); }
.tv-row .tv::after { left: 3%; right: 3%; bottom: -9px; height: 20px; }
.phone::after { left: 4%; right: 4%; bottom: -6px; height: 13px; }

/* ---------- spine titles on a single line: taller cases, and long titles shrink to fit (home.js) ---------- */
.dvd34 { --h: calc(var(--spine-h) * 1.12); }
.spines { min-height: calc(var(--spine-h) * 1.12 + 28px); }
.dvd34 .face.spine .spine-title { white-space: nowrap; overflow: hidden; letter-spacing: .05em; line-height: 1; font-size: var(--fit, calc(var(--d) * .5)); }

/* curling page turn: strips chained edge to edge (see curlTurn in home.js) */
.pbk-leaf { filter: none; transform-style: preserve-3d; }
.pbk-strip { position: absolute; top: 0; height: 100%; transform-origin: left center; transform-style: preserve-3d; }
.pbk-sface { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pbk-sface.back { transform: rotateY(180deg); }
.pbk-sinner { position: absolute; top: 0; height: 100%; container-type: inline-size; }
.pbk-sinner > * { position: absolute; inset: 0; }
.pbk-sshade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* ---------- the middle of an open case: the DVD's spine channel, or the jewel case's clear hinge ---------- */
.case-hinge { display: none; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .case-hinge { display: block; }
.viewer.booklet .viewer-stage:has(.big-case.flipped) .case-hinge { opacity: 1; transition: opacity .12s ease; }  /* the spine is there the moment the case opens */
/* DVD: a flat channel between two living-hinge creases, the same matte charcoal as the case */
.viewer.booklet:not(.shelf-cd):not(.shelf-playbill):not(.shelf-writing) .case-hinge {
  width: calc(var(--W) * .1); transform: translateX(-50%); border-radius: 2px;
  background:
    var(--grain),
    linear-gradient(90deg, #202124 0, #44454b 5%, #18191c 11%, #2f3034 15%, #2c2d30 50%, #2f3034 85%, #18191c 89%, #44454b 95%, #202124 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 6px rgba(0,0,0,.6); }
.viewer.booklet:not(.shelf-cd):not(.shelf-playbill):not(.shelf-writing) .inside-page:has(.disc-tray)::before { content: none; }
/* CD: a clear, ridged hinge strip with knuckle pins at the top and bottom */
.viewer.booklet.shelf-cd .case-hinge {
  width: calc(var(--W) * .07); transform: translateX(-35%); border-radius: 2px;
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(220,228,236,.25)) top / 100% 9% no-repeat,
    linear-gradient(rgba(220,228,236,.25), rgba(255,255,255,.55)) bottom / 100% 9% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 1px, rgba(255,255,255,.06) 1px 2px, transparent 2px 4px),
    linear-gradient(90deg, rgba(225,232,240,.28), rgba(170,178,188,.14));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 0 5px rgba(0,0,0,.35); backdrop-filter: blur(1.5px); }
.viewer.booklet.shelf-cd .inside-page:has(.disc-tray)::before { content: none; }
.paper-curl { position: absolute; inset: 0; z-index: 3; transform-style: preserve-3d; pointer-events: none; }

/* ---------- shelf DVDs with real depth: you look slightly down onto their tops, the spines are rounded molded
   plastic lit from the LED strip above, with a specular line running down them ---------- */
.dvd34 { perspective: 900px; perspective-origin: 50% -55%; }
.dvd34 .face.spine {
  background:
    linear-gradient(rgba(255,240,220,.22), rgba(255,240,220,0) 22%),                                       /* LED light from above */
    linear-gradient(90deg, #000 0, #19191c 9%, #45454c 30%, #2b2b30 52%, #141417 80%, #020202 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.dvd34 .face.spine::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 27%, rgba(255,255,255,.22) 31%, rgba(255,255,255,.05) 36%, transparent 40%); }
.dvd34 .face.spine .spine-title { text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 -1px 0 rgba(255,255,255,.08); }
.dvd34 .face.top { background: linear-gradient(90deg, #26262b, #5a5a62 30%, #3a3a40 70%, #1e1e22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.5); }
.dvd34 .face.front { box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.2), inset 4px 0 6px -2px rgba(0,0,0,.65), inset 0 6px 10px -6px rgba(255,240,220,.25); }
.dvd34::after { left: -6%; right: -14%; bottom: -7px; height: 16px; background: radial-gradient(ellipse, rgba(0,0,0,.8), rgba(0,0,0,.35) 45%, transparent 72%); }

/* script binders: a lit top edge and a shaded side so they read as solid objects */
.script-flat { position: relative; overflow: visible; }
.script-flat::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px; transform: skewX(-40deg); transform-origin: bottom left;
  background: linear-gradient(var(--stock, #f4efe2), color-mix(in srgb, var(--stock, #f4efe2) 80%, #000)); filter: brightness(1.08); }
.script-flat::after { content: ""; position: absolute; top: -5px; bottom: 0; right: -4px; width: 4px; transform: skewY(-50deg); transform-origin: top left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--stock, #f4efe2) 70%, #000), color-mix(in srgb, var(--stock, #f4efe2) 50%, #000)); }

/* Playbills are stapled booklets: no spine, in your hands either */
.viewer.shelf-playbill .face.spine, .viewer.shelf-playbill .face.edge { display: none; }
.viewer.shelf-playbill .viewer-stage { --d: 1px; }

/* round laurel stickers */
.laurel-sticker { aspect-ratio: 1; border-radius: 50%; }
.ls-wreath { left: 8%; right: 8%; width: 84%; top: 16%; }
.ls-text { inset: 22% 22% 20%; }
.wn-accolades .accolades { width: 56%; }

/* a closed booklet sits centred; as the cover turns, the book slides over so the open spread is centred */
.pbk-book { transition: transform .9s cubic-bezier(.45,.05,.3,1); }
.pbk-book.closed { transform: translateX(calc(var(--pw) * -.5)); }
.pbk-book.closed::before { opacity: 0; }
.pbk-book::before { transition: opacity .3s ease; }

/* the center strip belongs to the open case: it's there the instant the tray is, no fade */
.viewer.booklet .viewer-stage:has(.inside-page:not([hidden])) .case-hinge { opacity: 1; transition: none; }
.viewer.booklet .viewer-stage:has(.big-case.flipped) .case-hinge { transition: none; }

/* ---------- discs sit neatly inside their recess: a little smaller, and nothing spills past the lines ---------- */
.disc-tray .tray-cd { width: 76cqw; }
.disc-tray .tray-hub { width: 26cqw; }
.disc-tray { background:
    radial-gradient(circle at 50% var(--disc-y, 46%), transparent 0 39.6cqw, rgba(0,0,0,.55) 39.8cqw 41.2cqw, var(--case-hi) 41.4cqw 42cqw, transparent 42.2cqw),
    radial-gradient(circle at 50% var(--disc-y, 46%), #26272a 0 39.6cqw, transparent 39.8cqw); }
.disc-tray.cd-tray .tray-cd { width: 58cqw; }
.disc-tray.cd-tray .tray-hub { width: 19.5cqw; }
.disc-tray.cd-tray { background: none; }
.disc-tray.cd-tray::after { background: radial-gradient(circle at 50% 46%, transparent 0 30.2cqw, rgba(255,255,255,.28) 30.6cqw 31.2cqw, transparent 31.8cqw),
    linear-gradient(118deg, rgba(255,255,255,.2), transparent 32%, transparent 70%, rgba(255,255,255,.08)); }
/* hovering turns the disc a touch and brightens it, but never grows it or glows past the recess */
.disc-tray .tray-cd:hover, .disc-tray .tray-cd:focus-visible { transform: rotate(10deg); filter: brightness(1.08); outline: none; }
.disc-tray .tray-cd:focus-visible .tray-disc-art { box-shadow: 0 0 0 2px var(--neon); }
.disc-tray, .inside-page:has(.disc-tray) { overflow: hidden; }

/* ---------- jewel case hinge: one strip, the same closed or open. While the case is shut it's drawn on the lid;
   the moment it opens, an identical strip in the same place takes over on the tray side and the lid swings round it ---------- */
.viewer.booklet.shelf-cd .case-hinge {
  left: 1.4%; top: 1.5%; bottom: 1.5%; width: 9.6%; transform: none; border-radius: 1px; backdrop-filter: none;
  background:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.08)) top / 100% 7% no-repeat,
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.35)) bottom / 100% 7% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px 4px),
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.2)), var(--art, #223) 8% 50% / cover;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.45), 1px 0 0 rgba(0,0,0,.25); }
.viewer.shelf-cd .cd-front .cd-hinge { display: none; }  /* in your hands the hinge belongs to the tray underneath; the lid is clear there */

/* ---------- every shelf has depth: a wooden top surface running back to the back panel; things stand on it,
   set back from the front edge, instead of sitting on a line ---------- */
.room { --shelf-depth: calc(var(--spine-h) * .16 + 8px); }
.spines {
  padding-bottom: calc(var(--shelf-depth) * .5);
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.18) 40%, rgba(255,245,225,.16) 100%) bottom / 100% var(--shelf-depth) no-repeat,  /* the shelf top, dim at the back */
    var(--oak-h) left bottom / 420px var(--shelf-depth) repeat-x,
    linear-gradient(rgba(var(--led), .38), rgba(var(--led), .12) 22%, rgba(var(--led), 0) 60%),
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.62)),
    var(--oak-v) 0 0 / 420px auto, #8d6a45;
}
.spines { box-shadow: inset 0 26px 22px -18px rgba(0,0,0,.45), inset 0 calc(-1 * var(--shelf-depth)) 0 -1px rgba(0,0,0,0); }
.spines::after { /* where the shelf top meets the back panel: a soft crease of shadow */
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--shelf-depth); height: 10px; pointer-events: none;
  background: linear-gradient(transparent, rgba(0,0,0,.35)); }
.board { border-top-width: 3px; }
.board::before { display: none; }
.grp-tag { top: calc(100% + 13px + var(--shelf-depth) * .5); }

/* ---------- the centre strip is part of the tray (bound to the case interior) ---------- */
.case-hinge { display: none !important; }
.tray-hinge { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 9cqw; pointer-events: none; }
/* DVD: the spine channel between two living-hinge creases */
.disc-tray:not(.cd-tray) .tray-hinge {
  background: var(--grain), linear-gradient(90deg, #18191c 0, #44454b 6%, #1c1d20 13%, #2f3034 18%, #2c2d30 50%, #2f3034 82%, #1c1d20 87%, #44454b 94%, #202124 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 2px 0 5px rgba(0,0,0,.5); }
/* CD: the clear ridged hinge with knuckle pins, the insert's spine showing through - identical to the lid's */
.disc-tray.cd-tray .tray-hinge {
  left: 1.4%; top: 1.5%; bottom: 1.5%; width: 9.6%; z-index: 3; border-radius: 1px;
  background:
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.08)) top / 100% 7% no-repeat,
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.35)) bottom / 100% 7% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, rgba(255,255,255,.05) 1px 2px, transparent 2px 4px),
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.2)), var(--art, #223) 8% 50% / cover;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.45), 1px 0 0 rgba(0,0,0,.25); }

/* the jewel case lid is clear plastic: over the hinge it shows the tray's hinge strip underneath */
.viewer.shelf-cd .cd-front { background: linear-gradient(135deg, rgba(235,240,245,.16), rgba(190,198,206,.06)) !important; }

/* ---------- things stand against the back wall: the shelf top shows in front of them, none behind ---------- */
.spines { padding-bottom: calc(var(--shelf-depth) - 4px); }
.grp-tag { top: calc(100% + 13px + var(--shelf-depth) - 4px); }

/* ---------- CDs at their real size next to the DVDs (a jewel case is about two-thirds a DVD case's height),
   staggered: Something Still Here up on a floating ledge, Ex Pat lower down on a clear stand ---------- */
.shelf-cds { position: relative; display: block; flex: 0 0 auto; width: calc(var(--spine-h) * .95); height: calc(var(--spine-h) * 1.1);
  margin-left: calc(var(--spine-h) * .08); gap: 0; }
.shelf-cds .cd { width: calc(var(--spine-h) * .6); }
.shelf-cds .cd-wrap { position: absolute; padding-bottom: 0; }
.shelf-cds .cd-wrap:nth-child(1) { left: 0; bottom: calc(var(--spine-h) * .58); padding-bottom: 6px; }
.shelf-cds .cd-wrap:nth-child(2) { right: 0; bottom: 0; }
.shelf-cds .cd-wrap:nth-child(2)::before { /* clear acrylic stand instead of a ledge */
  left: -5%; right: -5%; bottom: -3px; height: 8px; border-radius: 2px;
  background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.1) 60%, rgba(255,255,255,.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.35); }
/* the lid always sits over the tray; the tray only shows through the lid's clear parts */
.viewer-stage .inside-page { z-index: 1; }
.viewer-stage .big-case { position: relative; z-index: 2; }

/* round laurel stickers: the gold wreath runs round the edge, the words sit in the middle */
.ls-wreath { left: 3%; top: 3%; right: auto; width: 94%; height: 94%; }
.ls-text { inset: 25% 21% 22%; gap: .2em; line-height: 1.05; }
.ls-text b { font-size: 1.05em; } .ls-text span { font-size: .8em; } .ls-text em { font-size: .85em; margin-top: .25em; }

/* a CD's booklet is its front cover: same art, same printing, same sticker */
.booklet-cover.cd-booklet { padding: 0; background: #111; container-type: inline-size; }
.cd-booklet .cd-art { inset: 0 !important; }
.cd-booklet .cd-text { left: 0 !important; right: 0 !important; bottom: 0 !important; }
.cd-booklet .bc-open.on-cd { position: absolute; z-index: 4; right: 4cqw; top: 4cqw; margin: 0; padding: .3em .7em; background: rgba(0,0,0,.6); border-radius: 2px; }
/* in your hands the closed jewel case looks just like it does on the shelf */
.viewer.shelf-cd .cd-front { background: linear-gradient(135deg, rgba(235,240,245,.34), rgba(190,198,206,.18)) !important; }

/* Playbills are paper: square corners everywhere, no bevels at the fold */
.viewer.shelf-playbill .face, .viewer.shelf-playbill .face.front, .viewer.shelf-playbill .face.back,
.viewer.shelf-playbill .inside-page, .viewer.shelf-playbill .front-art, .viewer.shelf-playbill .back-art { border-radius: 0 !important; }
.viewer.shelf-playbill .face.front, .viewer.shelf-playbill .face.back { box-shadow: none !important; }
.viewer.shelf-playbill .inside-page { box-shadow: inset 8px 0 12px -8px rgba(0,0,0,.3) !important; }
.pb-cover, .pb-3d .pb-cover { border-radius: 0 !important; }

/* script binders: properly thick, and as tall as the shelf */
.script-flat { width: calc(var(--spine-h) * .2); height: calc(var(--spine-h) * 1.12 + 18px); padding: calc(var(--spine-h) * .07) 0; }
.ss-label { width: 66%; font-size: calc(var(--spine-h) * .06); letter-spacing: .14em; }
.ss-brad { width: calc(var(--spine-h) * .05); }
/* the booklet itself flies (no stand-in), so keep it visible while it arrives and leaves */
.pbk.arriving .pbk-book, .pbk.leaving .pbk-book { visibility: visible; }
.pbk.leaving .pbk-nav { visibility: hidden; }
.pbk-book:has(.pbk-left .pbk-blank:only-child)::before { opacity: 0; }
/* the booklet's printing matches the closed front exactly */
.cd-booklet .cd-text { padding: 16% 5% 4%; gap: .6cqw; background: linear-gradient(transparent, rgba(0,0,0,.88) 45%); }
.cd-booklet .cd-text b { font-size: 3cqw; letter-spacing: .16em; color: var(--neon); }
.cd-booklet .cd-text i { font-size: 9cqw; }
.cd-booklet .cd-text small { font-size: 2.4cqw; letter-spacing: .08em; }
.cd-booklet .cd-sticker { font-size: 3.2cqw; }
.cd-booklet .bc-open.on-cd { right: auto; left: 4cqw; top: 4cqw; }  /* clear of the sticker */

/* Featured DVDs are straight-on, fully: no sliver of spine or top showing */
.dvd34.faceout { perspective: none; }
.dvd34.faceout .face.spine, .dvd34.faceout .face.top, .dvd34.faceout .face.edge { display: none; }
.dvd34.faceout .case { transform: none !important; }
.dvd34.faceout:hover .case, .dvd34.faceout:focus-visible .case { transform: translateY(-12px) !important; }

/* an open DVD or CD case lies flat: both halves the same width */
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .big-case.flipped { transform: rotateY(-180deg) !important; }

/* smaller push pins on the cork board */
.print::before { top: -3px; width: 6px; height: 6px; margin-left: -3px; box-shadow: 1px 2px 2px rgba(0,0,0,.45); }

/* ---------- an open DVD case is ONE molded piece: the spine channel is shared by the cover (left half, bends with it)
   and the tray (right half), same plastic, the raised lip running straight across, and a living-hinge crease where
   each side folds; no seam in the middle ---------- */
.case-inside .cover-hinge, .disc-tray:not(.cd-tray) .tray-hinge {
  position: absolute; z-index: 4; width: 5cqw; pointer-events: none;
  background:
    linear-gradient(transparent 1.2cqw, var(--case-lo) 1.2cqw calc(1.2cqw + 1px), var(--case-hi) calc(1.2cqw + 1px) calc(1.2cqw + 2px), transparent calc(1.2cqw + 2px)),
    linear-gradient(to top, transparent 1.2cqw, var(--case-lo) 1.2cqw calc(1.2cqw + 1px), var(--case-hi) calc(1.2cqw + 1px) calc(1.2cqw + 2px), transparent calc(1.2cqw + 2px)),
    var(--hinge-crease), var(--grain), #2b2c2f;
  box-shadow: none; }
.case-inside .cover-hinge { top: -6cqw; bottom: -6cqw; right: -5cqw;
  --hinge-crease: linear-gradient(90deg, rgba(0,0,0,.55) 0, rgba(0,0,0,.25) 6%, rgba(255,255,255,.1) 12%, transparent 22%); }
.disc-tray:not(.cd-tray) .tray-hinge { top: 0; bottom: 0; left: 0;
  --hinge-crease: linear-gradient(270deg, rgba(0,0,0,.55) 0, rgba(0,0,0,.25) 6%, rgba(255,255,255,.1) 12%, transparent 22%); }

/* ---------- shelf DVDs: solid, opaque cases with their tops showing; no drop shadows ---------- */
.dvd34 .face.front { background: #000; }
.dvd34 .face.front::before { background: linear-gradient(rgba(var(--led), .08), transparent 22%); }
.dvd34 .face.front::after { background: linear-gradient(108deg, rgba(255,255,255,.1) 0 5%, rgba(255,255,255,.02) 18%, transparent 30%); }
.dvd34 .face.top { transform-origin: top center; transform: translateZ(calc(var(--d) / -2)) rotateX(90deg) !important; }  /* faces up, toward you */
.dvd34::after { display: none; }

/* the shelf's back edge meets the back of the cases (their tops show about this much depth) */
.room { --case-depth-px: calc(var(--spine-h) * .056); }
.spines { padding-bottom: calc(var(--shelf-depth) - var(--case-depth-px)); }
.grp-tag { top: calc(100% + 13px + var(--shelf-depth) - var(--case-depth-px)); }

/* the script binders and Where the Mountain Women Sing reach right up to the shelf above */
.room { --tall: calc(var(--spine-h) * 1.12 + 24px); }
.script-flat { height: var(--tall); margin-top: -24px; }
.script-feature { width: calc(var(--tall) * 8.5 / 11); margin-top: -24px; }
/* lying open, the case's outside spine and edge aren't visible: only the inside, one continuous piece */
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .big-case.flipped .face.spine,
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing) .big-case.flipped .face.edge { visibility: hidden; }
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing):not(.shelf-cd) .face.back { border-radius: 5px 0 0 5px; }
.viewer.booklet:not(.shelf-playbill):not(.shelf-writing):not(.shelf-cd) .inside-page { border-radius: 0 5px 5px 0; }
/* close the hairline where the two halves of the spine meet: the tray's half tucks a few pixels under the cover's */
.viewer.booklet:not(.shelf-cd) .inside-page:has(.disc-tray), .disc-tray:not(.cd-tray) { overflow: visible !important; }
.disc-tray:not(.cd-tray) .tray-hinge { box-shadow: -3px 0 0 #2b2c2f; }

/* ---------- one scale for the whole store: every size and gap on the shelves comes from the content width,
   so the arrangement is glued in place and only scales as the window gets wider or narrower ---------- */
.room {
  --content-w: min(calc(100vw - 32px), 1540px);
  --spine-h: calc(var(--content-w) / 6.4);
  --shelf-depth: calc(var(--spine-h) * .2);
  --case-depth-px: calc(var(--spine-h) * .056);
  --tall: calc(var(--spine-h) * 1.24);
}
@media (max-width: 700px) { .room { --content-w: 1290px; } }  /* phones: the same arrangement; the shelves scroll sideways */
.spines {
  --gutter: max(16px, calc((100vw - var(--content-w)) / 2));
  padding-left: var(--gutter) !important; padding-right: var(--gutter);
  padding-top: calc(var(--spine-h) * .14); min-height: 0;
}
.script-flat, .script-feature { margin-top: calc(var(--spine-h) * -.12); }   /* binders and the presentation cover reach the shelf above */
.shelf-featured .spines { gap: calc(var(--spine-h) * .3); }
.shelf-writing .spines { gap: calc(var(--spine-h) * .2); }

/* script binder titles typed in Courier New */
.ss-label { font-family: "Courier New", Courier, monospace; font-weight: 700; letter-spacing: .06em; }

/* binder titles: Courier New Bold, reading bold even at small sizes */
.ss-label { font-family: "Courier New", Courier, monospace !important; font-weight: bold !important; -webkit-text-stroke: .35px currentColor; }

/* ---------- a jewel case lid hangs on two razor-thin clear arms (top and bottom) that reach across from the lid
   to the pins on the far side of the tray's hinge strip, like a real CD case ---------- */
.viewer.shelf-cd .face.back { overflow: visible !important; }
.case-inside .lid-arm {
  position: absolute; z-index: 6; right: -14.6cqw; width: 12cqw; height: 4.2cqw; pointer-events: none; border-radius: 1px 2.2cqw 2.2cqw 1px;
  background:
    radial-gradient(circle at calc(100% - 2.1cqw) 50%, rgba(255,255,255,.75) 0 .55cqw, rgba(150,158,168,.6) .65cqw .95cqw, transparent 1.05cqw), /* the pin it turns on */
    linear-gradient(rgba(255,255,255,.5), rgba(220,228,236,.2) 45%, rgba(255,255,255,.35));
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(1px); }
.case-inside .lid-arm.top { top: -4.6cqw; }
.case-inside .lid-arm.bottom { bottom: -4.6cqw; }

/* a case being put back arrives pulled out of its slot, then slides home */
.unit .returning { transform: translateY(calc(var(--spine-h) * -.1)) scale(1.06) !important; }
.unit .dvd34.returning { z-index: 7; }

/* ---------- jewel case: the hinge strip is its own piece (crisp edges, sitting between lid and tray), and the lid
   hangs on two razor-thin clear arms running along its very top and bottom to the pins on its far side ---------- */
.disc-tray.cd-tray .tray-hinge {
  box-shadow: inset 1px 0 0 rgba(255,255,255,.55), inset -1px 0 0 rgba(255,255,255,.55),
    -2px 0 3px rgba(0,0,0,.4), 2px 0 3px rgba(0,0,0,.4) !important; }
.case-inside .lid-arm {
  right: -16.4cqw; width: 12.6cqw; height: 1.3cqw; border-radius: 1px .7cqw .7cqw 1px; border-width: 1px;
  background:
    radial-gradient(circle at calc(100% - 1.1cqw) 50%, rgba(255,255,255,.9) 0 .35cqw, rgba(150,158,168,.7) .45cqw .6cqw, transparent .7cqw),
    linear-gradient(rgba(255,255,255,.6), rgba(210,218,226,.25)); }
.case-inside .lid-arm.top { top: -4.75cqw; }
.case-inside .lid-arm.bottom { bottom: -4.75cqw; }

/* ---------- everything seated on the shelf, measured: an angled DVD's back bottom corner sits .155 shelf-units
   above its front corner, so the shelf's back edge goes exactly there; flat-faced things stand right at the wall ---------- */
.room { --shelf-depth: calc(var(--spine-h) * .28); --case-depth-px: calc(var(--spine-h) * .155); }
.spines { padding-bottom: calc(var(--shelf-depth) - var(--case-depth-px)); }
.grp-tag { top: calc(100% + 13px + var(--shelf-depth) - var(--case-depth-px)); }
/* flat fronts (Featured covers, the award, CDs, Playbills, the presentation cover, binders) stand against the wall */
.dvd34.faceout, .game-set .award, .shelf-cds, .grp-theater .theatre, .script-feature, .script-row { margin-bottom: calc(var(--case-depth-px) - var(--spine-h) * .03); }
.shelf-group.grp-theater { margin-bottom: 0; }
/* a tight contact line where each thing meets the wood, so nothing hovers (not a cast shadow) */
.dvd34::after, .script-flat .ss-ground, .shelf-cds::after { display: none; }
.dvd34 .case::after { content: ""; position: absolute; left: 2%; right: -3%; bottom: -2px; height: 4px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); transform: none; }

/* ---------- jewel case mechanics: the lid turns on pins at the middle of the clear hinge strip. Closed, its printed
   part covers everything right of the strip (the strip shows through its clear edge); open, it lands to the left of
   the strip and its clear edge lies over the strip ---------- */
.viewer.booklet.shelf-cd .big-case.hinged { transform-origin: 6% 50%; }
.viewer.booklet.shelf-cd .viewer-stage:has(.big-case.flipped) { transform: translateX(44%); }
.viewer.booklet.shelf-cd .back-art.case-inside { right: 13cqw; }      /* the booklet stops where the lid's clear hinge edge begins */
.case-inside .lid-arm { right: -7cqw; width: 7.4cqw; }               /* the arms run from the lid to the pins it turns on */
/* set back against the wall, the binders and the presentation cover still end right at the shelf above */
.room { --wall-lift: calc(var(--case-depth-px) - var(--spine-h) * .03); }
.script-flat { height: calc(var(--tall) - var(--wall-lift)); }
.script-feature { width: calc((var(--tall) - var(--wall-lift)) * 8.5 / 11); }
/* the staggered CDs fit the shelf's height with room to stand against the wall */
.shelf-cds { height: calc(var(--spine-h) * 1.0); }
.shelf-cds .cd { width: calc(var(--spine-h) * .56); }
.shelf-cds .cd-wrap:nth-child(1) { bottom: calc(var(--spine-h) * .5); }
.dvd34.faceout { --h: calc(var(--spine-h) * 1.12 - var(--wall-lift)); }
/* the open lid's hinge edge is clear plastic: the strip and its pins show straight through */
.viewer.booklet.shelf-cd .face.back {
  background: linear-gradient(to left, rgba(225,232,240,.14) 0, rgba(225,232,240,.06) 13cqw, transparent 13cqw),
              linear-gradient(to left, transparent 13cqw, #1a1b1e 13cqw) !important; }

/* on phones the cordless phone stands on the Featured shelf at the height of the DVDs beside it */
@media (max-width: 640px) {
  .phone-slot .phone { width: calc((var(--spine-h) * 1.12 - var(--wall-lift)) * 160 / 230); margin-bottom: calc(var(--case-depth-px) - var(--spine-h) * .03); }
}

/* a CD booklet is square: in the lid, and when you open it */
.viewer.booklet.shelf-cd .back-art.case-inside { top: 6cqw; bottom: 6cqw; right: 13cqw; left: auto; width: 76cqw; }
.pbk.square .pbk-book { --pw: min(330px, 44vw, calc(100vh - 160px)); height: var(--pw); }
.pbk.square .pbk-cover { padding: 8cqw; }
.pbk.square .pbk-photo img { max-height: 36cqw; }

/* ---------- one locked base line: every item's front bottom edge sits on the same line on every shelf
   (the DVD cases' backs still meet the wall); nothing is lifted or set back on its own ---------- */
.dvd34.faceout, .game-set .award, .shelf-cds, .grp-theater .theatre, .script-feature, .script-row { margin-bottom: 0 !important; }
.dvd34.faceout { --h: calc(var(--spine-h) * 1.12); }
.script-flat { height: var(--tall); }
.script-feature { width: calc(var(--tall) * 8.5 / 11); }
@media (max-width: 640px) {
  .phone-slot .phone { width: calc(var(--spine-h) * 1.12 * 160 / 230); margin-bottom: 0; }
}

/* ---------- the DVDs' 3D view scales with the shelf too (a fixed-pixel perspective made the angle drift with width) ---------- */
.dvd34 { perspective: calc(var(--spine-h) * 6.3); }
.dvd34:not(.faceout) { width: calc(var(--d) * .83 + var(--w) * .56 + var(--spine-h) * .012); }
.dvd-row, .shelf-directing .spines { gap: calc(var(--spine-h) * .006); }

/* ---------- binders at real size: about twice a DVD case deep, so their spines come right out to the shelf's front
   edge; thicker spines; still reaching up to the shelf above ---------- */
.script-row { margin-bottom: calc(var(--case-depth-px) - var(--shelf-depth)) !important; gap: calc(var(--spine-h) * .006); }
.script-flat { width: calc(var(--spine-h) * .27); height: calc(var(--tall) + var(--shelf-depth) - var(--case-depth-px)); }
.ss-label { width: 62%; font-size: calc(var(--spine-h) * .068); }
.ss-brad { width: calc(var(--spine-h) * .055); }
.script-flat::before { top: calc(var(--spine-h) * -.05); height: calc(var(--spine-h) * .05); }
.script-flat::after { top: calc(var(--spine-h) * -.05); right: calc(var(--spine-h) * -.04); width: calc(var(--spine-h) * .04); }

/* ---------- binders and the presentation cover share one pinning: bottoms at the shelf's front edge, tops just under
   the shelf above (their lit top edges included), and the shelf front above is always drawn in front of them ---------- */
.room { --front-tall: calc(var(--tall) + var(--shelf-depth) - var(--case-depth-px) - var(--spine-h) * .06); }
.script-flat { height: var(--front-tall); }
.script-row, .script-feature { margin-bottom: calc(var(--case-depth-px) - var(--shelf-depth)) !important; }
.script-feature { width: calc(var(--front-tall) * 8.5 / 11); }
.board { position: relative; z-index: 8; }
.grp-tag { z-index: 9; }

/* ---------- only the clear plastic is see-through: the tray has a solid base, the printed inserts are crisp and
   opaque, and nothing behind the case shows through it ---------- */
.inside-page:has(.cd-tray) { background: #0e0e10 !important; opacity: 1; }
.disc-tray.cd-tray::before { inset: 1.2cqw; filter: none !important; opacity: 1; }
.disc-tray.cd-tray::after { background:
    radial-gradient(circle at 50% 46%, transparent 0 30.2cqw, rgba(255,255,255,.28) 30.6cqw 31.2cqw, transparent 31.8cqw),
    linear-gradient(118deg, rgba(255,255,255,.12), transparent 30%, transparent 72%, rgba(255,255,255,.05)) !important; }
.viewer.shelf-cd .big-case, .viewer.shelf-cd .face, .viewer.shelf-cd .inside-page, .viewer.shelf-cd .cd-art,
.viewer.shelf-cd .booklet-cover, .viewer.shelf-cd .tray-disc-art { opacity: 1; }
.cd-booklet .cd-art, .cd-front .cd-art { background-color: #111; }
.viewer.shelf-cd .bk-scenes { display: none; }  /* the disc plays the whole season in order; no list over the booklet */

/* ---------- items are solid: everything that belongs to the shelf itself (the wall-line shadow, the shelf top, the
   LED wash) stays BEHIND the things standing on it, never drawn across them ---------- */
.spines::after { z-index: 0; }
.spines::before { z-index: 0; }
.spines > * { position: relative; z-index: 1; }
.shelf-writing .spines > .shelf-group { z-index: 1; }
.board { box-shadow: 0 2px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,250,235,.55); }   /* no long shadow spilling over the shelf below */
.brownie-prop img { filter: saturate(.85) brightness(.95) drop-shadow(-4px 3px 4px rgba(0,0,0,.45)); }
/* the bottom shelf's groups don't form their own layer, so their plaques can sit on top of the shelf front;
   the things inside them still stand in front of the shelf's lines */
.shelf-writing .spines > .shelf-group { z-index: auto; }
.script-row, .script-feature, .fan-producing, .grp-theater .theatre { position: relative; z-index: 1; }
/* look down onto the cases a little more, so each top reads as deep as its spine is wide */
.dvd34:not(.faceout) { perspective-origin: 50% var(--eye-y, -170%); }
.dvd34:not(.faceout) { --eye-y: -120%; }
/* with the higher eye line, a case's back bottom corner sits .224 units above its front corner (measured) */
.room { --case-depth-px: calc(var(--spine-h) * .224); --shelf-depth: calc(var(--spine-h) * .34); }

/* the booklet keeps its cover when you point at it: it lifts a touch and gets a thin outline, it never greys out */
.booklet-thumb.booklet-cover:hover, .booklet-thumb.booklet-cover:focus-visible {
  background: linear-gradient(transparent 45%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.5) 100%), var(--art, linear-gradient(#222, #111)) var(--art-pos, center) / var(--art-size, cover) no-repeat, #151517; }
.booklet-thumb.booklet-cover.cd-booklet:hover, .booklet-thumb.booklet-cover.cd-booklet:focus-visible { background: #111; }

/* binder tops: you look down onto the page edges, a stack of paper between the two card-stock covers */
.script-flat::before {
  top: calc(var(--spine-h) * -.09); height: calc(var(--spine-h) * .09); transform: skewX(-42deg); transform-origin: bottom left; filter: none;
  background:
    linear-gradient(90deg, var(--stock, #f4efe2) 0 9%, transparent 9% 91%, var(--stock, #f4efe2) 91%),
    repeating-linear-gradient(90deg, #fbfaf6 0 1px, #d9d6cd 1px 2px, #f1efe8 2px 3px),
    linear-gradient(rgba(255,250,235,.25), rgba(0,0,0,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2); }
.script-flat::after { top: calc(var(--spine-h) * -.09); }
/* the same pinning at every width (an old phone rule had overridden the shelf spacing) */
.spines { padding-bottom: calc(var(--shelf-depth) - var(--case-depth-px)) !important; margin-bottom: 0 !important; }
/* leave room above the binders for their page-stack tops, under the shelf front above */
.script-flat { height: calc(var(--front-tall) - var(--spine-h) * .05); }

/* Something Still Here's ledge sits higher, clear of Ex Pat on its stand */
.shelf-cds .cd-wrap:nth-child(1) { bottom: calc(var(--spine-h) * .64); }

/* DVD tops read as two pieces: the back shell (far half, darker) and the front shell (near half, catching the light),
   with the dark seam between them */
.dvd34 .face.top { background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0 1px, transparent 1px calc(50% - 1px), #050506 calc(50% - 1px) calc(50% + 1px), rgba(255,255,255,.35) calc(50% + 1px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(180deg, transparent 0 50%, rgba(255,255,255,.16) 50%),
    linear-gradient(90deg, #1f1f24, #47474f 30%, #303036 70%, #18181b) !important; }

/* Featured covers are straight on: no hinge shading or gloss band down the left edge */
.dvd34.faceout .face.front { border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.18) !important; }
.dvd34.faceout .face.front::after { background: linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.06) 55%, transparent 70%); }

/* stickers placed off the names and onto the art */
.dvd34.faceout[data-dvd="chapter13"] .spine-sticker { top: 11%; }
.dvd34.faceout[data-dvd="thegameseries"] .spine-sticker { left: auto; right: 2%; top: 43.5%; }  /* right of Matt's head, just under the drag queen's face */

/* "Featured in September" stays on one line */
#tag-featured { white-space: nowrap; }

/* bottom shelf: Producing | Writing | Theater — Writing dead center, the other two the same distance from it */
.shelf-writing .spines { grid-template-columns: 1fr auto 1fr; column-gap: calc(var(--spine-h) * .1) !important; }
.shelf-writing .grp-producing { justify-self: end; }
.shelf-writing .grp-writing { justify-self: center; }
.shelf-writing .grp-theater { justify-self: start; }
.grp-writing .script-row { margin-left: calc(var(--spine-h) * .04); }
.fan-producing > .dvd34 + .dvd34 { margin-left: calc(var(--spine-h) * -.05); }
.shelf-writing .grp-producing { margin-right: calc(var(--spine-h) * -.035); }  /* the last cover angles back inside its box */

/* phones: the bottom shelf scrolls sideways, which would clip its plaques — let the scroll box reach down over the board */
@media (max-width: 700px) {
  .shelf-writing .spines { padding-bottom: calc(var(--shelf-depth) - var(--case-depth-px) + 48px) !important; margin-bottom: -48px !important; }
}

/* Playbills: mirror the Producing DVDs, cheated halfway to straight on (28deg) — page edges toward you on the right */
.grp-theater .playbill-stand { width: calc(var(--pbw) * .883 + 2px); perspective: calc(var(--spine-h) * 6.3); perspective-origin: 50% -120%; }
.grp-theater .pb-3d { width: var(--pbw); margin-left: calc(var(--pbw) * -.117 + 2px); transform-origin: right center; transform: rotateY(-28deg) !important; }
.grp-theater .playbill-stand:hover .pb-3d, .grp-theater .playbill-stand:focus-visible .pb-3d { transform: translateY(-12px) rotateY(-14deg) !important; }
/* the clear stand's lip turns with the Playbill it holds */
.grp-theater .playbill-stand::before { display: none; }
.grp-theater .pb-3d::before { content: ""; position: absolute; z-index: 2; left: -5%; right: -5%; bottom: -3px; height: 9px; border-radius: 2px; pointer-events: none;
  transform: translateZ(4px);
  background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.1) 60%, rgba(255,255,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.35); }
.shelf-writing .grp-theater { margin-left: calc(var(--spine-h) * .2206); }  /* Theater plaque sits as far from Writing as Producing does */

/* Something Still Here's raised mini shelf is the same clear acrylic stand as Ex Pat's, same size */
.shelf-cds .cd-wrap:nth-child(1) { padding-bottom: 0; }
.shelf-cds .cd-wrap:nth-child(1)::before { left: -5%; right: -5%; bottom: -3px; height: 8px; border-radius: 2px; backdrop-filter: none;
  background: linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.1) 60%, rgba(255,255,255,.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.35); }

/* As seen on VH1: off Leah's face, down on the right between the title and the credit (it may nip the bottom of "Still") */
.cd-sticker { top: 55%; bottom: auto; right: 3%; width: 24cqw; padding: 1.6cqw; font-size: 4.3cqw; }
.cd-front .cd-sticker, .cd-booklet .cd-sticker { font-size: 2.6cqw; }
/* on the square booklet the title runs on one line: the sticker sits just right of it, beside the credit */
.cd-booklet .cd-sticker { top: auto; bottom: 3%; right: 3%; width: 22cqw; font-size: 2.4cqw; }

/* gold-foil starburst stickers: the stamped words about 15% bigger everywhere they appear */
.spine-sticker { font-size: calc(var(--w) * .069); }
.sticker { font-size: 6.4cqw; }
.cd-sticker { font-size: 4.95cqw; }
.cd-front .cd-sticker { font-size: 3cqw; }
.cd-booklet .cd-sticker { font-size: 2.75cqw; }
.variety-sticker small { font-size: 2.2cqw; } .variety-sticker b { font-size: 6.4cqw; }
.sf-cover .variety-sticker small { font-size: 1.95cqw; } .sf-cover .variety-sticker b { font-size: 6.2cqw; }
.script-page .variety-sticker small { font-size: 2.4cqw; } .script-page .variety-sticker b { font-size: 6.2cqw; }
.wn-accolades .variety-sticker small, .wtm-titlepage .variety-sticker small { font-size: 2.65cqw; }
.wn-accolades .variety-sticker b, .wtm-titlepage .variety-sticker b { font-size: 6.9cqw; }

/* channel-change static: a canvas of real snow (drawn in home.js) */
.tv-screen.static::after { content: none; }
.tv-snow { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; display: none; pointer-events: none; border-radius: inherit; }
.tv-screen.static .tv-snow { display: block; }

/* ---------- the Silver Play Button, picked up off the shelf ---------- */
.award-viewer { position: fixed; inset: 0; z-index: 40; }
.award-viewer[hidden] { display: none; }
.av-backdrop { position: absolute; inset: 0; background: rgba(8, 5, 3, .82); opacity: 0; transition: opacity .4s; }
.award-viewer.open .av-backdrop { opacity: 1; }
.av-close { opacity: 0; transition: opacity .3s; }
.award-viewer.open .av-close { opacity: 1; }
.av-pos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: none; }
.av-stage { position: relative; width: min(340px, 78vw, calc((100vh - 140px) * 330 / 390)); aspect-ratio: 330 / 390; pointer-events: auto; transform-origin: center; }
.av-plate { display: block; width: 100%; height: 100%; border-radius: 2px; box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.4); }
/* the button sits right over the plate's silver play button */
.av-play { position: absolute; left: 23%; top: 19%; width: 54%; height: 31%; border: 0; border-radius: 22%; background: transparent; cursor: pointer;
  transition: box-shadow .2s, background .2s; }
.av-play:hover, .av-play:focus-visible { outline: none; background: rgba(255,255,255,.12); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 24px rgba(255,60,60,.55); }
.av-play:active { background: rgba(0,0,0,.08); }
.award.held { visibility: hidden; }

/* the Brownie: no sideways halo or flat oval — just a tight contact shadow that follows its own angled bottom edge */
.brownie-prop img { filter: saturate(.85) brightness(.95) drop-shadow(0 1.5px 1px rgba(0,0,0,.6)) drop-shadow(0 3px 3px rgba(0,0,0,.22)); }
.brownie-prop::after { content: none; }

/* no colored bands on the DVD spines (they were the shelf colors: pink on Directing, mint on Producing) — plain black spines */
.dvd34 .spine-band, .viewer .face.spine .spine-band { background: transparent !important; animation: none !important; }

/* longer lens on the spine-out DVDs (and the Playbills that mirror them): the camera is 3x farther back and 3x higher,
   so the tops show just as much but the bottom edges climb far less steeply */
.dvd34:not(.faceout) { perspective: calc(var(--spine-h) * 18.9); --eye-y: -360%; }
.grp-theater .playbill-stand { perspective: calc(var(--spine-h) * 18.9); perspective-origin: 50% -360%; }
/* re-measured for the longer lens: a case's far bottom corner now rises .19 spine units; the front stays the same distance from the lip */
.room { --case-depth-px: calc(var(--spine-h) * .19); --shelf-depth: calc(var(--spine-h) * .306); }

/* real DVD case proportions (190 x 135 x 14 mm): the spine is 14/190 of the height, with rounded ends like the molded case */
.dvd34:not(.faceout) { --d: calc(var(--h) * .074); --round: calc(var(--d) * .3); }
.dvd34:not(.faceout) .face.spine { border-radius: var(--round); }
.dvd34:not(.faceout) .face.top { border-radius: var(--round); }
.dvd34:not(.faceout) .face.front { border-radius: calc(var(--round) * .6) 5px 5px calc(var(--round) * .6); }
.dvd34:not(.faceout) .face.spine .spine-title { font-size: var(--fit, calc(var(--d) * .64)); }
.dvd34:not(.faceout) .face.spine .spine-logo { font-size: calc(var(--d) * .36); padding: 0; }
.room { --case-depth-px: calc(var(--spine-h) * .184); --shelf-depth: calc(var(--spine-h) * .3); }  /* re-measured for the real-thickness cases */
/* re-balanced for the thinner cases: Producing's last cover sits .1 from Writing, Theater's plaque mirrors Producing's */
.shelf-writing .grp-producing { margin-right: calc(var(--spine-h) * -.0188); }
.shelf-writing .grp-theater { margin-left: calc(var(--spine-h) * .1449); }

/* spine and front are one piece of molded plastic: no outline, rim, shadow band or rounding where they meet,
   the spine's shading runs into the front, and each face overlaps the joint by a hair so no seam can show */
.dvd34:not(.faceout) .face.spine { width: calc(var(--d) + 1px); border-radius: var(--round) 0 0 var(--round);
  background:
    linear-gradient(rgba(255,240,220,.22), rgba(255,240,220,0) 22%),
    linear-gradient(90deg, #000 0, #19191c 9%, #45454c 30%, #2b2b30 55%, #1f1f23 85%, #1c1c20 100%) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.dvd34:not(.faceout) .face.front { left: -1px; border-radius: 0 5px 5px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset -1px 0 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.5), inset 0 6px 10px -6px rgba(255,240,220,.25) !important;
  border-left: calc(var(--d) * .12) solid #1c1c20; box-sizing: border-box; }
.dvd34:not(.faceout) .face.front::after { background: linear-gradient(108deg, transparent 0 6%, rgba(255,255,255,.06) 14%, transparent 30%); }
.dvd34:not(.faceout):focus-visible .face.front { box-shadow: 0 0 0 3px var(--directing) !important; }
.dvd34:not(.faceout).playing .face.front { box-shadow: 0 0 0 2px var(--directing), 0 0 22px var(--directing) !important; }

/* face-out pieces on the Featured shelf (covers and the Silver Play Button) share one shadow: a tight contact line where they
   meet the shelf, and a soft shadow thrown back onto the wall around their sides and top — nothing below, so nothing floats */
.room { --stand-shadow: 0 1px 1px rgba(0,0,0,.6), 0 -3px 14px rgba(0,0,0,.5), 0 0 4px rgba(0,0,0,.35); }
.game-set .award-plate { box-shadow: var(--stand-shadow), inset 0 0 0 1px rgba(255,255,255,.4); }
.dvd34.faceout .face.front { box-shadow: var(--stand-shadow), 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.18) !important; }
.dvd34.faceout:focus-visible .face.front { box-shadow: var(--stand-shadow), 0 0 0 3px var(--directing) !important; }
.dvd34.faceout.playing .face.front { box-shadow: 0 0 0 2px var(--directing), 0 0 22px var(--directing) !important; }

/* ---------- screenplay binders: 3D poly binders, spine out and angled like the DVDs, covers running from the lip to the wall ---------- */
.script-flat.binder3d {
  --t: calc(var(--spine-h) * .27);          /* spine thickness */
  --bw: calc(var(--spine-h) * 1.08);        /* cover depth: shelf lip to back wall */
  --sliver: calc(var(--spine-h) * .03);     /* how much of each side cover shows before the next spine */
  display: block; width: calc(var(--t) * .970 + var(--sliver)) !important; padding: 0; border-radius: 0;
  background: none !important; box-shadow: none !important;
  perspective: calc(var(--spine-h) * 18.9); perspective-origin: 50% calc(100% - var(--spine-h) * 5.27); }
.script-flat.binder3d::before, .script-flat.binder3d::after { content: none !important; }
.script-flat.binder3d:last-child { margin-right: calc(var(--bw) * .242 - var(--sliver)); }
.script-flat.binder3d:hover, .script-flat.binder3d:focus-visible { box-shadow: none !important; }
.script-flat.binder3d:focus-visible .bd-spine { box-shadow: 0 0 0 2px var(--writing); }
.bd-case { position: absolute; left: 0; top: 0; height: 100%; width: var(--bw); transform-style: preserve-3d;
  transform: translateX(calc(var(--t) * .485)) rotateY(76deg); transform-origin: 0 50%; pointer-events: none; }
.bd-face { position: absolute; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bd-side { inset: 0; transform: translateZ(calc(var(--t) / 2)); border-radius: 0 3px 3px 0;
  background: linear-gradient(rgba(var(--led), .16), transparent 25%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 78%, #000), var(--bc) 12%, color-mix(in srgb, var(--bc) 88%, #fff) 60%, var(--bc) 92%, color-mix(in srgb, var(--bc) 85%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.bd-spine { left: 0; top: 0; height: 100%; width: var(--t); box-sizing: border-box; transform-origin: left center;
  transform: translateZ(calc(var(--t) / -2)) rotateY(-90deg);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--spine-h) * .07) 0;
  background: linear-gradient(rgba(var(--led), .22), transparent 22%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 62%, #000) 0, var(--bc) 16%, color-mix(in srgb, var(--bc) 80%, #fff) 42%, var(--bc) 70%, color-mix(in srgb, var(--bc) 75%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.bd-spine .ss-label { flex: 1; width: 58%; margin: calc(var(--spine-h) * .05) 0; color: #1b1b1b;
  background: linear-gradient(90deg, rgba(255,255,255,.35), transparent 30%), #fbfaf6; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.bd-rivet { flex: 0 0 auto; width: calc(var(--t) * .17); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #6a6e74, #1d1f22 55%, #0b0c0d); box-shadow: 0 1px 0 rgba(255,255,255,.25), inset 0 1px 2px rgba(0,0,0,.6); }
/* from above: the back cover, the stack of page edges, the front cover — covers only a hair thicker than a few sheets */
.bd-top { left: 0; top: 0; width: 100%; height: var(--t); transform-origin: top center; transform: translateZ(calc(var(--t) / -2)) rotateX(90deg);
  background:
    linear-gradient(180deg, var(--bc) 0 5%, transparent 5% 95%, var(--bc) 95%),
    linear-gradient(90deg, var(--bc) 0 2%, transparent 2% 97%, var(--bc) 97%),
    repeating-linear-gradient(180deg, #fbfaf6 0 1px, #d9d5cb 1px 2px, #f1eee6 2px 3px); }

/* the binders tuck slightly over the edge of the presentation cover to make room for their angle */
.grp-writing .script-row { margin-left: calc(var(--spine-h) * -.03); position: relative; z-index: 2; }
/* the first binder tucks over the presentation cover's right edge: its Variety sticker sits in by the same amount so it stays in view */
.script-feature .sf-cover .variety-sticker { right: 5cqw; }

/* ---------- the binder off the shelf: a closed binder (spine, front cover, page edges) that swings open on its ring rail ---------- */
.viewer.shelf-script .viewer-stage { --W: min(460px, 46vw, calc((100vh - 120px) / 1.294)); --H: calc(var(--W) * 1.294); --d: calc(var(--W) * .25);
  transition: transform .75s cubic-bezier(.3,.6,.2,1); }
.viewer.shelf-script.bopen .viewer-stage { transform: translateX(50%); }   /* open, the spread is centred */
.viewer.shelf-script .face.front { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; }
/* closed, the big case is the binder itself: its spine, and the page edges along the open side */
.face.spine .binder-spine { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 7% 0; box-sizing: border-box;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 62%, #000) 0, var(--bc) 16%, color-mix(in srgb, var(--bc) 80%, #fff) 42%, var(--bc) 70%, color-mix(in srgb, var(--bc) 75%, #000) 100%); }
.face.spine .binder-spine .bd-rivet { width: 17%; }
.face.spine .binder-spine .ss-label { display: flex; flex: 1; width: 58%; margin: 5% 0; font-size: calc(var(--d) * .2); }
.viewer.shelf-script .face.edge { background: linear-gradient(90deg, var(--bc) 0 5%, transparent 5% 95%, var(--bc) 95%), repeating-linear-gradient(90deg, #fbfaf6 0 1px, #d9d5cb 1px 2px) !important; }
.binder-open { position: absolute; inset: 0; perspective: 2600px; }
/* inside the back cover: the spine strip down the left, the ring rail on it, the pages threaded on the rings */
.bn-back { position: absolute; inset: 0; border-radius: 0 7px 7px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 70%, #000) 0, var(--bc) 4%, color-mix(in srgb, var(--bc) 92%, #fff) 60%, var(--bc));
  box-shadow: 0 20px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.bn-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 55%, #000), color-mix(in srgb, var(--bc) 75%, #000) 50%, color-mix(in srgb, var(--bc) 60%, #000));
  box-shadow: inset -1px 0 0 rgba(0,0,0,.35), inset 1px 0 0 rgba(0,0,0,.35); }
.bn-stack { position: absolute; left: 11%; right: 3%; top: 3%; bottom: 3%; background: #e9e6de; transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #d6d2c8, 2px 2px 0 #ece9e1, 3px 3px 0 #d6d2c8, 4px 4px 3px rgba(0,0,0,.25); }
.bn-page { position: absolute !important; left: 11%; right: 3%; top: 3%; bottom: 3%; container-type: inline-size; box-sizing: border-box;
  padding: 22% 9% 6% 15% !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; }
.bn-hole { position: absolute; left: 4cqw; width: 4.2cqw; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--bc) 80%, #000);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5); transform: translateY(-50%); }
.bn-hole:nth-child(1) { top: 15%; } .bn-hole:nth-child(2) { top: 50%; } .bn-hole:nth-child(3) { top: 85%; }
/* the ring mechanism: a steel rail with rounded ends on the spine strip; three rings arc from it through the holes */
.bn-rail { position: absolute; left: 1.4%; width: 6.2%; top: 6%; bottom: 6%; border-radius: 99px; z-index: 2;
  background: linear-gradient(90deg, #5f646b, #d9dde2 22%, #f7f8fa 40%, #a9aeb6 64%, #6b7078 100%);
  box-shadow: 1px 2px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
.bn-ring { position: absolute; left: 30%; width: 330%; aspect-ratio: 2.6; border-radius: 50%; box-sizing: border-box; transform: translateY(-50%);
  border: 2.6px solid #c9ced4; border-color: #f7f8fa #8f959d #60656c #e1e5ea; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.4)); }
/* ring centres line up with the holes: rail runs 6%–94% of the page height, holes sit 15/50/85% down the page (3%–97%) */
.bn-ring:nth-child(1) { top: 12.6%; } .bn-ring:nth-child(2) { top: 50%; } .bn-ring:nth-child(3) { top: 87.4%; }
/* the front cover: hinged at the spine, closed over the pages; open, it lies flat to the left showing its inside and sleeve */
.bn-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; z-index: 3;
  transition: transform .75s cubic-bezier(.3,.6,.2,1); }
.viewer.shelf-script.bopen .bn-cover { transform: rotateY(-180deg); }
.bn-out, .bn-in { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bn-out { border-radius: 0 7px 7px 0;
  background: linear-gradient(rgba(255,255,255,.14), transparent 30%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 72%, #000) 0, var(--bc) 5%, color-mix(in srgb, var(--bc) 90%, #fff) 60%, var(--bc));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.bn-in { transform: rotateY(180deg); border-radius: 7px 0 0 7px; container-type: inline-size;
  background: linear-gradient(270deg, color-mix(in srgb, var(--bc) 70%, #000) 0, var(--bc) 4%, color-mix(in srgb, var(--bc) 92%, #fff) 55%, var(--bc));
  box-shadow: 0 20px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
/* the clear sleeve on the inside cover, the photo slipped in from the top */
.bn-sleeve { position: absolute; left: 6%; right: 6%; top: 5%; bottom: 5%; }
.bn-photo { position: absolute; left: 12%; right: 12%; top: 14%; transform: rotate(-2.5deg); background: #fff; padding: 2.4cqw 2.4cqw 7cqw;
  box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.bn-photo img { display: block; width: 100%; height: auto; }
.bn-pocket { position: absolute; left: 0; right: 0; top: 34%; bottom: 0; border-radius: 0 0 4px 4px; pointer-events: none;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(115deg, rgba(255,255,255,.34) 0 8%, rgba(255,255,255,.08) 22%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.18) 90%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) { .viewer.shelf-script .viewer-stage, .bn-cover { transition: none; } }
/* phones: a bigger page, slid over so it fits; the inside cover and its photo show to its left */
@media (max-width: 700px) {
  .viewer.shelf-script .viewer-stage { --W: 62vw; --H: min(calc(var(--W) * 1.5), calc(100vh - 150px)); }
  .viewer.shelf-script.bopen .viewer-stage { transform: translateX(28%); }
  .bn-page { padding: 13% 7% 9% 16% !important; }
  .bn-page .tp-title { font-size: clamp(13px, 6cqw, 22px); }
  .bn-page .tp-by, .bn-page .tp-name { font-size: clamp(9px, 3.6cqw, 14px); }
}

/* ---------- binders, more real: pebbled poly with a soft sheen, standing a little crooked, half full ---------- */
.room, .viewer { --poly-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .26 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --poly-pebble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .16 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)'/%3E%3C/svg%3E"); }
/* cover: matte poly, darker toward the hinge, a broad soft sheen, rounded outer corners and a molded rim */
.bd-side { border-radius: 0 calc(var(--spine-h) * .03) calc(var(--spine-h) * .03) 0;
  background: var(--poly-grain), var(--poly-pebble),
    linear-gradient(rgba(var(--led), .14), transparent 22%),
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 46%, transparent 64%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 70%, #000), var(--bc) 10%, var(--bc) 85%, color-mix(in srgb, var(--bc) 82%, #000)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.3), inset -1px 0 0 rgba(255,255,255,.18); }
/* spine: the rounded poly spine, lit along its crown */
.bd-spine { background: var(--poly-grain), var(--poly-pebble),
    linear-gradient(rgba(var(--led), .2), transparent 20%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 58%, #000) 0, color-mix(in srgb, var(--bc) 88%, #000) 10%, var(--bc) 24%,
      color-mix(in srgb, var(--bc) 78%, #fff) 44%, var(--bc) 62%, color-mix(in srgb, var(--bc) 85%, #000) 86%, color-mix(in srgb, var(--bc) 62%, #000) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35); }
.bd-spine .ss-label { box-shadow: 0 0 0 1px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.25); border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,.3)), #f7f5ef; }
.bd-rivet { background: radial-gradient(circle at 40% 38%, #d4d8dd 0 14%, #6c7178 32%, #23252a 60%, #0d0e10);
  box-shadow: 0 0 0 calc(var(--t) * .02) color-mix(in srgb, var(--bc) 60%, #000), inset 0 1px 1px rgba(255,255,255,.25); }
/* from above: two thin cover edges, a dark gap, and a part-filled stack of pages sitting a little low, back against the rings */
.bd-top { background:
    linear-gradient(180deg, color-mix(in srgb, var(--bc) 90%, #fff) 0 5%, rgba(0,0,0,.6) 5% 8%, transparent 8% 92%, rgba(0,0,0,.6) 92% 95%, color-mix(in srgb, var(--bc) 90%, #fff) 95%),
    linear-gradient(180deg, transparent 0 14%, rgba(0,0,0,0) 14% 58%, #19191c 58%),
    linear-gradient(90deg, #19191c 0 6%, transparent 6% 95%, #19191c 95%),
    repeating-linear-gradient(180deg, #f7f5ef 0 1px, #cfcbc1 1px 2px, #ece9e1 2px 3px),
    #19191c !important; }
/* standing imperfectly: each one leans and turns a touch differently */
.script-flat.binder3d { transform-origin: 50% 100%; rotate: var(--lean, 0deg); }
.script-flat.binder3d .bd-case { transform: translateX(calc(var(--t) * .485)) rotateY(var(--bturn, 76deg)); }
.script-flat.binder3d:nth-child(1) { --lean: -.5deg; --bturn: 78deg; }
.script-flat.binder3d:nth-child(2) { --lean: .35deg; --bturn: 75deg; }
.script-flat.binder3d:nth-child(3) { --lean: 0deg;   --bturn: 77.5deg; }
.script-flat.binder3d:nth-child(4) { --lean: .7deg;  --bturn: 74deg; }
.script-flat.binder3d:nth-child(5) { --lean: -.3deg; --bturn: 76.5deg; }
.script-flat.binder3d:nth-child(6) { --lean: .25deg; --bturn: 78.5deg; }
.script-flat.binder3d:nth-child(7) { --lean: 1.6deg; --bturn: 72deg; }   /* the last one sags against its neighbour */

/* ---------- the open binder: textured covers, a domed steel rail with rivets and levers, polished rings ---------- */
.bn-out { background: var(--poly-grain), var(--poly-pebble), linear-gradient(115deg, transparent 25%, rgba(255,255,255,.16) 48%, transparent 66%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 70%, #000) 0, var(--bc) 5%, var(--bc) 92%, color-mix(in srgb, var(--bc) 80%, #000)) !important; }
.bn-in { background: var(--poly-grain), var(--poly-pebble), linear-gradient(245deg, transparent 30%, rgba(255,255,255,.12) 52%, transparent 70%),
    linear-gradient(270deg, color-mix(in srgb, var(--bc) 62%, #000) 0, var(--bc) 5%, var(--bc) 94%, color-mix(in srgb, var(--bc) 80%, #000)) !important; }
.bn-back { background: var(--poly-grain), var(--poly-pebble), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 52%, transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 62%, #000) 0, var(--bc) 5%, var(--bc) 94%, color-mix(in srgb, var(--bc) 80%, #000)) !important; }
.bn-strip { background: var(--poly-grain), linear-gradient(90deg, color-mix(in srgb, var(--bc) 50%, #000), color-mix(in srgb, var(--bc) 72%, #000) 50%, color-mix(in srgb, var(--bc) 55%, #000)) !important; }
.face.spine .binder-spine { background: var(--poly-grain), var(--poly-pebble),
    linear-gradient(90deg, color-mix(in srgb, var(--bc) 58%, #000) 0, var(--bc) 22%, color-mix(in srgb, var(--bc) 78%, #fff) 44%, var(--bc) 64%, color-mix(in srgb, var(--bc) 62%, #000) 100%); }
.bn-rail { left: 1.2%; width: 6.6%; border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 14%, transparent 86%, rgba(0,0,0,.4)),
    linear-gradient(90deg, #6a7078 0, #b9bec5 12%, #f4f6f8 32%, #ffffff 40%, #c6cbd1 58%, #8d939b 78%, #5b6168 100%);
  box-shadow: 2px 3px 5px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(0,0,0,.35); }
/* rivets fixing the rail to the spine, near each end */
.bn-rail::before, .bn-rail::after { content: ""; position: absolute; left: 50%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #ffffff 0 12%, #c3c8ce 34%, #757b83 70%, #4d5258); box-shadow: 0 1px 1px rgba(0,0,0,.45); }
.bn-rail::before { top: 4%; } .bn-rail::after { bottom: 4%; }
/* opening levers at the ends of the rail */
.bn-cover ~ .bn-lever, .bn-back::before, .bn-back::after { content: ""; position: absolute; left: 2.1%; width: 4.8%; height: 3.6%; border-radius: 40% 40% 20% 20%; z-index: 2;
  background: linear-gradient(90deg, #6a7078, #e9ecef 40%, #a2a8b0 70%, #5f656c); box-shadow: 1px 2px 3px rgba(0,0,0,.45); }
.bn-back::before { top: 3%; } .bn-back::after { bottom: 3%; transform: scaleY(-1); }
.bn-ring { position: absolute; left: 35%; width: 300%; height: auto; aspect-ratio: 100 / 26; transform: translateY(-50%); border: 0 !important;
  border-radius: 0; filter: none; overflow: visible; }

/* ---------- Where the Mountain Women Sing: a binder at the end of the row, its poster in the front clear pocket ---------- */
.grp-writing .script-row { margin-left: 0; }
.script-flat.binder3d:nth-child(7) { --lean: .4deg; --bturn: 75.5deg; }
.script-flat.binder3d:nth-child(8) { --lean: -.8deg; --bturn: 62deg; }   /* the end of the row, turned a little more open */
.script-flat.binder3d:last-child { margin-right: calc(var(--bw) * cos(var(--bturn)) - var(--sliver) - var(--spine-h) * .045); }
.script-flat.binder3d.has-poster .ss-label { white-space: normal; text-align: center; font-size: calc(var(--spine-h) * .05); line-height: 1.12; padding: 6px 2px; }
.bd-pocket, .bn-pocket-front { position: absolute; inset: 4.5% 4% 4.5% 6%; border-radius: 3px;
  background: linear-gradient(112deg, rgba(255,255,255,.42) 0 7%, rgba(255,255,255,.08) 16%, transparent 32%, transparent 64%, rgba(255,255,255,.2) 74%, transparent 84%),
    var(--poster) center / cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 3px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.12); }
.bd-pocket { filter: brightness(1.05) saturate(.95); }

/* ---------- inside the binder: glossy vinyl, pages hard against the rail, rings over the page edge and down into the holes ---------- */
.bn-in, .bn-back {
  --gloss: linear-gradient(104deg, transparent 0 14%, rgba(255,255,255,.34) 18%, rgba(255,255,255,.07) 26%, transparent 36%, transparent 60%, rgba(255,255,255,.2) 66%, rgba(255,255,255,.04) 72%, transparent 80%),
    radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.22), transparent 55%); }
.bn-in { background: var(--gloss), linear-gradient(270deg, color-mix(in srgb, var(--bc) 60%, #000) 0, color-mix(in srgb, var(--bc) 92%, #000) 5%, var(--bc) 30%, color-mix(in srgb, var(--bc) 90%, #000) 100%) !important; }
.bn-back { background: var(--gloss), linear-gradient(90deg, color-mix(in srgb, var(--bc) 60%, #000) 0, color-mix(in srgb, var(--bc) 92%, #000) 5%, var(--bc) 30%, color-mix(in srgb, var(--bc) 90%, #000) 100%) !important; }
.bn-strip { background: linear-gradient(90deg, color-mix(in srgb, var(--bc) 45%, #000), color-mix(in srgb, var(--bc) 70%, #000) 50%, color-mix(in srgb, var(--bc) 50%, #000)) !important; }
.bn-stack, .bn-page { left: 9.6%; }
.bn-rail { z-index: auto; }
.bn-rings { position: absolute; inset: 0; pointer-events: none; }
.bn-ring { position: absolute !important; left: 4.12%; width: 9.6%; height: 3.8%; aspect-ratio: auto; transform: translateY(-50%); overflow: visible; }
.bn-ring:nth-child(1) { top: 17.1%; } .bn-ring:nth-child(2) { top: 50%; } .bn-ring:nth-child(3) { top: 82.9%; }
/* holes punched just in from the page edge, right where the rings come down */
.bn-hole { left: calc(4.4% - 2.1%) !important; width: 4.2% !important; transform: translateY(-50%);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bc) 55%, #000), color-mix(in srgb, var(--bc) 80%, #000)) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.7) !important; }
.bn-hole:nth-child(1) { top: 15% !important; } .bn-hole:nth-child(2) { top: 50% !important; } .bn-hole:nth-child(3) { top: 85% !important; }
/* the laurels and Variety sticker in the inside sleeve */
.bn-accolades { position: absolute; left: 8%; right: 8%; top: 36%; }
.bn-accolades .accolades { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw 7cqw; padding: 0 4cqw; }
.bn-accolades .ls-text { font-size: 2.6cqw; }
.bn-accolades .variety-sticker { position: absolute; left: auto; right: -2cqw; top: -26cqw; width: 30cqw; transform: rotate(8deg); }
.bn-accolades .variety-sticker small { font-size: 2.6cqw; } .bn-accolades .variety-sticker b { font-size: 7cqw; }
.bn-ring { height: 6.4% !important; }  /* taller loops, like real rings standing up off the rail */

/* the case flying home looks exactly like its copy on the shelf, so the hand-over doesn't show */
.big-case > .face.top { display: none; }
.viewer.homing .big-case > .face.top { display: block; left: 0; top: 0; width: 100%; height: var(--d); transform-origin: top center;
  transform: translateZ(calc(var(--d) / -2)) rotateX(90deg); border-radius: calc(var(--d) * .3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0 1px, transparent 1px calc(50% - 1px), #050506 calc(50% - 1px) calc(50% + 1px), rgba(255,255,255,.35) calc(50% + 1px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(180deg, transparent 0 50%, rgba(255,255,255,.16) 50%),
    linear-gradient(90deg, #1f1f24, #47474f 30%, #303036 70%, #18181b); }
.viewer.homing .big-case > .face.front { box-sizing: border-box; border-left: calc(var(--d) * .12) solid #1c1c20; border-radius: 0 5px 5px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset -1px 0 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.5) !important; }
.viewer.homing .big-case > .face.spine { border-radius: calc(var(--d) * .3) 0 0 calc(var(--d) * .3);
  background: linear-gradient(rgba(255,240,220,.22), rgba(255,240,220,0) 22%),
    linear-gradient(90deg, #000 0, #19191c 9%, #45454c 30%, #2b2b30 55%, #1f1f23 85%, #1c1c20 100%) !important; }
.viewer.homing .big-case > .face.spine .spine { display: flex; flex-direction: column; align-items: center; background: none; }
.viewer.homing .big-case > .face.spine .spine-title { font-size: calc(var(--d) * .64); white-space: nowrap; line-height: 1; letter-spacing: .05em; }
.viewer.homing .big-case > .face.spine .spine-band { height: calc(var(--d) / .074 * .07); }
.viewer.homing .big-case > .face.spine .spine-logo { display: block; font-size: calc(var(--d) * .36); margin-bottom: 6px; padding: 0; }
/* pulled out of its slot, a case comes toward you along the shelf (not up into the shelf above), so the one in flight
   and the copy that takes over never reach behind the shelf front */
.unit .returning { transform-origin: 50% 100%; transform: translateY(calc(var(--spine-h) * .04)) scale(1.04) !important; }

/* the disc out of its case, in the air and on the player's tray, is the same disc: same print, same clear ring, see-through hole */
.flying-disc.real, .tray-disc.real { background: none; box-shadow: none; }
.tray-disc.real::after { content: none; }
.flying-disc.real .tray-disc-art, .tray-disc.real .tray-disc-art { position: absolute; inset: 0; }
/* the disc recess fits inside the tray (front to back), so the disc sits wholly on the tray: nothing hangs past its back
   (where the slot used to slice it with a hard line) or over its front */
.tray-recess { width: auto; height: 90%; aspect-ratio: 1; flex: 0 0 auto; }

/* the Silver Play Button: a flat, straight-cut plaque — no bevel or bright rim around its edge */
.game-set .award-plate { box-shadow: var(--stand-shadow) !important; border-radius: 0; }
.av-plate { box-shadow: 0 20px 44px rgba(0,0,0,.55) !important; border-radius: 0; }
.av-play { left: 22.2%; top: 18.8%; width: 55.3%; height: 32%; }   /* over the play button in the cleaned-up photo */

/* ---------- the Silver Play Button in 3D: a thick metal plaque leaning back on the shelf, turned a touch toward The Game ---------- */
.game-set .award { perspective: calc(var(--spine-h) * 18.9); perspective-origin: 50% -360%; }
.game-set .award-3d { --t: calc(var(--spine-h) * .065); position: relative; display: block; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: rotateX(12deg) rotateY(-26deg); transition: transform .5s cubic-bezier(.3,.7,.25,1); }
.game-set .award-plate { display: block; transform: none !important; transition: none; }
.game-set .award:hover .award-3d, .game-set .award:focus-visible .award-3d { transform: translateY(-4px) rotateX(8deg) rotateY(-20deg); }
.game-set .award.playing .award-3d, .game-set .award.tilt .award-3d { transform: translateY(-6px) rotateX(-6deg) rotateY(-10deg); }
.aw-edge { position: absolute; pointer-events: none; }
/* brushed metal edges: the top catches the light, the side falls into shade */
.aw-top { left: 0; top: 0; width: 100%; height: var(--t); transform-origin: top center; transform: translateZ(calc(var(--t) * -1)) rotateX(90deg);
  background: linear-gradient(90deg, #aeb3ba, #eef0f3 30%, #ffffff 46%, #d4d8dd 70%, #a3a8af); }
.aw-right { left: 100%; top: 0; height: 100%; width: var(--t); transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(#c9cdd2, #9ba0a7 40%, #858a91 75%, #6f747b); box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
.aw-left { right: 100%; top: 0; height: 100%; width: var(--t); transform-origin: right center; transform: rotateY(-90deg);
  background: linear-gradient(#d6dade, #b4b9bf 50%, #9a9fa6); }
/* picked up, it keeps its thickness: a stepped metal edge along the side and bottom */
.av-plate { box-shadow: 1px 1px 0 #cfd3d8, 2px 2px 0 #c2c6cc, 3px 3px 0 #b5bac0, 4px 4px 0 #a9aeb4, 5px 5px 0 #9ca1a8, 6px 6px 0 #90959c, 7px 7px 0 #858a91,
  0 24px 48px rgba(0,0,0,.55) !important; }

/* ---------- every shelf front is double thickness (as the bottom one reads), with plaques twice the size ---------- */
.room { --board-h: calc(var(--spine-h) * .3); --tag-h: calc(var(--spine-h) * .21 + 4px); }
.board { height: var(--board-h); }
.unit-base { height: calc(var(--spine-h) * .03); }   /* a thin plinth, so the bottom shelf front matches the rest */
.shelf-tag { font-size: calc(var(--spine-h) * .11) !important; line-height: calc(var(--spine-h) * .16) !important;
  padding: calc(var(--spine-h) * .03) calc(var(--spine-h) * .16) calc(var(--spine-h) * .02) !important; border-width: 2px !important;
  outline-width: 2px; outline-offset: -8px; }
/* the bottom shelf's plaques hang from their groups: centre them in the thicker front */
.grp-tag { top: calc(100% + var(--shelf-depth) - var(--case-depth-px) + 3px + (var(--board-h) - 3px - var(--tag-h)) / 2) !important; }

/* ---------- laurels: no years, and more white space between the words and the wreath ---------- */
.ls-text { inset: 29% 25% 26% !important; }
.ls-text b { font-size: .95em !important; } .ls-text span { font-size: .74em !important; }
.bn-accolades .ls-text { font-size: 2.05cqw !important; }  /* small enough to sit clear of the wreath */

/* Where the Mountain Women Sing: the Variety sticker in the sleeve is the link to the article — bigger "As seen in", smaller "Variety" */
.bn-accolades a.variety-link { text-decoration: none; cursor: pointer; transition: transform .2s ease; }
.bn-accolades a.variety-link small { font-size: 3.5cqw !important; line-height: 1.05; }
.bn-accolades a.variety-link b { font-size: 5.6cqw !important; }
.bn-accolades a.variety-link:hover, .bn-accolades a.variety-link:focus-visible { transform: rotate(4deg) scale(1.06); outline: none; }
/* front-pocket posters can be framed (The Contribution shows its title and hand); only the long title's label wraps */
.bd-pocket, .bn-pocket-front { background-position: center, var(--poster-pos, center) !important; }
.script-flat.binder3d.has-poster:not([data-dvd="where-the-mountain-women-sing"]) .ss-label { white-space: nowrap; font-size: calc(var(--spine-h) * .068); padding: 4px 0; }

/* ---------- TV front panel: every key the same size with its symbol printed on it; one label over each group ---------- */
.tv-controls { align-items: flex-end; gap: 2%; }
.ctl-cluster { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ctl-label { font-family: "Oswald", var(--font); font-size: 8px; font-weight: 500; letter-spacing: .16em; line-height: 1; color: #4a4d53; white-space: nowrap; }
.ctl-keys { display: flex; align-items: center; gap: 5px; }
.tv-controls i { display: grid; place-items: center; width: 22px; height: 15px; margin: 0; border-radius: 3px; color: #3a3d42;
  background: linear-gradient(#f7f8f9, #c9ccd1); box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.12); }
.tv-controls i::before { content: none; }
.tv-controls i svg { display: block; width: 9px; height: 9px; }
.ctl-power .ctl-keys { gap: 6px; }
.ctl-power .power-led { margin: 0; }
.player-eject:disabled i { color: #8a8e95; }
@media (max-width: 640px) {
  .ctl-label { font-size: 7px; letter-spacing: .1em; }
  .tv-controls i { width: 18px; height: 13px; }
  .ctl-keys { gap: 4px; }
}

/* the power key's symbol is its light: red on standby, green while something plays, dark when switched off */
.tv-btn[data-act="power"] i { color: #ff3b30; }
.tv-btn[data-act="power"] i svg { filter: drop-shadow(0 0 1.5px #ff3b30) drop-shadow(0 0 3px rgba(255,59,48,.7)); }
.tv-area.playing .tv-btn[data-act="power"] i { color: #39e07a; }
.tv-area.playing .tv-btn[data-act="power"] i svg { filter: drop-shadow(0 0 1.5px #39e07a) drop-shadow(0 0 3px rgba(57,224,122,.7)); }
.tv-area.powered-off .tv-btn[data-act="power"] i { color: #5a1a16; }
.tv-area.powered-off .tv-btn[data-act="power"] i svg { filter: none; }

/* SCANNING, big in the top-right corner of the screen while the TV flips through its channels */
.tv-scan { position: absolute; z-index: 4; right: 5%; top: 7%; pointer-events: none; display: none;
  font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: clamp(16px, 4.2vw, 36px); letter-spacing: .1em; color: #5dff7a;
  text-shadow: 0 0 8px rgba(93,255,122,.85), 2px 2px 0 rgba(0,0,0,.85); animation: tv-scan-blink 1.1s steps(1) infinite; }
.tv-screen.scanning .tv-scan { display: block; }
@keyframes tv-scan-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tv-scan { animation: none; } }
.tv-btn[data-act="scan"][aria-pressed="true"] i { color: #1f8f45; box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 2px rgba(0,0,0,.3); background: linear-gradient(#d9dce0, #eef0f2); }
/* SCANNING: same size and type as the channel readout, in the mirror-image spot on the right */
.tv-scan { font-size: clamp(11px, 2.4vw, 20px) !important; letter-spacing: .08em; top: 7%; right: 5%;
  text-shadow: 0 0 6px rgba(93,255,122,.8), 2px 2px 0 rgba(0,0,0,.8); }

/* ---------- rounded spine ends: seen from a little above, a DVD's rounded spine shows a crescent of its top surface,
   and its bottom edge bows down in the middle like a meniscus ---------- */
.dvd34:not(.faceout) .face.spine, .viewer.homing .big-case > .face.spine { --cap: calc(var(--d) * .26);
  height: calc(100% + var(--cap)); padding-bottom: var(--cap); box-sizing: border-box; border-radius: 0 !important;
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--cap)) no-repeat,
    radial-gradient(ellipse 52% 50% at 50% 50%, #000 97%, transparent 100%) 0 100% / 100% calc(var(--cap) * 2) no-repeat;
  mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--cap)) no-repeat,
    radial-gradient(ellipse 52% 50% at 50% 50%, #000 97%, transparent 100%) 0 100% / 100% calc(var(--cap) * 2) no-repeat; }
/* the crescent of top surface across the head of the spine */
.dvd34:not(.faceout) .face.spine::before, .viewer.homing .big-case > .face.spine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--cap) * 1.1);
  pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 52% 100% at 50% 0, #55555d 0, #3d3d44 70%, #26262b 94%, rgba(0,0,0,.65) 97%, transparent 100%); }

/* plaques 12% smaller (text, padding and all), still centred in the shelf fronts */
.room { --tag-h: calc(var(--spine-h) * .1848 + 4px); }
.shelf-tag { font-size: calc(var(--spine-h) * .0968) !important; line-height: calc(var(--spine-h) * .1408) !important;
  padding: calc(var(--spine-h) * .0264) calc(var(--spine-h) * .1408) calc(var(--spine-h) * .0176) !important; }

/* plaques: full width again, 12% less tall, lettering in Goudy (Sorts Mill Goudy, a revival of Goudy Old Style), optically centred */
.room { --tag-h: calc((var(--spine-h) * .21 + 4px) * .88); }
.shelf-tag { box-sizing: border-box; height: var(--tag-h); display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 calc(var(--spine-h) * .16) !important; line-height: 1 !important;
  font-family: "Sorts Mill Goudy", "Goudy Old Style", Garamond, Georgia, serif !important; font-weight: 400 !important;
  font-size: calc(var(--spine-h) * .115) !important; letter-spacing: .2em !important; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,246,205,.7), 0 -1px 0 rgba(90,55,10,.35); -webkit-text-stroke: .25px currentColor;
  text-box: trim-both cap alphabetic; }   /* trims to the capitals so they sit dead centre */
/* letter-spacing adds space after the last letter too: pull it back so the word is centred side to side */
.shelf-tag { text-indent: .2em; }
/* bolder Goudy capitals (the face has one weight, so a fine same-colour outline thickens the strokes cleanly) */
.shelf-tag { -webkit-text-stroke: .7px currentColor; paint-order: stroke fill; text-box: none; }
/* optical centring: Goudy's capitals ride .147em above the middle of the line, so nudge them down by that much */
.shelf-tag { padding-top: .294em !important; }
/* a booklet whose cover is the poster: show the art clearly, just a thin shadow at the foot for "Open the booklet" */
.booklet-thumb.booklet-cover.poster-cover, .booklet-thumb.booklet-cover.poster-cover:hover, .booklet-thumb.booklet-cover.poster-cover:focus-visible {
  background: linear-gradient(transparent 82%, rgba(0,0,0,.7)), var(--art) center / cover, #151517 !important; }
/* on a poster cover the title is printed low, so the "Open the booklet" tab sits up in the top corner instead */
.booklet-thumb.booklet-cover.poster-cover, .booklet-thumb.booklet-cover.poster-cover:hover, .booklet-thumb.booklet-cover.poster-cover:focus-visible {
  background: linear-gradient(rgba(0,0,0,.55), transparent 16%), var(--art) center / cover, #151517 !important; }
.booklet-cover.poster-cover .bc-open { position: absolute; top: 4cqw; left: 4cqw; right: auto; bottom: auto; margin: 0; }
.booklet-cover.poster-cover .bc-open { left: 11cqw; }  /* clear of the clip that holds the booklet */

/* plaques: no inner frame line around the words; the Goudy capitals a step bolder */
.shelf-tag { outline: none !important; -webkit-text-stroke: 1.1px currentColor !important; }

/* "Behind the scenes & press" is a gold plaque like the shelves' (same size, type and centring), hung over the cork board */
.bts-wall { --spine-h: clamp(126px, calc((min(100vw, 1572px) - 32px) / 6.4), 240px); --tag-h: calc((var(--spine-h) * .21 + 4px) * .88); }
.bts-title.shelf-tag { display: flex !important; width: fit-content; max-width: 100%; margin: 0 auto 22px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,250,222,.85), inset 0 -1px 0 rgba(90,60,10,.45), 0 3px 8px rgba(0,0,0,.6); }

/* thicker shelf fronts: more wood above and below each plaque, like a heavier bookshelf */
.room { --board-h: calc(var(--spine-h) * .4); }
/* the Gallery plaque is exactly the shelf plaques' size on every screen (same scale as the shelves) */
.bts-wall { --spine-h: calc(min(calc(100vw - 32px), 1540px) / 6.4) !important; }
@media (max-width: 700px) { .bts-wall { --spine-h: calc(1290px / 6.4) !important; } }
/* phones: the bottom shelf's sideways scroll box reaches down over the whole (thicker) front, so its plaques aren't clipped */
@media (max-width: 700px) {
  .shelf-writing .spines { padding-bottom: calc(var(--shelf-depth) - var(--case-depth-px) + var(--board-h) + 6px) !important;
    margin-bottom: calc(-1 * (var(--board-h) + 6px)) !important; }
}


/* ---------- binders in your hands are the shelf binders' shape (1.15 times as tall as deep), so they hand over seamlessly ---------- */
.viewer.shelf-script .viewer-stage { --W: min(460px, 46vw, calc((100vh - 120px) / 1.1514)); --H: calc(var(--W) * 1.1514); }
@media (max-width: 700px) {
  .viewer.shelf-script .viewer-stage { --W: 70vw; --H: calc(var(--W) * 1.1514); }
  .viewer.shelf-script.bopen .viewer-stage { transform: translateX(18%); }
}
/* flying home, a binder shows its top like the copy on the shelf: two cover edges and the page stack between */
.big-case > .face.top { display: none; }
.viewer.homing-binder .big-case > .face.top { display: block; left: 0; top: 0; width: 100%; height: var(--d); transform-origin: top center;
  transform: translateZ(calc(var(--d) / -2)) rotateX(90deg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bc) 90%, #fff) 0 5%, rgba(0,0,0,.6) 5% 8%, transparent 8% 92%, rgba(0,0,0,.6) 92% 95%, color-mix(in srgb, var(--bc) 90%, #fff) 95%),
    linear-gradient(180deg, transparent 0 14%, rgba(0,0,0,0) 14% 58%, #19191c 58%),
    linear-gradient(90deg, #19191c 0 6%, transparent 6% 95%, #19191c 95%),
    repeating-linear-gradient(180deg, #f7f5ef 0 1px, #cfcbc1 1px 2px, #ece9e1 2px 3px), #19191c; }

/* the flying binder's spine matches the shelf spine's proportions exactly (all in terms of its thickness) */
.face.spine .binder-spine { padding: calc(var(--d) * .2613) 0 !important; }
.face.spine .binder-spine .bd-rivet { width: 16.67% !important; }
.face.spine .binder-spine .ss-label { width: 59.26% !important; margin: calc(var(--d) * .1866) 0 !important; padding: calc(var(--d) * .074) 0 !important;
  font-size: calc(var(--d) * .2538) !important; letter-spacing: .06em !important; line-height: 1 !important; white-space: nowrap; }
.face.spine .binder-spine[data-dvd="where-the-mountain-women-sing"] .ss-label { white-space: normal !important; font-size: calc(var(--d) * .186) !important; line-height: 1.12 !important; text-align: center; }
/* the flying binder's page-edge stripes are sized to its thickness, so after it's scaled down they match the shelf copy's 1px edges */
.viewer.homing-binder .big-case > .face.top {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bc) 90%, #fff) 0 5%, rgba(0,0,0,.6) 5% 8%, transparent 8% 92%, rgba(0,0,0,.6) 92% 95%, color-mix(in srgb, var(--bc) 90%, #fff) 95%),
    linear-gradient(180deg, transparent 0 14%, rgba(0,0,0,0) 14% 58%, #19191c 58%),
    linear-gradient(90deg, #19191c 0 6%, transparent 6% 95%, #19191c 95%),
    repeating-linear-gradient(180deg, #f7f5ef 0 calc(var(--d) * .0185), #cfcbc1 calc(var(--d) * .0185) calc(var(--d) * .037), #ece9e1 calc(var(--d) * .037) calc(var(--d) * .0556)),
    #19191c !important; }

/* ---------- booklet: turn pages by their corners ---------- */
.pbk-nav { display: none !important; }
.pbk-corner { position: absolute; z-index: 4; bottom: 0; width: calc(var(--pw) * .2); aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.pbk-corner[hidden] { display: none; }
.pbk-corner.pbk-next { right: 0; } .pbk-corner.pbk-prev { left: 0; }
/* the lifted corner: the paper's underside folds up over the page, and the corner it came from shows the dark beneath */
.pbk-corner::before { content: ""; position: absolute; bottom: 0; width: 18%; aspect-ratio: 1; transition: width .28s cubic-bezier(.3,.7,.25,1), filter .28s;
  filter: drop-shadow(-2px -2px 3px rgba(0,0,0,.28)); }
.pbk-corner.pbk-next::before { right: 0; background: linear-gradient(to top left, #0f0c0a 0 50%, #d8d4c9 50%, #efece4 72%, #fbfaf6 100%); }
.pbk-corner.pbk-prev::before { left: 0; background: linear-gradient(to top right, #0f0c0a 0 50%, #d8d4c9 50%, #efece4 72%, #fbfaf6 100%);
  filter: drop-shadow(2px -2px 3px rgba(0,0,0,.28)); }
.pbk-corner:hover::before, .pbk-corner:focus-visible::before { width: 62%; }
.pbk-corner:focus-visible { outline: none; }
.pbk.leaving .pbk-corner, .pbk.arriving .pbk-corner { visibility: hidden; }
/* the total page count sits just under the right-hand corner */
.pbk-total { position: absolute; right: 2px; top: calc(100% + 12px); font-family: "Oswald", var(--font); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.65); pointer-events: none; }
.pbk.leaving .pbk-total, .pbk.arriving .pbk-total { visibility: hidden; }

/* ---------- the booklet in the case: no "Open the booklet" label; its corner curls up when you point at it ---------- */
.bc-open { display: none !important; }
.bc-curl { position: absolute; z-index: 5; right: 0; bottom: 0; width: 7cqw; aspect-ratio: 1; pointer-events: none;
  background: linear-gradient(to top left, rgba(14,12,10,.92) 0 50%, #d8d4c9 50%, #efece4 72%, #fbfaf6 100%);
  filter: drop-shadow(-2px -2px 3px rgba(0,0,0,.35)); transition: width .3s cubic-bezier(.3,.7,.25,1); }
.booklet-thumb:hover .bc-curl, .booklet-thumb:focus-visible .bc-curl { width: 22cqw; }


/* ---------- booklets: page edges only along the sides (none stacked under the foot) ---------- */
.pbk-left, .pbk-right { box-shadow: 0 8px 16px rgba(0,0,0,.35) !important; }
.pbk-book::before, .pbk-book::after { bottom: 1px; }

/* ---------- page curls, like paper: a rolled corner on a curved fold ---------- */
.pbk-corner::before { content: none !important; }
.pbk-corner .curl-svg, .bc-curl .curl-svg { position: absolute; right: 0; bottom: 0; display: block; overflow: visible;
  filter: drop-shadow(-1px -1px 1.5px rgba(0,0,0,.22)); transition: width .3s cubic-bezier(.3,.7,.25,1), height .3s cubic-bezier(.3,.7,.25,1); }
.pbk-corner .curl-svg { width: 34%; height: 34%; --under: #e7e4dc; }
.pbk-corner.pbk-prev .curl-svg { right: auto; left: 0; transform: scaleX(-1); }
.pbk-corner:hover .curl-svg, .pbk-corner:focus-visible .curl-svg { width: 100%; height: 100%; }
.curl-under { fill: var(--under, #e7e4dc); }
/* the booklet in its case: what the corner uncovers is the dark inside of the case */
.bc-curl { background: none !important; filter: none !important; width: 9cqw; aspect-ratio: 1; }
.bc-curl .curl-svg { width: 100%; height: 100%; --under: #18181b; }
.booklet-thumb:hover .bc-curl, .booklet-thumb:focus-visible .bc-curl { width: 24cqw; }

/* the turning page carries its shading by the binding the whole way over (--crease is set each frame in curlTurn) */
.pbk-leaf .pbk-sface .pbk-sinner > * { box-shadow: inset 18px 0 22px -14px rgba(0,0,0,calc(.35 * var(--crease, 1))); }
.pbk-leaf .pbk-sface.back .pbk-sinner > * { box-shadow: inset -18px 0 22px -14px rgba(0,0,0,calc(.35 * var(--crease, 1))); }


/* ---------- page corners: flat until you point at one, then it peels back; out of the way while a page turns ---------- */
.pbk-corner .curl-svg { width: 0 !important; height: 0 !important; }
.pbk-corner:hover .curl-svg, .pbk-corner:focus-visible .curl-svg { width: 100% !important; height: 100% !important; }
.pbk.turning .pbk-corner { visibility: hidden; }
.pbk.turning .pbk-corner .curl-svg { transition: none; width: 0 !important; height: 0 !important; }
.bc-curl { width: 0 !important; }
.booklet-thumb:hover .bc-curl, .booklet-thumb:focus-visible .bc-curl { width: 24cqw !important; }

/* the booklet's close X sits just above its top-right corner (the page count sits just below the bottom-right) */
.pbk-close { top: auto; right: -6px; bottom: calc(100% + 2px); z-index: 6; padding: 2px 6px; font-size: 1.9rem; line-height: 1; opacity: .85; transition: opacity .2s ease; }
.pbk-close:hover, .pbk-close:focus-visible { opacity: 1; }
.pbk.leaving .pbk-close, .pbk.arriving .pbk-close { visibility: hidden; }
/* while the booklet is open, its own X is the only one: the DVD case's X behind it steps aside */
body:has(.pbk:not([hidden]):not(.leaving)) .viewer > .viewer-close { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---------- the bottom shelf is Writing (centered) with Producing to its right; the Playbills stand with the CDs
   at the end of the Directing shelf ---------- */
.shelf-writing .grp-writing { grid-column: 2; justify-self: center; }
.shelf-writing .grp-producing { grid-column: 3; justify-self: start; margin: 0 !important; }
.shelf-directing .grp-theater { flex: 0 0 auto; margin-left: calc(var(--spine-h) * .05); }
/* the two Playbills stand staggered, the second half behind the first, so they fit beside the CDs */
.shelf-directing .playbill-stand + .playbill-stand { margin-left: calc(var(--pbw) * -.55); }
.shelf-directing .shelf-cds { margin-left: calc(var(--spine-h) * .05); }
.shelf-directing .brownie-prop { margin-right: calc(var(--spine-h) * .05); }

/* ---------- the Producing DVDs turn the same way as the Playbills: front on, cheated 28deg, the opening edge toward
   you on the right; fanned so they fit beside Writing, the left one in front ---------- */
@media (min-width: 701px) {
  .grp-producing .dvd34 { --turn: -28deg; width: calc(var(--w) * .883 + var(--d) * .469); }
  .grp-producing .dvd34 .case { transform-origin: 100% 50%; transform: translateX(calc(var(--d) * .234 - var(--w) * .117)) rotateY(var(--turn)); }
  .grp-producing .dvd34:hover .case, .grp-producing .dvd34:focus-visible .case {
    transform: translateX(calc(var(--d) * .234 - var(--w) * .117)) translateY(-12px) rotateY(-14deg); }
  .fan-producing > .dvd34 + .dvd34 { margin-left: calc(var(--spine-h) * -.24); }
  .fan-producing > .dvd34:nth-child(1) { z-index: 3; } .fan-producing > .dvd34:nth-child(2) { z-index: 2; }
  .fan-producing > .dvd34:hover, .fan-producing > .dvd34:focus-visible { z-index: 6; }
  .grp-producing .dvd34 .face.front { left: 0; }   /* no seam to hide against the spine: it faces away */
}

/* ---------- phones: everything fits the screen — the shelves scale to the phone's width, every DVD and binder
   stands spine-out, the camera stays home, and the bottom shelf shares one plaque ---------- */
.tag-combined, .corkboard.cork-tall { display: none !important; }
@media (max-width: 700px) {
  .room { --content-w: calc(100vw - 32px); --spine-h: calc(var(--content-w) / 3.05); }
  .bts-wall { --spine-h: calc((100vw - 32px) / 3.05) !important; }
  .brownie-prop { display: none; }
  .dvd34:not(.faceout) { --turn: 90deg; width: calc(var(--d) + var(--spine-h) * .012); }
  .shelf-directing .spines, .shelf-writing .spines, .shelf-featured .spines { overflow-x: visible; }
  /* Featured: the phone on the left, the award on the right, the three DVDs standing together between them */
  .shelf-featured .spines { justify-content: flex-start; gap: calc(var(--spine-h) * .012); }
  .shelf-featured .game-set { display: contents; }
  .shelf-featured .phone-slot { margin-right: auto; }
  .shelf-featured .game-set .award { margin-left: auto; }
  /* the bottom shelf: everything side by side under one shared plaque */
  .shelf-writing .spines { display: flex; justify-content: center; align-items: flex-end; column-gap: calc(var(--spine-h) * .04) !important; }
  .script-flat.binder3d { --t: calc(var(--spine-h) * .15); }
  .fan-producing > .dvd34 + .dvd34 { margin-left: 0; }
  .shelf-directing .playbill-stand { --pbw: calc(var(--spine-h) * .8 * 11 / 17); }
  .ss-label { font-size: calc(var(--spine-h) * .06); }
  .grp-tag { display: none !important; }
  .tag-combined { display: inline-flex !important; }
  .corkboard.cork-wide { display: none !important; }
  .corkboard.cork-tall { display: flex !important; }
}

/* ---------- a show's own socials: die-cut vinyl stickers stuck inside the right-hand side of its case, under the disc ---------- */
.case-socials { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; bottom: 6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqw 3cqw; justify-items: center; }
.case-sticker { position: relative; display: inline-flex; align-items: center; gap: 1.5cqw; max-width: 100%; box-sizing: border-box;
  padding: 1.5cqw 2.6cqw 1.5cqw 2cqw; border: .9cqw solid #f3f2ee; border-radius: 99px; background: var(--sc, #222); color: #fff; text-decoration: none;
  font-family: "Oswald", var(--font); font-weight: 600; font-size: 3.5cqw; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 .5cqw 1.1cqw rgba(0,0,0,.5), inset 0 .35cqw 0 rgba(255,255,255,.22);
  transform: rotate(var(--r, 0deg)); transition: transform .2s ease, box-shadow .2s ease; }
.case-sticker svg { flex: 0 0 auto; width: 4.6cqw; height: 4.6cqw; fill: currentColor; }
.case-sticker span { overflow: hidden; text-overflow: ellipsis; }
.case-sticker::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;   /* vinyl sheen */
  background: linear-gradient(115deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.1)); }
.case-sticker:hover, .case-sticker:focus-visible { transform: rotate(var(--r, 0deg)) translateY(-.8cqw) scale(1.04); box-shadow: 0 1.2cqw 2cqw rgba(0,0,0,.55); outline: none; }
.case-sticker:focus-visible { border-color: #fff; }
.cs-youtube { --sc: #f00; --r: -3deg; }
.cs-instagram { --sc: linear-gradient(45deg, #f9a43f, #e1306c 55%, #8a3ab9); --r: 2.5deg; }
.cs-tiktok { --sc: #111; --r: 2deg; }
.cs-tiktok svg { filter: drop-shadow(-.35cqw -.2cqw 0 #25f4ee) drop-shadow(.35cqw .2cqw 0 #fe2c55); }
.cs-facebook { --sc: #1877f2; --r: -2deg; }
.case-sticker:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd one out sits centred under the pair */

/* ---------- Amanda's "Working on it!" sticky note, stuck wherever something is still to come ---------- */
img.todo-note { position: absolute; z-index: 6; display: block; height: auto !important; object-fit: contain !important; inset: auto; pointer-events: none; transform-origin: 50% 0;
  filter: drop-shadow(0 .5cqw .6cqw rgba(0,0,0,.35)) drop-shadow(0 1.6cqw 2.4cqw rgba(0,0,0,.18)); }
img.todo-page { width: 36cqw; right: 8cqw; bottom: 12cqw; rotate: 4deg; }                     /* on a binder's first page */
img.todo-booklet { width: 34cqw; left: 6cqw; top: 6cqw; rotate: -5deg; }                   /* on top of a DVD's booklet */
img.todo-cast { position: relative; width: 27cqw; margin: 1cqw 4cqw 0 auto; rotate: 3deg; }       /* under a partial cast list */

/* ---------- the bottom shelf: [sort sign] Writing | Producing, centred together; the binders stand square,
   spines out, backs to the wall, sorted four ways with clear dividers between the groups ---------- */
.shelf-writing .spines { display: flex !important; justify-content: center; align-items: flex-end; column-gap: calc(var(--spine-h) * .16) !important; }
.shelf-writing .grp-writing, .shelf-writing .grp-producing { grid-column: auto; justify-self: auto; }
.script-row > .script-flat.binder3d, .script-row > .script-flat.binder3d:nth-child(n) { --lean: 0deg; --bturn: 90deg; width: calc(var(--t) + 1px) !important; margin-right: 0 !important; }
.script-row { position: relative; justify-content: center; gap: calc(var(--spine-h) * .004) !important; }
/* a clear acrylic divider at the start of each group, seen edge-on, the group's name on Dymo tape down its front edge */
.bd-divider { position: relative; flex: 0 0 auto; align-self: stretch; display: flex; align-items: flex-start; justify-content: center;
  margin: 0 calc(var(--spine-h) * .02); padding-top: calc(var(--spine-h) * .14); transform-origin: 50% 100%; }
.bd-divider::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: calc(var(--spine-h) * .03); translate: -50% 0; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(205,225,240,.2) 35%, rgba(255,255,255,.1) 60%, rgba(255,255,255,.45) 85%, rgba(0,0,0,.25));
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 2px 0 4px rgba(0,0,0,.35); }
.bd-divider .dymo { writing-mode: vertical-rl; padding: .55em .28em; cursor: default; transform: none !important; pointer-events: none; }
/* Dymo label-maker tape: black, white raised letters */
.dymo { display: inline-block; white-space: nowrap; padding: .28em .55em .24em; border: 0; border-radius: 2px; cursor: pointer;
  font-family: "Oswald", var(--font); font-weight: 700; font-size: max(9px, calc(var(--spine-h) * .052)); line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: #f4f4f0; background: linear-gradient(#2a2a2e, #141416 55%, #0b0b0c); text-shadow: 0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .15s ease, background .2s ease; }
.dymo:nth-of-type(odd) { transform: rotate(-1.2deg); } .dymo:nth-of-type(even) { transform: rotate(.9deg); }
.dymo:hover, .dymo:focus-visible { transform: translateY(-1px) rotate(0deg); outline: none; box-shadow: 0 2px 4px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.5); }
.dymo.on { background: linear-gradient(#d8262f, #b3141d 55%, #8f0e16); }
/* the sign: a cream card in a clear acrylic L-stand, standing on the shelf left of the binders */
.sort-sign { position: relative; flex: 0 0 auto; align-self: flex-end; width: calc(var(--spine-h) * .62); margin-bottom: calc(var(--case-depth-px) - var(--shelf-depth) + var(--spine-h) * .02);
  padding: calc(var(--spine-h) * .025); border-radius: 3px; transform: rotate(-1.5deg);
  background: linear-gradient(115deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 30%, rgba(255,255,255,.04) 70%, rgba(255,255,255,.22));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 3px 6px 10px rgba(0,0,0,.35); }
.sort-sign::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -4px; height: 6px; border-radius: 2px;   /* the stand's foot */
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.12)); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.ss-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--spine-h) * .03); padding: calc(var(--spine-h) * .05) calc(var(--spine-h) * .03);
  background: #f6f1e4; border-radius: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ss-head { font-family: "Oswald", var(--font); font-weight: 600; font-size: max(8px, calc(var(--spine-h) * .045)); letter-spacing: .16em; text-transform: uppercase; color: #6b5a3c; text-align: center; line-height: 1.15; }
@media (prefers-reduced-motion: reduce) { .dymo { transition: none; } }
/* phones: no room beside the binders, so the sign lies flat under the shelf, one row of tape */
@media (max-width: 700px) {
  .shelf-writing { position: relative; z-index: 4; }
  .room { padding-bottom: 76px; }   /* room for the sign under the bottom shelf */
  .sort-sign { position: absolute; z-index: 5; left: 50%; top: calc(100% + 12px); width: max-content; max-width: calc(100vw - 24px); margin: 0;
    translate: -50% 0; transform: none; padding: 4px; }
  .sort-sign::after { display: none; }
  .ss-card { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 7px 8px; }
  .ss-head { width: 100%; }
  .sort-sign .dymo { font-size: 11px; padding: .45em .7em .4em; }
  .shelf-writing .spines { column-gap: calc(var(--spine-h) * .1) !important; }
}


/* Where the Mountain Women Sing: a binder just thick enough for its title on two lines at the same size as the other
   spines, with the same margin of label either side of the type */
.script-flat.binder3d[data-dvd="where-the-mountain-women-sing"] { --t: calc(var(--spine-h) * .39); }
.script-flat.binder3d[data-dvd="where-the-mountain-women-sing"] .ss-label { white-space: nowrap; font-size: calc(var(--spine-h) * .068); line-height: 1; padding: 4px 0; }
.script-flat.binder3d[data-dvd="where-the-mountain-women-sing"] .bd-rivet { width: calc(var(--spine-h) * .27 * .17); }   /* rivets the usual size */
@media (max-width: 700px) {
  .script-flat.binder3d[data-dvd="where-the-mountain-women-sing"] { --t: calc(var(--spine-h) * .25); }
  .script-flat.binder3d[data-dvd="where-the-mountain-women-sing"] .ss-label { font-size: calc(var(--spine-h) * .06); }
  .script-flat.binder3d[data-dvd="where-the-mountain-women-sing"] .bd-rivet { width: calc(var(--spine-h) * .15 * .17); }
}
/* binder titles: Courier New's own bold, without the extra outline that made it heavy */
.ss-label { font-weight: 700 !important; -webkit-text-stroke: 0 !important; }

/* a DVD's extras (trailer, behind the scenes): gold die-cut stickers above the disc; each plays on the TV */
.case-extras { position: absolute; z-index: 3; left: 8cqw; right: 15cqw; top: 10.5cqw; display: flex; justify-content: center; flex-wrap: wrap; gap: 2.6cqw 3cqw; }
.case-sticker.cs-extra { --sc: linear-gradient(180deg, #f6dc8a, #d9ae45 55%, #b8862a); --r: -2deg; color: #2b1d05; cursor: pointer; font: inherit;
  font-family: "Oswald", var(--font); font-weight: 600; font-size: 3.5cqw; line-height: 1; letter-spacing: .02em; text-transform: none; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.case-sticker.cs-extra + .cs-extra { --r: 2deg; }
.case-sticker.cs-extra svg { width: 3.8cqw; height: 3.8cqw; }

/* what the disc plays, curled round the top just outside it, two little arrows bobbing down at it */
.disc-tray .disc-cue { position: absolute; z-index: 3; left: 50%; top: var(--disc-y, 46%); width: 86cqw; height: 86cqw; translate: -50% -50%; scale: 1.13;
  overflow: visible; pointer-events: none; transition: opacity .3s ease; }
.cd-tray .disc-cue { scale: 1.2; }
.disc-cue text { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 5.4px; letter-spacing: .9px; fill: #f3ece4; }
.disc-cue .dc-arrow { fill: none; stroke: #f3ece4; stroke-opacity: .7; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round;
  animation: dc-bob 1.1s ease-in-out infinite; }
.disc-cue .dc-r .dc-arrow { animation-delay: .18s; }
@keyframes dc-bob { 0%, 100% { transform: translateY(-.5px); } 50% { transform: translateY(.9px); } }
.disc-tray:has(.tray-cd.lifted) .disc-cue { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .disc-cue .dc-arrow { animation: none; } }

/* under the disc: the extras row, then the socials, stacked and centred as one block */
.case-stickers { position: absolute; z-index: 3; left: 6cqw; right: 6cqw; bottom: 3.2cqw; display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; }
.case-stickers .case-extras + .case-socials { gap: 2.2cqw 3cqw; }
.case-stickers .case-extras, .case-stickers .case-socials { position: static; left: auto; right: auto; top: auto; bottom: auto; }
.case-stickers .case-extras { width: 100%; }
.case-stickers .case-socials { width: 100%; }
/* a DVD with stickers under its disc: the disc (with its well and hub) sits higher, leaving the stickers room clear of it */
/* every DVD: the Play line sits midway between the case's inner lip and the disc; the stickers stand clear of the bottom lip */
.disc-tray:not(.cd-tray) { --disc-y: 40.5%; }
.disc-tray:not(.cd-tray) .case-stickers { top: calc(var(--disc-y) + 40.5cqw); bottom: 3.3cqw; justify-content: center; }   /* centred between the disc's rim and the bottom lip */
/* the extras read as official labels: all caps, square to the case; stacked and centred when there are no socials */
.case-sticker.cs-extra, .case-sticker.cs-extra + .cs-extra { --r: 0deg; text-transform: uppercase; letter-spacing: .1em; }
.case-stickers:not(:has(.case-socials)) .case-extras { flex-direction: column; align-items: center; }
/* the booklet's cover: just the title and logline, sitting a little higher off the foot */
.booklet-cover:not(.cd-booklet) { padding-bottom: 15cqw; }
/* nothing under the disc (trailer-only cases): disc and its Play line sit centred in the case */
.disc-tray:not(.cd-tray):not(:has(.case-stickers)) { --disc-y: 53.4%; }
img.todo-disc { width: 30cqw; left: 11cqw; top: calc(var(--disc-y, 46%) + 17cqw); rotate: -7deg; }   /* on a disc with nothing to play yet, at its edge, clear of the faces */
.tray-cd.off { opacity: 1 !important; }   /* a disc that can't play yet still shows its art at full strength */
/* the cordless phone, realistically sized next to the TV: a quarter bigger, growing up from where it stands */
.phone { scale: 1.25; transform-origin: 50% 100%; }
.booklet-cover:not(.cd-booklet) { background-position: center, var(--art-pos, center); background-size: auto, var(--art-size, cover); background-repeat: no-repeat; }
/* the LA Weekly badge on Will You Be My Quaran-tine? sits on Christian's shirt: below his face, above the title */
.logo-sticker.on-case { left: 5%; top: 38%; width: 27%; }
.front-art .logo-sticker { left: 5%; top: 38%; width: 26%; }
/* the cover's words keep a soft shadow so they read on the lighter shading */
.bc-title, .bc-lead { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.5); }

/* a pulled-out cover photo (too wide to fill the booklet): centred, its top and bottom edges melting softly into the dark */
.bc-feather { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(#151517 0, #151517 12%, rgba(21,21,23,.85) 15%, rgba(21,21,23,.5) 22%, rgba(21,21,23,.15) 29%, rgba(21,21,23,0) 32%,
    rgba(21,21,23,0) 68%, rgba(21,21,23,.15) 71%, rgba(21,21,23,.5) 78%, rgba(21,21,23,.85) 85%, #151517 88%, #151517 100%); }
.booklet-cover > :not(.bc-feather) { position: relative; z-index: 1; }
.booklet-cover > .bc-mark, .booklet-cover > .bc-curl, .booklet-cover > .todo-note { position: absolute; }
.bc-lead { text-align: center; }   /* the logline sits centred on the booklet cover */