/* The Quiet Observatory
   70% beautifully typeset book, 20% Unix manual, 10% scientific instrument.

   There are no cards, shadows, gradients, rounded containers or decorative
   animation in this file, and that is the point: the design has to get better
   as content accumulates rather than needing decoration to feel finished.

   Everything derives from two systems. A 1.2 modular type scale, and a spacing
   scale built from one line unit. Light is canonical; dark is charcoal, never
   pure black.

   Set in Source Serif 4 and IBM Plex Mono, both self-hosted from
   assets/fonts.css. Nothing here requests anything off this domain. */

:root {
  /* Rule weights follow booktabs' published proportions, in em so they scale
     with the type rather than drifting at large text sizes. The asymmetric
     spacing is the part people miss: a rule needs more air below it than
     above, or it reads as attached to the wrong block. */
  --rule-heavy: .08em;
  --rule-light: .05em;
  --rule-above: .4ex;
  --rule-below: .65ex;

  /* ---- palette (spec/02-design.md, normative) ---- */
  --paper:  #F3F0E7;
  --ink:    #20201D;
  --accent: #7B382E;
  --dim:    #5F5B51;
  --rule:   #CFC9B8;
  --rule-strong: #A9A395;

  --prose: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter",
           "Sitka Text", Cambria, Georgia, serif;
  --meta:  "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
           Consolas, "Liberation Mono", monospace;

  /* The closed content registers from content/briefs/10-rhythm-and-scale.md.
     Titles sit above the display register because an h1 that matches its own
     h2 is no hierarchy. */
  --step--2: 0.78rem;
  --step-0:  1.125rem;
  --step-2:  1.62rem;
  --title-page: 2.45rem;
  --title-home: 3rem;

  /* Body text is 1.125rem. A line-height of 1.5555556 makes the real line box
     exactly 1.75rem, so the spacing scale is a multiple of actual leading
     rather than a close-looking value. */
  --line: 1.75rem;
  --space-xs:  calc(var(--line) * 0.25);
  --space-s:   calc(var(--line) * 0.5);
  --space-m:   var(--line);
  --space-l:   calc(var(--line) * 1.5);
  --space-xl:  calc(var(--line) * 2);
  --space-xxl: calc(var(--line) * 3);

  --measure: 35rem;
  --margin-col: 17rem;
  --gap: 3rem;
  --shell: calc(var(--measure) + var(--margin-col) + var(--gap));
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #1A1A18;
    --ink:    #DCD8CC;
    --accent: #D08A76;   /* lifted so it clears AA on charcoal */
    --dim:    #9B9587;
    --rule:   #3A3833;
    --rule-strong: #565349;
  }
}

/* Uppercase is a visual treatment, applied here rather than written into the
   markup. Baking it into the text content makes NOW the literal string a
   screen reader receives -- VoiceOver announces short all-caps words as
   initialisms, so "NOW" becomes "N.O.W." -- and it also breaks copy-paste,
   in-page search and translation. The DOM keeps the real words.

   Small caps would be the more bookish answer, but Source Serif 4 as served
   ships no smcp table, so the browser would synthesise them by shrinking full
   caps. Uppercase mono with tracking is both the honest option and the one the
   "20% Unix manual" half of the brief actually asks for. */
.masthead .name, .nav a, .section, .catalogue .entry, .state,
.meta .k, .standing, .callout-label, .record-facts dt, .record-topics,
.masthead-companion,
.prose h3, .prose h6 {
  text-transform: uppercase;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--space-xl) 1.5rem var(--space-xxl);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: var(--step-0);
  line-height: 1.5555556;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

/* Digits line up everywhere they are compared -- dates, counts, catalogue
   numbers. This is most of what makes a ledger read as a ledger.
   The slashed zero belongs to the "scientific instrument" tenth of the brief:
   a browser without the feature simply ignores it. Small caps are deliberately
   never used -- Source Serif 4 ships no smcp table, so the browser would
   synthesise them by shrinking full caps, which reads thin against warm ivory.
   Uppercase mono with tracking does that job instead. */
