/* The Olive Oil Auction House — working-title demo. Own design SoT. */
/* native widgets (textarea chrome, file inputs, selects, scrollbars) follow the
   page's theme instead of defaulting to light — the white-box-in-dark-mode fix */
:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

:root {
  --ink: #0f120c;
  --panel: #171b12;
  --panel2: #1e2317;
  --line: #2e3524;
  --parch: #ece6d4;
  --parch-dim: #b9b39f;
  --gold: #c9a84c;
  --gold-dim: #937b3a;
  --olive: #8a9a5b;
  --green-ok: #7fae6a;
  --red-warn: #c56a4a;
  --serif: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --btn-ink: #241d0b;        /* dark espresso — button text, fixed in both themes */
  --btn-gold-1: #d8b850; --btn-gold-2: #c9a84c; --btn-gold-3: #b0902f;
  --btn-gold-1h: #d3b24f; --btn-gold-2h: #c09a3c; --btn-gold-3h: #a07d28;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--parch);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
}
/* titles keep the serif voice; body text runs in the reading face */
h1, h2, h3, h4, .wordmark { font-family: var(--serif); }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--parch); }
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 max(26px, env(safe-area-inset-left)); }

/* ---------- header ---------- */
header.site {
  background: rgba(15,18,12,0.85);
  position: sticky; top: 0; z-index: 50;
}
/* once scrolled, the bar goes opaque — page text never reads through it */
header.site.oa-stuck { background: rgba(15,18,12,0.85); }
html[data-theme="light"] header.site.oa-stuck { background: rgba(241,236,220,0.85); }
.masthead {
  display: flex; align-items: center; justify-content: flex-start;
  padding-top: 14px; padding-bottom: 14px;
  gap: 14px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 21px; letter-spacing: 3.5px;
  color: var(--parch);
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark .amp { color: var(--gold); }
.wordmark small {
  display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 3px;
  color: var(--gold-dim); margin-top: 2px;
}
nav.main { display: flex; align-items: center; gap: 24px; font-family: var(--sans); font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; margin-left: auto; }
nav.main a { color: var(--parch-dim); padding-bottom: 2px; border-bottom: 1px solid transparent; }
nav.main a.active, nav.main a:hover { color: var(--gold); border-bottom-color: var(--gold-dim); }
/* ---------- hero ---------- */
.hero { padding: 38px 0 34px; position: relative; overflow: hidden; }
.hero .kicker {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 400; line-height: 1.12; letter-spacing: 0.5px;
  max-width: 17ch;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.lede {
  margin-top: 18px; max-width: 56ch; font-size: 17.5px; color: var(--parch-dim); line-height: 1.55;
}
.hero .branch { position: absolute; right: -40px; top: 10px; opacity: 0.16; pointer-events: none; }
.cta-row { margin-top: 26px; display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block; font-family: var(--sans); font-size: 12.5px; letter-spacing: 2.2px;
  text-transform: uppercase; padding: 13px 26px; border: 1px solid var(--gold-dim);
  color: var(--gold); background: transparent; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .12s, box-shadow .12s, background .12s, color .12s, border-color .12s;
}
.btn:hover {
  background: rgba(201,168,76,.14);
  color: var(--gold); border-color: var(--gold); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,.3), inset 0 2px 4px rgba(0,0,0,.22);
}
.btn.solid {
  background: linear-gradient(180deg, var(--btn-gold-1) 0%, var(--btn-gold-2) 52%, var(--btn-gold-3) 100%);
  color: var(--btn-ink); border-color: #9c7f2a;
  box-shadow: 0 3px 9px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.solid:hover {
  background: linear-gradient(180deg, var(--btn-gold-1h) 0%, var(--btn-gold-2h) 55%, var(--btn-gold-3h) 100%);
  color: var(--btn-ink); border-color: #8f7325; transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------- sections ---------- */
section.band { padding: 32px 0 90px 0; }
body.home section.band { border-bottom: 0; }
.sec-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 7px; }
h2.sec, h1.sec { font-size: 26px; font-weight: 400; margin-bottom: 14px; }
h2.sec em, h1.sec em { font-style: italic; color: var(--gold); }
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.card {
  background: var(--panel); border: 1px solid var(--line); padding: 22px 20px;
}
.card h3 { font-size: 19px; font-weight: 400; color: var(--gold); margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--parch-dim); }
.card .big { font-size: 34px; color: var(--parch); font-family: var(--serif); display: block; margin-bottom: 6px; }

/* ---------- fee banner ---------- */
.feeline {
  text-align: center; padding: 26px 18px;
  border: 1px solid var(--gold-dim); background: var(--panel);
  font-size: 20px;
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.feeline strong { color: var(--gold); font-weight: 400; font-size: 26px; }
.feeline .sub { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--parch-dim); margin-top: 10px; }

/* ---------- auction list ---------- */
.sale-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.sale-title { font-size: 30px; }
.sale-title em { color: var(--gold); font-style: italic; }
.sale-meta { font-family: var(--sans); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--parch-dim); }
.demo-note {
  margin: 16px 0 30px; padding: 11px 16px; border-left: 3px solid var(--gold-dim);
  background: var(--panel); font-size: 14px; color: var(--parch-dim);
}
.lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; min-height: 42vh; align-content: start; }

.lot {
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: border-color .2s;
}
.lot:hover { border-color: var(--gold-dim); }
.lot.closed { opacity: 0.75; }
.lot-art { height: 128px; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--panel2); }
.lot-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lot-no {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 2.5px; color: var(--gold);
  background: rgba(15,18,12,0.85); padding: 4px 9px; border: 1px solid var(--gold-dim);
}
.lot-flag {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 8px; background: rgba(15,18,12,0.85);
}
.flag-live { color: var(--green-ok); border: 1px solid var(--green-ok); }
.flag-extended { color: var(--gold); border: 1px solid var(--gold); animation: pulse 1s infinite; }
.flag-closed { color: var(--parch-dim); border: 1px solid var(--line); }
@keyframes pulse { 50% { opacity: 0.5; } }

