:root {
  /* IBM Plex Mono Inter** practical Scandinavian clarity. Mono** IDs */
  --chalk: #F2EEE4;
  --green: #113C36;
  --orange: #F47A38;
  --teal: #5BB6A9;
  --violet: #2A1E5C;
  --aluminium: #CDD4CF;
  --yellow: #F6D36F;
  --display: 'Bebas Neue', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--green);
  font-family: var(--body);
  overflow-x: hidden;
}

.type-ledger {
  position: fixed;
  left: -999px;
  top: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ambient-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(17,60,54,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,60,54,.08) 1px, transparent 1px),
    radial-gradient(circle at 18% 20%, rgba(91,182,169,.22), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(42,30,92,.14), transparent 32%);
  background-size: 72px 72px, 72px 72px, 100% 100%, 100% 100%;
  z-index: -2;
}

.hall-section {
  min-height: 100vh;
  padding: 6vw;
  position: relative;
}

.paddle-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 30;
}

.paddle {
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 50% 8px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--green);
  background: rgba(242,238,228,.84);
  border: 1px solid var(--aluminium);
  font-family: var(--mono);
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(17,60,54,.12);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.paddle.is-active, .paddle:hover {
  transform: translateX(-8px) rotate(-8deg);
  background: var(--orange);
  color: var(--chalk);
}

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  overflow: hidden;
}

.hero-ledger {
  grid-column: 1 / 5;
  align-self: start;
}

.rail-card, .lot-card, .signal-card, .ledger-sheet, .mosaic-card, .mosaic-core {
  border: 1px solid var(--aluminium);
  background: rgba(242,238,228,.82);
  box-shadow: inset 0 0 0 7px rgba(205,212,207,.28), 0 20px 50px rgba(17,60,54,.12);
  position: relative;
}

.rail-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; }

.lot-id, .stamp, .receipt-strip, .signal-card span, .signal-card em {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.stamp {
  color: var(--orange);
  border: 1px solid var(--orange);
  width: max-content;
  padding: 5px 8px;
  transform: rotate(-1.5deg);
}

.hero-copy { grid-column: 1 / 7; grid-row: 1; z-index: 3; align-self: end; }

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--violet);
}

h1, h2, h3 { margin: 0; }

h1 {
  font-family: var(--display);
  font-size: clamp(6.2rem, 17vw, 17rem);
  line-height: .78;
  letter-spacing: .035em;
  color: var(--green);
}

.intro { max-width: 520px; font-size: 18px; line-height: 1.55; }