time, .ord, .meta, .record-facts, .record-topics, .state, .standing,
.masthead, .nav {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* One metadata voice. Component rules add layout, weight or colour, but not a
   private size; that is how the type scale stays inspectable. */
.masthead, .nav, .standing, .record-topics, .callout-label, .section,
.catalogue .ord, .catalogue .entry, .state, .ledger time, .record-facts,
.meta, .masthead-companion, .prose h3, .prose h4, .prose h5, .prose h6,
.prose code, .prose pre, .prose sup a,
.prose .callout-margin, .prose th {
  font-family: var(--meta);
  font-size: var(--step--2);
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1.5rem;
  top: 1rem;
  background: var(--paper);
  padding: .5rem 1rem;
  border: 1px solid var(--ink);
  z-index: 10;
}

/* ---- the register mark ----------------------------------------------------
   An SVG, not U+25C9: neither self-hosted face covers that codepoint, so the
   glyph would fall back to an arbitrary system font at its own weight and
   baseline, or render as tofu. As SVG it is exactly the size we ask for.
   It marks current position -- /now, the location line -- and nothing else. */

.mark {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.17em;
  color: var(--accent);
  stroke: currentColor;
  stroke-width: 1.55;
  flex: none;
}
.mark-outer { fill: none; }
.mark-core { fill: currentColor; stroke: none; }
.mark-large {
  width: clamp(3.25rem, 7vw, 5.5rem);
  height: auto;
  vertical-align: baseline;
  stroke-width: 1.05;
}
.sep { color: var(--dim); font-family: var(--meta); }

/* ---- shell ---- */

.masthead, .nav, main, .foot { max-width: var(--shell); margin-inline: auto; }

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  letter-spacing: .08em;
}
.masthead .name { text-decoration: none; font-weight: 500; }
.masthead .name:hover { color: var(--ink); }
.name-slot { display: block; min-width: 1px; min-height: 1em; }
.stamp { color: var(--dim); }
.stamp .only { color: var(--ink); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  letter-spacing: .08em;
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-xl);
}
.nav a {
  text-decoration: none;
  color: var(--dim);
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  padding: .15rem 0;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: .35em;
}

/* ---- homepage opening -----------------------------------------------------
   Not a hero: no image, no gradient, no call to action. The name is simply set
   at the size a title deserves, which is the one gesture the page was missing.
   Everything else on the site stays quiet because this is loud enough. */

.home-title {
  font-size: var(--title-home);
  line-height: 1.05;
}
.home-title, .page-title { font-weight: 600; text-wrap: balance; }
.lede { font-size: var(--step-2); line-height: 1.25; margin: 0 0 var(--space-s); }
.deck {
  font-size: var(--step-0);
  color: var(--dim);
  margin: 0 0 var(--space-m);
}
.standing {
  letter-spacing: .1em;
  color: var(--dim);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
}
.opening-mark { display: none; }

@media (min-width: 72rem) {
  .opening {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) var(--margin-col);
    column-gap: var(--gap);
  }
  .opening > *:not(.opening-mark) { grid-column: 1; }
  .opening-mark {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 4;
    justify-self: start;
    align-self: start;
    padding-top: .35rem;
  }
}

main > section { margin-bottom: var(--space-xxl); }
section.now { max-width: var(--measure); }
main > section > .meta:last-child { margin-top: var(--space-s); }

/* ---- page masthead --------------------------------------------------------
   The homepage keeps its opening copy below the rule. Putting the rule directly
   under the name makes it the same site device as every other h1 while leaving
   the tagline, deck and standing line to read as an opening rather than facts. */

