/* ==========================================================================
   Bid My Lid
   Dark, machined, numeric. The page is meant to read like an auction
   catalogue for one strange lot, not like a SaaS landing page.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink:      #08080a;
  --ink-2:    #0e0e12;
  --ink-3:    #14141a;
  --ink-4:    #1c1c24;
  --line:     #24242e;
  --line-2:   #34343f;
  --fog:      #83838f;
  --fog-2:    #adadb8;
  --chalk:    #e9e9ee;
  --white:    #fff;

  --live:     #c8ff2e;
  --live-ink: #0d1400;
  --live-dim: rgba(200, 255, 46, .13);
  --live-line:rgba(200, 255, 46, .38);
  --hot:      #ff5f3c;
  --hot-dim:  rgba(255, 95, 60, .14);

  /* Brushed aluminium, Space Black. */
  --alu-hi:   #3a3a42;
  --alu:      #24242a;
  --alu-lo:   #16161b;
  --alu-edge: #56565f;

  --gap:      clamp(1rem, 3vw, 2rem);
  --shell:    1180px;
  --radius:   14px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Belt and braces against a sideways scroll. `hidden` on body alone
     propagates to the viewport and usually holds, but `clip` on both means
     no descendant can ever drag the page sideways - and a page you can shove
     off-centre with a thumb reads as broken even when nothing is missing. */
  overflow-x: clip;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* No element may be wider than the screen, whatever it contains. */
  max-width: 100%;
}

/* A faint vertical rule grid, like ruled paper for an inventory. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(200, 255, 46, .055), transparent 70%),
    radial-gradient(700px 420px at 88% 12%, rgba(120, 140, 255, .04), transparent 70%);
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--live); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--live); color: var(--live-ink); }

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.shell {
  width: min(100% - 2 * var(--gap), var(--shell));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.shell--wide { --shell: 1320px; }
.shell--tight { --shell: 760px; }

section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

.tag {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog);
  font-weight: 500;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--fog-2);
  line-height: 1.5;
  max-width: 56ch;
}

.dim { color: var(--fog); }
.hot { color: var(--hot); }
.pop { color: var(--live); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--live);
  --btn-fg: var(--live-ink);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .82rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
  white-space: nowrap;
}

.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--chalk);
  border-color: var(--line-2);
}

.btn--ghost:hover { border-color: var(--fog); background: var(--ink-3); filter: none; }

.btn--quiet {
  --btn-bg: var(--ink-4);
  --btn-fg: var(--chalk);
  border-color: var(--line);
}

.btn--sm { padding: .5rem .9rem; font-size: .85rem; }
.btn--block { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.masthead__in {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  letter-spacing: -.045em;
  font-size: 1.06rem;
  text-decoration: none;
  margin-right: auto;
}

.wordmark__chip {
  width: 26px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--alu-hi), var(--alu-lo));
  border: 1px solid var(--alu-edge);
  position: relative;
  flex: none;
}

.wordmark__chip::after {
  content: '';
  position: absolute;
  inset: 3px 3px auto 3px;
  height: 4px;
  border-radius: 1px;
  background: var(--live);
}

.masthead nav {
  display: flex;
  gap: 1.25rem;
  font-size: .93rem;
  color: var(--fog-2);
}

.masthead nav a { text-decoration: none; }
.masthead nav a:hover { color: var(--chalk); }

/* Base state. This MUST sit above the media query below: on equal
   specificity the later rule wins, and putting it after hid both labels and
   left an empty button. */
.masthead__cta-short { display: none; }

@media (max-width: 860px) {
  .masthead__in { height: auto; padding-block: .7rem; flex-wrap: wrap; }

  /* The brand may shrink; without min-width:0 a flex item refuses to go
     below its content and pushes the row wider than the screen. */
  .wordmark { min-width: 0; font-size: 1rem; }
  .wordmark__chip { flex: none; }

  /*
   * Wraps rather than scrolls. A scrolling strip saves a line but arrives
   * cut through the middle of a word, which reads as a broken page rather
   * than as something to swipe.
   */
  .masthead nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    row-gap: .35rem;
    gap: 1.05rem;
    font-size: .86rem;
  }

  .masthead nav a { white-space: nowrap; }

  /* Short label so the brand, the currency toggle and the button hold one
     row down to 320px instead of the button dropping to a line of its own. */
  .masthead__cta-long { display: none; }
  .masthead__cta-short { display: inline; }
  .masthead .btn--sm { padding: .45rem .8rem; }
}

