:root {
  /* Typography compliance: IBM Plex Sans Condensed** for annotations; JetBrains Mono for limit values; Source Serif 4** in small blocks. */
  --asphalt: #0B0E0D;
  --concrete: #6F7470;
  --amber: #F0A22E;
  --vermillion: #E5482E;
  --blue: #315A73;
  --chalk: #DDD5C4;
  --green: #4E6B56;
  --archivo: "Archivo Black", sans-serif;
  --condensed: "IBM Plex Sans Condensed", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --serif: "Source Serif 4", serif;
}

* { box-sizing: border-box; }

html { background: var(--asphalt); color: var(--chalk); scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--condensed);
  background:
    radial-gradient(circle at 18% 8%, rgba(240, 162, 46, .12), transparent 22rem),
    linear-gradient(90deg, rgba(49, 90, 115, .12), transparent 25%, transparent 75%, rgba(78, 107, 86, .12)),
    var(--asphalt);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .23;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(221, 213, 196, .16) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, transparent 0 11px, rgba(221, 213, 196, .025) 11px 12px),
    repeating-linear-gradient(0deg, rgba(111, 116, 112, .04) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
}

.walkthrough { position: relative; }

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(221, 213, 196, .13);
  background:
    linear-gradient(90deg, rgba(221, 213, 196, .04) 0 1px, transparent 1px calc(10vw - 1px), rgba(221, 213, 196, .035) calc(10vw - 1px) 10vw),
    linear-gradient(180deg, rgba(111, 116, 112, .16), rgba(11, 14, 13, .6));
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(221, 213, 196, .035) 18px 19px),
    radial-gradient(circle at 72% 50%, rgba(0, 0, 0, .55), transparent 24rem);
  z-index: -2;
}

.datum {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.35rem;
  background: rgba(11, 14, 13, .72);
  border-left: 1px solid rgba(221, 213, 196, .18);
  border-right: 1px solid rgba(221, 213, 196, .18);
  z-index: 20;
}

.datum.left { left: 2.4vw; }
.datum.right { right: 2.4vw; }

.datum span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-family: var(--condensed);
  font-size: .82rem;
  letter-spacing: .2em;
  color: var(--concrete);
}

.pipe-progress {
  position: fixed;
  left: 7.3vw;
  top: 7vh;
  bottom: 7vh;
  width: 22px;
  z-index: 90;
  pointer-events: none;
}

.pipe-track {
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 8px;
  background: linear-gradient(var(--blue), var(--green));
  box-shadow: 0 0 0 2px rgba(11, 14, 13, .9), 0 0 18px rgba(49, 90, 115, .5);
}

.inspection-tag {
  position: absolute;
  left: -1.1rem;
  top: 0;
  transform: translateY(0);
  width: 3.35rem;
  height: 4.7rem;
  padding: .45rem .35rem;
  color: var(--asphalt);
  background: var(--amber);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 52% 100%, 0 84%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  text-align: center;
  font-family: var(--mono);
}

.inspection-tag span { display: block; font-size: .55rem; letter-spacing: .18em; }
.inspection-tag b { display: block; margin-top: .35rem; font-size: 1.15rem; }

.rolling-door {
  position: absolute;
  inset: 6vh 10vw 9vh 11vw;
  background: linear-gradient(180deg, #181d1b, var(--asphalt));
  border: 3px solid rgba(111, 116, 112, .76);
  box-shadow: inset 0 -35px 90px rgba(0, 0, 0, .85), 0 30px 80px rgba(0, 0, 0, .55);
  transform: translateY(calc(var(--door-open, 0) * -72vh));
  transition: transform .2s linear;
  z-index: 5;
}

.door-ribs {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(221, 213, 196, .1) 0 2px, transparent 2px 42px);
}

.wordmark {
  position: absolute;
  left: -2vw;
  top: 16%;
  font-family: var(--archivo);
  font-size: clamp(5rem, 15vw, 16rem);
  letter-spacing: -.07em;
  color: rgba(221, 213, 196, .88);
  white-space: nowrap;
  clip-path: inset(0 9% 19% 0);
  text-shadow: 0 8px 0 rgba(49, 90, 115, .35);
}

