/* ===== css/acts/rooms.css ===== */
/*
 * The rooms of the collection.
 *
 * Seven rooms, one house. The aquarium brought its own glass, its own light
 * and its own brass from the first screen, and none of that is repeated
 * here: what is here is the furniture the other six rooms share, so that a
 * visitor walking from the corridor into the music room is still in the
 * same building.
 *
 * Nothing in this file is allowed to touch the aquarium. Every selector
 * below is anchored on .room or on a class that only these rooms use, and
 * the aquarium's own stylesheet is scoped to the aquarium's own root. The
 * pixel gate - which compares the first screen against this site, pixel for
 * pixel - depends on that.
 */

/* ------------------------------------------------------------- the room */
.room {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.1rem);
  background:
    linear-gradient(180deg, rgba(10, 28, 30, .5), rgba(5, 23, 26, .78)),
    var(--sw-ink-deep);
  border: 1px solid var(--sw-hair);
}

/* Two brass brackets in the corners, and nothing else. */
.room::before,
.room::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--sw-brass);
  opacity: .5;
  pointer-events: none;
}

.room::before {
  top: 8px;
  left: 8px;
  border-right: 0;
  border-bottom: 0;
}

.room::after {
  bottom: 8px;
  right: 8px;
  border-left: 0;
  border-top: 0;
}

/* --------------------------------------------------------------- a head */
.room__head {
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--sw-hair);
}

.room__mark {
  margin: 0 0 .75rem;
  font-family: var(--sw-mono);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sw-brass);
}

.room__title {
  margin: 0;
  font-family: var(--sw-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.4vw, 2.8rem);
  line-height: 1.14;
  letter-spacing: .012em;
  color: var(--sw-pale);
}

.room__line {
  margin: .9rem 0 0;
  max-width: var(--sw-measure);
  font-family: var(--sw-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--sw-pale-soft);
}

.room__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  align-items: center;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}

/* -------------------------------------------------------------- buttons */
.room__button {
  appearance: none;
  display: inline-block;
  font-family: var(--sw-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .62rem 1.15rem;
  border: 1px solid var(--sw-hair-strong);
  color: var(--sw-pale-soft);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--sw-dur) var(--sw-ease),
    border-color var(--sw-dur) var(--sw-ease),
    background-color var(--sw-dur) var(--sw-ease);
}

.room__button:hover {
  color: var(--sw-pale);
  border-color: var(--sw-brass);
}

.room__button:focus-visible {
  outline: 2px solid var(--sw-brass-lit);
  outline-offset: 3px;
}

.room__button[disabled] {
  opacity: .45;
  cursor: default;
}

.room__button--key {
  border-color: var(--sw-brass);
  color: var(--sw-brass-lit);
  background: rgba(157, 127, 70, .12);
}

.room__button--key:hover {
  background: rgba(157, 127, 70, .2);
  color: var(--sw-brass-lit);
}

.room__button--quiet {
  border-color: var(--sw-hair);
  color: var(--sw-pale-faint);
}

.room__button--quiet:hover {
  color: var(--sw-pale-soft);
  border-color: var(--sw-hair-strong);
}

/* ------------------------------------------------------------ the exits */
.room__exits {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  align-items: center;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sw-hair);
}

.room__exits .room__button {
  font-size: .64rem;
  letter-spacing: .16em;
  padding: .5rem .9rem;
}

/* ----------------------------------------------------------- the machine */
/*
 * The terminal. ACT I and ACT VII are the same instrument, so there is one
 * set of rules for it and both rooms use them.
 */
.term {
  position: relative;
  border: 1px solid var(--sw-hair-strong);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(14, 42, 44, .92), rgba(2, 12, 14, .97));
  padding: 1.05rem 1.15rem 1.15rem;
  font-family: var(--sw-mono);
  font-size: .82rem;
  line-height: 1.72;
  color: #9fe0c8;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .65);
}

