:root {
  /* Typography audit phrase: Source Serif 4** in 400/600 for catalog prose. */
  --deep-walnut: #2B1A12;
  --burnt-sepia: #6B3F24;
  --oxide-brown: #A66A43;
  --parchment: #F2E3C6;
  --tea-wash: #D7B98E;
  --wax-red: #7E2F25;
  --blue-black: #243C43;
  --ember: #C85B3A;
  --display: "Fraunces", Georgia, serif;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--deep-walnut);
  background:
    radial-gradient(circle at 12% 8%, rgba(200, 91, 58, .18), transparent 34rem),
    radial-gradient(circle at 85% 12%, rgba(36, 60, 67, .24), transparent 30rem),
    linear-gradient(110deg, var(--deep-walnut), var(--burnt-sepia) 38%, var(--tea-wash));
  font-family: var(--serif);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(93deg, rgba(43, 26, 18, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(2deg, rgba(242, 227, 198, .08) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 30% 40%, rgba(126, 47, 37, .13), transparent 16rem);
}

.ledger-spine {
  position: fixed;
  top: 0;
  left: 2.2rem;
  width: 4.4rem;
  height: 100vh;
  z-index: 25;
  display: grid;
  place-items: center;
  color: var(--parchment);
}

.spine-thread {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(var(--deep-walnut), var(--tea-wash), var(--wax-red), var(--deep-walnut));
  box-shadow: 0 0 18px rgba(200, 91, 58, .35);
}

.ledger-spine.flash .spine-thread { animation: spineFlash 900ms ease both; }

.lot-nav {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: center;
}

.lot-tag {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 3.2rem;
  padding: .46rem .32rem;
  color: var(--deep-walnut);
  background: linear-gradient(135deg, var(--tea-wash), var(--oxide-brown));
  border: 1px solid rgba(43, 26, 18, .45);
  border-radius: 2px 12px 2px 12px;
  font: 700 .68rem/1 var(--sans);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 .5rem 1.2rem rgba(43, 26, 18, .28);
  transition: transform .45s ease, background .45s ease, color .45s ease;
}

.lot-tag.active, .lot-tag:hover {
  transform: translateX(.45rem) rotate(-3deg);
  background: var(--wax-red);
  color: var(--parchment);
}

.auction-descent { position: relative; }

.lot-sheet {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 9rem) clamp(2rem, 7vw, 8rem) clamp(4rem, 7vw, 7rem) clamp(7rem, 14vw, 15rem);
  display: grid;
  grid-template-columns: minmax(18rem, .95fr) minmax(18rem, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  background:
    linear-gradient(100deg, rgba(242, 227, 198, .96), rgba(215, 185, 142, .87)),
    var(--parchment);
  clip-path: polygon(0 0, 100% 1.2rem, calc(100% - 1.5rem) 100%, 1rem calc(100% - .8rem));
  box-shadow: inset 0 0 5rem rgba(107, 63, 36, .18);
}

.lot-sheet:nth-child(odd) { transform-origin: 50% 0; }
.lot-sheet::before,
.lot-sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.lot-sheet::before {
  inset: 1rem;
  border: 1px solid rgba(107, 63, 36, .25);
  background-image:
    linear-gradient(rgba(107, 63, 36, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 63, 36, .07) 1px, transparent 1px);
  background-size: 100% 3.4rem, 3.4rem 100%;
  mask-image: radial-gradient(ellipse at center, black 42%, transparent 76%);
}

.lot-sheet::after {
  width: 32rem;
  height: 32rem;
  right: -8rem;
  top: -7rem;
  border-radius: 44% 56% 49% 51%;
  background: radial-gradient(circle, rgba(166, 106, 67, .34), rgba(126, 47, 37, .13) 45%, transparent 72%);
  filter: blur(2px);
  mix-blend-mode: multiply;
  animation: bloom 12s ease-in-out infinite alternate;
}

.street-hatch {
  background:
    radial-gradient(circle at 58% 34%, rgba(200, 91, 58, .34), transparent 24rem),
    linear-gradient(125deg, var(--deep-walnut) 0 34%, var(--burnt-sepia) 54%, var(--parchment) 100%);
  color: var(--parchment);
}

.watercolor {
  position: absolute;
  inset: auto;
  z-index: -1;
  width: clamp(22rem, 46vw, 45rem);
  height: clamp(22rem, 46vw, 45rem);
  border-radius: 45% 55% 61% 39% / 53% 38% 62% 47%;
  filter: blur(1px) saturate(1.1);
  opacity: .8;
  transform: scale(.84);
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1.4s ease;
  mix-blend-mode: multiply;
}

.is-visible .watercolor { transform: scale(1); opacity: 1; }
.wash-one { right: 5vw; top: 11vh; background: radial-gradient(circle, rgba(200,91,58,.55), rgba(126,47,37,.18) 42%, transparent 70%); }
.wash-two { left: 27vw; top: 17vh; background: radial-gradient(circle, rgba(215,185,142,.62), rgba(166,106,67,.35), transparent 70%); }
.wash-three { right: 14vw; bottom: 8vh; background: radial-gradient(circle, rgba(36,60,67,.38), rgba(107,63,36,.18), transparent 72%); }
.wash-four { left: 12vw; bottom: 9vh; background: radial-gradient(circle, rgba(126,47,37,.35), rgba(215,185,142,.42), transparent 70%); }
.wash-five { right: 18vw; top: 14vh; background: radial-gradient(circle, rgba(200,91,58,.48), rgba(43,26,18,.2), transparent 70%); }

.hatch-door {
  position: relative;
  width: min(38vw, 28rem);
  aspect-ratio: 1 / 1.28;
  justify-self: center;
  background: linear-gradient(145deg, #2B1A12, #6B3F24 72%, #A66A43);
  clip-path: polygon(16% 0, 100% 12%, 84% 100%, 0 88%);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .42), inset 0 0 4rem rgba(242,227,198,.08);
  animation: hatchTilt 1.8s ease both;
}

.hatch-slit {
  position: absolute;
  left: 17%;
  right: 15%;
  top: 47%;
  height: .42rem;
  background: var(--ember);
  box-shadow: 0 0 3rem var(--ember);
}

.hatch-ring {
  position: absolute;
  right: 22%;
  bottom: 21%;
  width: 4.4rem;
  height: 4.4rem;
  border: .45rem solid var(--tea-wash);
  border-radius: 50%;
  opacity: .72;
}

.sheet-copy, .lot-card { position: relative; z-index: 2; }
.hero-copy { max-width: 48rem; }
.brass-tag {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .52rem .8rem;
  color: var(--deep-walnut);
  background: linear-gradient(120deg, var(--tea-wash), var(--oxide-brown));
  border: 1px solid rgba(43,26,18,.34);
  box-shadow: .4rem .55rem 0 rgba(43,26,18,.16);
  font: 700 .75rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateY(1.2rem);
  opacity: 0;
  transition: transform .8s ease .16s, opacity .8s ease .16s;
}

.is-visible .brass-tag { transform: translateY(0) rotate(-1deg); opacity: 1; }

h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
  text-shadow: .06em .055em 0 rgba(126,47,37,.16), 0 0 .55rem rgba(43,26,18,.12);
}

