@charset "utf-8";
/* ===========================================================================
   The Procyon Society
   ---------------------------------------------------------------------------
   Institutional archive, not blog. The reference points are library card
   catalogues, admiralty charts, and 1970s scientific society newsletters.
   Serif for prose, monospace for anything numeric. Warm ink on bone — never
   #000 on #FFF, which reads clinical rather than aged.

   Restraint is what makes the joke land. If the site looks like it is trying
   to be funny, it isn't.
   =========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* The five brand colours, unmodified. */
  --ink:      #14110D;
  --bone:     #F2EAD6;
  --ash:      #6B6355;
  --oxblood:  #7A2E2E;
  --brass:    #A8873E;

  /* Type */
  --face-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --face-script:  "Playfair Display", Georgia, serif;
  --face-slab:    "Abril Fatface", "Clarendon", Georgia, serif;
  --face-prose:   "Cormorant Garamond", Garamond, Georgia, serif;
  --face-data:    "Courier Prime", "Courier New", ui-monospace, monospace;

  /* Rhythm */
  --shell:   72rem;
  --measure: 34em;
  --gap:     clamp(1.25rem, 3vw, 2.5rem);
  --rule-w:  1px;

  --radius: 2px;   /* paper has corners, not pills */

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Light: ink on bone. */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:         #F2EAD6;
  --bg-sunk:    #EBE1C9;
  --bg-raised:  #F7F0DF;
  --bg-inverse: #14110D;

  --fg:         #14110D;
  --fg-quiet:   #5C554A;
  --fg-faint:   #857D6D;
  --fg-inverse: #F2EAD6;

  --rule:        rgba(20, 17, 13, .20);
  --rule-strong: rgba(20, 17, 13, .42);
  --rule-faint:  rgba(20, 17, 13, .10);

  --accent:      #7A2E2E;         /* oxblood — overdue states only */
  --accent-bg:   rgba(122, 46, 46, .09);
  --gold:        #7C6026;         /* brass, darkened to hold contrast on bone */
  --gold-bg:     rgba(168, 135, 62, .14);
  --link:        #14110D;
  --link-line:   rgba(20, 17, 13, .35);

  --grain: .035;
}

/* Dark: warm off-white on near-black. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #14110D;
  --bg-sunk:    #0E0C09;
  --bg-raised:  #1D1913;
  --bg-inverse: #F2EAD6;

  --fg:         #EDE4CE;
  --fg-quiet:   #A79E8B;
  --fg-faint:   #7E7666;
  --fg-inverse: #14110D;

  --rule:        rgba(242, 234, 214, .18);
  --rule-strong: rgba(242, 234, 214, .40);
  --rule-faint:  rgba(242, 234, 214, .09);

  --accent:      #CE7A6C;         /* oxblood lifted so it reads on near-black */
  --accent-bg:   rgba(206, 122, 108, .12);
  --gold:        #C7A257;
  --gold-bg:     rgba(199, 162, 87, .13);
  --link:        #EDE4CE;
  --link-line:   rgba(237, 228, 206, .32);

  --grain: .05;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg:         #14110D;
    --bg-sunk:    #0E0C09;
    --bg-raised:  #1D1913;
    --bg-inverse: #F2EAD6;
    --fg:         #EDE4CE;
    --fg-quiet:   #A79E8B;
    --fg-faint:   #7E7666;
    --fg-inverse: #14110D;
    --rule:        rgba(242, 234, 214, .18);
    --rule-strong: rgba(242, 234, 214, .40);
    --rule-faint:  rgba(242, 234, 214, .09);
    --accent:      #CE7A6C;
    --accent-bg:   rgba(206, 122, 108, .12);
    --gold:        #C7A257;
    --gold-bg:     rgba(199, 162, 87, .13);
    --link:        #EDE4CE;
    --link-line:   rgba(237, 228, 206, .32);
    --grain: .05;
  }
}

