:root {
  --ink: #0b0906;
  --deep: #060403;
  --gold: #c9a96a;
  --gold-dim: #8a744e;
  --gold-ghost: rgba(201, 169, 106, 0.14);
  --gold-hair: rgba(201, 169, 106, 0.32);
  --ash: #6b6257;
  /* how much of the viewport height the video may take */
  --tx-h: 50vh;
  /* The ruled frame and the content padding were set independently, which left
     a 6px gutter on a phone: text ran straight into the rule and read as
     overflowing its box. Deriving one from the other guarantees clearance at
     every width. */
  --frame: clamp(0.5rem, 2.2vw, 1.9rem);
  --gutter: clamp(0.95rem, 2.6vw, 1.3rem);
}
@supports (height: 100dvh) {
  :root { --tx-h: 50dvh; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 28%, var(--ink) 0%, var(--deep) 62%, #030201 100%);
  color: var(--gold-dim);
  font-family: Constantia, Georgia, "Palatino Linotype", serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* always clear the frame by a full gutter, on every axis */
  padding: calc(var(--frame) + var(--gutter)) calc(var(--frame) + var(--gutter));
}

main {
  width: 100%;
  max-width: 780px;
  text-align: center;
}

/* ---- header ---- */

.sigil {
  color: var(--gold-dim);
  font-size: clamp(0.7rem, 1.6vh, 0.9rem);
  margin-bottom: clamp(0.4rem, 1.4vh, 1.1rem);
  opacity: 0.7;
}

h1 {
  color: var(--gold);
  font-weight: normal;
  font-size: clamp(1.05rem, min(3.6vw, 3.4vh), 2.05rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* balance the tracking */
  margin-bottom: clamp(0.4rem, 1.3vh, 1rem);
  text-shadow: 0 0 34px rgba(201, 169, 106, 0.16);
  white-space: nowrap;
}

.epigraph {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(0.78rem, 1.8vh, 0.92rem);
  letter-spacing: 0.1em;
  margin-bottom: clamp(0.7rem, 2vh, 1.6rem);
}

/* thin rule with a small rotated-square ornament */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 auto clamp(1rem, 3.4vh, 2.8rem);
  max-width: 340px;
}
.rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hair));
}
.rule span:last-child {
  background: linear-gradient(90deg, var(--gold-hair), transparent);
}
.rule i {
  width: 5px;
  height: 5px;
  background: var(--gold-dim);
  transform: rotate(45deg);
  flex: none;
}
.rule.dim { max-width: 220px; opacity: 0.55; margin-bottom: clamp(0.5rem, 1.2vh, 1rem); }

/* ---- the artifact ---- */
/* width is capped by BOTH the column and what 16:9 can occupy of --tx-h */

.artifact {
  width: min(100%, calc(var(--tx-h) * 16 / 9));
  margin: 0 auto;
}

.frame {
  position: relative;
  border: 1px solid var(--gold-hair);
  padding: 10px;                      /* obsidian mat between frames */
  background:
    radial-gradient(ellipse at 50% 120%, rgba(201, 169, 106, 0.05), transparent 60%),
    #000;
  box-shadow:
    0 0 0 1px rgba(201, 169, 106, 0.07),
    0 0 90px rgba(201, 169, 106, 0.07),
    inset 0 0 24px rgba(0, 0, 0, 0.9);
}

/* corner ticks */
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold-dim);
  border-style: solid;
  opacity: 0.8;
}
.frame::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.frame::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  filter: saturate(0.96);
}

/* ---- play veil ---- */

#veil {
  position: absolute;
  inset: 10px;
  border: 0;
  background: radial-gradient(ellipse at center, rgba(4, 3, 2, 0.12), rgba(4, 3, 2, 0.58));
  color: var(--gold);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vh, 1rem);
  transition: background 0.5s ease;
}
#veil:hover { background: radial-gradient(ellipse at center, rgba(4, 3, 2, 0.02), rgba(4, 3, 2, 0.5)); }
#veil.gone { display: none; }