/* --------------------------------------------------------------------------
   Live strip
   -------------------------------------------------------------------------- */

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
  box-shadow: 0 0 0 0 rgba(200, 255, 46, .6);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(200, 255, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 255, 46, 0); }
}

.livebar {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .38rem .85rem .38rem .7rem;
  border: 1px solid var(--live-line);
  background: var(--live-dim);
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--chalk);
}

.livebar--over {
  border-color: var(--line-2);
  background: var(--ink-3);
  color: var(--fog-2);
}

.livebar--over .pulse { background: var(--fog); animation: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }

.hero__head {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.2rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 5.2rem);
  letter-spacing: -.05em;
  max-width: 16ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--live);
}

/* --------------------------------------------------------------------------
   The lid
   -------------------------------------------------------------------------- */

.lidwrap {
  position: relative;
  width: min(100%, 940px);
  margin-inline: auto;
}

/*
 * The lid comes in two finishes, because the render has to be the colour of
 * the machine actually being bought. Everything inside it reads from these
 * tokens, so the whole assembly - sheen, chamfer, emblem, spots, type -
 * flips with one class rather than with a parallel stylesheet.
 */
.lid {
  /* Space Black, the default. */
  --alu-1: #3a3a44;
  --alu-2: #26262e;
  --alu-3: #1a1a20;
  --alu-4: #2f2f38;
  --lid-border: var(--alu-edge);
  --lid-rim: rgba(255, 255, 255, .16);
  --lid-sheen: rgba(255, 255, 255, .09);
  --lid-sheen-2: rgba(255, 255, 255, .05);
  --lid-chamfer: rgba(255, 255, 255, .045);
  --lid-ink: rgba(255, 255, 255, .26);
  --lid-etch: rgba(255, 255, 255, .2);

  --oem-face: radial-gradient(circle at 46% 30%, rgba(0, 0, 0, .34), rgba(255, 255, 255, .03) 78%);
  --oem-edge: rgba(255, 255, 255, .07);
  --oem-in-1: rgba(0, 0, 0, .6);
  --oem-in-2: rgba(255, 255, 255, .09);

  --spot-line: rgba(200, 255, 46, .62);
  --spot-fill: rgba(200, 255, 46, .085);
  --spot-line-on: var(--live);
  --spot-fill-on: rgba(200, 255, 46, .17);
  --spot-glow: rgba(200, 255, 46, .5);
  --spot-price: var(--chalk);
  --spot-meta: rgba(200, 255, 46, .62);
  --spot-code: rgba(255, 255, 255, .42);
  --held-line: rgba(255, 255, 255, .2);
  --held-fill: rgba(255, 255, 255, .08);

  position: relative;
  aspect-ratio: 35.57 / 24.81;
  /* A real lid is generously radiused. At 2% it reads as a card, not a Mac. */
  border-radius: clamp(20px, 3.6%, 44px);
  background: linear-gradient(148deg,
    var(--alu-1) 0%, var(--alu-2) 30%, var(--alu-3) 58%, var(--alu-4) 100%);
  border: 1px solid var(--lid-border);
  box-shadow:
    inset 0 1px 0 var(--lid-rim),
    inset 0 -2px 3px rgba(0, 0, 0, .55),
    0 50px 100px -34px rgba(0, 0, 0, .95),
    0 6px 24px rgba(0, 0, 0, .55);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}

/*
 * Silver. Not "the dark one lightened": on a light face the light comes from
 * the other side, so the rim goes dark, the emblem deboss inverts, and the
 * lime that carries an available spot has to darken to stay legible against
 * aluminium instead of against near-black.
 */