.plaque, .load-plate, .plate {
  background: linear-gradient(135deg, rgba(111, 116, 112, .74), rgba(49, 90, 115, .36));
  border: 1px solid rgba(221, 213, 196, .26);
  box-shadow: inset 0 0 0 1px rgba(11, 14, 13, .7), 0 18px 50px rgba(0,0,0,.38);
}

.plaque {
  position: absolute;
  right: 5vw;
  bottom: 9vh;
  width: min(28rem, 42vw);
  padding: 1.25rem;
  font-family: var(--mono);
}

.plaque small, .load-plate small, .kicker {
  display: block;
  color: var(--amber);
  font-family: var(--mono);
  letter-spacing: .18em;
  font-size: .72rem;
}

.plaque strong, .load-plate strong { display: block; margin: .65rem 0; font-size: .96rem; color: var(--chalk); }
.plaque em { color: var(--asphalt); background: var(--chalk); padding: .16rem .32rem; font-style: normal; }

.seal { position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--amber) 0 28px, var(--asphalt) 28px 56px); }
.seal.top { top: -8px; }
.seal.bottom { bottom: -8px; }

.lamp {
  position: absolute;
  right: 12vw;
  top: 12vh;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 18px var(--amber), 0 0 80px rgba(240, 162, 46, .5);
  animation: lampFlicker 5s infinite steps(1);
  z-index: 8;
}

@keyframes lampFlicker { 0%, 9%, 13%, 100% { opacity: 1; } 10%, 12% { opacity: .25; } 54% { opacity: .74; } }

.chapter-copy { position: absolute; z-index: 10; max-width: 34rem; }
.entrance-note { left: 12vw; bottom: 9vh; opacity: calc(.15 + var(--door-open, 0) * .85); }

h1, h2 {
  margin: .2rem 0 1rem;
  font-family: var(--archivo);
  line-height: .88;
  text-transform: uppercase;
  color: var(--chalk);
}

h1 { font-size: clamp(4rem, 12vw, 12rem); max-width: 12ch; }
h2 { font-size: clamp(3rem, 8vw, 8.5rem); letter-spacing: -.045em; }

.serif { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.42rem); line-height: 1.45; color: rgba(221, 213, 196, .9); }
.threshold-label { position: absolute; bottom: 1.6rem; right: 9vw; font-family: var(--mono); color: var(--concrete); letter-spacing: .14em; }

.bulkhead { position: absolute; top: 0; bottom: 0; width: 12vw; background: linear-gradient(90deg, #050606, #1d2320, #050606); z-index: 4; box-shadow: 18px 0 50px rgba(0,0,0,.55); }
.bulkhead-a { left: 0; transform: translateX(calc(var(--door-open, 0) * -7vw)); }
.bulkhead.thick { left: 14vw; width: 7vw; }

.section-number {
  position: absolute;
  top: 4vh;
  left: 10vw;
  font-family: var(--archivo);
  font-size: clamp(8rem, 22vw, 24rem);
  line-height: .8;
  color: rgba(221, 213, 196, .08);
  z-index: 1;
}

.pipefield { position: absolute; inset: 13vh 4vw 8vh 16vw; }
.pipe { position: absolute; left: 0; right: 0; height: 38px; border-radius: 40px; box-shadow: inset 0 -12px 0 rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.35); }
.pipe span { position: absolute; inset: 8px 8px auto; height: 6px; border-radius: 5px; background: rgba(221,213,196,.18); }
.pipe.blue { background: var(--blue); }
.pipe.green { background: var(--green); }
.pipe.amber { background: var(--amber); }
.p1 { top: 8vh; transform: translateX(calc(var(--shift, 0) * -5vw)); }
.p2 { top: 30vh; left: 8vw; right: 12vw; transform: translateX(calc(var(--shift, 0) * 9vw)); }
.p3 { bottom: 9vh; left: -4vw; right: 23vw; transform: translateX(calc(var(--shift, 0) * -8vw)); }
.cable-tray { position: absolute; top: 18vh; left: 5vw; right: 7vw; height: 76px; border: 1px solid rgba(221,213,196,.25); background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(221,213,196,.18) 28px 30px); transform: skewY(-2deg); }
.hatch { position: absolute; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; color: var(--chalk); font-family: var(--archivo); background: var(--asphalt); border: 10px solid var(--concrete); box-shadow: inset 0 0 0 2px var(--chalk); }
.hatch-12 { right: 16vw; top: 4vh; }
.hatch-18 { left: 12vw; bottom: 4vh; }
.spine-plate { left: 22vw; top: 24vh; padding: 1.6rem; max-width: 42rem; }
.tag-stack { position: absolute; right: 10vw; bottom: 14vh; display: grid; gap: .5rem; font-family: var(--mono); color: var(--asphalt); }
.tag-stack span { background: var(--chalk); padding: .32rem .55rem; transform: rotate(var(--r, -1deg)); }
.tag-stack span:nth-child(2) { --r: 1.5deg; background: var(--amber); }
.tag-stack span:nth-child(3) { --r: -.5deg; background: var(--green); color: var(--chalk); }
.chalk-line { position: absolute; left: 19vw; bottom: 20vh; width: 48vw; height: 3px; background: var(--chalk); transform-origin: left; transform: scaleX(var(--chalk, 0)) rotate(-4deg); opacity: .75; }

