/* ═══════════════════════════════════════════════════════════════════════
   AUCTION CENTER — "NIGHTLANE" design system
   ───────────────────────────────────────────────────────────────────────
   The lane at night. The interface is monochrome on purpose: the vehicles
   are the only colour on this site, so photography always wins the eye.
   Display type is condensed and poster-scale; money and identifiers are
   monospaced because they are the instruments of this business.
   The one borrowed piece of vernacular is impound hazard tape — used as a
   section break, never as decoration.
   ═════════════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  --void:#0A0A0B;          /* page ground */
  --coal:#141417;          /* raised band */
  --iron:#1E1E22;          /* input / thumb ground */
  --steel:#2A2A30;         /* borders on dark surfaces */
  --smoke:#8B8B91;         /* secondary text */
  --ash:#B4B3AF;           /* body text on dark */
  --bone:#F2F1ED;          /* primary text / inverted surfaces */
  --hazard:#F2C300;        /* impound tape + focus ring only */

  /* State colours are muted on purpose. They appear as a 3px edge and a
     label — never as a fill — so a system message can't out-shout the
     photography it sits above. */
  --win:#5AA97F;
  --alert:#D2543E;

  --line:rgba(242,241,237,.14);
  --line-strong:rgba(242,241,237,.28);
  --line-ink:rgba(10,10,11,.14);

  --disp:'Barlow Condensed',system-ui,-apple-system,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono','SFMono-Regular',ui-monospace,monospace;

  --wrap:1340px;
  --gut:28px;
  --hdr-h:88px;
  --hdr-h-stuck:66px;
}

/* ── reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--body);font-weight:300;font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:var(--bone);color:var(--void)}
:focus-visible{outline:2px solid var(--hazard);outline-offset:3px}
[x-cloak]{display:none!important}

/* ── layout ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.wrap--narrow{max-width:960px}
.wrap--reading{max-width:760px}
.sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec--tight{padding:clamp(2.5rem,4vw,3.5rem) 0}
.sec--coal{background:var(--coal)}
.sec--bone{background:var(--bone);color:var(--void)}
.stack>*+*{margin-top:1rem}

/* impound tape — the only chromatic device on the site */
.hazard{height:5px;background:repeating-linear-gradient(135deg,var(--hazard) 0 14px,var(--void) 14px 28px)}
.hazard--on-coal{background:repeating-linear-gradient(135deg,var(--hazard) 0 14px,var(--coal) 14px 28px)}

/* ── typography ─────────────────────────────────────────────────────────
   Prefixed with `html` on purpose. The Tailwind CDN build is still loaded for
   the screens that haven't been rebuilt yet, and its preflight resets headings
   to `font-size:inherit` from a stylesheet injected after this one. The extra
   element in the selector wins without resorting to !important. Drop the
   prefix once Tailwind comes off the public layout. */
html h1,html h2,html h3,html h4,.disp{
  font-family:var(--disp);margin:0;font-weight:800;line-height:.94;
  letter-spacing:-.005em;text-transform:uppercase;
}
html h1{font-size:clamp(2.8rem,8vw,7rem)}
html h2{font-size:clamp(2.1rem,5vw,4.2rem)}
html h3{font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:700}
html h4{font-size:1.1rem;font-weight:700}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
.lede{font-size:1.16rem;color:var(--ash);max-width:58ch;font-weight:300}
.sec--bone .lede,.split__b--bone .lede,.mdl__box .lede{color:#3A3A3D}
.kicker{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--smoke);display:block;
}
.sec--bone .kicker,.split__b--bone .kicker,.mdl__box .kicker{color:#6A6A6E}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--smoke)}
.thin{font-weight:500;color:var(--ash)}

/* prose — long-form pages (terms, privacy, guarantee, blog) */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:2.6rem 0 1rem}
.prose h3{margin:2rem 0 .7rem}
.prose p,.prose li{color:var(--ash)}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.45rem}
.prose a{border-bottom:1px solid var(--line-strong)}
.prose a:hover{border-bottom-color:var(--bone)}

/* ── header ─────────────────────────────────────────────────────────── */
/* Sticky, not fixed: the bar sits in the flow directly under the ribbon and
   pins itself on scroll. Fixed positioning let the ribbon paint over it at
   the top of the page, so the header only appeared once you scrolled. */
.hdr{
  position:sticky;top:0;z-index:80;transition:background .25s;
  background:rgba(10,10,11,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Pages that open on a full-bleed photograph keep the bar sticky — taking it
   out of the flow made it land on top of the ribbon and the marquee — but
   drop its ground so it reads against the picture. The hero itself is pulled
   up underneath by a negative margin, so the photograph still starts at the
   very top of the viewport. */
.hdr--over{background:none;backdrop-filter:none;border-bottom:0;mix-blend-mode:difference}
.hdr--over.stuck{
  mix-blend-mode:normal;background:rgba(10,10,11,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--hdr-h);transition:height .25s}
.hdr.stuck .hdr__in{height:var(--hdr-h-stuck)}
.mark{font-family:var(--disp);font-weight:800;font-size:1.4rem;letter-spacing:.02em;line-height:1;flex:none}
.mark small{
  display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.3em;
  font-weight:400;opacity:.7;margin-top:.22rem;text-transform:uppercase;
}
/* Wordmark stand-in, revealed only if the uploaded logo fails to load. */
.mark__fallback{display:none}
.mark--text .mark__fallback{display:block}
.nav{display:flex;gap:2rem}
.nav a{font-family:var(--disp);font-weight:600;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;opacity:.78}
.nav a:hover,.nav a.is-on{opacity:1}
.nav a.is-on{border-bottom:2px solid currentColor;padding-bottom:2px}
.hdr__r{display:flex;align-items:center;gap:1.2rem;flex:none}
.lnk{
  font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:2px solid currentColor;padding-bottom:2px;
}
.burger{display:none;width:34px;height:22px;position:relative;flex:none}
.burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:.2s}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:10px}.burger i:nth-child(3){top:20px}

/* body offset — pages that don't open with a full-bleed hero */
.has-hdr{padding-top:var(--hdr-h)}

/* ── utility ribbon above the header ────────────────────────────────── */
.ribbon{background:var(--coal);border-bottom:1px solid var(--line);position:relative;z-index:60}
.ribbon__in{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:36px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smoke);
}
.ribbon b{color:var(--bone);font-weight:500}
.ribbon__l{display:flex;gap:1.6rem}

/* announcement marquee */
.marquee{
  background:var(--bone);color:var(--void);overflow:hidden;position:relative;z-index:60;
  display:flex;padding:.45rem 0;
}
/* Two identical runs side by side; shifting the pair by half its width loops
   without a seam. white-space:nowrap on a flex child, not the container, or
   the second copy wraps and the gap shows. */
