/* The Archive skin.
 *
 * Loaded after app.css to bring The Registry into line with
 * thefracturedarchive.org: the same gold, the same serif, the same ruled frame
 * and margin rails, and the same rule that content must clear the frame by a
 * full gutter at every width.
 *
 * It overrides tokens rather than rewriting components, so everything the
 * Registry already does - the Door, the Index, the Oracle, the Rite -
 * keeps working and simply wears the Archive's face.
 *
 * No webfonts: the Archive uses a system serif, which is why its content policy
 * needs no external hosts. Matching it lets this one drop the font hosts too.
 */

:root {
  /* the record's palette, exactly as the site states it */
  --obsidian:   #0B0906;
  --obsidian-2: #0d0b08;
  --ink:        #161412;
  --gold:       #C9A96A;
  --gold-bright:#E4C48D;
  --gold-dim:   #8A744E;
  --ash:        #6B6257;
  --ash-dim:    #574f45;
  --line:       rgba(201, 169, 106, 0.18);
  --line-soft:  rgba(201, 169, 106, 0.10);

  --serif: Constantia, Georgia, "Palatino Linotype", serif;
  --display: Constantia, Georgia, "Palatino Linotype", serif;

  /* frame and gutter are derived from one another so content can never
     collide with the rule, which is the bug that showed on phones */
  --frame: clamp(0.5rem, 2.2vw, 1.9rem);
  --gutter: clamp(0.95rem, 2.6vw, 1.3rem);
}

html, body {
  background:
    radial-gradient(ellipse 120% 70% at 50% 28%, var(--obsidian) 0%, #060403 62%, #030201 100%);
  color: var(--ash);
  font-family: var(--serif);
}

/* ---- the ruled frame, corner ticks and all ---- */
.edge {
  position: fixed;
  inset: var(--frame);
  border: 1px solid rgba(201, 169, 106, 0.14);
  pointer-events: none;
  /* above the sticky top bar, which is z-index 5 and was covering the frame's
     top edge so the rule looked like it started halfway down the page */
  z-index: 6;
}
.edge::before, .edge::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(201, 169, 106, 0.32);
  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; }

/* ---- running heads in the margins ---- */
.rail {
  position: fixed;
  top: 50%;
  z-index: 4;
  pointer-events: none;
  color: var(--ash);
  font-size: .58rem;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .5;
}
.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; }
.rail { z-index: 6; }

/* The ticker ran the full width and so crossed the rule. Holding it inside was
   not enough on a phone: at a 1px gap the scrolling text reads as touching the
   frame, so it gets a real gutter like everything else. */
#ticker, .ticker {
  margin-left: calc(var(--frame) + .55rem);
  margin-right: calc(var(--frame) + .55rem);
}

/* Margins are a big-screen luxury. On a phone the content needs the pixels. */
@media (max-width: 900px) {
  .rail { display: none; }
}

/* ---- hidden must mean hidden ----
   #loader carries the `hidden` attribute once loading finishes, but an author
   rule (.loader { display: flex }) outranks the browser's [hidden] default, so
   it kept painting a 35% black wash over every page at z-index 22. */
[hidden] { display: none !important; }

/* ---- clear the frame ---- */
#topbar { padding-left: calc(var(--frame) + var(--gutter));
          padding-right: calc(var(--frame) + var(--gutter)); }

/* The top bar never wrapped: on a phone its nav is wider than the screen, which
   pushed the document to 619px in a 397px viewport. That horizontal overflow is
   what read as the whole page being offset, and it let the fixed vignette sit
   over unpainted background on the right. */
