:root {
  /* compliance font tokens: Montserrat** Grotesk** */
  --black: #17120D;
  --blue: #23465B;
  --brass: #C88A2D;
  --ivory: #F3DFC1;
  --red: #B73524;
  --graphite: #3A332B;
  --ochre: #E0A72E;
  --pipe-x: clamp(5.8rem, 20vw, 18rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: "Outfit", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image: radial-gradient(circle at 12% 18%, rgba(243,223,193,.16) 0 1px, transparent 1px), radial-gradient(circle at 80% 42%, rgba(200,138,45,.18) 0 1px, transparent 1px);
  background-size: 23px 23px, 31px 31px;
  mix-blend-mode: screen;
}

.tower-shell {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(58,51,43,.55) 0 1px, transparent 1px) 0 0 / 4.5rem 4.5rem,
    linear-gradient(0deg, rgba(58,51,43,.45) 0 1px, transparent 1px) 0 0 / 4.5rem 4.5rem,
    radial-gradient(circle at 90% 6%, rgba(224,167,46,.18), transparent 22rem),
    var(--black);
}

.pressure-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pipe-x);
  width: 54px;
  transform: translateX(-50%);
  z-index: 4;
  background: linear-gradient(90deg, var(--graphite), var(--black) 30%, #070504 50%, var(--black) 70%, var(--graphite));
  border-left: 3px solid var(--brass);
  border-right: 3px solid var(--brass);
  box-shadow: 0 0 0 9px rgba(23,18,13,.65), 0 0 0 11px rgba(200,138,45,.32), 18px 0 45px rgba(0,0,0,.45);
}

.oil-highlight {
  position: sticky;
  top: 0;
  width: 100%;
  height: 36vh;
  opacity: .9;
  background: linear-gradient(180deg, transparent, rgba(224,167,46,.07), rgba(243,223,193,.22), rgba(183,53,36,.16), transparent);
  transform: translateY(var(--oil, 0px));
}

.pipe-rivets {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--brass) 0 4px, transparent 5px) center 3rem / 100% 6rem repeat-y;
}

.inspection-plate, .chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(7rem, var(--pipe-x)) minmax(15rem, 30rem) 1fr;
  gap: clamp(1rem, 3vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.2rem, 4vw, 4.5rem) clamp(2rem, 5vw, 5rem) 0;
  isolation: isolate;
}

.inspection-plate::before, .chapter::before {
  content: "";
  position: absolute;
  inset: 7vh 3vw;
  z-index: -1;
  background: rgba(58,51,43,.24);
  border: 1px solid rgba(200,138,45,.22);
  clip-path: polygon(0 0, 95% 0, 100% 8%, 100% 100%, 5% 100%, 0 92%);
}

.chapter-node {
  position: sticky;
  top: 46vh;
  grid-column: 1;
  justify-self: end;
  margin-right: calc((var(--pipe-x) - 54px) / -2 - 33px);
  width: 118px;
  height: 118px;
  z-index: 8;
  border-radius: 50%;
  background: var(--brass);
  border: 12px solid var(--black);
  box-shadow: 0 0 0 4px var(--ivory), 0 0 0 11px rgba(200,138,45,.45), inset 0 0 0 8px rgba(23,18,13,.28);
  display: grid;
  place-items: center;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--black);
  font-weight: 800;
  letter-spacing: .12em;
}

.chapter-node::before {
  content: attr(data-label);
  position: absolute;
  font-size: 1.2rem;
}

.chapter-node span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--black);
  background: rgba(243,223,193,.35);
}

.chapter.is-active .chapter-node::after, .inspection-plate.is-active .chapter-node::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px solid var(--red);
  animation: nodePulse 1.8s ease-out infinite;
}

.service-tag, .rail-label {
  grid-column: 1;
  align-self: start;
  margin-top: 16vh;
  margin-left: .8rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--brass);
  font-size: .72rem;
}

.rail-label b { color: var(--ivory); font-size: .9rem; margin-bottom: .6rem; }
.rail-label small { color: rgba(243,223,193,.58); }

.hero-grid { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(20rem, 1.1fr); gap: 4vw; align-items: center; }
.hero-copy, .chapter-copy { grid-column: 2; max-width: 34rem; padding: 2rem; background: rgba(23,18,13,.68); border-left: 8px solid var(--brass); box-shadow: inset 0 0 0 1px rgba(243,223,193,.14); }

.eyebrow {
  margin: 0 0 1rem;
  font-family: "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--ochre);
  font-weight: 800;
  font-size: .72rem;
}