/* ── 2. Reset ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Any explicit `display` in this sheet outranks the UA's [hidden] rule, which
   silently un-hides buttons and panels the scanner toggles. Restore it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--face-prose);
  font-size: clamp(1.0625rem, .98rem + .38vw, 1.1875rem);
  line-height: 1.65;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* A whisper of grain so the bone reads as paper rather than as a swatch. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 1; }

img, picture, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: 2.5rem 0; }

::selection { background: var(--accent); color: #F7F0DF; }

:where(a):focus-visible,
:where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--face-data);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── 3. Typography ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); letter-spacing: .005em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
h4 { font-size: 1.075rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; }
:where(.prose, .plain, td, dd, li, p) a {
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-color .18s var(--ease), color .18s var(--ease);
}
:where(.prose, .plain, td, dd, li, p) a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

strong { font-weight: 600; }
em { font-style: italic; }

code, kbd, samp, .mono {
  font-family: var(--face-data);
  font-size: .88em;
  font-variant-numeric: tabular-nums;
}
code {
  background: var(--bg-sunk);
  padding: .1em .35em;
  border-radius: var(--radius);
}

/* The institutional label: Courier, caps, letterspaced. Used for every
   eyebrow, column header and field name on the site. */
.label,
.masthead .nav__list a,
th,
.field__key,
.pill,
.crumbs {
  font-family: var(--face-data);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 400;
}

.label {
  color: var(--fg-faint);
  margin: 0 0 .85rem;
  display: block;
}
.label--rule {
  border-bottom: var(--rule-w) solid var(--rule);
  padding-bottom: .5rem;
}

/* Numbers. Always monospace, always tabular. */
.num, .data {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

.lede {
  font-size: 1.2em;
  line-height: 1.55;
  color: var(--fg-quiet);
  max-width: var(--measure);
}

/* ── 4. Layout ───────────────────────────────────────────────────────────── */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
@media (min-width: 40em) { .shell { width: min(100% - 4rem, var(--shell)); } }

.main { padding-bottom: clamp(4rem, 9vw, 7rem); min-height: 50vh; }

.section { margin-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--tight { margin-block: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

.stack > * + * { margin-top: 1rem; }
.stack--lg > * + * { margin-top: 2rem; }

/* ── 5. Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 3px double var(--rule-strong);
  background: var(--bg);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1rem, 2.5vw, 1.6rem);
}

/* Sigil + wordmark. The sigil is the only graphic element in the header, and
   it is a CSS mask so it takes the ink colour of whichever theme is active. */
.lockup {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  min-width: 0;
}

.lockup__sigil {
  flex: none;
  width: clamp(2.2rem, 5vw, 3.1rem);
  aspect-ratio: 1686 / 1586;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/sigil.svg") center / contain no-repeat;
          mask: url("/assets/img/sigil.svg") center / contain no-repeat;
  transition: transform .4s var(--ease);
}
.lockup:hover .lockup__sigil { transform: translateY(-2px); }

.lockup__type { display: grid; min-width: 0; }

.lockup__name {
  font-family: var(--face-display);
  font-size: clamp(1.02rem, .82rem + .9vw, 1.6rem);
  letter-spacing: clamp(.08em, .16vw, .17em);
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
}

.lockup__est {
  font-family: var(--face-script);
  font-style: italic;
  font-size: clamp(.66rem, .58rem + .22vw, .8rem);
  color: var(--fg-faint);
  letter-spacing: .01em;
  margin-top: .18em;
}

.masthead__tools { display: flex; align-items: center; gap: .4rem; flex: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .7rem;
  background: transparent;
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  color: var(--fg-quiet);
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--rule-strong); background: var(--bg-raised); }
.btn-ghost__glyph { width: 1rem; height: 1rem; flex: none; }
.btn-ghost--icon { padding: .48rem .6rem; }

/* Colour-scheme indicator. Drawn, not typed — the geometric-shape codepoints
   are absent from the five brand faces and render as tofu. */
.theme-glyph {
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  display: block;
}
:root[data-theme="light"] .theme-glyph { background: none; }
:root[data-theme="light"] .theme-glyph::after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px currentColor;
}
:root[data-theme="dark"] .theme-glyph { background: currentColor; }

@media (max-width: 33em) { .btn-ghost__label, .btn-ghost .kbd { display: none; } }

/* On a phone the tools and the wordmark are fighting for the same 150px.
   Let the wordmark wrap to two lines rather than slide under the buttons. */
@media (max-width: 34em) {
  .lockup__name {
    white-space: normal;
    font-size: .78rem;
    letter-spacing: .07em;
    line-height: 1.2;
  }
  .lockup__est { display: none; }
  .masthead__tools { gap: .3rem; }
  .record__stamp { text-align: left; }
}

.kbd {
  font-family: var(--face-data);
  font-size: .65rem;
  padding: .12em .38em;
  border: var(--rule-w) solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  color: var(--fg-faint);
  background: var(--bg-raised);
  line-height: 1.4;
}

/* Nav */
.nav { border-top: var(--rule-w) solid var(--rule-faint); }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 2.6vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: .7rem 0;
}
.nav__list a {
  color: var(--fg-quiet);
  padding-block: .2rem;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__list a:hover { color: var(--fg); border-bottom-color: var(--rule-strong); }
.nav__list a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.nav__admin a { color: var(--gold); }

.nav-toggle { display: none; }

@media (max-width: 52em) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; padding-block: .35rem 1rem; }
  .nav__list li { border-top: var(--rule-w) solid var(--rule-faint); }
  .nav__list a { display: block; padding: .7rem 0; border-bottom: 0; }
}