.lid--silver {
  --alu-1: #f4f4f6;
  --alu-2: #dcdce1;
  --alu-3: #c2c2c9;
  --alu-4: #e6e6ea;
  --lid-border: #a9a9b3;
  --lid-rim: rgba(255, 255, 255, .9);
  --lid-sheen: rgba(255, 255, 255, .5);
  --lid-sheen-2: rgba(255, 255, 255, .3);
  --lid-chamfer: rgba(0, 0, 0, .1);
  --lid-ink: rgba(30, 32, 24, .34);
  --lid-etch: rgba(30, 32, 24, .32);

  --oem-face: radial-gradient(circle at 46% 30%, rgba(0, 0, 0, .16), rgba(255, 255, 255, .5) 78%);
  --oem-edge: rgba(0, 0, 0, .1);
  --oem-in-1: rgba(0, 0, 0, .22);
  --oem-in-2: rgba(255, 255, 255, .8);

  --spot-line: rgba(58, 78, 0, .55);
  --spot-fill: rgba(200, 255, 46, .34);
  --spot-line-on: #5d8000;
  --spot-fill-on: rgba(200, 255, 46, .72);
  --spot-glow: rgba(93, 128, 0, .35);
  --spot-price: #1b2208;
  --spot-meta: #4c6600;
  --spot-code: rgba(30, 32, 24, .42);
  --held-line: rgba(0, 0, 0, .18);
  --held-fill: rgba(255, 255, 255, .62);

  box-shadow:
    inset 0 1px 0 var(--lid-rim),
    inset 0 -2px 3px rgba(0, 0, 0, .16),
    0 50px 100px -34px rgba(0, 0, 0, .85),
    0 6px 24px rgba(0, 0, 0, .45);
}

/* Anodised sweep over a very fine horizontal brush. The brush has to stay
   near-invisible: anything with a centre point reads as a starburst. */
.lid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg,
      var(--lid-sheen) 0%,
      rgba(255, 255, 255, 0) 24%,
      var(--lid-sheen-2) 47%,
      rgba(255, 255, 255, 0) 68%,
      var(--lid-sheen-2) 100%),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .012) 0 1px,
      rgba(0, 0, 0, .012) 1px 2px);
  pointer-events: none;
  z-index: 3;
}

/* The machined chamfer that runs just inside the edge of every unibody lid. */
.lid::after {
  content: '';
  position: absolute;
  inset: clamp(5px, .9%, 11px);
  border: 1px solid var(--lid-chamfer);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

/* The centre emblem. Not the manufacturer's mark, and it says so. */
.lid__oem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  /* Debossed: light catches one rim, shadow pools at the other. Which rim
     depends on the finish, which is why both are tokens. */
  background: var(--oem-face);
  border: 1px solid var(--oem-edge);
  box-shadow:
    inset 0 2px 3px var(--oem-in-1),
    inset 0 -1px 0 var(--oem-in-2),
    0 1px 0 rgba(255, 255, 255, .05);
  z-index: 1;
  pointer-events: none;
}

.lid__oem span {
  font-size: clamp(5px, .95cqw + 3px, 9px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lid-ink);
  line-height: 1.4;
  padding: 0 6%;
}

/* The hinge end: a slightly darker band with a bright lip, the way the lid
   meets the body when it is closed. */
.lid__hinge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .34));
  border-top: 1px solid rgba(255, 255, 255, .04);
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none;
}

.lid--silver .lid__hinge {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .13));
  border-top-color: rgba(0, 0, 0, .07);
}

.lid__hinge span {
  font-size: clamp(6px, .8cqw + 3px, 10px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lid-etch);
  text-indent: .32em;
}

/* The front edge of the body, with its finger recess. */
.lid__base {
  width: 96.5%;
  height: clamp(9px, 1.9%, 18px);
  margin: -1px auto 0;
  background: linear-gradient(180deg, #2e2e37 0%, #1b1b22 55%, #101016 100%);
  border: 1px solid var(--alu-edge);
  border-top: 0;
  border-radius: 0 0 clamp(7px, 1.4%, 16px) clamp(7px, 1.4%, 16px);
  position: relative;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .9);
}

.lidwrap--silver .lid__base {
  background: linear-gradient(180deg, #dcdce1 0%, #bcbcc4 55%, #9c9ca6 100%);
  border-color: #a9a9b3;
}

.lid__base::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 13%;
  height: 62%;
  background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18));
  border-radius: 0 0 40% 40%;
}

.lidwrap--silver .lid__base::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .08));
}

/* -- a single spot ------------------------------------------------------- */

.spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  /* Percentage padding resolves against the containing block's WIDTH - the
     whole lid - so 3% here is 28px on a 122px spot. Container units measure
     the spot itself, which is what was meant. */
  padding: clamp(3px, 2cqw, 10px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 7px;
  border: 1px dashed var(--spot-line);
  background: var(--spot-fill);
  color: var(--spot-price);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  text-decoration: none;
  /* Both axes, so type inside a spot can be sized against the shorter one.
     A banner and a square of the same width need very different numbers. */
  container-type: size;
}

