:root {
  /* Fonts loaded from (Google Fonts: Playfair Display, IBM Plex Sans Condensed, IBM Plex Mono, Libre Franklin */
  --signal-coral: #F45B69;
  --sunken-brass: #C49A4A;
  --abyss-navy: #06283D;
  --black-depth: #031923;
  --bathymetric-blue: #0B4F6C;
  --tide-teal: #1B998B;
  --aged-paper: #E8DCC2;
  --ink-brown: #3B2F2F;
  --scroll-phase: 0;
  --needle-rotation: -42deg;
  --seam-wave: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-brown);
  font-family: "Libre Franklin", sans-serif;
  background: linear-gradient(135deg, #06283D 0%, #0B4F6C 55%, #031923 100%);
  overflow-x: hidden;
}

.console {
  display: grid;
  grid-template-columns: minmax(320px, 42vw) 1fr;
  min-height: 100vh;
  position: relative;
}

.chart-table {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 3rem);
  background:
    radial-gradient(circle at 20% 20%, rgba(196,154,74,.24), transparent 22%),
    radial-gradient(circle at 84% 16%, rgba(244,91,105,.10), transparent 20%),
    radial-gradient(circle at 55% 82%, rgba(11,79,108,.14), transparent 26%),
    repeating-linear-gradient(90deg, rgba(59,47,47,.045) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, #E8DCC2, #d8c89f 100%);
  border-right: 1px solid rgba(59,47,47,.35);
  box-shadow: inset -28px 0 45px rgba(59,47,47,.18);
  z-index: 3;
}

.paper-grain, .paper-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(59,47,47,.20) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 48%, rgba(59,47,47,.14) 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 83%, rgba(6,40,61,.12) 0 1px, transparent 1.4px);
  background-size: 29px 31px, 43px 47px, 37px 41px;
}

.label, .stamp, .variable-legend, .dial em, .route-label, .stamp-mark {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.brand-stack { position: relative; z-index: 2; }
.brand-stack h1 {
  margin: .4rem 0 1rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: .72;
  letter-spacing: -.075em;
  color: var(--ink-brown);
  text-shadow: 2px 2px 0 rgba(196,154,74,.38);
}
.label { font-size: .78rem; font-weight: 700; color: var(--bathymetric-blue); }
.deck {
  max-width: 28rem;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: rgba(59,47,47,.86);
}

.variable-legend {
  position: absolute;
  left: clamp(1.4rem, 3vw, 3rem);
  bottom: 7rem;
  display: grid;
  gap: .7rem;
  min-width: 15rem;
}
.variable-legend div {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  padding: .55rem .7rem;
  border-top: 1px solid rgba(59,47,47,.35);
  background: rgba(232,220,194,.38);
  transform: rotate(calc((var(--scroll-phase) * .8deg) - .6deg));
}
.variable-legend b, .coordinates { font-family: "IBM Plex Mono", monospace; color: var(--bathymetric-blue); }
.coordinates {
  position: absolute;
  bottom: 2rem;
  left: clamp(1.4rem, 3vw, 3rem);
  font-size: .78rem;
}

.dial {
  position: absolute;
  right: clamp(1rem, 3vw, 2.4rem);
  bottom: 4.4rem;
  width: 9.5rem;
  height: 9.5rem;
  border: 9px double var(--sunken-brass);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,220,194,.96) 0 38%, rgba(196,154,74,.22) 39% 42%, transparent 43%), conic-gradient(from 220deg, var(--ink-brown) 0 4deg, transparent 4deg 18deg);
  box-shadow: 0 13px 28px rgba(59,47,47,.25);
}
.needle {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 3.7rem;
  background: var(--signal-coral);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--needle-rotation));
  transition: transform .25s ease-out;
}
.hub { position: absolute; inset: 50% auto auto 50%; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink-brown); transform: translate(-50%, -50%); }
.dial em { position: absolute; width: 12rem; left: -1.2rem; bottom: -2.1rem; font-size: .68rem; font-style: normal; color: var(--ink-brown); }

