:root {
  --chalk: #e7e5da;
  --basalt: #252a2c;
  --mineral-blue: #397382;
  --sulfur: #d8b531;
  --fossil: #765b42;
  --deep-clay: #a14838;
}

.strata-page {
  margin: 0;
  background: var(--chalk);
  color: var(--basalt);
  font-family: "Barlow Semi Condensed", sans-serif;
  overflow-x: hidden;
}

.strata-intro {
  min-height: 100svh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 24vw);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
  padding: 7rem clamp(1.2rem, 7vw, 8rem) 4rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(37,42,44,.18);
}

.strata-intro-copy {
  position: relative;
  z-index: 2;
}

.strata-note {
  margin: 0 0 clamp(2rem, 7vh, 5rem);
  color: var(--mineral-blue);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
}

.strata-intro h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(4rem, 9vw, 10rem);
  font-weight: 350;
  line-height: .8;
  letter-spacing: -.06em;
}

.strata-intro-copy > p:last-child {
  max-width: 39rem;
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.45;
}

.sample-head {
  justify-self: center;
  width: min(13rem, 19vw);
  min-width: 8rem;
  height: min(72vh, 44rem);
  display: grid;
  grid-template-rows: 2rem 1.1fr .8fr 1.2fr;
  filter: drop-shadow(1.2rem 1.2rem 0 rgba(37,42,44,.07));
}

.sample-cap {
  background: var(--basalt);
  clip-path: polygon(7% 0,93% 0,100% 100%,0 100%);
}

.sample-core {
  border-inline: 1px solid rgba(37,42,44,.35);
}

.sample-core-1 {
  background:
    repeating-linear-gradient(8deg, rgba(37,42,44,.1) 0 2px, transparent 2px 18px),
    var(--sulfur);
}

.sample-core-2 {
  background:
    radial-gradient(circle at 35% 30%, rgba(231,229,218,.55) 0 4%, transparent 4.5%),
    radial-gradient(circle at 70% 70%, rgba(231,229,218,.35) 0 6%, transparent 6.5%),
    var(--mineral-blue);
}

.sample-core-3 {
  background:
    repeating-linear-gradient(-13deg, transparent 0 13px, rgba(37,42,44,.14) 13px 15px),
    var(--fossil);
  border-bottom: 1px solid rgba(37,42,44,.35);
}

.strata-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, 23vw) minmax(0, 1fr) minmax(8rem, 19vw);
  background: var(--basalt);
}

.strata-events {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
}

.stratum {
  min-height: 112svh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8rem clamp(1.2rem, 7vw, 8rem);
  overflow: hidden;
  color: var(--layer-ink, var(--chalk));
  background: var(--layer, var(--basalt));
}

.stratum::before,
.stratum::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stratum::before {
  opacity: .32;
  background:
    repeating-linear-gradient(var(--tilt, 5deg), transparent 0 30px, rgba(255,255,255,.13) 31px 32px),
    radial-gradient(ellipse at var(--grain-x, 70%) 42%, transparent 0 8%, rgba(0,0,0,.09) 8.5% 9%, transparent 9.5%);
  background-size: auto, 19rem 13rem;
}

.stratum::after {
  inset: auto 0 0 0;
  height: 14vh;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.12));
}

.stratum-content {
  position: relative;
  z-index: 2;
  width: min(43rem, 52vw);
  margin-left: clamp(12rem, 30vw, 34rem);
}

.stratum-age {
  display: block;
  margin-bottom: .6rem;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  font-weight: 500;
  opacity: .68;
}

.stratum h2 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3.1rem, 7vw, 8rem);
  font-weight: 390;
  line-height: .82;
  letter-spacing: -.055em;
}

.stratum p {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  opacity: .74;
}

.stratum-depth {
  position: absolute;
  left: 0;
  bottom: -1rem;
  font-size: clamp(8rem, 22vw, 27rem);
  font-weight: 300;
  line-height: .65;
  letter-spacing: -.08em;
  opacity: .055;
  white-space: nowrap;
  user-select: none;
}

.specimen {
  position: absolute;
  z-index: 1;
  right: clamp(6rem, 14vw, 18rem);
  top: 50%;
  width: clamp(10rem, 19vw, 22rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: .25;
}

.specimen-ring {
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1.8rem transparent,
    inset 0 0 0 calc(1.8rem + 1px) currentColor,
    inset 0 0 0 3.8rem transparent,
    inset 0 0 0 calc(3.8rem + 1px) currentColor;
}

.specimen-ring::before,
.specimen-ring::after {
  content: "";
  position: absolute;
  background: currentColor;
  opacity: .6;
}

.specimen-ring::before {
  width: 140%;
  height: 1px;
  top: 50%;
  left: -20%;
  transform: rotate(22deg);
}

.specimen-ring::after {
  width: 1px;
  height: 140%;
  left: 50%;
  top: -20%;
  transform: rotate(22deg);
}

.specimen-cell {
  border: 1px solid currentColor;
  border-radius: 52% 48% 37% 63%;
}

.specimen-cell::before,
.specimen-cell::after {
  content: "";
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.specimen-cell::before {
  inset: 18% 25% 28% 15%;
}

.specimen-cell::after {
  width: 17%;
  aspect-ratio: 1;
  right: 16%;
  bottom: 19%;
  background: currentColor;
}

.specimen-shell {
  border: 1px solid currentColor;
  border-radius: 50%;
}

.specimen-shell::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, transparent 0 14deg, currentColor 15deg 16deg);
  opacity: .72;
}

