/* ============================================================
   ANCHOR POINT — tech deep-dive pages (Sky & Sea, World & Ecology)
   Extends cinematic.css. Full-bleed parallax topic sections with a
   glass "spec panel" so the dense system data stays legible over
   the imagery. Reuses every cinematic token, nav, depth gauge and
   the one rAF loop in cinematic.js.
   ============================================================ */

/* ---------- subpage hero (reuses .hero / .hero__* from cinematic.css) ---------- */
.hero--sub { min-height: clamp(560px, 84svh, 940px); }
.hero--sub .hero__title { font-size: clamp(3rem, 9vw, 7rem); line-height: 0.9; }
.hero--sub .hero__inner { max-width: 62rem; }

/* nav active state for the current tech page */
.nav__links a[aria-current="page"] { color: var(--snow); }
.nav__links a[aria-current="page"]::after { width: 100%; }

/* ---------- topic section: full-bleed parallax image + copy + spec panel ---------- */
.tsec {
  position: relative; overflow: clip;
  padding-block: clamp(88px, 15vh, 180px);
  display: flex; align-items: center;
}
.tsec__media {
  position: absolute; inset: -22% 0; z-index: -2;
  background-size: cover; background-position: center;
}
.tsec__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4,7,12,0.82) 0%, rgba(4,7,12,0.6) 42%, rgba(4,7,12,0.88) 100%),
    linear-gradient(90deg, rgba(4,7,12,0.92) 0%, rgba(4,7,12,0.5) 58%, rgba(4,7,12,0.32) 100%);
}
.tsec--flip .tsec__scrim {
  background:
    linear-gradient(180deg, rgba(4,7,12,0.82) 0%, rgba(4,7,12,0.6) 42%, rgba(4,7,12,0.88) 100%),
    linear-gradient(270deg, rgba(4,7,12,0.92) 0%, rgba(4,7,12,0.5) 58%, rgba(4,7,12,0.32) 100%);
}
.tsec__grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 5vw, 84px);
  align-items: center; width: 100%;
}
.tsec--flip .tsec__copy { order: 2; }
.tsec--flip .specbox { order: 1; }

.tsec__no { color: var(--sonar); display: block; margin-bottom: 16px; }
.tsec__h {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 4.4vw, 3.7rem); line-height: 0.98; letter-spacing: -0.01em; margin-bottom: 22px;
}
.tsec__body { color: var(--fog); font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.7; }
.tsec__body + .tsec__body { margin-top: 1.05em; }
.tsec__body strong { color: var(--snow); font-weight: 600; }

/* ---------- spec panel (glass card, reads over imagery) ---------- */
.specbox {
  background: rgba(9, 16, 25, 0.68);
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: clamp(22px, 2.3vw, 32px);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 34px 90px -46px rgba(0, 0, 0, 0.85);
}
.specbox__head {
  color: var(--sonar); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.spec { display: grid; }
.spec > div {
  display: grid; grid-template-columns: 8.6em 1fr; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: var(--fog-2); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.spec dd { color: var(--snow); font-size: 0.94rem; line-height: 1.45; }
.spec dd strong { color: var(--sonar); font-weight: 600; }
.spec--table > div { grid-template-columns: 1fr auto; }
/* outrank the base `.spec dd` colour rule so the good/bad grades stay coded */
.spec dd.spec__mult { font-family: var(--mono); color: var(--fog); font-variant-numeric: tabular-nums; }
.spec dd.spec__mult--good { color: var(--sonar); }
.spec dd.spec__mult--bad { color: var(--coral); }
.specbox__foot { margin-top: 14px; color: var(--fog-2); font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; }

/* ---------- sea-state bars ---------- */
.seastate { display: grid; gap: 12px; margin-bottom: 22px; }
.seastate__row { display: grid; grid-template-columns: 8.6em 1fr auto; gap: 12px; align-items: center; }
.seastate__row span { color: var(--fog-2); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.seastate__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.seastate__bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--sonar), var(--coral)); border-radius: 3px; }
.seastate__row b { color: var(--snow); font-family: var(--mono); font-size: 0.78rem; }

/* ---------- CTA band ---------- */
.ctaband { padding-block: clamp(80px, 13vh, 160px); }
.ctaband__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 44px;
  border: 1px solid var(--line-2); border-radius: 16px; padding: clamp(30px, 5vw, 60px);
  background: radial-gradient(130% 160% at 15% 0%, rgba(21, 44, 66, 0.5), rgba(4, 7, 12, 0.25));
}
.ctaband__h {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1;
}
.ctaband__lede { color: var(--fog); margin-top: 14px; max-width: 34em; }
.ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .tsec__grid { grid-template-columns: 1fr; gap: 34px; }
  .tsec--flip .tsec__copy { order: 1; }
  .tsec--flip .specbox { order: 2; }
}