:root {
  /* DESIGN typography: IBM Plex Mono for isotope labels; Space Grotesk** for primary interface text and compact explanatory passages. */
  --ice: #BFE7EA;
  --bark: #3A342E;
  --black: #20201D;
  --moss: #4D6B4A;
  --gold: #B8893A;
  --ember: #E05A2A;
  --vellum: #D8D1C3;
  --void: #050505;
  --lamp-x: 50vw;
  --lamp-y: 50vh;
  --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--vellum);
  background: var(--void);
  font-family: "Space Grotesk", "Inter", sans-serif;
  overflow-x: hidden;
}

.carbon-assembly {
  position: relative;
  min-height: 600vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(77, 107, 74, .18), transparent 32rem),
    linear-gradient(180deg, var(--void), var(--black) 34%, #11100e 62%, var(--void));
}

.carbon-assembly::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  z-index: 3;
  background-image:
    radial-gradient(circle, rgba(216, 209, 195, .16) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 42%, rgba(184, 137, 58, .06) 42.3% 42.9%, transparent 43.2%);
  background-size: 31px 31px, 100% 100%;
  mix-blend-mode: screen;
}

.lamp {
  position: fixed;
  left: var(--lamp-x);
  top: var(--lamp-y);
  width: 38vw;
  height: 28vw;
  min-width: 320px;
  min-height: 240px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(ellipse, rgba(191, 231, 234, .2) 0%, rgba(216, 209, 195, .12) 24%, rgba(184, 137, 58, .07) 43%, transparent 70%);
  filter: blur(12px);
  mix-blend-mode: screen;
}

.core-line {
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  z-index: 4;
  background: linear-gradient(180deg, transparent, rgba(216, 209, 195, .22), rgba(224, 90, 42, .36), transparent);
}

.core-line span {
  display: block;
  width: 5px;
  height: calc(var(--progress) * 100%);
  margin-left: -2px;
  background: linear-gradient(var(--ice), var(--gold), var(--ember));
  box-shadow: 0 0 22px rgba(224, 90, 42, .55);
}

.isotope-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
}

.isotope-nav a {
  color: rgba(216, 209, 195, .55);
  text-decoration: none;
  display: grid;
  justify-items: end;
  letter-spacing: .06em;
  transition: color .35s ease, transform .35s ease;
}

.isotope-nav b { font-size: 12px; font-weight: 500; }
.isotope-nav span { font-size: 9px; text-transform: uppercase; }
.isotope-nav a.is-active { color: var(--ice); transform: translateX(-8px); }

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 8vw;
  overflow: hidden;
  isolation: isolate;
}

