:root {
  /* Typography compliance tokens from DESIGN.md: IBM Plex Mono** in 500 weight with wide tracking. */
  --concrete: #D7D1C3;
  --charcoal: #171512;
  --red: #C6372F;
  --green: #2F7D4A;
  --blue: #2E6FD8;
  --zinc: #6F746C;
  --chalk: #F4EEE2;
  --graphite: #2B2B2B;
  --title: "Archivo Black", Impact, sans-serif;
  --body: "Alegreya Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --italic: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  background: var(--concrete);
  color: var(--charcoal);
  font-family: var(--body);
}

button { font: inherit; }

.conservatory {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 18%, rgba(46, 111, 216, .22) 0 8vw, transparent 8.2vw),
    linear-gradient(90deg, rgba(23, 21, 18, .12) 1px, transparent 1px),
    linear-gradient(rgba(23, 21, 18, .10) 1px, transparent 1px),
    var(--concrete);
  background-size: auto, 8.333vw 100%, 100% 13vh, auto;
}

.concrete-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background:
    repeating-linear-gradient(115deg, rgba(23,21,18,.035) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 22% 72%, rgba(47,125,74,.12), transparent 28%),
    radial-gradient(circle at 72% 34%, rgba(198,55,47,.10), transparent 24%);
  mix-blend-mode: multiply;
}

.registration-cross {
  position: fixed;
  z-index: 8;
  width: 34px;
  height: 34px;
  pointer-events: none;
}
.registration-cross::before, .registration-cross::after {
  content: "";
  position: absolute;
  background: var(--graphite);
  opacity: .55;
}
.registration-cross::before { left: 16px; top: 0; width: 2px; height: 34px; }
.registration-cross::after { left: 0; top: 16px; width: 34px; height: 2px; }
.cross-one { left: 3vw; top: 4vh; }
.cross-two { right: 5vw; bottom: 6vh; transform: rotate(45deg); }

.chamber {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
  padding: clamp(18px, 3vw, 48px) clamp(48px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(24px, 4.8vw, 72px);
  opacity: 0;
  transform: translateY(9vh) scale(.985);
  pointer-events: none;
  transition: opacity 700ms ease, transform 950ms cubic-bezier(.16,1,.3,1);
}

.chamber.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.slab, .plate {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(23,21,18,.82);
  background:
    linear-gradient(135deg, rgba(244,238,226,.52), transparent 44%),
    var(--concrete);
  box-shadow: 18px 18px 0 rgba(23,21,18,.16), inset 0 0 0 1px rgba(244,238,226,.45);
}

.slab::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(43,43,43,.32);
  pointer-events: none;
}

.slab-hero { grid-column: 1 / 11; grid-row: 1 / 8; }
.offset-slab { grid-column: 2 / 12; grid-row: 1 / 7; }
.zinc-slab { grid-column: 1 / 9; grid-row: 2 / 9; background-color: var(--zinc); color: var(--chalk); }
.zigzag-slab { grid-column: 3 / 13; grid-row: 1 / 8; }
.index-slab { grid-column: 1 / 10; grid-row: 1 / 9; background: linear-gradient(135deg, rgba(244,238,226,.86), rgba(215,209,195,.8)); }

.red-edge { border-left: clamp(18px, 2.6vw, 42px) solid var(--red); }

.plate {
  z-index: 6;
  align-self: end;
  padding: 18px 20px;
  min-height: 118px;
  font-family: var(--italic);
  font-size: clamp(18px, 2vw, 31px);
  line-height: 1.05;
  background: var(--chalk);
  transition: transform 180ms ease-out;
  will-change: transform;
}
.plate span, .micro-label, .enamel-tag, .index-grid span {
  display: block;
  font-family: var(--mono);
  font-size: clamp(10px, .78vw, 13px);
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.4;
  font-style: normal;
}
.plate span { margin-bottom: 18px; color: var(--zinc); }
.plate { grid-column: 9 / 13; grid-row: 6 / 8; }
.tag-red { grid-column: 1 / 5; grid-row: 6 / 8; border-color: var(--red); }
.blue { grid-column: 8 / 13; grid-row: 1 / 3; border-color: var(--blue); }
.green { grid-column: 1 / 5; grid-row: 2 / 4; border-color: var(--green); }
.final { grid-column: 9 / 13; grid-row: 6 / 8; border-color: var(--graphite); }

.micro-label {
  position: absolute;
  z-index: 4;
  top: clamp(22px, 3vw, 46px);
  left: clamp(20px, 3.2vw, 54px);
  width: max-content;
  max-width: 72%;
  padding: 10px 12px;
  color: var(--chalk);
  background: var(--graphite);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.zinc-slab .micro-label { background: var(--blue); color: var(--chalk); }
.zigzag-slab .micro-label { background: var(--green); }
.index-slab .micro-label { color: var(--charcoal); background: var(--chalk); border: 1px solid var(--charcoal); }

h1, h2 {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--title);
  font-weight: 400;
  letter-spacing: -.085em;
  line-height: .78;
  text-transform: uppercase;
}
h1 {
  left: -4vw;
  bottom: -3vh;
  font-size: clamp(120px, 24vw, 390px);
  color: var(--charcoal);
}
h2 {
  left: clamp(24px, 4vw, 68px);
  bottom: clamp(42px, 6vw, 92px);
  font-size: clamp(84px, 17vw, 280px);
  color: var(--charcoal);
}
.zinc-slab h2 { color: var(--chalk); }
.index-slab h2 { font-size: clamp(82px, 14vw, 220px); }