.spot:hover,
.spot:focus-visible {
  background: var(--spot-fill-on);
  border-color: var(--spot-line-on);
  transform: scale(1.025);
  box-shadow: 0 6px 22px -6px var(--spot-glow);
  z-index: 6;
}

.spot__code {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--spot-code);
  line-height: 1;
}

.spot__price {
  /* Whichever axis runs out first decides the size. */
  font-size: clamp(11px, min(13cqw, 30cqh), 26px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--spot-price);
}

.spot__meta {
  font-size: clamp(7px, min(5cqw, 11cqh), 11px);
  color: var(--spot-meta);
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: center;
}

/* Held by a sponsor: solid, quieter, wearing their logo. */
.spot--held {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-color: var(--held-line);
  background: var(--held-fill);
  padding: clamp(4px, 3.5cqw, 14px);
}

.spot--held:hover { border-color: var(--spot-line-on); background: var(--spot-fill-on); }

/*
 * A percentage max-height inside an auto-sized grid row resolves against a
 * height that does not exist yet, and the logo collapses to a few pixels.
 * Giving it a definite box and letting object-fit do the letterboxing is
 * what actually fills the spot.
 */
.spot__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.lid--silver .spot__logo { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22)); }

.spot__brand {
  font-size: clamp(9px, min(11cqw, 24cqh), 19px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--spot-price);
}

.spot--closed { cursor: default; border-color: var(--held-line); }
.spot--closed:hover { transform: none; box-shadow: none; background: var(--held-fill); }

/* The bid preview: the sponsor's own logo, dropped onto the lid live. */
.spot--preview {
  border-color: var(--spot-line-on);
  border-style: solid;
  background: var(--spot-fill-on);
  animation: breathe 2.2s ease-in-out infinite;
}

@keyframes breathe {
  50% { box-shadow: 0 0 0 5px rgba(200, 255, 46, .12); }
}

/* --------------------------------------------------------------------------
   Numbers strip under the lid
   -------------------------------------------------------------------------- */

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}

.readout > div {
  background: var(--ink-2);
  padding: 1.05rem 1.2rem;
  display: grid;
  gap: .3rem;
  align-content: start;
}

.readout dt {
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fog);
}

.readout dd {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}

.readout dd small {
  display: block;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fog);
  margin-top: .35rem;
}

@media (max-width: 560px) {
  .readout { grid-template-columns: 1fr; }
  .readout dd { font-size: 1.5rem; }
}

