/* ==========================================================================
   PAWN — a ledger.
   Paper ground, oxblood, brass, ink. Clerical, exact, unglamorous.
   Palette values live in tokens.css and are overridden by the brand system;
   this file owns structure and never hardcodes a colour.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--fw-body);   /* Archivo's fvar default is 600 - never omit */
  font-variation-settings: 'wdth' var(--wdth-normal);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* --------------------------------------------------------------- structure */

.shell {
  max-width: 76rem; margin: 0 auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

section { padding-block: var(--space-7); border-top: var(--rule-hair-w) solid var(--rule-hair); }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-label);
  font-variation-settings: 'wdth' var(--wdth-label);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--space-4);
  display: flex; align-items: baseline; gap: var(--space-3);
}
.eyebrow::after {
  content: ''; flex: 1; height: var(--rule-hair-w);
  background: var(--rule-hair);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;               /* Zilla Slab is STATIC: ship the real cut */
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-4); max-width: 62ch; }
.lede { font-size: var(--step-1); line-height: 1.4; max-width: 46ch; }
.muted { color: var(--ink-3); }
strong { font-weight: 650; }

a { color: var(--oxblood); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ numbers */

/* Every figure on this site is money or supply. They align in a column or the
   page stops reading as a ledger. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;   /* NOT 'zero': slashed zeros read as hatching */
  letter-spacing: -0.005em;
}

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

.masthead { padding-block: var(--space-8) var(--space-7); }

.brandline {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.brandline img, .brandline svg { width: 2.25rem; height: 2.25rem; display: block; }
.brandline .wordmark {
  font-family: var(--font-display);
  font-weight: 800; font-size: var(--step-1);
  letter-spacing: 0.02em;
}
.brandline .chainchip {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  border: var(--rule-hair-w) solid var(--rule-hair);
  padding: 0.35em 0.7em; border-radius: var(--radius);
}

/* THE FLOOR is the largest object on the page. Nothing competes with it. */
.floor-readout {
  margin-block: var(--space-7) var(--space-7);
  border-top: var(--rule-w) solid var(--ink);
  border-bottom: var(--rule-hair-w) solid var(--rule);
  padding-block: var(--space-4) var(--space-5);
}
.floor-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}
.floor-readout .label {
  font-family: var(--font-body);
  font-weight: var(--fw-label);
  font-variation-settings: 'wdth' var(--wdth-label);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--oxblood);
}
.floor-readout .unit-note {
  font-family: var(--font-body);
  font-weight: var(--fw-label);
  font-variation-settings: 'wdth' var(--wdth-label);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
}
.floor-readout .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 600;
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--oxblood);
  display: block;
}
.floor-readout .unit {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-2);
  display: block; margin-top: var(--space-4);
  max-width: 52ch;
}
/* A zero floor is a true reading, not a disabled state: it stays oxblood and
   loud. Only an UNREAD value is greyed, because that one is genuinely unknown. */
.floor-readout[data-state='pending'] .value { color: var(--ink-3); }

/* ------------------------------------------------------------------ buttons */

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.btn {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.85em 1.4em;
  border: var(--rule-hair-w) solid var(--ink);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn:hover:not(:disabled) { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

/* -------------------------------------------------------------- the division */

/* The arithmetic, set as arithmetic. */
.sum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
  border: var(--rule-hair-w) solid var(--rule-hair);
  background: var(--paper-raised);
  padding: var(--space-5);
  border-radius: var(--radius);
  max-width: 34rem;
}
.sum-row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 0.42em; }
.sum-row .k { color: var(--ink-3); }
.sum-row .v { text-align: right; white-space: nowrap; }
.sum-rule { border: 0; border-top: 2px solid var(--ink); margin: 0.5em 0; }
.sum-row--total { font-weight: 700; font-size: var(--step-1); }
.sum-row--total .v { color: var(--oxblood); }

/* ---------------------------------------------------------------- the ratchet */

.formula {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  background: var(--paper-sunk);
  border-block: var(--rule-hair-w) solid var(--rule);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  overflow-x: auto;
}
.formula .frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; }
.formula .frac .top { border-bottom: 1.5px solid currentColor; padding: 0 0.4em 0.1em; }
.formula .frac .bot { padding: 0.1em 0.4em 0; }