.marquee__t{
  white-space:nowrap;flex:none;padding-right:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  animation:marquee 46s linear infinite;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.marquee:hover .marquee__t{animation-play-state:paused}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:.09em;
  text-transform:uppercase;padding:.92rem 2rem;transition:.18s;border:2px solid transparent;
  text-align:center;
}
.btn--light{background:var(--bone);color:var(--void)}
.btn--light:hover{background:#fff}
.btn--solid{background:var(--void);color:var(--bone)}
.btn--solid:hover{background:var(--iron)}
.btn--out{border-color:currentColor}
.btn--out:hover{background:var(--bone);color:var(--void);border-color:var(--bone)}
.sec--bone .btn--out:hover{background:var(--void);color:var(--bone);border-color:var(--void)}
.btn--sm{padding:.6rem 1.2rem;font-size:.88rem}
.btn--lg{padding:1.1rem 2.6rem;font-size:1.15rem}
.btn--block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none}

/* ── status chips ───────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:.3rem .65rem;
}
.chip--live{background:var(--bone);color:var(--void)}
.chip--live i{width:6px;height:6px;border-radius:50%;background:var(--void);animation:blink 1.3s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.chip--soon{border:1px solid var(--line-strong);color:var(--ash)}
.chip--done{background:var(--iron);color:var(--smoke)}
.chip--win{background:var(--win);color:var(--void)}

/* Anything laid over photography needs its own ground — a hairline chip
   vanishes the moment the picture behind it is bright. */
.tile__img .chip,.row__img .chip,.media-overlay .chip{
  background:rgba(10,10,11,.82);backdrop-filter:blur(6px);
  border-color:rgba(242,241,237,.4);color:var(--bone);
}
.tile__img .chip--live,.row__img .chip--live,.media-overlay .chip--live{
  background:var(--bone);color:var(--void);border-color:var(--bone);
}
.tile__img .chip--live i,.row__img .chip--live i{background:var(--void)}
@media (prefers-reduced-motion:reduce){.chip--live i{animation:none}}

/* ── catalogue rows — the lot index ─────────────────────────────────── */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:120px 240px 1fr auto;gap:2rem;align-items:center;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:background .25s,padding .25s;position:relative;
}
.row:hover{background:var(--coal);padding-left:1.2rem;padding-right:1.2rem}
.row__n{
  font-family:var(--disp);font-weight:800;font-size:4.2rem;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--line-strong);
  transition:color .25s,-webkit-text-stroke-color .25s;
}
.row:hover .row__n{color:var(--bone);-webkit-text-stroke-color:var(--bone)}
.row__img{aspect-ratio:16/10;overflow:hidden;background:var(--iron)}
/* Photography stays in full colour — the interface is the monochrome part.
   Desaturation is reserved for lots that are gone, so a grey thumbnail
   always means the same thing. */
.row__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .35s}
.row:hover .row__img img{transform:scale(1.05)}
.row.is-gone .row__img img{filter:grayscale(1);opacity:.72}
.row.is-gone .row__bid{color:var(--smoke)}
.row__t{font-family:var(--disp);font-weight:700;font-size:1.8rem;line-height:1}
.row__spec{font-family:var(--mono);font-size:.72rem;color:var(--smoke);margin-top:.5rem;letter-spacing:.04em}
.row__money{text-align:right;min-width:180px}
.row__lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.row__bid{font-family:var(--disp);font-weight:800;font-size:2.2rem;line-height:1;margin-top:.15rem}
.row__sub{font-family:var(--mono);font-size:.78rem;color:var(--smoke);margin-top:.35rem}

/* ── vehicle tiles — used where a grid genuinely beats a list ───────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.tile{background:var(--coal);border:1px solid var(--line);display:flex;flex-direction:column;transition:.2s}
.tile:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tile__img{aspect-ratio:16/10;overflow:hidden;background:var(--iron);position:relative}
/* Scrim under the lot number and status chip so they hold on any photo. */
.tile__img::before{
  content:"";position:absolute;inset:0 0 auto;height:64px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.55),transparent);
}
.tile__n,.tile__chip{z-index:2}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .35s}
.tile:hover .tile__img img{transform:scale(1.04)}
.tile.is-gone .tile__img img{filter:grayscale(1);opacity:.72}
.tile.is-gone .tile__bid{color:var(--smoke)}
.tile__n{
  position:absolute;left:0;top:0;background:var(--bone);color:var(--void);
  font-family:var(--mono);font-size:.66rem;font-weight:500;padding:.25rem .55rem;letter-spacing:.1em;
}
.tile__chip{position:absolute;right:.5rem;top:.5rem}
.tile__b{padding:1.1rem;display:flex;flex-direction:column;flex:1}
.tile__t{font-family:var(--disp);font-weight:700;font-size:1.3rem;line-height:1.05}
.tile__spec{font-family:var(--mono);font-size:.68rem;color:var(--smoke);margin-top:.4rem}
.tile__foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:1rem}
.tile__bid{font-family:var(--disp);font-weight:800;font-size:1.7rem;line-height:1}

/* ── data list — spec tables ────────────────────────────────────────── */
.specs{border-top:1px solid var(--line)}
.specs div{
  display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.85rem;
}
.specs dt,.specs .k{color:var(--smoke);margin:0}
.specs dd,.specs .v{margin:0;color:var(--bone);text-align:right}
/* Light surfaces come in three flavours — a full section, half of a split, and
   a modal. They all need the same inversion, so they're listed together;
   scoping this to .sec--bone alone left the guarantee block rendering pale
   text on a pale ground. */