/* ── 6. Page heads ───────────────────────────────────────────────────────── */

.page-head {
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: var(--rule-w) solid var(--rule);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.page-head__eyebrow {
  font-family: var(--face-data);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 .9rem;
}
.page-head h1 { margin-bottom: .35em; }
.page-head .lede { margin-bottom: 0; }

.crumbs { color: var(--fg-faint); margin: 0 0 1rem; }
.crumbs a { color: var(--fg-faint); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs span { opacity: .5; margin-inline: .4em; }

/* ── 7. Prose ────────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); font-size: 1.09em; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.35em; margin-block: 1.15em; }
.prose li + li { margin-top: .45em; }

.prose blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--fg-quiet);
}

/* Drop the first line into small caps the way a society newsletter would. */
.prose--opened > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: .04em;
}

/* ── 8. Panels, cards, rules ─────────────────────────────────────────────── */

.panel {
  background: var(--bg-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.panel--sunk { background: var(--bg-sunk); }
.panel--ruled { border-top: 3px double var(--rule-strong); }

.card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.15rem 0;
  border-top: var(--rule-w) solid var(--rule);
}
.card__meta {
  font-family: var(--face-data);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
}
.card h3 { margin: 0; font-size: 1.25rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--fg-quiet); margin: 0; }

/* Statistic tiles: the numbers a nerd wants above the fold. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
  border-left: var(--rule-w) solid var(--rule);
}
.stat {
  padding: 1.1rem 1.15rem;
  border-right: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
}
.stat__n {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  line-height: 1;
  display: block;
  margin-bottom: .45rem;
}
.stat__k {
  font-family: var(--face-data);
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.stat--alert .stat__n { color: var(--accent); }

/* ── 9. The record sheet (/no/0447) ──────────────────────────────────────── */

.record {
  border-top: 3px double var(--rule-strong);
  border-bottom: 3px double var(--rule-strong);
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.record__head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.record__title { min-width: min(100%, 18rem); flex: 1 1 22rem; }
.record__title h1 { margin-bottom: .2em; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); }

.record__sub {
  font-family: var(--face-prose);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg-quiet);
  margin: 0 0 .5rem;
}