.brass-seam {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(42vw - 8px);
  width: 18px;
  background: linear-gradient(90deg, #3B2F2F, #C49A4A 45%, #7b5a24 55%, #031923);
  box-shadow: 0 0 34px rgba(3,25,35,.55);
  z-index: 8;
  transform: translateX(calc(sin(var(--scroll-phase)) * 1px));
  border-radius: 50% / calc(50% + var(--seam-wave));
}
.brass-seam::before {
  content: "";
  position: absolute;
  inset: 0 -9px;
  background: radial-gradient(ellipse at 50% calc(20% + var(--seam-wave)), rgba(244,91,105,.28), transparent 35%);
  filter: blur(8px);
}
.pip-nav { position: sticky; top: 42vh; display: grid; justify-items: center; gap: 1rem; }
.pip {
  width: .78rem; height: .78rem; border-radius: 50%;
  background: var(--sunken-brass);
  border: 1px solid var(--ink-brown);
  box-shadow: 0 0 0 0 rgba(196,154,74,.45);
  transition: transform .3s, background .3s, box-shadow .3s;
}
.pip.active { background: var(--signal-coral); transform: scale(1.25); box-shadow: 0 0 0 12px rgba(196,154,74,.12); }

.simulation-panel { position: relative; min-width: 0; }
.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 8rem) clamp(2rem, 6vw, 7rem);
}
.paper-scene {
  background:
    radial-gradient(circle at 78% 22%, rgba(27,153,139,.16), transparent 20%),
    radial-gradient(circle at 38% 58%, rgba(244,91,105,.12), transparent 24%),
    repeating-linear-gradient(0deg, rgba(59,47,47,.04) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, #E8DCC2 0%, #d4c295 100%);
}
.ocean-scene {
  background: linear-gradient(135deg, #06283D 0%, #0B4F6C 55%, #031923 100%);
  color: var(--aged-paper);
}
.current-scene {
  background: radial-gradient(circle at 50% 40%, rgba(27,153,139,.22), transparent 28%), linear-gradient(135deg, #06283D 0%, #0B4F6C 55%, #031923 100%);
  color: var(--aged-paper);
}
.scene-copy { position: relative; z-index: 3; max-width: 46rem; margin-left: auto; }
.scene-copy h2 {
  margin: .55rem 0 1rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(3.2rem, 8vw, 8.5rem);
  line-height: .86;
  letter-spacing: -.055em;
  color: var(--ink-brown);
  mix-blend-mode: multiply;
}
.scene-copy.light h2, .crossing h2 { color: var(--aged-paper); mix-blend-mode: screen; }
.scene-copy p { font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.65; max-width: 37rem; }
.stamp { display: inline-block; color: var(--signal-coral); font-weight: 700; font-size: .78rem; }
.light .stamp, .crossing .stamp { color: var(--sunken-brass); }

.bathymetry, .future-lines, .s-curve, .map-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bathymetry path { fill: none; stroke: rgba(11,79,108,.34); stroke-width: 3; stroke-linecap: round; }
.ripple-field { position: absolute; width: 44rem; height: 44rem; left: 14%; top: 17%; transform: translate(-50%, -50%); }
.ripple-field span {
  position: absolute; inset: 0; border: 2px solid var(--tide-teal); border-radius: 50%;
  opacity: 0; animation: ripple 7s infinite; filter: blur(.2px);
}
.ripple-field span:nth-child(2) { animation-delay: 1.4s; border-color: var(--sunken-brass); }
.ripple-field span:nth-child(3) { animation-delay: 2.8s; border-color: var(--signal-coral); }
.ripple-field span:nth-child(4) { animation-delay: 4.2s; }
@keyframes ripple { 0% { transform: scale(.2); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; filter: blur(.5px); } }

.paper-slip, .floating-slip {
  position: absolute; z-index: 4; padding: 1rem 1.3rem; min-width: 11rem;
  background: var(--aged-paper); color: var(--ink-brown);
  border: 1px solid rgba(59,47,47,.32);
  box-shadow: 0 16px 35px rgba(3,25,35,.28);
  font-family: "IBM Plex Mono", monospace;
}
.slip-one { left: 8%; bottom: 16%; transform: rotate(-8deg); }
.porthole { position: absolute; inset: 8% 8% 8% 12%; border-radius: 48%; border: 22px solid rgba(196,154,74,.38); box-shadow: inset 0 0 80px #031923, 0 0 60px rgba(27,153,139,.15); }
.future-lines path, .map-routes path, .s-curve path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: calc(850 - (var(--scroll-phase) * 220px)); }
.future-lines .main { stroke: var(--sunken-brass); stroke-width: 12; }
.future-lines .coral { stroke: var(--signal-coral); stroke-width: 6; }
.future-lines .teal { stroke: var(--tide-teal); stroke-width: 5; }
.floating-slip.a { top: 18%; right: 14%; transform: rotate(7deg); }
.floating-slip.b { bottom: 15%; left: 18%; transform: rotate(-5deg); }

.wide-ribbon {
  position: absolute; left: -11%; top: 35%; z-index: 2;
  font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(4rem, 12vw, 12rem);
  line-height: .8; color: rgba(232,220,194,.10); white-space: nowrap; transform: rotate(-9deg);
}
.s-curve path { stroke: rgba(196,154,74,.52); stroke-width: 42; }
.s-curve path + path { stroke: rgba(27,153,139,.42); stroke-width: 13; }
.crossing { margin: 12vh auto 0 0; max-width: 54rem; }
.route-label { position: absolute; z-index: 4; color: var(--aged-paper); border-top: 1px solid var(--sunken-brass); padding-top: .55rem; }
.route-label.one { right: 12%; top: 22%; }
.route-label.two { left: 11%; bottom: 17%; color: var(--signal-coral); }

.map-routes path { stroke: var(--bathymetric-blue); stroke-width: 8; opacity: .78; }
.map-routes path:nth-child(2) { stroke: var(--tide-teal); stroke-width: 5; }
.map-routes path:nth-child(3) { stroke: var(--signal-coral); stroke-width: 4; }
.pin { position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--sunken-brass); box-shadow: 0 0 0 8px rgba(196,154,74,.18); }
.p1 { top: 24%; right: 21%; } .p2 { top: 55%; left: 33%; } .p3 { bottom: 24%; right: 16%; }
.stamp-mark {
  position: absolute; right: 8%; bottom: 10%; z-index: 4;
  border: 5px double var(--signal-coral); color: var(--signal-coral);
  padding: 1.2rem 1.6rem; transform: rotate(-7deg); font-weight: 700; font-size: 1.05rem;
}
.final-copy { margin: 5vh auto 0 0; }

@media (max-width: 820px) {
  .console { display: block; }
  .chart-table { position: relative; height: 92vh; }
  .brass-seam { left: 0; right: 0; top: 92vh; bottom: auto; width: 100%; height: 16px; }
  .pip-nav { display: flex; justify-content: center; position: static; padding-top: 2px; }
  .scene-copy { margin-left: 0; }
  .dial { transform: scale(.82); transform-origin: bottom right; }
}