: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);
}
/* carrying the passages off the site; rendered per request so it can only
   ever contain what has surfaced */
.text-take {
  margin-top: clamp(.7rem, 2vh, 1.1rem);
}
.text-take a {
  color: var(--gold-dim);
  text-decoration: none;
  font-size: clamp(.56rem, 1.3vh, .66rem);
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold-ghost);
  padding-bottom: .25em;
}
.text-take a:hover { color: var(--gold); border-bottom-color: var(--gold-hair); }
.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;
}
/* These were set as a footnote in small italic, which made the only two ways
   out of the site the least visible thing on it. They are destinations now. */
.guide-more {
  margin-top: clamp(1.4rem, 3.4vh, 2.2rem);
  color: var(--ash);
  font-size: clamp(.78rem, 1.7vh, .88rem);
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1rem;
  align-items: center;
}
/* The standing order's opener is a <button> because it opens a panel rather
   than going anywhere. It has to look identical to the Field Guide's links or
   the door grows a second kind of control. */
.guide-more a, .guide-more button {
  color: var(--gold);
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  font-style: normal;
  font-size: clamp(.62rem, 1.4vh, .72rem);
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  border: 1px solid var(--gold-ghost);
  padding: .7rem 1.2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: border-color .4s ease, background .4s ease;
}
.guide-more a:hover, .guide-more a:focus-visible,
.guide-more button:hover, .guide-more button:focus-visible {
  border-color: var(--gold-hair);
  background: rgba(201, 169, 106, .05);
  outline: none;
}
.guide-more .lead-in { flex: 1 0 100%; text-align: center; }

/* ---- the standing order: the veil, the panel, the seal ---- */

.order-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(6, 5, 3, .82);
  /* The page behind stays legible but withdraws, so the panel reads as
     something opening in front of the record rather than replacing it. */
  backdrop-filter: blur(3px);
  animation: order-in .5s ease both;
}
.order-veil[hidden] { display: none; }
@keyframes order-in { from { opacity: 0 } to { opacity: 1 } }

.order-panel {
  position: relative;
  width: min(30rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  padding: clamp(1.8rem, 5vw, 2.8rem);
  /* Not flat black: a little warmth pooled behind the seal, so the panel is
     lit from where the figure sits rather than evenly like a dialog box. */
  background:
    radial-gradient(120% 65% at 50% 62%, rgba(201, 169, 106, .05), transparent 70%),
    linear-gradient(#0d0a07, #070604);
  border: 1px solid var(--gold-ghost);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    inset 0 0 4rem rgba(0, 0, 0, .8),
    0 2rem 5rem rgba(0, 0, 0, .75);
}
/* Corner marks. Two opposite corners rather than four: enough to read as a
   ruled document, not so much that it reads as a border. */
.order-panel::before, .order-panel::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold-hair);
  opacity: .5;
  pointer-events: none;
}
.order-panel::before { top: 9px; left: 9px; border-width: 1px 0 0 1px; }
.order-panel::after { bottom: 9px; right: 9px; border-width: 0 1px 1px 0; }
.order-panel h2 {
  color: var(--gold-dim);
  font-weight: normal;
  font-size: clamp(.6rem, 1.4vh, .72rem);
  letter-spacing: .42em;
  text-indent: .42em;
}
.order-panel #order-note {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(.76rem, 1.7vh, .86rem);
  margin: 1.1rem 0 1.6rem;
}
.order-close {
  position: absolute;
  top: .5rem; right: .7rem;
  background: none;
  border: 0;
  color: var(--gold-dim);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  padding: .3rem .5rem;
  cursor: pointer;
}
.order-close:hover, .order-close:focus-visible { color: var(--gold); outline: none; }

.order-panel input[type=email] {
  width: 100%;
  min-height: 44px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--gold-ghost);
  color: var(--gold);
  font: inherit;
  font-size: clamp(.8rem, 1.7vh, .9rem);
  padding: .75rem .9rem;
  text-align: center;
}
.order-panel input[type=email]::placeholder { color: var(--ash); font-style: italic; }
.order-panel input[type=email]:focus-visible { border-color: var(--gold-hair); outline: none; }

/* The seal. The header crest brought to a stop and held: twelve orbits, one
   per account, lighting one at a time for as long as the visitor holds. */
