:root {
  /* Font compliance phrases: IBM Plex Mono` from Google Fonts for lot numbers; IBM Plex Sans` from Google Fonts for readable clerk notes. */
  --parchment: #F8E7C6;
  --ivory: #FFF9E8;
  --persimmon: #E85D2A;
  --coral: #FF8A65;
  --teal: #0F5F5C;
  --burgundy: #7A263A;
  --umber: #2A1711;
  --gold: #DDAA3B;
  --shadow: 0 28px 70px rgba(42, 23, 17, .24);
  --soft-shadow: 0 14px 35px rgba(42, 23, 17, .18);
  --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--umber);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 138, 101, .42), transparent 28%),
    radial-gradient(circle at 82% 65%, rgba(15, 95, 92, .28), transparent 32%),
    linear-gradient(135deg, var(--ivory), var(--parchment) 45%, #f0bf82 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    radial-gradient(circle at 50% 100%, rgba(221, 170, 59, .32) 0 10%, transparent 11% 100%),
    radial-gradient(circle at 0 100%, rgba(15, 95, 92, .16) 0 9%, transparent 10% 100%);
  background-size: 46px 25px, 46px 25px;
  background-position: 0 0, 23px 0;
  mix-blend-mode: multiply;
}

.ambient, .scale-field, .reef-shadow { position: fixed; inset: 0; pointer-events: none; }
.ambient { z-index: 0; overflow: hidden; }
.reef-shadow { filter: blur(36px); opacity: .45; transform: translate3d(0, calc(var(--progress) * 80px), 0); }
.reef-a { background: radial-gradient(ellipse at 10% 74%, rgba(15, 95, 92, .45), transparent 35%); }
.reef-b { background: radial-gradient(ellipse at 88% 28%, rgba(122, 38, 58, .30), transparent 30%); }
.scale-field { background: repeating-linear-gradient(102deg, transparent 0 26px, rgba(255, 249, 232, .18) 27px 29px); opacity: .55; }

main { position: relative; z-index: 1; }

.act {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 72px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.act::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(122, 38, 58, .18);
  border-radius: 34px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,249,232,.24), transparent 18%, transparent 82%, rgba(255,249,232,.18));
  z-index: -1;
}

.stage-label {
  position: absolute;
  top: 34px;
  left: clamp(28px, 5vw, 72px);
  display: flex;
  gap: 18px;
  align-items: baseline;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--burgundy);
  z-index: 5;
}

.stage-label span { font-weight: 600; color: var(--persimmon); }
.stage-label b { font-size: 12px; font-weight: 500; color: var(--teal); }
.stage-label.vertical { writing-mode: vertical-rl; gap: 12px; }

.wordmark-wrap { position: relative; max-width: 100%; margin-top: 40px; }
.wordmark {
  min-height: clamp(108px, 21vw, 270px);
  margin: 0;
  font-family: "Anybody", "IBM Plex Sans", sans-serif;
  font-size: clamp(76px, 17vw, 260px);
  line-height: .78;
  font-variation-settings: "wdth" calc(78 + var(--beat, 0) * 35), "wght" 830;
  letter-spacing: -.09em;
  color: var(--umber);
  text-shadow: 9px 12px 0 rgba(232, 93, 42, .18), -5px -4px 0 rgba(255, 249, 232, .9);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s, font-variation-settings .18s;
}
.wordmark.scattered { transform: translateY(-16vh) rotate(-2deg) scale(.72); opacity: .26; }
.type-cursor { width: 18vw; max-width: 180px; height: 8px; background: var(--persimmon); margin-top: 20px; animation: cursorPulse .8s steps(1) infinite; }

.auction-table, .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 2vw, 28px); width: min(1180px, 100%); margin: 0 auto; }
.opening-table { position: relative; margin-top: -3vh; align-items: end; }
.opening-table .hero-card { grid-column: 1 / span 5; min-height: 330px; }
.opening-table .strip { grid-column: 6 / span 2; align-self: start; }
.opening-table .fisheye { grid-column: 8 / span 2; }
.opening-table .paddle { grid-column: 10 / span 3; align-self: center; }

