:root {
  --charcoal: #171310;
  --soft-black: #2B2825;
  --earth: #6B4634;
  --clay: #D89585;
  --cream: #F1E4D0;
  --sage: #3E5C4A;
  --ochre: #C8A16B;
  --blue: #7BA7B8;
  --registry-font-one: "Inter";
  --registry-font-two: "Space Grotesk";
  --body: "Alegreya Sans", sans-serif;
  --display: "Fraunces", serif;
  --stamp: "Bricolage Grotesque", sans-serif;
  --mono: "Spline Sans Mono", monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--charcoal);
}

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

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .32;
  background-image:
    radial-gradient(circle at 14% 27%, rgba(107, 70, 52, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 76% 63%, rgba(23, 19, 16, .14) 0 1px, transparent 1px),
    linear-gradient(110deg, rgba(241, 228, 208, .2), rgba(62, 92, 74, .08));
  background-size: 19px 23px, 31px 29px, 100% 100%;
  mix-blend-mode: multiply;
}

.cursor-clay {
  position: fixed;
  width: 28px;
  height: 22px;
  border-radius: 58% 42% 48% 52% / 46% 54% 40% 60%;
  background: rgba(216, 149, 133, .75);
  border: 1px solid rgba(107, 70, 52, .42);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30;
  box-shadow: inset -4px -5px 9px rgba(107,70,52,.18), 0 6px 16px rgba(23,19,16,.18);
  transition: width .25s ease, height .25s ease, border-radius .35s ease;
}

.kneading-sequence { position: relative; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tabletop {
  min-height: 100vh;
  position: relative;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(ellipse at 52% 54%, rgba(216,149,133,.2), transparent 31%),
    radial-gradient(ellipse at 10% 10%, rgba(200,161,107,.28), transparent 27%),
    linear-gradient(155deg, #F1E4D0 0%, #d9c4a4 100%);
}

.scene-raw .tabletop::before,
.scene-map .tabletop::before,
.scene-specimen .tabletop::before {
  content: "";
  position: absolute;
  inset: 9% 7%;
  border: 1px solid rgba(107,70,52,.2);
  border-radius: 49% 51% 52% 48% / 1.5% 2% 1.5% 2%;
  transform: rotate(-1.2deg);
  box-shadow: inset 0 0 60px rgba(107,70,52,.08);
}

.lamp-glow {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(241,228,208,.9), rgba(200,161,107,.24) 43%, transparent 70%);
  filter: blur(7px);
}

.specimen-code {
  position: absolute;
  top: 8vh;
  right: 8vw;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(43,40,37,.65);
  letter-spacing: .12em;
}

.living-lump,
.clone-lump {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(48vw, 560px);
  height: min(36vw, 430px);
  background:
    radial-gradient(circle at 30% 32%, rgba(241,228,208,.34), transparent 12%),
    radial-gradient(circle at 67% 62%, rgba(107,70,52,.22), transparent 19%),
    radial-gradient(circle at 43% 75%, rgba(62,92,74,.18), transparent 15%),
    linear-gradient(145deg, #D89585, #C8A16B 56%, #6B4634 130%);
  border: 2px solid rgba(107,70,52,.32);
  border-radius: 52% 48% 43% 57% / 58% 45% 55% 42%;
  box-shadow: inset -28px -34px 55px rgba(107,70,52,.32), inset 20px 24px 42px rgba(241,228,208,.26), 0 40px 70px rgba(43,40,37,.28);
  animation: breatheLump 5.6s steps(9, end) infinite;
  transition: border-radius 900ms cubic-bezier(.45,.02,.25,1), transform 500ms ease, filter 500ms ease;
}

.living-lump::before,
.clone-lump::before {
  content: "";
  position: absolute;
  inset: 12% 16%;
  border-radius: inherit;
  background-image: repeating-radial-gradient(ellipse at 34% 48%, rgba(107,70,52,.18) 0 2px, transparent 3px 8px);
  opacity: .32;
  mix-blend-mode: multiply;
}

.living-lump::after,
.clone-lump::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 18%;
  top: 48%;
  height: 9px;
  border-radius: 50%;
  background: rgba(107,70,52,.28);
  filter: blur(5px);
  transform: rotate(-4deg);
}

.embossed-word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(58px, 12vw, 168px);
  letter-spacing: -.075em;
  color: rgba(107,70,52,.28);
  text-shadow: 1px 2px 1px rgba(241,228,208,.22), -2px -3px 6px rgba(43,40,37,.18);
  transform: rotate(-2deg);
}