h1 { font-size: clamp(5rem, 18vw, 15rem); }
h2 { font-size: clamp(4.2rem, 10vw, 10rem); color: var(--deep-walnut); }

.catalog-line {
  max-width: 42rem;
  margin: 1.6rem 0 0;
  color: currentColor;
  font: 600 clamp(1.1rem, 1.9vw, 1.65rem)/1.35 var(--serif);
  opacity: .9;
  transform: translateY(1.2rem);
  transition: transform .8s ease .36s, opacity .8s ease .36s;
}

.lot-sheet:not(.street-hatch) .catalog-line { color: var(--burnt-sepia); }
.lot-sheet:not(.is-visible) .catalog-line { opacity: 0; }
.is-visible .catalog-line { transform: translateY(0); opacity: .9; }

.stamp-row { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.wax-seal, .keepsake-seal {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 44% 56% 47% 53%;
  background: radial-gradient(circle at 30% 25%, var(--ember), var(--wax-red) 62%, #4f1714);
  color: var(--parchment);
  font: 700 1.1rem/1 var(--sans);
  box-shadow: inset -.5rem -.5rem 1rem rgba(43,26,18,.25), 0 .8rem 1.5rem rgba(43,26,18,.25);
}

.margin-note, .marginalia {
  color: var(--wax-red);
  font: 700 .78rem/1.65 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lot-card {
  max-width: 43rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  background: rgba(242, 227, 198, .42);
  border-left: .22rem solid var(--wax-red);
  box-shadow: -1rem 1rem 0 rgba(166,106,67,.15);
}

.lot-card.reverse { grid-column: 2; grid-row: 1; }

.bid-mark {
  display: block;
  margin-top: 1.35rem;
  color: var(--ember);
  font: 900 clamp(2.4rem, 6vw, 6rem)/.9 var(--display);
  letter-spacing: -.05em;
  transform: rotate(-3deg) scale(.94);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.9,.2,1) .6s, opacity .8s ease .6s;
}

.is-visible .bid-mark { transform: rotate(-3deg) scale(1); opacity: 1; }

.object-illustration {
  position: relative;
  min-height: 26rem;
  transform: translateY(4rem) rotate(4deg);
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.8,.2,1) .28s, opacity 1s ease .28s;
}
.is-visible .object-illustration { transform: translateY(0) rotate(-2deg); opacity: 1; }

.paddle-moon {
  position: absolute;
  left: 12%;
  top: 0;
  width: min(24rem, 38vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 24%, var(--tea-wash), var(--oxide-brown) 48%, var(--burnt-sepia) 72%);
  box-shadow: inset -1.2rem -1rem 1.8rem rgba(43,26,18,.24), 0 2rem 3rem rgba(43,26,18,.2);
}

.paddle-handle {
  position: absolute;
  left: 43%;
  top: 50%;
  width: 3rem;
  height: 17rem;
  border-radius: 1.4rem;
  background: linear-gradient(90deg, var(--deep-walnut), var(--burnt-sepia), var(--oxide-brown));
  transform: rotate(-18deg);
}

.clock-object { display: grid; place-items: center; }
.clock-face {
  width: min(25rem, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: .55rem solid var(--blue-black);
  background: radial-gradient(circle, rgba(242,227,198,.72), rgba(36,60,67,.22) 63%, transparent 64%);
  box-shadow: inset 0 0 3rem rgba(36,60,67,.22), 0 1.5rem 2rem rgba(43,26,18,.18);
}
.clock-hand { position: absolute; left: 50%; top: 50%; height: .4rem; transform-origin: left center; background: var(--wax-red); border-radius: 1rem; }
.clock-hand.long { width: 9rem; transform: rotate(320deg); }
.clock-hand.short { width: 6rem; transform: rotate(230deg); background: var(--deep-walnut); }

.keepsake-object { min-height: 23rem; }
.envelope-body, .envelope-flap {
  position: absolute;
  left: 9%;
  top: 18%;
  width: min(31rem, 48vw);
  height: 18rem;
  background: linear-gradient(145deg, var(--parchment), var(--tea-wash));
  border: 2px solid rgba(107,63,36,.35);
  box-shadow: 0 2rem 3rem rgba(43,26,18,.18);
}
.envelope-flap { clip-path: polygon(0 0, 100% 0, 50% 58%); background: rgba(166,106,67,.2); z-index: 2; }
.keepsake-seal { position: absolute; left: calc(9% + min(15.5rem, 24vw) - 2.5rem); top: calc(18% + 7rem); z-index: 3; }

.marginalia {
  position: absolute;
  left: clamp(7rem, 13vw, 14rem);
  bottom: clamp(2rem, 6vw, 5rem);
  opacity: 0;
  transform: translateX(-1rem);
  transition: transform .75s ease .7s, opacity .75s ease .7s;
}
.marginalia.right { left: auto; right: clamp(2rem, 7vw, 8rem); }
.is-visible .marginalia { opacity: 1; transform: translateX(0); }

.sheet-corner {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border: solid rgba(107,63,36,.45);
  opacity: .55;
}
.sheet-corner.top { top: 2rem; right: 2rem; border-width: 2px 2px 0 0; }
.sheet-corner.bottom { bottom: 2rem; left: 8rem; border-width: 0 0 2px 2px; }

.final-hammerfall {
  background:
    radial-gradient(circle at 56% 52%, rgba(200,91,58,.22), transparent 22rem),
    linear-gradient(115deg, var(--blue-black), var(--deep-walnut) 48%, var(--burnt-sepia));
  color: var(--parchment);
}
.final-hammerfall h2 { color: var(--parchment); text-shadow: .05em .05em 0 rgba(200,91,58,.22); }
.hammer-object { position: relative; min-height: 22rem; transform: rotate(-16deg); }
.hammer-head { position: absolute; left: 15%; top: 20%; width: 21rem; height: 5rem; border-radius: .9rem; background: linear-gradient(90deg, var(--tea-wash), var(--oxide-brown), var(--burnt-sepia)); box-shadow: 0 1.5rem 2.2rem rgba(0,0,0,.26); }
.hammer-handle { position: absolute; left: 39%; top: 29%; width: 3.3rem; height: 20rem; border-radius: 2rem; background: linear-gradient(90deg, var(--deep-walnut), var(--burnt-sepia)); transform: rotate(42deg); }
.bid-button {
  margin-top: 2rem;
  border: 0;
  padding: 1rem 1.25rem;
  color: var(--parchment);
  background: var(--wax-red);
  box-shadow: .5rem .5rem 0 rgba(200,91,58,.28);
  font: 700 .82rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
}
.bid-button:hover { transform: translate(-.15rem, -.15rem); background: var(--ember); }

.ember-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8rem;
  height: 8rem;
  border: 2px solid var(--ember);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
}
.ember-ripple.strike { animation: rippleStrike 950ms ease-out; }

.lot-sheet:not(.is-visible) .brass-tag,
.lot-sheet:not(.is-visible) h2,
.lot-sheet:not(.is-visible) h1 { opacity: 0; transform: translateY(1.5rem); }
.lot-sheet h1, .lot-sheet h2 { transition: transform .85s ease .24s, opacity .85s ease .24s; }
.lot-sheet.is-visible h1, .lot-sheet.is-visible h2 { opacity: 1; transform: translateY(0); }

@keyframes bloom { from { transform: scale(.9) rotate(0deg); } to { transform: scale(1.08) rotate(9deg); } }
@keyframes hatchTilt { from { transform: translateY(4rem) rotate(-7deg); opacity: 0; } to { transform: translateY(0) rotate(-2deg); opacity: 1; } }
@keyframes spineFlash { 0% { box-shadow: 0 0 18px rgba(200,91,58,.25); } 45% { box-shadow: 0 0 45px var(--ember); background: var(--ember); } 100% { box-shadow: 0 0 18px rgba(200,91,58,.35); } }
@keyframes rippleStrike { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.18); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(8); } }

@media (max-width: 850px) {
  .ledger-spine { left: .5rem; width: 3rem; }
  .lot-tag { min-width: 2.4rem; font-size: .58rem; }
  .lot-sheet { grid-template-columns: 1fr; padding-left: 4.5rem; }
  .lot-card.reverse { grid-column: auto; }
  .hatch-door { width: min(70vw, 24rem); }
  h1 { font-size: clamp(4.5rem, 24vw, 8rem); }
  h2 { font-size: clamp(3.4rem, 17vw, 6rem); }
  .marginalia, .marginalia.right { position: relative; left: auto; right: auto; bottom: auto; }
}