.sec--bone .specs,.split__b--bone .specs,.mdl__box .specs{border-color:var(--line-ink)}
.sec--bone .specs div,.split__b--bone .specs div,.mdl__box .specs div{border-color:var(--line-ink)}
.sec--bone .specs dt,.sec--bone .specs .k,
.split__b--bone .specs dt,.split__b--bone .specs .k,
.mdl__box .specs dt,.mdl__box .specs .k{color:#6A6A6E}
.sec--bone .specs dd,.sec--bone .specs .v,
.split__b--bone .specs dd,.split__b--bone .specs .v,
.mdl__box .specs dd,.mdl__box .specs .v{color:var(--void)}
/* Right-aligning a value that wraps to three lines reads as ragged noise, so
   narrow screens stack the pair and align both left. */
@media(max-width:560px){
  .specs div{flex-direction:column;gap:.3rem}
  .specs dd,.specs .v{text-align:left}
}

/* ── forms ──────────────────────────────────────────────────────────── */
.field{margin-bottom:1.2rem}
.field label,.lbl{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke);margin-bottom:.45rem;
}
.field input,.field select,.field textarea,.inp{
  width:100%;padding:.85rem 0;border:0;border-bottom:2px solid var(--line-strong);
  background:none;font-family:var(--mono);font-size:1rem;color:var(--bone);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#5A5A60}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{outline:0;border-bottom-color:var(--bone)}
.field select{padding:.85rem .2rem}
.field select option{background:var(--coal);color:var(--bone)}
.field__hint{font-size:.8rem;color:var(--smoke);margin-top:.4rem}
.field__err{font-family:var(--mono);font-size:.75rem;color:var(--alert);margin-top:.4rem}
/* on light surfaces */
.sec--bone .field label,.sec--bone .lbl{color:#5E5E62}
.sec--bone .field input,.sec--bone .field select,.sec--bone .field textarea{
  color:var(--void);border-bottom-color:var(--line-ink)
}
.sec--bone .field input:focus{border-bottom-color:var(--void)}
/* Checkbox / radio — drawn rather than borrowed from the OS. A native
   control brings its own radius and blue, which is the one thing this
   palette can't absorb. appearance:none keeps the real input (and with it
   the keyboard and screen-reader behaviour) and only replaces the paint. */
.check{
  display:flex;align-items:flex-start;gap:.75rem;font-size:.92rem;color:var(--ash);
  cursor:pointer;user-select:none;
}
.check:hover{color:var(--bone)}
.check input[type=checkbox],
.check input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:19px;height:19px;flex:none;margin:.16rem 0 0;
  background:transparent;border:2px solid var(--line-strong);
  transition:border-color .15s,background-color .15s;cursor:pointer;
  background-repeat:no-repeat;background-position:center;background-size:13px 13px;
}
.check input[type=radio]{border-radius:50%}
.check:hover input:not(:checked){border-color:var(--bone)}
.check input[type=checkbox]:checked{
  background-color:var(--bone);border-color:var(--bone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.4l3.4 3.4L13.2 4.8' fill='none' stroke='%230A0A0B' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
.check input[type=radio]:checked{
  border-color:var(--bone);
  background-image:radial-gradient(circle,var(--bone) 0 4.5px,transparent 4.5px);
}
.check input:disabled{opacity:.35;cursor:not-allowed}
.check input:disabled+span,.check:has(input:disabled){color:var(--smoke);cursor:not-allowed}
.check a{border-bottom:1px solid var(--line-strong)}
.check a:hover{border-bottom-color:var(--bone)}

/* on the inverted surface */
.sec--bone .check,.mdl__box .check{color:#3A3A3D}
.sec--bone .check:hover,.mdl__box .check:hover{color:var(--void)}
.sec--bone .check input,.mdl__box .check input{border-color:var(--line-ink)}
.sec--bone .check:hover input:not(:checked),
.mdl__box .check:hover input:not(:checked){border-color:var(--void)}
.sec--bone .check input[type=checkbox]:checked,
.mdl__box .check input[type=checkbox]:checked{
  background-color:var(--void);border-color:var(--void);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.4l3.4 3.4L13.2 4.8' fill='none' stroke='%23F2F1ED' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
.sec--bone .check input[type=radio]:checked,
.mdl__box .check input[type=radio]:checked{
  border-color:var(--void);
  background-image:radial-gradient(circle,var(--void) 0 4.5px,transparent 4.5px);
}

/* ── panels ─────────────────────────────────────────────────────────── */
.panel{background:var(--coal);border:1px solid var(--line);padding:1.6rem}
.panel--bone{background:var(--bone);color:var(--void);border-color:var(--line-ink)}
.panel--flush{padding:0}

/* ── modal ──────────────────────────────────────────────────────────── */
.mdl{
  position:fixed;inset:0;background:rgba(10,10,11,.9);display:flex;align-items:center;
  justify-content:center;padding:1.5rem;z-index:120;overflow-y:auto;
}
.mdl__box{max-width:520px;width:100%;background:var(--bone);color:var(--void);padding:2.4rem;margin:auto}
/* The light sheet inverts its headings; the dark variant must put them back,
   or the title lands black-on-black. */
.mdl__box h2,.mdl__box h3{color:var(--void)}
.mdl__box--dark{background:var(--coal);color:var(--bone);border:1px solid var(--line)}
.mdl__box--dark h2,.mdl__box--dark h3,.mdl__box--dark h4{color:var(--bone)}
.mdl__box--dark .kicker{color:var(--smoke)}
.mdl__box--dark .lede{color:var(--ash)}
.mdl__x{position:absolute;top:1.3rem;right:1.6rem;font-family:var(--disp);font-size:2rem;line-height:1;color:var(--bone)}

/* ── mobile drawer ──────────────────────────────────────────────────── */
.drw{position:fixed;inset:0;z-index:110}
.drw__bg{position:absolute;inset:0;background:rgba(10,10,11,.94)}
.drw__p{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:2rem var(--gut);overflow-y:auto}
.drw__p a{
  font-family:var(--disp);font-weight:800;font-size:clamp(2rem,8vw,3.2rem);
  text-transform:uppercase;padding:.3rem 0;border-bottom:1px solid var(--line);
}
.drw__p a:last-child{border-bottom:0}

/* ── banners (flash, pending, etc.) ─────────────────────────────────────
   The interface talking, so it speaks in the same voice as the ribbon and
   the chips: a monospaced uppercase tag, then plain language. State lives
   in a 3px edge and the tag colour — filling the whole bar would put more
   colour on screen than the cars. */
.banner{
  display:flex;align-items:flex-start;gap:1rem;padding:.85rem var(--gut);
  font-size:.94rem;background:var(--coal);color:var(--ash);
  border-bottom:1px solid var(--line);border-left:3px solid var(--steel);
}
.banner__tag{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding-top:.18rem;flex:none;color:var(--smoke);
}
.banner__msg{flex:1;min-width:0}
.banner b,.banner strong{color:var(--bone);font-weight:600}
.banner a{border-bottom:1px solid var(--line-strong)}
.banner a:hover{border-bottom-color:var(--bone)}
.banner__x{margin-left:auto;font-size:1.25rem;line-height:1;opacity:.5;flex:none;padding:0 .2rem}
.banner__x:hover{opacity:1}

.banner--ok{border-left-color:var(--win)}
.banner--ok .banner__tag{color:var(--win)}
.banner--err{border-left-color:var(--alert)}
.banner--err .banner__tag{color:var(--alert)}
.banner--info{border-left-color:var(--steel)}

/* Blocking states borrow the impound tape rather than a colour fill.
   Painted as a background layer, not a border-image — border-image would
   wrap the tape around all four edges and fray the corners. */
.banner--hold{
  border-left:0;padding-top:1.05rem;
  background-image:repeating-linear-gradient(135deg,var(--hazard) 0 14px,transparent 14px 28px);
  background-size:100% 4px;background-repeat:no-repeat;background-position:top left;
}
.banner--hold .banner__tag{color:var(--hazard)}

/* A win is the one moment worth inverting the surface for. */
.banner--won{background:var(--bone);color:var(--void);border-left-color:var(--void)}
.banner--won .banner__tag{color:var(--void)}
.banner--won b,.banner--won strong{color:var(--void)}

/* ── footer ─────────────────────────────────────────────────────────── */
.ftr{padding:4.5rem 0 0;border-top:1px solid var(--line)}
.ftr__g{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:3rem;padding-bottom:3rem}
.ftr h4{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--smoke);margin:0 0 1.1rem;font-weight:400;
}
.ftr__nav a{
  display:block;padding:.28rem 0;font-family:var(--disp);font-weight:600;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.03em;opacity:.75;
}
.ftr__nav a:hover{opacity:1}
.ftr__bar{
  border-top:1px solid var(--line);padding:1.3rem 0;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;color:var(--smoke);flex-wrap:wrap;gap:.7rem;
  text-transform:uppercase;letter-spacing:.1em;
}

/* ── stats ──────────────────────────────────────────────────────────── */
.stats{display:flex;gap:2.8rem;flex-wrap:wrap}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:2.2rem;line-height:1}
.stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}

/* ── accordion ──────────────────────────────────────────────────────── */
.acc__i{border-bottom:1px solid var(--line)}
.acc__b{
  width:100%;text-align:left;padding:1.4rem 3.5rem 1.4rem 0;position:relative;
  font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);
  text-transform:uppercase;line-height:1.1;
}
/* The two strokes are centred on one 18px box. Positioning them from the
   right edge independently put the vertical bar 4px off the horizontal one,
   so the plus sat visibly crooked. */
.acc__b::after,.acc__b::before{
  content:"";position:absolute;right:.4rem;top:50%;
  width:18px;height:2px;margin-top:-1px;background:currentColor;
}
.acc__b::before{transition:transform .25s,opacity .25s;transform:rotate(90deg)}
.acc__i.is-open .acc__b::before{transform:rotate(0deg);opacity:0}
.acc__p{padding:0 3.5rem 1.5rem 0;color:var(--ash);max-width:76ch}

/* ── process flow — genuine sequences only ──────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line)}
.flow>div{padding:0 1.8rem;border-right:1px solid var(--line)}
.flow b{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--smoke);display:block}
.flow h3{margin:1rem 0 .6rem}
.flow p{font-size:.95rem;color:var(--ash);margin:0}

/* ── numbered steps — a vertical sequence too long for .flow's 4 columns ─ */
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1.5rem;
  padding:1.8rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.step__n{font-size:1.6rem;line-height:1;color:var(--smoke);letter-spacing:.05em;padding-top:.15rem}
.step h3{margin:0 0 .5rem;font-size:clamp(1.1rem,1.8vw,1.4rem)}
.step p{margin:0;color:var(--ash);max-width:66ch}
@media(max-width:640px){
  .step{grid-template-columns:1fr;gap:.6rem}
  .step__n{font-size:1.1rem}
}

/* ── FAQ group heading ──────────────────────────────────────────────── */
.faq__g{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;margin:0 0 .9rem;
}

/* ── split feature ──────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.split__img{min-height:520px;overflow:hidden}
.split__img img{width:100%;height:100%;object-fit:cover}
.split__b{padding:clamp(2.5rem,5vw,4.5rem)}
.split__b--bone{background:var(--bone);color:var(--void);display:flex;flex-direction:column;justify-content:center}

/* ── pagination ─────────────────────────────────────────────────────── */
.pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:3rem}
.pager a,.pager span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.85rem;border:1px solid var(--line);
}
.pager a:hover{border-color:var(--bone)}
.pager .is-on{background:var(--bone);color:var(--void);border-color:var(--bone)}

