/* Stowit surfaces — DESIGN.md §6.
   Four surfaces plus the animation vocabulary strip:
     .hero    — landing hero, 1120×430 dark (the only dark surface)
     .glance  — menu-bar glance, cool + denser, 380px
     .autopsy — disk autopsy card, 860px, paper-warm, screenshot-first
     .proof   — the Proof, 920px, paper-cool
     .moment  — one tile per command, 352px

   Geometry is literal, matching the approved mockup pixel for pixel.
   Colour goes through tokens.css; nothing here hardcodes a hex. */

/* ═════════════════════════════════════════════════════════════════════════
   Shared — the stacked bar, the legend, the offender rows, the footer.
   Rules carried over from card.rs: 3px gaps between stacked-bar slices,
   6px rounded outer ends, direct in-bar labels only on slices ≥14% wide,
   10×10px legend swatches at 3px radius, 9×9px row dots.
   ═════════════════════════════════════════════════════════════════════════ */

.surface-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.surface-head__mark {
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.5px;
}

.surface-head__breadcrumb { font-size: 15px; }

.chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: var(--r-chip);
}
.chip--note     { background: var(--note-bg);     color: var(--note-text); }
.chip--verified { background: var(--verified-bg); color: var(--verified-soft); }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }

/* Stacked bar */
.bar { display: flex; height: var(--bar-h, 44px); }