#veil .ring {
  width: clamp(52px, 9.5vh, 74px);
  height: clamp(52px, 9.5vh, 74px);
  border: 1px solid var(--gold);
  background: rgba(4, 3, 2, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(201, 169, 106, 0.18), inset 0 0 18px rgba(201, 169, 106, 0.08);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
#veil:hover .ring {
  border-color: var(--gold);
  box-shadow: 0 0 60px rgba(201, 169, 106, 0.3), inset 0 0 22px rgba(201, 169, 106, 0.14);
}
#veil .tri {
  width: 0;
  height: 0;
  border-left: 16px solid var(--gold);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}
#veil .label {
  font-size: 0.68rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--gold-dim);
}
#veil:hover .label { color: var(--gold); }

/* ---- caption ---- */

figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  color: var(--ash);
  font-size: clamp(0.58rem, 1.35vh, 0.7rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-top: clamp(0.55rem, 1.5vh, 1.1rem);
}
figcaption .tick {
  width: 26px;
  height: 1px;
  background: var(--gold-ghost);
}

/* ---- notice + footer ---- */

.notice {
  margin-top: clamp(1rem, 3.4vh, 2.9rem);
  line-height: 1.75;
  font-size: clamp(0.84rem, 1.95vh, 0.98rem);
}
.notice .faint {
  color: var(--ash);
  font-size: clamp(0.74rem, 1.7vh, 0.85rem);
  margin-top: clamp(0.3rem, 0.9vh, 0.7rem);
  font-style: italic;
  opacity: 0.85;
}

footer { margin-top: clamp(1rem, 3.6vh, 3.2rem); }
footer p {
  color: var(--ash);
  font-size: clamp(0.62rem, 1.4vh, 0.72rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  opacity: 0.7;
}

/* ---- the instrument ----
   Fixed behind everything, never interactive, and low enough that the trailer
   stays the loudest thing on the page. If sigil.js never runs this is an empty
   canvas and the page is exactly what it was before. */

#sigil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.58;
}
main { position: relative; z-index: 1; }

/* on a phone the door already fills the screen; pull it further back so it
   never competes with the title */
@media (max-width: 640px) {
  #sigil { opacity: 0.34; }
}

/* ---- the margins ----
   The page was a narrow column down the middle of a black field, and the
   emptiness read as unfinished rather than austere. Two devices fix it without
   adding a word of content: a ruled frame that gives the void an edge, and a
   running head in each margin, the way a filed document is marked. Both are
   ornament that means something: the right rail reports the record's state. */

.edge {
  position: fixed;
  inset: var(--frame);
  border: 1px solid var(--gold-ghost);
  pointer-events: none;
  z-index: 2;
}
.edge::before, .edge::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--gold-hair);
  border-style: solid;
}
.edge::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.edge::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.rail {
  position: fixed;
  top: 50%;
  z-index: 2;
  pointer-events: none;
  color: var(--ash);
  font-size: .58rem;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .55;
}
.rail-l { left: clamp(1.5rem, 3.1vw, 2.7rem); transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.rail-r { right: clamp(1.5rem, 3.1vw, 2.7rem); transform: translateY(-50%); writing-mode: vertical-rl; }

/* Margins are for the reader on a big screen. On a phone the content needs
   every pixel, so the rails go and the frame tightens. */
@media (max-width: 900px) {
  .rail { display: none; }
}

/* Three terms will not sit on one line of a phone, and wrapping them left a
   stray separator leading the second line. Stack them instead. */
@media (max-width: 560px) {
  .terms { flex-direction: column; gap: .28rem; }
  .terms span + span::before { display: none; }
}

/* ---- terms: the shape of the thing, stated once ---- */

.terms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 4vw, 2.4rem);
  margin: clamp(.7rem, 2vh, 1.1rem) 0 clamp(.8rem, 2.2vh, 1.3rem);
}
.terms span {
  color: var(--ash);
  font-size: clamp(.56rem, 1.3vh, .68rem);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}