/* The scanlines. They are the only decoration the machine has. */
.term::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .03) 0 1px,
    transparent 1px 3px
  );
}

.term__screen {
  min-height: 11rem;
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.term__line {
  margin: 0 0 .2rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.term__line--echo {
  color: rgba(159, 224, 200, .55);
}

.term__line--reply {
  color: #c8f5df;
}

.term__line--typed {
  min-height: 1.3em;
}

.term__line--blank {
  height: .85rem;
}

/*
 * The warning the machine prints before it opens the door. It is set
 * apart from the rest of the record, because it is about the visitor.
 */
.term__line--warning {
  color: #f0bd83;
  letter-spacing: .06em;
}

.term__line--granted {
  color: #e2fff0;
  letter-spacing: .2em;
}

.term__line--finale {
  color: #e8fff4;
}

.term__line--input {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-top: .7rem;
  padding-top: .65rem;
  border-top: 1px solid var(--sw-hair);
}

.term__prompt {
  color: var(--sw-brass-lit);
}

.term__field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #c8f5df;
  font: inherit;
  caret-color: #c8f5df;
  padding: 0;
}

.term__field:focus {
  outline: none;
}

/* ------------------------------------------------------- ACT II: corridor */
.corridor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
}

.window {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: 1px solid var(--sw-hair);
  background: var(--sw-ink-deep);
  cursor: pointer;
  transition:
    border-color var(--sw-dur) var(--sw-ease),
    transform var(--sw-dur) var(--sw-ease);
}

.window:hover {
  border-color: var(--sw-brass);
  transform: translateY(-3px);
}

.window__plate {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(14, 42, 44, .8), rgba(3, 15, 17, .92));
}

.window__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Two panes of glass between the visitor and the picture. */
  filter: blur(0.9px) saturate(.8) contrast(1.05) brightness(.88);
  transition:
    transform 900ms var(--sw-ease),
    filter 900ms var(--sw-ease);
}

.window:hover .window__image,
.window:focus-visible .window__image {
  transform: scale(1.045);
  filter: saturate(.95) contrast(1.05) brightness(.99);
}

.window__plate--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(217, 210, 180, .045) 0 8px,
    transparent 8px 16px
  );
}

.window__index {
  position: absolute;
  left: .7rem;
  bottom: .55rem;
  font-family: var(--sw-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--sw-brass-lit);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.window__card {
  display: block;
  padding: .85rem .9rem 1rem;
  border-top: 1px solid var(--sw-hair);
}

.window__title {
  font-family: var(--sw-mono);
  font-size: .67rem;
  letter-spacing: .16em;
  color: var(--sw-pale-soft);
}

/* ------------------------------------------------------ ACT II: an exhibit */
.exhibit__figure {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}

.exhibit__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--sw-hair);
  background: var(--sw-ink-deep);
  cursor: pointer;
  /* The grain and the haze blend with the picture and with nothing else. */
  isolation: isolate;
}

.exhibit__frame--brass {
  border-color: var(--sw-brass);
  box-shadow: 0 0 0 6px rgba(157, 127, 70, .1);
}

.exhibit__frame--glass {
  border-color: rgba(217, 210, 180, .28);
  box-shadow: inset 0 0 70px rgba(217, 210, 180, .055);
}

.exhibit__frame--void {
  border-color: rgba(14, 42, 44, .9);
  background: radial-gradient(80% 60% at 50% 42%, rgba(14, 42, 44, .6), #020a0c);
}

.exhibit__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The caption under a picture. It is the plate of the case, and it has to
   be readable in a dark room and on a phone in daylight. */
.exhibit__caption {
  margin: .8rem 0 0;
  font-family: var(--sw-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  line-height: 1.7;
  color: var(--sw-pale-soft);
}

.exhibit__frame--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(217, 210, 180, .05) 0 10px,
    transparent 10px 20px
  );
}

.exhibit__voice {
  max-width: var(--sw-measure);
}

