/* The Olive Oil Auction House — working-title demo. Own design SoT. */
: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: 'Helvetica Neue', Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--parch);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--parch); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
header.site {
  border-bottom: 1px solid var(--line);
  background: rgba(15,18,12,0.97);
  position: sticky; top: 0; z-index: 50;
}
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 0 14px;
  gap: 18px; flex-wrap: wrap;
}
.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; gap: 26px; font-family: var(--sans); font-size: 12.5px; letter-spacing: 1.8px; text-transform: uppercase; }
nav.main a { color: var(--parch-dim); padding-bottom: 2px; }
nav.main a.active, nav.main a:hover { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 58px; border-bottom: 1px solid var(--line); 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: 22px; max-width: 58ch; font-size: 18.5px; color: var(--parch-dim);
}
.hero .branch { position: absolute; right: -40px; top: 10px; opacity: 0.16; pointer-events: none; }
.cta-row { margin-top: 34px; 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;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn.solid { background: var(--gold); color: var(--ink); }
.btn.solid:hover { background: var(--parch); border-color: var(--parch); }

/* ---------- sections ---------- */
section.band { padding: 56px 0; border-bottom: 1px solid var(--line); }
.sec-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px; }
h2.sec { font-size: 30px; font-weight: 400; margin-bottom: 26px; }
h2.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: 26px 24px;
}
.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: 34px 20px;
  border: 1px solid var(--gold-dim); background: var(--panel);
  font-size: 20px;
}
.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; }

.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: var(--gold); border: none; color: var(--ink); padding: 0 18px; cursor: pointer;
}
.bid-form button:hover { background: var(--parch); }
.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: 22px; }
.step { border-top: 2px solid var(--gold-dim); padding-top: 14px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--sans); font-size: 12px; letter-spacing: 2px; color: var(--gold);
  display: block; margin-bottom: 8px;
}
.step h4 { font-size: 17px; font-weight: 400; margin-bottom: 6px; }
.step p { font-size: 14.5px; color: var(--parch-dim); }

/* ---------- 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 {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
  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; transform: translateX(-50%) translateY(0); }
#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; }
.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; }
.logo { height: 54px; width: auto; display: block; }
@media (max-width: 640px) { .logo { height: 42px; } }