@media (max-width: 760px) {
  #topbar {
    flex-wrap: wrap;
    row-gap: .35rem;
    padding-left: calc(var(--frame) + .45rem);
    padding-right: calc(var(--frame) + .45rem);
  }
  #nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem .6rem;
    min-width: 0;
  }
  .navlink { font-size: .58rem; letter-spacing: .1em; padding: 2px 4px; }
  .mark-word { font-size: .72rem; letter-spacing: .16em; text-indent: .16em; }
  .rite-meter { font-size: .56rem; padding-left: 8px; }

  /* the bar wraps to two rows on a phone; let the mark hold the first row on
     its own so the nav reads as one group rather than orphaning an item */
  .mark { flex: 1 0 100%; }
  #nav { flex: 1 0 100%; justify-content: flex-start; }
}

/* Panes are read on a phone more than anywhere else: give their content the
   same gutter the frame expects, and never let a long record title push the
   layout sideways. */
@media (max-width: 760px) {
  .pane, .reader-body, .rec, .relic-card { min-width: 0; }
  .rec, .relic-card { overflow-wrap: anywhere; }
}
main, .view, #app, .wrap {
  padding-left: max(var(--gutter), calc(var(--frame) + var(--gutter) - 1rem));
  padding-right: max(var(--gutter), calc(var(--frame) + var(--gutter) - 1rem));
}

/* ---- type, brought into line with the door ---- */
.mark-word {
  font-family: var(--display);
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--gold);
}
h1, h2, h3, .navlink {
  font-family: var(--display);
  font-weight: normal;
  letter-spacing: .06em;
}
.navlink { letter-spacing: .18em; text-transform: uppercase; font-size: .68rem; }

/* the vignette on the site is softer than the one here, which was closing the
   page in too tightly once a frame was drawn around it as well */
#vignette { box-shadow: inset 0 0 200px 40px rgba(0, 0, 0, 0.78); }

/* ---- the room tone control ---- */
#ambience {
  position: fixed;
  right: calc(var(--frame) + .8rem);
  bottom: calc(var(--frame) + .8rem);
  z-index: 7;
  background: rgba(11, 9, 6, .78);
  border: 1px solid rgba(201, 169, 106, .18);
  color: var(--gold-dim);
  font-family: var(--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: rgba(201,169,106,.4); }

/* a nav item that leaves the site */
.navlink-out { text-decoration: none; display: inline-flex; align-items: center; }

:root { --gold-ghost: rgba(201,169,106,.18); --gold-hair: rgba(201,169,106,.4); }


/* ---- 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));
}

main, .view, #app, .wrap {
  padding-bottom: calc(var(--gutter) + var(--np-reserve, 64px));
}


/* ---- 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);
}


/* ---- the crest, adopted into the Registry's own header ----
 * The Registry already has a top bar carrying its navigation. A second bar
 * would stack two headers, so the sigil moves into the existing one.
 */
#topbar.crest-adopted { position: relative; overflow: hidden; }
#topbar.crest-adopted .crest-sigil {
  position: absolute;
  top: -70px; left: -60px;
  width: 240px; height: 240px;
  pointer-events: none;
  z-index: 0;
}
#topbar.crest-adopted > *:not(.crest-sigil) { position: relative; z-index: 1; }
#topbar.crest-adopted .mark { margin-left: 4.2rem; }
#topbar.crest-adopted .crest-count {
  margin-left: auto;
  font-family: var(--serif);
  font-size: .56rem;
  letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
#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: var(--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;
}
#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; }
#nowplaying.np-open-state .np-wave { height: 44px; }
#nowplaying.np-open-state .np-lore { display: inline; max-width: none; white-space: normal; }

@media (max-width: 760px) {
  #topbar.crest-adopted .crest-sigil { top: -58px; left: -52px; width: 180px; height: 180px; }
  #topbar.crest-adopted .mark { margin-left: 3rem; }
  #topbar.crest-adopted .crest-count { font-size: .5rem; letter-spacing: .1em; text-indent: .1em; }
}
@media (max-width: 560px) {
  #nowplaying.np-open-state .np-wave { height: 36px; }
  #nowplaying.np-open-state .np-link { display: flex; }
}