.strata-readout,
.signal-panel,
.core-rail {
  grid-row: 1;
  align-self: start;
  position: sticky;
  z-index: 8;
  pointer-events: none;
}

.strata-readout {
  grid-column: 1;
  top: 29vh;
  margin-top: 22vh;
  padding-left: clamp(1rem, 3vw, 3rem);
  color: var(--chalk);
  mix-blend-mode: difference;
}

.readout-age {
  display: block;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 350;
  line-height: .78;
  letter-spacing: -.06em;
}

.readout-unit,
.readout-name {
  display: block;
}

.readout-unit {
  margin-top: .6rem;
  font-size: .75rem;
  opacity: .55;
}

.readout-name {
  max-width: 12rem;
  margin-top: 1.7rem;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.1;
}

.signal-panel {
  grid-column: 3;
  top: 20vh;
  height: 60vh;
  margin: 20vh 4.5rem 0 0;
  color: var(--chalk);
  mix-blend-mode: difference;
}

.signal-panel svg {
  width: 100%;
  height: calc(100% - 2rem);
  overflow: visible;
}

.signal-grid,
.signal-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.signal-grid {
  stroke: currentColor;
  stroke-width: 1;
  opacity: .09;
}

.signal-line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: .68;
}

.signal-panel span {
  display: block;
  text-align: right;
  font-size: .68rem;
  opacity: .5;
}

.core-rail {
  grid-column: 3;
  top: 15vh;
  justify-self: end;
  width: 4rem;
  height: 70vh;
  margin: 15vh 1rem 0 0;
  color: var(--chalk);
  mix-blend-mode: difference;
  pointer-events: auto;
}

.rail-line {
  position: absolute;
  top: 0;
  right: .8rem;
  width: 1px;
  height: 100%;
  background: rgba(231,229,218,.24);
}

.rail-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: top;
  opacity: .62;
}

.rail-thumb {
  position: absolute;
  top: 0;
  left: -.42rem;
  width: .86rem;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--basalt);
  cursor: grab;
}

.rail-thumb:active {
  cursor: grabbing;
}

.rail-points {
  position: absolute;
  inset: 0;
}

.rail-point {
  position: absolute;
  right: 1.65rem;
  width: 2.2rem;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 .62rem/1 "Barlow Semi Condensed", sans-serif;
  text-align: right;
  opacity: .36;
  cursor: pointer;
}

.rail-point::after {
  content: "";
  position: absolute;
  right: -.92rem;
  top: 50%;
  width: .35rem;
  height: 1px;
  background: currentColor;
}

.rail-point.is-active {
  opacity: 1;
}

.rail-point.is-active::after {
  width: .75rem;
}

.strata-outro {
  min-height: 70svh;
  display: grid;
  place-content: center;
  gap: 2rem;
  padding: 4rem 1.2rem;
  background: var(--chalk);
  color: var(--basalt);
  text-align: center;
}

.strata-outro p {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 6.5rem);
  font-weight: 350;
  line-height: .9;
  letter-spacing: -.05em;
}

.strata-outro a {
  justify-self: center;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 850px) {
  .strata-intro {
    grid-template-columns: 1fr;
    padding-bottom: 8rem;
  }

  .sample-head {
    position: absolute;
    right: -2rem;
    bottom: -6rem;
    width: 8rem;
    height: 45vh;
    opacity: .45;
  }

  .strata-story {
    grid-template-columns: 1fr;
  }

  .stratum {
    padding-inline: 1.2rem;
  }

  .stratum-content {
    width: min(34rem, 78vw);
    margin-left: clamp(3rem, 10vw, 6rem);
  }

  .specimen {
    right: -5vw;
    width: 48vw;
    opacity: .12;
  }

  .strata-readout {
    grid-column: 1;
    top: 4.2rem;
    margin-top: 0;
    padding: .8rem 1.2rem;
    background: rgba(37,42,44,.62);
    backdrop-filter: blur(10px);
    mix-blend-mode: normal;
  }

  .readout-age {
    display: inline;
    font-size: 1.4rem;
  }

  .readout-unit {
    display: inline;
    margin-left: .4rem;
  }

  .readout-name {
    margin-top: .2rem;
    font-size: .84rem;
  }

  .signal-panel {
    display: none;
  }

  .core-rail {
    grid-column: 1;
    right: 0;
    top: 18vh;
    height: 64vh;
    margin: 18vh .2rem 0 0;
    mix-blend-mode: normal;
  }

  .rail-point {
    display: none;
  }
}