.terms span + span { position: relative; }
.terms span + span::before {
  content: "";
  position: absolute;
  left: clamp(-1.2rem, -2vw, -.6rem);
  top: 50%;
  width: 3px; height: 3px;
  background: var(--gold-dim);
  transform: rotate(45deg);
  opacity: .7;
}

/* ---- preface: what the record is, in its own voice ---- */

.preface {
  margin: clamp(1.6rem, 5vh, 3.2rem) auto 0;
  max-width: 34rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 2vh, 1.05rem);
}
.preface p {
  color: #a2988a;
  font-size: clamp(.86rem, 1.95vh, 1rem);
  line-height: 1.8;
}
.preface p:first-child { color: var(--gold); }

/* ---- the watch: when the next one opens ---- */

.watch {
  margin-top: clamp(1.8rem, 5vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.watch-label {
  color: var(--gold-dim);
  font-size: clamp(.56rem, 1.3vh, .66rem);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
}
.countdown {
  color: var(--gold);
  font-family: Constantia, Georgia, serif;
  font-size: clamp(1.1rem, 3.4vh, 1.7rem);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
.watch-sub {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(.72rem, 1.6vh, .82rem);
  opacity: .85;
}
.keep {
  margin-top: .6rem;
  color: var(--gold-dim);
  text-decoration: none;
  font-size: clamp(.56rem, 1.3vh, .66rem);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  border: 1px solid var(--gold-ghost);
  padding: .6rem 1.2rem;
  transition: border-color .4s ease, color .4s ease;
}
.keep:hover, .keep:focus-visible {
  color: var(--gold);
  border-color: var(--gold-hair);
  outline: none;
}

/* ---- sections surface as you reach them ----
   Applied by record.js, so a visitor with no JavaScript never meets a hidden
   section: the class is only added when something is there to remove it. */

.veiled {
  opacity: 0;
  transform: translateY(14px);
}
.shown {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1),
              transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .veiled { opacity: 1; transform: none; }
  .shown { transition: none; }
}

/* ---- the text ---- */

.epigraph-block {
  max-width: 34rem;
  margin: clamp(1.2rem, 4vh, 2.4rem) auto clamp(1.6rem, 5vh, 3rem);
}
.epigraph-block p {
  color: var(--gold);
  font-style: italic;
  font-size: clamp(.95rem, 2.2vh, 1.15rem);
  line-height: 1.8;
}
.passage { margin-bottom: clamp(2.4rem, 7vh, 4.5rem); }
.passage-title {
  color: var(--gold);
  font-weight: normal;
  font-size: clamp(1rem, 2.6vh, 1.35rem);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 3vh, 1.7rem);
}
.verse {
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}
.verse p {
  color: #a2988a;
  font-size: clamp(.88rem, 2vh, 1.02rem);
  line-height: 1.95;
  margin-bottom: .2rem;
}
/* the manuscript breaks its lines deliberately; keep the breath between stanzas */
.verse p:empty { height: .9rem; }
.text-note {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(.76rem, 1.7vh, .86rem);
  margin-top: clamp(1.4rem, 4vh, 2.4rem);
}
.to-text {
  display: inline-block;
  margin-top: 1rem;
  color: var(--gold-dim);
  text-decoration: none;
  font-size: clamp(.56rem, 1.3vh, .66rem);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-ghost);
  padding-bottom: 3px;
}
.to-text:hover, .to-text:focus-visible { color: var(--gold); border-bottom-color: var(--gold-hair); outline: none; }

/* ---- the listed: what you have already witnessed ---- */

.ledger .seen-mark {
  color: var(--gold-dim);
  font-size: .62rem;
  opacity: .75;
  padding-right: .5rem;
}
.ledger li.witnessed .name { color: var(--gold-dim); }
.ledger li.witnessed a:hover .name { color: var(--gold); }

/* ---- the loop: a second reading is not the first ---- */