/* ── empty state ────────────────────────────────────────────────────── */
.empty{text-align:center;padding:5rem 1rem;border:1px solid var(--line)}
.empty h3{margin-bottom:.6rem}
.empty p{color:var(--smoke);max-width:44ch;margin:0 auto 1.6rem}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .row{grid-template-columns:80px 200px 1fr;gap:1.4rem}
  .row__money{grid-column:2/-1;text-align:left;margin-top:.4rem;min-width:0}
  .row__n{font-size:3rem}
  .flow{grid-template-columns:1fr 1fr;gap:2.5rem 0}
  .split{grid-template-columns:1fr}
  .split__img{min-height:300px}
  .ftr__g{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gut:20px;--hdr-h:70px}
  .nav,.hdr__r .lnk{display:none}
  .burger{display:block}
  .ribbon__l span:nth-child(n+3){display:none}
  .row{grid-template-columns:60px 1fr;gap:1rem}
  .row__img{grid-column:1/-1;order:3}
  .row__money{grid-column:1/-1}
  .row__t{font-size:1.4rem}
  .flow{grid-template-columns:1fr;border-left:0}
  .flow>div{border-right:0;border-bottom:1px solid var(--line);padding:0 0 1.8rem;margin-bottom:1.8rem}
  .flow>div:last-child{border-bottom:0;margin-bottom:0}
  .ftr__g{grid-template-columns:1fr;gap:2rem}
  .stats{gap:1.6rem}
  .stat b{font-size:1.7rem}
  .acc__b{padding-right:2.5rem}
  .acc__p{padding-right:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* embedded mode — the lot page is iframed into partner sites */
.mb-embedded .hdr,.mb-embedded .ribbon,.mb-embedded .ftr,
.mb-embedded .marquee,.mb-embedded .banner{display:none!important}
.mb-embedded{padding-top:0!important}

@media print{
  .hdr,.ribbon,.ftr,.marquee,.drw,.mdl{display:none!important}
  body{background:#fff;color:#000}
}

/* ── home hero — the opening photograph ─────────────────────────────── */
/* Pulled up under the floating masthead so the photograph reaches the top
   edge; the header's own scrim keeps the nav readable over it. */
.hero-n{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  margin-top:calc(-1 * var(--hdr-h))}
.hero-n__img{position:absolute;inset:0}
.hero-n__img img{width:100%;height:100%;object-fit:cover}
/* Two stops, not one: the top scrim carries the floating masthead, the
   bottom one carries the headline. A single gradient can't do both. */
.hero-n__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.74) 0%,rgba(10,10,11,.22) 34%,rgba(10,10,11,.95) 88%);
}
.hero-n__in{position:relative;z-index:2;width:100%;padding:9rem 0 3.4rem}
.hero-n h1{margin:1rem 0 0}
.hero-n h1 span{display:block}
.hero-n__sub{color:var(--ash);font-size:1.12rem;max-width:48ch;margin-top:1.4rem}
.hero-n__meta{
  display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;
  margin-top:2.4rem;border-top:1px solid var(--line-strong);padding-top:1.5rem;
}
.hero-n__cta{display:flex;gap:.7rem;flex-wrap:wrap}
/* Names the car in the photograph — without it the image is decoration. */
.hero-n__lot{
  position:absolute;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:1rem;
  background:rgba(10,10,11,.82);backdrop-filter:blur(8px);padding:.7rem 1.1rem;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.hero-n__lot:hover{background:var(--bone);color:var(--void)}
.hero-n__lot-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.hero-n__lot:hover .hero-n__lot-n{color:#5E5E62}
.hero-n__lot-t{font-family:var(--disp);font-weight:700;font-size:1.05rem;text-transform:uppercase}
.hero-n__lot-p{font-weight:500}

@media (max-width:900px){
  .hero-n{min-height:88svh}
  .hero-n__in{padding:7rem 0 5.5rem}
  .hero-n__meta{gap:1.4rem}
  .hero-n__lot{left:0;right:0;justify-content:space-between;border-left:0}
  .hero-n__lot-t{font-size:.92rem}
}

/* ── reviews ────────────────────────────────────────────────────────────
   Quotes need edges. Set as bordered panels rather than loose text so the
   column doesn't read as one undifferentiated block on a dark page. */
/* Columns, not a grid: testimonials run from two lines to five paragraphs and
   every word should show. A grid would stretch each row to its tallest card
   and leave holes; column flow packs them tight at their natural height. */
.reviews{columns:3;column-gap:1.1rem}
.review{
  margin:0 0 1.1rem;padding:1.5rem;background:var(--void);border:1px solid var(--line);
  transition:border-color .2s;break-inside:avoid;-webkit-column-break-inside:avoid;
  display:flow-root;
}
.review:hover{border-color:var(--line-strong)}
.review__q{
  margin:0 0 1.2rem;font-size:.98rem;line-height:1.62;color:var(--ash);
  white-space:pre-line;
}
.review__q::before{content:"\201C";display:block;font-family:var(--disp);font-size:2.4rem;
  line-height:.6;color:var(--steel);margin-bottom:.4rem}
.review__by{padding-top:.9rem;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.review__n{font-family:var(--disp);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.review__l{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}

/* ── sign-up nudge ──────────────────────────────────────────────────── */
.nudge{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--coal)}
.nudge__in{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.nudge__cta{display:flex;gap:.6rem;flex-wrap:wrap;flex:none}
@media (max-width:1100px){ .reviews{columns:2} }
@media (max-width:700px){ .reviews{columns:1} }

/* ── inventory ──────────────────────────────────────────────────────── */
.inv{display:grid;grid-template-columns:262px 1fr;gap:3rem;align-items:start}
.inv__rail{position:sticky;top:calc(var(--hdr-h-stuck) + 1.4rem)}
.inv__toggle{display:none;width:100%;margin-bottom:1rem}
.inv__form .field{margin-bottom:1.1rem}
.inv__pair{display:flex;align-items:center;gap:.6rem}
.inv__pair input{min-width:0}
.inv__dash{color:var(--smoke);flex:none}
.inv__clear{display:block;text-align:center;margin-top:.9rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.inv__clear:hover{color:var(--bone)}

.inv__bar{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  flex-wrap:wrap;padding-bottom:1.1rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
.inv__count{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke)}
.inv__sort{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.inv__sortlink{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smoke);white-space:nowrap}
.inv__sortlink:hover{color:var(--bone)}
.inv__sortlink.is-on{color:var(--bone);border-bottom:1px solid var(--bone);padding-bottom:2px}

@media (max-width:960px){
  .inv{grid-template-columns:1fr;gap:1.5rem}
  .inv__rail{position:static}
  .inv__toggle{display:block}
  /* The rail is a wall of inputs on a phone — keep it shut until asked for. */
  .inv__form{display:none}
  .inv__form.is-open{display:block}
}

/* ── auction calendar ───────────────────────────────────────────────────
   The schedule page. Its structure is the sale itself: a board for the lane
   running now, a timetable for what opens next, a ledger for what's closed.
   ─────────────────────────────────────────────────────────────────────── */
.cal__head{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:end}
.cal__tally{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:0;
  border-left:1px solid var(--line);padding-left:2.5rem}
.cal__tally dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--smoke);margin:0}
.cal__tally dd{margin:.5rem 0 0;font-family:var(--disp);font-weight:800;font-size:2.6rem;line-height:1}
.cal__h{margin:.8rem 0 2.2rem;font-size:clamp(1.9rem,3.6vw,2.8rem)}

.kicker--live{color:var(--bone);display:flex;align-items:center;gap:.55rem}
.kicker--live i{width:7px;height:7px;border-radius:50%;background:var(--hazard);animation:blink 1.3s infinite}
@media (prefers-reduced-motion:reduce){.kicker--live i{animation:none}}

/* The live board — the widest, loudest thing on the page, once per event. */
.board{
  display:grid;grid-template-columns:1.6fr 1fr auto;gap:2.5rem;align-items:center;
  border:1px solid var(--line-strong);padding:clamp(1.5rem,3vw,2.4rem);
  margin-top:1.6rem;transition:border-color .2s,background .2s;
}
.board:hover{border-color:var(--bone);background:rgba(242,241,237,.03)}
.board__no{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke)}
.board__t{margin:.6rem 0 .5rem;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.02}
.board__d{margin:0;font-size:.78rem;color:var(--ash)}
.board__r{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:0}
.board__r dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--smoke);margin:0}
.board__r dd{margin:.45rem 0 0;font-family:var(--disp);font-weight:800;font-size:1.6rem;line-height:1}
.board__big{color:var(--hazard)}
.board__go{
  font-family:var(--disp);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;border-bottom:2px solid var(--line-strong);padding-bottom:.2rem;
}
.board:hover .board__go{border-bottom-color:var(--bone)}