.record__byline {
  font-family: var(--face-data);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* The number itself. This is the object on the shelf; make it the loudest
   thing on the page. */
.record__stamp { text-align: right; flex: none; }
.record__no {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: .95;
  letter-spacing: -.02em;
  display: block;
  white-space: nowrap;
}
.record__no small {
  font-size: .38em;
  letter-spacing: .12em;
  vertical-align: .55em;
  margin-right: .28em;
  color: var(--fg-faint);
}

/* Field table — the card-catalogue leader dots. */
.fields { margin: 2rem 0 0; display: grid; gap: 0; }
.field {
  display: grid;
  grid-template-columns: minmax(7.5rem, 12rem) 1fr;
  gap: .25rem 1.5rem;
  padding: .7rem 0;
  border-top: var(--rule-w) solid var(--rule-faint);
  align-items: baseline;
}
.field:last-child { border-bottom: var(--rule-w) solid var(--rule-faint); }
.field__key { color: var(--fg-faint); margin: 0; }
.field__val { margin: 0; }
.field__val--data { font-family: var(--face-data); font-variant-numeric: tabular-nums; font-size: .92rem; }

@media (max-width: 34em) {
  .field { grid-template-columns: 1fr; gap: .15rem; }
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .28em .6em;
  border: var(--rule-w) solid currentColor;
  border-radius: var(--radius);
  line-height: 1.3;
  white-space: nowrap;
}
.pill--shelved   { color: var(--fg-quiet); }
.pill--signed_out,
.pill--overdue   { color: var(--accent); background: var(--accent-bg); }
.pill--lost      { color: var(--accent); border-style: dashed; }
.pill--retired   { color: var(--fg-faint); }
.pill--found     { color: var(--gold); background: var(--gold-bg); }
.pill--dnf       { color: var(--accent); background: var(--accent-bg); }
.pill--survey    { color: var(--fg-quiet); }
.pill--partial   { color: var(--gold); }
.pill--open      { color: var(--gold); background: var(--gold-bg); }
.pill--stalled   { color: var(--fg-quiet); }
.pill--closed,
.pill--abandoned { color: var(--fg-faint); }

/* ── 10. Tables & the ledger ─────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin-inline: calc(var(--gap) * -.5); padding-inline: calc(var(--gap) * .5); }

table { width: 100%; border-collapse: collapse; }

thead th {
  text-align: left;
  color: var(--fg-faint);
  padding: .55rem .75rem .55rem 0;
  border-bottom: var(--rule-w) solid var(--rule-strong);
  white-space: nowrap;
  vertical-align: bottom;
}
thead th a { color: inherit; text-decoration: none; }
thead th a:hover { color: var(--fg); }
thead th[aria-sort] { color: var(--fg); }
thead th[aria-sort]::after { content: " ↓"; opacity: .6; }

tbody td {
  padding: .7rem .75rem .7rem 0;
  border-bottom: var(--rule-w) solid var(--rule-faint);
  vertical-align: baseline;
}
tbody tr:hover { background: var(--bg-raised); }

td.num, th.num, .cell-num { font-family: var(--face-data); font-variant-numeric: tabular-nums; }
td.right, th.right { text-align: right; }
/* "Heather C." is a name, not a sentence — never break it across lines. */
td.cell-person { white-space: nowrap; }

.cell-title { font-family: var(--face-prose); font-size: 1.02em; }
.cell-title a { text-decoration: none; }
.cell-title a:hover { color: var(--accent); text-decoration: underline; }

.cell-acc {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg-quiet);
}
.cell-acc a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--rule-strong); }
.cell-acc a:hover { color: var(--accent); }

/* The conspicuous blank. It does the work so nobody has to say anything. */
.blank {
  display: inline-block;
  min-width: 5.5rem;
  border-bottom: 1px solid var(--accent);
  color: transparent;
  user-select: none;
}
.outstanding { color: var(--accent); font-weight: 600; }
tr.is-outstanding td { background: var(--accent-bg); }
tr.is-outstanding:hover td { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ── 11. Filter bar ──────────────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: end;
  padding: 1rem 0 1.25rem;
  border-bottom: var(--rule-w) solid var(--rule);
  margin-bottom: 1.5rem;
}
.filters__group { display: grid; gap: .3rem; }
.filters__group > .label { margin: 0; }

