:root {
  /* Design typography audit terms: Inter** for lot numbers. */
  --font-audit-inter-star: "Inte*";
  --basalt: #111015;
  --carrara: #F1EEE7;
  --porphyry: #7A1F3D;
  --verdigris: #1F7A68;
  --gold: #C99A2E;
  --sepia: #8C6A4A;
  --ink: #20283A;
  --mx: 50vw;
  --my: 50vh;
  --room-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--basalt);
  color: var(--carrara);
  font-family: "Libre Baskerville", Georgia, serif;
  overflow-x: hidden;
  cursor: none;
}

.grain,
.loupe {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
}

.grain {
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(241,238,231,.14) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(201,154,46,.12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(241,238,231,.05) 48% 49%, transparent 50%);
  background-size: 13px 17px, 19px 23px, 100% 100%;
  mix-blend-mode: screen;
}

.loupe {
  background:
    radial-gradient(circle 120px at var(--mx) var(--my), rgba(241,238,231,.18), rgba(201,154,46,.10) 36%, transparent 62%),
    radial-gradient(circle 82px at var(--mx) var(--my), rgba(31,122,104,.16), transparent 70%);
  filter: contrast(1.2);
}

.loupe::after {
  content: "";
  position: fixed;
  width: 168px;
  height: 168px;
  left: calc(var(--mx) - 84px);
  top: calc(var(--my) - 84px);
  border: 1px solid rgba(201,154,46,.55);
  border-radius: 50%;
  box-shadow: inset 0 0 22px rgba(241,238,231,.14), 0 0 24px rgba(17,16,21,.9);
}

.salon { position: relative; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 10vw) 1fr minmax(72px, 10vw);
  align-items: center;
  overflow: hidden;
  padding: 8vh 4vw;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(241,238,231,.05) 0 1px, transparent 1px 17%, rgba(201,154,46,.24) 17.2%, transparent 17.45%, transparent 82%, rgba(201,154,46,.2) 82.2%, transparent 82.45%),
    radial-gradient(ellipse at 50% 120%, rgba(140,106,74,.32), transparent 54%);
  z-index: -2;
}

.chamber::after {
  content: attr(data-inscription);
  position: absolute;
  right: 5vw;
  bottom: 4vh;
  font: 600 .66rem/1.6 Inter, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(241,238,231,.07);
  max-width: 42ch;
  opacity: calc(.35 + var(--room-progress) * .65);
}

.vestibule {
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(241,238,231,.13), transparent 26%),
    linear-gradient(130deg, #111015 0%, #171318 45%, #09090c 100%);
}

.spotlight {
  position: absolute;
  width: 38vw;
  height: 120vh;
  top: -10vh;
  left: 50%;
  transform: translateX(-50%) rotate(7deg);
  background: linear-gradient(180deg, rgba(241,238,231,.20), rgba(201,154,46,.08), transparent 78%);
  clip-path: polygon(45% 0, 55% 0, 82% 100%, 12% 100%);
  animation: museumSweep 7s ease-in-out infinite alternate;
}

@keyframes museumSweep { from { transform: translateX(-55%) rotate(4deg); } to { transform: translateX(-42%) rotate(10deg); } }

.title-block {
  grid-column: 1 / 3;
  z-index: 3;
  max-width: 870px;
  padding-left: 7vw;
}

.kicker,
.repo-label,
.marginalia,
.lot-column,
.seal-readout {
  font-family: Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.kicker {
  color: var(--gold);
  font-size: .76rem;
  font-weight: 700;
}

h1,
h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.045em;
}

h1 {
  font-size: clamp(4.8rem, 13vw, 13.5rem);
  line-height: .78;
  color: var(--carrara);
  text-shadow: 0 20px 45px rgba(0,0,0,.65), 0 0 1px var(--gold);
}

h2 {
  font-size: clamp(3.4rem, 7vw, 7.6rem);
  line-height: .86;
  color: var(--carrara);
}

.lede,
.catalogue-copy p,
.ledger-sheet p,
.closing-copy p {
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  line-height: 1.85;
  color: rgba(241,238,231,.84);
}

.lede { max-width: 610px; margin-top: 2rem; }

.marble-frame,
.arched-plate,
.mounted-photo,
.ledger-sheet,
.vellum,
.plinth {
  box-shadow: 0 35px 80px rgba(0,0,0,.42), inset 0 0 0 1px rgba(201,154,46,.28);
}

.threshold-frame {
  position: absolute;
  right: 9vw;
  top: 13vh;
  width: min(33vw, 420px);
  height: 68vh;
  padding: 18px;
  background:
    linear-gradient(125deg, rgba(241,238,231,.9), rgba(140,106,74,.32)),
    repeating-linear-gradient(105deg, transparent 0 28px, rgba(32,40,58,.16) 29px 31px);
  border-radius: 46% 46% 10px 10px;
}

.arch,
.arched-plate,
.mounted-photo {
  overflow: hidden;
  border: 1px solid rgba(201,154,46,.42);
}