.lot-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.lot h3 { font-size: 18.5px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; }
.lot .provenance { font-family: var(--sans); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--olive); margin-bottom: 12px; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin-bottom: 14px; }
.spec { font-size: 13px; color: var(--parch-dim); font-family: var(--sans); }
.spec b { display: block; color: var(--parch); font-weight: 400; font-size: 14.5px; font-family: var(--serif); }
.estimate { font-size: 13.5px; color: var(--parch-dim); margin-bottom: 12px; font-family: var(--sans); }
.estimate span { color: var(--parch); }

.bidbox { border-top: 1px solid var(--line); margin-top: auto; padding-top: 14px; }
.bid-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cur-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--parch-dim); }
.cur-bid { font-size: 26px; color: var(--gold); }
.cur-bid.unsold { color: var(--parch-dim); font-size: 18px; }
.reserve { font-family: var(--sans); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; }
.reserve.met { color: var(--green-ok); }
.reserve.notmet { color: var(--red-warn); }
.countdown { font-family: var(--sans); font-size: 13px; letter-spacing: 1px; color: var(--parch); margin-bottom: 10px; }
.countdown.ending { color: var(--red-warn); }
.countdown .tag { color: var(--parch-dim); letter-spacing: 2px; font-size: 10.5px; text-transform: uppercase; margin-right: 8px; }
.leading { font-family: var(--sans); font-size: 11.5px; color: var(--green-ok); letter-spacing: 1px; margin-bottom: 8px; }
.outbid { color: var(--red-warn); }
.bid-form { display: flex; gap: 8px; }
.bid-form input {
  flex: 1; min-width: 0; background: var(--ink); border: 1px solid var(--line); color: var(--parch);
  font-family: var(--sans); font-size: 15px; padding: 10px 12px;
}
.bid-form input:focus { outline: none; border-color: var(--gold-dim); }
.bid-form button {
  font-family: var(--sans); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
  background: linear-gradient(180deg, var(--btn-gold-1) 0%, var(--btn-gold-2) 52%, var(--btn-gold-3) 100%);
  border: none; color: var(--btn-ink); padding: 0 18px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16);
}
.bid-form button:hover { background: linear-gradient(180deg, var(--btn-gold-1h) 0%, var(--btn-gold-2h) 55%, var(--btn-gold-3h) 100%); color: var(--btn-ink); }
.bid-form button:disabled { background: var(--line); color: var(--parch-dim); cursor: default; }
.minhint { font-family: var(--sans); font-size: 11px; color: var(--parch-dim); margin-top: 7px; }
.history-toggle { font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dim); cursor: pointer; margin-top: 10px; display: inline-block; }
.history { display: none; margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; max-height: 150px; overflow-y: auto; }
.history.open { display: block; }
.hrow { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 12px; color: var(--parch-dim); padding: 2.5px 0; }
.hrow .who { color: var(--parch); }
.hrow.you .who { color: var(--gold); }

/* settlement */
.settle { margin-top: 12px; border: 1px solid var(--gold-dim); padding: 12px 14px; background: var(--panel2); }
.settle h4 { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.srow { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 13px; color: var(--parch-dim); padding: 2px 0; }
.srow b { color: var(--parch); font-weight: 400; }
.srow.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.srow.total b { color: var(--gold); }
.ship-note { font-size: 12px; color: var(--parch-dim); margin-top: 8px; font-style: italic; }

/* dossier */
.dossier-toggle { font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--olive); cursor: pointer; margin-top: 8px; display: inline-block; }
.dossier { display: none; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.dossier.open { display: block; }
.dossier .drow { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: 12.5px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.dossier .drow span:first-child { color: var(--parch-dim); }
.dossier .drow span:last-child { color: var(--parch); text-align: right; }

/* ---------- how-it-works steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.step {
  position: relative; border: 1px solid var(--gold); border-radius: 10px;
  padding: 24px 22px 26px;
  background: linear-gradient(180deg, rgba(201,168,76,.06), rgba(201,168,76,0) 45%);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--gold);
  display: block; padding-bottom: 14px; margin-bottom: 14px;
  background: linear-gradient(var(--gold-dim), var(--gold-dim)) left bottom / 44px 1px no-repeat;
}
.step::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -9px; height: 16px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(201,168,76,.5), rgba(201,168,76,0) 75%);
  filter: blur(3px); pointer-events: none;
}
.step h4 { font-size: 18px; font-weight: 400; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.step p { font-size: 14.5px; color: var(--parch-dim); }
div:has(> .steps) > .sec-kicker::after {
  content: ""; display: block; width: 64px; height: 2px; margin-top: 8px;
  background: linear-gradient(90deg, var(--gold), rgba(201,168,76,0));
}
div:has(> .steps) > h2.sec::after {
  content: ""; display: block; width: 200px; height: 3px; margin-top: 12px;
  background: radial-gradient(ellipse 55% 100% at 28% 50%, rgba(201,168,76,.9), rgba(201,168,76,0) 80%);
  filter: blur(1px);
}

/* ---------- tables ---------- */
table.plain { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; margin: 18px 0; }
table.plain th { text-align: left; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); padding: 8px 10px; border-bottom: 1px solid var(--gold-dim); font-weight: 400; }
table.plain td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--parch-dim); }
table.plain td:first-child { color: var(--parch); }

/* ---------- forms ---------- */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 640px; }
.formgrid .full { grid-column: 1 / -1; }
.formgrid label { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--parch-dim); margin-bottom: 6px; }
.formgrid input, .formgrid select, .formgrid textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--parch);
  font-family: var(--sans); font-size: 15px; padding: 11px 12px;
}
.formgrid textarea { min-height: 110px; resize: vertical; }
.formgrid input:focus, .formgrid textarea:focus, .formgrid select:focus { outline: none; border-color: var(--gold-dim); }

/* ---------- footer ---------- */
footer.site { padding: 40px 0 60px; color: var(--parch-dim); font-family: var(--sans); font-size: 12.5px; }
footer.site .frow { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer.site a { color: var(--parch-dim); }
footer.site a:hover { color: var(--gold); }
.paddle-chip { font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; color: var(--gold-dim); border: 1px solid var(--line); padding: 4px 10px; }

/* toast */
#toast {
  /* WebView-safe: margin-centered, no transform on fixed */
  position: fixed; bottom: -80px; left: 16px; right: 16px; margin: 0 auto;
  width: max-content; max-width: calc(100% - 32px);
  background: var(--panel2); border: 1px solid var(--gold-dim); color: var(--parch);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.5px;
  padding: 13px 22px; z-index: 99; opacity: 0; transition: all .25s; pointer-events: none;
}
#toast.show { opacity: 1; bottom: 28px; }
#toast b { color: var(--gold); font-weight: 400; }