.page-title {
  font-size: var(--title-page);
  line-height: 1.08;
  margin: 0 0 var(--space-m);
}
.page-masthead { max-width: var(--measure); margin-bottom: var(--space-l); }
.page-masthead-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-s);
  align-items: baseline;
  padding-bottom: calc(var(--space-xs) + var(--rule-below));
  border-bottom: var(--rule-light) solid var(--rule-strong);
}
.page-masthead .page-title { margin: 0; min-width: 0; }
.masthead-companion {
  justify-self: end;
  margin: 0;
  letter-spacing: .1em;
  color: var(--dim);
}
.record-topics {
  margin: calc(var(--space-xs) + var(--rule-below)) 0 0;
  letter-spacing: .04em;
  color: var(--dim);
}
.opening.page-masthead { max-width: var(--shell); margin-bottom: var(--space-xxl); }
.opening-copy { margin-top: var(--space-s); }

/* ---- prose ---- */

.prose { max-width: var(--measure); overflow-wrap: break-word; }
.prose p { margin: 0; }
.record .prose > p:first-child { font-weight: 600; }

/* Direct paragraphs get seven-eighths of a line: large enough to read as a
   pause in a 35rem measure, short enough that consecutive paragraphs remain an
   argument rather than becoming a stack of fragments. */
.prose p:not(.callout-label) + p:not(.callout-label) { margin-top: calc(var(--line) * .875); }
/* Keep this broad enough to cross section wrappers, but low-specificity so the
   deliberate paragraph, heading and callout rhythms below remain in charge. */
.prose :where(p, ul, ol, blockquote, pre, table, hr, .callout, .prose-section)
  + :where(p, ul, ol, blockquote, pre, table, hr, .callout, .prose-section) {
  margin-top: var(--space-m);
}
.prose > .prose-section { margin-top: 0; }
.prose :where(h2, h3, h4, h5, h6) + .prose-section { margin-top: 0; }

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--ink);
  text-wrap: balance;
}
.prose h2 {
  font-family: var(--prose);
  font-size: var(--step-2);
  line-height: 1.16;
  font-weight: 600;
  margin: var(--space-xl) 0 1em;
}
.prose h3, .prose h4, .prose h5, .prose h6 { line-height: 1.45; margin: var(--space-l) 0 1em; }
.prose h4 { font-weight: 500; letter-spacing: .03em; }
.prose h5 {
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--dim);
}
.prose h6 {
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--dim);
}
.prose-section-h3 { color: var(--dim); }
.prose-section-h3 :where(h3, h4, h5, h6, a) { color: inherit; }
.prose-section-h3 a { text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 0; padding-left: 1.35em; }
.prose li:first-child { margin-top: 0; }
.prose li + li { margin-top: .35em; }
.prose ol > li::marker { font-variant-numeric: tabular-nums slashed-zero; }

/* Not the accent. The accent is a channel meaning "still running" and nothing
   else -- see internal/model/status.go -- and a quotation is not a state. A
   quote earns its separation from indentation and colour instead. */
.prose blockquote {
  margin: 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--dim);
}
.prose em { font-style: italic; }
.prose strong { font-weight: 600; }
.prose code {
  border-bottom: 1px solid var(--rule);
  padding-bottom: .08em;
}
.prose pre {
  line-height: 1.5;
  overflow-x: auto;
  padding: var(--space-s);
  border: 1px solid var(--rule);
}
/* .prose code applies inside pre as well, so fenced blocks need the inline
   code underline removed. */
.prose pre code { border: 0; padding: 0; }
/* A section break, not a division. A full-measure rule reads as the end of the
   document; a short centred one reads as a pause, which is what a break between
   two movements of the same argument actually is. */
.prose hr {
  border: 0;
  border-top: var(--rule-light) solid var(--rule-strong);
  width: 4rem;
  margin: var(--space-l) auto;
}
.prose table {
  border-collapse: collapse;
  width: 100%;
}
.prose th, .prose td {
  padding: .35rem .5rem .35rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-weight: 500;
  color: var(--ink);
}