/* ----------------------------------------------------------------- the book */

.book { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ledger {
  width: 100%; min-width: 42rem;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
}
table.ledger th {
  background: var(--paper-sunk);
  text-align: right; font-weight: var(--fw-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: var(--step--1); color: var(--ink-3);
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
table.ledger th:first-child, table.ledger td:first-child { text-align: left; padding-left: 0; }
table.ledger td {
  text-align: right; padding: 0.72em var(--space-3);
  border-bottom: var(--rule-hair-w) solid var(--rule-hair);
  white-space: nowrap;
}
table.ledger tbody tr:nth-child(odd) { background: var(--greenbar); }
table.ledger .lift { color: var(--oxblood); }
table.ledger .empty td {
  text-align: left; color: var(--ink-3);
  font-family: var(--font-body); padding-block: var(--space-5);
  white-space: normal;
}

/* the staircase: every tread is a ticket, and there is no descending step */
.staircase { width: 100%; height: auto; display: block; margin-bottom: var(--space-5); }
.staircase .tread { fill: none; stroke: var(--oxblood); stroke-width: 2; stroke-linejoin: miter; }
.staircase .fillunder { fill: var(--oxblood); opacity: 0.07; }
.staircase .axis { stroke: var(--rule-hair); stroke-width: 1; }
.staircase .axis-label {
  font-family: var(--font-mono); font-size: 10px;
  fill: var(--ink-3); letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ the desk */

.desk {
  border: var(--rule-hair-w) solid var(--rule);
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: var(--space-5);
  max-width: 34rem;
}
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--space-2);
}
.field input {
  width: 100%;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  padding: 0.6em 0.7em;
  border: var(--rule-hair-w) solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.field input:focus-visible { border-color: var(--oxblood); }
.field .hint {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--ink-3); margin-top: var(--space-2);
}
.status {
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: var(--space-3); border-radius: var(--radius); margin-top: var(--space-4);
  border: var(--rule-hair-w) solid var(--rule-hair);
}
.status[data-tone='bad'] { color: var(--oxblood); border-color: var(--oxblood); }
.status[data-tone='good'] { color: var(--ink); border-color: var(--brass-ink); }
.status:empty { display: none; }

/* ------------------------------------------------------------------- inflow */

.inflow { max-width: 34rem; }
.inflow .sum-row .k { max-width: 24ch; }

/* --------------------------------------------------------------- disclosure */

.notlist { list-style: none; padding: 0; margin: 0; max-width: 62ch; }
.notlist li {
  padding: var(--space-4) 0;
  border-bottom: var(--rule-hair-w) solid var(--rule-hair);
}
.notlist li:first-child { border-top: var(--rule-hair-w) solid var(--rule-hair); }
.notlist b {
  display: block;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oxblood); margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------------ addresses */

.addresses { font-family: var(--font-mono); font-size: var(--step--1); }
.addresses .row {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: var(--rule-hair-w) solid var(--rule-hair);
}
.addresses .row .k {
  flex: 0 0 11rem; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--1);
}
.addresses .row .v { word-break: break-all; }

/* ------------------------------------------------------------------- footer */

footer {
  border-top: 2px solid var(--ink);
  padding-block: var(--space-6) var(--space-7);
  font-size: var(--step--1);
  color: var(--ink-3);
}
footer p { max-width: 52ch; }

/* --------------------------------------------------------------- the stamp */

/* a pawnshop's rubber stamp: the one place the page raises its voice */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--oxblood);
  border: 2px solid var(--oxblood);
  padding: 0.5em 0.9em;
  border-radius: var(--radius);
  transform: rotate(-2.5deg);
  opacity: 0.9;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 48rem) {
  .brandline .chainchip { display: none; }
  .floor-readout .value { font-size: var(--step-4); }
  .sum, .desk, .formula { max-width: none; }
}

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

/* ==========================================================================
   THE TICKET — the masthead readout, set as a pawnshop's ticket stub.
   A perforation, a serial, a counterfoil. The floor lives on the stub because
   that is the thing you are actually handed.
   ========================================================================== */

.masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.75fr);
  gap: var(--space-7);
  align-items: start;
}

.ticket {
  background: var(--paper-raised);
  border: var(--rule-hair-w) solid var(--rule);
  border-radius: var(--radius);
  position: relative;
  box-shadow: var(--shadow);
}

.ticket-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.ticket-head span:last-child { color: var(--oxblood); }

/* the perforation: a real ledger artefact, not a decorative flourish */
.ticket-perf {
  height: 0;
  border-top: 2px dashed var(--rule);
  margin: 0 var(--space-4);
  position: relative;
}
.ticket-perf::before, .ticket-perf::after {
  content: '';
  position: absolute; top: -0.55rem;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: var(--rule-hair-w) solid var(--rule);
}
.ticket-perf::before { left: calc(var(--space-4) * -1 - 0.55rem); }
.ticket-perf::after  { right: calc(var(--space-4) * -1 - 0.55rem); }

.ticket-foot { padding: var(--space-5); font-family: var(--font-mono); font-size: var(--step--1); }
.ticket-foot .sum-row { padding-block: 0.3em; }
.ticket-foot .sum-row .k { color: var(--ink-3); }

/* ------------------------------------------------- the blank ticket book */

/* Before the first redemption the book is not empty, it is UNUSED. A pawnshop's
   unused book is pre-printed and ruled, waiting. That is both the honest state
   and a better object than a paragraph apologising for having no data. */
table.ledger tr.blank td {
  color: var(--ink-3);
  border-bottom-style: solid;
}
table.ledger tr.blank td.serial { color: var(--ink-3); }
table.ledger tr.blank td.ruled::after {
  content: '';
  display: block;
  height: 0.9em;
  border-bottom: var(--rule-hair-w) solid var(--rule-hair);
  margin-top: -0.2em;
}
.book-note {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oxblood);
  margin: var(--space-4) 0 var(--space-2);
}

/* --------------------------------------------------- two-column documents */

/* A financial document sets its prose against its figures. At one column the
   page reads as a blog post; at two it reads as a statement. */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-7);
  align-items: start;
}
.doc > *:last-child { position: sticky; top: var(--space-5); }

@media (max-width: 62rem) {
  .masthead-grid, .doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .doc > *:last-child { position: static; }
  .ticket { max-width: 32rem; }
}


/* An empty staircase is a blank box, and a blank box is worse than nothing.
   Pre-launch the pre-printed ticket book carries the section on its own. */
.staircase[hidden] { display: none; }

.masthead { padding-block: var(--space-7) var(--space-8); }
h1 { max-width: 18ch; }
.lede { font-size: var(--step-1); line-height: 1.35; max-width: 44ch; color: var(--ink-2); }

/* the proof page sets its worked algebra as preformatted mono */
pre.formula {
  white-space: pre;
  font-size: var(--step--1);
  line-height: 1.5;
  tab-size: 2;
}
pre.formula code { font-family: inherit; }

/* ---------------------------------------------------------- touch targets */

/* Measured at 390px: the address links rendered 17px tall. WCAG 2.5.8 asks for
   24px, and a contract address is exactly the link someone taps on a phone. */
.addresses .row .v a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  line-height: 1.5;
}

/* THE FLOOR must out-rank the headline at EVERY width. On a phone both were
   landing on the same size, which flattens the one hierarchy the page has. */
@media (max-width: 48rem) {
  h1 { font-size: var(--step-3); }
  .floor-readout .value { font-size: var(--step-4); letter-spacing: -0.05em; }
  .floor-head { gap: var(--space-2); }
  .floor-readout .unit-note { flex-basis: 100%; }
}

/* The ledger is wide by nature and scrolls inside its own container. Say so,
   rather than leaving a phone user to discover it. */
@media (max-width: 62rem) {
  .book { position: relative; }
  .book::after {
    content: 'scroll →';
    position: absolute; top: 0; right: 0;
    font-family: var(--font-mono); font-size: var(--step--1);
    color: var(--ink-3); letter-spacing: var(--tracking-label);
    pointer-events: none;
  }
}