.card {
  position: relative;
  padding: clamp(18px, 2.3vw, 34px);
  background: linear-gradient(145deg, rgba(255, 249, 232, .96), rgba(248, 231, 198, .9));
  border: 1px solid rgba(42, 23, 17, .16);
  box-shadow: var(--shadow);
  transform: translateY(58px) rotate(var(--r, 0deg)) scale(.96);
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.8,.2,1) var(--d, 0s), opacity .8s ease var(--d, 0s), filter .6s;
}
.is-active .card, .card.revealed { transform: translateY(0) rotate(var(--r, 0deg)) scale(1); opacity: 1; }
.card:hover { filter: saturate(1.1); transform: translateY(-8px) rotate(calc(var(--r, 0deg) * .65)) scale(1.02); }
.card::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(221, 170, 59, .5); pointer-events: none; }
.card::after { content: ""; position: absolute; right: -12px; top: 22%; width: 24px; height: 62px; background: var(--coral); transform: rotate(7deg); box-shadow: var(--soft-shadow); }

.lot, .mono, .card span { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.lot { color: var(--persimmon); }
.card h2, .card h3 { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 80, "wght" 760, "SOFT" 40, "WONK" 1; line-height: .95; margin: 18px 0; }
.card h2 { font-size: clamp(34px, 5vw, 72px); }
.card h3 { font-size: clamp(24px, 3vw, 42px); }
.card p { font-size: clamp(15px, 1.5vw, 20px); line-height: 1.45; }
.wax, .seal { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--burgundy); color: var(--ivory); font-family: "Anybody"; font-style: normal; transform: rotate(-14deg); }
.wax { position: absolute; right: 24px; bottom: 22px; }