.chamber::after {
  content: attr(data-chamber);
  position: absolute;
  left: 22px;
  bottom: 24px;
  z-index: 2;
  color: rgba(216, 209, 195, .28);
  font: 500 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.chamber-copy {
  position: relative;
  z-index: 5;
  max-width: 720px;
  opacity: .35;
  transform: translateY(42px);
  transition: opacity .8s ease, transform .8s ease;
}

.chamber.is-visible .chamber-copy { opacity: 1; transform: translateY(0); }

.sample-id {
  margin: 0 0 18px;
  color: var(--gold);
  font: 500 12px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(74px, 15vw, 220px); }
h2 { font-size: clamp(58px, 10vw, 150px); }

.lead, .chamber-copy p:not(.sample-id) {
  max-width: 620px;
  color: rgba(216, 209, 195, .78);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.32;
}

.soot-arrival {
  background:
    radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(191, 231, 234, .11), transparent 22vw),
    linear-gradient(135deg, var(--void), #090908 58%, var(--black));
}

.dust-field, .dust-field::before, .dust-field::after {
  position: absolute;
  inset: -10%;
  content: "";
  background-image: radial-gradient(circle, rgba(216, 209, 195, .22) 0 1px, transparent 1.4px);
  background-size: 38px 38px;
  opacity: .18;
  transform: rotate(-7deg);
}

.dust-field::before { background-size: 17px 17px; opacity: .16; transform: rotate(11deg); }
.dust-field::after { background-size: 91px 91px; opacity: .14; transform: rotate(23deg); }

.domain-etch {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: transparent;
  font: 500 clamp(80px, 18vw, 260px)/1 "Cormorant Garamond", serif;
  letter-spacing: -.06em;
  background: radial-gradient(circle at var(--lamp-x) var(--lamp-y), rgba(216, 209, 195, .34), rgba(184, 137, 58, .12) 23%, transparent 38%);
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .75;
  z-index: 1;
}

.opening-copy { align-self: end; margin-bottom: 6vh; }
.oval-gauge { position: absolute; right: 11vw; top: 18vh; width: 210px; height: 210px; border: 1px solid rgba(184, 137, 58, .35); border-radius: 50%; }
.oval-gauge i { position: absolute; inset: 18%; border: 1px solid rgba(191, 231, 234, .18); border-radius: 48% 52% 45% 55%; transform: rotate(calc(var(--progress) * 180deg)); }
.oval-gauge i:nth-child(2) { inset: 31%; border-color: rgba(224, 90, 42, .28); }
.oval-gauge i:nth-child(3) { inset: 44%; border-color: rgba(216, 209, 195, .22); }

.graphite-table { background: linear-gradient(100deg, #10100e, var(--black) 52%, var(--bark)); }
.graphite-slab { width: min(78vw, 1050px); min-height: 58vh; padding: 6vw; background: linear-gradient(155deg, rgba(58, 52, 46, .94), rgba(32, 32, 29, .92)), repeating-linear-gradient(175deg, transparent 0 8px, rgba(216, 209, 195, .045) 9px 10px); box-shadow: 0 30px 120px rgba(0,0,0,.55), inset 0 0 0 1px rgba(216,209,195,.08); transform: rotate(-2deg); }
.slab-text { max-width: 620px; transform: rotate(2deg); }
.ring-group { position: absolute; right: 9%; top: 12%; width: 300px; height: 300px; }
.ring-group span { position: absolute; width: 74px; height: 74px; border: 1px solid rgba(191, 231, 234, .32); border-radius: 50%; }
.ring-group span:nth-child(1) { left: 100px; top: 0; }
.ring-group span:nth-child(2) { left: 178px; top: 55px; }
.ring-group span:nth-child(3) { left: 156px; top: 148px; }
.ring-group span:nth-child(4) { left: 58px; top: 148px; }
.ring-group span:nth-child(5) { left: 28px; top: 55px; }
.ring-group span:nth-child(6) { left: 98px; top: 83px; border-color: var(--ember); }
.fracture { position: absolute; width: 42vw; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); transform: rotate(-18deg); left: -5vw; top: 35%; box-shadow: 0 0 20px var(--ember); }
.specimen-slip { position: absolute; right: 8vw; bottom: 12vh; z-index: 6; width: 280px; padding: 26px; background: rgba(216, 209, 195, .88); color: var(--black); transform: rotate(4deg); box-shadow: 0 24px 60px rgba(0,0,0,.38); }
.specimen-slip span { font-family: "Noto Sans JP", sans-serif; color: var(--moss); font-size: 12px; }
.specimen-slip strong { display: block; margin: 12px 0; font-family: "IBM Plex Mono", monospace; color: var(--ember); }
.specimen-slip p { margin: 0; font-size: 14px; }

.porous-council { background: radial-gradient(circle at 30% 55%, rgba(77, 107, 74, .28), transparent 35vw), linear-gradient(180deg, var(--black), #111511); }
.council-copy { margin-left: auto; }
.pore-map { position: absolute; inset: 10vh 38vw 8vh 6vw; z-index: 2; }
.pore-map span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, transparent 0 35%, rgba(5,5,5,.85) 36% 67%, rgba(184,137,58,.34) 68%); box-shadow: inset 0 0 28px rgba(0,0,0,.9), 0 0 18px rgba(184,137,58,.1); transition: transform .6s ease; }
.pore-map span:nth-child(1) { width: 150px; height: 150px; left: 2%; top: 8%; }
.pore-map span:nth-child(2) { width: 72px; height: 72px; left: 31%; top: 4%; }
.pore-map span:nth-child(3) { width: 210px; height: 210px; left: 51%; top: 15%; }
.pore-map span:nth-child(4) { width: 96px; height: 96px; left: 12%; top: 40%; }
.pore-map span:nth-child(5) { width: 130px; height: 130px; left: 34%; top: 38%; }
.pore-map span:nth-child(6) { width: 62px; height: 62px; left: 73%; top: 49%; }
.pore-map span:nth-child(7) { width: 180px; height: 180px; left: 2%; top: 67%; }
.pore-map span:nth-child(8) { width: 88px; height: 88px; left: 49%; top: 69%; }
.pore-map span:nth-child(9) { width: 42px; height: 42px; left: 82%; top: 8%; }
.pore-map span:nth-child(10) { width: 122px; height: 122px; left: 68%; top: 75%; }
.pore-map span:nth-child(11) { width: 54px; height: 54px; left: 27%; top: 80%; }
.pore-map span:nth-child(12) { width: 102px; height: 102px; left: 62%; top: 39%; }
.tree-rings { position: absolute; right: 8vw; bottom: 7vh; width: 260px; height: 260px; opacity: .45; }
.tree-rings span { position: absolute; inset: calc(var(--i, 0) * 25px); border: 1px solid rgba(216,209,195,.22); border-radius: 47% 53% 55% 45%; }
.tree-rings span:nth-child(1) { --i: 0; } .tree-rings span:nth-child(2) { --i: 1; } .tree-rings span:nth-child(3) { --i: 2; } .tree-rings span:nth-child(4) { --i: 3; }

.diamond-pressure { background: radial-gradient(circle at 70% 35%, rgba(191, 231, 234, .17), transparent 26vw), linear-gradient(140deg, #080808, #181817 48%, var(--void)); }
.pressure-copy { margin-left: 8vw; }
.pressure-grid { position: absolute; inset: 0; z-index: 1; perspective: 900px; }
.shard { position: absolute; background: linear-gradient(135deg, rgba(191,231,234,.06), rgba(191,231,234,.35), rgba(5,5,5,.05)); clip-path: polygon(50% 0, 100% 72%, 58% 100%, 0 58%); border: 1px solid rgba(191,231,234,.2); filter: drop-shadow(0 0 36px rgba(191,231,234,.18)); animation: refract 8s ease-in-out infinite; }
.shard-one { width: 31vw; height: 38vw; right: 9vw; top: 10vh; }
.shard-two { width: 18vw; height: 22vw; right: 32vw; bottom: 8vh; animation-delay: -2s; }
.shard-three { width: 15vw; height: 18vw; left: 18vw; top: 12vh; animation-delay: -4s; }
.shard-four { width: 10vw; height: 13vw; right: 8vw; bottom: 12vh; animation-delay: -6s; }
@keyframes refract { 0%,100% { transform: rotateX(0) rotateZ(-4deg); opacity: .5; } 50% { transform: rotateX(18deg) rotateZ(5deg); opacity: .9; } }
.pressure-gauge { position: absolute; left: 11vw; bottom: 10vh; width: 230px; height: 115px; border: 1px solid rgba(216,209,195,.22); border-bottom: none; border-radius: 230px 230px 0 0; }
.pressure-gauge span { position: absolute; bottom: 0; left: 50%; width: 1px; height: 96px; background: var(--ember); transform-origin: bottom; transform: rotate(calc(-55deg + var(--progress) * 110deg)); box-shadow: 0 0 20px var(--ember); }

.biochar-treaty { background: linear-gradient(180deg, #12120f, var(--bark)); }
.soil-core { position: absolute; left: 7vw; top: 8vh; bottom: 8vh; width: min(28vw, 360px); display: grid; box-shadow: inset 0 0 0 1px rgba(216,209,195,.1), 0 35px 100px rgba(0,0,0,.35); }
.soil-core span:nth-child(1) { background: #050505; }
.soil-core span:nth-child(2) { background: #20201D; }
.soil-core span:nth-child(3) { background: #3A342E; }
.soil-core span:nth-child(4) { background: #4D6B4A; }
.soil-core span:nth-child(5) { background: #B8893A; }
.treaty-copy { margin-left: min(42vw, 520px); }
.treaty-seal { position: absolute; right: 10vw; top: 12vh; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(224,90,42,.42); display: grid; place-items: center; color: var(--vellum); font-family: "Noto Sans JP", sans-serif; transform: rotate(-12deg); }
.treaty-seal b { position: absolute; font: 500 46px/1 "Cormorant Garamond", serif; color: var(--ember); }
.treaty-seal span { transform: translateY(-48px); color: var(--ice); }

.closing-core { min-height: 100vh; place-items: center; text-align: center; background: radial-gradient(circle, rgba(216,209,195,.08), transparent 36vw), var(--void); }
.closing-copy { margin: auto; }
.ash-fingerprint { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; background: repeating-radial-gradient(ellipse at 48% 50%, transparent 0 14px, rgba(216,209,195,.08) 15px 17px, transparent 18px 30px); transform: rotate(-16deg); opacity: .8; }

@media (max-width: 820px) {
  .isotope-nav { display: none; }
  .chamber { padding: 22vh 7vw 12vh; }
  .graphite-slab { width: 100%; transform: none; }
  .slab-text { transform: none; }
  .specimen-slip, .oval-gauge, .tree-rings, .treaty-seal { display: none; }
  .pore-map { inset: 8vh 8vw auto; height: 45vh; opacity: .55; }
  .pressure-copy, .council-copy, .treaty-copy { margin-left: 0; }
  .soil-core { left: 0; width: 100%; height: 32vh; top: 0; bottom: auto; opacity: .38; }
}