/* Timetable — the date sits in its own gutter, the way a run list is read. */
.tt{border-top:1px solid var(--line);list-style:none;padding:0;margin:0}
.tt__row{
  display:grid;grid-template-columns:74px 1fr auto 2rem;gap:2rem;align-items:center;
  padding:1.4rem 0;border-bottom:1px solid var(--line);
  transition:background .22s,padding .22s;
}
.tt__row:hover{background:var(--coal);padding-left:1.1rem;padding-right:1.1rem}
.tt__date{display:block;text-align:center;border-right:1px solid var(--line);padding-right:1rem}
.tt__mo{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hazard)}
.tt__day{display:block;font-family:var(--disp);font-weight:800;font-size:2.1rem;line-height:1;margin:.15rem 0}
.tt__dow{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--smoke)}
.tt__t{margin:0;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.05}
.tt__spec{margin:.4rem 0 0;font-size:.7rem;letter-spacing:.05em;color:var(--smoke)}
.tt__cd{text-align:right;white-space:nowrap}
.tt__cdl{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
.tt__cd b{font-size:.95rem;font-weight:500;color:var(--bone)}
.tt__arrow{font-size:1.3rem;color:var(--smoke);transition:transform .22s,color .22s}
.tt__row:hover .tt__arrow{transform:translateX(5px);color:var(--bone)}

/* Results ledger — closed sales are a table of numbers, so it's a table. */
.ledger__scroll{overflow-x:auto}
.ledger{width:100%;border-collapse:collapse;min-width:560px}
.ledger th{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;text-align:left;padding:0 1rem .8rem 0;
  border-bottom:1px solid var(--line-strong);
}
.ledger td{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ash)}
.ledger tr:hover td{background:rgba(242,241,237,.03)}
.ledger .num{text-align:right;padding-right:0}
/* Qualified with td: `.ledger td` is (0,1,1) and would otherwise win over a
   lone class, flattening the event name and the hammer total back to body
   grey — the two cells the eye is meant to land on. */
