/* =====================================================================
   AUCTIONEERED — THE SYSTEM
   ---------------------------------------------------------------------
   Ledger is the palette. Noir is the same palette in its second
   register, for the surfaces paper never reaches — not an alternative
   to choose between.

   One hairline, used with discipline, is the whole graphic system. A
   rule under a headline means the statement is settled. A rule above a
   figure means the figure is final. When you see a rule in this brand,
   it means settled.
   ===================================================================== */

/* ── Noir ───────────────────────────────────────────────────────────
   The site now runs on the dark register. Ledger has not been thrown
   away — it is what the PRINTED sheet is set in, and --paper-* below
   keeps it so the PDF and anything else that lands on white still has
   the true oxblood to work with.

   The rule about one red per identity still holds; what changed is the
   honest admission that "one colour on every ground" was a claim the
   measurements did not support. Oxblood on ink is 1.89:1. On a strike
   rule that was defensible — brand furniture carrying no information.
   Once the whole site is dark, the same red has to carry LINKS, LABELS
   and FIGURES, and 1.89:1 for those is not a stylistic position, it is
   an unreadable page. So there are two resolutions of one hue: the
   paper colour and the screen colour, and each is used only on the
   ground it was measured against. */
:root{
  color-scheme: dark;

  --ground:#111315;          /* the field the whole site now sits on     */
  --surface:#191C1F;         /* cards, panels, raised areas              */
  --sunken:#0D0F11;
  --ink:#EAE8E2;             /* headlines and primary text               */
  --secondary:#C2C7CC;       /* captions, labels, supporting copy        */
  --muted:#9DA3A9;
  --accent:#D4677C;          /* oxblood, resolved for this ground        */
  --accent-fill:#93283F;     /* solid fills that must carry white        */
  --accent-ground:#93283F;   /* the same red used AS a field             */
  --accent-soft:color-mix(in srgb, #D4677C 15%, #111315);
  --rule:#2B2F33;            /* enclosing borders — cards, inputs        */
  --rule-strong:#3A4045;

  /* The paper register, kept because paper still exists. Anything
     printed, and the PDF renderer, reads these. */
  --paper:#EAE9E3;
  --paper-ink:#14171A;
  --paper-accent:#7C2233;
  --pdf-accent:#7C2233;

  /* A line that UNDERLINES is red; a line that ENCLOSES stays neutral.
     That distinction is what stops a ruled page becoming a loud one. */
  --underline:var(--accent);
  --underline-soft:color-mix(in srgb, var(--accent) 30%, var(--rule));

  /* An inverted band on a dark site cannot invert to darker, so the
     "field" is now the LIGHT one: paper, dropped into the noir page
     where a section needs to stand apart. The relationship survives —
     one ground, one counter-ground — it is simply the other way up. */
  --field:#EAE9E3;
  --on-field:#14171A;
  --on-field-2:#545A61;
  --on-field-accent:#7C2233;

  --measure:66ch;
  --gutter:clamp(20px, 5vw, 64px);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 36px rgba(0,0,0,.45);

  --display:'Fraunces', 'Times New Roman', Georgia, serif;
  --text:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Noir ───────────────────────────────────────────────────────────── */
:root[data-register="noir"], .noir{
  color-scheme: dark;
  --ground:#0A0B0C;
  --surface:#131518;
  --sunken:#050607;
  --ink:#F2F1EC;
  --secondary:#9DA3A9;
  --accent:#DC4A42;          /* ruling red — the accent legible on black */
  --accent-ground:#B3372F;
  --accent-soft:#2A1210;
  --rule:#24272B;
  --rule-strong:#3D4247;
  --underline:var(--accent);
  --underline-soft:color-mix(in srgb, var(--accent) 42%, var(--rule));
  --field:#050607;
  --on-field:#F2F1EC;
  --on-field-2:#9DA3A9;
  --on-field-accent:#DC4A42;
  --shadow:none;
}

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

html{
  /* No double-tap-zoom delay. Pinch-zoom deliberately untouched — this
     brand's job is showing people numbers about their own property. */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}

/* ── type ─────────────────────────────────────────────────────────────
   Fraunces display, Plex Sans text, Plex Mono for every figure. The
   mono face is the brand's numeric voice and no competitor has one. */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 96;
  letter-spacing:-.005em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(38px, 6.4vw, 76px); line-height:1.02; letter-spacing:-.015em}
h2{font-size:clamp(27px, 3.6vw, 42px)}
h3{font-size:clamp(20px, 2.1vw, 26px); line-height:1.18}
h4{font-size:19px; line-height:1.25}

p{margin:0 0 1.05em; max-width:var(--measure)}
a{color:inherit}
em{font-style:normal; color:var(--accent)}
strong,b{font-weight:600}

.lede{font-size:clamp(17px, 1.55vw, 20px); line-height:1.55; color:var(--secondary); max-width:60ch}
.fine{font-size:12.5px; line-height:1.5; color:var(--secondary); max-width:72ch}

/* The label voice. Mono, uppercase, tracked — every lot number, every
   column head, every data label in the brand. */
.label,.lot,th,.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--secondary);
}
.lot{color:var(--accent)}
.eyebrow{color:var(--accent); display:block; margin-bottom:14px}