.thumbprint,
.pinch {
  position: absolute;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(107,70,52,.24);
  background: repeating-radial-gradient(ellipse, transparent 0 5px, rgba(107,70,52,.18) 6px 8px);
  opacity: .55;
}
.thumbprint-one { width: 86px; height: 56px; left: 20%; top: 25%; transform: rotate(-26deg); }
.thumbprint-two { width: 72px; height: 48px; right: 18%; bottom: 18%; transform: rotate(22deg); }
.pinch { width: 38px; height: 18px; background: rgba(107,70,52,.22); filter: blur(1px); }
.pinch-a { left: 12%; bottom: 34%; transform: rotate(22deg); }
.pinch-b { right: 20%; top: 22%; transform: rotate(-10deg); }

.tape-label,
.note-card,
.ceramic-tag,
.sample-tag,
.rubber-stamp {
  position: absolute;
  font-family: var(--stamp);
  line-height: .96;
  color: var(--charcoal);
  box-shadow: 0 12px 25px rgba(43,40,37,.14);
}

.tape-label {
  left: 11vw;
  bottom: 17vh;
  padding: 16px 24px;
  background: rgba(241,228,208,.78);
  transform: rotate(-8deg);
  font-size: clamp(26px, 4vw, 58px);
  letter-spacing: -.04em;
}

.ceramic-tag {
  right: 13vw;
  top: 25vh;
  width: 210px;
  padding: 18px;
  border-radius: 22px 18px 25px 17px;
  background: #F1E4D0;
  border: 1px solid rgba(107,70,52,.3);
  transform: rotate(7deg);
  font-size: 19px;
}