.loop-line {
  margin-top: clamp(1.4rem, 4vh, 2.2rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold-ghost);
  color: var(--gold-dim);
  font-style: italic;
  font-size: clamp(.82rem, 1.8vh, .94rem);
  letter-spacing: .04em;
}

/* ---- the low signal: the hour the record thins ---- */

.low-signal { --gold: #9fb4bd; --gold-dim: #6b7f88; --ash: #5a656b; }
.low-signal body { filter: saturate(.55); }
.low-signal #sigil { opacity: .34; }

.low-signal-note {
  margin-top: clamp(2rem, 5vh, 3.2rem);
  border: 1px solid rgba(159, 180, 189, .18);
  padding: clamp(1rem, 3vw, 1.6rem);
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.low-signal-note .ls-label {
  color: #9fb4bd;
  font-size: clamp(.56rem, 1.3vh, .66rem);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
}
.low-signal-note p { color: #8b9aa1; font-size: clamp(.78rem, 1.7vh, .88rem); line-height: 1.75; }
.low-signal-note .ls-faint { color: #66727a; font-style: italic; }

/* ---- the reader: the way on ---- */

.reader-way {
  margin-top: 1rem;
  color: var(--gold);
  text-decoration: none;
  font-family: Constantia, Georgia, serif;
  font-style: italic;
  font-size: clamp(.82rem, 1.8vh, .95rem);
  letter-spacing: .06em;
  border-bottom: 1px solid var(--gold-hair);
  padding-bottom: 2px;
}
.reader-way:hover, .reader-way:focus-visible { color: #f0dcae; outline: none; }
.is-reader .account p:last-child { color: var(--gold); font-style: italic; }

/* ---- the field guide ---- */

.guide { margin-top: clamp(2.2rem, 6vh, 4rem); }
.guide h2, .drop h2 {
  color: var(--gold-dim);
  font-weight: normal;
  font-size: clamp(.6rem, 1.4vh, .72rem);
  letter-spacing: .42em;
  text-indent: .42em;
}
.guide-note {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(.72rem, 1.6vh, .82rem);
  margin-top: .6rem;
  margin-bottom: clamp(1.1rem, 3vh, 1.9rem);
  opacity: .9;
}
.fg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  text-align: left;
  border-top: 1px solid var(--gold-ghost);
}
.fg-entry { padding: 1rem .2rem; border-bottom: 1px solid var(--gold-ghost); }
.fg dt {
  color: var(--gold);
  font-size: clamp(.82rem, 1.8vh, .94rem);
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.fg dd {
  margin: 0;
  color: #978d80;
  font-size: clamp(.76rem, 1.65vh, .86rem);
  line-height: 1.7;
  max-width: 34ch;
}
.guide-more {
  margin-top: clamp(1rem, 2.6vh, 1.6rem);
  color: var(--ash);
  font-size: clamp(.74rem, 1.6vh, .84rem);
  font-style: italic;
}
.guide-more a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-hair);
  font-style: normal;
  letter-spacing: .08em;
  padding-bottom: 1px;
}
.guide-more a:hover, .guide-more a:focus-visible {
  color: var(--gold); border-bottom-color: var(--gold-hair); outline: none;
}

/* ---- the dead drop ---- */

.drop { margin-top: clamp(2.2rem, 6vh, 4rem); }
.drop-inner {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  border: 1px solid var(--gold-ghost);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  text-align: left;
}
.drop-qr {
  width: clamp(104px, 15vw, 148px);
  height: auto;
  flex: none;
  display: block;
  border: 1px solid var(--gold-ghost);
}
.drop-text { display: flex; flex-direction: column; gap: .55rem; }
.drop-text p {
  color: #a2988a;
  font-size: clamp(.78rem, 1.7vh, .88rem);
  line-height: 1.7;
}
.drop-text p.faint { color: var(--ash); font-style: italic; font-size: clamp(.72rem, 1.55vh, .8rem); }
@media (max-width: 560px) {
  .drop-inner { flex-direction: column; text-align: center; }
  .drop-text { align-items: center; }
}


/* ---- the relics ----
   A shop, but the record's shop: the object is presented as a plate in a
   catalogue rather than a product in a grid, and the price is stated once,
   quietly, because the Archive does not sell so much as hand on. */

main { max-width: 1080px; }

.relics {
  margin-top: clamp(1.8rem, 5vh, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.1rem, 3vw, 2rem);
}

.relic {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  padding: clamp(.9rem, 2.4vw, 1.3rem);
  border: 1px solid var(--gold-ghost);
  background: rgba(11, 9, 6, .35);
}
.relic:hover { border-color: var(--gold-hair); }

.relic-plate {
  width: 100%;
  border: 1px solid var(--gold-ghost);
  background: #000;
  overflow: hidden;
}
.relic-plate img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.92) contrast(1.04);
}

.relic-name {
  color: var(--gold);
  font-weight: normal;
  font-size: clamp(.86rem, 1.9vh, 1rem);
  letter-spacing: .1em;
  margin-top: .3rem;
}
.relic-line {
  color: #8d8477;
  font-style: italic;
  font-size: clamp(.72rem, 1.55vh, .8rem);
  line-height: 1.65;
  max-width: 30ch;
}
.relic-price {
  color: var(--ash);
  font-size: clamp(.66rem, 1.4vh, .74rem);
  letter-spacing: .22em;
  text-indent: .22em;
}
.relic-take {
  margin-top: .3rem;
  color: var(--gold-dim);
  text-decoration: none;
  font-size: clamp(.56rem, 1.25vh, .64rem);
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  border: 1px solid var(--gold-ghost);
  padding: .55rem 1rem;
  transition: color .4s ease, border-color .4s ease;
}
.relic-take:hover, .relic-take:focus-visible {
  color: var(--gold); border-color: var(--gold-hair); outline: none;
}

.elsewhere {
  margin-top: clamp(2rem, 5vh, 3.2rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--gold-ghost);
}
.elsewhere p { color: var(--ash); font-size: clamp(.76rem, 1.65vh, .86rem); font-style: italic; }
.elsewhere a { color: var(--gold-dim); text-decoration: none; border-bottom: 1px solid var(--gold-ghost); font-style: normal; }
.elsewhere a:hover, .elsewhere a:focus-visible { color: var(--gold); outline: none; }

/* The one control that has to be easy to hit. 33px is below the comfortable
   tap target, and this is the button the whole page exists for. */
.relic-take {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 560px) {
  .relic-take { width: 100%; }
  .relic { padding: 1rem .9rem 1.1rem; }
}

/* ---- the room tone control ---- */
#ambience {
  position: fixed;
  right: calc(var(--frame) + var(--gutter));
  bottom: calc(var(--frame) + var(--gutter));
  z-index: 5;
  background: rgba(11, 9, 6, .78);
  border: 1px solid var(--gold-ghost);
  color: var(--gold-dim);
  font-family: Constantia, Georgia, serif;
  font-size: .6rem;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  padding: .62rem .9rem;
  min-height: 40px;
  cursor: pointer;
}
#ambience:hover, #ambience:focus-visible { color: var(--gold); outline: none; }
#ambience[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-hair); }