.exhibit__lines {
  min-height: 8rem;
}

.exhibit__line {
  margin: 0 0 .85rem;
  font-family: var(--sw-display);
  font-size: 1.06rem;
  line-height: 1.66;
  color: var(--sw-pale);
}

.exhibit__line.is-new {
  animation: sw-rise 420ms var(--sw-ease);
}

.exhibit__line.is-current {
  color: var(--sw-brass-lit);
}

.record__row {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  margin: 0 0 .6rem;
  font-family: var(--sw-mono);
  font-size: .78rem;
  line-height: 1.6;
}

.record__field {
  color: var(--sw-brass);
  letter-spacing: .14em;
}

.record__value {
  color: var(--sw-pale);
}

/* ------------------------------------------------------------- ACT III */
.gallery__opening {
  max-width: var(--sw-measure);
}

.gallery__line {
  margin: 0 0 .5rem;
  font-family: var(--sw-display);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--sw-pale);
}

.gallery__line--own {
  color: var(--sw-brass-lit);
  font-style: italic;
}

.gallery__line--closing {
  color: var(--sw-pale-soft);
}

/* The room says how it is, before it says anything else. */
.gallery__entry {
  max-width: var(--sw-measure);
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  padding-left: 1rem;
  border-left: 1px solid var(--sw-hair-strong);
}

.gallery__line--entry {
  font-style: italic;
  color: var(--sw-pale-soft);
}

.gallery__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .9rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}

.gallery__prompt {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--sw-mono);
  font-size: .63rem;
  letter-spacing: .22em;
  color: var(--sw-pale-faint);
}

.option {
  appearance: none;
  padding: 1.15rem 1rem;
  border: 1px solid var(--sw-hair-strong);
  background: transparent;
  color: var(--sw-pale-soft);
  font-family: var(--sw-display);
  font-size: 1.06rem;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition:
    color var(--sw-dur) var(--sw-ease),
    border-color var(--sw-dur) var(--sw-ease),
    background-color var(--sw-dur) var(--sw-ease);
}

.option:hover {
  border-color: var(--sw-brass);
  color: var(--sw-pale);
}

.option.is-chosen {
  border-color: var(--sw-brass-lit);
  color: var(--sw-brass-lit);
  background: rgba(157, 127, 70, .1);
}

.gallery__answer {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--sw-hair);
  max-width: var(--sw-measure);
}

.gallery__rule {
  display: block;
  width: 4rem;
  height: 1px;
  margin: 1.2rem 0;
  background: var(--sw-brass);
}

/* -------------------------------------------------------------- ACT IV */
.ritual {
  text-align: center;
}

.ritual__lead {
  margin: 0 auto;
  max-width: var(--sw-measure);
  font-family: var(--sw-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--sw-pale);
}

.ritual__yes {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.ritual__confirm {
  margin: 0 auto;
  max-width: var(--sw-measure);
  font-family: var(--sw-display);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--sw-brass-lit);
}

.ritual__welcome {
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
  max-width: var(--sw-measure);
}

.ritual__line {
  margin: 0 0 .45rem;
  font-family: var(--sw-display);
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--sw-pale-soft);
}

/*
 * The two lines that are the whole of the ritual. They are set apart:
 * they are the only sentence in the collection that a visitor is made to
 * read twice.
 */
.ritual__key {
  margin: clamp(2rem, 5vw, 3.4rem) auto;
  max-width: 24rem;
  font-family: var(--sw-display);
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  line-height: 1.3;
  color: var(--sw-pale);
}

.ritual__key-line {
  margin: 0;
}

/* The card the rite leaves behind. */
.ritual__card {
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  max-width: 24rem;
  padding: 1.1rem 1.3rem 1.25rem;
  border: 1px solid var(--sw-hair-strong);
  background: rgba(217, 210, 180, .035);
  text-align: left;
}

