/* ═══════════════════════════════════════════════════════════════════════════
   NaviVett — page styles.

   The design prototype carried these as inline style attributes on every
   element. They are lifted into classes here: same values, addressable.

   The prototype has no media queries — it was authored at desktop width and
   its fixed grid columns (2fr, 3fr, 1fr 1.1fr) would not survive a phone.
   The stacking rules at the bottom are the one addition to the design.
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: var(--color-bg); }

/* The design overrides the system's link colour to the darker accent step.
   Ported from the prototype's own page-level style block — it also happens to
   be what carries links past 4.5:1 (5.78:1 vs 3.71:1). */
a { color: #416180; }
a:hover { color: #5980a6; }

.page {
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #1d1f20;
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  padding: 12px 20px; background: var(--color-bg); color: var(--color-text);
  font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

/* ── The fixed GL ground ───────────────────────────────────────────────── */

/* Height is pinned to the LARGE viewport rather than anchored top-and-bottom.
   With `inset: 0` the box tracks the mobile URL bar sliding in and out, which
   resizes the canvas mid-scroll; `lvh` is the height with browser UI retracted,
   so the box simply stays put and the bottom is clipped while the bar shows.
   Belt-and-braces behind the camera fix in site.js — this one cannot be
   verified headless, since there is no URL bar to retract. */
.gl-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 0;
  height: 100vh;
  height: 100lvh;
  pointer-events: none; background: #f2f2f3;
}
.gl-wash {
  position: absolute; inset: 0;
  background: radial-gradient(115% 85% at 70% 44%, rgba(89, 128, 166, 0.10), rgba(242, 242, 243, 0) 60%);
}
.gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.shell { position: relative; z-index: 1; }

/* Everything from the board down sits on solid ground — the globe is only
   visible behind the hero and the sequence. */
.lower { background: #f2f2f3; position: relative; }

.wrap { max-width: 1240px; margin: 0 auto; width: 100%; }

/* ── Header ───────────────────────────────────────────────────────────── */

.hdr {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 40px;
  background: rgba(242, 242, 243, 0.84);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(29, 31, 32, 0.14);
}
.hdr__brand {
  display: flex; align-items: center; margin-right: auto;
  text-decoration: none;
}
/* Explicit width/height on the <img> too, so the sticky header cannot shift
   height while the logo loads — that would move every scroll offset under it. */
.hdr__logo { height: 22px; width: auto; display: block; }
.hdr__nav { display: flex; gap: 24px; align-items: center; }
.hdr__nav a:not(.btn) {
  font-family: "Barlow Condensed", sans-serif; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #1d1f20; text-decoration: none;
}
.hdr__nav a:not(.btn):hover { color: var(--color-accent); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { min-height: 86vh; display: flex; align-items: center; padding: 76px 40px 64px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.eyebrow__dot {
  display: block; width: 7px; height: 7px; background: #5980a6;
  animation: nvPulse 2.2s ease-in-out infinite;
}
.eyebrow__txt {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
}
.hero__title {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(48px, 6.4vw, 104px); line-height: 0.93; letter-spacing: -0.025em;
  margin: 0 0 28px; max-width: 15ch; text-wrap: balance;
}
.hero__title em { font-style: normal; color: #416180; }
.hero__lede {
  font-size: 19px; line-height: 1.5; max-width: 40ch; margin: 0 0 34px;
  color: rgba(29, 31, 32, 0.76); text-wrap: pretty;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--lg { padding: 12px 24px; font-size: 16px; white-space: nowrap; }

.hero__stats {
  display: flex; gap: 44px; margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(29, 31, 32, 0.16); flex-wrap: wrap;
}
.stat__n {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums;
}
.stat__l {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
}

/* ── Scroll sequence ──────────────────────────────────────────────────── */

.seq { height: 360vh; position: relative; }
.seq__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; padding: 64px 40px 16px;
}
.seq__panel {
  max-width: 40ch; padding: clamp(13px, 2.1vh, 20px) 24px;
  background: rgba(242, 242, 243, 0.92);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.seq__kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #416180;
}
.seq__title {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 10px 0 clamp(18px, 3vh, 28px);
}
.stages { display: flex; flex-direction: column; }
.stage {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: baseline;
  padding: clamp(7px, 1.3vh, 11px) 0;
  border-top: 1px solid rgba(29, 31, 32, 0.16);
}
.stage:last-of-type { border-bottom: 1px solid rgba(29, 31, 32, 0.16); }
.stage__n {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.1em; color: #416180;
}
.stage__t {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(17px, 1.9vh, 21px); line-height: 1.15;
}
.stage__desc {
  margin-top: 10px; min-height: 34px; font-size: 13.5px; line-height: 1.4;
  color: rgba(29, 31, 32, 0.66); max-width: 44ch;
}
.seq__meter {
  display: flex; align-items: center; gap: 12px; margin-top: clamp(10px, 2vh, 18px);
}
.seq__meter-l {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
}
.seq__track {
  flex: 1; max-width: 180px; height: 1px; background: rgba(29, 31, 32, 0.2);
  position: relative; display: block;
}
.seq__bar {
  position: absolute; left: 0; top: 0; height: 1px; width: 0%;
  background: #5980a6; display: block;
}
.seq__pct {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #416180; font-variant-numeric: tabular-nums;
}
.seq__done {
  margin-top: clamp(12px, 2vh, 18px); padding-top: clamp(10px, 1.6vh, 14px);
  border-top: 1px solid rgba(89, 128, 166, 0.5);
}
.seq__done-h {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(20px, 2.4vh, 26px); line-height: 1.1; color: #416180;
}
.seq__done-p { font-size: 13px; color: rgba(29, 31, 32, 0.66); margin-top: 2px; }

/* ── Sections ─────────────────────────────────────────────────────────── */

.sec { padding: 96px 40px; max-width: 1240px; margin: 0 auto; }
.sec--tight { padding: 0 40px 96px; }
.sec--navy { background: #1d2d3d; color: #f2f2f3; padding: 88px 40px; max-width: none; }
.sec--center { text-align: center; }

.kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #416180;
}
.kicker--on-navy { color: #94bce3; }
.sec__h {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(34px, 4vw, 54px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 16px 0 0;
}
.sec__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 40px; flex-wrap: wrap; margin-bottom: 52px;
}
.sec__head p { max-width: 34ch; margin: 0; color: rgba(29, 31, 32, 0.7); }

/* Board */
.board { padding: 26px 28px; }
.board__top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.board__h {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 27px; margin: 0; letter-spacing: -0.01em;
}
.board__live {
  display: flex; align-items: center; gap: 8px; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(29, 31, 32, 0.62);
}
.board__live i {
  display: block; width: 6px; height: 6px; background: #5980a6;
  animation: nvPulse 1.8s ease-in-out infinite;
}
.board .vessel { font-family: "Barlow Condensed", sans-serif; font-size: 16px; }
.board__note { margin-top: 14px; font-size: 11px; color: rgba(29, 31, 32, 0.62); }

/* ── The live board ──────────────────────────────────────────────────────
   A grid rather than a <table>: rows have to be transformed and clipped as
   they travel, which table layout will not do. ARIA roles carry the table
   semantics that the markup no longer implies. Row height is a variable
   because the JS conveyor measures its travel from it.                     */

.brd { --brd-row-h: 44px; --brd-slots: 5; font-size: 14px; }

.brd__head,
.brd__row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.6fr);
  gap: 12px;
  align-items: center;
  padding: 0 var(--space-2);
}

.brd__head {
  height: 34px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
  border-bottom: 1px solid var(--color-divider);
}

.brd__body {
  position: relative;
  height: calc(var(--brd-row-h) * var(--brd-slots));
  /* rows enter from below this edge and leave through the top of it */
  overflow: hidden;
}

.brd__row {
  height: var(--brd-row-h);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Once the conveyor is running the rows are positioned absolutely. Until then
   they stack normally, so the no-JS board is a correct static list. */
.brd__body.is-live .brd__row {
  position: absolute; left: 0; right: 0; top: 0;
  will-change: transform;
}

/* Soft top and bottom edges, so a vessel dissolves as she leaves the board
   rather than being sliced off by the clip. Only while live — a static list
   should not have faded ends. */
.brd__body.is-live {
  -webkit-mask-image: linear-gradient(
    to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(
    to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.brd .vessel { font-family: "Barlow Condensed", sans-serif; font-size: 16px; }
.brd .due { text-align: right; font-variant-numeric: tabular-nums; }
.brd .due--soon { color: #416180; }
.brd .due--none { color: rgba(29, 31, 32, 0.45); }
.brd .tag { white-space: nowrap; }

/* The moment of clearance — a single pulse as a row reaches the top slot. */
@keyframes brdCleared {
  0%   { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
  100% { background: transparent; }
}
.brd__row.is-cleared { animation: brdCleared 1.1s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .brd__row.is-cleared { animation: none; }
}

/* Bottleneck — hairline-separated pair on navy */
.split2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(242, 242, 243, 0.2);
}
.split2 > div { background: #1d2d3d; }
.split2 > div:first-child { padding: 34px 34px 34px 0; }
.split2 > div:last-child { padding: 34px 0 34px 34px; }
.micro {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 242, 243, 0.58); margin-bottom: 14px;
}
.split2 h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 26px; margin: 0 0 12px;
}
.split2 p { margin: 0; color: rgba(242, 242, 243, 0.72); max-width: 44ch; }

/* Capabilities */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cap { padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 14px; }
.cap__n {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 44px; line-height: 1; color: #b7b7ba;
}
.cap h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 24px; margin: 0;
}
.cap p { margin: 0; font-size: 14px; color: rgba(29, 31, 32, 0.72); }

/* Deployment record */
.record { padding: 0; }
.record__bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 22px 30px; border-bottom: 1px solid rgba(29, 31, 32, 0.14); flex-wrap: wrap;
}
.record__bar span:first-child {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
}
.record__bar span:last-child {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #416180;
}
.record__body { display: grid; grid-template-columns: 1fr 1.1fr; }
.record__prose { padding: 38px 34px; border-right: 1px solid rgba(29, 31, 32, 0.14); }
.record__prose h2 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.03; letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.record__prose p { margin: 0 0 16px; color: rgba(29, 31, 32, 0.75); }
.record__prose .btn { margin-top: 24px; padding: 11px 20px; font-size: 15px; }
.record__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.record__cell { padding: 32px 30px; }
.record__cell:nth-child(1), .record__cell:nth-child(2) {
  border-bottom: 1px solid rgba(29, 31, 32, 0.14);
}
.record__cell:nth-child(odd) { border-right: 1px solid rgba(29, 31, 32, 0.14); }
.record__n {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(44px, 5vw, 68px); line-height: 0.95; font-variant-numeric: tabular-nums;
}
.record__n--accent { color: #416180; }
.record__l {
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62); margin-top: 6px;
}

/* ── Traditional vs NaviVett ──────────────────────────────────────────────
   Three columns of hairlines, same blueprint idiom as the board. The NaviVett
   column is the only one carrying colour, so the eye lands there without
   needing a highlight box. */

.cmp { padding: 0; }
.cmp__head, .cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: 20px; align-items: baseline; padding: 18px 28px;
}
.cmp__head {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
  border-bottom: 1px solid var(--color-divider);
}
.cmp__ours { color: #416180; }
.cmp__row + .cmp__row { border-top: 1px solid rgba(29, 31, 32, 0.08); }
.cmp__k {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 19px; line-height: 1.15;
}
.cmp__was { font-size: 14px; color: rgba(29, 31, 32, 0.62); }
.cmp__is { font-size: 14px; color: #416180; font-weight: 500; }

/* Security */
.grid3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(29, 31, 32, 0.14); border: 1px solid rgba(29, 31, 32, 0.14);
}
.grid3 > div { background: #f2f2f3; padding: 28px 24px; }
.grid3 .micro { color: rgba(29, 31, 32, 0.62); margin-bottom: 12px; }
.grid3 h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 21px; margin: 0 0 10px;
}
.grid3 p { margin: 0; font-size: 13.5px; color: rgba(29, 31, 32, 0.7); }

/* Founders */
.why {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start;
}
.why blockquote {
  margin: 20px 0 0; font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
}
.why > div:first-child > p { margin: 26px 0 0; color: rgba(242, 242, 243, 0.72); max-width: 48ch; }
/* The credential, not the person — same claim the named cards carried. */
.creds {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(242, 242, 243, 0.2); border: 1px solid rgba(242, 242, 243, 0.2);
}
.cred {
  background: #1d2d3d; display: flex; align-items: baseline; gap: 18px;
  padding: 22px 24px;
}
.cred__n {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.1em; color: #94bce3; flex: none;
}
.cred__t {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 21px; line-height: 1.15;
}

/* Pilot CTA */
.pilot__h {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -0.02em;
  margin: 0 auto 20px; max-width: 20ch;
}
.pilot__p { margin: 0 auto 32px; max-width: 48ch; color: rgba(29, 31, 32, 0.72); }
.cta__alt { margin: 20px 0 0; font-size: 13.5px; color: rgba(29, 31, 32, 0.62); }
.cta__alt a { font-weight: 500; }
.actions--center { justify-content: center; }

/* Footer */
.foot {
  border-top: 1px solid rgba(29, 31, 32, 0.14); padding: 26px 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto;
}
.foot__mark { height: 16px; width: auto; display: block; }
.foot__tag {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(29, 31, 32, 0.62);
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Lifted verbatim in intent from the prototype: entrance states are additive
   and visibility NEVER depends on an animation running. Arming sets opacity 0;
   revealing removes the class, restoring opacity instantly. The keyframes move
   transform only, so a frozen or disabled animation leaves the element visible
   — at worst un-slid — rather than invisible.                                */

@keyframes nvPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes nvIn { from { transform: translateY(22px); } to { transform: none; } }

[data-reveal].nv-armed { opacity: 0; }
[data-reveal].nv-in { animation: nvIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }

[data-seq][data-seq-state="run"] [data-stage] {
  opacity: 0.32; transition: opacity 0.35s ease, transform 0.35s ease;
}
[data-seq][data-seq-state="run"] [data-stage].nv-on { opacity: 1; transform: translateX(6px); }
[data-seq][data-seq-state="run"] [data-seq-done] {
  opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-seq][data-seq-state="run"] [data-seq-done].nv-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal].nv-armed { opacity: 1; }
  [data-reveal].nv-in { animation: none; }
  .eyebrow__dot, .board__live i { animation: none; opacity: 1; }
  * { transition-duration: 0.01ms !important; }
}

/* ── Responsive ───────────────────────────────────────────────────────────
   Not in the prototype, which was authored desktop-only. Its fixed grid
   columns would otherwise crush on a phone.                                 */

@media (max-width: 1000px) {
  .record__body { grid-template-columns: 1fr; }
  .record__prose { border-right: 0; border-bottom: 1px solid rgba(29, 31, 32, 0.14); }
  .why { grid-template-columns: 1fr; gap: 40px; }
  .caps { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* On a phone the globe sits directly behind the lede rather than beside it,
     so it competes with the text. Receding it keeps the scene without costing
     legibility. */
  .gl-canvas { opacity: 0.45; }

  .hdr { padding: 12px 20px; gap: 14px; }
  /* 143px of logo + the CTA + padding fits 390px, but only just — easing it
     down keeps breathing room on the narrowest phones. */
  .hdr__logo { height: 19px; }
  .hdr__nav { gap: 14px; }
  /* Section anchors would wrap the bar onto three lines; the pilot CTA stays. */
  .hdr__nav a:not(.btn) { display: none; }

  .hero { padding: 48px 20px 40px; min-height: 0; }
  .hero__stats { gap: 24px; margin-top: 36px; }
  .seq { height: 300vh; }
  .seq__sticky { padding: 40px 20px 16px; }

  /* On a phone the panel is full-width and covers ~90% × 62% of the viewport,
     so at the desktop opacity it hid the globe entirely. The blur is *reduced*
     rather than raised here: a heavier blur would protect text but smear the
     coastlines into nothing, which defeats the point of seeing through at all.
     0.72 with a 3px blur lets the globe and the vessel read while the panel
     still holds as a surface. */
  .seq__panel {
    max-width: none;
    padding: 16px 18px;
    background: rgba(242, 242, 243, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  /* Reclaims the contrast the added transparency costs this micro-label. */
  .seq__meter-l { color: rgba(29, 31, 32, 0.7); }

  .sec { padding: 64px 20px; }
  .sec--tight { padding: 0 20px 64px; }
  .sec--navy { padding: 64px 20px; }
  .board { padding: 18px 16px; }

  .caps, .grid3 { grid-template-columns: 1fr; }

  /* Three columns cannot survive 390px. Each row becomes its own block: the
     capability as a heading, then before and after stacked beneath it, each
     labelled so the comparison survives losing the column headers. */
  .cmp__head { display: none; }
  .cmp__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 16px; }
  .cmp__was::before { content: "Today — "; color: rgba(29, 31, 32, 0.45); }
  .cmp__is::before { content: "NaviVett — "; color: rgba(29, 31, 32, 0.45); }
  .record__grid { grid-template-columns: 1fr 1fr; }
  .record__prose { padding: 28px 22px; }

  /* Drop the Oil Major column so vessel names and stage keep their room —
     stage and deadline are what the board is demonstrating. */
  .brd__head, .brd__row {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.2fr) minmax(0, 0.5fr);
    gap: 8px;
  }
  .brd__head span:nth-child(2), .brd__row > span:nth-child(2) { display: none; }
  .brd .vessel { font-size: 15px; }

  /* The hairline pair becomes a stack, so the asymmetric insets must reset. */
  .split2 { grid-template-columns: 1fr; }
  .split2 > div:first-child { padding: 0 0 28px; }
  .split2 > div:last-child { padding: 28px 0 0; }

  .foot { padding: 22px 20px; }
}