/* ---- the room tone: a footer bar ----
 *
 * Full width, fixed to the foot, with the waveform taking every pixel the text
 * does not need. The document reserves exactly this bar's height (see
 * --np-reserve below), so scrolling to the very bottom always clears it.
 *
 * The bar is always present, even with the sound off, because the toggle lives
 * inside it. Hiding the bar when idle would hide the only control that starts
 * the sound.
 */
#nowplaying {
  position: fixed;
  left: var(--frame);
  right: var(--frame);
  bottom: var(--frame);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.1rem);
  padding: .42rem .5rem .42rem .85rem;
  min-height: 52px;
  background: rgba(9, 7, 5, .96);
  border: 1px solid var(--gold-ghost);
  backdrop-filter: blur(6px);
}

/* the waveform is the thing that should be wide.
 * width:100% is load bearing. Without it the canvas takes its intrinsic size
 * from its own width attribute, which the script sets from the measured CSS
 * width: the two feed each other and the drawing freezes at whatever width it
 * happened to have first, no matter how wide its container becomes. Flex sizing
 * belongs to the anchor around it, not to the canvas. */
#nowplaying .np-wave {
  display: block;
  width: 100%;
  height: 30px;
  align-self: center;
}

#nowplaying .np-text {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  min-width: 0;
  flex: 0 1 auto;
}
#nowplaying .np-name {
  font-family: Constantia, Georgia, serif;
  font-size: .62rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
