/* Used Car Lot — Golden Era Championship
   Tokens taken from vintageracers.eu itself: #eee ground, #333 ink,
   EB Garamond 19.2px body, Archivo Narrow 600 headings, #21b6d3 accent. */

.gec{
  --ground:#eeeeee;
  --paper:#f6f6f3;
  --paper-2:#e6e6e1;
  --ink:#333333;
  --ink-soft:#6f6f68;
  --ink-faint:#928f86;
  --rule:#d3d3cc;
  --rule-firm:#b9b9b0;
  --accent:#12708a;          /* the site cyan, darkened so it holds contrast as text */
  --accent-bright:#21b6d3;   /* the site cyan as-is, for marks rather than text */
  --good:#3c6b46;
  --short:#9a3b2f;
  --display:"Archivo Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;

  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:19.2px; line-height:1.55;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gec{
    --ground:#1b1c1a; --paper:#232420; --paper-2:#2c2d28;
    --ink:#e8e6de; --ink-soft:#a8a69c; --ink-faint:#807e74;
    --rule:#3a3b35; --rule-firm:#4c4d45;
    --accent:#5fcde4; --good:#7fb98c; --short:#e08a7c;
  }
}
:root[data-theme="dark"] .gec{
  --ground:#1b1c1a; --paper:#232420; --paper-2:#2c2d28;
  --ink:#e8e6de; --ink-soft:#a8a69c; --ink-faint:#807e74;
  --rule:#3a3b35; --rule-firm:#4c4d45;
  --accent:#5fcde4; --good:#7fb98c; --short:#e08a7c;
}

.gec *{box-sizing:border-box}
.gec-wrap{max-width:1240px; margin:0 auto; padding:0 20px 72px}

/* ---------------------------------------------------------------- masthead */
.gec-masthead{padding:44px 0 22px; border-bottom:2px solid var(--ink)}
.gec-eyebrow{
  font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px;
}
.gec h1{
  font-family:var(--display); font-weight:600; font-size:clamp(34px,5vw,52px);
  line-height:1.04; margin:0; text-wrap:balance; letter-spacing:-.01em; color:var(--ink);
}
.gec-standfirst{max-width:62ch; margin:14px 0 0; color:var(--ink-soft); font-size:19px}
.gec a{color:var(--accent)}

/* ------------------------------------------------------------- control bar */
.gec-controls{
  display:flex; flex-wrap:wrap; gap:18px 26px; align-items:flex-end;
  padding:18px 0 20px; border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:20; background:var(--ground);
}
.gec-field{display:flex; flex-direction:column; gap:5px}
.gec-field > label{
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
.gec-field select{
  font-family:var(--display); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule-firm); border-radius:2px;
  padding:7px 10px; min-width:150px;
}
.gec select:focus-visible, .gec button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gec-purse{margin-left:auto; text-align:right}
.gec-purse .gec-amount{
  font-family:var(--display); font-weight:600; font-size:30px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.gec-purse .gec-amount.neg{color:var(--short)}
.gec-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--display); font-size:15px; color:var(--ink-soft);
  background:none; border:0; padding:7px 0;
}
.gec-toggle .box{
  width:15px; height:15px; border:1px solid var(--rule-firm); border-radius:2px;
  background:var(--paper); display:inline-block; position:relative; flex:none;
}
.gec-toggle[aria-pressed=true] .box{background:var(--accent); border-color:var(--accent)}
.gec-toggle[aria-pressed=true] .box::after{
  content:""; position:absolute; inset:3px 2px; border-left:2px solid var(--paper);
  border-bottom:2px solid var(--paper); transform:rotate(-45deg) translate(1px,-1px);
}

/* ----------------------------------------------------------------- listing */
.gec-floor{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0 34px; align-items:start}
.gec-count{
  font-family:var(--display); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); padding:16px 0 8px; margin:0;
}
.gec-list{list-style:none; margin:0; padding:0}
.gec-row{
  display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:0 18px;
  align-items:center; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--rule);
  padding:13px 6px 13px 0; color:inherit; font:inherit;
}
.gec-row:hover{background:var(--paper)}
.gec-row[aria-current=true]{background:var(--paper); box-shadow:inset 3px 0 0 var(--accent)}
.gec-row.short{opacity:.42}
.gec-row .shot{
  width:132px; aspect-ratio:8/5; object-fit:cover; display:block;
  background:var(--paper-2); border-radius:1px;
}
.gec-row .who{min-width:0}
.gec-model{
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1.2;
  margin:0 0 3px; overflow-wrap:anywhere; display:block;
}
.gec-model .my{color:var(--ink-faint); font-weight:400; margin-right:7px}
.gec-meta{
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center;
  font-family:var(--display); font-size:13.5px; color:var(--ink-soft);
}
.gec-meta .sep{color:var(--rule-firm)}
.gec-seller{
  font-family:var(--body); font-style:italic; font-size:15px; color:var(--ink-faint);
  display:block; margin-top:2px;
}
.gec-rival{font-style:normal; font-family:var(--display); font-size:13px; color:var(--accent)}
.gec-price{text-align:right; white-space:nowrap}
.gec-price .now{
  font-family:var(--display); font-weight:600; font-size:23px; line-height:1.15;
  font-variant-numeric:tabular-nums; display:block;
}
.gec-price .was{
  font-family:var(--display); font-size:13.5px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.gec-price .off{color:var(--good); margin-left:6px}
.gec-row.short .gec-price .now{color:var(--short)}
.gec-flag{
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--short); display:block; margin-top:3px;
}