h1, h2 { font-family: "Space Grotesk", "Space", Inter, system-ui, sans-serif; margin: 0; line-height: .88; letter-spacing: -.055em; }
h1 { font-size: clamp(4.2rem, 13vw, 12rem); text-transform: lowercase; display: flex; flex-direction: column; text-shadow: .04em .04em 0 rgba(183,53,36,.32); }
h1 .dot { color: var(--red); display: inline-block; line-height: .3; }
h2 { font-size: clamp(2.6rem, 6.2vw, 6.7rem); max-width: 12ch; }
.lead, .chapter-copy p:not(.eyebrow) { font-size: clamp(1.05rem, 1.5vw, 1.38rem); line-height: 1.55; color: rgba(243,223,193,.82); }

.torque-strip {
  margin-top: 1.6rem;
  padding: .85rem 1rem;
  background: var(--ivory);
  color: var(--black);
  font-family: "Montserrat", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
  border-right: 18px solid var(--red);
}

.tableau, .hero-machine {
  grid-column: 3;
  position: relative;
  min-height: clamp(25rem, 62vh, 43rem);
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
}

.tableau > *, .hero-machine > * { position: absolute; }
.pencil-note { font-family: "Architects Daughter", cursive; color: var(--ivory); font-size: clamp(1rem, 1.5vw, 1.45rem); line-height: 1.05; transform: rotate(-5deg); text-shadow: 0 2px 0 var(--black); }
.pencil-note::before { content: ""; display: block; width: 90px; border-top: 2px solid var(--ivory); transform: rotate(-8deg); margin-bottom: .45rem; opacity: .75; }

.flywheel, .crest-wheel { width: min(38vw, 28rem); aspect-ratio: 1; border-radius: 50%; border: 2.4rem solid var(--brass); left: 14%; top: 12%; box-shadow: inset 0 0 0 2rem var(--black), inset 0 0 0 3rem var(--ivory); animation: wheelTurn 18s linear infinite; }
.flywheel::before, .crest-wheel::before { content: ""; position: absolute; inset: 41%; background: var(--red); border-radius: 50%; box-shadow: 0 -10rem 0 -1.1rem var(--graphite), 0 10rem 0 -1.1rem var(--graphite), 10rem 0 0 -1.1rem var(--graphite), -10rem 0 0 -1.1rem var(--graphite); }
.crest-bar { width: 62%; height: 7rem; background: var(--blue); right: 3%; bottom: 20%; clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%); }
.crest-triangle { width: 16rem; height: 16rem; background: var(--ochre); right: 17%; top: 9%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.large-gauge { right: 10%; bottom: 3%; }
.note-one { left: 2%; bottom: 9%; }

.paper-disc { width: 15rem; height: 15rem; border-radius: 50%; background: var(--ivory); left: 10%; top: 12%; border: 11px solid var(--brass); }
.paper-disc.small { width: 8rem; height: 8rem; left: 54%; top: 48%; background: transparent; border-color: var(--ivory); }
.arrow-sketch { font-family: "Architects Daughter", cursive; font-size: 7rem; color: var(--red); animation: slideArrow 2.8s ease-in-out infinite; }
.a1 { left: 34%; top: 14%; } .a2 { left: 4%; bottom: 14%; transform: rotate(18deg); }
.enamel-rect.blue { width: 48%; height: 36%; right: 4%; top: 20%; background: var(--blue); }

.stack { left: 20%; width: 58%; height: 18%; background: var(--ivory); border: 8px solid var(--brass); box-shadow: 18px 18px 0 var(--graphite); }
.plate-one { top: 18%; } .plate-two { top: 39%; background: var(--ochre); } .plate-three { top: 60%; background: var(--blue); }
.clamp { width: 78%; height: 2.2rem; left: 10%; background: var(--red); } .clamp.top { top: 7%; } .clamp.bottom { bottom: 7%; }

.red-orb { width: 17rem; height: 17rem; border-radius: 50%; background: var(--red); left: 26%; top: 22%; box-shadow: inset 0 0 0 2rem var(--brass), 0 0 0 1rem rgba(183,53,36,.22); animation: ignitionBeat 1.35s ease-in-out infinite; }
.pulse-ring { width: 23rem; height: 23rem; border: 3px solid var(--red); border-radius: 50%; left: calc(26% - 3rem); top: calc(22% - 3rem); animation: nodePulse 1.6s ease-out infinite; }
.r2 { animation-delay: .55s; }
.triangle-fire { width: 19rem; height: 19rem; background: var(--ochre); right: 8%; bottom: 12%; clip-path: polygon(50% 0, 100% 86%, 0 86%); }
.bolt-line { width: 5rem; height: 85%; background: repeating-linear-gradient(0deg, var(--ivory) 0 10px, transparent 10px 23px); left: 5%; top: 8%; }

.flow-ribbon { width: 82%; height: 68%; left: 6%; top: 11%; background: var(--black); border: 10px solid var(--graphite); border-radius: 50% 12% 50% 10% / 26% 48% 24% 52%; transform: rotate(-12deg); box-shadow: 0 0 0 9px var(--brass); animation: ribbonBreathe 3s ease-in-out infinite; }
.gate { width: 30%; height: 54%; top: 23%; opacity: .92; } .gate.ochre { left: 14%; background: var(--ochre); } .gate.blue { right: 12%; background: var(--blue); }

.gauge { width: 22rem; max-width: 70vw; aspect-ratio: 1; border-radius: 50%; background: var(--ivory); border: 1.7rem solid var(--brass); box-shadow: inset 0 0 0 1rem var(--black); right: 18%; top: 12%; }
.gauge::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 2px dashed var(--graphite); background: radial-gradient(circle, var(--brass) 0 8px, transparent 9px); }
.needle { position: absolute; width: 42%; height: 8px; background: var(--red); left: 50%; top: 50%; transform-origin: left center; transform: rotate(var(--needle, -38deg)); animation: needleTwitch 2s steps(2) infinite; }
.tick-field { width: 86%; height: 13rem; left: 4%; bottom: 8%; background: repeating-linear-gradient(90deg, var(--ivory) 0 2px, transparent 2px 22px); opacity: .7; }
.crosshair { width: 19rem; height: 19rem; left: 5%; top: 18%; border: 3px solid var(--ivory); border-radius: 50%; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--ivory); } .crosshair::before { width: 120%; height: 3px; left: -10%; top: 50%; } .crosshair::after { width: 3px; height: 120%; left: 50%; top: -10%; }