.hero-table {
  grid-column: 6 / 13;
  grid-row: 1;
  height: 70vh;
  min-height: 520px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.table-edge {
  position: absolute;
  bottom: 12%;
  width: 88%;
  height: 120px;
  background: linear-gradient(180deg, #CDD4CF, #F2EEE4 64%, rgba(17,60,54,.1));
  border: 1px solid rgba(17,60,54,.14);
  transform: skewX(-12deg);
  box-shadow: 0 35px 50px rgba(17,60,54,.16);
}

.crystal-object {
  width: 310px;
  height: 310px;
  position: relative;
  transform-style: preserve-3d;
  animation: turntable 14s linear infinite;
}

.hero-crystal { filter: drop-shadow(0 34px 40px rgba(42,30,92,.28)); }

.facet, .mini-crystal, .final-seal, .seal {
  position: absolute;
  background: linear-gradient(135deg, rgba(91,182,169,.86), rgba(242,238,228,.52) 35%, rgba(42,30,92,.78));
  clip-path: polygon(50% 0, 100% 25%, 84% 88%, 18% 100%, 0 30%);
  border: 1px solid rgba(242,238,228,.55);
}

.facet-a { inset: 18px 58px 40px 28px; transform: rotateY(22deg) rotateZ(-8deg); }
.facet-b { inset: 56px 18px 28px 94px; transform: rotateY(-36deg) rotateZ(18deg); background: linear-gradient(135deg, rgba(246,211,111,.8), rgba(244,122,56,.58), rgba(42,30,92,.72)); }
.facet-c { inset: 0 86px 105px 92px; transform: translateZ(55px) rotateZ(38deg); background: linear-gradient(135deg, rgba(205,212,207,.86), rgba(91,182,169,.72), rgba(242,238,228,.42)); }

.coil {
  position: absolute;
  border: 5px solid rgba(244,122,56,.7);
  border-left-color: transparent;
  border-radius: 50%;
  width: 92px;
  height: 92px;
  filter: blur(.2px);
}
.coil-one { left: 74px; top: 118px; }
.coil-two { right: 64px; top: 82px; transform: rotate(38deg); }

.shadow-plate {
  width: 280px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(17,60,54,.25), transparent 70%);
  position: absolute;
  bottom: 23%;
}

.ghost-paddle {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50% 50% 50% 16px;
  border: 1px solid var(--aluminium);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  color: var(--violet);
  background: rgba(246,211,111,.22);
  animation: paddleSlide 7s ease-in-out infinite;
}
.ghost-left { left: 3vw; top: 42%; }
.ghost-right { right: 6vw; top: 15%; animation-delay: -3s; }
.hero-receipt { position: absolute; bottom: 7vw; right: 7vw; background: var(--yellow); padding: 12px 24px; }

.section-heading { max-width: 860px; margin-bottom: 42px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
h2 { font-family: var(--display); font-size: clamp(4rem, 8vw, 8.5rem); line-height: .85; letter-spacing: .035em; }

.lot-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.lot-card { min-height: 260px; padding: 24px; overflow: hidden; }
.lot-card::before, .ledger-sheet::before, .signal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--green) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: .06;
}
.lot-card.large { grid-column: span 5; grid-row: span 2; min-height: 550px; }
.lot-card.tall { grid-column: span 3; grid-row: span 2; }
.lot-card.wide { grid-column: span 6; }
.lot-card.receipt { grid-column: span 2; min-height: 260px; background: rgba(205,212,207,.5); }
.lot-card:not(.large):not(.tall):not(.wide):not(.receipt) { grid-column: span 4; }
.lot-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; position: relative; z-index: 2; }
.lot-card h3 { font-family: var(--display); font-size: 2.7rem; letter-spacing: .035em; margin-top: 26px; }
.lot-card p { line-height: 1.55; max-width: 420px; position: relative; z-index: 2; }

.mini-crystal { width: 138px; height: 138px; right: 28px; bottom: 32px; }
.mini-crystal.plastic { background: linear-gradient(135deg, rgba(91,182,169,.76), rgba(242,238,228,.55), rgba(42,30,92,.66)); }
.mini-crystal.amber { background: linear-gradient(135deg, rgba(246,211,111,.85), rgba(244,122,56,.68), rgba(42,30,92,.58)); }
.seal { width: 70px; height: 70px; right: 18px; top: 18px; }
.led-number, .pulse-number {
  font-family: var(--mono);
  font-size: 3.4rem;
  color: var(--orange);
  text-shadow: 0 0 10px rgba(244,122,56,.62);
  animation: ledFlicker 2.8s steps(2, end) infinite;
}
.yellow { background: rgba(246,211,111,.62) !important; }

.diagram { height: 190px; margin-top: 34px; position: relative; }
.diagram span, .diagram b { position: absolute; border: 2px solid var(--teal); width: 72px; height: 72px; transform: rotate(45deg); }
.diagram span { left: 4px; top: 18px; }
.diagram b { right: 12px; bottom: 12px; border-color: var(--orange); }
.diagram i { position: absolute; height: 2px; left: 72px; right: 70px; top: 86px; background: var(--violet); }
.diagram i::after { content: ''; position: absolute; right: -7px; top: -5px; border-left: 10px solid var(--violet); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.glass-row { display: flex; gap: 18px; margin-top: 34px; }
.glass-row span { height: 108px; flex: 1; clip-path: polygon(50% 0, 100% 35%, 78% 100%, 12% 82%, 0 22%); background: linear-gradient(135deg, rgba(91,182,169,.75), rgba(205,212,207,.42), rgba(42,30,92,.64)); }

.signal-corridor { background: linear-gradient(180deg, var(--chalk), rgba(17,60,54,.08), var(--chalk)); }
.signal-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: center; margin-top: 64px; }
.signal-card { padding: 28px 18px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; background: rgba(17,60,54,.9); color: var(--chalk); }
.signal-card.main { min-height: 310px; background: var(--violet); }
.signal-card em { color: var(--aluminium); font-style: normal; }
.pulse-line { height: 2px; background: rgba(205,212,207,.7); margin: 54px auto 0; max-width: 900px; overflow: hidden; }
.pulse-line span { display: block; height: 100%; width: 30%; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: signalMove 3.8s ease-in-out infinite; }