.pressure { background: radial-gradient(circle at 38% 46%, rgba(49,90,115,.25), transparent 28rem), var(--asphalt); }
.tank { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgba(221,213,196,.16), rgba(111,116,112,.38) 38%, rgba(11,14,13,.9) 70%); border: 14px solid rgba(111,116,112,.6); box-shadow: inset 0 0 80px rgba(0,0,0,.8), 0 0 0 1px rgba(221,213,196,.15); }
.tank-one { width: min(42vw, 560px); height: min(42vw, 560px); left: 12vw; top: 17vh; }
.tank-two { width: min(25vw, 320px); height: min(25vw, 320px); right: 13vw; top: 13vh; }
.gauge { position: absolute; width: 138px; height: 138px; border-radius: 50%; right: 15%; top: 18%; background: conic-gradient(from -130deg, var(--green) 0 55%, var(--amber) 55% 78%, var(--vermillion) 78% 88%, #1a1d1b 88%); border: 8px solid var(--chalk); display: grid; place-items: center; font-family: var(--mono); color: var(--chalk); }
.gauge.small { width: 98px; height: 98px; border-width: 6px; }
.gauge::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--asphalt); }
.gauge i { position: absolute; z-index: 2; width: 46%; height: 4px; background: var(--vermillion); transform-origin: 100% 50%; transform: rotate(42deg); animation: jitter .9s infinite; }
.gauge span { z-index: 3; align-self: end; margin-bottom: 21px; font-size: .75rem; }
@keyframes jitter { 0%,100% { transform: rotate(39deg); } 35% { transform: rotate(43deg); } 60% { transform: rotate(41deg); } }
.valve { position: absolute; left: 16%; bottom: 14%; width: 96px; height: 96px; border-radius: 50%; border: 10px solid var(--green); box-shadow: inset 0 0 0 9px var(--asphalt); }
.steam { position: absolute; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, rgba(221,213,196,.18), transparent 65%); filter: blur(9px); animation: steam 4.7s infinite ease-in-out; }
.s1 { left: 49vw; top: 21vh; } .s2 { left: 23vw; bottom: 14vh; animation-delay: 1.5s; }
@keyframes steam { 0% { transform: translateY(20px) scale(.55); opacity: 0; } 40% { opacity: .6; } 100% { transform: translateY(-80px) scale(1.4); opacity: 0; } }
.warning-arc { position: absolute; right: 12vw; bottom: 18vh; padding: .6rem 1rem; border: 2px solid var(--vermillion); color: var(--vermillion); font-family: var(--mono); letter-spacing: .14em; transform: rotate(4deg); }
.chamber-note { right: 8vw; bottom: 28vh; max-width: 40rem; }