.clock {
  display: inline-flex;
  gap: .1rem;
  align-items: baseline;
  font-size: clamp(1.05rem, 5.2vw, 1.75rem);
  letter-spacing: -.03em;
}
.clock span { min-width: 1.15ch; display: inline-block; text-align: center; }
.clock i { font-style: normal; font-size: .58em; color: var(--fog); padding-inline: .06em .3em; }

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.meter {
  height: 10px;
  border-radius: 999px;
  background: var(--ink-4);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.meter__fill {
  height: 100%;
  background: linear-gradient(90deg, #93c412, var(--live));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}

.meter__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: sweep 2.8s linear infinite;
}

@keyframes sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   The lot table
   -------------------------------------------------------------------------- */

.lots {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.lots th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fog);
  font-weight: 500;
  padding: 0 1rem .7rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.lots td {
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.lots tr:hover td { background: var(--ink-2); }

.lots__num {
  color: var(--fog);
  font-size: .82rem;
  width: 1%;
}

.lots__name { font-weight: 600; letter-spacing: -.02em; }
.lots__name small { display: block; font-weight: 400; color: var(--fog); font-size: .8rem; letter-spacing: 0; }

.lots__bid { font-weight: 600; font-size: 1.05rem; letter-spacing: -.03em; white-space: nowrap; }
.lots__bid small { display: block; font-size: .74rem; font-weight: 400; color: var(--fog); }

.lots__act { text-align: right; width: 1%; }

.holder { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.holder__logo {
  width: 42px;
  height: 28px;
  border-radius: 6px;
  background: var(--ink-4);
  border: 1px solid var(--line);
  object-fit: contain;
  padding: 3px;
  flex: none;
}

.holder__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 5px;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--fog-2);
  white-space: nowrap;
}

.chip--marquee { border-color: var(--live-line); color: var(--live); background: var(--live-dim); }
.chip--large { border-color: #4b5ea8; color: #93a8e6; }
.chip--medium { border-color: #4a4a58; color: var(--fog-2); }
.chip--small { border-color: #3a3a46; color: var(--fog); }
.chip--hot { border-color: var(--hot); color: var(--hot); background: var(--hot-dim); }
.chip--live { border-color: var(--live-line); color: var(--live); background: var(--live-dim); }

.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  .lots { font-size: .88rem; min-width: 620px; }
}

/* --------------------------------------------------------------------------
   Panels and lists
   -------------------------------------------------------------------------- */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem);
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  flex-wrap: wrap;
}

.head h2 { font-size: clamp(1.75rem, 4vw, 2.9rem); }
.head p { margin: .6rem 0 0; color: var(--fog); max-width: 48ch; }

/* Numbered steps, set like clauses rather than icon cards. */
.steps { counter-reset: step; display: grid; gap: 0; }

.steps li {
  counter-increment: step;
  list-style: none;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.steps li:last-child { border-bottom: 1px solid var(--line); }

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.05em;
  color: var(--live);
  line-height: 1;
  padding-top: .1rem;
}

.steps h3 { font-size: 1.22rem; margin-bottom: .35rem; }
.steps p { color: var(--fog-2); max-width: 60ch; }

/* Spec list: a receipt, not a feature grid. */
.spec { display: grid; gap: 0; margin: 0; }

.spec > div {
  display: grid;
  grid-template-columns: minmax(110px, 26%) minmax(0, 1fr);
  gap: 1.2rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}

.spec > div:last-child { border-bottom: 1px solid var(--line); }

/* Below this the two columns leave the value wrapping every second word, so
   the label goes above it instead. */
@media (max-width: 560px) {
  .spec > div { grid-template-columns: 1fr; gap: .2rem; }
  .spec dt { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
}
.spec dt { color: var(--fog); font-size: .88rem; }
.spec dd { margin: 0; }

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */

.ticker {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  padding-block: .7rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker__rail {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  animation: roll 46s linear infinite;
}

.ticker:hover .ticker__rail { animation-play-state: paused; }

@keyframes roll { to { transform: translateX(-50%); } }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--fog-2);
  white-space: nowrap;
}

.ticker__item b { color: var(--chalk); font-weight: 600; }
.ticker__item .amt { color: var(--live); font-weight: 600; }

/* --------------------------------------------------------------------------
   Sightings
   -------------------------------------------------------------------------- */

.sights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.sight {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}

.sight img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.sight__no {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, var(--ink-3), var(--ink-3) 9px, var(--ink-2) 9px, var(--ink-2) 18px);
  color: var(--fog);
  font-size: .8rem;
}

.sight__body { padding: .8rem .95rem 1rem; }
.sight__body strong { display: block; font-weight: 600; letter-spacing: -.02em; }
.sight__body span { font-size: .82rem; color: var(--fog); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--line); }

.qa details { border-bottom: 1px solid var(--line); }

.qa summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: 1.06rem;
  list-style: none;
  position: relative;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: '';
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--fog);
  border-bottom: 2px solid var(--fog);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}

.qa details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa details[open] summary { color: var(--live); }
.qa details > div { padding: 0 2.5rem 1.35rem 0; color: var(--fog-2); max-width: 68ch; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: .42rem; margin-bottom: 1rem; }

.field label { font-size: .85rem; color: var(--fog-2); font-weight: 500; }
.field label span { color: var(--fog); font-weight: 400; }

.input {
  width: 100%;
  padding: .78rem .9rem;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--ink-3);
  color: var(--chalk);
  font: inherit;
  transition: border-color .14s ease, background .14s ease;
}

.input::placeholder { color: #5c5c68; }
.input:focus { outline: none; border-color: var(--live); background: var(--ink-4); }
.input[aria-invalid='true'] { border-color: var(--hot); }

textarea.input { resize: vertical; min-height: 84px; }

.err { color: var(--hot); font-size: .82rem; }

.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Money input with the currency sitting inside it. */
.amount { position: relative; }
.amount .input { padding-left: 2.3rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }

.amount__cur {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fog);
  font-size: 1.2rem;
  pointer-events: none;
}

.quickbids { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; }

.quickbids button {
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fog-2);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: all .13s ease;
}

.quickbids button:hover { border-color: var(--live); color: var(--live); }

.drop {
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  padding: 1.1rem;
  text-align: center;
  color: var(--fog);
  font-size: .88rem;
  cursor: pointer;
  transition: all .14s ease;
  display: grid;
  gap: .4rem;
  place-items: center;
}

