/* Neverport: the wheelhouse instrument panel. Deep sea navy, sonar teal, a sodium-orange warning light,
   technical display type, mono readouts, chart-grid background, bracketed panels. */
body.t-neverport {
  --stage: #06121a;
  --stage-2: #0a1c26;
  --bg: #06121a;
  --ink: #e2f2f5;
  --dim: #7e9ea9;
  --line: rgba(76, 201, 217, .2);
  --g: #4cc9d9;
  --warn: #ff8a3d;
  --f-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r-lg: 6px;
  --r-md: 4px;
  --corners:
    linear-gradient(var(--g), var(--g)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--g), var(--g)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--g), var(--g)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--g), var(--g)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--g), var(--g)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--g), var(--g)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--g), var(--g)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--g), var(--g)) 100% 100% / 1px 14px no-repeat;
  background-color: var(--bg);
  background-image:
    radial-gradient(70% 50% at 50% 0%, rgba(76, 201, 217, .1), transparent 70%),
    linear-gradient(rgba(76, 201, 217, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 201, 217, .045) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
  color: var(--ink);
}
.t-neverport h1, .t-neverport h2, .t-neverport h3 { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.t-neverport .mono, .t-neverport dt, .t-neverport .crumbs, .t-neverport .tag, .t-neverport figcaption, .t-neverport .status .st { font-family: var(--f-mono); }

/* Header */
.t-neverport .top.solid { background: rgba(6, 18, 26, .86); border-bottom: 1px solid var(--line); }
.t-neverport .nav { border-radius: 4px; background: rgba(6, 18, 26, .7); border-color: var(--line); }
.t-neverport .nav a { border-radius: 2px; font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.t-neverport .nav .cta { background: var(--g); color: #04121a; }

/* Hero: through the wheelhouse glass */
.t-neverport .gp-hero::before {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(6,18,26,.6) 0%, rgba(6,18,26,0) 25%, rgba(6,18,26,0) 50%, var(--bg) 100%);
}
.t-neverport .gp-hero .wrap { position: relative; }
.t-neverport .gp-hero h1 { font-size: clamp(64px, 12vw, 190px); letter-spacing: .04em; line-height: .86; }
.t-neverport .gp-hero .tagline { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .18em; font-size: clamp(14px, 1.3vw, 17px); color: var(--g); }
.t-neverport .crumbs { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.t-neverport .tag { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; background: rgba(6, 18, 26, .7); border-color: var(--line); }
.t-neverport .tag::before { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* Buttons */
.t-neverport .btn { border-radius: 2px; font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; border-color: var(--g); background: rgba(76, 201, 217, .06); }
.t-neverport .btn:hover { background: rgba(76, 201, 217, .16); }
.t-neverport .btn .ar { border-radius: 2px; }
.t-neverport .btn.primary { background: var(--g); color: #04121a; }
.t-neverport .btn.primary:hover { background: #fff; }

/* Facts: instrument readouts */
.t-neverport .facts-bar { background: rgba(10, 28, 38, .8); border-color: var(--line); }
.t-neverport .facts-bar dt { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 400; }
.t-neverport .facts-bar dd { font-family: var(--f-mono); font-weight: 500; font-size: 18px; color: var(--g); }

/* Sections */
.t-neverport .gp-sec h2 { font-size: clamp(34px, 4.6vw, 64px); }
.t-neverport .gp-sec h2::before { content: "//"; display: block; font-family: var(--f-mono); font-size: 14px; letter-spacing: .1em; color: var(--warn); margin-bottom: 10px; font-weight: 400; }
.t-neverport .pitch .log { font-family: var(--f-display); text-transform: none; font-weight: 600; letter-spacing: 0; }
.t-neverport .pitch .log::first-letter { color: var(--g); }
.t-neverport .radio { border-radius: 4px; background: rgba(255, 138, 61, .08); border-color: rgba(255, 138, 61, .45); --g: var(--warn); }
.t-neverport .radio q { font-family: var(--f-mono); font-style: normal; font-size: 15px; }
.t-neverport .radio small { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }

/* Loop: waypoints */
.t-neverport .loop li { border-radius: 0; background: var(--corners), rgba(10, 28, 38, .75); border: 0; }
.t-neverport .loop li::before { content: "WP-" counter(s, decimal-leading-zero); width: auto; height: auto; border-radius: 0; background: none; color: var(--g); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; justify-self: start; place-items: start; }
.t-neverport .loop li:not(:last-child)::after { top: 50%; height: 0; border-top: 1px dashed var(--g); background: none; }
.t-neverport .loop b { text-transform: uppercase; font-size: 22px; letter-spacing: .03em; }

/* Gallery: monitor feeds */
.t-neverport .showcase figure { border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.t-neverport .showcase figure::after { content: ""; position: absolute; inset: 8px; background: var(--corners); pointer-events: none; opacity: .9; }
.t-neverport .showcase figcaption { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 500; left: 16px; bottom: 16px; }
.t-neverport .showcase figcaption::before { content: "● "; color: var(--warn); }

/* Features */
.t-neverport .feat { border-radius: 0; background: var(--corners), rgba(10, 28, 38, .75); border: 0; padding: 22px; }
.t-neverport .feat:hover { background: var(--corners), rgba(76, 201, 217, .1); }
.t-neverport .feat b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .03em; font-size: 19px; }

/* Mission steps: a plotted route */
.t-neverport .places { gap: 0; counter-reset: m; border-top: 1px dashed var(--g); padding-top: 0; }
.t-neverport .places div { counter-increment: m; border-radius: 0; background: none; border: 0; border-left: 1px solid var(--line); padding: 26px 18px 6px; position: relative; }
.t-neverport .places div:first-child { border-left: 0; padding-left: 0; }
.t-neverport .places div::before { content: ""; position: absolute; top: -6px; left: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--g); }
.t-neverport .places div:first-child::before { left: 0; }
.t-neverport .places div:last-child::before { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 12px var(--warn); }
.t-neverport .places b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.t-neverport .places b::before { content: counter(m, decimal-leading-zero) "  "; font-family: var(--f-mono); font-size: 12px; color: var(--g); letter-spacing: .1em; }
@media (max-width: 1000px) { .t-neverport .places div { border-left: 0; padding-left: 0; } .t-neverport .places div::before { left: 0; } }

/* Status */
.t-neverport .status .st { text-transform: uppercase; letter-spacing: .1em; font-weight: 500; font-size: 12px; color: var(--g); }
.t-neverport .status b { text-transform: uppercase; letter-spacing: .02em; }

/* More */
.t-neverport .more-grid .tile { border-radius: 4px; }
.t-neverport .more-grid .go { border-radius: 2px; }

/* ===== Squall footage ===== */
.gp-hero > video.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

.bridge-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; margin-top: 36px; align-items: stretch; }
.feed { margin: 0; background: var(--corners), rgba(4, 12, 18, .9); padding: 12px; display: grid; gap: 10px; align-content: start; }
.feed-bar { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.feed-bar .rec { color: var(--warn); display: inline-flex; align-items: center; gap: 8px; }
.feed-bar .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); opacity: .35; }
.bridge.live .feed-bar .rec::before { opacity: 1; animation: blink 1.2s steps(2) infinite; }
#feed-tc { color: var(--g); font-variant-numeric: tabular-nums; }
.feed-screen { position: relative; background: #000; }
.feed-screen video { display: block; width: 100%; aspect-ratio: 1280 / 506; background: #000; }
.feed-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); }
.feed-play { all: unset; cursor: pointer; position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: radial-gradient(60% 70% at 50% 50%, rgba(6,18,26,.25), rgba(6,18,26,.8)); transition: opacity .3s; }
.feed-play span { width: 84px; height: 84px; display: grid; place-items: center; font-size: 26px; padding-left: 5px; color: #04121a; background: var(--g);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); transition: transform .2s; }
.feed-play:hover span { transform: scale(1.06); }
.feed-play b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(22px, 2.4vw, 32px); }
.feed-play small { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--g); font-size: 12px; }
.feed-play:focus-visible { outline: 2px solid var(--g); outline-offset: -4px; }
.feed-play.gone { opacity: 0; pointer-events: none; }

.shiplog { background: rgba(4, 12, 18, .85); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.shiplog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px dashed var(--line); }
.shiplog-head b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .04em; font-size: 18px; }
.shiplog-head span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.shiplog ol { list-style: none; margin: 0; padding: 6px; overflow-y: auto; max-height: 520px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.log-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 92px 48px 1fr; gap: 12px; align-items: center; padding: 8px; border-left: 2px solid transparent; transition: background .2s, border-color .2s; }
.log-row:hover { background: rgba(76, 201, 217, .07); }
.log-row:focus-visible { outline: 1px solid var(--g); }
.log-row.on { background: rgba(76, 201, 217, .12); border-left-color: var(--g); }
.log-row img { width: 92px; aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.6) brightness(.85); transition: filter .2s; }
.log-row:hover img, .log-row.on img { filter: none; }
.log-tc { font-family: var(--f-mono); font-size: 13px; color: var(--g); font-variant-numeric: tabular-nums; }
.log-txt { display: grid; gap: 2px; }
.log-txt b { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .03em; font-size: 15px; }
.log-txt span { color: var(--dim); font-size: 13.5px; line-height: 1.4; }
@media (max-width: 1000px) { .bridge-grid { grid-template-columns: 1fr; } .shiplog ol { max-height: 360px; } }
@media (max-width: 460px) { .log-row { grid-template-columns: 72px 1fr; } .log-row img { width: 72px; } .log-tc { display: none; } }