/* ============================================================
   MINTHOUSE — site stylesheet
   Light commerce chrome, editorial dark hero, auction gravitas.
   ============================================================ */

/* ---------- tokens ----------
   "Fresh pull" system: warm cream paper, plum-charcoal ink,
   midnight-aurora dark surfaces, pastel foil used as thin
   accents — never as background soup. */
:root {
  --paper: #eae6df;
  --panel: #fdfcf9;
  --wash: #e0dbd1;
  --wash2: #d5cfc2;
  --ink: #191713;
  --ink2: #3c3931;
  --mut: #635f55;
  --faint: #97928a;
  --line: #d2ccbf;
  --line2: #bcb5a6;
  --dark: #1c1915;
  --dark2: #29231b;
  --dark-line: #3b342a;
  --live: #9e3732;
  --up: #2e5f44;
  --down: #9e3732;
  --brass: #8f6f33;
  --brass-soft: #d3b573;
  --brass-lit: #f4e7c3;          /* the highlight the foil sweep passes through */
  /* the mint mark as a mask, so any element can carry the foil sweep */
  --mh-mark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2056'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M6%2050%20V6%20H21%20L32%2020%20L43%206%20H51%20L58%2013%20V50%20H45%20V26%20L32%2042%20L19%2026%20V50%20Z%20M32%2024%20L41%2034%20L32%2046%20L23%2034%20Z'%20fill%3D'%23fff'%2F%3E%3Cpath%20d%3D'M32%2029%20L37%2034%20L32%2041%20L27%2034%20Z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E");
  --holo-mint: #b9dfc9;
  --holo-sky: #b3cfe8;
  --holo-lilac: #e3cfae; /* champagne — the lilac read as AI-purple */
  --holo-butter: #ecd9a4;
  --holo-blush: #e9c3c4;
  --cream: #f4efe3;
  --cream-dim: #e7dfcd;
  --dark-fg: #c8c2b4;
  --dark-fg-mut: #a29c8e;
  --dark-fg-dim: #8b8578;
  --up-tint: #eaf3ec;
  --brass-ink: #6b5224;           /* brass dark enough to set text on a light tint */
  --warn: #8a5613;                /* caution: reversible operator actions */
  --warn-tint: #f6efe4;
  --live-tint: #f9edea;
  --foil: linear-gradient(90deg, var(--holo-mint), var(--holo-sky) 28%, var(--holo-lilac) 55%, var(--holo-butter) 80%, var(--holo-blush));
  --font-d: "Archivo", "Inter", -apple-system, sans-serif;
  --font-b: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --r-s: 4px;
  --r-m: 8px;
  --shadow-1: 0 1px 2px rgba(24, 22, 18, 0.06), 0 10px 26px rgba(24, 22, 18, 0.09);
  --shadow-2: 0 2px 6px rgba(24, 22, 18, 0.08), 0 22px 52px rgba(24, 22, 18, 0.15);
  --maxw: 1264px;
  --on-ink: #fff;
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Open dialogs own the scroll: the page behind locks (the stable gutter
   above keeps the layout from shifting when the scrollbar goes). */
body.mh-lock { overflow: hidden; }
body {
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

/* keyboard focus */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 0;
}
.hero :focus-visible, .consign :focus-visible, .sellhero :focus-visible, footer.site :focus-visible {
  outline-color: var(--cream);
}

/* thin pastel foil rule — the one decorative motif */
.foil-rule { height: 2px; background: var(--foil); opacity: 0.85; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- type utilities ---------- */
.eyebrow {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mut);
}
.eyebrow.brass { color: var(--brass); }
.num, .price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-m); font-size: 12.5px; }
.up { color: var(--up); }
.down { color: var(--down); }

h1, h2, h3 { font-family: var(--font-d); line-height: 1.08; letter-spacing: -0.01em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  padding: 13px 22px;
  border-radius: var(--r-s);
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.06s ease;
  white-space: nowrap;
}
.btn:hover { background: #3a352b; border-color: #3a352b; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.ondark { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn.ondark:hover { background: var(--cream-dim); border-color: var(--cream-dim); }
.btn.ondark.ghost { background: transparent; color: var(--cream); border-color: #57503e; }
.btn.ondark.ghost:hover { border-color: var(--cream); background: transparent; }
.btn.sm { padding: 9px 14px; font-size: 12.5px; }
.btn.xl { padding: 16px 30px; font-size: 14.5px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: default; }

.linkline {
  font-weight: 600;
  font-size: 13.5px;
  transition: opacity 0.15s;
}
.linkline:hover { opacity: 0.6; }

/* ============================================================
   HEADER
   ============================================================ */
.utilbar {
  background: var(--dark);
  color: var(--dark-fg);
  font-size: 12px;
}
.utilbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 34px;
}
.utilbar .ticker { display: flex; align-items: center; gap: 9px; min-width: 0; }
.utilbar .ticker b { color: var(--cream); font-weight: 600; }
.utilbar .ticker span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livetag {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--live);
  padding: 2.5px 6px 2px;
  border-radius: 2px;
  flex: none;
  line-height: 1;
}
.utilbar nav { display: flex; gap: 18px; flex: none; }
.utilbar nav a:hover { color: var(--cream); }

.masthead { border-bottom: 1px solid var(--line); background: var(--panel); }
.masthead .wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  height: 76px;
}
.wordmark { display: block; line-height: 1; }
.wordmark .wm-row { display: flex; align-items: center; gap: 8px; }
.wordmark .wm-mark { width: 21px; height: 21px; color: var(--ink); flex: none; }
.wordmark .wm-mark svg { width: 100%; height: 100%; }
footer.site .wm-mark { color: var(--cream); }
.wordmark .wm-main {
  font-family: var(--font-d);
  font-weight: 900;
  font-stretch: 122%;
  font-size: 23px;
  letter-spacing: 0.045em;
  color: var(--ink);
}
.wordmark .wm-sub {
  display: block;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.34em;
  color: var(--mut);
  margin-top: 3px;
  text-transform: uppercase;
}
.searchbox { position: relative; max-width: 560px; width: 100%; justify-self: center; }
.searchbox input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line2);
  border-radius: var(--r-m);
  background: var(--wash);
  padding: 0 16px 0 42px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.searchbox input:focus { border-color: var(--ink); background: var(--panel); }
.searchbox .sicon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--mut); pointer-events: none;
}
.search-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  z-index: 60;
  overflow: hidden;
  display: none;
}
.search-pop.open { display: block; }
.search-pop a.hit {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.search-pop a.hit:last-child { border-bottom: 0; }
.search-pop a.hit:hover { background: var(--wash); }
.search-pop .hit-thumb svg { width: 34px; height: auto; }
.search-pop .hit-t { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.search-pop .hit-m { display: block; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.search-pop .hit-p { font-weight: 700; font-size: 13px; }
.search-pop .allhits {
  display: block; text-align: center; padding: 11px;
  font-size: 12.5px; font-weight: 600; color: var(--ink2); background: var(--wash);
}
.search-pop .allhits:hover { background: var(--wash2); }

.mast-actions { display: flex; align-items: center; gap: 10px; }
.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink2);
}
.iconbtn:hover { background: var(--wash); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn .cnt {
  position: absolute; top: 2px; right: 4px;
  min-width: 15px; height: 15px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 9.5px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  padding: 0 4px;
}
.iconbtn .cnt.on { display: inline-flex; }

.catnav {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.catnav .wrap { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.catnav .wrap::-webkit-scrollbar { display: none; }
.catnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 13px 13px 11px;
  border-bottom: 2px solid transparent;
  color: var(--ink2);
  white-space: nowrap;
}
.catnav a .ni { width: 15px; height: 15px; color: var(--mut); flex: none; }
.catnav a .ni svg { width: 100%; height: 100%; }
.catnav a:hover .ni, .catnav a.active .ni { color: var(--ink); }
.catnav a:hover { color: var(--ink); border-bottom-color: var(--line2); }
.catnav a.active, .catnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    radial-gradient(950px 480px at 82% 8%, rgba(185, 223, 201, 0.13), transparent 62%),
    radial-gradient(820px 560px at 8% 96%, rgba(200, 188, 228, 0.16), transparent 58%),
    radial-gradient(700px 420px at 48% 118%, rgba(236, 217, 164, 0.10), transparent 60%),
    var(--dark);
  color: var(--cream);
  overflow: hidden;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding-top: 58px;
  padding-bottom: 62px;
}
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hero-eyebrow .eyebrow { color: var(--brass-soft); }
.hero h1 {
  min-height: 2.1em;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin-bottom: 20px;
  max-width: 13em;
}
.hero .lotmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--dark-fg); font-size: 13px; margin-bottom: 26px;
}
.gradechip {
  display: inline-flex; align-items: center;
  font-family: var(--font-d);
  font-weight: 800; font-size: 11.5px; letter-spacing: 0.06em;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.hero .bidblock { display: flex; align-items: flex-end; gap: 40px; margin-bottom: 30px; }
.hero .bidblock .lbl { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-fg-mut); font-weight: 600; margin-bottom: 6px; }
.hero .bidblock .val { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.hero .bidblock .sub { font-size: 12.5px; color: var(--dark-fg-mut); margin-top: 7px; }
.hero .cd { color: var(--cream); }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-media { position: relative; display: flex; justify-content: center; }
.hero-media .slabwrap {
  width: min(360px, 80%);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: auto 8% -34px 8%;
  height: 60px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(0, 0, 0, 0.5), transparent 70%);
}

/* ============================================================
   SECTIONS
   ============================================================ */
section.band { padding: 54px 0 60px; }
section.band.washed { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 26px;
}
.band-head h1, .band-head h2 {
  font-size: 25px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  margin-top: 7px;
}
.band-head .linkline { flex: none; margin-bottom: 4px; }

/* ---------- lot cards ---------- */
.lotgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(236px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }

.lotcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  position: relative;
}
.lotcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--line2); }
.lotcard .thumb {
  background: linear-gradient(180deg, var(--wash) 0%, var(--wash2) 100%);
  padding: 18px 34px 14px;
  position: relative;
}
.lotcard .thumb[data-cat="pokemon"]    { background: linear-gradient(180deg, #f6efdb, #efe5c9); }
.lotcard .thumb[data-cat="baseball"]   { background: linear-gradient(180deg, #edf1e7, #e2e8d8); }
.lotcard .thumb[data-cat="basketball"] { background: linear-gradient(180deg, #f4ece1, #ebdfcf); }
.lotcard .thumb[data-cat="football"]   { background: linear-gradient(180deg, #efeae0, #e5ddcd); }
.lotcard .thumb[data-cat="soccer"]     { background: linear-gradient(180deg, #eaf0ea, #dee7dd); }
.lotcard .thumb[data-cat="hockey"]     { background: linear-gradient(180deg, #e9eef3, #dce4ec); }
.lotcard .thumb[data-cat="tcg"]        { background: linear-gradient(180deg, #efeaf2, #e4dde9); }
.lotcard .thumb svg { width: 100%; height: auto; }
.lotcard .watch {
  position: absolute; top: 8px; right: 8px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  color: var(--mut);
  background: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transition: opacity 0.15s;
}
.lotcard:hover .watch, .lotcard:focus-within .watch, .lotcard .watch:focus-visible, .lotcard .watch.on { opacity: 1; }
.lotcard .watch:hover { color: var(--ink); background: #fff; }
.lotcard .watch.on { color: var(--brass); }
.lotcard .watch svg { width: 16px; height: 16px; }
.lotcard .body { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lotcard .meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.lotcard .title {
  font-size: 13.8px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.lotcard:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lotcard .gradeline { display: flex; gap: 6px; align-items: center; }
.gradetag {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  background: var(--ink);
  color: var(--on-ink);
  padding: 3px 6px;
  border-radius: 2px;
}
.gradetag.auto { background: var(--brass); }
.gradetag.ghost { background: transparent; color: var(--ink2); border: 1px solid var(--line2); padding: 2px 6px; }
.lotcard .priceline { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.lotcard .bid { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lotcard .bids { font-size: 12px; color: var(--mut); }
.lotcard .clock {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  margin: 4px -16px -15px;
  padding: 9px 16px;
  background: var(--wash);
  font-family: var(--font-m);
  font-size: 11.5px;
  color: var(--ink2);
}
.lotcard .clock .cd.soon { color: var(--live); font-weight: 500; }
.lotcard .clock .est { color: var(--faint); font-family: var(--font-b); }
.lotcard.closed .clock { color: var(--mut); }
.soldtag {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-d); font-weight: 800; font-size: 10px; letter-spacing: 0.1em;
  background: var(--live); color: var(--on-ink); padding: 3px 7px; border-radius: 2px;
}

/* ---------- category tiles ---------- */
.cattiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.cattile {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--panel);
  padding: 18px 16px 16px;
  transition: box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.cattile:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
.cattile .mini { display: block; width: 64px; margin-bottom: 12px; }
.cattile b { display: block; font-family: var(--font-d); font-weight: 800; font-size: 14.5px; letter-spacing: 0.01em; }
.cattile span { font-size: 12px; color: var(--mut); }
.cattile .arr { position: absolute; right: 14px; bottom: 14px; width: 15px; height: 15px; color: var(--faint); transition: transform 0.18s, color 0.18s; }
.cattile:hover .arr { transform: translateX(3px); color: var(--ink); }

/* ---------- results ---------- */
.resulttable { width: 100%; border-collapse: collapse; }
.resulttable th {
  text-align: left;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mut); font-weight: 600;
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--line2);
}
.resulttable td { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.resulttable tr:hover td { background: var(--wash); }
.resulttable .rt-title { font-weight: 600; max-width: 560px; }
.resulttable .rt-price { font-weight: 700; text-align: right; white-space: nowrap; font-size: 14.5px; }
.resulttable .rt-date, .resulttable .rt-auction { color: var(--mut); white-space: nowrap; }
.resulttable th.rt-price { text-align: right; }

/* ---------- market movers ---------- */
.movers {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
}
.mover { padding: 15px 16px; border-left: 1px solid var(--line); background: var(--panel); }
.mover:first-child { border-left: 0; }
.mover .mname { font-size: 11.5px; color: var(--mut); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover .mval { font-family: var(--font-d); font-weight: 800; font-size: 16px; }
.mover .mval .dir { font-size: 11px; vertical-align: 2px; margin-right: 2px; }

/* ---------- consign band ---------- */
.consign {
  background:
    radial-gradient(760px 380px at 86% 14%, rgba(236, 217, 164, 0.12), transparent 60%),
    radial-gradient(700px 420px at 6% 100%, rgba(185, 223, 201, 0.10), transparent 58%),
    var(--dark);
  color: var(--cream);
}
.consign .wrap {
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: center;
  padding-top: 58px; padding-bottom: 58px;
}
.consign h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; font-stretch: 112%; margin: 10px 0 12px; }
.consign p { color: var(--dark-fg); max-width: 46em; }
.consign .cta { justify-self: end; display: flex; gap: 12px; }
.consign .stats { display: flex; gap: 36px; margin-top: 24px; }
.consign .stat b { display: block; font-family: var(--font-d); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.consign .stat span { font-size: 12px; color: var(--dark-fg-mut); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

/* ---------- newsletter ---------- */
.newsband { border-top: 1px solid var(--line); }
.newsband .wrap {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  padding-top: 40px; padding-bottom: 44px;
}
.newsband h3 { font-size: 19px; font-weight: 800; font-stretch: 110%; }
.newsband p { color: var(--mut); font-size: 13.5px; margin-top: 4px; }
.newsform { display: flex; gap: 10px; }
.newsform input {
  width: 300px; height: 46px;
  border: 1px solid var(--line2); border-radius: var(--r-s);
  padding: 0 14px; outline: none; background: var(--panel);
}
.newsform input:focus { border-color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site {
  background: var(--dark);
  color: var(--dark-fg-mut);
  font-size: 13px;
  margin-top: 0;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 46px 0 32px;
  border-bottom: 1px solid var(--dark-line);
}
footer.site .brandcol .wm-main { color: #fff; font-size: 19px; }
footer.site .brandcol .wm-sub { color: #8b8578; }
footer.site .brandcol p { margin-top: 14px; line-height: 1.6; max-width: 30em; color: var(--dark-fg-mut); }
footer.site h4 {
  font-family: var(--font-d);
  color: var(--cream); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 14px;
}
footer.site ul { list-style: none; display: grid; gap: 9px; }
footer.site ul a:hover { color: var(--cream); }
.paymarks { display: flex; gap: 8px; margin-top: 18px; }
.paymark {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-s);
  padding: 5px 9px;
  font-family: var(--font-m);
  font-size: 10.5px;
  color: var(--dark-fg);
}
footer.site .fine {
  padding: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dark-fg-dim);
}
footer.site .fine p { margin: 0; }
footer.site .legalrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding: 14px 0 30px;
  color: var(--dark-fg-mut);
}
footer.site .legalrow a:hover { color: var(--cream); }
footer.site .legalrow .demo { margin-left: auto; color: var(--dark-fg-dim); }

/* ============================================================
   BROWSE
   ============================================================ */
.browsehead { border-bottom: 1px solid var(--line); background: var(--wash); }
.browsehead .wrap { padding-top: 34px; padding-bottom: 26px; }
.browsehead h1 { font-size: 27px; font-weight: 800; font-stretch: 112%; margin-top: 8px; }
.browsehead .sub { color: var(--mut); font-size: 13.5px; margin-top: 8px; }

.browse-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 36px;
  align-items: start;
  padding: 30px 0 70px;
}
.facets { position: sticky; top: 64px; display: grid; gap: 4px; }
.facet { border-bottom: 1px solid var(--line); padding: 14px 0 16px; }
.facet:first-child { padding-top: 0; }
.facet h4 {
  font-family: var(--font-d);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 11px;
  display: flex; justify-content: space-between; align-items: center;
}
.facet .opt {
  display: flex; align-items: center; gap: 9px;
  padding: 4.5px 0;
  font-size: 13.5px;
  color: var(--ink2);
  cursor: pointer;
  user-select: none;
}
.facet .opt:hover { color: var(--ink); }
.facet .opt .box {
  width: 15px; height: 15px;
  border: 1.5px solid var(--line2);
  border-radius: 2px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.facet .opt input {
  position: absolute;
  opacity: 0;
  width: 15px; height: 15px;
  margin: 0;
  pointer-events: none;
}
.facet .opt input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.facet .opt input:checked + .box { background: var(--ink); border-color: var(--ink); }
.facet .opt input:checked + .box::after {
  /* the mint-mark gem, set into the plate */
  content: "";
  width: 5px; height: 5px;
  background: var(--on-ink);
  transform: rotate(45deg);
}
.facet .opt .n { margin-left: auto; color: var(--faint); font-size: 12px; }
button.clear, .facet .clear { font-size: 12px; color: var(--mut); font-weight: 600; cursor: pointer; letter-spacing: 0.02em; background: none; border: 0; padding: 2px 4px; font-family: inherit; }
.facet .clear:hover { color: var(--ink); }

.browse-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.browse-toolbar .count { font-size: 13.5px; color: var(--mut); }
.browse-toolbar .count b { color: var(--ink); font-weight: 700; }
.sortsel { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mut); }
.sortsel select {
  height: 38px;
  border: 1px solid var(--line2); border-radius: var(--r-s);
  background: var(--panel); padding: 0 10px;
  font-size: 13px; font-weight: 600;
  outline: none; cursor: pointer;
}
.sortsel select:focus { border-color: var(--ink); }
.browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.emptystate {
  border: 1px dashed var(--line2); border-radius: var(--r-m);
  padding: 60px 30px; text-align: center; color: var(--mut);
}
.emptystate b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* ============================================================
   WORKING INDICATOR — the mint mark, foil-sheened
   ------------------------------------------------------------
   The same mark and the same sweep as the page-transition loader,
   scaled down for in-page waits (archive queries, search, any
   pending fetch) so every wait on the site looks like the house.
   ============================================================ */
.mhload { display: inline-flex; align-items: center; gap: 9px; }
.mhload .mk {
  width: 23px; height: 20px; flex: none;
  -webkit-mask: var(--mh-mark-mask) center/contain no-repeat;
  mask: var(--mh-mark-mask) center/contain no-repeat;
  background: linear-gradient(112deg, var(--brass) 0%, var(--brass) 34%, var(--brass-lit) 50%, var(--brass) 66%, var(--brass) 100%) 0 0/260% 100%;
  animation: mhsheen 1.5s ease-in-out infinite, mhadmire 2.8s ease-in-out infinite alternate;
}
.mhload.sm .mk { width: 17px; height: 15px; }
.mhload.block {
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center;
  padding: 54px 20px; color: var(--mut); font-size: 13.5px;
}
.mhload.block .mk { width: 46px; height: 40px; }
@keyframes mhsheen { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes mhadmire {
  0% { transform: perspective(700px) rotateY(-13deg) rotateX(4deg); }
  100% { transform: perspective(700px) rotateY(13deg) rotateX(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mhload .mk { animation: mhsheen 2.4s linear infinite; }
}

/* ============================================================
   LOT PAGE
   ============================================================ */
.crumbbar { border-bottom: 1px solid var(--line); background: var(--wash); font-size: 12.5px; color: var(--mut); }
.crumbbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.crumbbar .lotnav { white-space: nowrap; }
.crumbbar a:hover { color: var(--ink); text-decoration: underline; }
.crumbbar .sep { margin: 0 7px; color: var(--faint); }
.crumbbar .lotnav { display: flex; gap: 16px; font-weight: 600; }

.lot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 44px;
  padding: 34px 0 60px;
  align-items: start;
}
.lot-media { position: sticky; top: 76px; }
.lot-stage {
  background: linear-gradient(180deg, var(--wash) 0%, var(--wash2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 34px 56px;
  display: flex; justify-content: center;
}
.lot-stage .slabwrap {
  width: min(380px, 100%);
  filter: drop-shadow(0 24px 40px rgba(34, 29, 49, 0.28));
  transition: transform 0.12s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.lot-thumbs { display: flex; gap: 10px; margin-top: 14px; }
.lot-thumbs button {
  flex: none;
  width: 64px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--wash);
  padding: 6px;
  transition: border-color 0.12s;
}
.lot-thumbs button.active, .lot-thumbs button:hover { border-color: var(--ink); }
.lot-thumbs svg { width: 100%; height: auto; }
.lot-note { margin-top: 16px; font-size: 13px; color: var(--mut); line-height: 1.6; }
.lot-note b { color: var(--ink2); }

.lot-panel h1 { font-size: 23px; font-weight: 800; font-stretch: 108%; line-height: 1.18; letter-spacing: -0.01em; }
.lot-sub { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--mut); font-size: 13px; margin-top: 10px; }
.lot-sub .gradetag { font-size: 11px; }
.lot-sub .cert { font-family: var(--font-m); font-size: 11.5px; }
.watchrow { margin-top: 6px; }
.watchrow button { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; font-weight: 600; color: var(--mut); }
.watchrow button:hover { color: var(--ink); }
.watchrow button.on { color: var(--brass); }
.watchrow svg { width: 15px; height: 15px; }

.bidbox {
  border: 1px solid var(--line2);
  border-radius: var(--r-m);
  margin-top: 18px;
  overflow: hidden;
}
.bidbox .bb-top {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.bidbox .bb-cell { padding: 16px 18px; }
.bidbox .bb-cell + .bb-cell { border-left: 1px solid var(--line); }
.bidbox .bb-lbl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin-bottom: 5px; }
.bidbox .bb-val { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bidbox .bb-sub { font-size: 12px; color: var(--mut); margin-top: 4px; }
.bidbox .bb-val.cd.soon { color: var(--live); }
.bidbox .bb-mid { padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--wash); }
.bidrow { display: flex; gap: 10px; }
.bidrow .amt {
  flex: 1;
  position: relative;
}
.bidrow .amt input {
  width: 100%; height: 50px;
  border: 1px solid var(--line2); border-radius: var(--r-s);
  padding: 0 14px 0 30px;
  font-size: 16px; font-weight: 600;
  outline: none;
  background: var(--panel);
  font-variant-numeric: tabular-nums;
}
.bidrow .amt input:focus { border-color: var(--ink); }
.bidrow .amt .cur { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--mut); font-weight: 600; }
.bidrow .btn { height: 50px; padding: 0 26px; }
.quickbids { display: flex; gap: 8px; margin-top: 10px; }
.quickbids button {
  flex: 1;
  border: 1px solid var(--line2);
  border-radius: var(--r-s);
  background: var(--panel);
  height: 34px;
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.12s, background 0.12s;
}
.quickbids button:hover { border-color: var(--ink); }
.bidbox .bb-note { font-size: 12px; color: var(--mut); margin-top: 10px; line-height: 1.55; }
.bidbox .bb-note b { color: var(--ink2); }
.bidstate {
  display: none;
  padding: 11px 18px;
  font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.bidstate.win { display: block; background: var(--up-tint); color: var(--up); }
.bidstate.out { display: block; background: var(--live-tint); color: var(--live); }
.bidstate.confirm { display: block; background: var(--wash); color: var(--ink2); }
.bidbox .bb-settle { padding: 15px 18px; }
.bidbox .bb-settle .srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bidbox .bb-settle .coins { display: flex; gap: 5px; }
.cointile {
  width: 22px; height: 22px;
  border: 1px solid var(--line2);
  border-radius: 2px;
  background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-m); font-size: 11px; font-weight: 500;
  color: var(--ink);
}
.bidbox .bb-settle .stxt { font-size: 12.5px; color: var(--mut); line-height: 1.5; }
.bidbox .bb-settle .stxt b { color: var(--ink); }
.bidbox .bb-settle .linkline { font-size: 12.5px; }

/* estimate + pop row */
.lot-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.stattile { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; }
.stattile .lbl { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.stattile .val { font-family: var(--font-d); font-weight: 800; font-size: 16.5px; margin-top: 3px; }
.stattile .sub { font-size: 11.5px; color: var(--mut); margin-top: 1px; }

/* tabs */
.lot-tabs { margin-top: 34px; border-bottom: 1px solid var(--line); display: flex; gap: 2px; }
.lot-tabs button {
  font-family: var(--font-d);
  font-weight: 700; font-size: 13.5px;
  padding: 11px 15px;
  border-bottom: 2px solid transparent;
  color: var(--mut);
  margin-bottom: -1px;
}
.lot-tabs button:hover { color: var(--ink); }
.lot-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabpane { display: none; padding-top: 22px; }
.tabpane.active { display: block; }

.chartbox { border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 18px 8px; }
.chartbox .chead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.chartbox .chead b { font-size: 14px; }
.chartbox .chead span { font-size: 12px; color: var(--mut); }
.chartbox svg { width: 100%; height: auto; }

.compstable { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.compstable th { text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); padding: 0 10px 8px; border-bottom: 1px solid var(--line2); }
.compstable td { padding: 10px; border-bottom: 1px solid var(--line); }
.compstable .cprice { font-weight: 700; text-align: right; }
.compstable th.cprice { text-align: right; }
.compstable .cvenue { color: var(--mut); }

.bidhist { list-style: none; }
.bidhist li {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  align-items: baseline;
}
.bidhist .who { font-weight: 600; }
.bidhist .who .you { color: var(--up); }
.bidhist .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.bidhist .when { color: var(--faint); font-size: 12px; }

.popgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.popcell { border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; text-align: center; }
.popcell.hl { border-color: var(--ink); background: var(--wash); }
.popcell .g { font-size: 11px; letter-spacing: 0.08em; color: var(--mut); font-weight: 600; text-transform: uppercase; }
.popcell .n { font-family: var(--font-d); font-weight: 800; font-size: 21px; margin-top: 4px; }
.popnote { font-size: 12.5px; color: var(--mut); margin-top: 12px; line-height: 1.6; }

.shipblock { display: grid; gap: 14px; }
.shiprow { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-s); padding: 15px 16px; }
/* Only the row's own title goes block. A nested <b> inside the paragraph
   is inline emphasis and must stay in the sentence. */
.shiprow > div > b { display: block; font-size: 13.5px; }
.shiprow p { font-size: 12.5px; color: var(--mut); margin-top: 3px; line-height: 1.55; }
.shiprow p b { font-weight: 700; color: var(--ink2); }

.similar { padding: 46px 0 66px; border-top: 1px solid var(--line); }

/* ============================================================
   MODALS / TOASTS
   ============================================================ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(34, 29, 49, 0.58);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 20px 40px;
  overflow-y: auto;
}
.overlay.open { display: flex; }
.modal {
  background: var(--panel);
  width: 100%;
  max-width: 460px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: modalin 0.18s ease;
}
.modal.wide { max-width: 560px; }
@keyframes modalin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal .m-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.modal .m-head b { font-family: var(--font-d); font-weight: 800; font-size: 16px; font-stretch: 108%; }
.modal .m-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-s); color: var(--mut); }
.modal .m-close:hover { background: var(--wash); color: var(--ink); }
.modal .m-body { padding: 22px; }
.modal .m-note { font-size: 12px; color: var(--mut); line-height: 1.6; }

/* Payment-sheet variant: embedded content runs edge to edge, the header
   sheds its rule, and the whole thing reads as one surface. */
.modal.sheet { max-width: 520px; }
.modal.sheet .m-body { padding: 0; }
.modal.sheet .m-head { border-bottom: 0; padding: 15px 16px 13px 20px; }
.modal.sheet .m-head b { font-size: 14px; letter-spacing: 0.01em; }

.provider {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 13px 15px;
  margin-bottom: 9px;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.provider:hover { border-color: var(--ink); }
.provider .ptile {
  width: 34px; height: 34px; border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-weight: 800; font-size: 13px;
  color: #fff; background: var(--dark2);
  flex: none;
}
.provider b { display: block; font-size: 14px; }
.provider span { display: block; font-size: 12px; color: var(--mut); }
.provider .arr { margin-left: auto; width: 15px; height: 15px; color: var(--faint); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; font-family: var(--font-d); }
.field input, .field select, .field textarea {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line2);
  border-radius: var(--r-s);
  padding: 0 13px;
  outline: none;
  background: var(--panel);
  transition: border-color 0.12s;
}
.field textarea { height: auto; padding: 12px 13px; resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field .hint { font-size: 11.5px; color: var(--mut); margin-top: 5px; }
.field.err input { border-color: var(--live); }
.field .errmsg { display: none; font-size: 11.5px; color: var(--live); margin-top: 5px; font-weight: 600; }
.field.err .errmsg { display: block; }

/* settle modal */
.coinrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.coinbtn {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 11px 6px 9px;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
}
.coinbtn:hover { border-color: var(--line2); background: var(--wash); }
.coinbtn.active { border-color: var(--ink); background: var(--wash); box-shadow: inset 0 0 0 1px var(--ink); }
.coinbtn.active .cointile { border-color: var(--ink); }
.coinbtn .cointile { margin: 0 auto 6px; width: 26px; height: 26px; font-size: 12.5px; }
.coinbtn b { display: block; font-size: 12.5px; }
.coinbtn span { display: block; font-size: 10.5px; color: var(--mut); }
.invoice { border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: 16px; }
.invoice .irow {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.invoice .irow:last-child { border-bottom: 0; }
.invoice .irow.total { font-weight: 700; font-size: 14.5px; background: var(--wash); }
.invoice .irow .sub { color: var(--mut); font-size: 11.5px; }
.invoice .save { color: var(--up); font-weight: 600; }
.paybox { border: 1px solid var(--line2); border-radius: var(--r-s); padding: 16px; background: var(--wash); }
.paybox .prow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.paybox .plbl { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.paybox .pamt { font-family: var(--font-m); font-size: 17px; font-weight: 500; }
.paybox .addr {
  display: flex; gap: 8px; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 10px 12px;
}
.paybox .addr code {
  font-family: var(--font-m); font-size: 11px; color: var(--ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.paybox .copybtn { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.paybox .copybtn:hover { text-decoration: underline; }
.paybox .pfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 11.5px; color: var(--mut); }
.paybox .qr { margin: 14px auto 4px; width: 132px; height: 132px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px; display: none; }
.paybox .qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.paybox .qr.on { display: block; }
.ratefoot { font-size: 11.5px; color: var(--mut); margin-top: 12px; line-height: 1.6; }

.toasthost {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: grid; gap: 8px;
  width: min(430px, calc(100vw - 40px));
}
.toast {
  background: var(--dark);
  color: var(--cream);
  border-radius: var(--r-m);
  padding: 13px 16px;
  font-size: 13.5px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  display: flex; gap: 10px; align-items: flex-start;
  animation: toastin 0.22s ease;
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.out { border-left: 3px solid var(--live); }
.toast.good { border-left: 3px solid var(--up); }
.toast b { font-weight: 700; }
.toast .tmsg { flex: 1; line-height: 1.45; }
.toast .tact { flex: none; font-weight: 700; color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   SELL PAGE
   ============================================================ */
.sellhero { background: var(--dark); color: var(--cream); position: relative; overflow: hidden; }
.sellhero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 380px at 82% 8%, rgba(200, 188, 228, 0.14), transparent 58%),
    radial-gradient(640px 380px at 10% 100%, rgba(236, 217, 164, 0.10), transparent 55%);
  pointer-events: none;
}
.sellhero .wrap { position: relative; z-index: 1; padding-top: 62px; padding-bottom: 66px; max-width: 880px; }
.sellhero h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; font-stretch: 112%; margin: 14px 0 16px; }
.sellhero p { color: var(--dark-fg); font-size: 16px; max-width: 40em; line-height: 1.6; }
.sellhero .cta { margin-top: 28px; display: flex; gap: 12px; }

.feetable { width: 100%; border-collapse: collapse; }
.feetable th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); text-align: left; padding: 0 16px 10px; border-bottom: 1px solid var(--line2); }
.feetable td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.feetable .ft-rate { font-family: var(--font-d); font-weight: 800; font-size: 16px; white-space: nowrap; }
.feetable .ft-note { color: var(--mut); font-size: 12.5px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.step { padding: 22px 20px 24px; border-left: 1px solid var(--line); background: var(--panel); }
.step:first-child { border-left: 0; }
.step .n {
  font-family: var(--font-m);
  font-size: 11px; color: var(--mut);
  display: block; margin-bottom: 10px;
}
.step b { display: block; font-family: var(--font-d); font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.step p { font-size: 12.5px; color: var(--mut); line-height: 1.55; }

.sellform { max-width: 640px; }
.sellform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formok {
  display: none;
  border: 1px solid var(--up);
  background: var(--up-tint);
  color: var(--up);
  border-radius: var(--r-m);
  padding: 22px 24px;
  line-height: 1.6;
}
.formok b { display: block; font-size: 16px; margin-bottom: 4px; }
.formok.on { display: block; }

/* ============================================================
   LEGAL
   ============================================================ */
.legal-layout { display: grid; grid-template-columns: 230px 1fr; gap: 44px; padding: 40px 0 80px; align-items: start; }
.legal-toc { position: sticky; top: 70px; display: grid; gap: 2px; font-size: 13px; }
.legal-toc a { padding: 7px 10px; border-left: 2px solid var(--line); color: var(--mut); }
.legal-toc a:hover { color: var(--ink); border-left-color: var(--ink2); }
.legal-body { max-width: 760px; }
.legal-body h1 { font-size: 30px; font-weight: 800; font-stretch: 112%; margin-bottom: 6px; }
.legal-body .rev { color: var(--mut); font-size: 13px; margin-bottom: 34px; }
.legal-body h2 { font-size: 18px; font-weight: 800; font-stretch: 108%; margin: 34px 0 10px; padding-top: 10px; }
.legal-body p, .legal-body li { font-size: 14px; color: var(--ink2); line-height: 1.7; margin-bottom: 10px; }
.legal-body ul { padding-left: 20px; }
.legal-body .callout { border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--wash); padding: 14px 16px; font-size: 13px; margin: 14px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .lotgrid { grid-template-columns: repeat(3, 1fr); }
  .cattiles { grid-template-columns: repeat(3, 1fr); }
  .movers { grid-template-columns: repeat(3, 1fr); }
  .mover:nth-child(4) { border-left: 0; }
  .mover { border-top: 1px solid var(--line); }
  .mover:nth-child(-n+3) { border-top: 0; }
  .lot-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; }
}
@media (max-width: 940px) {
  .masthead .wrap { grid-template-columns: auto 1fr auto; gap: 16px; height: 66px; }
  .wordmark .wm-sub { display: none; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 44px; padding-bottom: 50px; }
  .hero-media { order: -1; }
  .hero-media .slabwrap { width: min(300px, 70%); }
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  .facets { position: static; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
  .lot-layout { grid-template-columns: minmax(0, 1fr); }
  .lot-media { position: static; }
  .consign .wrap { grid-template-columns: minmax(0, 1fr); }
  .consign .cta { justify-self: start; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  footer.site .legalrow .demo { margin-left: 0; }
  .newsband .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* The marketing links go, but NOT the account controls. Hiding the
     whole nav left a phone with no way to sign in, sign out, or reach
     My Account — the account page was reachable only by typing the URL. */
  .utilbar nav a { display: none; }
  .utilbar nav a.acctlink,
  .utilbar nav a[data-signin],
  .utilbar nav a[data-signout] { display: inline; }
  .utilbar nav { gap: 14px; }
  .utilbar .ticker span:not(.livetag) { display: none; }
  .utilbar .ticker b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .masthead .wrap { grid-template-columns: auto 1fr; height: auto; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
  .searchbox { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .mast-actions { justify-self: end; }
  .iconbtn .lbltxt { display: none; }
  .lotgrid, .browse-grid { grid-template-columns: repeat(2, 1fr); }
  .cattiles { grid-template-columns: repeat(2, 1fr); }
  .movers { grid-template-columns: repeat(2, 1fr); }
  .mover:nth-child(3) { border-left: 0; }
  .mover:nth-child(-n+2) { border-top: 0; }
  .mover:nth-child(3) { border-top: 1px solid var(--line); }
  .band-head h1, .band-head h2 { font-size: 21px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3) { border-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sellform .two { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .lot-stats { grid-template-columns: 1fr 1fr; }
  .popgrid { grid-template-columns: repeat(2, 1fr); }
  .bidbox .bb-top { grid-template-columns: 1fr; }
  .bidbox .bb-cell + .bb-cell { border-left: 0; border-top: 1px solid var(--line); }
  .coinrow { grid-template-columns: repeat(2, 1fr); }
  /* Hide the header cell with the column, or the table keeps a dangling
     empty "Auction" heading over nothing. */
  .resulttable .rt-auction,
  .resulttable thead th:nth-child(4) { display: none; }
  .lot-stage { padding: 22px 24px; }
}
@media (max-width: 540px) {
  /* Hide the WORD, never the content. `span:last-child` also matched the
     address span once a wallet was connected, so on a phone the button
     rendered as an empty black rectangle in both states — and the icon
     had no intrinsic size to fall back on. */
  #walletbtn .wb-label { display: none; }
  #walletbtn { padding: 9px 11px; }
  /* max-width:none is load-bearing: the global `img, svg { max-width: 100% }`
     resolves against the shrunken button and collapsed the icon to 4.9px. */
  #walletbtn svg { width: 16px; height: 16px; display: block; max-width: none; flex: none; }
  .wordmark .wm-main { font-size: 20px; }
}
@media (max-width: 460px) {
  .lotgrid, .browse-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lotcard .thumb { padding: 12px 18px 10px; }
  .lotcard .bid { font-size: 15.5px; }
  .hero .bidblock { gap: 24px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   CARD ARCHIVE
   ============================================================ */
.arc-search { padding: 26px 0 4px; }
.arc-inputrow { display: flex; gap: 10px; align-items: stretch; }
.arc-inputrow .searchbox { flex: 1; }
.arc-inputrow .sortsel select { height: 44px; }
.arc-hint { font-size: 12.5px; color: var(--mut); margin-top: 10px; }

.arc-statusband {
  margin: 18px 0 6px;
  font-size: 13.5px;
  color: var(--ink2);
  border-left: 3px solid var(--brass-soft);
  padding: 6px 0 6px 12px;
}
.arc-statusband.working { border-left-color: var(--brass); }

.arc-section { padding: 26px 0 8px; }
.arc-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.arc-sechead h2 { font-size: 21px; font-weight: 800; font-stretch: 112%; margin-top: 6px; }
.arc-count { font-size: 12.5px; color: var(--mut); white-space: nowrap; margin-bottom: 3px; }
.arc-none { color: var(--mut); font-size: 13.5px; padding: 6px 0 14px; }
/* A source that didn't answer: dimmed to a single line, not an error page. */
.arc-offline {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; margin: 10px 0;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--wash);
  font-size: 12.5px; color: var(--faint);
}
.arc-offline b { font-family: var(--font-d); font-weight: 700; color: var(--mut); }
.arc-offline .linkline { margin-left: auto; font-size: 12px; color: var(--mut); }
.arc-relaxed { color: var(--mut); font-size: 12.5px; margin: -6px 0 12px; padding: 6px 10px; background: var(--wash); border-left: 3px solid var(--holo-butter); border-radius: 0 4px 4px 0; }

.arc-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 0 6px; }
.arc-pager .btn { height: 34px; padding: 0 16px; font-size: 12.5px; }
.arc-pager .btn[disabled] { opacity: 0.35; pointer-events: none; }
.arc-pageinfo { font-size: 12.5px; color: var(--mut); font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }

/* column counts that all divide the 12-card page — every full page is a
   clean rectangle at every width; only a result set's true last page can
   run short, and its cells stay equal-width and left-aligned */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding-bottom: 18px;
}
@media (max-width: 1250px) { .arc-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .arc-grid { grid-template-columns: repeat(3, 1fr); } }
/* ≤720px drops to 2 columns in the responsive block below */
.arc-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.arc-card:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); border-color: var(--line2); }
.arc-img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 6.4;
  background: linear-gradient(180deg, var(--wash), var(--wash2));
  padding: 14px;
}
.arc-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 18px rgba(34, 29, 49, 0.18); }
.arc-img svg { width: auto; height: 100%; max-width: 100%; }
.arc-img img.fit-left { height: 96%; width: auto; aspect-ratio: 876 / 1154; object-fit: cover; object-position: left center; }
.arc-noscan {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 74%; aspect-ratio: 5 / 7;
  border: 1.5px dashed var(--line2); border-radius: 8px;
  color: var(--faint); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  text-align: center; padding: 12px;
}
.arc-noscan span:first-child {
  font-family: var(--font-d); font-weight: 800; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--mut); line-height: 1.25;
}
.arc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.arc-name { font-size: 13.8px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.arc-meta { font-size: 11.5px; color: var(--mut); line-height: 1.4; }
.arc-price { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.arc-price em { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--faint); }
.arc-status {
  margin-top: 7px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--mut); line-height: 1.4;
}
.arc-status b { font-family: var(--font-d); font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.arc-status.st-live b { color: var(--up); }      /* biddable now */
.arc-status.st-soon b { color: var(--live); }    /* on the clock */
.arc-status.st-pending b { color: var(--brass); } /* held by a buyer */
.arc-status.st-sold b { color: var(--live); }
.arc-status.st-off b { color: var(--faint); }    /* nothing to act on */

/* skeletons */
.arc-skel { pointer-events: none; }
.arc-skel .arc-img { background: var(--wash); }
.arc-skel .sk { display: block; height: 11px; border-radius: 3px; background: var(--wash2); }
.arc-skel .sk1 { width: 80%; }
.arc-skel .sk2 { width: 60%; }
.arc-skel .sk3 { width: 70%; margin-top: 6px; }
@keyframes arcpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.arc-skel .arc-img, .arc-skel .sk { animation: arcpulse 1.4s ease infinite; }

/* detail modal */
.arc-detail { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.arc-detailimg img { width: 100%; border-radius: 8px; box-shadow: 0 10px 28px rgba(34, 29, 49, 0.22); }
.arc-detailimg img.fit-left { aspect-ratio: 876 / 1154; object-fit: cover; object-position: left center; }
.arc-detailimg svg { width: 100%; height: auto; display: block; }
.arc-detailimg .arc-noscan { width: 100%; }
.arc-detailbody .arc-status { border-top: 0; padding-top: 0; margin-top: 0; display: block; font-size: 12.5px; }

@media (max-width: 720px) {
  .arc-inputrow { flex-wrap: wrap; }
  .arc-inputrow .searchbox { flex-basis: 100%; }
  .arc-inputrow .sortsel { flex: 1; }
  .arc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .arc-detail { grid-template-columns: 1fr; }
  .arc-detailimg { max-width: 240px; margin: 0 auto; }
}

/* ============================================================
   Luxury-house layer — serif titles, bid modes, reserve chips,
   extended bidding, specialist card, catalogue notes
   ============================================================ */
:root { --font-serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; }

/* light serif reserved for lot + sale titles — never bold, never giant */
.lot-panel h1 { font-family: var(--font-serif); font-weight: 400; font-stretch: 100%; font-size: 25px; letter-spacing: 0; }
.salenum { display: block; font-size: 12px; letter-spacing: 0.08em; font-weight: 500; color: var(--mut); text-transform: uppercase; margin-top: 4px; }

/* bid modes */
.bidmode { display: flex; gap: 18px; margin-bottom: 10px; }
.bidmode label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.bidmode input { accent-color: var(--ink); width: 15px; height: 15px; }
.bidmode em { font-style: normal; font-weight: 400; color: var(--mut); }

/* reserve + extension chips */
.rchip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; vertical-align: 1px; }
.rchip.met { color: var(--up); background: var(--up-tint); }
.rchip.notmet { color: #94590f; background: rgba(160, 102, 22, 0.12); }
.rchip.none { color: var(--mut); background: var(--wash); }
.extchip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 3px; color: var(--panel); background: var(--live); margin-right: 6px; animation: extpulse 2.2s ease-in-out infinite; }
@keyframes extpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }
.cd.extended { color: var(--live); }
@media (prefers-reduced-motion: reduce) { .extchip { animation: none; } }

/* bid history auto marker */
.autobid { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mut); background: var(--wash); padding: 1px 5px; border-radius: 3px; }

/* specialist card */
.speccard { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; margin: 16px 0 4px; background: var(--panel); }
.speccard b { font-size: 13.5px; }
.speccard p { font-size: 12.5px; color: var(--mut); margin: 2px 0 0; }
.speccard .btn { margin-left: auto; height: 34px; padding: 0 16px; font-size: 12.5px; }
.specmono { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--wash); font-family: var(--font-serif); font-size: 15px; color: var(--ink); flex-shrink: 0; }
/* The same slot holds a portrait when a specialist has one. */
img.specmono { object-fit: cover; padding: 0; }

/* catalogue note + provenance — the Sotheby's register */
.catnote p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.65; color: var(--ink); margin: 0 0 12px; }
.provenance { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.provenance h3 { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--mut); margin: 0 0 8px; }
.provenance ul { list-style: none; margin: 0; padding: 0; }
.provenance li { font-family: var(--font-serif); font-size: 13.5px; color: var(--ink); padding: 3px 0; }
.provenance li + li { border-top: 1px dotted var(--line); }

/* ============================================================
   Consignment wizard
   ============================================================ */
.cw { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 26px 28px; }
.cw-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 24px; padding: 0; flex-wrap: wrap; }
.cw-steps li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--faint); padding-right: 18px; }
.cw-steps li span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.4px solid var(--line); font-size: 11px; }
.cw-steps li.now { color: var(--ink); }
.cw-steps li.now span { border-color: var(--ink); background: var(--ink); color: var(--panel); }
.cw-steps li.done { color: var(--up); }
.cw-steps li.done span { border-color: var(--up); background: var(--up-tint); }
.cw-steps li:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: var(--line); margin-left: 4px; }

.cw-grid { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: start; }
.cw-form .field { margin-bottom: 16px; }
.cw-preview { position: sticky; top: 90px; }
.cw-slab { background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px 34px; }
.cw-slab svg { width: 100%; height: auto; display: block; }
.cw-slab.sm { max-width: 150px; padding: 10px 14px; flex-shrink: 0; }
.cw-cap { font-size: 12px; color: var(--mut); margin-top: 10px; text-align: center; }
.cw-foot { font-size: 12px; color: var(--mut); margin-top: 12px; }
.cw-h { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--mut); margin: 0 0 8px; }
.hint.ok { color: var(--up); font-weight: 600; }
.gradesell { background: var(--wash); border-left: 3px solid var(--holo-butter); border-radius: 0 4px 4px 0; padding: 10px 13px; font-size: 13px; color: var(--ink); margin-bottom: 16px; }
.gradesell b { display: block; margin-bottom: 2px; }

.cw-pending { display: flex; gap: 22px; align-items: flex-start; }
.cw-pending b { font-size: 16px; }
.cw-pending p { color: var(--mut); font-size: 13.5px; margin: 8px 0 0; max-width: 52ch; }
.cw-ref { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--ink); background: var(--wash); padding: 2px 8px; border-radius: 3px; }

.cw-est { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.cw-estnote { font-size: 12.5px; color: var(--mut); margin: 0 0 16px; }
.cw-route { border: 1px solid var(--line); border-radius: var(--r-m); padding: 13px 16px; margin-bottom: 16px; background: var(--wash); }
.cw-route b { font-size: 13.5px; }
.cw-route p { font-size: 12.5px; color: var(--mut); margin: 4px 0 0; }
.cw-fees ul { list-style: none; margin: 0 0 16px; padding: 0; }
.cw-fees li { font-size: 13px; color: var(--ink); padding: 7px 0; border-bottom: 1px dotted var(--line); }
.cw-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 500; cursor: pointer; }
.cw-check input { margin-top: 2px; accent-color: var(--ink); width: 15px; height: 15px; flex-shrink: 0; }
input[type="range"] { width: 100%; accent-color: var(--ink); }

.cw-confirm { margin-bottom: 22px; }
.cw-confirm b { font-size: 16px; }
.cw-confirm p { color: var(--mut); font-size: 13.5px; margin: 8px 0 14px; max-width: 64ch; }
.cw-slip { display: flex; align-items: center; gap: 18px; justify-content: space-between; border: 1px dashed var(--line); border-radius: var(--r-m); padding: 14px 18px; background: var(--wash); max-width: 460px; }
.cw-slip > div { font-size: 12.5px; color: var(--mut); }
.cw-slip b { display: block; color: var(--ink); font-size: 13.5px; margin: 2px 0; }
.cw-sliplbl { display: block; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; }
.cw-track { list-style: none; margin: 0 0 14px; padding: 0; }
.cw-track li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 13.5px; color: var(--faint); border-bottom: 1px dotted var(--line); }
.cw-track li .pip { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid var(--line); flex-shrink: 0; }
.cw-track li.done { color: var(--ink); }
.cw-track li.done .pip { background: var(--up); border-color: var(--up); }
.cw-track li.next { color: var(--ink); }
.cw-track li.next .pip { border-color: var(--ink); }
.cw-salename { color: var(--mut); font-size: 12px; }
.cw-actions { display: flex; gap: 10px; margin-top: 16px; }

.cw-list { display: flex; flex-direction: column; gap: 10px; }
.cw-item { display: flex; align-items: center; gap: 16px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 16px; cursor: pointer; font: inherit; color: var(--ink); }
.cw-item:hover { border-color: var(--ink); }
.cw-itemslab { width: 44px; flex-shrink: 0; }
.cw-itemslab svg { width: 100%; height: auto; display: block; }
.cw-item b { font-size: 13.5px; display: block; }
.cw-itemsub { font-size: 12px; color: var(--mut); }
.cw-itemest { margin-left: auto; font-weight: 700; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 900px) {
  .cw-grid { grid-template-columns: 1fr; }
  .cw-preview { position: static; max-width: 260px; margin: 0 auto; }
}
@media print {
  header, footer, .cw-steps, .cw-track, .cw-actions, .cw-foot, #site-header, #site-footer { display: none !important; }
}

.soldtag.passed { background: var(--mut); color: var(--on-ink); }

/* ============================================================
   House control language — square, tracked, engraved.
   Controls read like plate engraving: uppercase, letterspaced,
   hard corners, invert on hover instead of a tint. Surfaces
   (cards, panels) keep their radius; CONTROLS go square.
   ============================================================ */
.btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11.5px;
  font-weight: 600;
  padding: 14px 24px;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn:active { transform: none; }
.btn.ghost { border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.ondark { border-color: var(--cream); color: var(--dark); }
.btn.ondark:hover { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.ondark.ghost { border-color: rgba(250, 247, 240, 0.5); }
.btn.ondark.ghost:hover { background: var(--cream); color: var(--dark); border-color: var(--cream); }
.btn.xl { padding: 17px 30px; font-size: 12px; letter-spacing: 0.14em; }
.btn.sm { padding: 10px 16px; font-size: 10.5px; }
.arc-pager .btn, .speccard .btn { height: auto; padding: 10px 18px; font-size: 10.5px; }

/* text links: a real underline, offset like an engraver's rule */
.linkline { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--line2); }
.linkline:hover { opacity: 1; text-decoration-color: var(--ink); }

/* inputs and selects: square, ruled */
.field input, .field select, .field textarea, .searchbox input, .sortsel select,
.amt, #bidinput { border-radius: 0; }
.quickbids button { border-radius: 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0; }
.quickbids button:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* countdown numerals: plate numerals, not app chrome */
.bb-val.cd { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-variant-numeric: tabular-nums; }

/* chips square */
.gradetag, .rchip, .extchip, .soldtag, .autobid, .cw-ref { border-radius: 0; }
.lotcard .watch { border-radius: 0; }
.cointile, .coinbtn { border-radius: 0; }

/* toasts: square with an ink rule */
.toast { border-radius: 0; border-left: 3px solid var(--ink); }

/* modal: square plate */
.modal { border-radius: 0; }

/* one visible focus language everywhere — no default blue ring */
.btn:focus-visible, .linkline:focus-visible, .lot-tabs button:focus-visible,
.quickbids button:focus-visible, .lotcard .watch:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.searchbox input:focus-visible, .cw-item:focus-visible, .arc-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 0;
}

/* ---------- funding (Peer Pay onramp) ---------- */
.fundbox { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.fundhead { margin-bottom: 10px; }
.fundhead b { display: block; font-size: 13.5px; }
.fundhead span { font-size: 12px; color: var(--mut); }
.fundpresets { margin-bottom: 10px; }
.fundrow { display: flex; gap: 8px; }
.fundrow .amt { flex: 1; display: flex; align-items: center; border: 1px solid var(--line2); background: var(--panel); }
.fundrow .amt .cur { padding: 0 2px 0 12px; color: var(--mut); font-weight: 600; }
.fundrow .amt input { flex: 1; border: 0; background: none; padding: 11px 10px 11px 2px; font: inherit; font-variant-numeric: tabular-nums; min-width: 0; }
.fundrow .amt input:focus { outline: none; }
.fundrow .amt:focus-within { border-color: var(--ink); }
.fundrow .btn { white-space: nowrap; padding: 0 18px; font-size: 10.5px; }

/* engraved layer — second pass: controls the first pass missed */
.iconbtn, .lot-thumbs button, .modal .m-close, .provider, .provider .ptile,
.newsform input, .iconbtn .cnt, .livetag, .gradechip, .facet .opt .box { border-radius: 0; }
/* fixed-height rows: let the engraved padding set the height */
.arc-inputrow .btn, .newsform .btn { height: auto; }
/* the wallet address is an address, not a label — never uppercase it */
.btn .mono { text-transform: none; letter-spacing: 0; }
/* focus must stay visible on dark bands — cream ring there, ink elsewhere */
.hero :focus-visible, .sellhero :focus-visible, .consign :focus-visible,
footer.site :focus-visible, .utilbar :focus-visible { outline-color: var(--cream); }

/* mint mark — the counter takes the color of the surface it's struck on */
.mm-counter { fill: var(--panel); }
footer.site .mm-counter { fill: var(--dark); }
.ad-side .mm-counter { fill: var(--dark); }

/* mark v2: freestanding — wider than tall, no container */
.wordmark .wm-mark { width: 24px; height: 21px; }
.ad-mark { width: 23px; height: 20px; }
/* wallet brand tiles carry their own art */
.provider .ptile.brand { padding: 0; overflow: hidden; background: none; border: 1px solid var(--line); }
.provider .ptile.brand svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   House display register — serif headlines, engraved tags,
   gem-cut details. The chrome stays Archivo; the voice goes serif.
   ============================================================ */
/* the LIVE tag is a stamped rule, not an app badge */
.livetag {
  color: var(--live);
  background: transparent;
  border: 1px solid var(--live);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 3px 7px 2.5px;
}

/* display headlines in the serif register — light, never bold */
.hero h1, .sellhero h1, .band-head h1, .band-head h2, .browsehead h1, #bh-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
}
.hero h1 { font-size: clamp(32px, 4.3vw, 52px); line-height: 1.07; }
.sellhero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.band-head h1, .band-head h2 { font-size: 24px; }

/* quieter aurora — a wash, not blobs */
.hero {
  background:
    radial-gradient(950px 480px at 82% 8%, rgba(185, 223, 201, 0.09), transparent 62%),
    radial-gradient(820px 560px at 8% 96%, rgba(233, 195, 196, 0.09), transparent 58%),
    radial-gradient(700px 420px at 48% 118%, rgba(236, 217, 164, 0.07), transparent 60%),
    var(--dark);
}

/* museum placard under the hero slab */
.hero-media { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.heroplacard {
  display: inline-block;
  border: 1px solid rgba(250, 247, 240, 0.35);
  color: var(--cream-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the last circles become house shapes */
.specmono { border-radius: 0; }
.cw-steps li span { border-radius: 0; }
.cw-track li .pip { border-radius: 0; width: 9px; height: 9px; transform: rotate(45deg); }

/* inline archive results in the header search */
.search-pop .arclead { color: var(--mut); }
.search-pop .archit .hit-t { font-weight: 600; }
.search-pop .hit-close { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); background: var(--wash); padding: 1px 5px; margin-left: 6px; }
.search-pop .archit { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.search-pop .archit > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-pop .archit .hit-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* narrow-viewport fits */
.bidmode { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 560px) {
  .fundrow { flex-wrap: wrap; }
  .fundrow .amt { flex-basis: 100%; }
  .fundrow .btn { flex: 1; }
}

/* engraved second pass — stragglers from the verify round */
.paymark { border-radius: 0; }
.bidrow .amt input { border-radius: 0; }
.facet .opt .box.radio { border-radius: 0; transform: rotate(45deg); width: 11px; height: 11px; }
.facet .opt input:checked + .box.radio::after { transform: none; width: 4.5px; height: 4.5px; }

/* ============================================================
   Narrow-viewport corrections — QA sweep round
   ============================================================ */
/* lot tabs scroll inside their own rule instead of widening the page */
.lot-tabs { overflow-x: auto; scrollbar-width: none; }
.lot-tabs::-webkit-scrollbar { display: none; }
.lot-tabs button { flex: none; }

/* the newsletter input flexes instead of pinning 300px of min-content */
.newsform { flex-wrap: wrap; }
.newsform input { width: auto; flex: 1 1 220px; min-width: 0; }

/* the wrapped fund button keeps real height (base rule strips padding) */
@media (max-width: 560px) {
  .fundrow .btn { padding: 13px 18px; }
}

/* results/browse toolbar selects never force sideways scroll */
@media (max-width: 420px) {
  .sortsel select { max-width: 150px; }
}

/* touch: the watch star must be visible without hover, targets comfortable */
@media (hover: none) {
  .lotcard .watch { opacity: 1; }
  .quickbids button { min-height: 40px; }
  .arc-pager .btn { min-height: 40px; }
}

/* hero bid block wraps before it clips at very narrow widths */
.hero .bidblock { flex-wrap: wrap; }

/* ============================================================
   THEMES — four house presets. Paper is the default :root set;
   the others override tokens, and the components follow. Dark
   editorial surfaces (hero, footer, admin sidebar) stay dark in
   every preset, retuned per theme. Slabs and scans never change:
   the cards are physical objects.
   ============================================================ */
html[data-theme="porcelain"] {
  --paper: #e9ebee; --panel: #ffffff; --wash: #dfe2e6; --wash2: #d3d7dd;
  --ink: #15171b; --ink2: #383d45; --mut: #565a61; --faint: #8d939b;
  --line: #cdd2d9; --line2: #b4bbc4;
  --dark: #16181d; --dark2: #20242b; --dark-line: #31363f;
  --dark-fg: #c4c8ce; --dark-fg-mut: #9ba0a8; --dark-fg-dim: #848a93;
  --brass: #86682f; --brass-soft: #c9ad72; --brass-lit: #efe3bd;
  --up: #2f6b4c; --live: #ad3b37; --down: #ad3b37;
  --up-tint: #e6f1ea; --live-tint: #f8ebe9;
  --warn: #7f4f11; --warn-tint: #f4eee2; --brass-ink: #634b1f;
  --shadow-1: 0 1px 2px rgba(14, 18, 26, 0.06), 0 8px 24px rgba(14, 18, 26, 0.08);
  --shadow-2: 0 2px 6px rgba(14, 18, 26, 0.08), 0 20px 48px rgba(14, 18, 26, 0.14);
}
html[data-theme="midnight"] {
  /* the evening sale: deep ink-navy ground, candlelight-cream type,
     brass rules — warm letterforms against a cool room */
  color-scheme: dark;
  --paper: #10141d; --panel: #1a2029; --wash: #232a35; --wash2: #2c3440;
  --ink: #f3eee1; --ink2: #d9d3c2; --mut: #a8a294; --faint: #6f747f;
  --line: #39424f; --line2: #4a5462;
  --dark: #0a0e15; --dark2: #141a24; --dark-line: #2a3340;
  --live: #e0766e; --down: #e0766e; --up: #7cbd97;
  --brass: #d8ba79; --brass-soft: #e9d49e; --brass-lit: #fdf3d3;
  --up-tint: rgba(124, 189, 151, 0.15); --live-tint: rgba(224, 118, 110, 0.13);
  --warn: #d9a95f; --warn-tint: rgba(217, 169, 95, 0.14); --brass-ink: var(--brass);
  --on-ink: #141a24;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.65);
}
html[data-theme="vault"] {
  /* the safe: blackened bronze, iron rules, bright gold — warm metal,
     not neutral gray */
  color-scheme: dark;
  --paper: #100e0b; --panel: #1b1813; --wash: #262019; --wash2: #302921;
  --ink: #f7f2e3; --ink2: #e2dbc9; --mut: #b1a892; --faint: #7d7564;
  --line: #3a332a; --line2: #4d4536;
  --dark: #070605; --dark2: #12100c; --dark-line: #2b251d;
  --live: #e28076; --down: #e28076; --up: #85c19c;
  --brass: #e6c98b; --brass-soft: #f1dcab; --brass-lit: #fdf3d8;
  --up-tint: rgba(133, 193, 156, 0.16); --live-tint: rgba(226, 128, 118, 0.14);
  --warn: #e0b571; --warn-tint: rgba(224, 181, 113, 0.15); --brass-ink: var(--brass);
  --on-ink: #14110d;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 28px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.6), 0 26px 60px rgba(0, 0, 0, 0.75);
}

/* night patches — pieces whose light-tuned constants would sink or glare */
html[data-theme="midnight"] .rchip.met, html[data-theme="vault"] .rchip.met { background: var(--up-tint); }
html[data-theme="midnight"] .rchip.notmet, html[data-theme="vault"] .rchip.notmet { color: #d9b26a; background: rgba(217, 178, 106, 0.14); }
html[data-theme="midnight"] .cw-steps li.done span, html[data-theme="vault"] .cw-steps li.done span { background: var(--up-tint); }
html[data-theme="midnight"] .thumb[data-cat], html[data-theme="vault"] .thumb[data-cat] { background: var(--wash); }
html[data-theme="midnight"] .ad-chip.warn, html[data-theme="vault"] .ad-chip.warn { color: #d9b26a; border-color: rgba(217, 178, 106, 0.4); background: rgba(217, 178, 106, 0.12); }
html[data-theme="midnight"] .ad-chip.gold, html[data-theme="vault"] .ad-chip.gold { color: var(--brass-soft); border-color: color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); }
html[data-theme="midnight"] .ad-chip.ok, html[data-theme="vault"] .ad-chip.ok { background: var(--up-tint); border-color: rgba(116, 179, 145, 0.4); }
html[data-theme="midnight"] .ad-chip.bad, html[data-theme="vault"] .ad-chip.bad { background: var(--live-tint); border-color: rgba(221, 106, 102, 0.4); }
html[data-theme="midnight"] .ad-loginerr, html[data-theme="vault"] .ad-loginerr { background: var(--live-tint); }
html[data-theme="midnight"] .gradesell, html[data-theme="vault"] .gradesell { border-left-color: var(--brass); }
html[data-theme="midnight"] .arc-relaxed, html[data-theme="vault"] .arc-relaxed { border-left-color: var(--brass); }

/* ---------------- theme selector ---------------- */
.themebtn { position: relative; }
.themepop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--line2);
  box-shadow: var(--shadow-2); min-width: 196px; padding: 6px 0;
  display: none;
}
.themepop.open { display: block; }
.themepop .tp-h { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--faint); padding: 7px 14px 3px; }
.themepop button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.themepop button:hover { background: var(--wash); }
.themepop button[aria-checked="true"]::after { content: ""; width: 6px; height: 6px; background: var(--brass); margin-left: auto; flex: none; }
.tp-swatch { width: 16px; height: 16px; border: 1px solid var(--line2); flex: none; position: relative; overflow: hidden; }
.tp-swatch::after { content: ""; position: absolute; inset: 0 0 0 50%; }
.tp-swatch.paper { background: #eae6df; } .tp-swatch.paper::after { background: #191713; }
.tp-swatch.porcelain { background: #e9ebee; } .tp-swatch.porcelain::after { background: #15171b; }
.tp-swatch.midnight { background: #10141d; } .tp-swatch.midnight::after { background: #f3eee1; }
.tp-swatch.vault { background: #100e0b; } .tp-swatch.vault::after { background: #e6c98b; }

/* coin marks inside tiles */
.cointile svg { width: 15px; height: 15px; display: block; }
.coinbtn .cointile svg { width: 16px; height: 16px; }

/* night: the watch star sits on a dark glass pill, not a white one */
html[data-theme="midnight"] .lotcard .watch, html[data-theme="vault"] .lotcard .watch { background: rgba(20, 17, 24, 0.65); }
html[data-theme="midnight"] .lotcard .watch:hover, html[data-theme="vault"] .lotcard .watch:hover { background: var(--panel); color: var(--ink); }
/* porcelain: warm butter rules read as brass on the cool chrome */
html[data-theme="porcelain"] .gradesell, html[data-theme="porcelain"] .arc-relaxed { border-left-color: var(--brass); }

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.acct-grid { display: grid; gap: 34px; max-width: 860px; }
.acct-h { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin: 0 0 12px; }
.acct-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px;
  color: var(--ink); text-decoration: none;
}
.acct-row:hover { border-color: var(--line2); }
.acct-slab { width: 40px; flex: none; }
.acct-slab svg { width: 100%; height: auto; display: block; }
.acct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acct-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sub { font-size: 12px; color: var(--mut); }
.acct-chip {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--line2); color: var(--mut);
}
.acct-chip.ok { color: var(--up); border-color: var(--up); }
.acct-chip.warn { color: var(--brass); border-color: var(--brass); }
.acct-chip.bad { color: var(--live); border-color: var(--live); }
.acct-tablewrap { overflow-x: auto; border: 1px solid var(--line); }
.acct-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); }
.acct-table th, .acct-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.acct-table th { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.acct-table .num { text-align: right; }
.acct-table tr:last-child td { border-bottom: none; }
.acctlink { font-weight: 700; }

/* ============================================================
   HERO — editorial, no aurora. Day themes read as paper and ink;
   night themes keep a flat dark stage. The only decoration is the
   slab itself and the foil hairline the site already owns.
   ============================================================ */
.hero { background: var(--paper); color: var(--ink); }
.hero::after { content: none; }
.hero-eyebrow .eyebrow { color: var(--brass); }
.hero .lotmeta { color: var(--mut); }
.hero .bidblock .lbl { color: var(--mut); }
.hero .bidblock .sub { color: var(--mut); }
.hero .cd { color: var(--live); }
.hero .btn.ondark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.hero .btn.ondark:hover { background: var(--ink2); border-color: var(--ink2); }
.hero .btn.ondark.ghost { background: transparent; color: var(--ink); border-color: var(--line2); }
.hero .btn.ondark.ghost:hover { border-color: var(--ink); }
.hero :focus-visible { outline-color: var(--ink); }
.hero-media .slabwrap { filter: drop-shadow(0 22px 40px rgba(31, 27, 20, 0.28)); }
.hero-media::before { background: radial-gradient(50% 100% at 50% 0%, rgba(31, 27, 20, 0.18), transparent 70%); }
.heroplacard { border-color: var(--line2); color: var(--mut); }

html[data-theme="midnight"] .hero, html[data-theme="vault"] .hero {
  background: var(--dark); color: var(--cream);
}
html[data-theme="midnight"] .hero .lotmeta, html[data-theme="vault"] .hero .lotmeta,
html[data-theme="midnight"] .hero .bidblock .lbl, html[data-theme="vault"] .hero .bidblock .lbl,
html[data-theme="midnight"] .hero .bidblock .sub, html[data-theme="vault"] .hero .bidblock .sub { color: var(--dark-fg-mut); }
html[data-theme="midnight"] .hero .cd, html[data-theme="vault"] .hero .cd { color: var(--cream); }
html[data-theme="midnight"] .hero .btn.ondark, html[data-theme="vault"] .hero .btn.ondark {
  background: var(--cream); color: var(--dark); border-color: var(--cream);
}
html[data-theme="midnight"] .hero .btn.ondark:hover, html[data-theme="vault"] .hero .btn.ondark:hover {
  background: var(--cream-dim); border-color: var(--cream-dim);
}
html[data-theme="midnight"] .hero .btn.ondark.ghost, html[data-theme="vault"] .hero .btn.ondark.ghost {
  background: transparent; color: var(--cream); border-color: var(--dark-line);
}
html[data-theme="midnight"] .hero .btn.ondark.ghost:hover, html[data-theme="vault"] .hero .btn.ondark.ghost:hover { border-color: var(--cream); }
html[data-theme="midnight"] .heroplacard, html[data-theme="vault"] .heroplacard {
  border-color: rgba(250, 247, 240, 0.35); color: var(--cream-dim);
}
html[data-theme="midnight"] .hero :focus-visible, html[data-theme="vault"] .hero :focus-visible { outline-color: var(--cream); }

/* the consign band keeps its dark stage, loses the orbs */
.consign { background: var(--dark); }

/* ============================================================
   CATEGORY SUBSECTION BAR + BUY NOW CARDS
   ============================================================ */
/* The second nav tier. Lighter than the section row above it — same rhythm,
   no rule under the active item, so it reads as "inside" rather than "beside". */
.catbar { background: var(--wash); border-bottom: 1px solid var(--line); }
.catbar .wrap { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.catbar .wrap::-webkit-scrollbar { display: none; }
.catbar button {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 12px; background: transparent; border: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--mut); white-space: nowrap; border-radius: var(--r-s);
}
.catbar button .n {
  font-family: var(--font-m); font-size: 10.5px; color: var(--faint);
  font-weight: 500; letter-spacing: 0;
}
.catbar button:hover:not(:disabled) { color: var(--ink); }
.catbar button.active { background: var(--ink); color: var(--on-ink); }
.catbar button.active .n { color: var(--on-ink); opacity: 0.72; }
.catbar button:disabled { opacity: 0.34; cursor: default; }

.browse-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.browse-toolbar .count { margin-right: auto; }
.lotcard .bnstate {
  font-family: var(--font-d); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--up);
}
.lotcard.buynow.closed .bnstate { color: var(--mut); }
.soldtag.pending { background: var(--brass); color: var(--on-ink); }

/* Buy It Now offer under the bid controls — a quiet second path */
.binoffer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  font-size: 12.5px; color: var(--mut); background: var(--panel);
}
.binoffer b { color: var(--ink); }
.binoffer .btn { flex: none; }

/* profile & settings on the account page */
.acct-profile { display: grid; gap: 16px; }
.acct-card { border: 1px solid var(--line); background: var(--panel); padding: 18px 18px 16px; }
.acct-sub-h { font-size: 13.5px; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.acct-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 5px 0; cursor: pointer; }
.acct-check input { width: 16px; height: 16px; flex: none; accent-color: var(--ink); }
.acct-actions { margin-top: 14px; }
.acct-row2 { display: flex; gap: 12px; }
.acct-half { flex: 1; min-width: 0; }
@media (max-width: 520px) { .acct-row2 { flex-direction: column; gap: 0; } }

/* wallet quick-action chips + cash-out preset active state */
.quickbids [data-pane].active, .fundpresets [data-co].active { background: var(--ink); color: var(--on-ink); }
.wide .qr img { width: 200px; height: 200px; }

/* ---------- embedded Peer checkout ----------
   Full-bleed inside the dialog: the checkout surface runs edge to edge
   between two hairlines, framed by a quiet host bar above and a single
   note below. No box-in-box borders. */
/* The sheet's frame box owns its height explicitly, and both layers fill
   it absolutely. Sizing the iframe alone and letting the flex parent
   follow left the frame measuring zero once the loading mark stopped
   holding the box open. */
.peerframe { position: relative; height: min(76vh, 760px); }

/* The pop-out lives in the title bar next to the close button: one glyph,
   no words. The sheet used to carry a whole footer row under the frame
   spelling out the host and "New tab", which competed with the checkout
   for attention on the one screen where nothing should. */
.peerframe-out {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 2px;
  color: var(--faint); font-size: 14px; line-height: 1;
  text-decoration: none; border-radius: 2px;
  transition: color .15s ease, background .15s ease;
}
.peerframe-out:hover { color: var(--ink); background: var(--wash); }
.peerframe-out.paid { color: var(--up); }
.peerframe-out.paid svg { width: 15px; height: 15px; display: block; }

/* The house mark holds the frame's place while the remote checkout loads,
   then hands over in a single crossfade. Both layers occupy the same box
   so nothing reflows at the swap — the old sheet flashed a white
   rectangle between opening and the checkout arriving. */
/* The frame is NEVER hidden. The house mark simply sits on top of it
   until the checkout has painted, then fades away.

   The earlier version faded the frame IN, which meant any failure to
   detect "loaded" left the checkout invisible — a blank sheet where the
   payment should be. Covering rather than hiding makes the worst case a
   mark that lingers a moment over a working checkout, instead of a
   working checkout nobody can see. */
.peerframe-wait {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  transition: opacity .28s ease;
}
.peerframe-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
  background: #fff; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .peerframe-wait { transition: none; }
}

/* ---------- WalletConnect pairing (local QR) ---------- */
.wcpair .fundhead { margin-bottom: 12px; }
.wcqr {
  width: 232px; height: 232px; margin: 4px auto 12px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
}
.wcqr svg { width: 100%; height: 100%; display: block; }
.wcwait { font-size: 12px; color: var(--mut); }
.wcactions { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.wcpair #wc-back { margin-top: 12px; }

/* ---------- cash-out order history ---------- */
.co-ordershead {
  margin: 18px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mut);
}
.co-order { border-top: 1px solid var(--line); padding: 10px 2px; }
.co-orderrow { display: flex; align-items: center; gap: 10px; }
.co-orderrow .price { font-size: 14px; }
.co-orderrow .btn { margin-left: auto; }
.co-orderline { margin: 6px 0 0; font-size: 12px; color: var(--mut); line-height: 1.5; }

/* Preset chips keep their label on one line; the chip itself wraps. */
.quickbids button, .fundpresets button { white-space: nowrap; }

/* ---------- assurance line (replaces the old four-card trust strip) ----------
   One quiet row of facts under the auction head. No icons, no cards, no
   paragraphs — the grid below is what the visitor came for. */
.assure {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 12px 0 0; padding: 0; list-style: none;
  font-size: 12px; color: var(--mut);
}
.assure li { display: flex; align-items: center; }
.assure li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--faint); margin-right: 18px;
}

/* ---------- price history chart ----------
   Editorial, not terminal: hairline grid, one weighted line, a soft
   directional wash. Green/red carry the delta only — the frame stays
   in house neutrals so the chart reads as a document, not a ticker. */
.pchart { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); overflow: hidden; }
.pchart-head {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 16px;
  padding: 14px 16px 10px;
}
.pchart-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pchart-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut);
}
.pchart-val {
  font-family: var(--font-d); font-weight: 800; font-size: 26px; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.pchart-delta {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pchart-delta.up { color: var(--up); }
.pchart-delta.down { color: var(--live); }
.pchart-pct { font-weight: 700; }
.pchart-range { color: var(--faint); font-weight: 400; font-size: 11.5px; }

/* the mini window box, top right */
.pchart-windows {
  display: flex; flex: none; margin-left: auto;   /* hugs the top-right corner */
  border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden;
}
.pchart-windows button {
  padding: 5px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--mut); background: transparent; transition: background .12s ease, color .12s ease;
}
.pchart-windows button + button { border-left: 1px solid var(--line); }
.pchart-windows button:hover { background: var(--wash); color: var(--ink); }
.pchart-windows button.on { background: var(--ink); color: var(--on-ink); }

.pchart-plot { position: relative; padding: 0 4px 4px; }
.pchart-svg { display: block; width: 100%; height: 260px; }
.pchart-tick { font: 10.5px var(--font-b), sans-serif; }
.pchart-empty { padding: 40px 16px; margin: 0; font-size: 13px; color: var(--mut); text-align: center; }
.pchart-tip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--ink); color: var(--on-ink);
  padding: 5px 9px; border-radius: var(--r-s);
  font-size: 11.5px; line-height: 1.35; white-space: nowrap;
  display: flex; flex-direction: column;
}
.pchart-tip b { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pchart-tip span { color: var(--on-ink); opacity: .62; font-size: 10.5px; }
.pchart-note { margin: 0; padding: 0 16px 13px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }

@media (max-width: 560px) {
  .pchart-val { font-size: 22px; }
  .pchart-svg { height: 200px; }
}

/* A fixture in the prices-realized record, marked where it sits rather
   than disclaimed in a footnote nobody reads. */
.rt-demo { font-family: var(--font-m); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mut); border: 1px solid var(--line);
  padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }

/* A suspended bidder should learn it from the site, not from a refused
   bid. Quiet, but present on every page. */
.susptag {
  margin-left: 6px; font-family: var(--font-m); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--live); border: 1px solid var(--live);
  padding: 1px 4px; vertical-align: 1px; font-weight: 500;
}