:root {
  /* IBM Plex Mono* Mono** compliance marker for stamped inventory lot codes. */
  --lampblack: #070604;
  --oxide: #101812;
  --umber: #4A2118;
  --bone: #E8D8B7;
  --gold: #B48A3C;
  --vermilion: #C4382B;
  --ash: #8D877A;
  --display: "Libre Baskerville", Baskerville, Georgia, serif;
  --editorial: "Cormorant Garamond", Garamond, Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--bone);
  background: var(--lampblack);
  font-family: var(--editorial);
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(180, 138, 60, 0.16), transparent 22rem),
    radial-gradient(circle at 20% 10%, rgba(74, 33, 24, 0.55), transparent 28rem),
    linear-gradient(135deg, #070604 0%, #101812 48%, #070604 100%);
  pointer-events: none;
  z-index: -4;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  z-index: -2;
  background-image:
    repeating-radial-gradient(circle at 30% 40%, rgba(232, 216, 183, .06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(115deg, rgba(74, 33, 24, .26) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(18deg, rgba(180, 138, 60, .08) 0 1px, transparent 1px 12px);
  mix-blend-mode: screen;
  animation: leatherBreath 8s ease-in-out infinite alternate;
}

.loupe {
  position: fixed;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(180, 138, 60, .9);
  background: radial-gradient(circle, rgba(232, 216, 183, .18), rgba(180, 138, 60, .12) 48%, rgba(196, 56, 43, .05) 70%, transparent 72%);
  box-shadow: 0 0 28px rgba(180, 138, 60, .32), inset 0 0 18px rgba(196, 56, 43, .2);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 20;
  display: grid;
  place-items: center;
  transition: width .25s ease, height .25s ease, border-color .25s ease;
}

.loupe span {
  color: var(--vermilion);
  font: 600 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .84;
  text-align: center;
}

.loupe.active { width: 104px; height: 104px; border-color: var(--vermilion); }

.ledger { position: relative; min-height: 100vh; }

.act {
  position: relative;
  min-height: 100vh;
  padding: clamp(34px, 6vw, 84px);
  border-bottom: 1px solid rgba(180, 138, 60, .24);
  isolation: isolate;
}

.act::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(180, 138, 60, .18);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  pointer-events: none;
  z-index: -1;
}

.kicker, .lot, .mono, .balcony-strip, .lot-tab, .seal-button {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.kicker { color: var(--gold); font-size: 12px; margin: 0 0 16px; }

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.045em;
  margin: 0;
  color: var(--bone);
  text-shadow: 0 2px 0 var(--umber), 0 0 30px rgba(180, 138, 60, .16);
}

h1 { font-size: clamp(54px, 10vw, 136px); }
h2 { font-size: clamp(46px, 8vw, 112px); }
p { font-size: clamp(20px, 2.1vw, 31px); line-height: 1.12; }

.act-opening {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(460px, 1.22fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  background: radial-gradient(ellipse at 55% 45%, rgba(74, 33, 24, .72), transparent 58%);
}

.opening-copy { transform: rotate(-2deg); max-width: 590px; }
.lede { color: var(--ash); max-width: 520px; font-style: italic; }

.table-markings { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .46; }
.chalk-line { position: absolute; height: 1px; width: 72vw; background: linear-gradient(90deg, transparent, var(--ash), transparent); transform-origin: left center; }
.line-a { top: 21%; left: 12%; transform: rotate(22deg); }
.line-b { bottom: 28%; left: 4%; transform: rotate(-17deg); }
.line-c { top: 54%; right: -24%; transform: rotate(61deg); }

.honeycomb { position: relative; min-height: 660px; }
.hex {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background:
    linear-gradient(145deg, rgba(232, 216, 183, .06), transparent 45%),
    linear-gradient(35deg, rgba(16, 24, 18, .94), rgba(74, 33, 24, .78));
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 0 1px rgba(180, 138, 60, .5), inset 0 0 42px rgba(7, 6, 4, .72), 0 18px 45px rgba(0,0,0,.42);
  transition: filter .28s ease, transform .28s ease, box-shadow .28s ease;
}

.hex::before {
  content: attr(data-note);
  position: absolute;
  inset: auto 14% 18%;
  color: var(--vermilion);
  font: italic 600 16px/1 var(--editorial);
  opacity: 0;
  transform: translateY(10px) rotate(-2deg);
  transition: opacity .28s ease, transform .28s ease;
}

.hex:hover, .hex.charred {
  filter: saturate(1.25) contrast(1.1);
  transform: rotate(var(--r, 0deg)) scale(1.025);
  box-shadow: inset 0 0 0 2px var(--vermilion), inset 0 0 44px rgba(196, 56, 43, .26), 0 20px 60px rgba(196, 56, 43, .14);
}
.hex:hover::before, .hex.charred::before { opacity: 1; transform: translateY(0) rotate(-2deg); }
.hex b { font-family: var(--display); font-size: clamp(24px, 2.6vw, 42px); line-height: .98; }
.hex small, .hex em { color: var(--ash); font-size: 18px; font-style: italic; }

.hex-xl { width: 370px; height: 420px; }
.hex-md { width: 230px; height: 265px; }
.hex-sm { width: 185px; height: 214px; }
.hex-xs { width: 104px; height: 120px; }
.wordmark { left: 28%; top: 14%; --r: -4deg; animation: assemble 1.25s cubic-bezier(.2,.8,.15,1) both; }
.wordmark strong { display: block; font-family: var(--display); font-size: clamp(34px, 4vw, 58px); letter-spacing: -.05em; }
.wordmark .facet { position: absolute; inset: 0; background: rgba(180, 138, 60, .08); clip-path: inherit; transform: scale(.6); opacity: 0; animation: facetLock 1s ease forwards; }
.wordmark .f2 { animation-delay: .18s; transform-origin: left; }
.wordmark .f3 { animation-delay: .32s; transform-origin: right; }
.hero-honeycomb .hex:nth-child(2) { left: 6%; top: 5%; --r: 5deg; }
.hero-honeycomb .hex:nth-child(3) { right: 12%; top: 9%; --r: -7deg; }
.hero-honeycomb .hex:nth-child(4) { left: 10%; bottom: 9%; --r: -6deg; }
.hero-honeycomb .hex:nth-child(5) { right: 4%; bottom: 15%; --r: 4deg; }
.hero-honeycomb .hex:nth-child(6) { left: 55%; bottom: 1%; --r: 11deg; color: var(--vermilion); }

.act-index { background: linear-gradient(120deg, rgba(16, 24, 18, .9), rgba(7,6,4,.96)); }
.section-seal { position: absolute; right: 9%; top: 10%; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: var(--vermilion); border: 2px solid var(--vermilion); font: 700 44px var(--display); box-shadow: inset 0 0 30px rgba(196,56,43,.25); transform: rotate(-12deg); }
.tilted { transform: rotate(1.5deg); width: min(620px, 86vw); }
.index-lattice { min-height: 560px; margin-top: 34px; position: relative; }
.ledger-slip { position: absolute; background: linear-gradient(100deg, rgba(232,216,183,.92), rgba(232,216,183,.72)); color: var(--umber); padding: 28px 34px; box-shadow: 0 22px 45px rgba(0,0,0,.38); border-left: 6px solid var(--vermilion); transform: rotate(-3deg); }
.ledger-slip.long { left: 28%; top: 2%; width: min(560px, 60vw); }
.ledger-slip p { font-size: 26px; margin: 12px 0 0; }
.paper { left: 9%; top: 26%; background: linear-gradient(135deg, rgba(232,216,183,.9), rgba(180,138,60,.4)); color: var(--lampblack); --r: 3deg; }
.dark { left: 43%; top: 37%; --r: -5deg; }
.red { right: 7%; top: 16%; background: linear-gradient(135deg, rgba(196,56,43,.72), rgba(74,33,24,.92)); --r: 8deg; }
.icon { color: var(--gold); font-size: 38px; }
.marginalia { position: absolute; right: 9%; bottom: 12%; max-width: 390px; color: var(--ash); font: italic 600 30px/1.05 var(--editorial); border-top: 1px solid var(--gold); padding-top: 16px; }

.act-plan { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; background: radial-gradient(circle at 30% 50%, rgba(16,24,18,.9), transparent 55%); }
.chalkboard { min-height: 620px; background: linear-gradient(160deg, rgba(16,24,18,.96), rgba(7,6,4,.86)); border: 1px solid rgba(180,138,60,.42); padding: clamp(30px, 5vw, 70px); box-shadow: inset 0 0 80px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.chalkboard::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(30deg, transparent 48%, rgba(141,135,122,.16) 49%, transparent 50%), linear-gradient(92deg, transparent 48%, rgba(180,138,60,.1) 49%, transparent 50%); background-size: 92px 92px; opacity: .55; }
.chalkboard > * { position: relative; }
.plan-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 38px 0 28px; }
.lot-tab { background: transparent; color: var(--ash); border: 1px solid rgba(180,138,60,.55); padding: 13px 18px; cursor: none; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.lot-tab.active, .lot-tab:hover { color: var(--bone); border-color: var(--vermilion); background: rgba(196,56,43,.14); }
.chamber-copy { border-left: 3px solid var(--gold); padding-left: 22px; max-width: 650px; }
.chamber-copy p { color: var(--bone); }
.equation-field { min-height: 520px; position: relative; font: italic 600 30px var(--editorial); color: rgba(232,216,183,.48); }
.equation-field span { position: absolute; padding: 16px; border-bottom: 1px solid rgba(180,138,60,.3); }
.equation-field span:nth-child(1) { top: 12%; left: 0; transform: rotate(12deg); }
.equation-field span:nth-child(2) { top: 46%; right: 6%; transform: rotate(-8deg); }
.equation-field span:nth-child(3) { bottom: 15%; left: 11%; transform: rotate(4deg); color: var(--vermilion); }

.act-auction { background: linear-gradient(180deg, rgba(74,33,24,.36), rgba(7,6,4,.96)); overflow: hidden; }
.balcony-strip { display: flex; gap: 38px; width: max-content; color: var(--lampblack); background: repeating-linear-gradient(45deg, var(--bone) 0 12px, var(--gold) 12px 24px); padding: 14px 24px; transform: rotate(-2deg) translateX(-40px); animation: stripSlide 18s linear infinite; }
.auction-stage { min-height: 74vh; display: grid; grid-template-columns: 170px minmax(280px, 720px) 210px; align-items: center; gap: 34px; }
.hammer-bee { width: 150px; height: 150px; display: grid; place-items: center; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); background: var(--gold); color: var(--lampblack); font-size: 76px; transform: rotate(13deg); }
.seal-button { width: 190px; height: 190px; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); border: 0; color: var(--bone); background: radial-gradient(circle, var(--vermilion), var(--umber) 64%, var(--lampblack)); cursor: none; box-shadow: inset 0 0 30px rgba(7,6,4,.48), 0 12px 40px rgba(196,56,43,.2); }
.seal-button.cracked { animation: crack .55s ease both; }
.seal-fragment { position: absolute; right: 8%; bottom: 14%; max-width: 430px; padding: 22px; color: var(--vermilion); border: 1px solid var(--vermilion); background: rgba(7,6,4,.82); font: 600 18px/1.3 var(--mono); transform: rotate(4deg) translateY(40px); opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.seal-fragment.open { opacity: 1; transform: rotate(4deg) translateY(0); }

.act-vault { display: grid; place-items: center; background: radial-gradient(circle, rgba(180,138,60,.09), rgba(7,6,4,.96) 56%); text-align: center; }
.vault-honeycomb { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.vault-honeycomb span { position: absolute; width: clamp(160px, 20vw, 310px); height: clamp(184px, 23vw, 358px); clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); border: 1px solid rgba(180,138,60,.38); transform: rotate(var(--rot)) translateX(var(--tx)) scale(var(--sc)); background: rgba(16,24,18,.22); transition: transform 1.4s cubic-bezier(.2,.7,.1,1), opacity 1.4s ease; }
.vault-honeycomb span:nth-child(1) { --rot: 0deg; --tx: 0; --sc: 1; }
.vault-honeycomb span:nth-child(2) { --rot: 30deg; --tx: 170px; --sc: .82; }
.vault-honeycomb span:nth-child(3) { --rot: -30deg; --tx: -170px; --sc: .82; }
.vault-honeycomb span:nth-child(4) { --rot: 60deg; --tx: 320px; --sc: .62; }
.vault-honeycomb span:nth-child(5) { --rot: -60deg; --tx: -320px; --sc: .62; }
.vault-honeycomb span:nth-child(6) { --rot: 90deg; --tx: 470px; --sc: .44; }
.vault-honeycomb span:nth-child(7) { --rot: -90deg; --tx: -470px; --sc: .44; }
.act-vault.closed .vault-honeycomb span { transform: rotate(0deg) translateX(0) scale(.72); opacity: .72; }
.final-copy { position: relative; z-index: 2; max-width: 760px; }
.final-copy strong { display: block; margin-top: 28px; color: var(--gold); font: 700 clamp(34px, 5vw, 72px) var(--display); letter-spacing: -.05em; }

@keyframes leatherBreath { from { opacity: .27; transform: scale(1); } to { opacity: .48; transform: scale(1.018); } }
@keyframes assemble { from { opacity: 0; transform: rotate(-20deg) scale(.72); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes facetLock { to { opacity: 1; transform: scale(1); } }
@keyframes stripSlide { to { transform: rotate(-2deg) translateX(-360px); } }
@keyframes crack { 30% { transform: rotate(3deg) scale(.96); } 60% { transform: rotate(-4deg) scale(1.05); } 100% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 20px rgba(196,56,43,.65)); } }

@media (max-width: 980px) {
  body { cursor: auto; }
  .loupe { display: none; }
  .act-opening, .act-plan, .auction-stage { grid-template-columns: 1fr; }
  .honeycomb { min-height: 820px; }
  .wordmark { left: 20%; top: 20%; }
  .hero-honeycomb .hex:nth-child(3) { right: 0; top: 0; }
  .ledger-slip.long { left: 0; width: 88vw; }
  .paper { left: 0; top: 39%; }
  .dark { left: 35%; top: 50%; }
  .red { right: 0; top: 31%; }
  .marginalia { position: relative; right: auto; bottom: auto; margin-top: 20px; }
  .auction-stage { padding-top: 50px; }
}

@media (max-width: 640px) {
  .act { padding: 30px 20px; }
  .hex-xl { width: 286px; height: 330px; }
  .hex-md { width: 190px; height: 220px; }
  .hex-sm { width: 152px; height: 176px; }
  .wordmark { left: 8%; }
  .hero-honeycomb .hex:nth-child(2) { left: 0; top: 2%; }
  .hero-honeycomb .hex:nth-child(4) { left: 0; bottom: 16%; }
  .hero-honeycomb .hex:nth-child(5) { right: 0; bottom: 0; }
  .index-lattice { min-height: 760px; }
  .ledger-slip p { font-size: 21px; }
  .dark { left: 18%; top: 58%; }
  .red { top: 42%; }
}