.ritual__card-title {
  margin: 0 0 .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--sw-hair);
  font-family: var(--sw-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--sw-brass-lit);
}

.ritual__card-row {
  margin: 0 0 .4rem;
  font-family: var(--sw-mono);
  font-size: .74rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--sw-pale-soft);
}

.ritual__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

.ritual__taken {
  margin: 1.1rem 0 0;
  font-family: var(--sw-mono);
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--sw-brass-lit);
}

.ritual__key-words {
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  max-width: var(--sw-measure);
}

.ritual__closing {
  margin: 1.4rem auto 0;
  max-width: var(--sw-measure);
  font-family: var(--sw-display);
  font-style: italic;
  color: var(--sw-pale-soft);
}

.ritual__closing-line {
  margin: 0 0 .5rem;
  font-family: var(--sw-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--sw-pale-soft);
}

.ritual__enter {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

/* -------------------------------------------------------------- ACT V */
.writing__subtitle {
  margin: 0 0 .9rem;
  max-width: var(--sw-measure);
  font-family: var(--sw-display);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--sw-pale-soft);
}

.writing__privacy {
  margin: 0 0 1.2rem;
  font-family: var(--sw-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--sw-pale-faint);
}

.writing__desk {
  padding: clamp(1rem, 2.4vw, 1.8rem);
  border: 1px solid var(--sw-hair);
  background: linear-gradient(180deg, rgba(217, 210, 180, .05), rgba(217, 210, 180, .016));
}

/* The book on the desk. */
.writing__book {
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--sw-hair);
  font-family: var(--sw-mono);
  font-size: .74rem;
  letter-spacing: .2em;
  color: var(--sw-brass-lit);
}

.writing__write {
  margin-top: .9rem;
}

.writing__page {
  display: block;
  width: 100%;
  min-height: 46vh;
  resize: vertical;
  background: transparent;
  border: 0;
  color: var(--sw-pale);
  font-family: var(--sw-display);
  font-size: 1.08rem;
  line-height: 1.85;
}

.writing__page::placeholder {
  color: var(--sw-pale-faint);
  font-style: italic;
}

.writing__page:focus {
  outline: none;
}

.writing__status {
  margin: 1rem 0 0;
  min-height: 1.4em;
  font-family: var(--sw-mono);
  font-size: .74rem;
  letter-spacing: .04em;
  line-height: 1.7;
  color: var(--sw-pale-soft);
}

.writing__status--ok {
  color: #9fe0c8;
}

.writing__status--bad {
  color: #f0bd83;
}

.writing__count {
  margin: .4rem 0 1.3rem;
  font-family: var(--sw-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--sw-pale-faint);
}

/* -------------------------------------------------------------- ACT VI */

/*
 * The archive.
 *
 * The manuscript's own order, set as a document: the heading, the eight
 * lines of the archive, and then the gift.
 */
.music__archive {
  max-width: var(--sw-measure);
}

.music__one-last {
  margin: 0 0 1rem;
  font-family: var(--sw-mono);
  font-size: .72rem;
  letter-spacing: .26em;
  color: var(--sw-brass);
}

.music__archive-lines {
  padding-left: 1rem;
  border-left: 1px solid var(--sw-hair-strong);
}

.music__line {
  margin: 0 0 .5rem;
  font-family: var(--sw-display);
  font-size: 1.06rem;
  line-height: 1.64;
  color: var(--sw-pale);
}

.music__gift {
  margin: 1.2rem 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--sw-hair-strong);
}

.music__gift .music__line {
  color: var(--sw-pale-soft);
  font-style: italic;
}

.music__rest {
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
  max-width: var(--sw-measure);
  font-family: var(--sw-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--sw-pale-faint);
}

.music__deck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.music__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7.5rem, 21vw, 11.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--sw-hair-strong);
  background:
    radial-gradient(circle at 50% 50%, #0b2124 0 31%, #061316 32% 100%);
  box-shadow: 0 6px 30px rgba(0, 0, 0, .5);
}

