/* ==========================================================================
   Coin collection catalogue
   --------------------------------------------------------------------------
   Direction: a Victorian coin cabinet. Pages are set on a cool paper grey;
   photographs sit in deep slate "trays" the way coins sit in a cabinet, since
   that is genuinely how they read best. The accent is verdigris -- the patina
   copper takes -- rather than the usual gold, and the one flourish is the
   milled-edge rule borrowed from the edge of a coin.

   The reference code is the hero: it is the collector's own identifier for the
   coin, so it is set large in tabular monospace and everything else defers.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --ground:        #eceeec;   /* page */
  --surface:       #f7f8f7;   /* cards, panels */
  --surface-sunk:  #e2e5e3;
  --tray:          #1d2426;   /* behind photographs */
  --tray-edge:     #101516;

  --ink:           #171b1c;
  --ink-soft:      #4a5354;
  --ink-faint:     #7b8484;

  --rule:          #cdd2cf;
  --rule-strong:   #aab2ae;

  --verdigris:     #2f7c6b;
  --verdigris-dim: #d9e8e3;
  --verdigris-ink: #1c4f44;
  --oxide:         #8a5d3b;   /* used only for destructive actions */

  --focus:         #2f7c6b;

  --font-display: "Hoefler Text", Baskerville, "Palatino Linotype", Palatino,
                  "URW Palladio L", Georgia, serif;
  --font-body:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
                  Menlo, Consolas, monospace;

  --step: 0.25rem;
  --gutter: 1rem;
  --radius: 3px;               /* coins are round; the furniture is not */
  --shadow: 0 1px 2px rgb(16 21 22 / 0.06), 0 6px 20px -12px rgb(16 21 22 / 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:       #14191a;
    --surface:      #1b2122;
    --surface-sunk: #232a2b;
    --tray:         #0e1213;
    --tray-edge:    #070a0a;

    --ink:          #e6eae9;
    --ink-soft:     #a6b0af;
    --ink-faint:    #788483;

    --rule:         #2c3435;
    --rule-strong:  #3c4546;

    --verdigris:     #55a692;
    --verdigris-dim: #1c2f2b;
    --verdigris-ink: #8fcfbd;
    --oxide:         #c08457;

    --focus:         #55a692;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px -12px rgb(0 0 0 / 0.8);
  }
}

/* --- reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem); letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 0.8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verdigris-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--verdigris); }

code { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.muted { color: var(--ink-faint); }

/* --- milled edge ---------------------------------------------------------- */
/* The reeding on the edge of a struck coin, used as a rule. Sparingly. */

.milled, .coin__head::after {
  height: 4px;
  background-image: repeating-linear-gradient(
    90deg, var(--rule-strong) 0 1px, transparent 1px 4px
  );
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0.6rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand nav" "search search";
  gap: 0.5rem 1rem;
  align-items: center;
}

.masthead__brand {
  grid-area: brand;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}

/* A struck coin in profile: ring plus rim. */
.masthead__mark {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--verdigris);
  box-shadow: inset 0 0 0 2px var(--ground), inset 0 0 0 3px var(--verdigris);
  flex: none;
}

.masthead__search { grid-area: search; display: flex; }
.masthead__search input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule); border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface); color: var(--ink);
}
.masthead__search button {
  border: 1px solid var(--rule); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-sunk); color: var(--ink-soft);
  padding: 0 0.7rem; cursor: pointer;
}
.masthead__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.masthead__nav {
  grid-area: nav;
  /* Wraps because signing in adds a fourth item (Quick find) and a narrow
     phone has no room for four on one line. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.4rem 0.75rem;
  font-size: 0.875rem;
}
.masthead__nav a { color: var(--ink-soft); text-decoration: none; }
.masthead__nav a.button { color: #fff; }
.masthead__nav a:hover { color: var(--verdigris); text-decoration: underline; }
.masthead__nav a.button:hover { color: #fff; }

@media (min-width: 42rem) {
  .masthead__inner {
    grid-template-columns: auto minmax(10rem, 22rem) 1fr;
    grid-template-areas: "brand search nav";
    padding: 0.75rem var(--gutter);
  }
  .masthead__nav { justify-content: flex-end; }
  .masthead__brand { font-size: 1.15rem; }
}

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

.page { max-width: 1180px; margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; }
body.bare .page { max-width: none; padding: 0; }

.footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem var(--gutter);
  color: var(--ink-faint); font-size: 0.8rem; text-align: center;
}

/* Content-page links. The footer held nothing but the site name until pages
   existed; these sit above it, centred with it. */
.footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.35rem 1.25rem;
  margin: 0 0 0.9rem;
}
.footer__nav a { color: var(--ink-soft); text-decoration: none; }
.footer__nav a:hover { color: var(--verdigris); text-decoration: underline; }

