:root {
  /* Design compliance tokens: Interactive | | | Oxidized pipe IntersectionObserver animations. Total page target: 50KB. textures CSS-generated (gradients IntersectionObserver` `threshold: 0.15`. elements `opacity: (Google (Google */
  --aged-linen: #f5efe6;
  --ochre: #d4a854;
  --sage: #8a9070;
  --umber: #3a2e24;
  --rose: #b8897a;
  --copper: #c27849;
  --terracotta: #c67b5c;
  --warm-black: #2a2118;
  --clay: #5c4a3a;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--umber);
  background: var(--warm-black);
  font-family: "Source Code Pro", "Courier New", monospace;
  font-weight: 400;
  overflow-x: hidden;
}

.earth-scroll { position: relative; }

.layer {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-attachment: fixed;
  background-size: 120px 120px, auto;
  isolation: isolate;
}

.layer::before,
.layer::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 5.5rem;
  z-index: 1;
  pointer-events: none;
}

.layer::before { top: -1px; }
.layer::after { bottom: -1px; }

.texture {
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.03;
  mix-blend-mode: multiply;
  z-index: 0;
}

.column {
  width: min(100%, 48rem);
  margin: 0 auto;
  padding: 8rem 2rem;
  position: relative;
  z-index: 2;
}

.surface {
  background-color: var(--aged-linen);
  background-image:
    repeating-linear-gradient(0deg, rgba(138, 144, 112, 0.13) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(138, 144, 112, 0.13) 0 1px, transparent 1px 32px);
  color: var(--umber);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 82% 98%, 63% 95%, 38% 99%, 16% 96%, 0 98%);
}

.surface::after { background: var(--terracotta); clip-path: polygon(0 60%, 16% 38%, 39% 64%, 62% 32%, 83% 58%, 100% 36%, 100% 100%, 0 100%); }

.topsoil {
  background-color: var(--terracotta);
  color: var(--aged-linen);
  margin-top: -4rem;
  padding-top: 4rem;
  clip-path: polygon(0 4%, 15% 2%, 38% 5%, 63% 1%, 83% 4%, 100% 2%, 100% 96%, 78% 98%, 55% 95%, 27% 99%, 0 96%);
}

.topsoil::after { background: var(--clay); clip-path: polygon(0 48%, 24% 67%, 52% 38%, 76% 64%, 100% 45%, 100% 100%, 0 100%); }

.clay {
  background-color: var(--clay);
  color: var(--aged-linen);
  margin-top: -4rem;
  padding-top: 4rem;
  background-blend-mode: multiply;
  clip-path: polygon(0 3%, 25% 5%, 51% 2%, 76% 6%, 100% 3%, 100% 97%, 72% 94%, 46% 98%, 18% 95%, 0 97%);
}

.clay .texture,
.bedrock .texture { opacity: 0.045; mix-blend-mode: multiply; }

.clay::after { background: var(--warm-black); clip-path: polygon(0 58%, 20% 36%, 46% 63%, 69% 40%, 100% 62%, 100% 100%, 0 100%); }

.bedrock {
  background-color: var(--warm-black);
  color: var(--aged-linen);
  min-height: 95vh;
  margin-top: -4rem;
  padding-top: 4rem;
  clip-path: polygon(0 4%, 20% 1%, 47% 5%, 70% 2%, 100% 6%, 100% 100%, 0 100%);
}

.label {
  margin: 0 0 2rem;
  font-family: "VT323", "Courier New", monospace;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.topsoil .label,
.clay .label,
.concept-label,
.bedrock .label { color: var(--ochre); }

h1,
h2,
.closing {
  font-family: "Space Mono", "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 6vw, 5rem);
  text-transform: lowercase;
}

p {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.75;
}

.site-title {
  display: inline-block;
  margin: 0;
  max-width: max-content;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--ochre);
  font-size: clamp(2.7rem, 12vw, 8rem);
  animation: type-reveal 2.5s steps(12, end) both, blink 1s step-end 0s 4, cursor-fade 1s ease 3.1s forwards;
}

.hero-column { padding-top: 16vh; padding-bottom: 18vh; }

.contours {
  position: absolute;
  right: -9rem;
  bottom: 7rem;
  width: min(55vw, 38rem);
  height: min(55vw, 38rem);
  z-index: 1;
  opacity: 0.62;
}

.contours span {
  position: absolute;
  border: 2px solid var(--sage);
  border-radius: 43% 57% 52% 48% / 49% 41% 59% 51%;
  inset: var(--inset, 0);
}

