/* Auction Week. The white is the exact background of the six standard pieces and the black is the exact background of the Dark Side, so the art sits on the page with no visible frame. */

:root {
  --wall: #ffffff;
  --ink: #0b0d12;
  --ink-2: rgba(11, 13, 18, 0.64);
  --ink-3: rgba(11, 13, 18, 0.44);
  --rule: rgba(11, 13, 18, 0.12);

  --void: #000000;
  --void-ink: #f2f3f5;
  --void-ink-2: rgba(242, 243, 245, 0.62);
  --void-rule: rgba(242, 243, 245, 0.16);
  --neon: #ff000a;

  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 3.4vw, 48px);
  --bar-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--wall); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.mono { font-family: var(--mono); font-size: 0.875em; letter-spacing: 0; }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.005em;
  font-size: clamp(56px, 8vw, 128px);
  text-wrap: balance;
}

/* Header. Its ground is always the page colour under it, so content never shows through behind the wordmark. */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: var(--bar-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  transition: color 240ms var(--ease-out);
}

.bar[data-theme="dark"] { color: var(--void-ink); background: rgba(0, 0, 0, 0.9); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.08em;
}

/* The mark is drawn for dark grounds, so it always sits on a black tile of its own. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--void);
}

.brand-mark img { width: 20px; height: 20px; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--wall);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.pill:hover { background: #2a2e38; }
.pill:active { transform: scale(0.98); }
.pill:focus-visible, .brand:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.bar[data-theme="dark"] .pill, .bid .pill { background: var(--void-ink); color: var(--void); }
.bar[data-theme="dark"] .pill:hover, .bid .pill:hover { background: #ffffff; }

/* Hero. A catalogue of the seven pieces in seven columns, and the seventh column is the dark room.
   The title runs across all seven and inverts where it enters the dark one. */