input[type="text"], input[type="search"], input[type="date"],
input[type="number"], input[type="password"], input[type="url"],
select, textarea {
  font-family: var(--face-data);
  font-size: .82rem;
  color: var(--fg);
  background: var(--bg-raised);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  padding: .5rem .6rem;
  min-height: 2.4rem;
  width: 100%;
  transition: border-color .18s var(--ease);
}
textarea { font-family: var(--face-prose); font-size: 1rem; line-height: 1.55; min-height: 9rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--fg-quiet); }
select { cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .62rem 1.1rem;
  min-height: 2.4rem;
  border-radius: var(--radius);
  border: var(--rule-w) solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  transition: opacity .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { opacity: .86; }
.btn:active { transform: translateY(1px); }
.btn--quiet { background: transparent; color: var(--fg); border-color: var(--rule-strong); }
.btn--quiet:hover { background: var(--bg-raised); opacity: 1; }
.btn--danger { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--danger:hover { background: var(--accent-bg); opacity: 1; }
.btn--sm { padding: .38rem .7rem; min-height: 2rem; font-size: .66rem; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: .18em;
}
.linkish:hover { color: var(--accent); }

.inline-form { display: inline; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li + li { margin-top: .4rem; }

/* ── 12. Pagination & meta rows ──────────────────────────────────────────── */

.result-count {
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 1rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: var(--rule-w) solid var(--rule);
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pager a { color: var(--fg-quiet); text-decoration: none; }
.pager a:hover { color: var(--fg); }

/* Prev/next record links at the foot of an item sheet. */
.neighbours {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: var(--rule-w) solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
}
.neighbours a { display: grid; gap: .25rem; text-decoration: none; max-width: 45%; }
.neighbours .label { margin: 0; }
.neighbours span:last-child { font-family: var(--face-prose); color: var(--fg); }
.neighbours a:last-child { text-align: right; }
.neighbours a:hover span:last-child { color: var(--accent); }

/* ── 13. Flash & notices ─────────────────────────────────────────────────── */

.flash {
  margin: 1.25rem 0 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--gold);
  background: var(--gold-bg);
  font-family: var(--face-data);
  font-size: .78rem;
  letter-spacing: .04em;
}
.flash--err { border-left-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

.notice {
  border: var(--rule-w) solid var(--rule);
  border-left: 3px solid var(--gold);
  background: var(--bg-raised);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
}
.notice .label { margin-bottom: .5rem; }
.notice p:last-child { margin-bottom: 0; }
.notice--sealed { border-left-color: var(--accent); }

/* ── 14. Command palette ─────────────────────────────────────────────────── */

.palette[hidden] { display: none; }
.palette {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(3rem, 12vh, 9rem) 1.25rem 2rem;
}
.palette__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(3px);
}
.palette__panel {
  position: relative;
  width: min(100%, 34rem);
  background: var(--bg);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: palette-in .18s var(--ease);
}
@keyframes palette-in { from { opacity: 0; transform: translateY(-6px); } }

.palette__form { display: flex; align-items: baseline; gap: .6rem; padding: 1rem 1.15rem; }
.palette__prompt {
  font-family: var(--face-data);
  font-size: .95rem;
  color: var(--fg-faint);
  letter-spacing: .08em;
  flex: none;
}
.palette__input {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  font-family: var(--face-data);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.palette__input:focus { outline: none; border: 0; }

.palette__results { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.palette__results:not(:empty) { border-top: var(--rule-w) solid var(--rule); }
.palette__results a {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .6rem 1.15rem;
  text-decoration: none;
  color: var(--fg-quiet);
  border-bottom: var(--rule-w) solid var(--rule-faint);
}
.palette__results a:hover,
.palette__results .is-active a { background: var(--bg-raised); color: var(--fg); }
.palette__acc {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--fg-faint);
  flex: none;
}
.palette__name { font-family: var(--face-prose); font-size: 1rem; flex: 1; min-width: 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__kind { font-family: var(--face-data); font-size: .62rem; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--fg-faint); flex: none; }

.palette__hint {
  margin: 0;
  padding: .6rem 1.15rem;
  border-top: var(--rule-w) solid var(--rule);
  font-family: var(--face-data);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--fg-faint);
  background: var(--bg-sunk);
}

/* ── 15. Colophon ────────────────────────────────────────────────────────── */

.colophon {
  border-top: 3px double var(--rule-strong);
  background: var(--bg-sunk);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
  font-size: .95rem;
}
.colophon__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.colophon a { color: var(--fg-quiet); text-decoration-color: transparent; }
.colophon a:hover { color: var(--fg); text-decoration-color: var(--link-line); }
.colophon .plain { font-family: var(--face-data); font-size: .76rem; letter-spacing: .04em; }
.colophon__motto {
  font-family: var(--face-display);
  font-size: 1.15rem;
  margin: 0 0 .3rem;
}
.colophon__latin {
  font-family: var(--face-script);
  font-style: italic;
  color: var(--fg-faint);
  margin: 0;
}
.colophon__user, .colophon__fine {
  font-family: var(--face-data);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--fg-faint);
}
.colophon__fine { margin-top: 1rem; }

/* ── 16. Home ────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  border-bottom: var(--rule-w) solid var(--rule);
}
.hero__sigil {
  width: clamp(4.5rem, 11vw, 7rem);
  aspect-ratio: 1686 / 1586;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  background-color: currentColor;
  -webkit-mask: url("/assets/img/sigil.svg") center / contain no-repeat;
          mask: url("/assets/img/sigil.svg") center / contain no-repeat;
}
.hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.6rem);
  letter-spacing: clamp(.06em, .3vw, .16em);
  text-transform: uppercase;
  margin-bottom: .3em;
}
.hero__est {
  font-family: var(--face-script);
  font-style: italic;
  color: var(--fg-faint);
  font-size: clamp(.95rem, .85rem + .4vw, 1.2rem);
  margin: 0 0 1.75rem;
  position: relative;
}
/* Hairline rules flanking the est. line, as on the printed lockup. */
.hero__est::before, .hero__est::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(1.5rem, 8vw, 5rem);
  height: 1px;
  background: var(--rule-strong);
}
.hero__est::before { right: calc(50% + 9.5em); }
.hero__est::after  { left:  calc(50% + 9.5em); }
@media (max-width: 32em) { .hero__est::before, .hero__est::after { display: none; } }

.hero .lede { margin-inline: auto; text-align: left; }

.hero__motto {
  font-family: var(--face-data);
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 2rem 0 0;
}

/* The "scan a number" affordance on the home page. */
.resolver {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  max-width: 22rem;
  margin: 1.75rem auto 0;
}
.resolver__prefix {
  display: flex;
  align-items: center;
  padding-inline: .75rem;
  border: var(--rule-w) solid var(--rule);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg-raised);
  font-family: var(--face-data);
  font-size: .85rem;
  color: var(--fg-faint);
  letter-spacing: .1em;
}
.resolver input {
  border-radius: 0;
  font-size: 1rem;
  letter-spacing: .12em;
  text-align: center;
}