/* Figures. Always tabular, always mono, always settled. */
.fig{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--ink);
}
.fig-xl{font-size:clamp(40px, 6vw, 68px)}
.fig-l {font-size:clamp(28px, 3.4vw, 40px)}
.fig-m {font-size:23px}

/* ── the rule ─────────────────────────────────────────────────────────
   Two weights only: hairline for structure, 2px for a figure or a
   section that carries weight. The accent is permitted on exactly one
   rule type — the short emphasis rule — and nowhere else. */
hr,.rule{border:0; height:1px; background:var(--underline); margin:0}
.rule-strong{height:2px; background:var(--underline)}
.rule-mark{height:2px; width:38px; background:var(--accent); margin-bottom:20px}

/* ── layout ───────────────────────────────────────────────────────────
   Twelve columns with a persistent left gutter for labels and lot
   numbers. A single measured column of text that never exceeds 66
   characters. Content sits low on the page rather than centred. */
.wrap{width:min(1180px, 100% - var(--gutter)*2); margin-inline:auto}
.band{padding:clamp(56px, 8vw, 116px) 0}
.band + .band{border-top:1px solid var(--underline)}

.split{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:clamp(20px,4vw,56px)}
@media (max-width:880px){ .split{grid-template-columns:1fr; gap:14px} }

.cols-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,2.4vw,28px)}
.cols-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2.4vw,28px)}
.cols-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px,1.8vw,20px)}
@media (max-width:980px){ .cols-3,.cols-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr} }

/* ── inverted field ───────────────────────────────────────────────────
   Ink as ground. The Noir register, applied to one section. */
.field{
  background:var(--field); color:var(--on-field);
  --ink:var(--on-field); --secondary:var(--on-field-2);
  --rule:rgba(255,255,255,.14); --rule-strong:rgba(255,255,255,.26);
  --surface:rgba(255,255,255,.045); --accent:var(--on-field-accent);
  --underline:var(--on-field-accent);
  --underline-soft:color-mix(in srgb, var(--on-field-accent) 40%, rgba(255,255,255,.14));
  position:relative;
}

/* ── the accent field ─────────────────────────────────────────────────
   Oxblood at full bleed. One section, once, on the homepage — the
   statement the rest of the system is disciplined enough to afford.

   Type on it is near-black, never white. Measured: black on oxblood
   4.79:1, white on oxblood 3.6:1 — which is large-text-only and
   therefore not a body colour. The palette said so; this obeys it. */