.contours span:nth-child(1) { --inset: 0; }
.contours span:nth-child(2) { --inset: 3rem; border-color: var(--ochre); }
.contours span:nth-child(3) { --inset: 6rem; }
.contours span:nth-child(4) { --inset: 9rem; border-color: var(--rose); }

.circuit-stitch {
  width: min(36rem, 85vw);
  height: 9rem;
  margin-top: 7rem;
  position: relative;
  background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgba(138, 144, 112, 0.38) 12px 14px, transparent 14px 24px);
  background-size: 48px 8px;
  animation: stitch-flow 30s linear infinite;
}

.circuit-stitch::before,
.circuit-stitch::after,
.circuit-stitch i {
  content: "";
  position: absolute;
  display: block;
  background: var(--sage);
}

.circuit-stitch::before { left: 0; right: 20%; top: 4.4rem; height: 3px; background: repeating-linear-gradient(90deg, var(--sage) 0 6px, transparent 6px 13px); }
.circuit-stitch::after { width: 4rem; height: 4rem; border: 3px dotted var(--ochre); border-radius: 50%; background: transparent; right: 12%; top: 2.3rem; }
.circuit-stitch i:nth-child(1) { width: 5rem; height: 3px; left: 16%; top: 2.5rem; transform: rotate(35deg); }
.circuit-stitch i:nth-child(2) { width: 5rem; height: 3px; left: 16%; top: 6.5rem; transform: rotate(-35deg); }
.circuit-stitch i:nth-child(3) { width: 3px; height: 4rem; left: 42%; top: 2.5rem; background: repeating-linear-gradient(0deg, var(--ochre) 0 8px, transparent 8px 14px); }
.circuit-stitch i:nth-child(4) { width: 5rem; height: 3px; left: 50%; top: 4.4rem; }
.circuit-stitch i:nth-child(5) { width: 1rem; height: 1rem; left: 67%; top: 3.95rem; background: var(--rose); box-shadow: 2rem 0 0 var(--sage), 4rem 0 0 var(--ochre); }

.journal-column {
  max-width: 42rem;
  border-left: 1.1rem solid transparent;
  border-image: repeating-linear-gradient(180deg, var(--ochre) 0 8px, transparent 8px 16px, var(--aged-linen) 16px 24px, transparent 24px 32px) 14;
}

.lead { font-weight: 400; }

.textile-border,
.concept::before,
.concept::after {
  height: 1rem;
  background-image:
    repeating-linear-gradient(90deg, var(--ochre) 0 8px, transparent 8px 16px, var(--rose) 16px 24px, transparent 24px 32px);
  background-size: 64px 16px;
  animation: stitch-flow 30s linear infinite;
}

.textile-border { margin: 0 0 2rem; }

.concept { position: relative; padding: 2.25rem 0; }
.concept::before,
.concept::after { content: ""; display: block; opacity: 0.7; }
.concept::before { margin-bottom: 2rem; }
.concept::after { margin-top: 2rem; }

.concept-label {
  margin: 0 0 0.75rem;
  font-family: "VT323", "Courier New", monospace;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.concept h2 { font-size: clamp(1.6rem, 4vw, 3rem); }
.concept p:last-child { margin-bottom: 0; }

.morse {
  margin: 1rem 0;
  color: var(--ochre);
  font-family: "VT323", "Courier New", monospace;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: 0.18em;
  white-space: nowrap;
  overflow: hidden;
}

.closing-column { text-align: center; }

.closing {
  margin: 0 auto;
  max-width: 46rem;
  font-size: clamp(2.2rem, 6vw, 5rem);
  text-transform: lowercase;
}

.footer {
  margin-top: 5rem;
  font-family: "VT323", "Courier New", monospace;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.26em;
  color: var(--sage);
}

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
  transition-delay: var(--delay, 0ms);
}

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

@keyframes type-reveal { from { width: 0; } to { width: 12ch; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes cursor-fade { to { border-right-color: transparent; } }
@keyframes stitch-flow { to { background-position: 192px 0; } }

@media (max-width: 768px) {
  .layer { background-attachment: scroll; }
  .column { padding-left: 1.5rem; padding-right: 1.5rem; }
  .journal-column { border-left: 0.35rem solid var(--ochre); border-image: none; }
  .textile-border,
  .concept::before,
  .concept::after { background-image: none; background-color: var(--ochre); height: 2px; }
  .contours { right: -13rem; width: 30rem; height: 30rem; opacity: 0.36; }
  .circuit-stitch { margin-top: 5rem; transform: scale(0.9); transform-origin: left center; }
}