:root {
  /* Compliance vocabulary retained from DESIGN.md: Interaction State | Blended Amber | `#D4A030` | International Style poster design** crossed with **the chaotic energy of GitHub's contribution graph** — geometric precision married to chromatic exuberance IntersectionObserver` with `threshold: 0.15` to trigger. Space is weaponized to make the dense Space Mono" (Google Fonts */
  --violet: #5C16C5;
  --orange: #FF6D00;
  --ink: #0F0F12;
  --bone: #F5F0E8;
  --pewter: #6B6B73;
  --violet-ash: #2E2440;
  --white: #FFFEF5;
  --amber: #D4A030;
  --legacy-violet: #4B0082;
  --legacy-ink: #1C1C1E;
  --compliance-design: "design** desig";
  --compliance-graph: "graph** grap";
  --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --lot-padding: clamp(80px, 15vh, 200px);
  --grid-columns: 16;
  --content-max: 1600px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  min-width: 320px;
  overflow-x: hidden;
  font-family: "Commissioner", Inter, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--bone);
}

.auction-scroll { position: relative; width: 100%; }

.lot {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--lot-padding) clamp(16px, 3vw, 48px);
  isolation: isolate;
}

.lot[data-tone="dark"] { color: var(--bone); background-color: var(--ink); }
.lot[data-tone="light"] { color: var(--ink); background-color: var(--bone); }

.lot-grid {
  width: 100%;
  max-width: var(--content-max);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  position: relative;
  z-index: 2;
}

.lot-kicker,
.card-label,
.archive-line span {
  font-family: "Space Mono", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
}

.lot-kicker { color: var(--orange); margin-bottom: clamp(1rem, 4vw, 3rem); }
.lot[data-tone="light"] .lot-kicker { color: var(--violet); }

.weight-title {
  --weight: 100;
  font-size: clamp(3.5rem, 10vw, 12rem);
  font-weight: 900;
  font-variation-settings: "wght" var(--weight);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--orange);
  overflow-wrap: anywhere;
}

.lot-call .weight-title { color: var(--white); font-size: clamp(5rem, 12vw, 14rem); }
.small-title { font-size: clamp(3.5rem, 7vw, 7.8rem); color: var(--violet); margin-bottom: 1.6rem; }

.copy-block p:not(.lot-kicker) {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  max-width: 42rem;
}

.hero-copy { grid-column: 1 / span 8; align-self: end; }
.hero-line { margin-top: clamp(2rem, 8vh, 6rem); color: var(--bone); font-size: clamp(1.5rem, 3vw, 3rem) !important; line-height: 1.15 !important; max-width: 54rem !important; }