.ledger td.ledger__t{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--bone);
  text-transform:uppercase;letter-spacing:.01em}
.ledger td.ledger__v{font-family:var(--disp);font-weight:800;font-size:1.25rem;color:var(--bone)}
.ledger td.ledger__d{white-space:nowrap}

/* Below the table's natural width the horizontal scroller would push Hammer —
   the one figure the archive exists to show — off the right edge. Narrow
   screens get stacked records instead, each number carrying its own label. */
@media(max-width:700px){
  .ledger{min-width:0;display:block}
  .ledger thead{display:none}
  .ledger tbody,.ledger tr,.ledger td{display:block}
  .ledger tr{border-bottom:1px solid var(--line);padding:1.1rem 0}
  .ledger td{border:0;padding:0}
  .ledger td.ledger__d{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
  .ledger td.ledger__t{margin:.3rem 0 .7rem}
  .ledger td.num{
    display:flex;justify-content:space-between;align-items:baseline;
    text-align:left;padding:.28rem 0;
  }
  .ledger td.num::before{
    content:attr(data-l);
    font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--smoke);
  }
}

@media(max-width:900px){
  .cal__head{grid-template-columns:1fr;gap:2rem}
  .cal__tally{border-left:0;border-top:1px solid var(--line);padding:1.5rem 0 0}
  .board{grid-template-columns:1fr;gap:1.6rem}
  .board__r{max-width:340px}
}
@media(max-width:640px){
  .tt__row{grid-template-columns:58px 1fr;gap:1.1rem;row-gap:.8rem}
  .tt__day{font-size:1.6rem}
  .tt__cd{grid-column:2;text-align:left}
  .tt__arrow{display:none}
}

/* ── "similar lots" nudge ───────────────────────────────────────────────
   Slides up ~10s after landing on a lot. Corner-anchored on desktop so it
   never covers the bid panel; a bottom sheet on mobile that sits above the
   sticky bid bar (JS measures the bar into --sv-offset).

   Ported from app-legacy.css, which athens3 no longer loads — without this
   the panel rendered as bare markup.
   ─────────────────────────────────────────────────────────────────────── */
.sv-pop{
  position:fixed;right:1.1rem;bottom:1.1rem;
  z-index:45;                        /* under modals (50), over sticky bar (40) */
  width:min(420px,calc(100vw - 2.2rem));
  background:var(--coal);border:1px solid var(--line-strong);
  animation:svPopIn 340ms cubic-bezier(.16,1,.3,1);
}
.sv-pop::before{
  content:"";display:block;height:4px;
  background:repeating-linear-gradient(135deg,var(--hazard) 0 12px,var(--coal) 12px 24px);
}
@keyframes svPopIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sv-pop{animation:none}}

.sv-pop__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1rem;border-bottom:1px solid var(--line);
}
.sv-pop__title{
  margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--smoke);
}
.sv-pop__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;color:var(--smoke);transition:color .18s;flex-shrink:0;
}
.sv-pop__close:hover{color:var(--bone)}

.sv-pop__list{display:flex;gap:.6rem;padding:.9rem 1rem 1rem;overflow-x:auto}
.sv-pop__card{flex:0 0 118px;min-width:0}
.sv-pop__thumb{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  background:var(--iron);transition:opacity .2s;
}
.sv-pop__card:hover .sv-pop__thumb{opacity:.82}
.sv-pop__body{padding-top:.45rem}
.sv-pop__name{
  font-family:var(--disp);font-weight:700;font-size:.82rem;line-height:1.1;
  text-transform:uppercase;color:var(--bone);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.sv-pop__price{
  font-family:var(--disp);font-weight:800;font-size:1rem;color:var(--bone);
  margin-top:.2rem;font-variant-numeric:tabular-nums;
}

@media(max-width:1023px){
  .sv-pop{left:.6rem;right:.6rem;width:auto;bottom:calc(var(--sv-offset,0px) + .6rem)}
  /* Three cards plus their gaps have to clear a 360px phone once the panel's
     own padding is taken off, or the last one is sliced and reads as broken
     rather than scrollable. */
  .sv-pop__card{flex-basis:100px}
  .sv-pop__name{font-size:.74rem}
}

/* ── lot page ───────────────────────────────────────────────────────── */
.lot__top{border-bottom:1px solid var(--line);background:var(--coal)}
.lot__topin{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;height:46px;flex-wrap:wrap}
.lot__crumb{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);display:flex;gap:.6rem;align-items:center}
.lot__crumb a:hover{color:var(--bone)}
.lot__crumb b{color:var(--bone);font-weight:500}
.lot__walk{display:flex;gap:1.4rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.lot__walk a:hover{color:var(--bone)}

/* gallery */
.gal{background:var(--void);max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.gal__stage{position:relative;width:100%;aspect-ratio:16/10;max-height:78vh;background:var(--iron);overflow:hidden}
.gal__slide{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal__slide img,.gal__slide video,.gal__slide iframe{width:100%;height:100%;object-fit:cover;border:0}
.gal__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;
  background:rgba(10,10,11,.6);backdrop-filter:blur(6px);color:var(--bone);
  font-family:var(--mono);font-size:1.1rem;transition:background .15s;
}
.gal__arrow:hover{background:var(--bone);color:var(--void)}
.gal__arrow--l{left:0}.gal__arrow--r{right:0}
.gal__lot{
  position:absolute;left:0;top:0;z-index:3;background:var(--bone);color:var(--void);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem;
}
.gal__count{
  position:absolute;right:0;bottom:0;z-index:3;background:rgba(10,10,11,.72);
  padding:.3rem .6rem;font-size:.7rem;color:var(--bone);
}
.gal__state{position:absolute;left:0;bottom:0;z-index:3}
.gal__strip{display:flex;gap:2px;overflow-x:auto;padding:2px 0;scrollbar-width:thin}
.gal__thumb{position:relative;flex:none;width:112px;aspect-ratio:16/10;padding:0;border:0;opacity:.42;transition:opacity .18s}
.gal__thumb img{width:100%;height:100%;object-fit:cover}
.gal__thumb:hover{opacity:.8}
.gal__thumb.is-on{opacity:1;outline:2px solid var(--bone);outline-offset:-2px}
.gal__play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.2rem;text-shadow:0 2px 8px #000}

/* lightbox */
.lb{position:fixed;inset:0;z-index:130;background:rgba(10,10,11,.97);display:flex;align-items:center;justify-content:center}
.lb img{max-width:94vw;max-height:88vh;object-fit:contain}
.lb__x{position:absolute;top:1rem;right:1.4rem;font-size:2.4rem;line-height:1;color:var(--bone)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1.6rem;
  color:var(--bone);padding:1.4rem;opacity:.6}
.lb__nav:hover{opacity:1}
.lb__nav--l{left:0}.lb__nav--r{right:0}
.lb__n{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);color:var(--smoke);font-size:.8rem}

/* body split */
.lot__grid{display:grid;grid-template-columns:1fr 380px;gap:3rem;align-items:start}
.lot__head{margin-bottom:1.8rem}
.lot__title{font-size:clamp(2rem,4vw,3.4rem);margin:.7rem 0 .5rem}
.lot__sub{font-size:.82rem;color:var(--smoke);letter-spacing:.06em}
.lot__block{margin-top:2.4rem}
.lot__h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--smoke);font-weight:400;margin-bottom:.9rem;display:flex;gap:.8rem;align-items:baseline}