/* decay strip: one notch per 10% step — the exponent of the rule, made visible */
.gec-decay{display:flex; gap:2px; align-items:center; margin-top:6px}
.gec-decay i{width:4px; height:10px; border-radius:1px; display:block}
.gec-decay i.yr{background:none; box-shadow:inset 0 0 0 1px var(--rule-firm)}
.gec-decay i.rc{background:var(--accent-bright)}
.gec-decay b{
  font-family:var(--display); font-weight:400; font-size:12px; color:var(--ink-faint);
  margin-left:6px; letter-spacing:.04em;
}

/* ------------------------------------------------------------------ detail */
.gec-detail{
  position:sticky; top:96px; background:var(--paper); border:1px solid var(--rule);
  border-top:2px solid var(--ink); padding:0 0 18px; margin-top:16px;
}
.gec-detail .shot{width:100%; aspect-ratio:8/5; object-fit:cover; display:block; background:var(--paper-2)}
.gec-detail .pad{padding:16px 18px 0}
.gec-detail h2{font-family:var(--display); font-weight:600; font-size:23px; line-height:1.15; margin:0; color:var(--ink)}
.gec-detail .sub{font-family:var(--display); font-size:13.5px; color:var(--ink-soft); margin:4px 0 0}
.gec-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:16px 0 0;
  background:var(--rule); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.gec-specs div{background:var(--paper); padding:9px 10px}
.gec-specs dt{
  font-family:var(--display); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 2px;
}
.gec-specs dd{
  font-family:var(--display); font-weight:600; font-size:17px; margin:0;
  font-variant-numeric:tabular-nums;
}
.gec-sum{margin:16px 18px 0; border-top:1px solid var(--rule); padding-top:12px}
.gec-sum table{width:100%; border-collapse:collapse; font-family:var(--display); font-size:14.5px}
.gec-sum td{padding:4px 0; vertical-align:baseline}
.gec-sum td:last-child{text-align:right; font-variant-numeric:tabular-nums}
.gec-sum tr.total td{
  border-top:1px solid var(--rule-firm); padding-top:8px; font-weight:600; font-size:19px;
}
.gec-sum tr.after td.ok{color:var(--good)} .gec-sum tr.after td.no{color:var(--short)}
.gec-sum .formula{
  font-family:var(--display); font-size:12.5px; color:var(--ink-faint);
  padding-top:6px; font-variant-numeric:tabular-nums;
}

/* every seller holding this model — the point of comparison */
.gec-offers{margin:18px 18px 0; border-top:1px solid var(--rule); padding-top:12px}
.gec-offers h3{
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px;
}
.gec-offers ol{list-style:none; margin:0; padding:0}
.gec-offers li{border-bottom:1px solid var(--rule)}
.gec-offers li:last-child{border-bottom:0}
.gec-offer{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:none; border:0; padding:7px 0; cursor:pointer; color:inherit;
  font-family:var(--display); font-size:14.5px;
}
.gec-offer:hover{color:var(--accent)}
.gec-offer[aria-current=true]{font-weight:600}
.gec-offer .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gec-offer .wear{color:var(--ink-faint); font-size:13px; white-space:nowrap}
.gec-offer .amt{font-variant-numeric:tabular-nums; white-space:nowrap}
.gec-offer .best{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--good);
}
.gec-empty{padding:34px 18px; color:var(--ink-faint); font-style:italic}

/* ---------------------------------------------------------------- sections */
.gec-block{margin-top:56px}
.gec-block > h2{
  font-family:var(--display); font-weight:600; font-size:28px; margin:0 0 6px;
  padding-bottom:8px; border-bottom:2px solid var(--ink); color:var(--ink);
}
.gec-block > p{max-width:64ch; color:var(--ink-soft); margin:12px 0 20px}
.gec-showroom{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px}
.gec-showroom figure{margin:0}
.gec-showroom img{width:100%; aspect-ratio:8/5; object-fit:cover; display:block; background:var(--paper-2)}
.gec-showroom figcaption{padding-top:9px}
.gec-showroom .gec-model{font-size:17.5px}
.gec-showroom .rrp{
  font-family:var(--display); font-size:15px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.gec-scroller{overflow-x:auto}
.gec table.rule{border-collapse:collapse; width:100%; font-size:17px}
.gec table.rule th, .gec table.rule td{padding:8px 10px 10px; text-align:left; vertical-align:top}
.gec table.rule thead th{
  font-family:var(--display); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--rule-firm); font-weight:600;
}
.gec table.rule tbody tr{border-bottom:1px solid var(--rule)}
.gec table.rule td.n{font-family:var(--display); font-variant-numeric:tabular-nums; white-space:nowrap}
.gec-note{
  margin-top:44px; padding:16px 18px; background:var(--paper);
  border-left:3px solid var(--accent-bright); font-size:17px; color:var(--ink-soft); max-width:72ch;
}
.gec-note strong{color:var(--ink)}
.gec-foot{
  margin-top:44px; padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--display); font-size:13.5px; color:var(--ink-faint);
}
.gec-status{
  font-family:var(--display); font-size:13px; color:var(--ink-faint);
  padding:10px 0; font-style:normal;
}
.gec-status.err{color:var(--short)}

@media (max-width:900px){
  .gec-floor{grid-template-columns:minmax(0,1fr)}
  .gec-detail{position:static; margin:0 0 26px; order:-1}
  .gec-controls{position:static}
  .gec-purse{margin-left:0}
  .gec-row{grid-template-columns:96px minmax(0,1fr); gap:0 14px; padding:12px 0}
  .gec-row .shot{width:96px}
  .gec-price{grid-column:2; text-align:left; margin-top:8px}
  .gec-price .now{display:inline-block; margin-right:10px}
}
@media (prefers-reduced-motion:reduce){.gec *{animation:none!important; transition:none!important}}