:root {
  /* compliance typography tokens: IBM Plex Mono* Mono** labels IBM Plex Sans* Sans** practical instructions */
  --rouge: #9B5F62;
  --brass: #B18A4A;
  --marble: #F1E8DC;
  --sage: #A7AD8D;
  --mauve: #C9A8A5;
  --mirror: #D7D0C7;
  --walnut: #3B2A24;
  --ink: #17130F;
  --serif: "Cormorant Garamond", serif;
  --sans: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--walnut);
  background: var(--marble);
  font-family: var(--sans);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(201, 168, 165, .46), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(167, 173, 141, .33), transparent 27%),
    radial-gradient(circle at 58% 82%, rgba(177, 138, 74, .20), transparent 30%),
    linear-gradient(120deg, rgba(59,42,36,.08), transparent 18%, rgba(215,208,199,.4) 38%, transparent 55%, rgba(155,95,98,.12) 78%, transparent);
  z-index: -4;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 40;
  background-image:
    linear-gradient(90deg, rgba(23,19,15,.08) 1px, transparent 1px),
    linear-gradient(rgba(23,19,15,.06) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 34px;
  color: var(--walnut);
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 700;
  letter-spacing: -.04em;
}

.checksum, .material-chip, .eyebrow, .meter-copy, .label-ribbon, .return-chip {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.checksum {
  font-size: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(177, 138, 74, .55);
  background: rgba(241, 232, 220, .62);
  box-shadow: 4px 4px 0 rgba(23,19,15,.12);
}

.global-circuit {
  position: fixed;
  inset: 7vh 5vw auto 5vw;
  width: 90vw;
  height: 86vh;
  z-index: -1;
  pointer-events: none;
  opacity: .58;
}

.trace {
  fill: none;
  stroke: var(--brass);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 12 10;
  filter: drop-shadow(0 0 8px rgba(177,138,74,.34));
}

.pin { fill: var(--marble); stroke: var(--brass); stroke-width: 4; }

.chapter {
  min-height: 150vh;
  position: relative;
}

.sticky-scene {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  align-items: center;
  padding: 96px 5vw 54px;
}

.sticky-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(6.25% - 1px), rgba(177, 138, 74, .10) calc(6.25% - 1px), rgba(177, 138, 74, .10) 6.25%, transparent 6.25%),
    linear-gradient(135deg, transparent 0 47%, rgba(177, 138, 74, .18) 47% 47.4%, transparent 47.4%);
  background-size: 6.25% 100%, 420px 420px;
  opacity: .8;
}

.marble.slab {
  position: absolute;
  width: 54vw;
  height: 54vh;
  border: 1px solid rgba(59,42,36,.10);
  background:
    radial-gradient(circle at 28% 30%, rgba(255,255,255,.54), transparent 22%),
    radial-gradient(circle at 76% 68%, rgba(201,168,165,.28), transparent 30%),
    linear-gradient(118deg, transparent 0 32%, rgba(59,42,36,.12) 32.4%, transparent 33.2% 51%, rgba(155,95,98,.18) 51.5%, transparent 52.2% 100%),
    var(--mirror);
  filter: blur(1px);
  opacity: .55;
  transform: rotate(-8deg);
}

.slab-one { top: 14%; right: -12%; }
.slab-two { bottom: 5%; left: -17%; transform: rotate(11deg); }
.slab-three, .slab-five, .slab-seven, .slab-nine { right: -7%; bottom: 8%; transform: rotate(7deg); }
.slab-four, .slab-six, .slab-eight { left: -10%; top: 18%; transform: rotate(-12deg); }

.chapter-copy {
  position: relative;
  z-index: 4;
  grid-column: 2 / span 6;
  max-width: 610px;
  filter: blur(7px);
  opacity: .35;
  transform: translateY(32px);
  transition: filter .9s ease, opacity .9s ease, transform .9s ease;
}

.chapter.active .chapter-copy { filter: blur(0); opacity: 1; transform: translateY(0); }
.right-copy { grid-column: 10 / span 6; }
.hero-copy { grid-column: 2 / span 7; align-self: end; padding-bottom: 5vh; }
.finale-copy { grid-column: 5 / span 8; text-align: center; justify-self: center; }

.eyebrow { font-size: 12px; color: var(--rouge); margin: 0 0 12px; }

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--walnut);
  letter-spacing: -.055em;
  line-height: .9;
}

h1 { font-size: clamp(70px, 12vw, 188px); max-width: 970px; }
h2 { font-size: clamp(54px, 8vw, 122px); }

.chapter-copy p {
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.52;
  max-width: 670px;
  margin: 24px 0;
}