.drop:hover, .drop.is-over { border-color: var(--live); color: var(--live); background: var(--live-dim); }
.drop img { max-height: 52px; width: auto; }

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

dialog.sheet {
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--ink-2);
  color: var(--chalk);
  padding: 0;
  width: min(100% - 1.6rem, 560px);
  max-height: min(92dvh, 900px);
  overflow: visible;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .95);
}

dialog.sheet::backdrop {
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(5px);
}

.sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.sheet__head h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.sheet__head p { margin: 0; font-size: .87rem; color: var(--fog); }

.sheet__x {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fog);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex: none;
}

.sheet__x:hover { color: var(--chalk); border-color: var(--fog); }

.sheet__body { padding: 1.4rem 1.5rem; overflow-y: auto; max-height: min(62dvh, 560px); }
.sheet__foot { padding: 1.1rem 1.5rem 1.4rem; border-top: 1px solid var(--line); }

.sheet__note { font-size: .78rem; color: var(--fog); text-align: center; margin-top: .75rem; }

.steps__dots { display: flex; gap: .3rem; margin-top: .55rem; }
.steps__dots i { width: 20px; height: 3px; border-radius: 2px; background: var(--line-2); }
.steps__dots i.on { background: var(--live); }

.review { display: grid; gap: 0; margin-bottom: 1.2rem; }

.review > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}

.review > div span:first-child { color: var(--fog); }
.review > div:last-child { border-bottom: 0; font-size: 1.1rem; font-weight: 600; }

.alert {
  border: 1px solid var(--hot);
  background: var(--hot-dim);
  color: #ffb9a8;
  border-radius: 9px;
  padding: .7rem .9rem;
  font-size: .87rem;
  margin-bottom: 1rem;
}

.alert--ok { border-color: var(--live-line); background: var(--live-dim); color: #dcffa0; }

.stripe-mount {
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--ink-3);
  padding: .85rem;
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  margin-top: clamp(3rem, 7vw, 6rem);
  font-size: .88rem;
  color: var(--fog);
}

.foot__rows { display: flex; gap: 1.5rem 2.5rem; flex-wrap: wrap; align-items: center; }
.foot nav { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--chalk); }

.foot__fine { margin-top: 1.6rem; font-size: .78rem; color: #5e5e69; max-width: 70ch; }

/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */

.admin { padding-block: 2rem; }
.admin h1 { font-size: 1.7rem; margin-bottom: 1.4rem; }
.admin h2 { font-size: 1.2rem; margin: 2.2rem 0 .9rem; }
.admin table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin th { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); color: var(--fog); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.admin td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin form.inline { display: inline; }

.notice {
  border: 1px solid var(--live-line);
  background: var(--live-dim);
  color: #dcffa0;
  padding: .7rem 1rem;
  border-radius: 9px;
  margin-bottom: 1.2rem;
  font-size: .9rem;
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.stat { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--ink-2); }
.stat b { display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -.04em; }
.stat span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: var(--stack, 1rem); }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.center { text-align: center; }
.hidden { display: none !important; }

.prose h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.prose p, .prose li { color: var(--fog-2); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Scale model inside the bid sheet
   -------------------------------------------------------------------------- */

.minilid {
  margin-bottom: 1.3rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-3);
  padding: .7rem;
}

.minilid .lid {
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 22px -10px rgba(0, 0, 0, .9);
}

.minilid .spot {
  pointer-events: none;
  border-radius: 3px;
  opacity: .28;
  transform: none !important;
  box-shadow: none !important;
}

.minilid .spot > * { display: none; }

.minilid .spot--target {
  opacity: 1;
  border-style: solid;
  border-color: var(--spot-line-on);
  background: var(--spot-fill-on);
  box-shadow: 0 0 0 3px var(--spot-glow) !important;
}

.minilid .spot--target > .spot__logo,
.minilid .spot--target > .spot__brand { display: block; }

.minilid .lid__oem span { font-size: 5px; }
.minilid .lid__hinge { display: none; }

.minilid__cap {
  font-size: .72rem;
  color: var(--fog);
  text-align: center;
  margin-top: .55rem;
  letter-spacing: .04em;
}

.rehearse {
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  padding: 1.1rem;
  text-align: center;
  color: var(--fog-2);
  font-size: .9rem;
}

.rehearse strong { color: var(--chalk); display: block; margin-bottom: .3rem; }

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