/* ---- callouts -------------------------------------------------------------
   Six devices, written in the vault as Obsidian callouts and nowhere else in
   the schema. They exist because a long argument needs somewhere to breathe,
   and because the alternatives were worse: presentation fields in frontmatter,
   which spec/03-architecture.md §4 refuses, or raw HTML, which the renderer
   refuses.

   None of them uses the accent. That colour means "still running" across the
   whole site and a second meaning would cost it its first. These separate
   themselves by measure, size, register and rule weight, the way a book does. */

.prose .callout { margin: var(--space-l) 0 0; }
.prose .callout + :where(p, ul, ol, blockquote, pre, table, hr, .prose-section) {
  margin-top: var(--space-l);
}

.callout-label { font-weight: 500; letter-spacing: .12em; color: var(--dim); margin: 0 0 var(--space-xs); }

.prose .callout p { margin: 0; }
.prose .callout-pull, .prose .callout-question {
  font-size: var(--step-2);
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
}

/* PULL -- one sentence lifted out of the column and set large. Booktabs
   proportions: heavy above, light below, more air under a rule than over it. */
.prose .callout-pull {
  border-top: var(--rule-heavy) solid var(--ink);
  border-bottom: var(--rule-light) solid var(--rule-strong);
  padding: calc(var(--space-s) + var(--rule-below)) 0 var(--space-s);
}

/* QUESTION -- a question standing on its own, used where an abstract passage
   has to be pulled back to the practical. No rules and no label: the air around
   it and the question mark are the whole treatment. */
.prose .callout-question { margin-top: var(--space-xl); }
.prose .callout-question + :where(p, ul, ol, blockquote, pre, table, hr, .prose-section) {
  margin-top: var(--space-xl);
}

/* MARGIN -- an annotation beside the argument, set in the metadata voice so it
   reads as apparatus rather than as more of the sentence. Above 72rem it floats
   completely outside the prose measure, so it sits beside the paragraph it
   follows without shortening that paragraph's line boxes. */
.prose .callout-margin {
  line-height: 1.5;
  color: var(--dim);
  letter-spacing: .03em;
  border-left: var(--rule-heavy) solid var(--rule);
  padding-left: var(--space-s);
}
.prose .callout-margin .callout-label { color: var(--ink); }
@media (min-width: 72rem) {
  .prose .callout-margin {
    float: right;
    clear: right;
    width: var(--margin-col);
    margin-right: calc(-1 * (var(--margin-col) + var(--gap)));
    border-left: 0;
    padding-left: 0;
  }
}

/* ASIDE -- the small detour spec/04-voice.md permits, marked so a reader in a
   hurry can step over it. It stays at the reading size; the indentation and
   dim colour, not a private type size, make it a detour. */
.prose .callout-aside { color: var(--dim); padding: 0 var(--space-s) 0 var(--space-m); }

/* REVISION -- the record correcting itself, which spec/02-design.md asks for by
   name. The doubled rule above is the bookkeeper's convention already used for
   a closed state: do not carry this forward. */
.prose .callout-revision { border-top: 3px double var(--rule-strong); padding-top: var(--space-s); }
.prose .callout-revision .callout-label { color: var(--ink); }

/* UNCERTAIN -- a claim not yet worth defending. A dashed rule, because a dashed
   line has meant provisional on a drawing for as long as there have been
   drawings. */
.prose .callout-uncertain { border-left: 2px dashed var(--rule-strong); padding-left: var(--space-s); }

/* ---- section rules: the Unix-manual register ---- */

.section {
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--dim);
  margin: 0 0 calc(var(--space-s) + var(--rule-below));
  padding-bottom: var(--rule-above);
  border-bottom: var(--rule-light) solid var(--rule-strong);
  display: flex;
  align-items: baseline;
  gap: .6em;
}

/* ---- the catalogue: a printed list, never cards --------------------------
   Columns line up so status and revision become comparable at a glance, which
   is the entire argument for a catalogue over a stack of cards. */