.bar__slice {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
}
.bar__slice:first-child { border-radius: var(--r-slice) 0 0 var(--r-slice); }
.bar__slice:last-child  { border-radius: 0 var(--r-slice) var(--r-slice) 0; margin-right: 0; }
.bar__label { font-size: 12px; font-weight: 700; color: #fff; }

/* Legend */
.legend { display: flex; gap: 20px; flex-wrap: wrap; }
.legend__item { display: flex; align-items: center; gap: 7px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend__text { font-size: 13px; }
.legend__text b { color: var(--ink); }

/* Offender / opportunity rows */
.rows { margin-top: 8px; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
}
.row__num { font-size: 13px; }
.row__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.row__name { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.row__meta { font-size: 12.5px; }
.row__size { margin-left: auto; color: var(--ink); font-weight: 700; }

.section-label { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }

.surface-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.surface-foot__motto { font-size: 14px; font-style: italic; }
.surface-foot__repo  { font-size: 13px; }

/* ═════════════════════════════════════════════════════════════════════════
   1a · Landing hero — 1120×430 dark, headline left, boat + drive right,
   two water bands. The only dark surface.
   ═════════════════════════════════════════════════════════════════════════ */

.hero {
  width: 1120px;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow: var(--shadow-card-strong);
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 34px 6px;
}
.hero__mark {
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.4px;
}
.hero__links {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-size: 13.5px;
  color: var(--ink-muted-cool);
}
.hero__cta {
  color: var(--ink);
  background: var(--sun);
  padding: 6px 14px;
  border-radius: var(--r-chip);
  font-weight: 600;
  margin-top: -6px;
}

.hero__scene {
  position: relative;
  height: 430px;
  overflow: hidden;
  background: var(--sky-light);
  --cloud: rgba(255, 255, 255, .30);
  --cloud-faint: rgba(255, 255, 255, .19);
  --cloud-mid: rgba(255, 255, 255, .24);
}

/* The hero's sun moved into the nav and became the menu (see .hero__sunmark).
   Nothing places one in the stage any more -- these three placements are gone
   rather than left behind, so nobody wires a second sun back into the sky by
   reaching for a rule that is still sitting here. The .sun / .sun-glow /
   .sun-bloom primitives in illustration.css stay: other surfaces use them. */

.hero__clouds { top: 64px; left: 0; width: 1400px; gap: 70px; }

.hero__copy { position: absolute; left: 56px; top: 24px; width: 430px; }
.hero__headline {
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.hero__deck {
  margin: 16px 0 0;
  color: var(--ink-muted-cool);
  max-width: 380px;
}
.hero__actions { display: flex; gap: 10px; margin-top: 24px; }
.hero__btn {
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: var(--r-chip);
}
.hero__btn--primary   { background: var(--sun); color: var(--ink); font-weight: 700; }
.hero__btn--secondary { border: 1px solid rgba(11, 18, 32, .20); color: var(--ink); background: var(--paper-warm); }

/* The vault fills bottom-up as the boat unloads (34–60% of the 9s arc) */
.hero__dock { position: absolute; bottom: 112px; width: 128px; }
/* Each berth sits near its own edge instead of both bunching in the right
   third, so the run between them is the width of the scene rather than a
   shuffle. The home quay reaches back under the copy column -- it clears the
   text vertically (the quay's top is 495 in stage coordinates and the copy's
   last line ends at 459), so nothing is hidden.
   Neither pier now touches the boat: each stops ~44px short and a drawbridge
   spans the gap. That gap is the whole reason the ramp is visible rather than
   hidden under the hull, so if a berth moves, the gap moves with it. */
/* The home quay is the jetty's mirror: it runs off the LEFT edge of the page
   by the same arithmetic, so the two berths read as one channel with the sea
   arriving from both sides rather than a pier and a plank. Its RIGHT end is
   the fixed one, at 507 -- that is where the boat moors, and it is pinned by
   the Attic button, not by taste. */
.hero__dock--home { left: -60px; width: 567px; }
@media (min-width: 1121px) {
  .hero__dock--home {
    left: calc((1120px - 100vw) / 2 - 60px);
    width: calc(567px + (100vw - 1120px) / 2);
  }
}
/* The far jetty runs off the right-hand side of the PAGE, which the stage
   cannot express on its own: the stage is pinned to 1120px and centred, so a
   fixed `right` leaves a strip of sky beside it on any wider screen. Its LEFT
   end is what matters -- the boat berths against it -- so that is pinned at
   1037 and the right end is pushed 60px past the viewport edge, where the
   scene's own overflow:hidden cuts it. Below 1120 the stage is scaled so that
   its right edge already lands on the viewport edge, and a plain -60px does
   the same job. */
.hero__dock--far { right: -60px; width: 143px; }
@media (min-width: 1121px) {
  .hero__dock--far {
    right: calc((1120px - 100vw) / 2 - 60px);
    width: calc(143px + (100vw - 1120px) / 2);
  }
}
/* 58px, not 30px. The swell is a 36px band, so the water's actual surface is
   anywhere between 516 and 552 in stage coordinates -- and a 30px leg ends at
   538, which means that at every trough some of them stopped short and hung in
   mid-air. 58px puts the foot at 566, below the deepest the surface ever gets,
   so every leg is always in the water and the swell cuts them at a different
   depth as it rolls through. */
.hero__dock .pier { --pier-h: 13px; --post-h: 58px; }
.hero__dock .folder { --folder-w: 17px; --folder-h: 19px; --folder-tab: 4px; }
/* Cargo centres on a short pier, which is right for one. On the home quay four
   folders bunched mid-plank read as dropped rather than loaded, so they spread
   from the left; on the far jetty centring would push them off the page, so
   they sit at the end the boat arrives at. */
.hero__dock--home .pier__load { justify-content: flex-end; padding-right: 30px; gap: 32px; }
.hero__dock--far  .pier__load { justify-content: flex-start; padding-left: 20px; }
/* Two posts is right for a pier of known length and wrong for one that runs to
   the edge of whatever screen it is on: at 1440 the second lands past the cut
   and the pier shows one, at 1920 it shows one and a long bare plank. A
   repeating strip puts a leg every 154px however far it runs. Both piers run
   off an edge now, so both need it. */
.hero__dock--far .pier::before,
.hero__dock--home .pier::before {
  left: 0; right: 0; width: auto; transform: none; border-radius: 0;
  background: repeating-linear-gradient(to right,
    transparent 0 34px,
    var(--post-fill, #D8C7A8) 34px 43px,
    transparent 43px 154px);
}
.hero__dock--far .pier::after,
.hero__dock--home .pier::after { display: none; }
/* Both piers and the hold run the same 24s clock, so a folder leaving one is
   the same folder arriving at the other. */
.hero__dock--home .folder { animation: cargohome var(--run-dur, 36s) ease-in-out infinite backwards; }
.hero__dock--far  .folder { animation: dropoff  var(--run-dur, 36s) ease-in-out infinite backwards; }
/* The bow gangway serves the home quay, the stern one the far jetty -- which
   end faces which berth is fixed, because the boat never turns around. */
.hero__boat .boat__ramp--bow   { animation: rampbow   var(--run-dur, 36s) ease-in-out infinite; }
.hero__boat .boat__ramp--stern { animation: rampstern var(--run-dur, 36s) ease-in-out infinite; }

.hero__boat {
  position: absolute;
  left: 596px;
  bottom: 104px;
  animation: heroloop var(--run-dur, 36s) ease-in-out infinite;
}
.hero__boat .boat {
  --bob-dur: 3.4s;
  --cargo-gap: 6px;
  --cargo-lift: 6px;
  --hull-w: 206px;
  --hull-h: 76px;
  --hull-r: 8px;
  --hull-br: 56px;
  --hull-brv: 112px;
  --hull-pad: 34px;
  --hull-fill: #FFFFFF;
  --hold-h: 42px;
  --hold-gap: 8px;
  --hull-r: 10px;
  --hull-br: 34px;
  --hull-brv: 46px;
  --super-shift: -18px;
  --deck-h: 8px;
  --deck-gap: 5px;
  --stripe-r: 4px;
}
.hero__boat .folder {
  --folder-w: 30px;
  --folder-tab: 7px;
  animation: cargocycle var(--run-dur, 36s) ease-in-out infinite backwards;
}

/* Home port — where the cargo comes from. */
.hero__homedock { position: absolute; left: 436px; bottom: 116px; width: 116px; }
.hero__homedock .quay { height: 30px; }
.hero__homedock .folder { --folder-w: 16px; --folder-h: 18px; --folder-tab: 4px; }

.hero__water { --water-bleed: 40px; --water-h: 104px; }

/* ═════════════════════════════════════════════════════════════════════════
   1c · Menu-bar glance, cool + denser — three-stat row, scene strip,
   on-blocks list with class dots, two verbs. The CLI's status_dashboard,
   reordered.
   ═════════════════════════════════════════════════════════════════════════ */

.glance {
  width: 380px;
  background: var(--paper-cool);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.glance__head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--hairline-cool);
}
.glance__mark { font-weight: 700; font-size: 14px; color: var(--ink); }
.glance__quiet { font-size: 12px; color: var(--ink-faint-cool); }
.glance__pause {
  margin-left: auto;
  font-size: 12px;
  color: var(--sea-deep);
  font-weight: 600;
}

.glance__stats { display: flex; border-bottom: 1px solid var(--hairline-cool); }
.glance__stat {
  flex: 1;
  padding: 14px 16px;
  border-right: 1px solid var(--hairline-cool);
}
.glance__stat:last-child { border-right: none; }
.glance__stat-label {
  font-size: 11px;
  color: var(--ink-faint-cool);
  letter-spacing: .6px;
  font-weight: 700;
}
.glance__stat-value { color: var(--ink); margin-top: 3px; }

.glance__scene {
  height: 74px;
  border-bottom: 1px solid var(--hairline-cool);
}
.glance__sun { top: 10px; right: 20px; --sun-size: 30px; }
.glance__boat { position: absolute; left: 0; bottom: 20px; animation: patrol 16s ease-in-out infinite; }
.glance__boat .boat {
  --bob-dur: 3.2s;
  --cargo-gap: 3px;
  --hull-w: 74px;
  --hull-h: 20px;
  --hull-r: 4px;
  --hull-br: 26px;
  --hull-brv: 52px;
  --hull-pad: 10px;
  --deck-h: 3px;
  --deck-gap: 2px;
}
.glance__boat .file { --file-w: 11px; --file-band: 4px; }
.glance__water {
  --water-h: 26px;
  --water-c: var(--sea);
  --crest-h: 15px;
  --wave-w: 150px;
  --crest-r: 8px;
  --crest-dur: 6s;
  --body-h: 17px;
}

.glance__list { padding: 10px 8px 6px; }
.glance__list-label {
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--ink-faint-cool);
}
.glance__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}
.glance__row--lead { border-radius: var(--r-button); background: #F2F8FD; }
.glance__row-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.glance__row-name { font-size: 13px; color: var(--ink); font-weight: 600; }
.glance__row-idle { font-size: 11.5px; color: var(--ink-faint-cool); }
.glance__row-size { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--ink); }

.glance__actions {
  padding: 10px 18px 14px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--hairline-cool);
}
.glance__btn {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 0;
  border-radius: var(--r-button);
}
.glance__btn--primary { color: #fff; background: var(--sea-deep); }
.glance__btn--quiet   { color: var(--ink); background: var(--surface-sunk-cool); }

/* ═════════════════════════════════════════════════════════════════════════
   1d · Disk autopsy card — 860px, paper-warm, screenshot-first.
   Header · hero number · stacked bar · legend · BIGGEST OFFENDERS · footer.
   ═════════════════════════════════════════════════════════════════════════ */

.autopsy {
  width: 860px;
  background: var(--paper-warm);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card-strong);
  overflow: hidden;
}
.autopsy__inner { padding: 40px 40px 30px; }

.autopsy .surface-head__breadcrumb { color: #8A8577; }

.autopsy__lede { margin-top: 32px; display: flex; align-items: flex-end; gap: 28px; }
.autopsy__number { color: var(--ink); font-size: 64px; font-weight: 800; letter-spacing: -2.4px; line-height: 1; }
.autopsy__caption { color: var(--ink-muted-warm); font-size: 18.5px; margin-top: 10px; }
.autopsy__caption span { color: var(--ink-faint-warm); }

/* Small boat scene sits right of the hero number */
.autopsy__scene {
  margin-left: auto;
  position: relative;
  width: 190px;
  height: 96px;
  background: none;  /* sits directly on the card, no sky */
  overflow: visible; /* the bob rotation is allowed to breathe past the edge */
}
.autopsy__sun { top: 2px; right: 8px; --sun-size: 34px; }
.autopsy__boat { position: absolute; left: 6px; bottom: 26px; }
.autopsy__boat .boat {
  --bob-dur: 3.6s;
  --hull-w: 104px;
  --hull-h: 26px;
  --hull-r: 5px;
  --hull-br: 32px;
  --hull-brv: 64px;
  --hull-pad: 14px;
  --deck-gap: 3px;
}
.autopsy__boat .boat__hull { box-shadow: var(--shadow-hull); }
.autopsy__water {
  --water-h: 30px;
  --water-c: var(--sea);
  --crest-h: 16px;
  --wave-w: 190px;
  --crest-dur: 5.5s;
  --body-h: 20px;
}

.autopsy .bar { margin-top: 26px; }
.autopsy .legend { margin-top: 14px; }
.autopsy .legend__text { color: var(--ink-muted-warm); }
.autopsy .section-label { color: var(--ink-faint-warm); }
.autopsy__offenders { margin-top: 32px; }
.autopsy .row { border-bottom: 1px solid var(--hairline-warm); }
.autopsy .row__num  { color: var(--ink-faint-warm); width: 14px; }
.autopsy .row__meta { color: var(--ink-faint-warm); }
.autopsy .row__size { font-size: 14.5px; }
.autopsy .surface-foot { margin-top: 30px; }
.autopsy .surface-foot__motto { color: var(--ink-muted-warm); }
.autopsy .surface-foot__repo  { color: #B3AC9C; }

/* ═════════════════════════════════════════════════════════════════════════
   1e · The Proof — 920px, paper-cool. Three futures as three tinted
   harbours, then BIGGEST OPPORTUNITIES with sealed sizes.
   ═════════════════════════════════════════════════════════════════════════ */

.proof {
  width: 920px;
  background: var(--paper-cool);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card-strong);
  overflow: hidden;
}
.proof__inner { padding: 40px 40px 32px; }

.proof .surface-head__breadcrumb { color: var(--ink-faint-cool); }

.proof__lede { margin-top: 30px; }
.proof__number { color: var(--ink); font-size: 60px; font-weight: 800; letter-spacing: -2.2px; line-height: 1; }
.proof__caption { color: var(--ink-muted-cool); font-size: 18px; margin-top: 10px; }
.proof__caption span { color: var(--ink-faint-cool); }
.proof__delta { color: var(--ink-muted-cool); font-size: 15px; margin-top: 8px; }
.proof__delta b { color: var(--ink); }
.proof__delta b.is-after { color: var(--verified-text); }

.proof .bar { --bar-h: 40px; margin-top: 24px; }

.proof__scenarios { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.scenario {
  flex: 1;
  min-width: 250px;
  border-radius: var(--r-scenario);
  padding: 20px 22px;
}
.scenario--a { background: var(--harbour-a); }
.scenario--b { background: var(--harbour-b); }
.scenario--c { background: var(--harbour-c); }
.scenario__label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; }
.scenario--a .scenario__label { color: var(--harbour-a-label); }
.scenario--b .scenario__label { color: var(--harbour-b-label); }
.scenario--c .scenario__label { color: var(--harbour-c-label); }
.scenario__number {
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: -1px;
}
.scenario--lead .scenario__number {
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
}
.scenario--quiet .scenario__number {
  color: var(--ink-muted-cool);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.scenario--packed {
  flex: 0.85;
  opacity: 0.94;
}
.scenario__number--packed {
  color: var(--ink-muted-cool);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 8px;
}
.scenario--packed .scenario__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
}
.scenario__body { color: #4A5A70; font-size: 13.5px; margin-top: 8px; line-height: 1.5; }
.scenario--packed .scenario__body { font-size: 13px; color: var(--ink-muted-cool); }

.proof__opportunities { margin-top: 30px; }
.proof .section-label { color: var(--ink-faint-cool); }
.proof .section-label span { font-weight: 400; letter-spacing: 0; }
.proof .row { border-bottom: 1px solid var(--hairline-cool); }
.proof .row__num  { color: var(--ink-faint-cool); width: 16px; }
.proof .row__name { max-width: 280px; }
.proof .row__meta { color: var(--ink-faint-cool); }
.proof .row__size { font-size: 14px; }
.proof__measured { color: var(--verified-text); font-size: 11.5px; }
.proof__est      { color: var(--ink-faint-cool); font-size: 11.5px; }
.proof__sealed {
  color: var(--ink-muted-cool);
  font-size: 13px;
  width: 110px;
  text-align: right;
}
.proof .surface-foot { margin-top: 28px; }
.proof .surface-foot__motto { color: var(--ink-muted-cool); }
.proof .surface-foot__repo  { color: #A9B6C6; }

/* ═════════════════════════════════════════════════════════════════════════
   1f · Six moments — the animation vocabulary, one loop per command
   ═════════════════════════════════════════════════════════════════════════ */

.moments { display: flex; flex-wrap: wrap; gap: 18px; width: 1120px; }

.moment {
  width: 352px;
  background: var(--paper-warm);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.moment__scene { height: 150px; }
.moment__sun { top: 16px; right: 26px; --sun-size: 34px; }
.moment__copy { padding: 14px 16px 16px; }
.moment__title { font: 700 13.5px var(--font-sans); color: var(--ink); }
.moment__body  { font: 400 12.5px/1.5 var(--font-sans); color: var(--ink-muted-warm); margin-top: 3px; }

/* Standard tile boat + water, overridden per moment where the mockup differs */
.moment .boat {
  --hull-w: 98px;
  --hull-h: 26px;
  --hull-r: 5px;
  --hull-br: 32px;
  --hull-brv: 64px;
  --hull-pad: 14px;
  --deck-gap: 3px;
  --bob-dur: 3s;
}
.moment__water {
  --water-h: 36px;
  --water-c: var(--sea);
  --crest-h: 16px;
  --wave-w: 200px;
  --crest-r: 9px;
  --body-h: 26px;
}

/* The vault, seen side-on in dock / autopilot / standing by.
   Fills bottom-up, so the bars are listed top-down and reversed by flexbox. */
.moment__vault {
  position: absolute;
  right: 16px;
  bottom: 34px;
  width: 44px;
  height: 56px;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  background: var(--vault-light);
  border-radius: var(--r-slice);
}
.moment__vault--unplugged {
  background: none;
  border: 2px dashed var(--vault-unplugged);
  /* the outline sits outside the 44×56 rect, as in the mockup — the dashed
     vault reads a touch larger than the filled one on purpose */
  box-sizing: content-box;
}

/* dock — boat sails out loaded, hull comes to rest beside the drive (4.2s) */
.moment--dock .moment__boat { position: absolute; left: 10px; bottom: 32px; animation: sailout 4.2s ease-in-out infinite; }
.moment--dock .moment__water { --crest-dur: 5s; }

/* undock — boat sails in, 2 files splash up onto the disk (0.25s stagger) */
.moment--undock .moment__boat { position: absolute; left: 10px; bottom: 32px; animation: sailin 4.2s ease-in-out infinite; }
.moment--undock .moment__water { --crest-dur: 5s; --crest-anim: wavepanslow; }
.moment__splash { position: absolute; left: 18px; bottom: 36px; display: flex; gap: 5px; }
.moment__splash .file { --file-w: 13px; --file-h: 16px; animation: splash 4.2s ease-in-out infinite; }

/* panic — three hulls return at once, 0.35s stagger, faster bob (3.4s) */
.moment--panic .moment__hull { position: absolute; left: 8px; animation: fleetin 3.4s ease-in-out infinite; }
.moment--panic .moment__water { --water-h: 22px; --crest-h: 8px; --crest-r: 7px; --body-h: 14px; --crest-dur: 3.4s; --crest-anim: wavepanslow; }

/* verify — boat idles, green ✓ stamps pop on each file (3.6s) */
.moment--verify .moment__boat { position: absolute; left: 118px; bottom: 38px; }
.moment--verify .boat { --bob-dur: 3.4s; --hull-w: 112px; --hull-h: 28px; --hull-br: 34px; --hull-brv: 68px; --hull-pad: 15px; --cargo-gap: 6px; }
.moment--verify .boat__deck { position: relative; }
.moment--verify .file { --file-w: 16px; }
.moment--verify .moment__water { --crest-dur: 6s; }

/* standing by — vault unplugged, desaturated scene, three pulsing dots (4.6s) */
.moment--standingby .moment__scene { --scene-sky: var(--sky-grey); }
.moment--standingby .moment__sun { --sun-fill: var(--sun-dim); }
.moment--standingby .moment__boat { position: absolute; left: 104px; bottom: 34px; }
.moment--standingby .boat { --bob-dur: 4.6s; --deck-1-fill: var(--deck-1-dim); --deck-2-fill: var(--deck-2-dim); }
.moment--standingby .moment__water { --water-h: 34px; --water-c: var(--sea-grey); --body-h: 24px; --crest-dur: 9s; }
.moment__zzz { position: absolute; right: 22px; bottom: 96px; display: flex; gap: 4px; align-items: flex-end; }
.moment__zzz span { border-radius: 50%; background: #B3AC9C; animation: zzz 2.4s ease-in-out infinite; }

/* autopilot — 11s patrol, "cycle · max 3 moves" chip. Slowness is the trust feature. */
.moment--autopilot .moment__boat { position: absolute; left: 10px; bottom: 32px; animation: patrol 11s ease-in-out infinite; }
.moment--autopilot .boat { --bob-dur: 4s; --hull-w: 92px; --hull-h: 24px; --hull-br: 30px; --hull-brv: 60px; --hull-pad: 13px; }
.moment--autopilot .moment__water { --crest-dur: 7s; }
.moment__cycle {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .7);
  padding: 5px 9px;
  border-radius: var(--r-chip);
}
.moment__cycle span:last-child { font: 600 10.5px var(--font-mono); color: #4A5A70; }

/* ═════════════════════════════════════════════════════════════════════════
   The wordmark IS the boat — the name rides in the hold where the cargo
   goes. Everything is sized in `em`, so one `font-size` scales the whole
   lockup: 27px on the hero, 19px on a card head, 15px in the menu bar.
   ═════════════════════════════════════════════════════════════════════════ */

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-size: 27px;                 /* the one knob */
  /* mast + flag are absolutely positioned above the cabin, so the box has to
     reserve their height or a parent with overflow:hidden shears them off */
  padding-top: 1em;
}

.brand__super {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: .26em;
  margin-left: -.96em;             /* superstructure sits fore of centre */
}
.brand__funnel {
  width: .59em;
  height: .89em;
  background: var(--deck-2);
  border-radius: .19em .19em .07em .07em;
  transform: rotate(-4deg);
}
.brand__funnel::after {            /* the band round the top */
  content: "";
  display: block;
  height: .19em;
  margin: .11em .07em 0;
  background: var(--paper-warm);
  border-radius: .11em;
}
.brand__cabin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .19em;
  width: 2.22em;
  height: .81em;
  background: var(--hull);
  border-radius: .26em .22em .07em .07em;
  transform: rotate(1.2deg);
}
.brand__window {
  width: .19em;
  height: .19em;
  border-radius: .06em;
  background: var(--brand-blue);
}
.brand__mast {
  position: absolute;
  left: .11em;
  bottom: 100%;
  width: .09em;
  height: .55em;
  background: var(--ink-faint-warm);
  border-radius: .07em;
}
.brand__flag {
  position: absolute;
  left: .07em;
  bottom: calc(100% + .33em);
  width: .52em;
  height: .33em;
  background: var(--class-model-cache);
  border-radius: .07em .19em .19em .07em;
  transform: rotate(-3deg);
}

.brand__hull {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .19em;
  padding: .26em 1.11em .33em;
  background: var(--hull);
  /* a boat bottom: gently rounded fore and aft */
  border-radius: .3em .3em .96em .96em / .3em .3em 1.48em 1.48em;
  box-shadow: var(--shadow-hull);  /* white hull needs this to exist on paper */
}
.brand__word {
  font-weight: 800;
  font-size: 1em;
  letter-spacing: -.037em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__word b { font-weight: 800; color: var(--brand-blue); }

.brand__stripe { height: .19em; border-radius: .11em; }
.brand__stripe--upper { width: 100%;  background: var(--deck-1); }
.brand__stripe--lower { width: 82%;   background: var(--deck-2); }