/* Marquee row for the most-delinquent loan. */
.delinquent {
  border: var(--rule-w) solid var(--accent);
  border-left-width: 3px;
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.delinquent__days {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  color: var(--accent);
  line-height: 1;
}
.delinquent__days small {
  font-size: .35em;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: block;
  margin-top: .5em;
  color: var(--fg-quiet);
}

/* ── 17. The desk (reading / watching / playing) ─────────────────────────── */

.entry {
  display: grid;
  gap: .6rem;
  padding: 1.35rem 0;
  border-top: var(--rule-w) solid var(--rule);
}
.entry__top { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.entry h3 { margin: 0; font-size: 1.35rem; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { color: var(--accent); }
.entry__creator { font-style: italic; color: var(--fg-quiet); margin: 0; }
.entry__blurb { color: var(--fg-quiet); margin: 0; max-width: var(--measure); }
.entry__progress {
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--fg-faint);
  margin: 0;
}

.rating {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--gold);
  white-space: nowrap;
}
.rating b { font-size: 1.35em; font-weight: 400; }

/* ── 18. Investigations status board ─────────────────────────────────────── */

.file-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1.5rem;
  padding: 1.25rem 0;
  border-top: var(--rule-w) solid var(--rule);
  align-items: start;
}
.file-row h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
.file-row h3 a { text-decoration: none; }
.file-row h3 a:hover { color: var(--accent); }
.file-row__thesis { color: var(--fg-quiet); margin: .35rem 0 0; max-width: var(--measure); }