.receipt { min-height: 250px; background: repeating-linear-gradient(180deg, var(--ivory) 0 20px, #f3dbb0 21px 22px); }
.strip { writing-mode: vertical-rl; min-height: 300px; }
.fisheye, .oval-card { border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; overflow: hidden; background: radial-gradient(circle, var(--gold), var(--coral) 38%, var(--teal) 72%); color: var(--ivory); }
.eye-core { width: 45%; aspect-ratio: 1.8; border-radius: 50%; background: radial-gradient(circle at 45% 50%, var(--umber) 0 13%, var(--ivory) 14% 18%, var(--teal) 19% 48%, rgba(255,249,232,.7) 49%); box-shadow: 0 0 34px rgba(255, 249, 232, .75); }
.paddle { border-radius: 44% 44% 12% 12%; background: linear-gradient(160deg, var(--coral), var(--persimmon)); color: var(--ivory); }

.ritual-button {
  position: absolute;
  right: clamp(28px, 6vw, 86px);
  bottom: 42px;
  border: 0;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--ivory);
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: var(--soft-shadow);
  cursor: pointer;
}

.ledger { background: linear-gradient(135deg, rgba(255,249,232,.55), rgba(255,138,101,.18)); }
.collage-grid .tall { grid-column: 2 / span 4; min-height: 560px; clip-path: polygon(0 0, 94% 2%, 100% 88%, 74% 100%, 0 96%); }
.quote-card { grid-column: 6 / span 5; align-self: start; background: var(--burgundy); color: var(--ivory); }
blockquote { margin: 0; font-family: "Fraunces", serif; font-size: clamp(32px, 5vw, 76px); line-height: .98; }
.ribbon { grid-column: 10 / span 2; display: flex; gap: 18px; writing-mode: vertical-rl; }
.torn { grid-column: 4 / span 4; margin-top: -80px; }
.petal-orbit { grid-column: 8 / span 3; position: relative; min-height: 310px; }
.petal-orbit span, .final-petals span { position: absolute; left: 50%; top: 50%; width: 70px; height: 148px; border-radius: 55% 55% 55% 55% / 70% 70% 35% 35%; background: linear-gradient(var(--ivory), var(--coral)); transform-origin: 50% 94%; box-shadow: var(--soft-shadow); }
.petal-orbit span:nth-child(1) { transform: translate(-50%,-94%) rotate(0deg); }
.petal-orbit span:nth-child(2) { transform: translate(-50%,-94%) rotate(60deg); }
.petal-orbit span:nth-child(3) { transform: translate(-50%,-94%) rotate(120deg); }
.petal-orbit span:nth-child(4) { transform: translate(-50%,-94%) rotate(180deg); }
.petal-orbit span:nth-child(5) { transform: translate(-50%,-94%) rotate(240deg); }
.petal-orbit span:nth-child(6) { transform: translate(-50%,-94%) rotate(300deg); }

.reef { color: var(--ivory); background: linear-gradient(145deg, rgba(15,95,92,.72), rgba(122,38,58,.35)), radial-gradient(circle at 20% 10%, var(--coral), transparent 36%); }
.reef .stage-label b { color: var(--ivory); }
.reef-grid .fish-window { grid-column: 1 / span 6; min-height: 500px; background: linear-gradient(145deg, rgba(15,95,92,.92), rgba(255,249,232,.88)); color: var(--umber); }
.scale-card { grid-column: 7 / span 3; background: radial-gradient(circle at 50% 100%, rgba(221,170,59,.45) 0 15%, transparent 16% 100%), var(--teal); background-size: 44px 24px; color: var(--ivory); display: grid; gap: 24px; align-content: center; }
.oval-card { grid-column: 10 / span 3; border-radius: 50% / 38%; }
.annotation { grid-column: 7 / span 4; background: var(--ivory); color: var(--burgundy); }
.fish-silhouette { width: min(360px, 70%); height: 150px; margin: 30px auto; background: var(--teal); clip-path: polygon(0 50%, 22% 16%, 70% 18%, 100% 0, 84% 50%, 100% 100%, 70% 82%, 22% 84%); opacity: .88; animation: swim 5s ease-in-out infinite; }

.final { background: radial-gradient(circle at 50% 45%, var(--ivory) 0 16%, var(--parchment) 17% 34%, rgba(232,93,42,.42) 35% 54%, var(--teal) 80%); text-align: center; }
.medallion { position: relative; width: min(620px, 86vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.final-petals { position: absolute; inset: 0; animation: slowTurn 18s linear infinite; }
.final-petals span { width: 92px; height: 210px; }
.final-petals span:nth-child(1) { transform: translate(-50%,-95%) rotate(0deg); }
.final-petals span:nth-child(2) { transform: translate(-50%,-95%) rotate(45deg); }
.final-petals span:nth-child(3) { transform: translate(-50%,-95%) rotate(90deg); }
.final-petals span:nth-child(4) { transform: translate(-50%,-95%) rotate(135deg); }
.final-petals span:nth-child(5) { transform: translate(-50%,-95%) rotate(180deg); }
.final-petals span:nth-child(6) { transform: translate(-50%,-95%) rotate(225deg); }
.final-petals span:nth-child(7) { transform: translate(-50%,-95%) rotate(270deg); }
.final-petals span:nth-child(8) { transform: translate(-50%,-95%) rotate(315deg); }
.fish-eye-final { position: relative; z-index: 2; width: 230px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--umber) 0 12%, var(--gold) 13% 28%, var(--teal) 29% 72%, var(--ivory) 73%); box-shadow: var(--shadow); overflow: hidden; }
.final-fish { position: absolute; width: 180px; height: 54px; left: -190px; top: 88px; background: var(--ivory); clip-path: polygon(0 50%, 20% 10%, 72% 20%, 100% 0, 84% 50%, 100% 100%, 72% 80%, 20% 90%); animation: finalSwim 7s ease-in-out infinite; }
#soldType { position: absolute; z-index: 3; margin: 0; font-family: "Anybody", sans-serif; font-size: clamp(76px, 14vw, 180px); color: var(--persimmon); font-variation-settings: "wdth" 125, "wght" 900; letter-spacing: -.05em; text-shadow: 4px 4px 0 var(--ivory); }
.medallion p { position: absolute; z-index: 4; bottom: 22px; width: min(390px, 80vw); font-family: "Fraunces", serif; font-size: 20px; }
.collapsed-cards span { position: absolute; left: 50%; top: 50%; width: 120px; height: 180px; background: rgba(255,249,232,.72); box-shadow: var(--soft-shadow); transform: translate(-50%,-50%) rotate(calc(var(--i, 0) * 18deg)); }

.act-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 10; display: grid; gap: 10px; }
.act-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(42,23,17,.2); background: rgba(255,249,232,.72); color: var(--umber); font-family: "IBM Plex Mono"; cursor: pointer; }
.act-nav button.active { background: var(--persimmon); color: var(--ivory); }

.typed-note::after { content: "▌"; color: var(--persimmon); animation: cursorPulse .8s steps(1) infinite; }

@keyframes cursorPulse { 50% { opacity: 0; } }
@keyframes swim { 50% { transform: translateX(24px) rotate(-3deg); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes finalSwim { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(610px); } }

@media (max-width: 820px) {
  .auction-table, .grid { display: block; }
  .card { margin: 18px 0; }
  .stage-label.vertical { writing-mode: horizontal-tb; }
  .wordmark { font-size: clamp(66px, 22vw, 136px); }
  .act-nav { display: none; }
  .ritual-button { position: relative; right: auto; bottom: auto; margin-top: 24px; }
}