#nowplaying .np-lore {
  font-family: Constantia, Georgia, serif;
  font-size: .74rem;
  font-style: italic;
  color: var(--ash);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}
#nowplaying .np-link {
  font-family: Constantia, Georgia, serif;
  font-size: .54rem;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  /* The 44px tap target is kept, but centred rather than bottom aligned: a
     bottom aligned box dropped the words below the track name beside it. The
     rule moves onto the text itself so it still sits under the words. */
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--gold-hair);
  text-underline-offset: 4px;
  flex: 0 0 auto;
}
#nowplaying .np-link:hover, #nowplaying .np-link:focus-visible {
  color: var(--gold-bright, var(--gold)); outline: none;
}

/* the toggle moves into the bar, so the corner holds one object, not two */
#nowplaying #ambience {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  backdrop-filter: none;
  background: transparent;
  min-height: 44px;
  padding: .5rem .75rem;
  white-space: nowrap;
}

/* Idle: no track loaded yet, so there is nothing to name or draw. The bar stays
   for the toggle, and the waveform keeps its slow resting breath. */
#nowplaying.np-idle .np-text { display: none; }

@media (max-width: 900px) {
  #nowplaying .np-lore { display: none; }
}
@media (max-width: 560px) {
  #nowplaying {
    gap: .5rem;
    padding: .35rem .35rem .35rem .6rem;
    min-height: 46px;
  }
  /* Hold at least half the bar for the waveform. nowrap stopped the name from
     shrinking, so the track title was quietly eating the graphic. */
  #nowplaying .np-wave { height: 24px; flex: 1 1 50%; }
  #nowplaying .np-text { min-width: 0; overflow: hidden; }
  #nowplaying .np-name {
    font-size: .55rem; letter-spacing: .12em; text-indent: .12em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  #nowplaying .np-link { display: none; }
  #nowplaying #ambience { font-size: .54rem; letter-spacing: .14em; padding: .45rem .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  #nowplaying { transition: none; }
}

/* Space at the foot of the document for the bar.
 * ambience-panel.js measures the bar and writes --np-reserve, so the number
 * always matches what is actually on screen rather than a guess in CSS. */
body {
  padding-bottom: calc(var(--frame) + var(--gutter) + var(--np-reserve, 64px));
}


/* ---- the bar, opened ----
 * Grows upward. --np-reserve is remeasured on toggle, so the document's foot
 * padding grows with it and the page moves rather than being covered.
 */
#nowplaying.np-open-state {
  flex-wrap: wrap;
  align-items: flex-end;
  padding-top: .7rem;
}
#nowplaying.np-open-state .np-wavelink {
  flex: 1 0 100%;
  order: -1;
}
/* The drawer is for the set, not a bigger picture of one bed. The waveform
   grows a little; the height goes to the list. */
#nowplaying.np-open-state .np-wave { height: 44px; }
#nowplaying.np-open-state .np-lore {
  display: inline;
  max-width: none;
  white-space: normal;
}

#nowplaying .np-wavelink {
  display: block;
  flex: 1 1 auto;
  min-width: 40px;
  line-height: 0;
  border-bottom: 1px solid transparent;
}
#nowplaying .np-wavelink:hover, #nowplaying .np-wavelink:focus-visible {
  border-bottom-color: var(--gold-hair);
  outline: none;
}