@media (max-width: 640px) {
  .formgrid { grid-template-columns: 1fr; }
  .hero { padding: 46px 0 40px; }
}

/* ---------- members / wizard / account ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 4px; }
.chip {
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.6px;
  padding: 11px 18px; border: 1px solid var(--line); color: var(--parch-dim);
  cursor: pointer; user-select: none; background: var(--panel);
}
.chip:hover { border-color: var(--gold-dim); color: var(--parch); }
.chip.sel { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.wstep { margin: 26px 0; }
.wstep .wlabel { font-family: var(--sans); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 4px; }
.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-row button { width: 46px; height: 46px; font-size: 22px; background: var(--panel); border: 1px solid var(--line); color: var(--gold); cursor: pointer; }
.qty-row input { width: 90px; text-align: center; background: var(--ink); border: 1px solid var(--line); color: var(--parch); font-size: 18px; padding: 11px 6px; font-family: var(--sans); }
.blurred { filter: blur(7px); user-select: none; }
.lot-no-inline { font-family: var(--sans); font-size: 10.5px; letter-spacing: 2.5px; color: var(--gold); }
.lot-photo { width: 100%; max-height: 200px; object-fit: cover; border: 1px solid var(--line); margin: 8px 0; }
.rowline { display: flex; justify-content: space-between; gap: 18px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; flex-wrap: wrap; }
/* mill list: two columns per region on PC; region heading spans both */
@media (min-width: 861px) {
  .wrap:has(.mill-row) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 46px; align-content: start; }
  .wrap:has(.mill-row) > h3 { grid-column: 1 / -1; }
}
/* each region = a defined block: strong divider + breathing room above its heading */
.wrap:has(.mill-row) > h3 { border-top: 1px solid var(--gold-dim); padding-top: 26px; margin-top: 46px !important; }
.wrap:has(.mill-row) > h3:first-child { border-top: 0; padding-top: 0; margin-top: 6px !important; }
.mill-row { cursor: pointer; }

/* ---------- split hero: text left, photo right on PC; stacked on mobile ---------- */
.hero-side { background-size: cover; background-position: center; border: 1px solid var(--line); min-height: 210px; margin-top: 26px; }
@media (min-width: 861px) {
  .hero-split { display: grid; grid-template-columns: minmax(0, 46ch) minmax(0, 1fr); gap: 52px; align-items: stretch; }
  .hero-split h1 { max-width: none; }
  .hero-split .hero-side { min-height: 340px; height: 100%; margin-top: 0; }
}

/* ---------- hover feedback (throughout) — colour/tint only, no motion ---------- */
a { transition: color .16s ease; }
.mill-row { transition: background .18s ease, border-color .18s ease; }
.mill-row:hover { background: rgba(201,168,76,.05); }
.crumbs a:hover, footer.site a:hover { color: var(--gold); }
.formgrid input, .formgrid select, .formgrid textarea { transition: border-color .18s ease; }
.formgrid input:hover, .formgrid select:hover, .formgrid textarea:hover { border-color: var(--gold-dim); }
.rowline .ok { color: var(--green-ok); font-weight: 400; }
.rowline .warn { color: var(--red-warn); font-weight: 400; }
.btn.mini { padding: 6px 12px; font-size: 10px; }
.auth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 900px; }
@media (max-width: 720px) { .auth-cols { grid-template-columns: 1fr; } }
.lang-note { font-family: var(--sans); font-size: 12px; color: var(--parch-dim); letter-spacing: 0.4px; margin-top: 10px; }
.lang-note a { color: var(--olive); }

/* ---------- logo ---------- */
.logolink { display: block; flex: 0 0 auto; }
.logo { height: 54px; width: auto; display: block; }
@media (max-width: 640px) { .logo { height: 42px; } }
/* PC only: logo -15% + slim bar on scroll (owner 07-27); toggle is gated in the
   header include — short pages never shrink, so no reflow flicker */
@media (min-width: 861px) {
  .logo { height: 58px; transition: height .2s ease; }
  .masthead { transition: padding .2s ease; }
  header.site.oa-stuck .logo { height: 49px; }
  header.site.oa-stuck .masthead { padding-top: 7px; padding-bottom: 7px; }
}

/* ---------- sell wizard steps ---------- */
#wizard .wstep { display: none; }
#wizard .wstep.on { display: block; animation: stepin .18s ease-out; }
@keyframes stepin { from { opacity: 0; transform: translateY(6px); } }
.wdots { display: flex; gap: 7px; margin: 8px 0 18px; }
.wdot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wdot.done { background: var(--gold-dim); }
.wdot.on { background: var(--gold); }
.wnav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
.wnav a { font-family: var(--sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--parch-dim); }
#wizard .chips .chip { padding: 14px 22px; font-size: 15px; }

/* ---------- auth cards ---------- */
.authcard { background: var(--panel); border: 1px solid var(--line); padding: 28px 26px; }
.authhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.authhead h3 { margin: 0; font-weight: 400; font-size: 22px; }
.authhead .sec-kicker { margin: 0; }
.authcard .chips .chip { flex: 1; text-align: center; }
.auth-cols { align-items: start; max-width: 1000px; }