.confidence { display: grid; gap: .35rem; justify-items: end; min-width: 9rem; }
.confidence__bar {
  width: 9rem;
  height: 6px;
  background: var(--bg-sunk);
  border: var(--rule-w) solid var(--rule);
  border-radius: 1px;
  overflow: hidden;
}
.confidence__fill { height: 100%; background: var(--gold); }
.confidence__n {
  font-family: var(--face-data);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--fg-faint);
  text-transform: uppercase;
}

/* ── 19. The Charter ─────────────────────────────────────────────────────── */

.article {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.75rem;
  padding: 1.6rem 0;
  border-top: var(--rule-w) solid var(--rule);
}
/* "Article" over its numeral, the way a printed constitution sets it. */
.article__no {
  display: grid;
  align-content: start;   /* keep the numeral under its label, not centred in the row */
  gap: .15rem;
  padding-top: .3rem;
  margin: 0;
}
.article__no span {
  font-family: var(--face-data);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.article__no b {
  font-family: var(--face-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fg-quiet);
  letter-spacing: .02em;
}
.article__body { max-width: var(--measure); }
.article__body h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.article__body p:last-child { margin-bottom: 0; }
.article--marked { background: var(--accent-bg); margin-inline: -1rem; padding-inline: 1rem; }
.article--marked .article__no b,
.article--marked .article__no span { color: var(--accent); }

@media (max-width: 34em) {
  .article { grid-template-columns: 1fr; gap: .4rem; }
  .article__no { padding-top: 0; }
}

.seal-plate { text-align: center; padding-block: clamp(2rem, 5vw, 3rem); }
.seal-plate img { margin-inline: auto; max-width: min(100%, 20rem); }
.seal-plate figcaption {
  font-family: var(--face-script);
  font-style: italic;
  color: var(--fg-faint);
  margin-top: 1rem;
  font-size: .95rem;
}

/* ── 20. Friends ─────────────────────────────────────────────────────────── */

.friend {
  padding: 1.35rem 0;
  border-top: var(--rule-w) solid var(--rule);
  display: grid;
  gap: .4rem;
}
.friend__top { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.friend h3 { margin: 0; font-size: 1.25rem; }
.friend h3 a { text-decoration: none; }
.friend h3 a:hover { color: var(--accent); }
.friend__url {
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--fg-faint);
}
.friend p { color: var(--fg-quiet); margin: 0; max-width: var(--measure); }

/* ── 21. Roster ──────────────────────────────────────────────────────────── */

.member {
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: var(--rule-w) solid var(--rule);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46em) { .member { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; } }
.member__name { font-family: var(--face-display); font-size: 1.6rem; margin: 0 0 .3rem; }
.member__role {
  font-family: var(--face-data);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.member__body { max-width: var(--measure); }

/* ── 22. Timeline (the hunt) ─────────────────────────────────────────────── */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .35rem 1.75rem;
  padding: 1.15rem 0;
  border-top: var(--rule-w) solid var(--rule);
}
.timeline__date {
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--fg-faint);
  padding-top: .3rem;
  white-space: nowrap;
}
.timeline h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.timeline p { margin: 0; color: var(--fg-quiet); max-width: var(--measure); }
.timeline__kind { margin-left: .6rem; }

@media (max-width: 38em) {
  .timeline li { grid-template-columns: 1fr; gap: .3rem; }
  .timeline__date { padding-top: 0; }
}

/* ── 23. Admin ───────────────────────────────────────────────────────────── */

.admin-bar {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  padding-block: .55rem;
}
.admin-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  align-items: center;
  font-family: var(--face-data);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-bar a { color: var(--fg-inverse); opacity: .68; text-decoration: none; }
.admin-bar a:hover, .admin-bar a[aria-current="page"] { opacity: 1; }
.admin-bar__brand { font-weight: 700; opacity: 1 !important; }