/* carfax */
.carfax{display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;border:1px solid var(--line);
  background:var(--coal);transition:border-color .18s}
.carfax:hover{border-color:var(--bone)}
.carfax__mark{height:22px;width:auto;flex:none}
.carfax__t{font-family:var(--disp);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
.carfax__cta{margin-left:auto;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);white-space:nowrap}

/* bid rail */
.lot__rail{position:sticky;top:calc(var(--hdr-h-stuck) + 1.2rem)}
.bidbox{border:1px solid var(--line);background:var(--coal)}
.bidbox__state{padding:.7rem 1.2rem;border-bottom:1px solid var(--line);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;gap:.15rem}
.bidbox__sub{font-family:var(--body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--smoke)}
.bid-status--live .bidbox__sub,.bid-status--winning .bidbox__sub{color:var(--ash)}
.bid-status--winning{background:rgba(90,169,127,.12);color:var(--win)}
.bid-status--outbid{background:rgba(210,84,62,.12);color:var(--alert)}
.bidbox__price{padding:1.3rem 1.2rem .9rem}
.bidbox__n{font-family:var(--disp);font-weight:800;font-size:2.9rem;line-height:1;letter-spacing:-.01em}
.bidbox__meta{font-size:.74rem;color:var(--smoke);margin-top:.4rem}
.bidbox__clock{padding:0 1.2rem 1.2rem;border-bottom:1px solid var(--line)}
.bidbox__clock>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.bidbox__t{font-size:1.3rem;font-weight:500}
.bidbox>div:not(.bidbox__state):not(.bidbox__price):not(.bidbox__clock){padding:1.2rem}
.bidbox__row{display:flex;gap:.4rem;margin:.5rem 0 .6rem}
.bidbox__pm{width:44px;flex:none;border:1px solid var(--line-strong);font-size:1.1rem}
.bidbox__pm:hover{border-color:var(--bone)}
.bidbox__inp{flex:1;min-width:0;background:var(--iron);border:1px solid var(--line-strong);
  color:var(--bone);padding:.7rem .8rem;font-size:1.05rem;text-align:center}
.bidbox__inp:focus{outline:0;border-color:var(--bone)}
.bidbox__quick{display:flex;gap:.4rem;margin-bottom:.9rem}
.bidbox__quick button{flex:1;padding:.45rem;border:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--smoke)}
.bidbox__quick button:hover{border-color:var(--bone);color:var(--bone)}
.bidbox__err{color:var(--alert);font-size:.76rem;margin:0 0 .7rem}
.bidbox__buy{border-top:1px solid var(--line)}
.bidbox__bn{font-family:var(--disp);font-weight:800;font-size:1.8rem;line-height:1;margin:.15rem 0 .8rem}
.bidbox__gate p{color:var(--ash);font-size:.92rem;margin-bottom:1rem}
.bidbox__acts{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem}
.bidbox__agent{border-top:1px solid var(--line)}
.bidbox__agentn{font-family:var(--disp);font-weight:700;font-size:1.15rem;text-transform:uppercase;margin:.15rem 0 .4rem}
.bidbox__agent a:hover{color:var(--bone);border-bottom:1px solid var(--line-strong)}

.lot__assure{list-style:none;margin:1.2rem 0 0;padding:0;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smoke)}
.lot__assure li{padding:.4rem 0;border-bottom:1px solid var(--line)}
.lot__assure li:last-child{border-bottom:0}

@media (max-width:1020px){
  .lot__grid{grid-template-columns:1fr;gap:2rem}
  .lot__rail{position:static;order:-1}
  .gal__stage{aspect-ratio:4/3;max-height:none}
}

/* ── legacy partials, re-dressed ─────────────────────────────────────────
   ask-question.php and watchlist-toggle.php carry the analytics hooks the
   tracking build depends on, so they are restyled from here instead of being
   edited. Their markup — and every data- attribute on it — stays untouched. */
.bidbox__acts form{margin:0}
.bidbox__acts button,
.bidbox__acts a{
  display:flex!important;align-items:center;justify-content:center;gap:.5rem;width:100%;
  font-family:var(--disp)!important;font-weight:700!important;font-size:.95rem!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  padding:.75rem 1rem!important;border-radius:0!important;
  background:transparent!important;color:var(--bone)!important;
  border:1px solid var(--line-strong)!important;transition:.16s;
}
.bidbox__acts button:hover,
.bidbox__acts a:hover{background:var(--bone)!important;color:var(--void)!important;border-color:var(--bone)!important}
.bidbox__acts svg{width:16px;height:16px;flex:none}

/* ── inspection ─────────────────────────────────────────────────────────
   The condition report: a score, a per-category summary, and the full
   point-by-point list in a sheet. Verdicts are the one place a little colour
   earns its keep — pass/note/fail has to be legible at a glance. */
.insp-score{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.insp-score__n{
  flex:none;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--disp);font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--win);border:2px solid var(--win);background:rgba(90,169,127,.1);
}
.insp-score__n.warn{color:var(--hazard);border-color:var(--hazard);background:rgba(242,195,0,.1)}
.insp-score__n.bad{color:var(--alert);border-color:var(--alert);background:rgba(210,84,62,.1)}
.insp-score__t{font-family:var(--disp);font-weight:700;font-size:1.15rem;text-transform:uppercase;line-height:1.1}
.insp-score__s{font-size:.82rem;color:var(--smoke);margin-top:.25rem;line-height:1.4}