.order-seal {
  display: block;
  margin: 1.8rem auto .6rem;
  width: clamp(200px, 46vw, 236px);
  aspect-ratio: 1;
  height: auto;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* A press-and-hold on a touch screen otherwise selects text, drags the
     canvas as an image, or opens the callout menu halfway through. Every one
     of these has to be off on the button AND on what is inside it, because
     the long press lands on whichever child is under the thumb. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.order-seal * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  pointer-events: none;   /* the press belongs to the button, not its parts */
}
.order-seal canvas {
  display: block;
  width: 100%; height: 100%;
  transition: filter .6s ease;
}
/* Sealed, the whole figure carries a little heat. */
.order-seal.sealed canvas { filter: drop-shadow(0 0 7px rgba(201, 169, 106, .45)); }
.order-seal .seal-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-dim);
  font-size: 1.3rem;
  transition: color .3s ease, transform .3s ease, text-shadow .3s ease;
}
.order-seal:hover .seal-mark, .order-seal:focus-visible .seal-mark { color: var(--gold); }
.order-seal:focus-visible { outline: 1px solid var(--gold-hair); outline-offset: 6px; }
.order-seal.holding .seal-mark { color: var(--gold); transform: scale(1.08); }
.order-seal.sealed .seal-mark {
  color: var(--gold);
  text-shadow: 0 0 1.4rem rgba(201, 169, 106, .55);
}
.order-seal[disabled] { cursor: default; }
.order-seal[disabled]:not(.sealed) { opacity: .55; }

/* The tally. Same numerals as the rail, so the seal is visibly counting the
   same twelve the record is counting. */
.seal-tally {
  margin: 0 0 .5rem;
  color: var(--gold-dim);
  font-size: clamp(.58rem, 1.3vh, .68rem);
  letter-spacing: .34em;
  text-indent: .34em;
  transition: color .3s ease, text-shadow .4s ease;
}
.order-seal.holding ~ .seal-tally { color: var(--gold); }
.order-seal.sealed ~ .seal-tally {
  color: var(--gold);
  text-shadow: 0 0 1.2rem rgba(201, 169, 106, .5);
}

.order-hold {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(.7rem, 1.6vh, .78rem);
  margin: 0;
  min-height: 1.2em;
}

/* The stamp. Struck across the panel when the twelve close, the way an
   executed document carries the fact of its own execution. */
.order-stamp {
  /* In the flow rather than pinned to a corner: struck across a panel it can
     overrun, it landed on top of the line telling the reader what happens
     next, and the panel scrolls so the overhang was cut off besides. */
  /* Absent, not merely invisible: an empty bordered box holding space under
     the message before anything is sealed reads as a gap in the panel. */
  display: none;
  width: fit-content;
  margin: 1.5rem auto .2rem;
  padding: .35rem .8rem;
  border: 1px solid rgba(201, 169, 106, .5);
  color: rgba(201, 169, 106, .62);
  font-size: clamp(.52rem, 1.2vh, .6rem);
  letter-spacing: .26em;
  text-indent: .26em;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
  transform: rotate(-4.5deg);
}
.order-stamp.struck {
  display: block;
  animation: stamp-down .5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes stamp-down {
  from { opacity: 0; transform: rotate(-9deg) scale(1.7); }
  to   { opacity: 1; transform: rotate(-4.5deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .order-veil { animation: none; }
  .order-seal canvas { transition: none; }
  .order-seal .seal-mark { transition: none; }
  .order-stamp.struck { animation: none; }
}

/* ---- the standing order ---- */

/* The label is for screen readers and autofill; the field carries its own
   placeholder, and a visible label above one input reads as a form to fill in
   rather than a line to leave something on. */
.order-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.order-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .7rem 1rem;
  margin-top: clamp(1.4rem, 3.4vh, 2.2rem);
}
.order-form input[type=email] {
  flex: 1 1 18rem;
  max-width: 26rem;
  min-height: 44px;
  background: rgba(11, 9, 6, .5);
  border: 1px solid var(--gold-ghost);
  color: var(--gold);
  font: inherit;
  font-size: clamp(.8rem, 1.7vh, .9rem);
  padding: .7rem .9rem;
  text-align: center;
}
.order-form input[type=email]::placeholder { color: var(--ash); font-style: italic; }
.order-form input[type=email]:focus-visible {
  border-color: var(--gold-hair);
  outline: none;
}
/* Matches the Field Guide's buttons exactly, so the door has one kind of
   control rather than two that nearly agree. */
.order-form button {
  color: var(--gold);
  background: none;
  font: inherit;
  font-size: clamp(.62rem, 1.4vh, .72rem);
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  border: 1px solid var(--gold-ghost);
  padding: .7rem 1.2rem;
  min-height: 44px;
  cursor: pointer;
}
.order-form button:hover, .order-form button:focus-visible {
  border-color: var(--gold-hair);
  background: rgba(201, 169, 106, .05);
  outline: none;
}
.order-form button[disabled] { opacity: .5; cursor: default; }
.order-said {
  margin-top: .9rem;
  min-height: 1.2em;              /* reserve the line so nothing below jumps */
  color: var(--ash);
  font-style: italic;
  font-size: clamp(.72rem, 1.6vh, .82rem);
  text-align: center;
}
.order-said.bad { color: var(--gold-dim); }

/* ---- the room tone ---- */

#ambience {
  position: fixed;
  right: calc(var(--frame) + var(--gutter));
  bottom: calc(var(--frame) + var(--gutter));
  z-index: 5;
  background: rgba(11, 9, 6, .72);
  border: 1px solid var(--gold-ghost);
  color: var(--gold-dim);
  font-family: Constantia, Georgia, serif;
  font-size: clamp(.54rem, 1.2vh, .62rem);
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  padding: .62rem .9rem;
  min-height: 40px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: color .4s ease, border-color .4s ease;
}
#ambience:hover, #ambience:focus-visible {
  color: var(--gold); border-color: var(--gold-hair); outline: none;
}
#ambience[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-hair); }
@media (max-width: 560px) {
  #ambience { right: calc(var(--frame) + .4rem); bottom: calc(var(--frame) + .4rem); }
}