.form-grid { display: grid; gap: 1.1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.form-field { display: grid; gap: .35rem; }
.form-field--wide { grid-column: 1 / -1; }
.form-field .label { margin: 0; }
.form-field__hint { font-family: var(--face-data); font-size: .66rem; color: var(--fg-faint); letter-spacing: .04em; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: var(--rule-w) solid var(--rule);
}
.form-actions--split { justify-content: space-between; }

.checkbox { display: flex; align-items: center; gap: .5rem; }
.checkbox input { width: auto; min-height: 0; }
.checkbox label { font-family: var(--face-data); font-size: .74rem; letter-spacing: .06em; }

.errors {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
}
.errors ul { margin: 0; padding-left: 1.2rem; font-family: var(--face-data); font-size: .78rem; }

/* ── 24. The vestibule ───────────────────────────────────────────────────── */

.vestibule {
  max-width: 22rem;
  margin: clamp(3rem, 10vh, 6rem) auto;
  text-align: center;
}
.vestibule__sigil {
  width: 3.5rem;
  aspect-ratio: 1686 / 1586;
  margin: 0 auto 1.5rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/sigil.svg") center / contain no-repeat;
          mask: url("/assets/img/sigil.svg") center / contain no-repeat;
}
.vestibule form { display: grid; gap: .9rem; text-align: left; margin-top: 2rem; }
.vestibule .btn { width: 100%; }

/* ── 25. The accession desk (scanner PWA) ────────────────────────────────── */

.scan { max-width: 30rem; margin-inline: auto; }

.scan__viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.scan__viewport video { width: 100%; height: 100%; object-fit: cover; }
.scan__reticle {
  position: absolute;
  inset: 22% 12%;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax rgba(20, 17, 13, .45);
  pointer-events: none;
}
.scan__idle {
  color: var(--bone);
  font-family: var(--face-data);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 1.5rem;
}

/* The number, at the size you need to read it while holding a stamp. */
.scan__number {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 2rem + 12vw, 6rem);
  line-height: 1;
  text-align: center;
  letter-spacing: -.02em;
  margin: .3em 0 .15em;
}
.scan__number small {
  display: block;
  font-size: .18em;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .6em;
}
.scan__stamped {
  text-align: center;
  font-family: var(--face-data);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}

.scan__result { border-top: 3px double var(--rule-strong); margin-top: 1.5rem; padding-top: 1.5rem; }
.scan__hit { display: grid; gap: .3rem; margin-bottom: 1.25rem; }
.scan__hit strong { font-family: var(--face-prose); font-size: 1.3rem; font-weight: 600; }
.scan__hit span { font-family: var(--face-data); font-size: .72rem; letter-spacing: .06em; color: var(--fg-faint); }

.scan__status {
  font-family: var(--face-data);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: center;
  min-height: 1.4em;
  margin: 1rem 0 0;
}
.scan__status[data-state="err"] { color: var(--accent); }
.scan__status[data-state="ok"]  { color: var(--gold); }

/* ── 26. Utilities ───────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.quiet  { color: var(--fg-quiet); }
.faint  { color: var(--fg-faint); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.empty {
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  text-align: center;
  color: var(--fg-faint);
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
}
.empty__glyph { font-size: 2rem; opacity: .35; display: block; margin-bottom: .75rem; }

/* ── 27. Print — the Charter is meant to be printed ──────────────────────── */

@media print {
  :root {
    --bg: #fff; --bg-raised: #fff; --bg-sunk: #fff;
    --fg: #14110D; --fg-quiet: #333; --fg-faint: #555;
    --rule: rgba(0,0,0,.3); --rule-strong: rgba(0,0,0,.6); --rule-faint: rgba(0,0,0,.15);
    --grain: 0;
  }
  body { font-size: 11pt; background: #fff; }
  body::before { display: none; }
  .masthead__tools, .nav, .palette, .colophon__block--sign,
  .filters, .pager, .btn, .form-actions, .admin-bar, .skip { display: none !important; }
  .masthead, .colophon { border-color: #000; }
  a { color: inherit; text-decoration: none; }
  .prose a::after, .field__val a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .article, .record, .field { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}