.mosaic { min-height: 620px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 90px); gap: 18px; }
.mosaic-card { display: grid; place-items: center; overflow: hidden; }
.mosaic-card span { font-family: var(--mono); text-transform: uppercase; color: var(--chalk); background: rgba(17,60,54,.75); padding: 8px 12px; }
.m1 { grid-column: 1 / 6; grid-row: 1 / 4; background: linear-gradient(135deg, rgba(91,182,169,.7), rgba(42,30,92,.55)); }
.m2 { grid-column: 6 / 9; grid-row: 1 / 3; background: linear-gradient(135deg, rgba(246,211,111,.78), rgba(244,122,56,.64)); }
.m3 { grid-column: 9 / 13; grid-row: 1 / 5; background: linear-gradient(135deg, rgba(205,212,207,.9), rgba(42,30,92,.55)); }
.m4 { grid-column: 1 / 5; grid-row: 4 / 7; background: linear-gradient(135deg, rgba(244,122,56,.55), rgba(17,60,54,.7)); }
.mosaic-core { grid-column: 5 / 10; grid-row: 3 / 7; display: grid; place-items: center; padding: 28px; text-align: center; }
.small-crystal { width: 210px; height: 210px; }

.closing-ledger { display: grid; place-items: center; }
.ledger-sheet { width: min(900px, 88vw); min-height: 70vh; padding: clamp(30px, 6vw, 78px); background: rgba(242,238,228,.94); }
.ledger-sheet h2 { margin-top: 42px; }
.ledger-lines { margin-top: 46px; border-top: 1px solid var(--aluminium); }
.ledger-lines p { display: flex; justify-content: space-between; gap: 26px; border-bottom: 1px solid var(--aluminium); padding: 18px 0; font-family: var(--mono); text-transform: uppercase; }
.ledger-lines span { color: var(--orange); }
.final-seal { width: 116px; height: 116px; right: 52px; bottom: 46px; filter: drop-shadow(0 0 22px rgba(91,182,169,.45)); }

.reveal { opacity: 0; transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.from-left { transform: translateX(-72px); }
.from-right { transform: translateX(72px); }
.from-top { transform: translateY(-72px); }
.from-bottom { transform: translateY(72px); }
.reveal.is-visible { opacity: 1; transform: translate(0,0); }

@keyframes turntable { to { transform: rotateY(360deg) rotateX(5deg); } }
@keyframes paddleSlide { 0%,100% { transform: translateX(0) rotate(-8deg); opacity: .44; } 50% { transform: translateX(22px) rotate(6deg); opacity: .9; } }
@keyframes ledFlicker { 0%, 72%, 100% { opacity: 1; } 74% { opacity: .58; } 78% { opacity: .92; } }
@keyframes signalMove { 0% { transform: translateX(-105%); } 100% { transform: translateX(340%); } }

@media (max-width: 900px) {
  .paddle-nav { display: none; }
  .hall-section { padding: 28px; }
  .hero, .lot-grid, .signal-band, .mosaic { display: block; }
  .hero-table { height: 420px; min-height: 420px; }
  .hero-copy { margin-top: -60px; }
  .lot-card, .signal-card, .mosaic-card, .mosaic-core { margin-bottom: 18px; min-height: 220px; }
  .mosaic-card, .mosaic-core { height: 240px; }
  h1 { font-size: 27vw; }
  h2 { font-size: 18vw; }
}