.hero {
  --cols: 7;
  --col: calc((100% - 2 * var(--gutter)) / var(--cols));
  position: relative;
  background: var(--wall);
  min-height: 100dvh;
  padding: calc(var(--bar-h) + clamp(12px, 3.6vh, 48px)) var(--gutter) clamp(14px, 3vh, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  container-type: inline-size;
}

/* The last column plus the right gutter, from under the header to the floor of the first screen. */
.hero-dark {
  position: absolute;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  width: calc(var(--col) + var(--gutter));
  background: var(--void);
  transform-origin: 50% 100%;
}

.hero-index {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.hero-index a {
  display: grid;
  gap: 4px;
  padding: 14px 12px 0 0;
  border-top: 1px solid var(--ink);
  text-decoration: none;
  transition: border-color 160ms var(--ease-out);
}

.hero-index li + li a { padding-left: 12px; border-left: 1px solid var(--rule); }

.hi-num {
  font-family: var(--display);
  font-size: clamp(26px, min(3.4vw, 6vh), 56px);
  line-height: 0.9;
  margin-bottom: 6px;
}

.hi-piece { font-size: 15px; font-weight: 500; }
.hi-format { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

.hi-dark a { color: var(--void-ink); border-top-color: var(--void-ink); border-left-color: transparent; }
.hi-dark .hi-format { color: var(--neon); }

@media (hover: hover) {
  .hero-index a:hover .hi-num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
}

.hero-index a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.hero-copy {
  position: relative;
  align-self: start;
  margin-top: clamp(24px, 7vh, 96px);
  width: calc(var(--col) * 3);
  min-width: min(100%, 300px);
  padding-right: 24px;
}

.hero-date {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, min(5vw, 9vh), 88px);
  line-height: 0.9;
  letter-spacing: 0.005em;
}

.sub {
  margin-top: clamp(12px, 2.4vh, 26px);
  max-width: 26ch;
  font-size: clamp(17px, min(1.75vw, 3.2vh), 27px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

/* 22.2cqw: "Auction Week" in Bebas Neue measures 4.448 times its font size, so it fills the column with about 1% to spare.
   White with difference reads black on the white room and white inside the dark one. */
.hero h1 {
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: 22.2cqw;
  line-height: 0.8;
  letter-spacing: 0.002em;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 0.06em;
  margin-bottom: -0.035em;
}

.hero h1 .line { display: block; color: #ffffff; mix-blend-mode: difference; }

/* Formats */

.formats {
  padding: clamp(96px, 16vh, 168px) var(--gutter) clamp(72px, 12vh, 140px);
  max-width: 1440px;
  margin: 0 auto;
}

.formats h2 { margin-bottom: clamp(40px, 6vh, 72px); }

.format {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--rule);
}

.format h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 0.9;
}

.format p {
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 17px;
  text-wrap: pretty;
}

.format-meta {
  display: grid;
  gap: 16px;
  justify-items: end;
}

.format-meta .mono { color: var(--ink); font-size: 15px; padding-top: 10px; }

/* Gallery */

.gallery { position: relative; }

.gallery-track {
  display: grid;
  gap: clamp(72px, 12vh, 140px);
  padding: 0 var(--gutter) clamp(48px, 8vh, 96px);
}

.panel {
  display: grid;
  align-content: end;
  gap: 18px;
  padding-top: clamp(24px, 6vh, 64px);
}

.panel p {
  max-width: 34ch;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-2);
  text-wrap: pretty;
}

.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  scroll-margin-top: var(--bar-h);
}

.art { position: relative; }
.art img { width: 100%; aspect-ratio: 1; }

.label {
  display: grid;
  gap: 4px;
  align-content: end;
  font-size: 15px;
  line-height: 1.45;
  max-width: 320px;
}

.label .lot {
  font-family: var(--display);
  font-size: clamp(72px, 7vw, 120px);
  line-height: 0.85;
  margin-bottom: 14px;
}

.label h3 { font-size: 17px; font-weight: 600; }
.label .traits { color: var(--ink-2); }
.label .mono { color: var(--ink-2); font-size: 13px; margin-top: 2px; }

.label dl {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 6px;
}

.label dl div { display: flex; justify-content: space-between; gap: 16px; }
.label dt { color: var(--ink-3); }
.label dd { text-align: right; }

/* Threshold into the dark room */

.void {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: var(--void);
  opacity: 0;
  pointer-events: none;
}

.threshold { display: none; }

.darkside, .week, .bid, .foot {
  position: relative;
  z-index: 6;
  background: var(--void);
  color: var(--void-ink);
}

/* Dark room */

.darkside {
  padding: clamp(96px, 16vh, 160px) var(--gutter) clamp(72px, 12vh, 120px);
  scroll-margin-top: 0;
}

.darkside > .display { margin-bottom: clamp(32px, 5vh, 64px); }

.ds-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 1440px;
}

.darkside .label .traits, .darkside .label .mono { color: var(--void-ink-2); }
.darkside .label dl { border-top-color: var(--void-rule); }
.darkside .label dt { color: var(--void-ink-2); }

.ds-note {
  margin-top: 14px;
  color: var(--void-ink);
  text-wrap: pretty;
}

.descent {
  margin-top: clamp(72px, 12vh, 128px);
  padding-top: 20px;
  border-top: 1px solid var(--void-rule);
}

.descent-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--void-ink-2);
  margin-bottom: clamp(28px, 4vh, 44px);
}

/* Each day's price sits one step lower than the day before, so the column of numbers falls the way the price does. */
.stairs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0 clamp(8px, 1.2vw, 20px);
  align-items: start;
  --step: clamp(12px, 2.2vw, 30px);
}

.stairs li {
  display: grid;
  gap: 8px;
  margin-top: calc(var(--i) * var(--step));
  padding-top: 12px;
  border-top: 1px solid var(--void-rule);
}

.stair-day { font-family: var(--mono); font-size: 13px; color: var(--void-ink-2); }

.stair-price {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 0.9;
  color: var(--void-ink);
  font-variant-numeric: tabular-nums;
}

.stairs li:last-child { border-top-color: var(--neon); }
.stairs li:last-child .stair-price { color: var(--neon); }
.stair-note { font-family: var(--mono); font-size: 13px; color: var(--neon); }

.descent-note {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 56ch;
  color: var(--void-ink-2);
  font-size: 15px;
}

