/* Site styles. Tokens come from tokens.css, which is generated from DESIGN.md. */

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
}

.wrap {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

@media (max-width: 480px) { .wrap { padding: 0 16px; } }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
}

/* Masthead */
.masthead {
  background: var(--color-primary);
  color: var(--color-surface);
  border-bottom: 1px solid var(--color-primary);
}
.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-heading-font-size);
  letter-spacing: var(--type-heading-letter-spacing);
  color: var(--color-surface);
  text-decoration: none;
}
.nav, .langs { margin: 0; padding: 0; }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; }
.nav a, .langs a {
  color: var(--color-surface);
  font-size: var(--type-small-font-size);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a:focus, .langs a:hover, .langs a:focus { border-bottom-color: currentColor; }
.langs { margin-left: auto; display: flex; gap: var(--space-2); }
.langs a[aria-current="true"] { border-bottom-color: currentColor; }

/* Headings and prose */
.display {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-display-font-size);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
  font-weight: 400;
  margin: var(--space-6) 0 var(--space-4);
}
.heading {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--type-heading-font-size);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-letter-spacing);
  font-weight: 400;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-hairline);
}
.lead { max-width: 62ch; }
.small { font-size: var(--type-small-font-size); color: var(--color-secondary); }
.label {
  font-size: var(--type-label-font-size);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Figures */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-7);
  padding: 0;
}
.figure { border-top: 2px solid var(--color-primary); padding-top: var(--space-3); }
.amount {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--type-figure-font-size);
  font-feature-settings: var(--type-figure-font-feature);
  margin: var(--space-1) 0 var(--space-2);
}
.caption { font-size: var(--type-small-font-size); color: var(--color-secondary); margin: 0; }

/* Footer */
.footer {
  margin-top: var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-shaded);
}
.never { font-weight: 600; margin-top: 0; }
.footer a { color: var(--color-ink); }

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

/* Ledger */
.views { margin: 0 0 var(--space-5); }
.views a { color: var(--color-ink); }
.table-scroll { overflow-x: auto; border-top: 2px solid var(--color-primary); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--type-small-font-size); }
.ledger caption { text-align: left; padding: var(--space-2) 0; }
.ledger th, .ledger td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: top;
}
.ledger th { font-size: var(--type-label-font-size); letter-spacing: var(--type-label-letter-spacing); text-transform: uppercase; color: var(--color-secondary); }
.ledger tbody tr:nth-child(even) { background: var(--color-surface-shaded); }
.numeric { text-align: right; white-space: nowrap; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-feature-settings: var(--type-figure-small-font-feature); }
.proof-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: var(--type-label-font-size); letter-spacing: .06em; }
.row-note { display: block; color: var(--color-secondary); font-size: var(--type-label-font-size); margin-top: var(--space-1); }
.row-voided td { text-decoration: line-through; background: var(--color-alert-tint); }
.row-voided .row-note { text-decoration: none; color: var(--color-alert); }
.row-corrected { background: var(--color-warn-tint); }
.row-corrected .row-note { color: var(--color-warn); }
.footnote { border-top: 1px solid var(--color-hairline); padding-top: var(--space-3); max-width: 68ch; }

/* Banner, cards, records */
.banner {
  border: 1px solid var(--color-alert);
  background: var(--color-alert-tint);
  padding: var(--space-4);
  margin: var(--space-5) 0;
}
.banner-title { font-family: "Playfair Display", Georgia, serif; font-size: var(--type-heading-font-size); font-weight: 400; margin: 0 0 var(--space-2); color: var(--color-alert); }
.banner-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.banner a { color: var(--color-alert); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.card { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); }
.card-title { font-family: "Playfair Display", Georgia, serif; font-weight: 400; font-size: var(--type-heading-font-size); margin: 0 0 var(--space-1); }
.card a, .record a { color: var(--color-ink); }
.card-figures { margin: var(--space-2) 0 var(--space-1); }
.state {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--type-label-font-size);
  letter-spacing: .06em;
  border: 1px solid currentColor;
  padding: 1px var(--space-2);
}
.state-warn { color: var(--color-warn); }
.state-alert { color: var(--color-alert); }
.state-ok, .state-open { color: var(--color-secondary); }
.note { border-left: 3px solid var(--color-secondary); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; background: var(--color-surface-shaded); }
.note-alert { border-left-color: var(--color-alert); background: var(--color-alert-tint); color: var(--color-alert); }
.note-warn { border-left-color: var(--color-warn); background: var(--color-warn-tint); color: var(--color-warn); }
.record { border-top: 1px solid var(--color-hairline); padding-top: var(--space-4); margin-bottom: var(--space-6); }
.record-name { font-family: "Playfair Display", Georgia, serif; font-size: var(--type-heading-font-size); margin: 0; }
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.pair dd { margin: var(--space-1) 0 0; font-size: var(--type-small-font-size); }
.photo-slot { border: 1px dashed var(--color-hairline); padding: var(--space-4); margin-top: var(--space-3); }
.state-note { color: var(--color-secondary); }

.plain { max-width: 68ch; }
.plain li { margin-bottom: var(--space-2); }

.timeline { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.timeline li { border-left: 2px solid var(--color-hairline); padding: 0 0 var(--space-5) var(--space-4); }
.timeline-date { margin: 0; font-size: var(--type-label-font-size); color: var(--color-secondary); }
.timeline-what { margin: var(--space-1) 0 0; }