:root {
  --abyss: #031826;
  --current: #06415C;
  --sonar: #17BEBB;
  --foam: #D8F3F0;
  --sand: #C8B88A;
  --mint: #7CFFCB;
  --coral: #FF6F61;
  --ink: #010A12;
  --depth: 0;
  --glow: 0.35;
  --drift: 0px;
}

/* Typography compliance trace: Roboto Flex changes width and weight with perceived depth; Roboto Flex** for the main variable-fluid system. Let weight shift; Space Grotesk** for Swiss-style section labels. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--foam);
  font-family: "Roboto Flex", "Inter", "Roboto", system-ui, sans-serif;
  font-variation-settings: "wght" calc(360 + var(--depth) * 55), "wdth" calc(118 - var(--depth) * 8), "opsz" 64;
  overflow-x: hidden;
}

body::selection { background: var(--sonar); color: var(--ink); }

.ocean-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 18%, rgba(23,190,187,0.18), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(124,255,203,0.08), transparent 26%),
    linear-gradient(180deg, var(--abyss), var(--ink) 72%);
}

.swiss-grid {
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image:
    linear-gradient(rgba(216,243,240,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,243,240,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,190,187,.13) 1px, transparent 1px);
  background-size: 100% 24px, calc(100% / 12) 100%, 100% 100%;
}

.map-overlay {
  position: absolute;
  inset: 7vh 0 auto 0;
  height: 86vh;
  opacity: .72;
  transform: translateY(calc(var(--drift) * -0.22));
}

.map-overlay path {
  fill: none;
  stroke: var(--sonar);
  stroke-width: 1.2;
  stroke-dasharray: 7 14;
}

.walk-line {
  stroke: var(--sand) !important;
  stroke-width: 2.2 !important;
  stroke-dasharray: 10 18 !important;
  filter: drop-shadow(0 0 12px rgba(200,184,138,.42));
}

.contour { opacity: calc(.16 + var(--glow)); stroke-dashoffset: calc(260 - var(--depth) * 80); transition: stroke-dashoffset .8s ease; }

.plankton {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(124,255,203,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(216,243,240,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,111,97,.45) 0 1px, transparent 1.7px);
  background-size: 131px 97px, 191px 151px, 263px 211px;
  background-position: 0 calc(var(--drift) * .35), 40px calc(var(--drift) * -.18), 90px calc(var(--drift) * .12);
  opacity: .34;
}

.instrument-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 18px 28px;
  z-index: 10;
  font: 500 11px/1 "Space Grotesk", sans-serif;
  color: rgba(216,243,240,.62);
  letter-spacing: .13em;
  text-transform: uppercase;
  mix-blend-mode: screen;
}

.chapter {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 18px;
  padding: 9vh 6vw;
  isolation: isolate;
}

.coordinate-label,
.section-kicker,
.micro-label,
.archive-label {
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--sonar);
  font-size: clamp(10px, .78vw, 13px);
}

.top-left { grid-column: 1 / 5; align-self: start; }
.right { grid-column: 9 / 13; text-align: right; align-self: start; }

.wordmark-wrap { grid-column: 2 / 10; align-self: center; transform: translateY(-4vh); }
.wordmark {
  margin: 0;
  font-size: clamp(64px, 13vw, 190px);
  line-height: .82;
  letter-spacing: -.085em;
  font-variation-settings: "wght" 520, "wdth" 132, "opsz" 144;
  color: var(--foam);
  text-shadow: 0 0 42px rgba(23,190,187,.24);
}

.hero-copy {
  max-width: 560px;
  margin: 28px 0 0 8.5vw;
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 1.18;
  color: rgba(216,243,240,.76);
}

.plate-text { grid-column: 2 / 7; align-self: center; }
.plate-text.narrow { grid-column: 7 / 12; }
.plate-text h2,
.final-copy h2 {
  margin: 10px 0 20px;
  font-size: clamp(42px, 6.4vw, 104px);
  line-height: .92;
  letter-spacing: -.055em;
  font-variation-settings: "wght" 430, "wdth" 112, "opsz" 96;
}
.plate-text p:not(.section-kicker), .final-copy p { color: rgba(216,243,240,.72); font-size: clamp(16px, 1.45vw, 23px); line-height: 1.45; }

.hex-cluster { position: absolute; transform: translate3d(0, calc(var(--drift) * -.08), 0); }
.hero-hexes { right: 7vw; bottom: 11vh; width: 420px; height: 330px; }
.sand-hexes { grid-column: 7 / 12; align-self: center; position: relative; min-height: 450px; transform: none; }

.hex-cell {
  position: absolute;
  width: 126px;
  height: 110px;
  border: 1px solid rgba(23,190,187,.62);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background: linear-gradient(145deg, rgba(6,65,92,.58), rgba(1,10,18,.36));
  color: rgba(216,243,240,.78);
  font: 600 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 34px rgba(23,190,187,.12), 0 0 26px rgba(23,190,187, calc(.04 + var(--glow) * .14));
  transition: transform .55s ease, background .55s ease, border-color .55s ease, opacity .55s ease;
}

.hex-cell:hover { transform: translateY(-8px) scale(1.06); background: rgba(23,190,187,.22); border-color: var(--mint); color: var(--mint); }
.hex-cell.large { width: 190px; height: 166px; left: 46px; top: 30px; }
.hex-cell.medium { left: 176px; top: 150px; }
.hex-cell.small { width: 82px; height: 72px; left: 254px; top: 72px; font-family: "Noto Sans JP", sans-serif; }
.sand-hexes .hex-cell:nth-child(1) { left: 3%; top: 42%; }
.sand-hexes .hex-cell:nth-child(2) { left: 26%; top: 19%; }
.sand-hexes .hex-cell:nth-child(3) { left: 43%; top: 45%; }
.sand-hexes .hex-cell:nth-child(4) { left: 64%; top: 25%; }
.sand-hexes .hex-cell:nth-child(5) { left: 70%; top: 58%; }
.wide { width: 168px; height: 146px; }
.sand { border-color: rgba(200,184,138,.78); color: var(--sand); }
.mint { border-color: rgba(124,255,203,.78); }
.blue { border-color: rgba(23,190,187,.9); }
.coral { border-color: rgba(255,111,97,.72); color: var(--coral); }
.ghost { opacity: .62; }

.depth-ruler {
  grid-column: 1 / 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-left: 1px solid rgba(216,243,240,.18);
  color: rgba(216,243,240,.42);
  font: 500 11px "Space Grotesk", sans-serif;
}

.footprint-print {
  position: absolute;
  background: var(--sand);
  opacity: calc(.08 + var(--depth) * .035);
  filter: blur(.4px) drop-shadow(0 0 22px rgba(200,184,138,.28));
  clip-path: ellipse(34% 48% at 50% 50%);
}
.heel { width: 170px; height: 245px; left: 22vw; bottom: 8vh; transform: rotate(-25deg); }
.toe { width: 112px; height: 130px; right: 18vw; top: 19vh; transform: rotate(18deg); }

.sonar-plate { grid-column: 1 / 7; align-self: center; position: relative; height: 58vh; min-height: 430px; }
.sonar-core, .sonar-ring { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sonar-core { width: 16px; height: 16px; background: var(--mint); box-shadow: 0 0 38px var(--mint); }
.sonar-ring { border: 1px solid rgba(23,190,187,.44); animation: sonarPulse 5.6s ease-in-out infinite; }
.r1 { width: 160px; height: 160px; }
.r2 { width: 310px; height: 310px; animation-delay: .7s; }
.r3 { width: 490px; height: 490px; animation-delay: 1.4s; }

@keyframes sonarPulse { 0%,100% { opacity: .18; transform: translate(-50%, -50%) scale(.94); } 48% { opacity: .82; transform: translate(-50%, -50%) scale(1.04); } }

.node-field { position: absolute; inset: 16vh 8vw; pointer-events: none; }
.node-field i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 20px rgba(200,184,138,.8); }
.node-field i:nth-child(1){left:12%;top:78%}.node-field i:nth-child(2){left:25%;top:62%}.node-field i:nth-child(3){left:35%;top:66%}.node-field i:nth-child(4){left:48%;top:45%}.node-field i:nth-child(5){left:60%;top:32%}.node-field i:nth-child(6){left:72%;top:40%}.node-field i:nth-child(7){left:80%;top:29%}.node-field i:nth-child(8){left:90%;top:14%}

.archive-grid { grid-column: 2 / 12; align-self: center; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; border-top: 1px solid rgba(216,243,240,.18); padding-top: 24px; }
.archive-label { grid-column: 1 / 13; color: var(--sand); }
.archive-grid article { min-height: 290px; padding: 24px; border-left: 1px solid rgba(23,190,187,.38); background: linear-gradient(180deg, rgba(6,65,92,.28), rgba(1,10,18,.08)); }
.archive-grid article:nth-of-type(1) { grid-column: 1 / 5; }
.archive-grid article:nth-of-type(2) { grid-column: 5 / 9; transform: translateY(54px); }
.archive-grid article:nth-of-type(3) { grid-column: 9 / 13; transform: translateY(-34px); }
.archive-grid span { display:block; color: var(--sonar); font: 500 12px "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .17em; }
.archive-grid strong { display:block; margin: 70px 0 20px; font-size: clamp(28px, 3.2vw, 54px); line-height: .95; }
.archive-grid em { color: rgba(216,243,240,.58); font-style: normal; font-family: "Noto Sans JP", sans-serif; }

.final { align-items: center; }
.final-footprint { grid-column: 2 / 7; position: relative; height: 620px; filter: drop-shadow(0 0 38px rgba(124,255,203,.36)); }
.final-footprint span, .final-footprint b { position: absolute; display: block; background: radial-gradient(circle at 35% 30%, var(--mint), var(--sand) 46%, rgba(200,184,138,.08) 72%); opacity: .78; }
.final-footprint span { width: 78px; height: 104px; border-radius: 50%; }
.final-footprint span:nth-child(1){left:260px;top:24px;transform:rotate(16deg)}.final-footprint span:nth-child(2){left:178px;top:72px;transform:rotate(4deg) scale(.86)}.final-footprint span:nth-child(3){left:116px;top:154px;transform:rotate(-10deg) scale(.76)}.final-footprint span:nth-child(4){left:78px;top:252px;transform:rotate(-18deg) scale(.68)}.final-footprint span:nth-child(5){left:72px;top:342px;transform:rotate(-20deg) scale(.58)}
.final-footprint b { left:146px; top:270px; width: 205px; height: 300px; border-radius: 48% 44% 42% 56%; transform: rotate(-18deg); }
.final-copy { grid-column: 7 / 12; }
.jp-note { font-family: "Noto Sans JP", sans-serif; color: var(--mint) !important; }

.note-panel {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 12;
  min-width: 260px;
  padding: 14px 16px;
  border: 1px solid rgba(23,190,187,.42);
  background: rgba(1,10,18,.72);
  color: var(--foam);
  font: 500 12px/1.4 "Space Grotesk", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(18px);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.note-panel.visible { opacity: 1; transform: translateY(0); }

.cursor-shell {
  position: fixed;
  z-index: 20;
  width: 34px;
  height: 24px;
  border: 1px solid rgba(255,111,97,.54);
  border-radius: 60% 60% 45% 45%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(255,111,97,.22);
}
.cursor-shell::after { content:""; position:absolute; left:6px; right:6px; bottom:6px; height:1px; background:rgba(255,111,97,.6); box-shadow:0 -5px rgba(255,111,97,.35), 0 -10px rgba(255,111,97,.2); }
.cursor-shell.active { animation: shellPing .7s ease-out; opacity: .9; }
@keyframes shellPing { from { box-shadow: 0 0 0 0 rgba(255,111,97,.34); } to { box-shadow: 0 0 0 42px rgba(255,111,97,0); } }

.chapter.in-view .hex-cell { animation: hexBreathe 4.8s ease-in-out infinite; }
@keyframes hexBreathe { 50% { filter: brightness(1.22); } }
.chapter.in-view .node-field i { animation: grainAlign 1.6s ease both; }
@keyframes grainAlign { from { opacity: .12; transform: translateY(30px) scale(.4); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 820px) {
  .instrument-header { padding: 14px 18px; gap: 20px; }
  .chapter { grid-template-columns: repeat(6, 1fr); padding: 9vh 22px; }
  .wordmark-wrap, .plate-text, .plate-text.narrow, .final-copy, .archive-grid, .sonar-plate, .final-footprint { grid-column: 1 / -1; }
  .hero-copy { margin-left: 0; }
  .hero-hexes { opacity: .7; right: -80px; }
  .sand-hexes { grid-column: 1 / -1; transform: scale(.82); transform-origin: left top; }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-grid article, .archive-grid article:nth-of-type(1), .archive-grid article:nth-of-type(2), .archive-grid article:nth-of-type(3), .archive-label { grid-column: 1; transform: none; min-height: 210px; }
  .final-footprint { transform: scale(.72); transform-origin: left center; height: 470px; }
}