/* Week */

.week {
  padding: clamp(80px, 14vh, 140px) var(--gutter);
  border-top: 1px solid var(--void-rule);
}

.week .display { margin-bottom: clamp(36px, 6vh, 64px); }

.days-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}

.days-list li {
  padding: 18px 18px 8px 0;
  border-top: 1px solid var(--void-rule);
}

.days-list li + li { padding-left: 18px; border-left: 1px solid var(--void-rule); }
.days-list time { display: block; font-family: var(--mono); font-size: 13px; color: var(--void-ink); margin-bottom: 10px; }
.days-list p { font-size: 15px; color: var(--void-ink-2); text-wrap: pretty; }
.days-list li:first-child time, .days-list li:last-child time { color: var(--neon); }

/* Bid */

.bid {
  padding: clamp(80px, 14vh, 160px) var(--gutter);
  display: grid;
  gap: 18px;
  justify-items: start;
}

.bid h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.92;
  max-width: 14ch;
}

.bid p { color: var(--void-ink-2); max-width: 46ch; font-size: 17px; }
.pill-lg { height: 48px; padding: 0 26px; font-size: 15px; margin-top: 10px; }

.foot {
  padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--void-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  justify-content: space-between;
}

.foot p { font-size: 13px; color: var(--void-ink-2); max-width: 60ch; }

/* Tablet and up */

@media (min-width: 768px) {
  .room { grid-template-columns: minmax(0, 1fr) 260px; align-items: end; gap: 32px; }
  .ds-room { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: 48px; }
  .darkside .art { max-width: 900px; }
}

/* Desktop: the walk becomes horizontal. */

@media (min-width: 1024px) {
  .room .art, .ds-art { width: min(80vh, 58vw); }
  .room { grid-template-columns: auto 280px; gap: clamp(32px, 3vw, 56px); justify-content: start; }
  .ds-room { grid-template-columns: auto 320px; justify-content: start; }
  .darkside .art { max-width: none; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* The section is as tall as the sideways walk is long, and the stage sticks while the track slides. Sticky instead of a JS pin, so nothing switches to fixed positioning mid-scroll. */
  .motion .gallery { height: calc(var(--walk, 0px) + 100dvh); }
  .motion .gallery-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }

  .motion .gallery-track {
    display: flex;
    align-items: center;
    height: 100dvh;
    width: max-content;
    padding: var(--bar-h) 0 0;
    gap: 0;
    will-change: transform;
  }

  .motion .panel {
    width: 34vw;
    padding: 0 4vw 0 var(--gutter);
    align-content: center;
  }

  .motion .room {
    padding: 0 6vw;
    height: 100%;
    align-content: center;
  }

  .motion .room:last-child { padding-right: 14vw; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .threshold {
    display: block;
    position: relative;
    z-index: 6;
    height: 170vh;
  }

  .motion .threshold-text {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: clamp(64px, 12vw, 200px);
    line-height: 1;
    color: var(--ink);
    text-align: center;
    padding: 0 var(--gutter);
  }
}

/* Phones */

@media (max-width: 767px) {
  .hero { min-height: 86svh; }
  .hero-index a, .hero-index li + li a { padding: 12px 0 0; border-left: 0; justify-items: center; text-align: center; }
  .hi-num { font-size: 22px; }
  .hi-piece { display: none; }
  .hi-format { font-size: 10px; }
  .hero-copy { width: calc(100% - (100% / 7)); min-width: 0; }
  .hero-date { font-size: clamp(32px, 10vw, 44px); }

  .stairs { grid-template-columns: minmax(0, 1fr); --step: 0px; }
  .stairs li { grid-template-columns: 64px 1fr auto; align-items: baseline; padding: 10px 0; margin-top: 0; }
  .stair-price { font-size: 40px; padding-left: calc(var(--i) * 3.2vw); }

  .format { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .format-meta { justify-items: start; }

  .label { max-width: none; }

  .days-list { grid-template-columns: minmax(0, 1fr); }
  .days-list li, .days-list li + li { padding: 16px 0; border-left: 0; display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
  .days-list time { margin: 0; }
}