.number {
  display: block;
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 136px);
  color: rgba(155, 95, 98, .50);
  line-height: .72;
  margin-bottom: 10px;
}

.material-chip {
  display: inline-block;
  font-size: 12px;
  color: var(--ink);
  padding: 11px 14px;
  background: rgba(215, 208, 199, .72);
  border: 1px solid var(--brass);
  box-shadow: 6px 6px 0 rgba(177, 138, 74, .24), inset 0 0 0 3px rgba(241,232,220,.55);
}

.artifact {
  position: relative;
  z-index: 3;
  grid-column: 9 / span 6;
  justify-self: center;
  width: min(42vw, 560px);
  height: min(42vw, 560px);
  filter: blur(8px);
  opacity: .48;
  transform: translate3d(0, 44px, 0) rotate(-3deg) scale(.94);
  transition: filter .9s ease, opacity .9s ease, transform .9s ease;
}

.chapter.active .artifact { filter: blur(0); opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
.hero .artifact { grid-column: 9 / span 6; filter: blur(0); opacity: 1; }
.right-copy + .artifact, .lipstick-object, .pump-object, .refill-object { grid-column: 3 / span 5; }

.compact-lid, .compact-pan, .compact-mirror, .compact-base, .lip-cap, .lip-bullet, .lip-sleeve, .lip-base, .palette-frame, .pan, .pump-head, .pump-collar, .pump-spring, .pump-straw, .pump-bottle, .jar-lid, .jar-seal, .jar-body, .socket-board, .refill-pan {
  position: absolute;
  image-rendering: pixelated;
  border: 6px solid var(--ink);
  box-shadow: 10px 10px 0 rgba(23, 19, 15, .22), inset 0 0 0 6px rgba(241,232,220,.45);
}

.compact-lid { width: 70%; height: 42%; left: 15%; top: 12%; border-radius: 50% 50% 8px 8px; background: var(--mauve); }
.compact-lid span { position: absolute; inset: 22% 28%; border: 5px solid var(--brass); background: rgba(215,208,199,.7); box-shadow: inset 8px 0 0 rgba(255,255,255,.35); }
.compact-pan { width: 62%; height: 34%; left: 19%; bottom: 17%; background: repeating-linear-gradient(90deg, var(--sage) 0 18px, #8f9878 18px 28px); }
.compact-hinge { position: absolute; width: 22%; height: 8%; left: 39%; top: 51%; background: var(--brass); border: 5px solid var(--ink); }
.compact-mirror { width: 48%; height: 30%; left: 8%; top: 8%; background: linear-gradient(135deg, var(--mirror), #ffffff 45%, var(--mirror)); transform: rotate(-9deg); }
.compact-base { width: 58%; height: 22%; right: 4%; bottom: 8%; background: var(--rouge); transform: rotate(6deg); }
.exploded .compact-lid { top: 0; left: 10%; transform: rotate(-12deg); }
.exploded .compact-mirror { top: 31%; left: 1%; }
.exploded .compact-pan { bottom: 17%; left: 33%; transform: rotate(5deg); }

.sparkle { position: absolute; width: 14px; height: 14px; background: var(--brass); box-shadow: 14px 0 0 var(--brass), 0 14px 0 var(--brass), -14px 0 0 var(--brass), 0 -14px 0 var(--brass); animation: blink 1.8s steps(2) infinite; }
.s1 { top: 10%; right: 12%; } .s2 { bottom: 18%; left: 10%; animation-delay: .4s; } .s3 { top: 48%; right: 4%; animation-delay: .8s; }

.lip-cap { width: 38%; height: 24%; left: 0; top: 8%; background: var(--rouge); transform: rotate(-17deg); }
.lip-bullet { width: 20%; height: 42%; left: 38%; top: 17%; background: linear-gradient(var(--rouge), #7d454b); clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%); }
.lip-sleeve { width: 28%; height: 48%; left: 60%; top: 24%; background: var(--brass); transform: rotate(8deg); }
.lip-base { width: 42%; height: 18%; left: 43%; bottom: 4%; background: var(--ink); }

.palette-frame { width: 78%; height: 58%; left: 9%; top: 20%; background: var(--mauve); }
.pan { width: 24%; height: 23%; background: var(--sage); }
.p1 { left: 18%; top: 30%; } .p2 { right: 20%; top: 25%; background: var(--rouge); } .p3 { left: 25%; bottom: 23%; background: var(--brass); } .p4 { right: 14%; bottom: 20%; background: var(--mirror); }
.label-ribbon { position: absolute; left: 4%; top: 7%; padding: 9px 16px; background: var(--marble); border: 3px solid var(--ink); font-size: 11px; transform: rotate(-13deg); }

.pump-head { width: 38%; height: 13%; left: 20%; top: 2%; background: var(--walnut); }
.pump-collar { width: 22%; height: 14%; left: 39%; top: 22%; background: var(--brass); }
.pump-spring { width: 12%; height: 25%; left: 44%; top: 39%; background: repeating-linear-gradient(180deg, var(--ink) 0 5px, var(--mirror) 5px 13px); }
.pump-straw { width: 7%; height: 52%; left: 65%; top: 30%; background: var(--sage); }
.pump-bottle { width: 42%; height: 46%; left: 18%; bottom: 5%; background: rgba(215,208,199,.82); }
.droplet { position: absolute; width: 16px; height: 20px; background: var(--sage); border: 4px solid var(--ink); transform: rotate(45deg); animation: drop 2.2s steps(4) infinite; }
.d1 { right: 12%; top: 22%; } .d2 { right: 27%; top: 52%; animation-delay: .4s; } .d3 { left: 6%; bottom: 12%; animation-delay: .9s; }

.jar-lid { width: 48%; height: 16%; left: 26%; top: 8%; background: var(--brass); }
.jar-seal { width: 38%; height: 10%; left: 31%; top: 31%; background: var(--mirror); transform: rotate(-8deg); }
.jar-body { width: 54%; height: 44%; left: 23%; bottom: 14%; background: rgba(167,173,141,.55); border-radius: 0 0 40px 40px; }
.barcode { position: absolute; width: 38%; height: 22%; right: 2%; bottom: 3%; background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px, var(--ink) 8px 12px, transparent 12px 20px); border: 4px solid var(--ink); }

.socket-board { width: 72%; height: 62%; left: 12%; top: 18%; background: rgba(167,173,141,.72); }
.refill-pan { width: 24%; height: 24%; border-radius: 50%; background: var(--rouge); }
.rp1 { left: 18%; top: 24%; } .rp2 { right: 18%; top: 31%; background: var(--brass); } .rp3 { left: 42%; bottom: 18%; background: var(--mauve); }

.tutorial-rail { position: absolute; left: 50%; top: 24%; height: 52%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rail-dot { width: 18px; height: 18px; background: var(--marble); border: 4px solid var(--brass); box-shadow: 4px 4px 0 rgba(23,19,15,.18); }
.rail-line { width: 4px; flex: 1; background: var(--brass); }
.object-trail { position: absolute; width: 64vw; height: 6px; background: repeating-linear-gradient(90deg, var(--brass) 0 18px, transparent 18px 31px); transform: rotate(-24deg); opacity: .62; }
.trail-left { left: 8%; top: 57%; }

.return-grid { grid-column: 3 / span 12; display: grid; grid-template-columns: repeat(6, minmax(90px, 1fr)); gap: 18px; position: relative; z-index: 3; align-self: end; margin-bottom: 10vh; }
.return-chip { min-height: 94px; display: grid; place-items: center; text-align: center; font-size: 12px; background: rgba(241,232,220,.76); border: 4px solid var(--ink); box-shadow: 8px 8px 0 rgba(177,138,74,.30); }

.focus-meter { position: fixed; right: 28px; bottom: 28px; z-index: 31; width: 150px; padding: 12px; background: rgba(241,232,220,.68); border: 1px solid rgba(177,138,74,.65); box-shadow: 5px 5px 0 rgba(23,19,15,.14); }
.loupe { width: 42px; height: 42px; border: 4px solid var(--ink); border-radius: 50%; margin-bottom: 8px; position: relative; background: rgba(215,208,199,.55); }
.loupe::after { content: ""; position: absolute; width: 28px; height: 6px; background: var(--ink); right: -22px; bottom: -9px; transform: rotate(45deg); }
.meter-copy { font-size: 10px; margin-bottom: 8px; }
.meter-bar { height: 8px; background: rgba(59,42,36,.18); }
.meter-bar span { display: block; width: 0%; height: 100%; background: var(--rouge); transition: width .15s linear; }

@keyframes blink { 50% { opacity: .25; transform: scale(.8); } }
@keyframes drop { 50% { transform: translateY(18px) rotate(45deg); opacity: .4; } }

@media (max-width: 900px) {
  .checksum { display: none; }
  .sticky-scene { display: block; padding: 108px 24px 48px; }
  .chapter-copy, .right-copy, .hero-copy, .finale-copy { max-width: none; text-align: left; }
  .artifact { width: 86vw; height: 86vw; margin: 4vh auto 2vh; }
  .hero .artifact { margin-top: 10vh; }
  .return-grid { grid-template-columns: repeat(2, 1fr); margin-top: 8vh; }
  .focus-meter { right: 14px; bottom: 14px; transform: scale(.86); transform-origin: bottom right; }
}