/* ---------- photo heroes ---------- */
.hero-photo { position: relative; min-height: 330px; display: flex; align-items: flex-end; overflow: hidden; color: var(--parch); }
.hero-photo .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-photo .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,12,0.35) 0%, rgba(15,18,12,0.92) 100%); }
.hero-photo .wrap { position: relative; padding: 40px 22px; width: 100%; }
.photo-strip { width: 100%; height: 200px; background-size: cover; background-position: center; border: 1px solid var(--line); margin: 8px 0 4px; }
.photo-hero { position: relative; width: 100%; min-height: 230px; background-size: cover; background-position: center; border: 1px solid var(--line); display: flex; align-items: flex-end; margin: 8px 0 26px; }
.photo-hero-text { width: 100%; padding: 26px 26px 20px; background: linear-gradient(180deg, rgba(15,18,12,0) 0%, rgba(15,18,12,0.88) 80%); }
.photo-hero-text .sec-kicker, .photo-hero-text .kicker { color: #cfae57; margin-bottom: 6px; }
.photo-hero-text h1, .photo-hero-text h2 { margin: 0; color: #ece6d4; }
.photo-hero-text h1 em, .photo-hero-text h2 em { color: #c9a84c; }
body[data-page="auction"] .photo-hero { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-left: 0; border-right: 0; }
body[data-page="auction"] .photo-hero-text { padding-left: max(26px, calc((100vw - 1280px) / 2 + 26px)); padding-right: max(26px, calc((100vw - 1280px) / 2 + 26px)); }
.oa-lang summary img { opacity: .6; transition: opacity .15s; }
.oa-lang summary:hover img, .oa-lang[open] summary img { opacity: 1; }

/* sell wizard — one contained card: photo header, steps, pinned nav */
.wcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 18px; }
.wcard-photo { height: 150px; background-size: cover; background-position: center 62%; position: relative; border-bottom: 1px solid var(--line); }
.wcard-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.34)); }
.wcard #wizard, .wcard #done { padding: 18px 26px 22px; }
.wcard .wdots { margin: 2px 0 20px; }
.wcard #wizard .wstep { margin: 0; }
.wcard #wizard .wstep.on { min-height: 205px; }
.wcard .wnav { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 24px; }
.wcard .qty-row button { background: var(--ink); }
.wcard .feeline { border: 0; padding: 18px 0; }
@media (max-width: 640px) {
  .wcard #wizard, .wcard #done { padding: 16px 16px 18px; }
  .wcard-photo { height: 110px; }
  .wcard #wizard .wstep.on { min-height: 250px; }
}
.credit { font-family: var(--sans); font-size: 11px; color: var(--parch-dim); opacity: 0.7; }

/* ---------- nav: dropdown (The Library) — gc-region-dd geometry, olive skin ---------- */
.oa-dd { position: relative; }
.oa-dd summary {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  list-style: none; padding: .3rem .45rem; border-radius: 6px; color: var(--parch-dim); user-select: none;
}
.oa-dd summary::-webkit-details-marker { display: none; }
.oa-dd summary:focus:not(:focus-visible) { outline: none; }
.oa-dd summary:hover, .oa-dd summary.active { color: var(--parch); background: var(--panel2); }
.oa-dd summary svg { transition: transform .15s; }
.oa-dd[open] summary svg { transform: rotate(180deg); }
.oa-dd .dd {
  position: absolute; top: calc(100% + .45rem); right: 0; z-index: 60;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35); padding: .3rem; min-width: 12rem;
  display: flex; flex-direction: column;
}
.oa-dd .dd a {
  position: relative;
  display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem;
  border-radius: 7px; color: var(--parch-dim); line-height: 1; white-space: nowrap; border-bottom: 0;
}
.oa-dd .dd a:hover, .oa-dd .dd a.active { background: rgba(201,168,76,0.14); color: var(--parch); border-bottom: 0; }

/* ---------- actions cluster (account) — gc-actions geometry ---------- */
.oa-actions { display: flex; align-items: center; gap: .75rem; padding-left: .9rem; border-left: 1px solid var(--line); }
#acct-link { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 84px; font-size: 12.5px; line-height: 1; }
#acct-link a { display: inline-block; }
.oa-actions a { color: var(--parch-dim); font-family: var(--sans); font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.oa-actions a:hover { color: var(--gold); }

/* ---------- nav: theme toggle ---------- */
.theme-toggle {
  background: none; border: 0; color: var(--gold);
  width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--parch); }
.theme-toggle svg { width: 16px; height: 16px; display: none; }
html:not([data-theme="light"]) .theme-toggle .sun { display: block; }
html[data-theme="light"] .theme-toggle .moon { display: block; }

/* ---------- nav: burger + mobile panel ---------- */
.oa-burger {
  display: none; background: none; border: 0; cursor: pointer; color: var(--parch);
  width: 44px; height: 44px; margin-left: auto; flex: 0 0 auto; padding: 0;
}
.oa-burger:hover { color: var(--gold); }
.oa-burger-i { position: relative; display: block; width: 22px; height: 15px; margin: auto; }
.oa-burger-i span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: all .18s; }
.oa-burger-i span:nth-child(1) { top: 0; }
.oa-burger-i span:nth-child(2) { top: 6.5px; }
.oa-burger-i span:nth-child(3) { top: 13px; }
.oa-burger.open .oa-burger-i span:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
.oa-burger.open .oa-burger-i span:nth-child(2) { opacity: 0; }
.oa-burger.open .oa-burger-i span:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }

.oa-mobrow { display: none; }
.oa-mobcta { display: none; }
@media (max-width: 860px) {
  /* pre-relocation state: toggle + lang switcher stay hidden in the bar until the
     header script drops them into the burger row — direct-child scope, no flash */
  .masthead > .theme-toggle, .oa-actions > .oa-lang { display: none; }
  .oa-burger { display: grid; margin-left: 0; }
  .oa-actions { margin-left: auto; }
  .logo { height: 38px; }
  .masthead { gap: 10px; }
  /* nav leaves the flow: full-width panel under the sticky header */
  nav.main {
    position: absolute; top: 100%; right: 0; left: auto; z-index: 55;
    margin-left: 0; display: none; min-width: 250px;
    gap: 0; background: rgba(15,18,12,0.97);
    border-bottom-left-radius: 5px;
    border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px -18px rgba(0,0,0,0.55);
    padding: 0;
  }
  nav.main.open { display: grid; grid-template-columns: 1fr; }
  nav.main a { padding: .95rem 1.3rem; border-bottom: 0; }
  nav.main a + a { border-top: 1px solid var(--line); }
  nav.main a:hover, nav.main a.active { color: var(--gold); border-bottom: 0; }
  nav.main a.navcta { color: var(--gold); }
  /* theme toggle rides the flat row built by the header script */
  nav.main .oa-mobrow {
    display: flex; align-items: center; grid-column: 1 / -1;
    padding: .55rem 1.1rem .55rem 1.3rem; border-top: 1px solid var(--line);
  }
  .oa-mobrow .theme-toggle { margin-left: auto; }
  .oa-mobrow .oa-lang .dd { right: auto; left: 0; }
}
/* burger-header CTA: fits at every burger width because the account link
   collapses to a person glyph on mobile (see end of file) */