.is-playing .music__disc {
  animation: sw-spin 9s linear infinite;
}

.music__disc__groove {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1px solid rgba(217, 210, 180, .09);
}

.music__disc__label {
  width: 27%;
  height: 27%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--sw-brass-lit), #6d4f26);
}

.music__transport {
  display: grid;
  gap: .85rem;
  min-width: 0;
}

.music__play {
  justify-self: start;
}

.music__scrub,
.music__volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--sw-hair-strong);
  cursor: pointer;
}

.music__scrub::-webkit-slider-thumb,
.music__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sw-brass-lit);
  border: 0;
}

.music__scrub::-moz-range-thumb,
.music__volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sw-brass-lit);
  border: 0;
}

.music__scrub:focus-visible,
.music__volume-slider:focus-visible {
  outline: 2px solid var(--sw-brass-lit);
  outline-offset: 6px;
}

.music__time {
  margin: 0;
  font-family: var(--sw-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--sw-pale-faint);
}

.music__volume {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.music__volume-label {
  font-family: var(--sw-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--sw-pale-faint);
  white-space: nowrap;
}

.music__volume-slider {
  max-width: 11rem;
}

.music__lyrics {
  margin-top: 1.6rem;
  padding: 1.2rem 1.3rem;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--sw-hair);
  background: rgba(3, 15, 17, .5);
}

.music__stanza {
  margin: 0 0 1.1rem;
  font-family: var(--sw-display);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--sw-pale-faint);
  transition: color var(--sw-dur) var(--sw-ease);
}

.music__stanza.is-now {
  color: var(--sw-pale);
}

.music__lyrics-toggle {
  margin-top: 1.4rem;
}

.music__audio {
  display: none;
}

.music__failed {
  margin: 1rem 0 0;
  font-family: var(--sw-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: #e8b27a;
}

.music__travel {
  margin-top: 1rem;
}

/* The retrospective covers the whole room while it is playing. */
.music__retro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.2rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  background: rgba(2, 9, 11, .97);
}

.music__retro[hidden] {
  display: none;
}

.music__retro-note {
  margin: 0;
  font-family: var(--sw-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--sw-brass);
}

.music__retro-stage {
  min-height: 11rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .35rem;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 700ms var(--sw-ease),
    transform 700ms var(--sw-ease);
}

.music__retro-stage.is-in {
  opacity: 1;
  transform: none;
}

.music__retro-when {
  margin: 0;
  font-family: var(--sw-mono);
  font-size: .64rem;
  letter-spacing: .24em;
  color: var(--sw-pale-faint);
}

