:root {
  --ink: #2b241d;
  --muted: #766b5d;
  --paper: #f3ead9;
  --paper-deep: #e6d7bc;
  --rule: #cdbb9d;
  --red: #9d2f2a;
  --red-dark: #6e211e;
  --blue: #345c67;
  --gold: #b47c2c;
  --green: #356348;
  --shadow: rgba(43, 36, 29, .14);
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  background-image: radial-gradient(circle at 20% 0%, rgba(255,255,255,.55), transparent 38rem), linear-gradient(90deg, rgba(157,47,42,.025) 1px, transparent 1px);
  background-size: auto, 8px 8px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.58;
}

a { color: var(--red-dark); text-underline-offset: .16em; }
a:hover { color: var(--blue); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
code, .mono { font-family: var(--mono); font-size: .82em; overflow-wrap: anywhere; }
strong { color: var(--red-dark); }
em { font-style: italic; }

.skip-link { position: absolute; left: .75rem; top: -4rem; z-index: 20; padding: .65rem .9rem; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: .75rem; }
.topline { max-width: 74rem; margin: 0 auto; padding: 1rem 1.2rem 0; display: flex; justify-content: space-between; gap: 1rem; font: .68rem var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.topline a { color: inherit; text-decoration: none; }
.topline a:hover { color: var(--red); }

main { max-width: 74rem; margin: 0 auto; padding: 2rem 1.2rem 6rem; }
.hero { max-width: 56rem; padding: 3rem 0 2.5rem; }
.eyebrow { margin: 0 0 .55rem; color: var(--red); font: .68rem/1.3 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
h1 { max-width: 54rem; margin: 0 0 1rem; color: var(--red-dark); font-size: clamp(2.5rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.045em; font-weight: 600; }
h2 { margin: 4.8rem 0 .7rem; color: var(--red-dark); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.03; letter-spacing: -.025em; font-weight: 600; }
h3 { margin: 0 0 .55rem; color: var(--red-dark); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.05; font-weight: 600; }
h4 { margin: 0 0 .55rem; color: var(--red-dark); font: .68rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
p { max-width: 54rem; margin: 0 0 1.15rem; }
.dek { max-width: 48rem; margin: 0 0 1.25rem; color: var(--muted); font-size: clamp(1.1rem, 2.3vw, 1.38rem); line-height: 1.4; }
.plain-placard { max-width: 48rem; margin: 1.5rem 0 0; padding: .85rem 1rem; border-left: 4px solid var(--gold); background: rgba(255,255,255,.45); color: var(--ink); font-size: .95rem; }
.hero-rule { width: 7rem; height: .38rem; margin-top: 2rem; background: var(--red); }
.section-intro { max-width: 50rem; color: var(--muted); font-size: 1.05rem; }
.note { color: var(--muted); font-size: .92rem; }
.small-note, .caption { color: var(--muted); font-size: .84rem; }
.notice { margin: 1rem 0; padding: .8rem .95rem; border-left: 3px solid var(--gold); background: rgba(180,124,44,.1); color: var(--muted); }
.withheld, .refused { color: var(--red); }

.panel { margin: 1.4rem 0; padding: 1.3rem; border: 1px solid var(--rule); background: rgba(255,255,255,.28); box-shadow: 0 .6rem 1.4rem var(--shadow); }
.panel.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel.dark h2, .panel.dark h3, .panel.dark strong { color: #f5d9a2; }
.panel.dark .eyebrow { color: #edb16b; }
.panel.dark .small-note, .panel.dark .caption, .panel.dark .section-intro { color: #cdbda7; }
.panel.dark a { color: #f5d9a2; }

.instrument-shell { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 1.25rem; align-items: start; }
.control-panel { position: sticky; top: 1rem; z-index: 2; padding: 1.2rem; background: rgba(243,234,217,.96); border: 1px solid var(--rule); box-shadow: 0 .4rem 1rem var(--shadow); }
.control-panel h3 { font-size: 1.3rem; }
.range-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; margin: 1.2rem 0 1rem; }
.range-line input { width: 100%; accent-color: var(--red); }
.year-readout { min-width: 4.2rem; color: var(--red-dark); font: 1.25rem var(--mono); text-align: right; }
.range-labels { display: flex; justify-content: space-between; margin-top: -.6rem; color: var(--muted); font: .64rem var(--mono); }
.quick-years { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.3rem; }
.quick-years button, .secondary-button { border: 1px solid var(--red); background: transparent; color: var(--red-dark); padding: .45rem .65rem; font: .66rem var(--mono); }
.quick-years button:hover, .secondary-button:hover { background: var(--red); color: var(--paper); }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .8rem; }
.control-grid label { display: grid; gap: .3rem; color: var(--muted); font: .65rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: .055em; }
.control-grid select, .search-line input, .compare-line select { min-width: 0; width: 100%; padding: .48rem .55rem; border: 1px solid var(--rule); border-radius: 2px; background: rgba(255,255,255,.55); color: var(--ink); font: .73rem var(--mono); }
.reset-button { width: 100%; margin-top: .85rem; padding: .65rem .75rem; border: 0; background: var(--red); color: var(--paper); font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.reset-button:hover { background: var(--red-dark); }
.page-status { min-height: 1.7em; margin-top: .85rem; color: var(--muted); font: .67rem/1.4 var(--mono); }
.page-status.ready { color: var(--green); }
.page-status.error { color: var(--red); }

.result-card, .bill-card, .clock-card, .anchor-card, .fault-card, .work-detail-card { padding: 1.25rem; border: 1px solid var(--rule); background: rgba(255,255,255,.45); }
.result-card { min-height: 100%; }
.result-topline { display: flex; justify-content: space-between; align-items: start; gap: .8rem; }
.pill { flex: 0 0 auto; padding: .28rem .42rem; background: var(--paper-deep); color: var(--muted); font: .58rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.result-card h3 { max-width: 34rem; margin-top: .8rem; font-size: clamp(1.6rem, 3vw, 2.55rem); }
.result-subline { color: var(--muted); }
.metric-grid, .check-grid, .inventory-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 1.2rem 0; }
.metric-grid div, .check-grid div, .inventory-stats div { display: grid; gap: .15rem; padding: .7rem; background: rgba(230,215,188,.5); }
.metric-grid span, .check-grid span, .inventory-stats span { color: var(--muted); font: .61rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.metric-grid strong, .check-grid strong, .inventory-stats strong { font: 1.15rem var(--mono); font-variant-numeric: tabular-nums; }
.bands { display: grid; gap: .65rem; margin-top: 1.35rem; }
.band-row { display: grid; gap: .25rem; }
.band-label { display: flex; justify-content: space-between; gap: .5rem; font: .68rem var(--mono); }
.band-label strong { font-weight: 600; }
.band-track, .mini-track { height: .42rem; background: var(--paper-deep); overflow: hidden; }
.band-track span, .mini-track i { display: block; width: var(--bar-width); height: 100%; background: var(--red); }
.band-row:nth-child(2) .band-track span { background: var(--gold); }
.band-row:nth-child(3) .band-track span { background: var(--blue); }
.band-row:nth-child(4) .band-track span { background: #8d806c; }
.result-card .notice { margin-bottom: 0; }

.bill-card { margin-top: 1.25rem; }
.bill-list { display: grid; gap: .65rem; margin: 1rem 0 0; padding-left: 1.4rem; }
.bill-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0 .55rem .2rem; border-bottom: 1px solid var(--rule); }
.bill-list li > div { min-width: 0; }
.bill-list strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.item-type { display: inline-block; margin-top: .2rem; color: var(--muted); font: .62rem var(--mono); text-transform: uppercase; }
.age-badge { display: block; color: var(--blue); font: .68rem/1.4 var(--mono); overflow-wrap: anywhere; }
.bill-age { flex: 0 1 auto; min-width: 0; max-width: 48%; text-align: right; }
.floor { display: block; margin-top: .2rem; color: var(--muted); font: .6rem/1.35 var(--mono); }

.histogram-wrap { margin: 1.4rem 0; }
.histogram { display: flex; align-items: end; gap: 1px; height: 10rem; padding: .5rem .25rem 0; border-bottom: 1px solid var(--ink); background: rgba(230,215,188,.33); }
.hist-bar { flex: 1 1 0; min-width: 0; height: var(--bar-height); background: var(--blue); opacity: .78; }
.hist-bar.seam { background: var(--red); opacity: 1; }
.hist-bar:hover { background: var(--gold); opacity: 1; }
.axis { display: flex; justify-content: space-between; gap: .6rem; margin-top: .4rem; color: var(--muted); font: .6rem var(--mono); }
.axis span:nth-child(2) { color: var(--red); text-align: center; }

.trend-table-wrap, .table-scroll { max-width: 100%; overflow-x: auto; }
.trend-table, .data-table { width: 100%; min-width: 38rem; border-collapse: collapse; font: .71rem/1.45 var(--mono); }
.trend-table caption, .data-table caption { padding: .5rem 0; color: var(--muted); text-align: left; font: .67rem var(--mono); }
.trend-table th, .trend-table td, .data-table th, .data-table td { padding: .52rem .45rem; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: middle; }
.trend-table th:first-child, .trend-table td:first-child, .data-table th:first-child, .data-table td:first-child { text-align: left; }
.trend-table thead th, .data-table thead th { color: var(--muted); font-size: .61rem; letter-spacing: .06em; text-transform: uppercase; }
.trend-table tbody tr:hover, .data-table tbody tr:hover { background: rgba(230,215,188,.35); }
.trend-number { display: inline-block; min-width: 4.1rem; }
.trend-number.old { color: var(--blue); }
.trend-number.recent { color: var(--red); }
.mini-track { display: inline-block; width: 4.5rem; vertical-align: middle; }
.mini-track i { background: var(--blue); }
.recent-track i { background: var(--red); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--red-dark); text-decoration: underline; text-underline-offset: .14em; text-align: left; }
.text-button:hover { color: var(--blue); }

.comparison-line, .search-line { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1rem 0; }
.comparison-line label, .search-line label { color: var(--muted); font: .67rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.comparison-line select { max-width: 12rem; }
.comparison-grid, .anchor-grid, .fault-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.clock-card h3 { margin-top: .5rem; font-size: 1.55rem; }
.clock-card p:last-child { margin-bottom: 0; }
.anchor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anchor-card { display: flex; flex-direction: column; min-width: 0; }
.anchor-card.agrees { border-top: 4px solid var(--green); }
.anchor-card.disagrees { border-top: 4px solid var(--red); }
.anchor-quote { min-height: 4.6rem; color: var(--muted); font-style: italic; }
.anchor-card dl, .work-facts { display: grid; gap: .4rem; margin: 0 0 .8rem; }
.anchor-card dl div, .work-facts div { display: flex; justify-content: space-between; gap: .65rem; }
.anchor-card dt, .work-facts dt { color: var(--muted); font: .61rem var(--mono); }
.anchor-card dd, .work-facts dd { margin: 0; color: var(--ink); font: .68rem var(--mono); text-align: right; overflow-wrap: anywhere; }
.anchor-card .small-note { margin-top: auto; }
.fault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fault-card { min-width: 0; }
.fault-detail { margin-top: .8rem; padding: .7rem; background: var(--paper-deep); color: var(--muted); font: .72rem var(--mono); overflow-wrap: anywhere; }

.inventory-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.inventory-stats { margin: 0; }
.audit-notes { grid-column: 1 / -1; padding-top: .4rem; border-top: 1px solid var(--rule); color: var(--muted); }
.audit-notes ul { padding-left: 1.2rem; }
.check-lead { padding: 1rem; border-left: 4px solid var(--gold); background: rgba(180,124,44,.1); }
.check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-subsection { margin-top: 2.2rem; }
.check-subsection h3 { margin-bottom: 1rem; }

.search-line input { flex: 1 1 16rem; min-width: 0; }
.work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.work-list li { display: flex; min-width: 0; }
.work-list li > .work-row { width: 100%; }
.work-row { display: grid; gap: .15rem; min-width: 0; padding: .7rem; border: 1px solid var(--rule); background: rgba(255,255,255,.3); color: var(--ink); text-align: left; }
.work-row:hover, .work-row.selected { border-color: var(--red); background: rgba(157,47,42,.08); }
.work-row span { overflow-wrap: anywhere; }
.work-row small { color: var(--muted); font: .61rem var(--mono); }
.work-detail { margin-top: 1rem; }
.work-chart { display: flex; align-items: end; gap: 1px; height: 7rem; margin: 1rem 0 1.2rem; padding: .35rem .2rem 0; border-bottom: 1px solid var(--ink); background: rgba(230,215,188,.3); }
.work-bar { flex: 1 1 0; min-width: 0; height: var(--bar-height); background: var(--blue); }

.source-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.source-columns ul { padding-left: 1.15rem; }
.source-columns li { margin: .55rem 0; }
.reference-notes { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--muted); font: .69rem/1.6 var(--mono); }
.static-surface { margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed var(--red); color: var(--muted); font: .76rem/1.6 var(--mono); }

.record-strip { max-width: 56rem; margin: 1.5rem 0 0; padding: .9rem 1rem; border: 1px solid var(--rule); background: rgba(255,255,255,.35); font-size: .95rem; }
.record-strip p { margin: 0; }
.record-line { margin: .8rem 0 .2rem; color: var(--muted); font: .72rem/1.55 var(--mono); }
.headline-sentence { margin: .2rem 0 1rem; font-size: 1.02rem; }
.withheld-reason { display: block; max-width: 18rem; margin-left: auto; color: var(--muted); font-size: .6rem; line-height: 1.35; white-space: normal; text-align: right; }
.trend-note { max-width: 54rem; }
.check-settings { font: .72rem/1.6 var(--mono); overflow-wrap: anywhere; }
.check-sums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 1.2rem 0; }
.check-sums div { min-width: 0; padding: .6rem .7rem; background: rgba(230,215,188,.5); }
.check-sums dt { color: var(--muted); font: .61rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.check-sums dd { margin: .2rem 0 0; font: .8rem/1.45 var(--mono); overflow-wrap: anywhere; }
.check-grid small { color: var(--muted); font: .6rem/1.35 var(--mono); }
.check-grid div { min-width: 0; }

@media (max-width: 900px) {
  .instrument-shell { grid-template-columns: 1fr; }
  .control-panel { position: static; }
  .comparison-grid, .anchor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-grid { grid-template-columns: 1fr; }
  .inventory-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  main { padding: 1rem .85rem 4rem; }
  .topline { padding: .75rem .85rem 0; }
  .hero { padding-top: 2rem; }
  h1 { font-size: clamp(2.55rem, 15vw, 4.7rem); }
  h2 { margin-top: 3.5rem; }
  .panel { padding: .9rem; }
  .control-grid, .metric-grid, .check-grid, .inventory-stats, .comparison-grid, .anchor-grid, .fault-grid, .work-list, .source-columns { grid-template-columns: 1fr; }
  .metric-grid strong, .check-grid strong, .inventory-stats strong { font-size: 1rem; }
  .histogram { height: 7.5rem; }
  .axis { font-size: .54rem; }
  .axis span:nth-child(2) { max-width: 9rem; }
  .bill-list li { display: block; }
  .bill-age { max-width: none; margin-top: .35rem; text-align: left; }
  .check-sums { grid-template-columns: 1fr; }
  .anchor-quote { min-height: 0; }
  .inventory-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .static-surface { overflow-wrap: anywhere; }
}

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