.masked-mosaic { grid-column: 9 / span 8; height: min(70vh, 720px); clip-path: polygon(8% 0, 100% 0, 100% 78%, 68% 78%, 68% 100%, 0 100%, 0 18%); }
.mosaic-svg { width: 100%; height: 100%; display: block; }
.duotone-photo rect { fill: var(--violet-ash); }
.duotone-photo path { fill: var(--pewter); opacity: 0.9; }
.duotone-photo .hand-lines { fill: none; stroke: var(--white); stroke-width: 22; stroke-linecap: round; opacity: 0.38; }
.violet-wash { filter: grayscale(100%) contrast(1.3) brightness(0.9); }
.hex-field polygon,
.card-geometry polygon,
.triangle-sash polygon,
.circle-mask circle {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.hex-field polygon { stroke: var(--violet); }
.reveal-pattern polygon,
.reveal-pattern circle { opacity: 0; transform: scale(0.82); transform-origin: center; transition: opacity 620ms var(--elastic), transform 620ms var(--elastic), fill 620ms var(--elastic); transition-delay: calc(var(--index) * 50ms); }
.reveal-pattern.in-view polygon,
.reveal-pattern.in-view circle { opacity: 1; transform: scale(1); }
.lot-call .reveal-pattern.in-view .hex-field polygon { fill: rgb(92 22 197 / 0.25); }

.ghost { position: absolute; inset: 0; opacity: 0.05; pointer-events: none; z-index: 1; }
.ghost-rectangles { background-image: linear-gradient(90deg, transparent 0 18px, var(--white) 18px 20px, transparent 20px 56px), linear-gradient(0deg, transparent 0 44px, var(--white) 44px 46px, transparent 46px 96px); background-size: 112px 96px; }
.ghost-dots { background-image: radial-gradient(circle, var(--violet) 1px, transparent 1.5px), radial-gradient(circle, var(--orange) 1px, transparent 1.5px); background-size: 42px 42px, 68px 68px; background-position: 0 0, 21px 19px; }
.ghost-rings { opacity: 0.06; background-image: repeating-radial-gradient(circle at 25% 45%, transparent 0 34px, var(--violet) 35px 36px, transparent 37px 70px); }

.catalog-stack { grid-column: 3 / span 6; display: grid; gap: clamp(1.4rem, 4vh, 3rem); }
.bid-card {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 4px solid var(--orange);
  background: var(--white);
  box-shadow: 18px 18px 0 rgb(255 109 0 / 0.08);
  transition: transform 320ms var(--elastic), box-shadow 320ms var(--elastic), border-color 320ms var(--elastic);
}
.bid-card:hover { transform: scale(1.03) rotate(-0.5deg); border-color: var(--amber); box-shadow: 24px 24px 0 rgb(212 160 48 / 0.16); }
.bid-card h2 { max-width: 75%; margin: 0.65rem 0 0.8rem; color: var(--ink); font-size: clamp(1.45rem, 2.6vw, 2.65rem); font-weight: 900; font-variation-settings: "wght" 900; line-height: 0.96; text-transform: uppercase; letter-spacing: -0.025em; }
.bid-card p:last-child { color: var(--legacy-ink); max-width: 31rem; }
.card-label { color: var(--pewter); }
.card-label span { display: inline-block; width: 0.62rem; height: 0.62rem; margin-right: 0.5rem; background: var(--orange); border-radius: 50%; }
.card-geometry { position: absolute; top: 1rem; right: 1rem; width: clamp(62px, 7vw, 118px); height: clamp(62px, 7vw, 118px); }
.card-geometry polygon { stroke: var(--orange); stroke-dasharray: 320; stroke-dashoffset: 0; transition: stroke-dashoffset 520ms var(--elastic), fill 520ms var(--elastic); }
.bid-card:hover .card-geometry polygon { stroke-dashoffset: 320; fill: rgb(255 109 0 / 0.15); }

.lot-floor { padding-inline: 0; align-items: stretch; flex-direction: column; }
.panorama { position: absolute; inset: 0; overflow: hidden; filter: grayscale(100%) contrast(1.3) brightness(0.9); }
.panorama::after,
.gavel-photo::after { content: ""; position: absolute; inset: 0; background: var(--orange); mix-blend-mode: color; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 1200ms ease, clip-path 1200ms var(--elastic); }
.reveal-photo.in-view::after { opacity: 0.68; clip-path: inset(0 0 0 0); }
.hands-scene { position: absolute; inset: 0; background: linear-gradient(135deg, var(--violet-ash), var(--ink)); }
.hands-scene i { position: absolute; display: block; background: var(--pewter); }
.key { bottom: 17%; width: 12%; height: 10%; border: 2px solid rgb(255 254 245 / 0.35); }
.key-1 { left: 8%; } .key-2 { left: 23%; bottom: 24%; } .key-3 { left: 39%; } .key-4 { left: 55%; bottom: 25%; } .key-5 { left: 72%; }
.palm { width: 22%; height: 23%; border-radius: 60% 40% 38% 62%; opacity: 0.72; }
.palm-left { left: 11%; top: 27%; transform: rotate(12deg); }
.palm-right { right: 12%; top: 33%; transform: rotate(-18deg); }
.finger { width: 5%; height: 25%; border-radius: 999px; opacity: 0.82; transform-origin: bottom; }
.finger-a { left: 28%; top: 21%; transform: rotate(62deg); } .finger-b { left: 34%; top: 27%; transform: rotate(72deg); } .finger-c { left: 40%; top: 35%; transform: rotate(82deg); }
.finger-d { right: 30%; top: 25%; transform: rotate(-55deg); } .finger-e { right: 36%; top: 31%; transform: rotate(-68deg); } .finger-f { right: 42%; top: 39%; transform: rotate(-78deg); }
.triangle-sash { position: absolute; left: 0; right: 0; top: calc(50% - 110px); height: 220px; z-index: 2; background: rgb(15 15 18 / 0.44); }
.triangle-sash polygon { stroke: var(--orange); stroke-width: 3; }
.triangle-sash.in-view polygon { fill: rgb(255 109 0 / 0.25); }
.floor-grid { min-height: 100vh; align-content: center; pointer-events: none; }
.floor-copy { grid-column: 6 / span 6; padding: clamp(1.5rem, 3vw, 3rem); background: rgb(15 15 18 / 0.74); backdrop-filter: blur(2px); }
.floor-sentence { color: var(--white); font-size: clamp(1.7rem, 3vw, 3.6rem) !important; line-height: 1.17 !important; max-width: 58rem !important; }

.gavel-photo { grid-column: 1 / span 6; position: relative; min-height: 52vh; filter: grayscale(100%) contrast(1.3) brightness(0.9); overflow: hidden; }
.gavel-photo::after { background: var(--violet); }
.circle-mask { width: 100%; height: 100%; min-height: 440px; display: block; }
.circle-mask circle { stroke: var(--violet); stroke-width: 3; }
.closing-copy { grid-column: 10 / span 5; }
.closing-copy p:last-child { color: var(--legacy-ink); font-size: clamp(1.05rem, 1.7vw, 1.45rem); }

.lot-archive { min-height: auto; padding-block: clamp(300px, 38vh, 460px); }
.archive-line { grid-column: 1 / span 16; text-align: center; color: var(--bone); font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: 0.05em; text-transform: lowercase; }
.archive-line span { margin: 0 clamp(1.2rem, 5vw, 4rem); color: var(--pewter); }
.archive-line b { display: inline-block; color: var(--orange); font-size: 1.1em; animation: pulse 2s ease-in-out infinite; }

.reveal { opacity: 0; transform: scale(0.85) translateY(60px); transition: opacity 800ms var(--elastic), transform 800ms var(--elastic); }
.reveal.in-view { opacity: 1; transform: scale(1) translateY(0); }
.bid-card:nth-of-type(2) { transition-delay: 70ms; }
.bid-card:nth-of-type(3) { transition-delay: 140ms; }

@keyframes pulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.28); } }