.flashes { max-width: 1180px; margin: 1rem auto 0; padding: 0 var(--gutter); }
.flash {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--verdigris);
  background: var(--verdigris-dim); color: var(--verdigris-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
}
.flash--error {
  border-left-color: var(--oxide);
  background: color-mix(in srgb, var(--oxide) 12%, var(--surface));
  color: var(--ink);
}

.section-head { margin: 2.5rem 0 1rem; }
.section-head:first-child { margin-top: 0; }
.section-head__note { color: var(--ink-faint); font-size: 0.875rem; margin: 0.25rem 0 0; }

/* The striking's inscriptions, under an Issue heading in the card view. The
   card shows no description of either face, so there is no column to sit above
   as there is in the list -- they read as a second line instead. Letter-spaced
   so an inscription is recognisable as struck lettering at a glance. */
.section-head__legends {
  margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem;
  font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em;
}
.section-head__legend-side {
  font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); margin-right: 0.3rem;
}

/* --- buttons and small controls ------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-size: 0.9rem; font-weight: 500;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--verdigris);
  border-radius: var(--radius);
  background: var(--verdigris); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.button:hover { background: var(--verdigris-ink); border-color: var(--verdigris-ink); color: #fff; }
.button--ghost { background: transparent; color: var(--verdigris-ink); }
.button--ghost:hover { background: var(--verdigris-dim); color: var(--verdigris-ink); }
.button--danger { background: transparent; border-color: var(--oxide); color: var(--oxide); }
.button--danger:hover { background: var(--oxide); color: #fff; border-color: var(--oxide); }
.button--small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.button--block { width: 100%; }

.linklike {
  font: inherit; font-size: 0.875rem;
  background: none; border: 0; padding: 0;
  color: var(--verdigris-ink); cursor: pointer; text-decoration: underline;
  text-underline-offset: 0.18em;
}
.linklike--danger { color: var(--oxide); }
.inline-form { display: inline; }

/* --- form furniture -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.field > label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-soft); }

.field input, .field select, .field textarea,
.values-grid input, .table input, .table select {
  font: inherit; font-size: 0.95rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  min-width: 0; width: 100%;
}
.field textarea { resize: vertical; line-height: 1.5; }
/* The markdown source is source: monospace, so the hyphens of a list and the
   spaces of an indent line up the way the parser reads them. */
.field textarea.field__mono { font-family: var(--font-mono); font-size: 0.85rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--verdigris); }

.field__hint { font-size: 0.78rem; color: var(--ink-faint); margin: 0; }
.field__error { font-size: 0.8rem; color: var(--oxide); margin: 0; font-weight: 500; }

.checkbox {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; margin-bottom: 0.75rem;
}
.checkbox input { width: auto; }