.insp-pill{
  display:inline-block;padding:.2rem .55rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--win);background:rgba(90,169,127,.12);border:1px solid rgba(90,169,127,.34);
}
.insp-pill.warn{color:var(--hazard);background:rgba(242,195,0,.12);border-color:rgba(242,195,0,.34)}
.insp-pill.bad{color:var(--alert);background:rgba(210,84,62,.12);border-color:rgba(210,84,62,.34)}

.insp-pt{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line);
}
.insp-pt:last-child{border-bottom:0}
.insp-pt__n{font-size:.9rem;color:var(--bone);line-height:1.4}
.insp-pt__n em{display:block;font-style:normal;font-size:.78rem;color:var(--smoke);margin-top:.2rem}

/* agent contact — the phone and the mail are actions, not captions */
.agent__acts{display:flex;flex-direction:column;gap:.4rem;margin-top:.7rem}
.agent__act{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;
  border:1px solid var(--line);color:var(--ash);font-size:.86rem;transition:.15s;
}
.agent__act:hover{border-color:var(--bone);color:var(--bone)}
.agent__act svg{width:15px;height:15px;flex:none;opacity:.7}
.agent__act:hover svg{opacity:1}

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY BRIDGE
   ───────────────────────────────────────────────────────────────────────
   Partials that carry the analytics hooks (ask-question, watchlist-toggle,
   phone-prompt) and the screens still queued for rebuild are written against
   the old token names. Rather than edit those files — and risk dropping a
   data- attribute the tracking build depends on — the old names are aliased
   onto the Nightlane palette here. Delete this block once nothing references
   them; `grep -r "var(--ink)" resources/` will say when.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  --bg:var(--void);
  --bg-soft:var(--iron);
  --surface:var(--coal);
  --paper:var(--void);
  --paper-deep:var(--coal);
  --ink:var(--bone);
  --ink-soft:var(--ash);
  --ink-mute:var(--smoke);
  --border:var(--line);
  --border-soft:var(--line);
  --on-dark:var(--bone);
  --on-dark-soft:var(--smoke);
  --brand:var(--bone);
  --brand-dark:var(--ash);
  --gold:var(--hazard);
  --won:var(--win);
  --info:var(--smoke);
  --radius:0px;
  --radius-sm:0px;
  --font-display:var(--disp);
  --font-body:var(--body);
  --font-mono:var(--mono);
}

/* Structural leftovers the old markup still asks for. */
.card{background:var(--coal);border:1px solid var(--line)}
.btn-primary{background:var(--bone);color:var(--void)}
.btn-primary:hover{background:#fff}
.btn-gold{background:var(--hazard);color:var(--void)}
.btn-ghost-ink,.btn-ghost-light{border:1px solid var(--line-strong);color:var(--bone)}
.btn-ghost-ink:hover,.btn-ghost-light:hover{background:var(--bone);color:var(--void)}
.btn-sm{padding:.6rem 1.2rem;font-size:.88rem}
.numeric{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none!important}

/* The ask-a-question sheet: legacy inline styles set the colours from the
   aliases above, but it still needs the sheet's own furniture. */
[id^="ask-dialog"] .card,[id^="askDialog"] .card{box-shadow:0 40px 80px rgba(0,0,0,.55)}
[data-ask-form] input,[data-ask-form] textarea,[data-ask-form] select{
  width:100%;padding:.7rem .8rem;background:var(--iron);color:var(--bone);
  border:1px solid var(--line-strong);font-family:var(--mono);font-size:.92rem;
}
[data-ask-form] input:focus,[data-ask-form] textarea:focus{outline:0;border-color:var(--bone)}
[data-ask-form] label{color:var(--smoke);font-family:var(--mono)}

/* ── contact sheet ──────────────────────────────────────────────────────
   Three ways to reach the desk, each a full-width row: icon, what it does,
   and the destination underneath. Rows rather than buttons because the
   second line (the actual number, the actual address) is the useful part. */
.cmdl__box{max-width:460px;padding:1.8rem}
.cmdl__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.cmdl__note{color:var(--smoke);font-size:.86rem;margin:.9rem 0 1.3rem}
.cmdl__list{display:flex;flex-direction:column;gap:.5rem}
.cmdl__row{
  display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  padding:.9rem;border:1px solid var(--line);background:var(--void);
  color:var(--bone);transition:border-color .15s,background .15s;
}
.cmdl__row:hover{border-color:var(--bone);background:var(--iron)}
.cmdl__ico{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:var(--bone);
}
.cmdl__row:hover .cmdl__ico{background:var(--bone);color:var(--void);border-color:var(--bone)}
.cmdl__ico svg{width:18px;height:18px}
.cmdl__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.cmdl__t{font-family:var(--disp);font-weight:700;font-size:1.05rem;text-transform:uppercase;line-height:1.1}
.cmdl__s{font-size:.78rem;color:var(--smoke);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdl__go{
  flex:none;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);
}
.cmdl__row:hover .cmdl__go{color:var(--bone)}

/* ── auth ───────────────────────────────────────────────────────────────
   Photograph on one side, form on the other. On a phone the picture drops
   away entirely — it's atmosphere, and atmosphere shouldn't cost a screen
   of scrolling before the first field. */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--hdr-h))}
.auth__art{position:relative;overflow:hidden;background:var(--iron)}
.auth__art img{width:100%;height:100%;object-fit:cover}
.auth__art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.35),rgba(10,10,11,.9))}
.auth__artcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.5rem var(--gut)}
.auth__artcap p{color:var(--ash);max-width:34ch;margin:.7rem 0 0;font-size:.95rem}
.auth__pane{display:flex;align-items:center;justify-content:center;padding:3.5rem var(--gut)}
.auth__box{width:100%;max-width:400px}
.auth__box--wide{max-width:520px}
.auth__h{font-size:clamp(2.4rem,4.4vw,3.6rem);margin:.7rem 0 .6rem}
.auth__sub{color:var(--ash);font-size:.98rem;margin-bottom:2rem}
.auth__form{margin-top:.5rem}
.auth__two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.auth__biz{margin:.4rem 0 1.2rem}
.auth__legal{font-size:.8rem;color:var(--smoke);margin-top:1rem;text-align:center}
.auth__legal a,.auth__foot a{border-bottom:1px solid var(--line-strong)}
.auth__legal a:hover,.auth__foot a:hover{border-bottom-color:var(--bone)}
.auth__foot{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--smoke);
}

@media (max-width:900px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth__art{display:none}
  .auth__pane{padding:2.5rem var(--gut)}
  .auth__two{grid-template-columns:1fr;gap:0}
}