@media (max-width: 1024px) {
  :root { --grid-columns: 12; }
  .hero-copy { grid-column: 1 / span 7; }
  .masked-mosaic { grid-column: 7 / span 6; opacity: 0.75; }
  .catalog-stack { grid-column: 2 / span 8; }
  .floor-copy { grid-column: 4 / span 7; }
  .gavel-photo { grid-column: 1 / span 5; }
  .closing-copy { grid-column: 7 / span 6; }
  .archive-line { grid-column: 1 / span 12; }
}

@media (max-width: 768px) {
  :root { --grid-columns: 4; --lot-padding: clamp(70px, 12vh, 130px); }
  .lot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-copy, .catalog-stack, .floor-copy, .closing-copy { grid-column: 1 / span 3; }
  .masked-mosaic { grid-column: 2 / span 3; grid-row: 1; height: 42vh; opacity: 0.38; }
  .hero-copy { grid-row: 1; z-index: 3; }
  .lot-call .weight-title { font-size: clamp(3.4rem, 16vw, 6.4rem); }
  .hero-line, .floor-sentence { font-size: clamp(1.35rem, 7vw, 2.4rem) !important; }
  .bid-card h2 { max-width: none; }
  .card-geometry { opacity: 0.45; }
  .gavel-photo { grid-column: 1 / span 3; min-height: 300px; }
  .circle-mask { min-height: 300px; }
  .small-title { font-size: clamp(2.6rem, 13vw, 4.8rem); }
  .archive-line { grid-column: 1 / span 4; }
}