/* ---- 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 record ---- */
/* The door sits in the first screen; the record descends below it. Entries
   surface one at a time, so this is never a wall of ten things to pick from. */

.record { margin-top: clamp(2.2rem, 7vh, 4.5rem); }

.descend {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
.descend span {
  width: 1px;
  height: clamp(34px, 7vh, 62px);
  background: linear-gradient(180deg, transparent, var(--gold-hair), transparent);
}

.record h2 {
  color: var(--gold-dim);
  font-weight: normal;
  font-size: clamp(0.62rem, 1.4vh, 0.74rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}
.record-note {
  color: var(--ash);
  font-style: italic;
  font-size: clamp(0.74rem, 1.7vh, 0.86rem);
  letter-spacing: 0.06em;
  margin-top: 0.7rem;
  margin-bottom: clamp(1.2rem, 3.4vh, 2.2rem);
  opacity: 0.9;
}

.ledger { list-style: none; text-align: left; }

/* the row grid lives on whatever holds the three cells: the <li> when sealed,
   the <a> when filed. Putting it on both nests one grid inside the other and
   squeezes the link into the first column. */
.ledger .sealed,
.ledger a {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.85rem 0.2rem;
}
.ledger li { border-top: 1px solid var(--gold-ghost); }
.ledger li:last-child { border-bottom: 1px solid var(--gold-ghost); }
.ledger a { text-decoration: none; color: inherit; }

.ledger .num {
  color: var(--gold-dim);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
.ledger .name { font-size: clamp(0.9rem, 2vh, 1.05rem); }
.ledger .meta {
  color: var(--ash);
  font-size: clamp(0.6rem, 1.35vh, 0.7rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  white-space: nowrap;
}

.ledger .filed .name { color: var(--gold); }
.ledger .filed a { transition: background 0.4s ease; }
.ledger .filed a:hover,
.ledger .filed a:focus-visible {
  background: rgba(201, 169, 106, 0.05);
  outline: none;
}
.ledger .filed a:hover .num,
.ledger .filed a:focus-visible .num { color: var(--gold); }
.ledger .filed a:focus-visible { box-shadow: inset 2px 0 0 var(--gold); }

/* a sealed account has no name yet — naming it would give it weight early */
.ledger .sealed { opacity: 0.42; }
.ledger .sealed .name {
  font-style: italic;
  letter-spacing: 0.12em;
  font-size: clamp(0.78rem, 1.7vh, 0.9rem);
}

/* ---- an entry ---- */

body.is-entry { align-items: flex-start; }
body.is-entry main { padding-top: clamp(1.4rem, 5vh, 3.4rem); }

.numeral {
  color: var(--gold-dim);
  font-size: clamp(0.72rem, 1.6vh, 0.86rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  margin-bottom: clamp(0.5rem, 1.4vh, 0.9rem);
}
h1.entry-title {
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  font-size: clamp(1.1rem, min(4.4vw, 3.6vh), 2rem);
  white-space: normal;
}

.account {
  margin-top: clamp(1.4rem, 4vh, 2.6rem);
  text-align: left;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.account p {
  line-height: 1.85;
  font-size: clamp(0.9rem, 2vh, 1.02rem);
  margin-bottom: 1.05rem;
}
.account p:first-child { color: var(--gold); }
.account p:last-child { margin-bottom: 0; }

/* The one mention of the channel, on an account that is already open. Sized
   to sit under the account like a filing note, not above it like a banner. */
.signal {
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  text-align: center;
  font-size: clamp(0.62rem, 1.4vh, 0.72rem);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--ash);
}
.signal a {
  color: var(--gold-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-ghost);
}
.signal a:hover,
.signal a:focus-visible { color: var(--gold); border-bottom-color: currentColor; outline: none; }

.onward {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: clamp(1.8rem, 5vh, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--gold-ghost);
}
.onward a {
  color: var(--ash);
  text-decoration: none;
  font-size: clamp(0.62rem, 1.4vh, 0.72rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}
.onward a:only-child { margin-left: auto; }
.onward a:hover,
.onward a:focus-visible { color: var(--gold); outline: none; }
.onward a:focus-visible { text-decoration: underline; }

@media (max-width: 460px) {
  .ledger li, .ledger a { grid-template-columns: 2.4rem 1fr; }
  .ledger .meta { grid-column: 2; text-indent: 0; }
  .onward { flex-direction: column; align-items: flex-start; }
  .onward a:only-child { margin-left: 0; }
}

/* very short landscape screens: let the video give up a little more height */
@media (max-height: 480px) {
  :root { --tx-h: 42vh; }
  @supports (height: 100dvh) {
    :root { --tx-h: 42dvh; }
  }
}

/* the caption's wide tracking orphans its last word on a narrow phone */
@media (max-width: 420px) {
  figcaption { letter-spacing: .16em; text-indent: .16em; gap: .5rem; }
  figcaption .tick { width: 14px; }
}

/* narrow phones: soften the widest tracking so the title never clips.
   The title's spaces are non-breaking, so it can never wrap out of trouble -
   tracking is the only lever, and at 320px the 0.26em step still clips. */
@media (max-width: 420px) {
  h1 { letter-spacing: 0.26em; text-indent: 0.26em; }
}
@media (max-width: 360px) {
  h1 { letter-spacing: 0.09em; text-indent: 0.09em; }
}


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


/* ---- what this device has not read ---- */
.unread-mark {
  margin-left: .6rem;
  font-size: .54rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  border: 1px solid var(--gold-ghost);
  padding: 1px 5px;
  white-space: nowrap;
}
.unread-note {
  margin: .9rem 0 0;
  text-align: center;
  font-family: Constantia, Georgia, serif;
  font-style: italic;
  font-size: clamp(.76rem, 1.7vh, .88rem);
  color: var(--ash);
}

/* the night XI files, the record reads backward */
.is-looping .looped-line { color: var(--gold); }

/* ---- print ----
 * Someone will print this. It should arrive as a record: a typeset document on
 * paper, not a screenshot of a dark website. Everything that exists only to be
 * interactive is dropped, and the accounts are what remain.
 */
@media print {
  :root { --frame: 0; --gutter: 0; }
  html, body {
    background: #fff !important;
    color: #14110d !important;
    padding: 0 !important;
    font-size: 11pt;
  }
  #sigil, #crestbar, #nowplaying, #ambience, .edge, .rail, #vignette,
  .screen, video, .deaddrop, .watch, .guide-more, .to-text, .reader-way,
  .unread-mark, .unread-note, .np-list {
    display: none !important;
  }
  main, .wrap, .view { padding: 0 !important; max-width: 100% !important; }
  h1, h2, h3 { color: #14110d !important; page-break-after: avoid; }
  a { color: #14110d !important; text-decoration: none; }
  /* a printed link that hides its destination is a dead end on paper */
  .ledger a[href^="/e/"]::after { content: " (thefracturedarchive.org" attr(href) ")"; font-size: 8pt; }
  .account p, .passage p, .preface p { orphans: 3; widows: 3; }
  .account, .passage { page-break-inside: avoid; }
  .rule, .rule.dim { border: 0; }
  footer { border-top: 1px solid #999; padding-top: 6pt; font-size: 8pt; }
}