.final-crest .crest-wheel { left: 18%; top: 6%; width: min(34vw, 25rem); }
.crest-block { width: 55%; height: 38%; right: 6%; top: 28%; background: var(--blue); border: 16px solid var(--brass); }
.crest-arrow { width: 20rem; height: 15rem; left: 5%; bottom: 10%; background: var(--red); clip-path: polygon(0 32%, 60% 32%, 60% 0, 100% 50%, 60% 100%, 60% 68%, 0 68%); }
.crest-ribbon { width: 82%; height: 8rem; left: 5%; bottom: 23%; background: var(--black); border: 7px solid var(--graphite); border-radius: 4rem; }
.crest-name { right: 10%; bottom: 14%; font-family: "Space Grotesk", "Space", system-ui; font-size: clamp(2rem, 5vw, 5rem); color: var(--ivory); letter-spacing: -.05em; }

.tableau .pencil-note { right: 8%; bottom: 4%; }
.tableau-intake .pencil-note { right: 5%; bottom: 10%; }
.tableau-compression .pencil-note { right: 9%; top: 10%; bottom: auto; }
.tableau-ignition .pencil-note { left: 5%; bottom: 3%; right: auto; }
.tableau-flow .pencil-note { right: 4%; top: 8%; bottom: auto; }

.chapter:not(.is-active) .tableau { filter: saturate(.7) brightness(.82); }
.chapter.is-active .tableau { animation: lockIn .65s cubic-bezier(.2,.8,.2,1); }

@keyframes nodePulse { from { transform: scale(.82); opacity: .95; } to { transform: scale(1.42); opacity: 0; } }
@keyframes wheelTurn { to { transform: rotate(360deg); } }
@keyframes slideArrow { 0%,100% { transform: translateX(-.7rem) rotate(-4deg); } 50% { transform: translateX(1.1rem) rotate(3deg); } }
@keyframes ignitionBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ribbonBreathe { 0%,100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-10deg) scale(1.035); } }
@keyframes needleTwitch { 0%,100% { transform: rotate(var(--needle, -38deg)); } 50% { transform: rotate(calc(var(--needle, -38deg) + 10deg)); } }
@keyframes lockIn { from { transform: translateY(2rem) scale(.97); } to { transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
  :root { --pipe-x: 4.3rem; }
  .inspection-plate, .chapter { grid-template-columns: 6rem 1fr; padding-right: 1rem; gap: 1rem; }
  .hero-grid, .chapter-copy, .tableau, .hero-machine { grid-column: 2; }
  .hero-grid { grid-template-columns: 1fr; }
  .chapter-node { width: 86px; height: 86px; margin-right: -40px; border-width: 9px; }
  .rail-label, .service-tag { display: none; }
  .hero-copy, .chapter-copy { padding: 1.2rem; }
  .tableau, .hero-machine { min-height: 24rem; width: 100%; }
  .pressure-line { width: 38px; }
}