@media (max-width: 860px) {
  .oa-mobcta { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--sans); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
}

/* ---------- light theme (warm parchment, never white) ---------- */
html[data-theme="light"] {
  --ink: #f1ecdc;
  --panel: #e8e2ce;
  --panel2: #ded7bf;
  --line: #cbc2a5;
  --parch: #26200f;
  --parch-dim: #5d5540;
  --gold: #8a6c1e;
  --gold-dim: #a3862f;
  --olive: #5e7034;
  --green-ok: #3f7d33;
  --red-warn: #a34a2a;
}
html[data-theme="light"] header.site { background: rgba(241,236,220,0.85); }
@media (max-width: 860px) { html[data-theme="light"] nav.main { background: rgba(241,236,220,0.97); } }
html[data-theme="light"] .lot-no,
html[data-theme="light"] .lot-flag { background: rgba(241,236,220,0.88); }
html[data-theme="light"] .oa-dd .dd { box-shadow: 0 14px 34px rgba(60,50,20,0.18); }
@media (max-width: 860px) {
  html[data-theme="light"] nav.main { box-shadow: 0 14px 34px rgba(60,50,20,0.18); }
}
html[data-theme="light"] .oa-dd .dd a:hover, html[data-theme="light"] .oa-dd .dd a.active { background: rgba(138,108,30,0.12); }
html[data-theme="light"] .bid-form input,
html[data-theme="light"] .qty-row input { background: #f6f2e4; }
/* photo heroes keep their dark scrim — force light text inside them */
html[data-theme="light"] .hero-photo { --parch: #ece6d4; --parch-dim: #cdc6b1; --gold: #d9b654; --gold-dim: #b6963f; }

/* ---------- language flag dropdown (header) — oa-dd geometry ---------- */
.oa-soon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--gold); color: var(--btn-ink); font-family: var(--sans); font-size: 10px; letter-spacing: .5px; padding: 2px 7px; border-radius: 5px; pointer-events: none; animation: oaSoon 1.1s ease both; }
@keyframes oaSoon { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.oa-lang summary img { display: block; border-radius: 2px; }
.oa-lang .dd { min-width: 10.5rem; }
.oa-lang .dd a img { border-radius: 2px; }
.oa-lang .dd a span { font-size: 12px; }
html[dir="rtl"] .oa-lang .dd { right: auto; left: 0; }
html[dir="rtl"] .oa-actions { border-left: 0; padding-left: 0; border-right: 1px solid var(--line); padding-right: .9rem; }
html[dir="rtl"] nav.main { margin-left: 0; margin-right: auto; }
@media (max-width: 860px) {
  html[dir="rtl"] .oa-actions { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] nav.main { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); }
}

/* ---------- fit + overflow guards ---------- */
/* hard guarantee: the page can never scroll sideways. `clip` blocks horizontal
   overflow without becoming a scroll container, so the sticky header still works. */
html, body { overflow-x: clip; max-width: 100%; }
img, svg, video, canvas, iframe, table { max-width: 100%; }
img { height: auto; }
pre { max-width: 100%; overflow-x: auto; }
h1, h2, h3, p, a, .rowline span { overflow-wrap: break-word; }
.rowline span { overflow-wrap: anywhere; }
.wrap { min-width: 0; }
@media (max-width: 640px) {
  body { font-size: 16px; }
  section.band { padding: 22px 0; }
  .hero { padding: 24px 0 22px; }
  .hero-photo { min-height: 250px; }
  .hero p.lede { margin-top: 12px; }
  .cta-row { margin-top: 18px; }
  .masthead { padding-top: 3px; padding-bottom: 3px; }
  .cols3 { gap: 14px; }
  .steps { gap: 14px; }
  .photo-strip { margin-top: 16px !important; margin-bottom: 16px !important; }
  .feeline { font-size: 17px; padding: 26px 16px; }
  .feeline strong { font-size: 21px; }
  h2.sec, h1.sec { font-size: 25px; }
  .sale-title { font-size: 25px; }
  table.plain, table.plain tbody { display: block; }
  table.plain tr { display: block; border-bottom: 1px solid var(--line); padding: 9px 0; }
  table.plain th, table.plain td { display: block; width: auto !important; border: 0; padding: 2px 0; }
  table.plain th { font-size: 10.5px; }
  .photo-strip { height: 170px; }
  .hero-photo { min-height: 320px; }
  .cur-bid { font-size: 22px; }
}

/* ---------- breadcrumbs (library sub pages) ---------- */
.crumbs { font-family: var(--sans); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--parch-dim); padding: 14px 22px 2px; display: flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--parch-dim); }
.crumbs a:hover { color: var(--gold); }
.crumbs span { color: var(--gold-dim); }

/* ---------- mill photo placeholder (silhouette until the estate claims) ---------- */
.mill-ph { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; height: 96px; margin-bottom: 12px; overflow: hidden; }
.mill-ph img { height: 100%; width: auto; max-width: none; opacity: .8; }
.mill-ph.big { height: 150px; flex-direction: column; gap: 0; padding-bottom: 10px; }
.mill-ph.big span { font-family: var(--sans); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--parch-dim); }
.mill-ph.big img { height: 100px; }
html[data-theme="light"] .mill-ph img { filter: brightness(.55) sepia(.2); }