.catalogue, .ledger, .questions { list-style: none; margin: 0; padding: 0; }
.catalogue > li {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr) auto;
  gap: 0 var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.catalogue > li:first-child { border-top: var(--rule-light) solid var(--rule-strong); }
.catalogue > li:has(.state[data-live="false"]) { border-bottom: 3px double var(--rule); }
.catalogue .ord { color: var(--dim); }
.catalogue .entry {
  min-width: 0;
  overflow-wrap: break-word;
  text-decoration: none;
}
.catalogue .entry, .prose h3 { font-weight: 500; letter-spacing: .05em; }
.catalogue .entry:hover { color: var(--ink); }
.catalogue .summary, .ledger .summary { margin: var(--space-xs) 0 0; color: var(--dim); }
.catalogue .summary { grid-column: 2 / -1; }
.catalogue .meta { grid-column: 2 / -1; margin: var(--space-xs) 0 0; }

@media (min-width: 48rem) {
  /* Not ch: that unit resolves against the element's OWN font, and these rows
     inherit the serif body face while their content is mono -- so a 10ch track
     came out ~17% narrower than the mono string it had to hold, and German
     "wird untersucht" overflowed a nowrap column. Sizing to content removes
     the guess entirely. */
  .catalogue > li { grid-template-columns: 3ch minmax(0, 1fr) max-content max-content; }
  .catalogue .state { grid-column: 3; justify-self: start; }
  .catalogue .meta { grid-column: 4; grid-row: 1; justify-self: end; margin: 0; }
  .catalogue .summary { grid-column: 2 / 4; }
}

/* Rubrication. The accent is a channel for one kind of content, not for
   emphasis: it means "still running" and nothing else, so the page can be
   scanned for what is alive without reading it. A closed state is set in the
   quiet colour and terminated by a doubled rule -- the bookkeeper's convention,
   where a double rule under a figure means do not carry this forward. */
.state { letter-spacing: .1em; color: var(--dim); white-space: nowrap; }
.state[data-live="true"] { color: var(--accent); }

/* ---- the ledger: dated lines ---- */

.ledger > li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--space-s);
  padding: var(--space-xs) 0;
  align-items: baseline;
}
.ledger > li:first-child { padding-top: 0; }
.ledger.wide > li {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
}
.ledger time { color: var(--dim); white-space: nowrap; }
.ledger a, .questions a {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .2em;
}
.ledger a:hover { color: var(--ink); }
.ledger .summary { grid-column: 2; }

.questions > li {
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--rule);
}
.questions > li:first-child { padding-top: 0; }
.questions a { font-size: var(--step-0); line-height: 1.5555556; display: inline-block; }
.questions a:hover { color: var(--ink); }

/* ---- record facts ---- */

.record-facts {
  clear: right;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-xs) var(--space-s);
  max-width: var(--measure);
  margin: var(--space-xl) 0 0;
  padding-top: calc(var(--space-s) + var(--rule-below));
  border-top: 1px solid var(--rule);
  line-height: 1.5;
  color: var(--dim);
  letter-spacing: .03em;
}
.record-facts dt { margin: 0; letter-spacing: .1em; color: var(--dim); }
.record-facts dd { margin: 0; min-width: 0; color: var(--ink); }
.record-facts .untranslated { color: var(--dim); }
.record-facts dt.untranslated,
.record-facts dd.untranslated {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
}
.record-facts dd.untranslated {
  color: var(--dim);
}
.record-facts ul.rel { list-style: none; margin: 0; padding: 0; }
.record-facts ul.rel li + li { margin-top: .35rem; }
.record-facts a { text-decoration: none; }
.record-facts a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ---- footnotes ---- */

.prose .footnotes {
  color: var(--dim);
  border-top: 1px solid var(--rule);
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
}
.prose .footnotes ol { padding-left: 1.2em; }
.prose sup a { text-decoration: none; color: var(--ink); }

/* ---- metadata, footer ---- */