.limit { background: linear-gradient(90deg, rgba(78,107,86,.18), transparent 35%), var(--asphalt); }
.void-room { position: absolute; inset: 14vh 15vw 13vh 20vw; border: 5px solid rgba(221,213,196,.19); background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.88), rgba(11,14,13,.62)); box-shadow: inset 0 0 100px rgba(0,0,0,.9); }
.missing-capacity { position: absolute; inset: 12%; display: grid; place-items: center; border: 2px dashed rgba(221,213,196,.21); color: rgba(221,213,196,.11); font-family: var(--archivo); font-size: clamp(2rem, 6vw, 7rem); text-align: center; }
.brace { position: absolute; background: var(--amber); height: 18px; transform-origin: center; box-shadow: 0 7px 18px rgba(0,0,0,.45); }
.b1 { left: 6%; right: 44%; top: 23%; transform: rotate(-17deg); }
.b2 { left: 48%; right: 12%; bottom: 25%; transform: rotate(18deg); }
.b3 { left: 20%; right: 20%; top: 52%; transform: rotate(2deg); background: var(--green); }
.load-plate { position: absolute; right: 10vw; top: 15vh; padding: 1.2rem; width: 19rem; font-family: var(--mono); }
.load-plate b { display: block; font-size: 2rem; color: var(--vermillion); }
.limit-copy { left: 13vw; bottom: 12vh; max-width: 43rem; }
.survey-cross { position: absolute; width: 54px; height: 54px; opacity: .7; }
.survey-cross::before, .survey-cross::after { content:""; position:absolute; background:var(--chalk); }
.survey-cross::before { left: 50%; top: 0; width: 2px; height: 100%; } .survey-cross::after { top: 50%; left: 0; height: 2px; width: 100%; }
.c1 { left: 31vw; top: 19vh; } .c2 { right: 18vw; bottom: 22vh; } .c3 { left: 58vw; top: 44vh; }

.yard { background: linear-gradient(180deg, rgba(221,213,196,.05), transparent 42%), radial-gradient(circle at 65% 73%, rgba(78,107,86,.24), transparent 22rem), var(--asphalt); }
.yard-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 33vh; background: linear-gradient(rgba(111,116,112,.26), rgba(111,116,112,.09)), repeating-linear-gradient(90deg, transparent 0 90px, rgba(221,213,196,.12) 90px 92px); border-top: 2px solid rgba(221,213,196,.18); }
.capped-system { position: absolute; bottom: 24vh; width: 18vw; height: 54px; background: var(--blue); border-radius: 50px; box-shadow: inset 0 -13px 0 rgba(0,0,0,.25); }
.capped-system span { position: absolute; right: -28px; top: -18px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--asphalt) 0 35%, var(--concrete) 36% 54%, var(--chalk) 55% 59%, var(--asphalt) 60%); }
.cap-a { left: 9vw; background: var(--green); } .cap-b { left: 35vw; bottom: 34vh; } .cap-c { right: 13vw; background: var(--amber); }
.puddle { position: absolute; left: 35vw; bottom: 9vh; width: 28vw; height: 6vh; border-radius: 50%; background: rgba(49,90,115,.32); color: rgba(221,213,196,.18); display: grid; place-items: center; transform: scaleY(.45) rotate(180deg); font-family: var(--archivo); font-size: 3vw; filter: blur(.4px); }
.yard-copy { left: 12vw; top: 13vh; max-width: 47rem; }
.inspection-stamp { position: absolute; right: 12vw; bottom: 11vh; padding: 1rem 1.15rem; border: 3px solid var(--vermillion); color: var(--vermillion); background: transparent; font-family: var(--mono); transform: rotate(-4deg); cursor: pointer; }
.inspection-stamp span, .inspection-stamp b { display: block; }
.inspection-stamp b { font-size: 1.15rem; margin-top: .4rem; }
.inspection-stamp.is-open { background: var(--vermillion); color: var(--asphalt); transform: rotate(0deg) scale(1.06); }

@media (max-width: 760px) {
  .datum { width: 2.1rem; }
  .pipe-progress { left: auto; right: 1.2rem; }
  .rolling-door { inset: 6vh 5vw 8vh; }
  .wordmark { font-size: 6rem; writing-mode: vertical-rl; top: 5%; left: 6%; }
  .plaque, .load-plate { width: auto; left: 15vw; right: 9vw; }
  .chapter-copy { left: 13vw; right: 8vw; max-width: none; }
  .spine-plate, .chamber-note, .limit-copy, .yard-copy { left: 13vw; right: 9vw; top: auto; bottom: 10vh; }
  h1 { font-size: 4rem; } h2 { font-size: 3.2rem; }
  .tank-one { left: 5vw; width: 78vw; height: 78vw; }
  .tank-two, .tag-stack { display: none; }
  .void-room { inset: 16vh 8vw 23vh 12vw; }
}