/* Afterimage — the house lights go down around the screen. */
.cinema {
  --paper:#111315;
  --ink:#f0e9da;
  --line:#4e514d;
  --focus:#f4bd72;
  --side:5vw;
}

.cinema .sample-mast {
  min-height:63px;
}

.cinema .wordmark {
  font:600 22px/1.1 Arial,sans-serif;
  letter-spacing:-.05em;
}

.cinema-bill {
  max-width:1700px;
  margin:auto;
  padding:0 4vw;
}

.cinema-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:20px 0 12px;
}

.cinema-strip h1 {
  font:italic 23px Georgia,serif;
  letter-spacing:-.04em;
}

.cinema-strip span,.show-time {
  font:11px ui-monospace,monospace;
  letter-spacing:.1em;
  color:#e3bd7d;
}

.cinema-frame {
  width:100%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  aspect-ratio:2.36/1;
  min-height:320px;
}

.cinema-frame>img,.frame-shade {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  z-index:-2;
}

.frame-shade {
  z-index:-1;
  background:linear-gradient(0deg,#080b0ef5 0%,#080a0d45 54%,transparent 80%),linear-gradient(90deg,#080b0e50,transparent 85%);
}

.cinema-caption {
  position:absolute;
  left:4%;
  bottom:7%;
  right:16%;
  max-width:760px;
}

.cinema-caption .eyeline {
  color:#f1c77f;
  margin-bottom:9px;
}

.cinema-caption h2 {
  font:400 clamp(48px,7.7vw,126px)/.99 Georgia,serif;
  letter-spacing:-.06em;
}

.cinema-caption>p:last-child {
  font:15px/1.5 Arial,sans-serif;
  max-width:58ch;
  margin-top:10px;
  color:#ece6dd;
}

.show-time {
  position:absolute;
  right:4%;
  bottom:10%;
  border:1px solid #ae9366;
  padding:7px 10px;
}

.film-tracks {
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.film-tracks button {
  background:none;
  color:#b9b8b3;
  border:0;
  border-top:2px solid #53544f;
  text-align:left;
  padding:14px 12px 14px 0;
}

.film-tracks button[aria-pressed=true] {
  color:#fae1b5;
  border-color:#e2a95c;
}

.film-tracks small {
  font:10px ui-monospace,monospace;
  letter-spacing:.08em;
}

.film-tracks b {
  display:block;
  font:22px Georgia,serif;
  margin-top:5px;
}

.cinema-letter {
  display:grid;
  grid-template-columns:.65fr 1fr 1fr;
  gap:5%;
  align-items:start;
  padding:55px 7vw;
  margin-top:18px;
  background:#e6dece;
  color:#292a27;
}

.cinema-letter h2 {
  font:400 clamp(37px,4.5vw,72px)/.99 Georgia,serif;
  letter-spacing:-.06em;
}

.cinema-letter p {
  max-width:42ch;
  line-height:1.6;
}

/* Side B — a physical turntable and its sleeve. */
.listening {
  --paper:#2e3029;
  --ink:#f2dbad;
  --line:#92866c;
  --focus:#ffbe72;
  --side:6vw;
}

.listening .wordmark {
  font:italic bold 31px Georgia,serif;
  letter-spacing:-.07em;
}

.listening .wordmark span {
  font:14px Arial;
  color:#e4874e;
}

.side-room {
  display:grid;
  grid-template-columns:.8fr 1.25fr;
  gap:7%;
  align-items:center;
  padding:42px 6vw 54px;
}

.side-copy h1 {
  font:400 clamp(66px,8vw,134px)/.81 Georgia,serif;
  letter-spacing:-.084em;
}

.side-copy h1 em {
  color:#ef995f;
}

.side-copy>p:last-child {
  margin-top:20px;
  line-height:1.5;
  max-width:25ch;
}

.turntable {
  width:100%;
  position:relative;
  min-height:200px;
  aspect-ratio:1.5/1;
  border:8px solid #32251c;
  border-radius:13px;
  background:repeating-linear-gradient(1deg,#825132 0 3px,#75442c 3px 5px,#966240 5px 7px,#774b30 7px 15px);
  box-shadow:0 10px 20px #1117,inset 0 0 20px #372013;
}

.deck-name {
  position:absolute;
  right:3%;
  bottom:5%;
  font:8px ui-monospace,monospace;
  color:#f2daaa;
  background:#382e23;
  padding:4px;
}

.platter {
  position:absolute;
  left:5%;
  top:5%;
  height:90%;
  aspect-ratio:1;
  border-radius:100%;
  background:repeating-linear-gradient(45deg,#a59d8e 0 1px,#3b3c39 1px 3px);
  padding:5px;
  box-shadow:1px 3px 8px #20170d;
}

.vinyl {
  display:grid;
  place-items:center;
  border-radius:50%;
  height:100%;
  background:conic-gradient(from 25deg,transparent,#d4d7d02a 35deg,transparent 74deg,transparent 165deg,#d4d7d02a 215deg,transparent 258deg),repeating-radial-gradient(circle,#202222 0 2px,#41433e 2px 3px,#1b1b19 3px 6px);
  animation:spin-record 5s linear infinite;
  animation-play-state:paused;
}

[data-deck].playing .vinyl {
  animation-play-state:running;
}

@keyframes spin-record {
  to {
    transform:rotate(360deg);
  }
}

.vinyl-label {
  width:34%;
  aspect-ratio:1;
  display:grid;
  place-content:center;
  border-radius:100%;
  background:#d9814f;
  border:2px solid #aa693b;
  text-align:center;
  color:#392e23;
}

.vinyl-label b {
  font:italic bold clamp(23px,3.3vw,55px)/1 Georgia;
}

.vinyl-label small {
  font:6px ui-monospace,monospace;
}

.tonearm {
  position:absolute;
  right:13%;
  top:12%;
  height:66%;
  width:7px;
  border-radius:5px;
  background:linear-gradient(90deg,#eee3cb,#847e73,#e5decf);
  box-shadow:3px 3px 4px #261c15;
  transform-origin:center 5%;
  transform:rotate(11deg);
  transition:transform .4s;
}

.tonearm:before,.tonearm:after {
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:#363a34;
}

.tonearm:before {
  top:-4%;
  width:24px;
  height:24px;
  border-radius:50%;
  border:4px solid #b2aa93;
}

.tonearm:after {
  bottom:-5px;
  width:14px;
  height:24px;
  border:2px solid #b6b2a1;
}

.playing .tonearm {
  transform:rotate(30deg);
}

.deck-console {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 12px;
}

.deck-console legend {
  font:10px ui-monospace,monospace;
  text-transform:uppercase;
  margin-bottom:4px;
}

.deck-console label {
  margin-right:9px;
  font:bold 16px Georgia,serif;
}

.deck-console input {
  accent-color:#ed955d;
}

.deck-console button {
  background:#f0c594;
  color:#2c3028;
  border:0;
  border-radius:3px;
  padding:11px 18px;
  font:bold 13px ui-monospace,monospace;
}

.side-sleeve {
  background:#ede2c5;
  color:#363a31;
  display:grid;
  grid-template-columns:.45fr 1fr;
  gap:7%;
  align-items:center;
  padding:45px 9vw;
}

.sleeve-art {
  position:relative;
  max-width:220px;
  aspect-ratio:1;
  overflow:hidden;
  background:#bc7552;
  border:1px solid #5d5341;
}

.sleeve-art i {
  position:absolute;
  inset:15%;
  border:8px solid #283a37;
  border-radius:50%;
}

.sleeve-art i:nth-child(2) {
  transform:translateX(25%);
}

.sleeve-art i:nth-child(3) {
  transform:translateX(-25%);
}

.sleeve-art strong {
  position:absolute;
  left:4%;
  bottom:4%;
  font:900 24px/.85 Arial;
}

.side-sleeve h2 {
  font:italic 45px/1 Georgia,serif;
}

.side-sleeve p:not(.eyeline) {
  margin:13px 0;
  max-width:53ch;
  line-height:1.55;
}

.side-sleeve small {
  font:11px ui-monospace,monospace;
}

@media(max-width:650px) {
  .cinema-strip span {
    font-size:8px;
  }
  .cinema-caption {
    right:5%;
    bottom:8%;
  }
  .cinema-caption h2 {
    font-size:47px;
  }
  .cinema-caption>p:last-child {
    font-size:13px;
  }
  .show-time {
    bottom:auto;
    top:6%;
    font-size:10px;
  }
  .film-tracks b {
    font-size:16px;
  }
  .film-tracks small {
    font-size:8px;
  }
  .cinema-letter,.side-room {
    grid-template-columns:minmax(0,1fr);
    gap:19px;
  }
  .side-copy h1 {
    font-size:56px;
  }
  .side-copy h1 br {
    display:none;
  }
  .side-copy h1 em {
    margin-inline:.15em;
  }
  .side-room {
    padding-block:30px;
  }
  .turntable {
    min-height:0;
  }
  .side-sleeve {
    grid-template-columns:.45fr 1fr;
    gap:5%;
  }
  .side-sleeve h2 {
    font-size:32px;
  }
}

.mood-filter{font:11px ui-monospace,monospace}.mood-filter select,.cinema-seats button{background:#212529;border:1px solid #998767;color:#f0e8d4;padding:7px 10px}
.cinema-seats {margin:25px 4vw 0;padding:30px 3vw;display:grid;grid-template-columns:.85fr 1fr;gap:9%;background:#232523;color:#f3e6cc}
.cinema-seats h2{font:italic 43px/1 Georgia,serif}.cinema-seats p{font-size:14px;line-height:1.5;margin:10px 0}
.auditorium{max-width:420px}.screen-edge{display:block;border-top:3px solid #b99557;color:#d9ba83;text-align:center;font:9px ui-monospace,monospace;padding:8px;margin:4px 0}
.auditorium legend,.seat-key{font:11px ui-monospace,monospace;margin:5px 0}.auditorium #seat-map{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
#seat-map button{border-radius:9px 9px 2px 2px;padding:8px 3px;min-height:36px}#seat-map button[aria-pressed=true]{background:#f1cd8e;color:#28251b}#seat-map button:disabled{text-decoration:line-through;color:#9b9990;border-style:dashed}
#film-ticket {display:block;margin:10px 0;background:#eee6c9;color:#2b2b23;border-inline:3px dotted #9d8458;padding:16px;font:600 13px/1.5 ui-monospace,monospace}
.auditorium small{display:block;margin:8px 0;font-size:11px}#make-ticket:disabled{opacity:.55}
@media(max-width:650px){.cinema-seats{grid-template-columns:1fr;gap:12px}.cinema-strip{flex-wrap:wrap}.cinema-strip>span{display:none}.mood-filter select{font-size:11px}}

.station-strip {display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:9px 6vw;color:#2b2e25;background:#e0aa76;font:11px ui-monospace,monospace}.station-strip a{border-left:1px solid #776447;padding-left:12px}
.station-archive {padding:30px 6vw 42px;background:#e0d6bd;color:#292d26}.station-archive header{display:flex;justify-content:space-between;gap:14px;align-items:end;flex-wrap:wrap}.station-archive h2 {font:italic 44px Georgia,serif}.station-archive label,.station-archive small,#radio-matches{font:11px ui-monospace,monospace}.station-archive input{display:block;margin:6px 0;width:100%;padding:9px;background:#f6edda;border:1px solid #85755f}
.broadcasts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:18px 0}.broadcasts article{display:grid;grid-template-columns:65px 1fr;align-items:center;gap:7px 10px;padding-top:12px;border-top:2px solid}.broadcasts article h3{font:23px Georgia,serif}.broadcasts article p{font-size:13px}.broadcasts article button{grid-column:1/-1;background:#31332b;color:#f6e4be;border:0;padding:8px}.radio-art{width:100%;max-width:220px}
@media(max-width:680px){.broadcasts{grid-template-columns:1fr}.broadcasts article{grid-template-columns:60px 1fr auto}.broadcasts article button{grid-column:auto}.station-strip{gap:7px}.station-strip span{display:none}}