.form-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.1rem;
  margin: 0 0 1.5rem;
}
.panel > legend, .panel > h2 {
  font-family: var(--font-display); font-size: 1.05rem;
  padding: 0 0.4rem; margin-left: -0.4rem;
}
.panel__note { font-size: 0.85rem; color: var(--ink-faint); margin: 0.4rem 0 1rem; }
.panel__subhead {
  font-family: var(--font-display); font-size: 0.95rem;
  margin: 1.5rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.two-up, .three-up, .four-up { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .two-up { grid-template-columns: 1fr 1fr; } }
@media (min-width: 46rem) { .three-up { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .four-up { grid-template-columns: repeat(4, 1fr); } }

/* --- gallery -------------------------------------------------------------- */

.gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.gallery__count { color: var(--ink-faint); font-size: 0.875rem; margin: 0; }
.gallery__count .linklike { margin-left: 0.5rem; }

/* How the collection is read: grid or table, and whether it is broken into
   groups. Plain links, so a switch is one click and survives with no JS. */
.viewbar {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
}
.viewbar__set {
  display: flex; align-items: center; gap: 0.15rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 0.15rem;
}
.viewbar__label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600; padding: 0 0.35rem;
}
.viewbar__option {
  font-size: 0.8rem; text-decoration: none; color: var(--ink-soft);
  padding: 0.25rem 0.55rem; border-radius: 2px;
}
.viewbar__option:hover { color: var(--ink); background: var(--surface-sunk); }
/* The house "this is the one" treatment, as on a held grade. */
.viewbar__option--on {
  background: var(--verdigris-dim); color: var(--verdigris-ink); font-weight: 700;
}

/* A group heading, above each run of cards. */
.group-head { margin-top: 1.75rem; }
.group-head:first-of-type { margin-top: 0.5rem; }

.filters {
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
}
.filters__summary {
  cursor: pointer; padding: 0.7rem 0.9rem;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.5rem;
}
.filters__badge {
  background: var(--verdigris); color: #fff;
  font-size: 0.7rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 999px;
}
.filters__form {
  padding: 0 0.9rem 0.9rem;
  display: grid; gap: 0 1rem;
  border-top: 1px solid var(--rule); padding-top: 0.9rem;
}
.filters__actions { display: flex; gap: 0.6rem; align-items: center; }

/* A tickbox among the dropdowns: no <label> above it to set the height, so it
   is pushed down to sit on the same line as their boxes rather than their
   captions. */
.field--check { display: flex; align-items: flex-end; padding-bottom: 0.45rem; }

@media (min-width: 40rem) {
  .filters__form { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 62rem) {
  /* One row across at desktop widths. The summary stays visible at every
     width: a closed <details> hides its contents in a way CSS cannot reliably
     override, so hiding the control that opens it would strand the filters. */
  /* Search gets the double track; every other field an equal one; the actions
     take what they need. Counted from the markup -- eight fields today -- so
     adding a field means adding a track. */
  .filters__form { grid-template-columns: 2fr repeat(7, 1fr) auto; align-items: end; }
  .filters__actions { padding-bottom: 1rem; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1rem;
}
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.25rem; } }

.card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.card:hover { border-color: var(--verdigris); transform: translateY(-2px); box-shadow: var(--shadow); }

.card__frame {
  position: relative; display: block;
  aspect-ratio: 1; background: var(--tray);
  background-image: radial-gradient(circle at 50% 45%, #2a3335 0%, var(--tray) 70%);
}
.card__frame img { width: 100%; height: 100%; object-fit: cover; }
.card__frame-empty {
  position: absolute; inset: 14%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, #fff 22%, transparent);
  display: grid; place-items: center;
  padding: 0.5rem; text-align: center; line-height: 1.25;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: color-mix(in srgb, #fff 55%, transparent);
}
.card__grade { position: absolute; left: 0.4rem; bottom: 0.4rem; }

/* A reference with no example held. Marked rather than dimmed to nothing: it
   is a coin that exists, and one still wanted. */
.card--wanted .card__frame { background-image: none; background: var(--surface-sunk); }
.card--wanted .card__frame img { opacity: 0.9; }
/* The flat sunk background is light in light mode, so the placeholder needs
   ink rather than the white it uses over the tray. */
.card--wanted .card__frame-empty {
  color: var(--ink-faint);
  border-color: color-mix(in srgb, var(--ink-faint) 45%, transparent);
}
.card__wanted {
  position: absolute; left: 0.4rem; bottom: 0.4rem;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: color-mix(in srgb, var(--ink) 72%, transparent); color: #fff;
  padding: 0.1rem 0.35rem; border-radius: 2px;
}
.card__count {
  position: absolute; right: 0.4rem; bottom: 0.4rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  background: color-mix(in srgb, var(--ink) 72%, transparent); color: #fff;
  padding: 0.1rem 0.35rem; border-radius: 2px;
}
/* The corner the card's marks stack in. It owns the positioning so a mark does
   not, which is what lets either of them appear on its own: with one absent the
   other simply sits at the top rather than leaving a hole where it would have
   been. align-items keeps them right-aligned when their widths differ. */
.card__marks {
  position: absolute; right: 0.4rem; top: 0.4rem;
  display: flex; flex-direction: row; align-items: flex-end; gap: 0.2rem;
}
.card__draft {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--oxide); color: #fff; padding: 0.1rem 0.35rem; border-radius: 2px;
}

/* A variant kept out of the listings by its issue. Neutral rather than oxide:
   it is set aside, not a warning, and the two marks can appear together. */
.card__draft--hidden { background: var(--ink-faint); }
.list__draft--hidden, .find-card__draft--hidden { background: var(--ink-faint); }

/* The same mark as .card__draft, outside the card's corner -- used inline in
   the navigation, in the admin tables and on a page's own head. */
.badge {
  display: inline-block; vertical-align: 0.1em;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.1rem 0.35rem; border-radius: 2px;
  background: var(--surface-sunk); color: var(--ink-soft);
}
.badge--draft  { background: var(--oxide); color: #fff; }
.badge--unread { background: var(--verdigris); color: #fff; }
.badge--form   { background: var(--verdigris-dim); color: var(--verdigris-ink); }

/* An unread message in the inbox. Weight rather than colour, so it still reads
   as unread in print and for anyone who cannot pick the accent out. */
.table__unread td { font-weight: 600; }

.card__body { padding: 0.55rem 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; }
.card__reference {
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.card__type { font-size: 0.8rem; color: var(--ink-soft); }
.card__year { font-size: 0.78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.card__year em { font-style: normal; font-family: var(--font-display); }

.empty {
  padding: 3rem 1rem; text-align: center; color: var(--ink-faint);
  border: 1px dashed var(--rule); border-radius: var(--radius);
}

/* --- grade chips ---------------------------------------------------------- */
/* One ramp from worn grey to bright patina -- the colour carries the grade,
   so it is data rather than decoration. */

.grade-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; line-height: 1;
  padding: 0.25rem 0.4rem; border-radius: 2px;
  background: #6d7877; color: #fff;
  white-space: nowrap;
}
.grade-chip--vg      { background: #77817f; }
.grade-chip--f       { background: #6a7a76; }
.grade-chip--f-plus  { background: #5d746e; }
.grade-chip--vf      { background: #4e7167; }
.grade-chip--vf-plus { background: #427161; }
.grade-chip--ef      { background: #33745f; }
.grade-chip--ef-plus { background: #257a5f; }
.grade-chip--unc     { background: #16805e; }
.grade-chip--bu      { background: #0c8763; color: #fff; }
.grade-chip--fdc     { background: #0b5c46; box-shadow: inset 0 0 0 1px #7fd8bd; }

/* --- coin page: the ticket ------------------------------------------------- */

.coin__head {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
/* Milled edge along the foot of the ticket. */
.coin__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.coin__eyebrow {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin: 0 0 0.5rem;
}
.coin__eyebrow a { color: inherit; text-decoration: none; }
.coin__eyebrow a:hover { color: var(--verdigris); }
.coin__eyebrow span { margin: 0 0.4em; }

.coin__reference {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3rem);
  font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1; margin: 0;
}
.coin__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.coin__roman {
  font-variant: small-caps; letter-spacing: 0.06em;
  color: var(--verdigris-ink); margin-left: 0.4rem;
}

.draft-note {
  margin: 0.6rem 0 0; font-size: 0.8rem; font-weight: 600;
  color: var(--oxide);
}
.draft-note--hidden { color: var(--ink-faint); font-weight: 500; }

/* Each segment of the reference, spelled out. */
.segments {
  margin: 1.1rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem 1.5rem;
}
@media (min-width: 34rem) { .segments { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .segments { grid-template-columns: repeat(5, auto); justify-content: start; gap: 0 2rem; } }

.segment dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.segment dd { margin: 0; font-size: 0.9rem; }
.segment__note { display: block; font-size: 0.78rem; color: var(--ink-faint); font-style: italic; }
.segments__note {
  margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--ink-faint);
  border-left: 2px solid var(--rule); padding-left: 0.6rem;
}
.segment code {
  font-weight: 700; font-size: 0.95em;
  background: var(--surface-sunk); padding: 0.1em 0.3em; border-radius: 2px;
  margin-right: 0.2em;
}

/* What the striking says about the coin itself, as against what the reference
   says about where it sits. Auto-filled rather than the five fixed columns
   above, because only what is recorded is rendered. */
.segments--struck {
  grid-template-columns: repeat(auto-fit, minmax(7rem, max-content));
  justify-content: start; gap: 0.7rem 2rem;
}
@media (min-width: 34rem) {
  .segments--struck { grid-template-columns: repeat(auto-fit, minmax(7rem, max-content)); }
}

/* The inscriptions struck on each face. Set in the mono face because they are
   quoted lettering, not prose about it. */
.legends {
  margin: 1.1rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem 1.5rem;
}
@media (min-width: 34rem) { .legends { grid-template-columns: 1fr 1fr; } }
.legend dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.legend dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.02em; color: var(--ink-soft);
}

/* How the standard catalogues cite this reference. Same typography as the
   segments above, but auto-filled rather than a fixed five columns: the list
   of catalogues is editable and grows. */
.cat-refs {
  margin: 0.9rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; gap: 0.7rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.cat-ref dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.2rem;
}
.cat-ref dd { margin: 0; font-size: 0.9rem; }
.cat-ref code {
  font-weight: 700; font-size: 0.95em;
  background: var(--surface-sunk); padding: 0.1em 0.3em; border-radius: 2px;
}

/* --- plates (the photographs) ---------------------------------------------- */

.plates { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 48rem) { .plates { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.plate { margin: 0; }

.plate__frame {
  display: block; width: 100%; padding: 0; border: 0;
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius);
  background: var(--tray);
  background-image: radial-gradient(circle at 50% 42%, #2c3639 0%, var(--tray) 62%, var(--tray-edge) 100%);
  cursor: zoom-in;
}
.plate__frame img { width: 100%; height: 100%; object-fit: contain; }

.plate__frame--empty {
  display: grid; place-items: center; cursor: default;
  color: #7d8a89; font-size: 0.85rem;
}

.plate__zoom-hint {
  position: absolute; right: 0.6rem; bottom: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem; border-radius: 2px;
  background: rgb(0 0 0 / 0.55); color: #fff;
  opacity: 0.85; transition: opacity 140ms ease;
}
.plate__frame:hover .plate__zoom-hint { opacity: 1; }
.plate__zoom-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.plate__caption { margin: 0.75rem 0 0; }
.plate__label {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint);
  margin: 0 0 0.35rem;
}
.plate__caption p { font-size: 0.92rem; color: var(--ink-soft); }
.plate__credit { font-size: 0.78rem !important; color: var(--ink-faint) !important; font-style: italic; }

/* --- condition chart: a measuring scale ------------------------------------ */

.chart-block { margin-bottom: 2.5rem; }

.chart {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.chart__step {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  grid-template-areas: "grade name value" "grade badge mine";
  align-items: center;
  gap: 0 0.75rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--rule);
}
.chart__step:first-child { border-top: 0; }

.chart__grade {
  grid-area: grade;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.03em; color: var(--ink-soft);
}
.chart__name  { grid-area: name; font-size: 0.9rem; }
.chart__value {
  grid-area: value;
  font-family: var(--font-mono); font-size: 0.95rem;
  font-variant-numeric: tabular-nums; text-align: right;
}
/* "not catalogued" has to sit on one line inside a chart column, which is
   only about 78px wide once the scale is ten across. */
.chart__unknown {
  color: var(--ink-faint);
  /* Body face, not the monospace it would inherit from .chart__value: this is
     a label rather than a figure, and mono is far too wide to fit the column. */
  font-family: var(--font-body);
  font-size: 0.72rem;
  white-space: nowrap;
}
.chart__badge {
  grid-area: badge; justify-self: start;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--verdigris-ink); font-weight: 700;
}
.chart__mine {
  grid-area: mine; justify-self: end; text-align: right;
  font-size: 0.75rem; color: var(--ink-soft);
}
.chart__mine-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.chart__mine strong { font-family: var(--font-mono); font-size: 0.9rem; }

.chart__step--below { color: var(--ink-faint); background: var(--surface-sunk); }
.chart__step--below .chart__grade { color: var(--ink-faint); }
.chart__step--held {
  background: var(--verdigris-dim);
  box-shadow: inset 3px 0 0 var(--verdigris);
}
.chart__step--held .chart__grade,
.chart__step--held .chart__name { color: var(--verdigris-ink); font-weight: 700; }

.chart__source { font-size: 0.8rem; color: var(--ink-faint); margin: 0.6rem 0 0; }

@media (min-width: 56rem) {
  /* Wide enough to read as a scale: ten steps left to right, worst to best. */
  .chart {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
  .chart__step {
    grid-template-columns: none;
    grid-template-areas: "grade" "name" "value" "badge" "mine";
    align-content: start;
    justify-items: center; text-align: center;
    gap: 0.2rem;
    padding: 0.8rem 0.35rem 0.9rem;
    border-top: 0; border-left: 1px solid var(--rule);
    min-height: 8.5rem;
  }
  .chart__step:first-child { border-left: 0; }
  .chart__grade { font-size: 0.95rem; }
  .chart__name {
    font-size: 0.68rem; line-height: 1.25; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .chart__value { text-align: center; margin-top: 0.35rem; }
  .chart__unknown { font-size: 0.62rem; letter-spacing: -0.01em; }
  .chart__badge { justify-self: center; }
  .chart__mine { justify-self: center; text-align: center; margin-top: 0.3rem; }
  .chart__step--held { box-shadow: inset 0 3px 0 var(--verdigris); }
}

/* --- specimens: the coins held of one reference ---------------------------- */

.wanted-note {
  border-left: 3px solid var(--ink-faint); background: var(--surface-sunk);
  padding: 0.5rem 0.75rem; margin-bottom: 1rem;
  font-size: 0.9rem; color: var(--ink-soft);
}

.specimens { margin-bottom: 2.5rem; }
.specimen {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem; margin-bottom: 1.75rem;
}
.specimen__head {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between; margin-bottom: 0.9rem;
}
.specimen__head h3 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1rem; margin: 0;
}
.specimen__actions { display: flex; gap: 0.5rem; align-items: center; }
.specimen__notes { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.specimen__notes h4 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); margin-bottom: 0.3rem; font-family: var(--font-body);
}

/* --- the read-only value chart on the coin form ---------------------------- */

.values-chart { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.values-chart__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.5rem; border-radius: var(--radius);
}
.values-chart__name { color: var(--ink-soft); font-size: 0.9rem; }
.values-chart__value {
  font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.values-chart__badge {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--verdigris-ink); font-weight: 700;
}
.values-chart__row--held {
  background: var(--verdigris-dim); box-shadow: inset 3px 0 0 var(--verdigris);
}
.values-chart__row--held .values-chart__name { color: var(--verdigris-ink); font-weight: 700; }
.values-chart__row--below { background: var(--surface-sunk); }
.values-chart__row--below .values-chart__name,
.values-chart__row--below .values-chart__value { color: var(--ink-faint); }

/* --- the coins held, listed on the reference form -------------------------- */

.held-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.held-list__item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.5rem; border-top: 1px solid var(--rule);
}
.held-list__item:first-child { border-top: 0; }
.held-list__name { color: var(--ink-soft); font-size: 0.9rem; }
.held-list__actions { display: flex; gap: 0.4rem; align-items: center; }

/* --- owner panel ----------------------------------------------------------- */

.owner-panel {
  border: 1px solid var(--rule); border-left: 3px solid var(--verdigris);
  border-radius: var(--radius);
  background: var(--surface); padding: 1.1rem; margin-bottom: 2.5rem;
}
.owner-panel .section-head { margin-top: 0; }

.facts { display: grid; gap: 0.8rem 1.5rem; margin: 0 0 1rem; }
@media (min-width: 34rem) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); margin-bottom: 0.15rem;
}
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.owner-panel__notes { border-top: 1px solid var(--rule); padding-top: 0.9rem; margin-bottom: 1rem; }
.owner-panel__notes h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.3rem; font-family: var(--font-body); }
.owner-panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* --- zoom viewer ----------------------------------------------------------- */

.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr auto;
  background: #0b0e0f;
  color: #e7ecea;
  overscroll-behavior: contain;
}
.viewer[hidden] { display: none; }

.viewer__bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; padding-top: max(0.6rem, env(safe-area-inset-top));
  border-bottom: 1px solid #222a2b;
  flex-wrap: wrap;
}
.viewer__title {
  margin: 0; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.03em; flex: 1; min-width: 8rem;
}
.viewer__sides, .viewer__tools { display: flex; gap: 0.3rem; }
.viewer__sides button, .viewer__tools button {
  font: inherit; font-size: 0.8rem;
  min-width: 2.2rem; min-height: 2.2rem;
  padding: 0.3rem 0.6rem;
  background: #1a2122; color: #cfd8d6;
  border: 1px solid #2b3435; border-radius: var(--radius);
  cursor: pointer;
}
.viewer__sides button[aria-pressed="true"] { background: var(--verdigris); border-color: var(--verdigris); color: #fff; }
.viewer__sides button:hover, .viewer__tools button:hover { border-color: #46514f; }
.viewer__sides button[hidden] { display: none; }

.viewer__stage {
  position: relative; overflow: hidden;
  touch-action: none;              /* we handle pinch and drag ourselves */
  cursor: grab;
  display: grid; place-items: center;
}
.viewer__stage.is-panning { cursor: grabbing; }

.viewer__image {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  max-width: none; will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.viewer__image[hidden] { display: none; }

.viewer__loading {
  font-size: 0.85rem; color: #8b9997; margin: 0;
}
.viewer__loading[hidden] { display: none; }

.viewer__hint {
  margin: 0; padding: 0.5rem 0.75rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  font-size: 0.75rem; color: #7d8b89; text-align: center;
  border-top: 1px solid #222a2b;
}

body.viewer-open { overflow: hidden; }

/* --- sign in --------------------------------------------------------------- */

.signin { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.signin__card {
  width: min(24rem, 100%);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.signin__card h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.signin__card .muted { font-size: 0.85rem; margin-bottom: 1.25rem; }
.signin__back { margin-top: 1rem; text-align: center; font-size: 0.85rem; }

/* --- admin ----------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.tile {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); padding: 0.85rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.tile__figure { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile__label { font-size: 0.75rem; color: var(--ink-faint); }
.tile--warn .tile__figure { color: var(--oxide); }
.admin__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* reference builder */
.reference-builder { display: grid; gap: 0 1rem; }
@media (min-width: 46rem) {
  .reference-builder {
    grid-template-columns: minmax(11rem, 1.4fr) 6rem minmax(10rem, 1.2fr) 5.5rem 1fr;
    align-items: start;
  }
}
.reference-preview {
  align-self: start;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.5rem 0.75rem; margin-bottom: 1rem;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-sunk);
}
.reference-preview__label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint);
}
.reference-preview strong {
  font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700;
  letter-spacing: 0.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.reference-preview--incomplete strong { color: var(--ink-faint); }

#roman-field[hidden] { display: none; }

/* The striking panel, revealed once one is chosen. `.field` sets display:flex,
   so the [hidden] attribute needs saying explicitly here as it does above. */
#striking-panel[hidden] { display: none; }
.field__suggest[hidden] { display: none; }

/* Values other years of this type were struck at. Quiet: they are an offer,
   not a control, and the box beside them is the thing being filled in. */
.field__suggest {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem;
  margin: 0; font-size: 0.78rem; color: var(--ink-faint);
}
.suggest {
  font: inherit; background: none; border: 0; padding: 0;
  color: var(--ink-faint); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 0.18em;
}
.suggest:hover { color: var(--verdigris); text-decoration-style: solid; }

.upload { margin-bottom: 1.25rem; }
.upload h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-family: var(--font-body); margin-bottom: 0.5rem; }
.upload__preview {
  aspect-ratio: 1; max-width: 12rem;
  background: var(--tray); border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden; margin-bottom: 0.6rem;
}
.upload__preview img { width: 100%; height: 100%; object-fit: contain; }
.upload__empty { color: #7d8a89; font-size: 0.8rem; }

.values-grid { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .values-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; } }
.values-grid__row {
  display: grid; grid-template-columns: 1fr 7rem; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0.5rem; border-radius: var(--radius);
}

/* The same held / above / below reading as the public condition chart, so the
   two screens say the same thing. A grade below the one held is dimmed but
   still editable -- the figure is worth recording either way. */
.values-grid__row--held {
  background: var(--verdigris-dim);
  box-shadow: inset 3px 0 0 var(--verdigris);
}
.values-grid__row--held .values-grid__name { color: var(--verdigris-ink); font-weight: 700; }
.values-grid__row--below { background: var(--surface-sunk); }
.values-grid__row--below .values-grid__name { color: var(--ink-faint); }
.values-grid__row label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.values-grid__name { color: var(--ink-soft); }
.values-grid__held {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--verdigris-ink); font-weight: 700;
}
.values-grid__also {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600;
}
.values-note { font-style: italic; }
/* A field error inside either values grid spans the row it belongs to. */
/* A catalogue citation is three boxes, not one, so these rows keep the full
   width instead of going two abreast, and the die codes get a box sized for the
   two-to-five characters they run to -- visibly shorter than the number. */
.values-grid--refs { grid-template-columns: 1fr; }
.values-grid--refs .values-grid__row { grid-template-columns: 1fr 9rem 4rem 4rem; }

@media (max-width: 39.99rem) {
  .values-grid--refs .values-grid__row { grid-template-columns: 1fr 4rem 4rem; }
  .values-grid--refs .values-grid__row label { grid-column: 1 / -1; }
}

.values-grid .field__error { grid-column: 1 / -1; margin: -0.15rem 0 0.25rem; }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint); font-weight: 600; padding: 0 0.35rem 0.4rem;
}
.table td { padding: 0.25rem 0.35rem; border-top: 1px solid var(--rule); vertical-align: middle; }
.table__centre { text-align: center; }
/* Figures line up on the right and share a width, as every other number in
   the app does. Pairs with --font-mono on the cells that carry money. */
.table__figure { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* `.table th` sets text-align, and an element-plus-class selector out-weighs a
   bare class however late it comes -- so a header cell needs saying twice, or
   it sits left over a column that does not. Qualified here rather than by
   dropping the alignment from `.table th`, which every other table wants. */
.table th.table__figure { text-align: right; }
.table th.table__centre { text-align: center; }
.table__actions { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
.table__new td { background: var(--surface-sunk); }
.lookups .panel { overflow-x: auto; }

/* --- the collection as a list --------------------------------------------- */

/* Ten grade columns do not fit a phone, and should not try: the table keeps
   its shape and the container scrolls, as the lookups panel does. */
.list-scroll { overflow-x: auto; margin-bottom: 2rem; }
.list { min-width: 46rem; }
.list th { white-space: nowrap; }
.list td { white-space: nowrap; }
.list code { font-size: 0.85em; }

/* A description clipped to its column instead of wrapping the row onto two
   lines. A block inside the cell, because text-overflow needs a width to work
   against and a td in an auto-layout table will not reliably give it one. */
.list__clip {
  display: block; max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-soft); font-size: 0.82rem;
}

.list__reference {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule-strong);
}
.list__reference:hover { color: var(--verdigris-ink); border-bottom-color: var(--verdigris); }
.list__draft {
  margin-left: 0.35rem; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--oxide); color: #fff; padding: 0.05rem 0.3rem; border-radius: 2px;
}
.list__row--draft td { background: color-mix(in srgb, var(--oxide) 5%, transparent); }

/* The grade matrix: the condition chart read across instead of down, so the
   three states carry the same meanings, and the same colours, as there. */
.list__cell { font-family: var(--font-mono); font-size: 0.82rem; }
.list__cell--held { background: var(--verdigris-dim); }
.list__cell--held strong { color: var(--verdigris-ink); }
.list__cell--below { color: var(--ink-faint); background: var(--surface-sunk); }
.list__count { font-size: 0.65rem; color: var(--verdigris-ink); margin-left: 0.15rem; }

.list__group th {
  padding-top: 1.1rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}
.list tbody:first-of-type .list__group th { padding-top: 0; }
.list__group-count {
  margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem;
  font-weight: 400; color: var(--ink-faint);
}
/* The striking's mintage, on an Issue heading. */
.list__group-mintage {
  margin-left: 0.6rem; font-family: var(--font-mono); font-size: 0.75rem;
  font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
/* What the coin physically was -- metal, size, weight -- beside the figure,
   and separated the same way the variant page's segments are. */
.list__group-fact {
  margin-left: 0.6rem; font-size: 0.75rem; font-weight: 400; color: var(--ink-faint);
}
.list__group-fact + .list__group-fact::before {
  content: "·"; margin-right: 0.6rem; color: var(--rule-strong);
}

/* The second line of an Issue header: the striking's inscriptions, in the
   Obverse and Reverse columns above the variants' descriptions of those faces.
   No top border, and a lighter ground than the heading above it, so the two
   rows read as one header block rather than as a heading and a coin. */
.list__group--legends td {
  padding-top: 0.15rem; padding-bottom: 0.35rem;
  background: var(--surface-sunk); border-bottom: 1px solid var(--rule);
}
.list__group-legend-label {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint);
}
/* Clipped like the descriptions below it, but letter-spaced: an inscription is
   lettering struck on the coin, not prose about it. */
.list__legend { letter-spacing: 0.04em; color: var(--ink-soft); }

.list tfoot td {
  border-top: 2px solid var(--rule-strong); padding-top: 0.5rem;
  font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.list tfoot td:first-child {
  font-family: var(--font-body); font-weight: 600; color: var(--ink-faint);
  text-align: right; font-size: 0.8rem;
}

.notice { max-width: 34rem; margin: 3rem auto; text-align: center; }
.notice h1 { margin-bottom: 0.5rem; }
.notice p { color: var(--ink-soft); }
.notice .button { margin-top: 1rem; }

/* --- long-form prose ------------------------------------------------------- */
/* Content pages: markdown rendered to HTML, so these selectors have to be bare
   elements. It is the one place in this stylesheet that styles tags rather than
   classes, because the markup is generated and cannot be given any. Scoped
   under .prose so nothing else in the app is touched. Everything is tokens; the
   measure is the only opinion it holds of its own. */

.prose {
  /* ~70 characters at this size. The page is 1180px because a grid of coins
     wants that; a paragraph does not. */
  max-width: 38rem;
}

.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table {
  margin: 0 0 1rem;
}
.prose > :last-child { margin-bottom: 0; }

.prose h2, .prose h3 { margin: 2rem 0 0.6rem; line-height: 1.25; }
.prose h2 { font-size: 1.3rem; }
.prose h3 { font-size: 1.1rem; }
.prose h2 + *, .prose h3 + * { margin-top: 0; }

.prose strong { font-weight: 600; }

.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.3rem; }
.prose li:last-child { margin-bottom: 0; }

/* Quoted material -- a catalogue's wording, a collector's note. The rule is the
   same weight as the flash border above, set in the accent. */
.prose blockquote {
  margin-left: 0; padding: 0.1rem 0 0.1rem 1rem;
  border-left: 2px solid var(--verdigris);
  color: var(--ink-soft);
}

.prose code { background: var(--surface-sunk); padding: 0.1em 0.3em; border-radius: 2px; }
.prose pre {
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.8rem;
  overflow-x: auto; font-size: 0.85rem;
}
.prose pre code { background: none; padding: 0; }

.prose img {
  max-width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: var(--radius);
  margin: 1.25rem 0;
}

/* A markdown table gets the app's table, so a page cannot invent a second look
   for the same thing. */
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prose th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600;
  padding: 0 0.35rem 0.4rem;
}
.prose td { padding: 0.3rem 0.35rem; border-top: 1px solid var(--rule); }

/* `---` becomes the house rule: the reeding on the edge of a struck coin, the
   same gradient as .milled. The one flourish, earned because a thematic break
   is exactly what it is for. */
.prose hr {
  border: 0; height: 4px; margin: 2rem 0;
  background-image: repeating-linear-gradient(
    90deg, var(--rule-strong) 0 1px, transparent 1px 4px
  );
}

/* --- the contact form ------------------------------------------------------ */

.contact-form {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.contact-form .form-actions { margin-top: 0.5rem; }

/* The honeypot: a field no human can see, which a bot fills in and gives
   itself away. Moved off-screen rather than display:none or type=hidden, both
   of which a modern bot knows to skip. It is aria-hidden and out of the tab
   order in the markup, so nothing using a screen reader meets it either. */
.honeypot {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.cf-turnstile { margin: 0 0 1rem; }

/* --- motion ---------------------------------------------------------------- */

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

@media print {
  .masthead, .filters, .viewbar, .find-jump,
  .owner-panel__actions, .plate__zoom-hint { display: none; }
  /* The footer stays, stripped to its copyright line: a printed page should
     still say whose work it is. The nav links go -- they are unclickable on
     paper and the notice reads better alone. */
  .footer { border: 0; padding: 0.5rem 0 0; }
  .footer__nav { display: none; }
  /* A printed list wants its whole width, and no scroller. */
  .list-scroll { overflow: visible; }
  body { background: #fff; }
}