.minilid__hint {
  color: var(--fog-2);
  letter-spacing: 0;
  margin-top: .3rem;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Sponsor rails

   Two fixed columns either side of the content, holding whoever currently
   leads each placement. They appear only when the viewport is genuinely wide
   enough to give them their own gutters - never floating over the reading
   column, never squeezing it below its comfortable width.
   -------------------------------------------------------------------------- */

.rail { display: none; }

@media (min-width: 1400px) {
  /*
   * One set of numbers drives the whole thing. The card starts at 150px and
   * absorbs whatever side space is left over, up to 230px; the gap grows
   * gently with the viewport; past the card's cap all remaining width lands
   * in the gap rather than in an ever-wider card.
   */
  :root {
    --rail-gap: clamp(16px, calc(100vw * 0.018 - 8px), 52px);
    --rail-w: clamp(150px, calc((100vw - 1180px) / 2 - 16px - var(--rail-gap)), 230px);
    --rail-side: calc(16px + var(--rail-w) + var(--rail-gap));
  }

  /* The content column yields exactly the room the rails need. */
  .shell { width: min(100% - 2 * var(--gap), var(--shell), calc(100vw - var(--rail-side) * 2)); }

  .rail {
    position: fixed;
    top: 84px;
    width: var(--rail-w);
    height: calc(100vh - 104px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 30;
    /* Never scrollable: on a short viewport the cards compress instead, so
       the rail can't trap a scroll or hide a sponsor below the fold. */
    overflow: hidden;
  }

  .rail--left { left: 16px; }
  .rail--right { right: 16px; }

  .railcard {
    flex: 1 1 0;
    min-height: 0;
    max-height: 168px;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .7rem .75rem .65rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--ink-2);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }

  .railcard:hover,
  .railcard:focus-visible {
    border-color: var(--live-line);
    background: var(--ink-3);
    transform: translateY(-1px);
  }

  .railcard__lot {
    position: absolute;
    top: .5rem;
    right: .6rem;
    font-size: .6rem;
    letter-spacing: .14em;
    color: #4e4e58;
    line-height: 1;
  }

  /* The artwork takes the slack; the name and price keep their height. */
  .railcard__art {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: .2rem;
  }

  /*
   * A held card carries the same artwork as the lid, and that artwork is
   * drawn to read on aluminium. Dropped straight onto a near-black card it
   * disappears. The plate means one file works in both places, which is
   * also the truth: it is the same sticker.
   */
  .railcard--held .railcard__art {
    background: #f2f2f4;
    border-radius: 7px;
    padding: .5rem;
  }

  .railcard--held .railcard__art b { color: #16181c; }

  .railcard__art img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .railcard__art b {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.03em;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .railcard__art--empty {
    border: 1px dashed var(--line-2);
    border-radius: 8px;
    color: var(--fog);
    font-size: .78rem;
    line-height: 1.3;
    text-align: center;
  }

  .railcard--open:hover .railcard__art--empty {
    border-color: var(--live-line);
    color: var(--live);
  }

  .railcard__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    flex-shrink: 0;
  }

  .railcard__name {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--fog-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .railcard__bid {
    font-size: .78rem;
    font-weight: 600;
    color: var(--live);
    white-space: nowrap;
  }

  .railcard--open .railcard__bid { color: var(--fog); }
}

/* A rail that would overlap its own cards is worse than no rail. */
@media (max-height: 620px) {
  .rail { display: none; }
}

@media (min-width: 1400px) {
  /* Before bidding opens the empty cards are a price list, not a button. */
  .railcard--open[disabled] { cursor: default; }
  .railcard--open[disabled]:hover { transform: none; border-color: var(--line); background: var(--ink-2); }
  .railcard--open[disabled]:hover .railcard__art--empty { border-color: var(--line-2); color: var(--fog); }
}

/* --------------------------------------------------------------------------
   Currency toggle
   -------------------------------------------------------------------------- */

.curswap {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}

.curswap button {
  padding: .3rem .6rem;
  border: 0;
  background: transparent;
  color: var(--fog);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}

.curswap button[aria-pressed='true'] {
  background: var(--live);
  color: var(--live-ink);
}

.curswap button:not([aria-pressed='true']):hover { color: var(--chalk); }

/* Said once, at the foot of the page, because a converted price that does
   not say it is converted is a lie by omission. */
.curnote { font-size: .78rem; color: var(--fog); margin-top: .8rem; }