.music__retro-title {
  margin: .4rem 0 0;
  font-family: var(--sw-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1.2;
  color: var(--sw-pale);
}

.music__retro-line {
  margin: .6rem 0 0;
  max-width: 30rem;
  font-family: var(--sw-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--sw-pale-soft);
}

.music__retro-source {
  margin: 1.2rem 0 0;
  font-family: var(--sw-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  color: rgba(217, 210, 180, .22);
}

.music__retro-block {
  margin: 0 0 1.2rem;
}

.music__retro-block .music__retro-line {
  color: var(--sw-pale-soft);
}

/* ------------------------------------------------------------- ACT VII */
.room--hidden {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(5, 23, 26, .9), #010708);
}

.hidden {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.hidden__machine {
  width: 100%;
  max-width: 46rem;
}

.hidden__plate {
  width: 100%;
  max-width: 46rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--sw-hair);
  background: rgba(217, 210, 180, .028);
}

.hidden__plate-label {
  margin: 0 0 .8rem;
  font-family: var(--sw-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--sw-brass);
}

.hidden__names {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden__name {
  font-family: var(--sw-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--sw-pale-faint);
  transition: color var(--sw-dur) var(--sw-ease);
}

.hidden__name.is-heard {
  color: var(--sw-brass-lit);
}

.hidden__exit {
  margin-top: .2rem;
}

/* ---------------------------------------------------------- transitions */
/*
 * The move from one room to the next.
 *
 * The stage carries the state, and the state is applied in two beats: the
 * old room leaves, the new room arrives. The transition property is put on
 * the element BEFORE the state changes - otherwise the browser has nothing
 * to interpolate and the move does not happen at all.
 */
.sw-stage--moving {
  will-change: opacity, transform, clip-path;
}

.sw-stage--move-fade {
  transition: opacity 240ms var(--sw-ease);
}

.sw-stage--move-iris {
  clip-path: circle(150% at 50% 50%);
  transition:
    opacity 240ms var(--sw-ease),
    clip-path 340ms var(--sw-ease);
}

.sw-stage--move-slide-right,
.sw-stage--move-slide-left {
  transition:
    opacity 240ms var(--sw-ease),
    transform 280ms var(--sw-ease);
}

.sw-stage--out {
  opacity: 0;
}

.sw-stage--move-iris.sw-stage--out {
  clip-path: circle(0% at 50% 50%);
}

.sw-stage--move-iris.sw-stage--in {
  clip-path: circle(150% at 50% 50%);
}

.sw-stage--move-slide-right.sw-stage--out {
  transform: translateX(4%);
}

.sw-stage--move-slide-left.sw-stage--out {
  transform: translateX(-4%);
}

.sw-stage--move-slide-right.sw-stage--in,
.sw-stage--move-slide-left.sw-stage--in {
  transform: none;
}

/* -------------------------------------------------------------- motion */
@keyframes sw-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

/* ----------------------------------------------------------- narrow */
/*
 * A phone in daylight is the worst reading condition there is, and this
 * collection is full of small type in a dark room. So on a narrow screen
 * the auxiliary text is lifted: the dimmest of it comes up to the second
 * brightest tone, the letters grow by a step, and every button becomes a
 * target a thumb can hit.
 *
 * None of this touches the aquarium. Every selector below is a room's own.
 */
@media (max-width: 640px) {
  .music__deck {
    grid-template-columns: 1fr;
  }

  .music__disc {
    width: 9rem;
  }

  .music__play {
    justify-self: stretch;
  }

  .room__exits .room__button {
    flex: 1 1 12rem;
    text-align: center;
  }

  .writing__page {
    min-height: 38vh;
  }

  /* The letters themselves. */
  .room__mark {
    font-size: .72rem;
    letter-spacing: .2em;
  }

  .room__line {
    font-size: 1.06rem;
    color: var(--sw-pale);
  }

  /* The buttons: bigger, and with a thumb-sized target. */
  .room__button {
    font-size: .78rem;
    letter-spacing: .14em;
    padding: .85rem 1.25rem;
    min-height: 44px;
  }

  .room__exits .room__button {
    flex: 1 1 100%;
    font-size: .76rem;
  }

  /* The dimmest of the small print, lifted to something a phone can
     actually show. */
  .room__button--quiet,
  .exhibit__caption,
  .window__title,
  .writing__privacy,
  .writing__count,
  .music__rest,
  .gallery__prompt,
  .ritual__card-row {
    color: var(--sw-pale-soft);
  }

  .room__button--quiet {
    border-color: var(--sw-hair-strong);
  }

  .exhibit__caption {
    font-size: .74rem;
  }

  .window__title {
    font-size: .74rem;
  }

  .writing__privacy,
  .writing__count,
  .music__rest {
    font-size: .76rem;
  }

  .gallery__prompt {
    font-size: .7rem;
  }

  .ritual__card-row {
    font-size: .78rem;
  }

  /* The terminal's own lines are small by nature; they still have to be
     readable on a phone. */
  .term__line {
    font-size: .82rem;
  }

  .term__field {
    font-size: .95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-playing .music__disc {
    animation: none;
  }

  .exhibit__line.is-new {
    animation: none;
  }
}