.sentence {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 5vw, 88px);
  top: clamp(92px, 17vh, 180px);
  max-width: 31ch;
  margin: 0;
  color: rgba(23,21,18,.82);
  font-size: clamp(22px, 3vw, 48px);
  line-height: .98;
  font-weight: 500;
}
.zinc-slab .sentence { color: var(--chalk); }
.index-slab .sentence { right: 6vw; top: 18vh; }

.enamel-tag {
  position: absolute;
  z-index: 5;
  right: 11vw;
  bottom: 20vh;
  padding: 18px 22px;
  color: var(--chalk);
  background: var(--red);
  box-shadow: 10px 10px 0 rgba(23,21,18,.24);
  transition: transform 180ms ease-out;
}

.blue-void, .punched-void {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: inset 18px 18px 0 rgba(23,21,18,.18);
}
.blue-void { width: 24vw; height: 24vw; right: -12vw; top: 15vh; }
.punched-void { width: 32vw; height: 32vw; right: -16vw; bottom: -9vw; background: var(--charcoal); }

.draw-svg {
  position: absolute;
  z-index: 3;
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leaf-shadow { left: 9vw; top: 6vh; width: 18vw; height: 62vh; stroke: var(--green); opacity: .62; }
.pressure-diagram { inset: 24% 5% 14% 9%; width: 84%; height: 54%; stroke: var(--red); }
.zinc-lines { left: 6vw; top: 14vh; width: 56vw; height: 67vh; stroke: var(--chalk); opacity: .74; }
.zigzag-veins { left: 4vw; top: 17vh; width: 75vw; height: 55vh; stroke: var(--green); }
.zigzag-veins .seam { stroke: var(--charcoal); stroke-width: 16; opacity: .9; }
.draw-svg path { stroke-dasharray: var(--path-length, 1000); stroke-dashoffset: var(--path-length, 1000); transition: stroke-dashoffset 1800ms cubic-bezier(.22,1,.36,1); }
.chamber.active .draw-svg path { stroke-dashoffset: 0; }

.washer-field {
  grid-column: 10 / 13;
  grid-row: 2 / 6;
  position: relative;
}
.washer-field i {
  position: absolute;
  width: clamp(42px, 6vw, 92px);
  aspect-ratio: 1;
  border: 14px solid var(--zinc);
  border-radius: 50%;
  background: var(--concrete);
  box-shadow: 8px 8px 0 rgba(23,21,18,.18);
}
.washer-field i:nth-child(1) { left: 4%; top: 4%; }
.washer-field i:nth-child(2) { right: 10%; top: 28%; border-color: var(--blue); }
.washer-field i:nth-child(3) { left: 22%; bottom: 18%; border-color: var(--red); }
.washer-field i:nth-child(4) { right: 5%; bottom: 0; border-color: var(--green); }

.index-grid {
  position: absolute;
  z-index: 5;
  left: clamp(24px, 4vw, 68px);
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(28px, 5vw, 76px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.index-grid span {
  padding: 16px;
  min-height: 78px;
  border: 2px solid var(--charcoal);
  background: var(--chalk);
  color: var(--graphite);
}
.index-grid span:nth-child(1) { border-color: var(--red); }
.index-grid span:nth-child(2) { border-color: var(--green); }
.index-grid span:nth-child(3) { border-color: var(--blue); }
.index-grid span:nth-child(4) { border-color: var(--zinc); }

.chamber-nav {
  position: fixed;
  z-index: 20;
  right: clamp(12px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.nav-bolt {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid var(--graphite);
  border-radius: 50%;
  background: var(--chalk);
  cursor: pointer;
  transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.nav-bolt span {
  position: absolute;
  right: 27px;
  top: -3px;
  width: max-content;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--chalk);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.nav-bolt.active { transform: scale(1.35); background: var(--red); box-shadow: 0 0 0 10px rgba(198,55,47,.18); }
.nav-bolt:nth-child(3).active { background: var(--blue); box-shadow: 0 0 0 10px rgba(46,111,216,.18); }
.nav-bolt:nth-child(4).active { background: var(--green); box-shadow: 0 0 0 10px rgba(47,125,74,.18); }
.nav-bolt.active span, .nav-bolt:hover span { opacity: 1; transform: translateX(0); }

.chamber.active .slab { animation: slabArrive 920ms cubic-bezier(.16,1,.3,1) both; }
.chamber.active .plate { animation: plateClamp 780ms 120ms cubic-bezier(.16,1,.3,1) both; }
@keyframes slabArrive { from { transform: translateY(8vh); } to { transform: translateY(0); } }
@keyframes plateClamp { from { opacity: 0; transform: translateY(26px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (max-width: 840px) {
  html, body { overflow: auto; }
  .conservatory { height: auto; min-height: 100vh; overflow: visible; }
  .chamber { position: relative; min-height: 100vh; opacity: 1; transform: none; pointer-events: auto; padding: 18px 42px 24px 16px; display: flex; flex-direction: column; }
  .slab { min-height: 74vh; width: 100%; }
  .plate { min-height: 108px; width: 88%; align-self: flex-start; }
  h1 { font-size: 34vw; }
  h2 { font-size: 23vw; }
  .sentence { left: 22px; right: 22px; top: 96px; max-width: none; font-size: 28px; }
  .index-grid { grid-template-columns: 1fr; }
  .chamber-nav { right: 10px; }
}