#nowplaying .np-open {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--gold-ghost);
  color: var(--gold-dim);
  font-family: Constantia, Georgia, serif;
  font-size: .8rem;
  line-height: 1;
  min-width: 40px;
  min-height: 44px;
  cursor: pointer;
}
#nowplaying .np-open:hover, #nowplaying .np-open:focus-visible {
  color: var(--gold); border-color: var(--gold-hair); outline: none;
}

/* ---- the crest bar ----
 * A slim header. The sigil canvas is bigger than the bar and the bar clips it,
 * so the figure reads as passing behind the header rather than sitting in it.
 */
#crestbar {
  position: fixed;
  top: var(--frame);
  left: var(--frame);
  right: var(--frame);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 46px;
  padding: 0 .75rem 0 .9rem;
  background: rgba(9, 7, 5, .92);
  border: 1px solid var(--gold-ghost);
  backdrop-filter: blur(6px);
  overflow: hidden;            /* this is what cuts the sigil off */
}
#crestbar .crest-sigil {
  position: absolute;
  /* Larger than the bar on purpose: the clip is the effect. */
  top: -68px;
  left: -58px;
  width: 240px;
  height: 240px;
  pointer-events: none;
}
#crestbar .crest-word {
  position: relative;
  font-family: Constantia, Georgia, serif;
  font-size: .62rem;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  margin-left: 4.6rem;         /* clear of the sigil's bright half */
}
#crestbar .crest-count {
  position: relative;
  margin-left: auto;
  font-family: Constantia, Georgia, serif;
  font-size: .58rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}

/* the page clears the header the same way it clears the footer bar */
body { padding-top: calc(var(--frame) + 46px + var(--gutter)); }

@media (max-width: 560px) {
  #crestbar { height: 40px; gap: .5rem; padding: 0 .45rem 0 .6rem; }
  #crestbar .crest-sigil { top: -48px; left: -42px; width: 150px; height: 150px; }
  #crestbar .crest-word { font-size: .52rem; letter-spacing: .18em; text-indent: .18em; margin-left: 3.4rem; }
  #crestbar .crest-count { font-size: .5rem; letter-spacing: .1em; text-indent: .1em; }
  body { padding-top: calc(var(--frame) + 40px + var(--gutter)); }
  #nowplaying.np-open-state .np-wave { height: 36px; }
  /* opened, the phone bar has room for the things it hides when collapsed */
  #nowplaying.np-open-state .np-link { display: flex; }
}


/* ---- the drawer: the whole set ---- */
#nowplaying .np-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
#nowplaying.np-open-state .np-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 2px;
  flex: 1 0 100%;
  order: 1;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--gold-ghost);
  /* the set is twenty long; cap it and let it scroll rather than swallow the page */
  max-height: min(34vh, 15rem);
  overflow-y: auto;
}
/* One row per account: its numeral and name, then its two sides. */
#nowplaying .np-acct {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .22rem .35rem;
  min-height: 34px;
}
#nowplaying .np-acct-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--ash);
  font-family: Constantia, Georgia, serif;
  font-size: .72rem;
}
#nowplaying .np-sides { display: flex; gap: 2px; flex: 0 0 auto; }
#nowplaying .np-track {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 .3rem;
  background: transparent;
  border: 1px solid var(--gold-ghost);
  color: var(--gold-dim);
  font-family: Constantia, Georgia, serif;
  font-size: .6rem;
  letter-spacing: .1em;
  cursor: pointer;
}
#nowplaying .np-track:hover, #nowplaying .np-track:focus-visible {
  border-color: var(--gold-hair);
  color: var(--gold);
  outline: none;
}
#nowplaying .np-tnum {
  font-size: .56rem;
  letter-spacing: .14em;
  color: var(--gold-dim);
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: right;
}
#nowplaying .np-tname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nowplaying .np-track-on {
  color: var(--obsidian, #0B0906);
  background: var(--gold);
  border-color: var(--gold);
}