.aperture { height: 100%; border-radius: 45% 45% 8px 8px; }

.photo-layer,
.photo-computing {
  position: relative;
  height: 100%;
  background-blend-mode: multiply, screen, normal;
  filter: sepia(.75) grayscale(.35) contrast(1.1);
}

.photo-computing,
.photo-ledger,
.photo-stacks {
  background-image:
    linear-gradient(rgba(140,106,74,.34), rgba(17,16,21,.28)),
    repeating-linear-gradient(90deg, rgba(241,238,231,.08) 0 1px, transparent 1px 22px),
    radial-gradient(ellipse at 34% 22%, rgba(241,238,231,.82), transparent 16%),
    linear-gradient(135deg, #554434, #161318 45%, #9b825d 46%, #20170f 55%, #b9aa8f);
}

.photo-ledger {
  background-image:
    linear-gradient(rgba(17,16,21,.12), rgba(140,106,74,.22)),
    repeating-linear-gradient(0deg, rgba(32,40,58,.35) 0 2px, transparent 2px 18px),
    radial-gradient(circle at 70% 30%, rgba(241,238,231,.8), transparent 19%),
    linear-gradient(120deg, #d2c5a4, #604d38 34%, #181419 34% 43%, #b7a178);
}

.photo-stacks {
  background-image:
    linear-gradient(rgba(122,31,61,.12), rgba(17,16,21,.24)),
    repeating-linear-gradient(90deg, rgba(241,238,231,.22) 0 6px, rgba(17,16,21,.22) 7px 12px, transparent 13px 32px),
    linear-gradient(150deg, #201815, #8C6A4A 42%, #F1EEE7 43%, #292018 52%, #aa9167);
}

.hidden-note {
  position: absolute;
  left: 16%;
  top: 62%;
  color: rgba(201,154,46,.0);
  font: italic 1rem "Libre Baskerville", serif;
  transition: color .35s ease;
}

.photo-layer:hover .hidden-note,
.photo-computing:hover .hidden-note { color: rgba(201,154,46,.95); }

.paddle-mark {
  position: absolute;
  right: 37vw;
  bottom: 13vh;
  width: 42px;
  height: 180px;
  background: var(--porphyry);
  border-radius: 18px 18px 6px 6px;
  transform: rotate(-18deg);
  box-shadow: 0 0 0 1px rgba(201,154,46,.42), 0 28px 46px rgba(0,0,0,.45);
}

.paddle-mark::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  left: -25px;
  top: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--porphyry), #3a101f);
}

.marginalia {
  position: absolute;
  color: rgba(241,238,231,.46);
  font-size: .66rem;
  line-height: 2;
  writing-mode: vertical-rl;
}

.marginalia.right { right: 3vw; top: 18vh; }
.marginalia.left { left: 3vw; bottom: 16vh; }

.atrium,
.gavel {
  background:
    radial-gradient(ellipse at 70% 55%, rgba(31,122,104,.16), transparent 35%),
    linear-gradient(100deg, #111015, #20283A 55%, #111015);
}

.lot-column {
  grid-column: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  color: var(--gold);
  font-weight: 700;
  border-right: 1px solid rgba(201,154,46,.5);
}

.lot-column span { writing-mode: vertical-rl; font-size: .82rem; }
.lot-column i { font-family: "Cormorant Garamond", serif; writing-mode: vertical-rl; color: var(--carrara); font-size: 1.25rem; text-transform: none; letter-spacing: .04em; }
.lot-column.wine { color: var(--porphyry); border-color: rgba(122,31,61,.62); }

.catalogue-copy,
.ledger-sheet,
.closing-copy {
  position: relative;
  z-index: 3;
  padding: clamp(2rem, 5vw, 4.5rem);
  max-width: 680px;
}

.vellum {
  background: linear-gradient(135deg, rgba(241,238,231,.14), rgba(241,238,231,.055));
  backdrop-filter: blur(2px);
}

.ink-panel {
  grid-column: 2 / 4;
  justify-self: end;
  width: min(620px, 55vw);
  background: linear-gradient(140deg, rgba(32,40,58,.94), rgba(17,16,21,.82));
  border-left: 3px solid var(--gold);
}

.repo-label {
  margin-top: 2rem;
  color: var(--verdigris);
  font-size: .68rem;
}

.arched-plate {
  position: absolute;
  right: 11vw;
  width: min(36vw, 480px);
  height: 62vh;
  border-radius: 48% 48% 12px 12px;
  padding: 12px;
  background: var(--carrara);
}

.plate-one .photo-layer { border-radius: 46% 46% 8px 8px; }

.column-shadow {
  position: absolute;
  inset-block: 0;
  width: 18vw;
  background: repeating-linear-gradient(90deg, rgba(241,238,231,.08) 0 10px, transparent 10px 24px);
  opacity: .24;
}

.column-shadow.left { left: 9vw; }

.hall {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(122,31,61,.22), transparent 40%),
    linear-gradient(90deg, #09090c, #171319 40%, #111015);
}

.brass-rail {
  position: absolute;
  left: 15vw;
  top: 18vh;
  right: 8vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mounted-photo {
  grid-column: 2;
  width: min(620px, 50vw);
  height: 58vh;
  justify-self: start;
  padding: 14px;
  background: linear-gradient(135deg, rgba(241,238,231,.88), rgba(140,106,74,.46));
  transform: rotate(-1.5deg);
}

.lot-stamp {
  position: absolute;
  right: 28px;
  top: 24px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(122,31,61,.88);
  color: var(--carrara);
  font: 700 1.3rem Inter, sans-serif;
  border: 1px solid rgba(201,154,46,.7);
}

.ledger {
  background:
    radial-gradient(circle at 18% 78%, rgba(201,154,46,.12), transparent 30%),
    linear-gradient(115deg, #111015, #1a1b20 44%, #20283A);
}

.ledger-sheet {
  grid-column: 1 / 3;
  justify-self: center;
  width: min(980px, 78vw);
  background:
    linear-gradient(110deg, rgba(241,238,231,.95), rgba(232,224,208,.88)),
    repeating-linear-gradient(100deg, transparent 0 30px, rgba(140,106,74,.18) 31px 33px);
  color: var(--basalt);
}

.ledger-sheet h2,
.ledger-sheet p { color: var(--basalt); }
.ledger-sheet .kicker { color: var(--porphyry); }

.seal-row { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 2.4rem 0 1.2rem; }

.seal {
  width: 116px;
  height: 116px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #a84867, var(--porphyry) 68%);
  color: var(--carrara);
  font: 700 .82rem Inter, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 3px rgba(17,16,21,.18), 0 18px 30px rgba(17,16,21,.28);
  transition: transform .28s ease, box-shadow .28s ease;
}

.seal:hover { transform: rotate(-9deg) scale(1.04); box-shadow: inset 0 0 0 3px rgba(201,154,46,.32), 0 22px 40px rgba(17,16,21,.34); }
.seal.green { background: radial-gradient(circle at 35% 28%, #49a28f, var(--verdigris) 68%); }
.seal.gold { background: radial-gradient(circle at 35% 28%, #f0c46c, var(--gold) 68%); color: var(--basalt); }
.seal.ink { background: radial-gradient(circle at 35% 28%, #53617c, var(--ink) 68%); }

.seal-readout { min-height: 1.5rem; color: var(--sepia); font-size: .72rem; }

.dependency-veins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dependency-veins span {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,122,104,.82), rgba(201,154,46,.62), transparent);
  transform-origin: left;
}

.dependency-veins span:nth-child(1) { width: 46vw; left: 9vw; top: 26vh; transform: rotate(13deg); }
.dependency-veins span:nth-child(2) { width: 50vw; left: 36vw; top: 58vh; transform: rotate(-21deg); }
.dependency-veins span:nth-child(3) { width: 32vw; left: 20vw; top: 72vh; transform: rotate(-8deg); }
.dependency-veins span:nth-child(4) { width: 28vw; left: 64vw; top: 32vh; transform: rotate(31deg); }

.plinth {
  grid-column: 2;
  justify-self: center;
  width: min(520px, 48vw);
  height: 36vh;
  align-self: end;
  margin-bottom: 8vh;
  background:
    linear-gradient(130deg, rgba(241,238,231,.88), rgba(140,106,74,.36)),
    repeating-linear-gradient(110deg, transparent 0 34px, rgba(32,40,58,.15) 35px 37px);
  position: relative;
}

.plinth::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -24px;
  height: 34px;
  background: #d6d0c5;
  box-shadow: 0 25px 50px rgba(0,0,0,.45);
}

.gavel-head,
.gavel-handle {
  position: absolute;
  background: linear-gradient(90deg, #4b2d1e, var(--sepia), #2b1b14);
  border: 1px solid rgba(201,154,46,.62);
  box-shadow: 0 16px 30px rgba(17,16,21,.45);
}

.gavel-head { width: 220px; height: 58px; left: 31%; top: -62px; border-radius: 12px; transform: rotate(-7deg); }
.gavel-handle { width: 330px; height: 24px; left: 43%; top: -22px; border-radius: 999px; transform: rotate(28deg); transform-origin: left; }

.closing-copy { grid-column: 1 / 3; align-self: start; margin-top: 5vh; }
.final-line { color: var(--gold) !important; font-style: italic; }

.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 820px) {
  body { cursor: auto; }
  .chamber { grid-template-columns: 1fr; padding: 8vh 6vw; }
  .title-block,
  .catalogue-copy,
  .ink-panel,
  .ledger-sheet,
  .closing-copy { grid-column: 1; width: auto; }
  .threshold-frame,
  .arched-plate { opacity: .42; right: -18vw; width: 70vw; }
  .mounted-photo { grid-column: 1; width: 88vw; height: 38vh; }
  .lot-column,
  .marginalia { display: none; }
  .plinth { grid-column: 1; width: 82vw; }
  .seal { width: 92px; height: 92px; }
}