/* ---------- whole-card click (primary link stretches over the card) ---------- */
.card { position: relative; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card p a, .card .provenance a { position: relative; z-index: 2; }
.card:hover { border-color: var(--gold-dim); }

.authcard { scroll-margin-top: 92px; }

/* ---------- library banner rows: text left, image right, gradient between ---------- */
.lib-row { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-height: 118px; margin-bottom: 14px; transition: border-color .2s; }
.lib-row:hover { border-color: var(--gold-dim); }
.lib-row .bgimg { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background-size: cover; background-position: center; transition: transform .35s; }
.lib-row:hover .bgimg { transform: scale(1.04); }
.lib-row .fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 40%, rgba(0,0,0,0) 78%); }
.lib-row .txt { position: relative; z-index: 2; display: block; padding: 22px 26px; max-width: 58%; }
.lib-row .txt h3 { font-size: 21px; font-weight: 400; color: var(--gold); margin-bottom: 4px; }
.lib-row .txt p { font-size: 14.5px; color: var(--parch-dim); font-family: var(--sans); letter-spacing: .2px; }
@media (max-width: 640px) {
  .lib-row { min-height: 96px; margin-bottom: 10px; }
  .lib-row .bgimg { width: 55%; }
  .lib-row .fade { background: linear-gradient(90deg, var(--panel) 46%, rgba(0,0,0,0) 88%); }
  .lib-row .txt { max-width: 72%; padding: 14px 16px; }
  .lib-row .txt h3 { font-size: 17px; }
  .lib-row .txt p { font-size: 12.5px; }
}

/* ---------- mill profile (Trustpilot-style layout) ---------- */
.tp-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tp-avatar { width: 112px; height: 112px; flex: 0 0 auto; background: #474744; border: 1px solid #6a6a66; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tp-avatar img { width: 62%; height: auto; max-width: 62%; }
.tp-id { min-width: 0; flex: 1 1 300px; }
.tp-id h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; line-height: 1.15; }
.tp-id h1 .lot-flag { display: inline-block; white-space: nowrap; vertical-align: middle; line-height: 1.4; }
.btn.watching { color: var(--green-ok); border-color: var(--green-ok); }
.tp-claim { font-family: var(--sans); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--parch-dim); border: 1px solid var(--line); border-radius: 5px; display: inline-block; padding: 3px 8px; margin-bottom: 8px; }
.tp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tp-cols { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 30px; align-items: start; }
.tp-side .card { margin-bottom: 14px; }
.tp-side .card .rowline { font-size: 13.5px; padding: 8px 0; }
@media (max-width: 900px) {
  .tp-cols { grid-template-columns: 1fr; }
  .tp-avatar { width: 84px; height: 84px; }
  .tp-actions { width: 100%; }
  .tp-actions .btn { flex: 1; text-align: center; }
}
@media (max-width: 640px) {
  .tp-head { gap: 14px; }
  .tp-avatar { width: 54px; height: 54px; border-radius: 7px; }
  .tp-id h1 { font-size: 23px; }
  .tp-id .provenance { font-size: 12.5px; }
  .tp-claim { font-size: 9px; letter-spacing: 1.2px; padding: 2px 6px; }
  .tp-claim-dd { margin-bottom: 4px; }
  .tp-actions { gap: 8px; flex-wrap: nowrap; margin-top: 2px; }
  .tp-actions .btn { padding: 11px 2px; font-size: 9.5px; letter-spacing: .7px; white-space: nowrap; }
  .lot-detail { padding-top: 0; }
  .lot-nav { margin-bottom: 8px; font-size: 11.5px; }
}

/* ---------- claim-status popover (profile chip) ---------- */
.tp-claim-dd { position: relative; display: inline-block; margin-bottom: 8px; }
.tp-claim-dd summary { list-style: none; cursor: pointer; }
.tp-claim-dd summary::-webkit-details-marker { display: none; }
.tp-claim-dd summary .tp-claim, .tp-claim-dd .tp-claim { margin-bottom: 0; }
.tp-claim-dd[open] .tp-claim { color: var(--parch); border-color: var(--gold-dim); }
.tp-claim-dd .pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; width: min(340px, 84vw);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 14px 34px rgba(0,0,0,.4);
  padding: 14px 16px; font-family: var(--sans); font-size: 13px; color: var(--parch-dim); }