.meta {
  letter-spacing: .06em;
  color: var(--dim);
}
.meta a {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .25em;
}
.meta a:hover { color: var(--ink); }
.meta .k { letter-spacing: .1em; margin-right: .6rem; }
.dim { color: var(--dim); }

.foot { margin-top: var(--space-xxl); border-top: 1px solid var(--rule-strong); padding-top: var(--space-s); }
.foot p {
  margin: 0 0 var(--space-xs);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
}

.notfound .seal { display: block; margin: var(--space-l) 0; opacity: .45; }

/* The specimen is not a second design. It uses production classes and only
   adds enough scaffolding to label the scale and keep samples separated. */
.specimen > section { max-width: var(--measure); }
.specimen .masthead-specimens-section { max-width: var(--shell); }
.masthead-specimens { display: grid; gap: var(--space-l); }
.masthead-specimens .page-masthead { margin-bottom: 0; }
.type-scale {
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
}
.type-scale p { margin: 0; line-height: 1.2; }

/* A true hairline where the display can render one. The 1px rule is declared
   first and unconditionally: engines without subpixel borders round .5px down
   to zero, and the rule vanishes entirely rather than merely looking heavy. */
@media (min-resolution: 2dppx) {
  .catalogue > li, .ledger.wide > li, .questions > li, .nav,
  .record-facts { border-width: .5px; }
}

@media (min-width: 48rem) {
  .masthead-specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  /* prefers-color-scheme is still evaluated when printing, so the dark tokens
     would otherwise survive onto white paper -- #DCD8CC ink at 1.4:1. Rules
     also have to darken or the list structure that carries the whole
     information architecture disappears. */
  :root {
    --paper: #fff;
    --ink: #000;
    --accent: #5E2A22;
    --dim: #444;
    --rule: #999;
    --rule-strong: #666;
    --step--2: 8pt;
    --step-0: 11pt;
    --step-2: 16pt;
    --title-page: 22pt;
    --title-home: 27pt;
    --line: 17pt;
  }
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; padding: 0; font-size: var(--step-0); }
  h1, h2, h3, .section { break-after: avoid; }
  .catalogue > li, .ledger > li, .questions > li, pre, blockquote,
  .callout, .record-facts { break-inside: avoid; }
  .prose .callout-pull { border-top-color: #000; }
  .prose .callout-margin, .prose .callout-uncertain { border-left-color: #666; }
  .nav, .skip, .stamp, .opening-mark { display: none; }
  .opening { display: block; }
  .prose .callout-margin {
    float: none;
    width: auto;
    margin-right: 0;
    border-left: 1px solid #666;
    padding-left: 1em;
  }
  .record-facts { border-top: 1px solid #999; }
  a { text-decoration: none; color: #000; }
  /* A site whose value is its cross-links must not lose them on paper. */
  .prose a::after, .ledger a::after {
    content: " (" attr(href) ")";
    font-size: var(--step--2);
    color: #444;
  }
  .notfound .seal { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* The published state key. Set as a glossary rather than a table: these are
   definitions, not comparable values. */
.key { margin-top: var(--space-xxl); }
.glossary { margin: 0; display: grid; gap: var(--space-xs) 0; }
.glossary > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--space-s);
  align-items: baseline;
}
.glossary dt { margin: 0; }
.glossary dd { margin: 0; color: var(--dim); }

@media (max-width: 44rem) {
  body { padding-inline: 1rem; }
  .page-masthead-line { grid-template-columns: 1fr; gap: var(--space-xs); }
  .masthead-companion { justify-self: start; }
  .record-facts { grid-template-columns: 1fr; }
  .record-facts dd.untranslated { border-top: 0; padding-top: 0; }
}

@media (max-width: 34rem) {
  .glossary > div { grid-template-columns: 1fr; }
  .glossary dd { margin-bottom: var(--space-xs); }
  .ledger > li { grid-template-columns: 1fr; }
  .ledger .summary { grid-column: 1; }
}