.field-accent{
  /* The ground comes from its own token, NOT from var(--accent). This
     block redefines --accent, and a background reading var(--accent)
     resolves against that redefinition — painting the band on itself
     and making the whole section vanish.

     The counter-colour used to be ink, because the band was oxblood
     dropped into a paper page. It is now a fill inside a dark page, so
     everything on it is warm white: near-black on #93283F measured
     2.24:1 and took the headline, the lede and the button with it. */
  background:var(--accent-ground); color:#FFFFFF;
  --ink:#FFFFFF; --underline:#FFFFFF; --accent:#FFFFFF;
  --secondary:rgba(255,255,255,.86); --muted:rgba(255,255,255,.74);
  --rule:rgba(255,255,255,.28);
}
.field-accent .btn{border-color:#FFFFFF; color:#FFFFFF}
.field-accent .btn:hover{background:#FFFFFF; color:var(--accent-ground)}
.field-accent .rule-mark{background:#FFFFFF}

/* ── card ─────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--rule);
  padding:clamp(20px,2.4vw,30px);
  position:relative;
}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}

/* ── the ladder ───────────────────────────────────────────────────────
   Ascending bars — the mark that didn't make the logo. Wherever this
   brand shows a number moving, it moves as a ladder. It is the visual
   form of price discovery. */
.ladder{display:flex; align-items:flex-end; gap:4px; height:44px}
.ladder i{display:block; flex:1; background:var(--accent-soft); border-top:2px solid var(--accent)}
.ladder i:last-child{background:var(--accent); border-top-color:var(--accent)}

/* ── data table ───────────────────────────────────────────────────── */
table{border-collapse:collapse; width:100%; font-size:14.5px}
th{text-align:left; padding:0 14px 9px 0; border-bottom:1.5px solid var(--underline); vertical-align:bottom}
td{padding:13px 14px 13px 0; border-bottom:1px solid var(--underline-soft); vertical-align:top; color:var(--secondary)}
td:first-child{color:var(--ink); font-weight:500}
td .fig{font-size:15px}

/* ── stat ─────────────────────────────────────────────────────────── */
/* Boxed. The top rule alone let a row of figures read as loose text;
   the box makes each one a discrete entry, which is what a figure with a
   source attached actually is. */
.stat{
  background:var(--surface); border:1px solid var(--rule);
  border-top:2px solid var(--underline);
  padding:16px 18px 18px;
}
.field .stat{background:rgba(255,255,255,.045); border-color:var(--rule)}
.field-accent .stat{background:rgba(20,23,26,.07); border-color:rgba(20,23,26,.22)}
.stat .fig{display:block; margin-bottom:8px}
.stat .say{font-size:13.5px; line-height:1.45; color:var(--secondary); margin:0 0 8px; max-width:34ch}
.stat .src{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--secondary); opacity:.75}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--text); font-size:15px; font-weight:500; line-height:1;
  padding:16px 26px; border:1px solid var(--ink); background:transparent;
  color:var(--ink); text-decoration:none; cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.btn:hover{background:var(--ink); color:var(--ground)}
/* a fill, not a mark — the mark colour was lightened to be READ on
   the dark ground and cannot carry white behind it (3.48:1) */
.btn.primary{background:var(--accent-fill); border-color:var(--accent-fill); color:#fff}
.btn.primary:hover{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.field .btn{border-color:var(--on-field)}
.field .btn:hover{background:var(--on-field); color:var(--field)}
/* White type on a red fill measures 3.6:1 — large text only, and a
   button is not large text. On ink the primary action is the warm white
   itself: the strongest contrast available, and the more confident of
   the two. */
.field .btn.primary{background:var(--on-field); border-color:var(--on-field); color:var(--field)}
.field .btn.primary:hover{background:transparent; color:var(--on-field)}

/* ── nav ──────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid var(--rule);
}
.nav .inner{display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding:15px 0; width:min(1180px, 100% - var(--gutter)*2); margin-inline:auto}
.nav .home{text-decoration:none; flex:0 0 auto; display:block}
.nav .links{display:flex; align-items:center; gap:clamp(12px,2vw,28px); margin-left:auto}
.nav .links a{
  font-size:13px; letter-spacing:.02em; text-decoration:none; color:var(--secondary);
  white-space:nowrap; padding:6px 0; border-bottom:1px solid transparent;
}
.nav .links a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.nav .links a[aria-current]{color:var(--ink); border-bottom-color:var(--accent)}
@media (max-width:820px){ .nav .links a.hide-sm{display:none} }

/* ── wordmark ─────────────────────────────────────────────────────────
   Fraunces, all caps, tracked to 0.135em. Twelve letters is a long
   word — the tracking and the high stroke contrast are what stop it
   reading as heavy. The hairline beneath is the strike rule. */
.mark{display:inline-block; line-height:1; text-decoration:none; color:var(--ink)}
.mark .word sup{font-size:.38em; letter-spacing:0; top:-.75em; opacity:.65}
.mark .word{
  font-family:var(--display); font-weight:400;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144;
  letter-spacing:.135em; text-transform:uppercase; display:block;
  font-size:var(--mark-size, 21px); white-space:nowrap;
}
/* The gavel's fall. Not decoration and not currentColor — the one line
   the whole identity hangs from, so it carries the accent. */
.mark .strike{display:block; height:1.5px; background:var(--underline); margin-top:6px}
/* Same red, more weight. Low contrast is survivable across a long line;
   it is not survivable across a hairline. */
.field .mark .strike, footer .mark .strike{height:3px}
.field .rule, .field hr{height:2px}
/* The divider BELOW a dark band is that section's top border. Setting
   `height` here instead collapsed the whole section to two pixels and
   every block after it stacked on top of the next. A section is not a
   rule; only its border is. */
.band.field + .band{border-top-width:2px}
.field .rule-mark, footer .rule-mark{height:3px; width:44px}
/* Set in the wordmark's own colour. It is part of the logo, not a
   piece of emphasis beside it — colouring it separately breaks the
   lockup into two things. */
.mark .desc{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink); margin-top:8px; font-weight:500;
}
.mark.lg .desc{font-size:clamp(11px, 1.2vw, 14px); letter-spacing:.26em; margin-top:11px}
.mark.lg{--mark-size:clamp(30px, 5.4vw, 58px)}

/* ── footer ───────────────────────────────────────────────────────── */
footer{background:var(--field); color:var(--on-field);
  --ink:var(--on-field); --secondary:var(--on-field-2);
  --rule:rgba(255,255,255,.14); --accent:var(--on-field-accent);
  /* Redeclared, not inherited. `--underline: var(--accent)` on :root
     resolves against :root's accent and inherits the resolved value —
     so overriding --accent here alone would leave the rules oxblood on
     a ground they were never measured against. */
  --underline:var(--on-field-accent);
  --underline-soft:color-mix(in srgb, var(--on-field-accent) 40%, rgba(255,255,255,.14));
  padding:clamp(48px,6vw,84px) 0 40px}
footer a{color:var(--on-field-2); text-decoration:none}
footer a:hover{color:var(--on-field)}

/* ── the settled number ───────────────────────────────────────────────
   One motion idea, used sparingly. Figures count up and stop; a rule
   draws in beneath them. Nothing bounces, nothing fades in on scroll
   for its own sake, nothing parallaxes. The brand's entire promise is
   that the number is real, so the number arrives and stays. */
@keyframes settle{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.settled{position:relative; display:inline-block}
.settled::after{
  content:''; position:absolute; left:0; right:0; bottom:-9px; height:2px;
  background:var(--accent); transform-origin:left;
  animation:settle .5s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion:reduce){ .settled::after{animation:none} }

/* ── notes ────────────────────────────────────────────────────────── */
.note{border-left:2px solid var(--accent); padding:4px 0 4px 18px; margin:26px 0;
  color:var(--secondary); font-size:14px; line-height:1.55; max-width:72ch}
.note b{color:var(--ink)}

/* A gap the brand has not filled yet, shown rather than hidden. The
   brand's own rule is to volunteer the uncomfortable thing. */
.pending{
  display:inline-block; font-family:var(--mono); font-size:.82em;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px dashed var(--accent); color:var(--accent);
  padding:1px 8px; border-radius:2px; white-space:nowrap;
}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:100; background:var(--ink);
  color:var(--ground); padding:12px 18px; text-decoration:none}