.tp-claim-dd .pop p { margin-bottom: 10px; }
.tp-claim-dd .pop b { display: block; color: var(--parch); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.tp-claim-dd .pop ul { list-style: none; }
.tp-claim-dd .pop li { padding: 3px 0 3px 20px; position: relative; }
.tp-claim-dd .pop li::before { content: "✓"; position: absolute; left: 2px; color: var(--green-ok); }

/* library: two columns on desktop */
@media (min-width: 861px) {
  .lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .lib-grid .lib-row { margin-bottom: 0; min-height: 128px; }
  .lib-grid .lib-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- house buttons: rounded, lift, shine — no stock chrome ---------- */
.btn { border-radius: 9px; position: relative; overflow: hidden; transition: transform .15s, filter .15s, background .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; filter: brightness(.97); }
/* white shine sweep removed — read as glare (owner 07-17) */
.btn.mini { border-radius: 6px; }
.chip { border-radius: 8px; }
.bid-form input, .bid-form button, .qty-row button, .qty-row input { border-radius: 8px; }
.formgrid input, .formgrid select, .formgrid textarea { border-radius: 8px; }
.feeline { border-radius: 10px; }
.demo-note { border-radius: 0 8px 8px 0; }

#acct-link { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 84px; font-size: 12.5px; line-height: 1; white-space: nowrap; }

/* ---- catalogue card as link (auction happens on the lot page) ---- */
.lot-cat { color: var(--parch); text-decoration: none; }
.lot-cat:hover { color: var(--parch); border-color: var(--gold-dim); }
.lot-cat h3 { color: var(--gold); }
.cat-foot { border-top: 1px solid var(--line); margin-top: auto; padding-top: 12px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cat-price { display: flex; flex-direction: column; }
.cat-price .cur-bid { font-size: 22px; line-height: 1.1; }
.cat-cta { font-family: var(--sans); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); margin-top: 12px; }
.lot-cat:hover .cat-cta { color: var(--parch); }

/* ---- single lot page ---- */
.wrap-narrow { max-width: 760px; }
.lot-detail { padding: 16px 0 10px; min-height: 55vh; }
.lot-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 10px; }
.lot-detail-head .back { font-family: var(--sans); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--parch-dim); }
.lot-detail-head .back:hover { color: var(--gold); }
.lot-detail-head .lot-nav { display: flex; align-items: center; gap: 18px; }
.lot-detail-head .lot-nav a + a { border-left: 1px solid var(--line); padding-left: 18px; }
.lot-cat.specimen { position: relative; }
.lot-cat.specimen .lot-body { filter: grayscale(1); opacity: 0.45; }
.example-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 46px; letter-spacing: 12px; text-transform: uppercase; color: #85857e; opacity: 0.55; transform: rotate(-18deg); pointer-events: none; z-index: 2; }
.lot-detail-head .lot-flag { position: static; }
.lot-detail-head .bid-row { margin: 0; gap: 12px; }
.lot-title { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.2; margin: 4px 0 10px; color: var(--parch); }
.lot-mill { font-family: var(--sans); font-size: 13.5px; color: var(--parch-dim); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lot-mill b { color: var(--parch); font-weight: 400; }
.lot-photo.big { width: 100%; height: auto; max-height: 440px; object-fit: cover; border: 1px solid var(--line); margin-bottom: 20px; }
.lot-detail .bidbox { border-top: none; margin-top: 0; padding-top: 0; }
.lot-detail .cur-bid { font-size: 34px; }
.watch-row { margin: 14px 0 6px; }
.twatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.mini.twatch { color: var(--parch-dim); border-color: var(--line); }
.btn.mini.twatch:hover { color: var(--gold); border-color: var(--gold-dim); }
.lot-sub { font-family: var(--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dim); margin: 28px 0 12px; }
.specs.wide { grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.lot-notes { font-size: 15.5px; color: var(--parch-dim); line-height: 1.6; max-width: 62ch; }
@media (max-width: 560px) { .lot-title { font-size: 25px; } .specs.wide { grid-template-columns: 1fr; } }

/* ---- tree index page (trees.html) ---- */
.terr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.terr-jump a { font-family: var(--sans); font-size: 11.5px; letter-spacing: 1px; padding: 8px 13px; border: 1px solid var(--line); color: var(--parch-dim); background: var(--panel); }
.terr-jump a b { color: var(--gold); font-weight: 400; margin-left: 3px; }
.terr-jump a:hover { border-color: var(--gold-dim); color: var(--parch); }
.terr { margin-top: 38px; scroll-margin-top: 90px; }
.terr-h { font-weight: 400; font-size: 22px; color: var(--gold); margin-bottom: 14px; }
.terr-h a { color: var(--gold); }
.terr-count { color: var(--parch-dim); font-size: 14px; }
.terr-mills { font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--olive); margin-left: 8px; white-space: nowrap; }
.tree-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .tree-grid { grid-template-columns: 1fr; gap: 10px; } }
.tree-row { background: var(--panel); border: 1px solid var(--line); padding: 15px 17px; }
.tree-name { font-size: 17px; color: var(--gold); line-height: 1.35; }
.tree-place { font-family: var(--sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--olive); margin-top: 4px; }
.tree-chips { font-family: var(--sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--parch-dim); margin-top: 6px; }
.tree-age { font-size: 15px; color: var(--parch); margin-top: 9px; line-height: 1.45; }
.tree-src { font-family: var(--sans); font-size: 12px; color: var(--parch-dim); margin-top: 4px; line-height: 1.5; }