.crumb { position: absolute; width: 24px; height: 18px; border-radius: 50%; background: #C8A16B; box-shadow: inset -5px -4px 8px rgba(107,70,52,.3); }
.crumb-one { left: 21%; top: 20%; }
.crumb-two { right: 24%; bottom: 23%; width: 18px; }
.crumb-three { left: 60%; bottom: 13%; background: #6B4634; }

.scene-title-wrap {
  position: absolute;
  z-index: 2;
  max-width: 520px;
  left: clamp(26px, 8vw, 120px);
  top: 13vh;
}

.stamp {
  display: inline-block;
  padding: 8px 12px 6px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream);
  background: var(--sage);
  transform: rotate(-2deg);
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 850;
  font-size: clamp(54px, 8vw, 118px);
  line-height: .8;
  letter-spacing: -.065em;
  color: var(--earth);
}

p {
  margin: 22px 0 0;
  font-size: clamp(21px, 2.1vw, 31px);
  line-height: 1.05;
  color: var(--soft-black);
}

.map-tray {
  position: absolute;
  width: min(58vw, 700px);
  height: min(46vw, 540px);
  right: 6vw;
  bottom: 8vh;
  border-radius: 36px 29px 42px 31px;
  border: 2px solid rgba(107,70,52,.28);
  background: rgba(241,228,208,.44);
  box-shadow: inset 0 0 50px rgba(107,70,52,.08), 0 30px 80px rgba(43,40,37,.15);
  transform: rotate(2deg);
}

.map-lump { width: 58%; height: 54%; top: 54%; left: 50%; border-radius: 44% 56% 66% 34% / 43% 63% 37% 57%; }
.engraved-path { position: absolute; height: 4px; background: rgba(107,70,52,.28); border-radius: 50%; filter: blur(.4px); }
.path-one { width: 46%; left: 11%; top: 31%; transform: rotate(19deg); }
.path-two { width: 34%; right: 10%; top: 46%; transform: rotate(-24deg); }
.path-three { width: 49%; left: 23%; bottom: 16%; transform: rotate(6deg); }
.pin { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #7BA7B8; box-shadow: 0 0 0 4px rgba(123,167,184,.25); }
.pin span { position: absolute; top: 18px; left: -20px; white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--earth); }
.pin-one { left: 17%; top: 27%; }
.pin-two { right: 22%; top: 43%; background: #D89585; }
.pin-three { left: 48%; bottom: 19%; background: #3E5C4A; }
.note-card { left: 9vw; bottom: 13vh; width: 280px; padding: 20px; background: #D89585; border-radius: 18px 12px 20px 13px; font-size: 24px; transform: rotate(6deg); }

.dark-table {
  background:
    radial-gradient(circle at 50% 47%, rgba(216,149,133,.35), transparent 33%),
    radial-gradient(circle at 55% 38%, rgba(200,161,107,.32), transparent 15%),
    linear-gradient(145deg, #171310, #2B2825 55%, #6B4634 130%);
  color: var(--cream);
}

.kiln-mouth {
  position: absolute;
  left: 8vw;
  top: 15vh;
  width: min(54vw, 680px);
  height: min(54vw, 620px);
  border-radius: 50% 50% 44% 46% / 52% 52% 39% 41%;
  background: radial-gradient(circle at 50% 54%, #D89585 0 24%, #C8A16B 35%, #6B4634 55%, #171310 71%);
  box-shadow: inset 0 0 60px rgba(23,19,16,.8), 0 30px 80px rgba(0,0,0,.42);
}
.kiln-lump { width: 48%; height: 36%; filter: saturate(1.1); border-radius: 61% 39% 48% 52% / 43% 64% 36% 57%; }
.kiln-copy { left: auto; right: 8vw; top: 18vh; color: var(--cream); }
.kiln-copy h1 { color: var(--clay); }
.kiln-copy p { color: var(--cream); }
.heat { background: var(--clay); color: var(--charcoal); }
.glaze-drip { position: absolute; top: 58%; width: 20px; height: 80px; border-radius: 0 0 18px 18px; background: #7BA7B8; opacity: .75; animation: drip 4s steps(7,end) infinite; }
.drip-one { left: 43%; }
.drip-two { left: 53%; height: 112px; background: #D89585; animation-delay: .8s; }
.drip-three { left: 62%; height: 62px; background: #C8A16B; animation-delay: 1.5s; }
.cone-row { position: absolute; right: 13vw; bottom: 17vh; display: flex; gap: 24px; align-items: flex-end; }
.kiln-cone { display: block; width: 28px; height: 88px; background: #C8A16B; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(-4deg); }
.cone-low { height: 66px; background: #D89585; }
.cone-fall { height: 82px; background: #7BA7B8; transform: rotate(35deg); transform-origin: bottom center; }
.rubber-stamp { right: 20vw; bottom: 33vh; padding: 12px 18px; border: 4px solid #D89585; color: #D89585; background: transparent; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-14deg); box-shadow: none; }

.specimen-table { background: linear-gradient(160deg, #F1E4D0, #cfc5aa 62%, #7BA7B8 140%); }
.specimen-copy { right: 7vw; left: auto; top: 11vh; max-width: 590px; }
.specimen-box {
  position: absolute;
  left: 8vw;
  bottom: 10vh;
  width: min(54vw, 690px);
  height: min(54vw, 620px);
  border: 2px solid rgba(62,92,74,.45);
  border-radius: 42px 36px 49px 32px;
  background: rgba(241,228,208,.56);
  box-shadow: inset 0 0 80px rgba(62,92,74,.09), 0 25px 80px rgba(43,40,37,.16);
}
.final-lump { width: 48%; height: 40%; border-radius: 46% 54% 50% 50% / 50% 45% 55% 50%; top: 48%; left: 48%; background: linear-gradient(145deg, #D89585, #C8A16B 35%, #3E5C4A 130%); }
.shine { position: absolute; width: 42%; height: 23%; left: 23%; top: 20%; border-radius: 50%; background: rgba(241,228,208,.28); filter: blur(6px); }
.sample-tag { right: 8%; top: 10%; padding: 14px 18px; background: #F1E4D0; border: 1px solid rgba(107,70,52,.32); border-radius: 5px; transform: rotate(4deg); font-size: 18px; }
.sample-tag strong { font-family: var(--display); font-size: 26px; letter-spacing: -.04em; }
.strata { position: absolute; left: 12%; height: 8px; border-radius: 50%; background: rgba(107,70,52,.32); }
.strata-a { width: 48%; bottom: 20%; transform: rotate(-4deg); }
.strata-b { width: 32%; bottom: 16%; left: 18%; background: rgba(62,92,74,.32); transform: rotate(3deg); }
.soft-button { position: absolute; right: 10vw; bottom: 24vh; max-width: 360px; display: block; padding: 22px 28px; border-radius: 999px 55% 999px 48%; background: #3E5C4A; color: #F1E4D0; font-family: var(--stamp); font-size: 24px; line-height: .95; text-decoration: none; box-shadow: inset -12px -10px 18px rgba(23,19,16,.23), 0 18px 40px rgba(43,40,37,.18); transition: transform .25s ease, border-radius .35s ease; }
.soft-button:hover { transform: rotate(-2deg) scale(1.04); border-radius: 48% 52% 55% 45% / 45% 56% 44% 55%; }
.footer-mark { position: absolute; right: 8vw; bottom: 7vh; font-family: var(--mono); font-size: 12px; color: rgba(43,40,37,.66); }

.scene-dial { position: fixed; z-index: 25; left: 24px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.scene-dial button { border: 0; padding: 8px 10px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: #F1E4D0; background: rgba(23,19,16,.68); border-radius: 50% 45% 50% 45%; transform: rotate(-3deg); cursor: none; transition: background .2s ease, transform .2s ease; }
.scene-dial button.active { background: #D89585; color: #171310; transform: rotate(3deg) scale(1.08); }

body.shape-map .living-lump { border-radius: 44% 56% 66% 34% / 43% 63% 37% 57%; transform: translate(-50%, -50%) rotate(5deg) scale(.94); }
body.shape-kiln .living-lump { border-radius: 61% 39% 48% 52% / 43% 64% 36% 57%; transform: translate(-50%, -50%) rotate(-4deg) scale(1.04); filter: saturate(1.18); }
body.shape-specimen .living-lump { border-radius: 46% 54% 50% 50% / 50% 45% 55% 50%; transform: translate(-50%, -50%) rotate(1deg) scale(.9); }

@keyframes breatheLump {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1deg) scale(1); }
  35% { transform: translate(-50%, -50%) rotate(1.5deg) scale(1.025, .985); }
  67% { transform: translate(-50%, -50%) rotate(-.8deg) scale(.99, 1.018); }
}

@keyframes drip {
  0%, 100% { transform: scaleY(.58); opacity: .55; }
  48% { transform: scaleY(1.08); opacity: .9; }
}

@media (max-width: 820px) {
  body { cursor: auto; }
  .cursor-clay { display: none; }
  .scene-dial { left: 10px; }
  .living-lump { width: 78vw; height: 58vw; top: 48%; }
  .tape-label { left: 12vw; bottom: 11vh; }
  .ceramic-tag { right: 7vw; top: 15vh; }
  .scene-title-wrap, .kiln-copy, .specimen-copy { left: 12vw; right: auto; top: 8vh; max-width: 76vw; }
  .map-tray, .kiln-mouth, .specimen-box { width: 82vw; height: 62vh; left: 12vw; right: auto; bottom: 7vh; top: auto; }
  .note-card, .rubber-stamp, .cone-row { display: none; }
  .soft-button { left: 14vw; right: auto; bottom: 14vh; }
}