/* ---- catalogue on phones: two-up cards, compact head; footer links above the copyright ---- */
@media (max-width: 640px) {
  footer.site .frow { flex-direction: column-reverse; }
  footer.site .frow > div { text-align: left !important; }
  .photo-hero { min-height: 118px; margin-top: 0 !important; margin-bottom: 14px !important; }
  .photo-hero-text { padding: 12px 14px 9px; }
  .photo-hero-text .sec-kicker { margin-bottom: 2px; }
  .sale-title { font-size: 21px; }
  .lots { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lot-body { padding: 11px 11px 11px; }
  .lot-cat .lot-flag { position: static; padding: 2px 6px; font-size: 8.5px; letter-spacing: 1.2px; }
  .lot-cat .bid-row { margin-bottom: 6px; gap: 6px; }
  .lot-no-inline { font-size: 9px; letter-spacing: 1.4px; }
  .lot-cat h3 { font-size: 14px; line-height: 1.3; }
  .lot-cat .provenance { font-size: 9px; letter-spacing: 0.6px; margin-bottom: 8px; }
  .lot-cat .lot-photo { max-height: 100px; margin: 6px 0; }
  .lot-cat .specs { grid-template-columns: 1fr; gap: 4px; margin-bottom: 10px; }
  .lot-cat .spec { font-size: 11px; }
  .lot-cat .spec b { font-size: 12.5px; }
  .cat-foot { padding-top: 8px; flex-wrap: wrap; gap: 4px 10px; }
  .cat-price .cur-bid { font-size: 17px; }
  .lot-cat .countdown { font-size: 11px; margin-bottom: 0; }
  .lot-cat .countdown .tag { font-size: 9px; letter-spacing: 1.2px; margin-right: 5px; }
  .cat-cta { font-size: 9.5px; letter-spacing: 1.2px; margin-top: 8px; }
  .example-mark { font-size: 24px; letter-spacing: 6px; }
}

/* ---------- sell-wizard photo thumbnails (up to 3) + lot extra photos ---------- */
.s-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.s-thumb { width: 96px; margin: 0; }
.s-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.s-thumb figcaption { font-family: var(--sans); font-size: 10px; letter-spacing: .3px; color: var(--parch-dim);
  margin-top: 5px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.lot-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* ---------- account page ---------- */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 26px; }
.acct-col { display: grid; gap: 24px; min-width: 0; align-content: start; }
.acct-card h3 { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.acct-card .rowline:last-child { border-bottom: 0; }
.acct-card .formgrid { max-width: none; }
.acct-side { position: sticky; top: 20px; }
@media (max-width: 940px) { .acct-grid { grid-template-columns: 1fr; } .acct-side { position: static; } }

/* ---------- lot page — gallery left, bid box right ---------- */
.lot-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 14px; }
.lot-media { min-width: 0; }
.lot-media .lot-photo.big { margin-bottom: 10px; max-height: 520px; cursor: zoom-in; }
.lot-thumbs img { cursor: pointer; }
.lot-thumbs img.sel { border-color: var(--gold); }
.lot-buy { min-width: 0; }
.lot-buy .lot-title { margin-top: 0; }
.lot-buy .bidbox { border: 1px solid var(--line); background: var(--panel); padding: 16px 18px; margin-top: 14px; }
.alert-signup { border: 1px solid var(--line); background: var(--panel); padding: 18px 20px; margin: 26px 0 6px; }
.alert-signup p { margin: 6px 0 0; color: var(--parch-dim); }
.alert-signup form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.alert-signup input { flex: 1 1 180px; }
.rules-fold summary { display: block; cursor: pointer; list-style: none; outline: none; }
.rules-fold summary::marker { content: ''; }
.rules-fold summary::-webkit-details-marker { display: none; }
.rules-fold summary .sec::after { content: ' +'; color: var(--gold-dim); }
.rules-fold[open] summary .sec::after { content: ' –'; }
.lot-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; font-family: var(--sans); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.lot-nav a { color: var(--gold-dim); text-decoration: none; border-bottom: none; }
.lot-nav a:hover { color: var(--gold); }
/* WebView-safe: explicit edges, no flex centering, no vw/vh */
#lot-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(4, 5, 3, .94); display: none; z-index: 60; cursor: zoom-out; padding: 24px; overflow: auto; text-align: center; }
#lot-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--line); margin: 0 auto; }
@media (max-width: 760px) { .lot-cols { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- sellers page — PC compaction ---------- */
body[data-page="sellers"] section.band { padding: 26px 0 40px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.contact-split .formgrid { max-width: none; }
@media (max-width: 900px) { .duo, .contact-split { grid-template-columns: 1fr; gap: 26px; } }
.lot-buy .lot-flag { position: static; }

/* ---------- sale-alert modal (auction.html) ---------- */
/* WebView-safe: explicit edges, scrolling overlay, panel margin-centered */
.sale-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 60; display: none; overflow-y: auto; padding: 20px; }
.sale-modal.open { display: block; }
.sale-modal .sm-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,12,8,0.66); }
.sale-modal .sm-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: fit-content; width: calc(100% - 36px); max-width: 440px; max-height: calc(100% - 36px); overflow-y: auto; box-sizing: border-box; background: var(--panel); border: 1px solid var(--gold-dim); padding: 32px 30px 28px; animation: stepin .25s ease; }
.sale-modal .sm-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--parch-dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.sale-modal .sm-close:hover { color: var(--gold); }
.sale-modal h3 { font-size: 25px; font-weight: 400; margin: 0 0 10px; }
.sale-modal h3 em { font-style: italic; color: var(--gold); }
.sale-modal p { font-size: 14.5px; color: var(--parch-dim); line-height: 1.55; margin-bottom: 18px; }
.sale-modal input[type="text"], .sale-modal input[type="email"] { width: 100%; background: var(--ink); border: 1px solid var(--line); color: var(--parch); padding: 11px 12px; font-size: 15px; margin-bottom: 10px; }
.sale-modal input[type="text"]:focus, .sale-modal input[type="email"]:focus { outline: none; border-color: var(--gold-dim); }
.sale-modal .sm-consent { display: flex; gap: 9px; align-items: flex-start; font-family: var(--sans); font-size: 12.5px; color: var(--parch-dim); line-height: 1.5; margin: 4px 0 16px; cursor: pointer; }
.sale-modal .sm-consent input { margin-top: 2px; accent-color: var(--gold); }
.sale-modal .btn.solid { width: 100%; }
html[data-theme="light"] .sale-modal .sm-backdrop { background: rgba(60,50,20,0.38); }
html[data-theme="light"] .sale-modal input[type="text"], html[data-theme="light"] .sale-modal input[type="email"] { background: #f6f2e4; }

/* ---------- mobile: library sub-pages (mills index, mill profiles, registry) ---------- */
@media (max-width: 640px) {
  .crumbs { flex-wrap: wrap; row-gap: 3px; }
  .mill-row { display: block; }
  .mill-row > span:last-child { display: block; max-width: none !important; text-align: left !important; margin-top: 3px; }
  table.plain tr:has(th) { display: none; }
  .tp-head { gap: 14px; }
  .tp-avatar { width: 64px; height: 64px; }
  .tp-id { flex: 1 1 0; }
  .tp-actions .btn { flex: 1 1 100%; }
}

/* rtl (ar) — html[dir=rtl] provides direction; keep form fields rtl too */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{direction:rtl}

/* ---------- mobile header: account link collapses to a person glyph ---------- */
@media (max-width: 860px) {
  #acct-link { min-width: 0; }
  #acct-link a {
    font-size: 0; letter-spacing: 0; padding-bottom: 0; border-bottom: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
  }
  #acct-link a::before {
    content: ""; width: 21px; height: 21px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c1.4-3.5 4.2-5.3 7.5-5.3s6.1 1.8 7.5 5.3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c1.4-3.5 4.2-5.3 7.5-5.3s6.1 1.8 7.5 5.3'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* ---------- mobile: language list opens as a centered modal ----------
   backdrop is the open summary's fixed pseudo-element, so tapping anywhere
   outside the panel hits the summary and toggles the details shut natively */
@media (max-width: 860px) {
  .oa-lang[open] > summary::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 69; background: rgba(8,9,6,0.6);
  }
  /* WebView-safe: no transform centering on fixed elements, no vw/vh */
  .oa-mobrow .oa-lang .dd, .oa-lang .dd {
    position: fixed; left: 20px; right: 20px; top: 90px; transform: none;
    z-index: 70; min-width: 0; max-width: 21rem; margin: 0 auto;
    max-height: 72%; overflow-y: auto; padding: .5rem;
  }
  html[dir="rtl"] .oa-mobrow .oa-lang .dd, html[dir="rtl"] .oa-lang .dd { left: 20px; right: 20px; }
  html[data-theme="light"] .oa-lang[open] > summary::before { background: rgba(60,50,20,0.45); }
}

/* catalogue quick view — full specs on desktop; on phones they fold behind a toggle */
.qv-t { display: none; }
@media (max-width: 860px) {
  .lot-cat .qv-t { display: inline-block; font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-dim); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin: 10px 0 2px; cursor: pointer; }
  .lot-cat .qv.open .qv-t { color: var(--gold); border-color: var(--gold-dim); }
  .lot-cat .qv-b { display: none; }
  .lot-cat .qv.open .qv-b { display: block; }
}