/* ══════════════════════════════════════════════ uSHIP · a new voyage
   Pink monochrome, editorial. The WebGL sea is the page background;
   everything here is normal HTML sitting on top of it.
   ════════════════════════════════════════════════════════════════ */

:root{
  --paper:      #FDEDF4;
  --paper-hi:   #FEF7FA;
  --ink:        #4C0827;   /* body copy */
  --ink-soft:   #6E1041;   /* secondary copy — still fully legible */
  --ink-faint:  #96235C;   /* labels, never below this */
  --rose:       #C81F73;   /* small type accent */
  --rose-deep:  #A6144F;
  --rose-bright:#E8489A;   /* the tagline pink, display sizes only */
  --rose-pale:  #F9BBD6;
  --rule:       rgba(76,8,39,.26);
  --rule-soft:  rgba(76,8,39,.14);

  --display: "Jost", "Futura", "Avenir Next", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --gut: clamp(20px, 5vw, 92px);
  --stack: clamp(96px, 14vh, 190px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;                 /* the page never scrolls sideways */
  font-family:var(--display);
  font-weight:300;
  color:var(--ink);
  background:
    linear-gradient(180deg,#FCE0EC 0%,#FDEFF5 46%,#FBD3E4 62%,#F7B7D2 100%) fixed;
  -webkit-font-smoothing:antialiased;
}
body.is-booting{ overflow:hidden; height:100vh; }

img{ max-width:100%; height:auto; display:block; }

/* ── the WebGL layer ─────────────────────────────────────────── */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
.no-webgl #gl{ display:none; }

/* paper grain + a soft vignette, both purely decorative */
.grain{
  position:fixed; inset:-120px; z-index:1; pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:var(--grain-url);
  background-size:180px 180px;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 42%, transparent 52%, rgba(190,60,120,.13) 100%);
}

/* ── preloader ───────────────────────────────────────────────── */
.pre{
  position:fixed; inset:0; z-index:90; display:grid; place-content:center; gap:18px;
  background:var(--paper); transition:opacity .7s ease, visibility .7s;
}
.pre.done{ opacity:0; visibility:hidden; }
.pre-bar{ width:min(38vw,240px); height:1px; background:var(--rule); overflow:hidden; }
.pre-bar i{ display:block; height:100%; background:var(--rose); transform-origin:left;
  position:absolute; left:0; right:100%; transition:right .35s ease; }
.pre-bar{ position:relative; }
.pre-txt{ font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--ink-soft); text-align:center; }
.pre-txt b{ font-weight:400; color:var(--rose); }

/* ── top bar + chapter rail ──────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px var(--gut) 24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--ink-soft);
}
.topbar::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgb(253,239,246) 0%,
                                     rgba(253,239,246,.97) 46%,
                                     rgba(253,239,246,.62) 74%,
                                     rgba(253,239,246,0) 100%);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand img{ width:34px; height:34px; }
.brand-name{ font-family:var(--display); font-size:16px; font-weight:500;
  letter-spacing:.22em; color:var(--ink); }

.topbar-right{ display:flex; align-items:center; gap:18px; }
.topbar-meta{ white-space:nowrap; color:var(--ink-faint); font-weight:400; }

/* ── the X handle ────────────────────────────────────────────── */
.x-link{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--ink-soft);
  transition:color .35s ease;
}
.x-link .x-glyph{ flex:none; opacity:.9; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.x-link:hover{ color:var(--rose-deep); }
.x-link:hover .x-glyph{ transform:translateY(-1px) scale(1.12); }
.x-link:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

.x-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(30px,4vh,48px); padding:13px 20px;
  border:1px solid var(--rule);
  text-decoration:none; color:var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  background:rgba(255,255,255,.4);
  transition:border-color .35s ease, background-color .35s ease, color .35s ease;
}
.x-cta i{
  font-style:normal; font-family:var(--display); font-size:13px;
  letter-spacing:.1em; color:var(--ink-faint); padding-left:12px;
  border-left:1px solid var(--rule-soft);
}
.x-cta:hover{ border-color:var(--rose); background:rgba(255,255,255,.66); color:var(--rose-deep); }
.x-cta:hover i{ color:var(--rose-deep); }
.x-cta:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

.rail{ display:flex; gap:4px; }
.rail a{
  position:relative;
  display:flex; align-items:baseline; gap:7px;
  padding:7px 11px 8px;
  text-decoration:none; color:var(--ink-soft);
  transition:color .35s ease, background-color .35s ease;
  border-radius:2px;
}
.rail a em{
  font-style:normal; font-family:var(--mono); font-size:9px;
  letter-spacing:.06em; color:var(--ink-faint);
  transition:color .35s ease;
}
.rail a span{
  font-family:var(--display); font-size:13px; font-weight:400;
  letter-spacing:.12em;
}
.rail a::after{
  content:''; position:absolute; left:11px; right:11px; bottom:2px;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.rail a:hover{ color:var(--ink); background:rgba(255,255,255,.34); }
.rail a:hover::after{ transform:scaleX(1); }
.rail a.on{ color:var(--rose-deep); }
.rail a.on em{ color:var(--rose); }
.rail a.on::after{ transform:scaleX(1); }
.rail a:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }

/* ── layout shell ────────────────────────────────────────────── */
main{ position:relative; z-index:10; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gut); }

.sec{
  position:relative;
  padding:var(--stack) 0;
  min-height:96vh;
  display:flex; align-items:center;
}
.sec-end{ min-height:80vh; }

/* ── type ────────────────────────────────────────────────────── */
.display{
  font-weight:200;
  line-height:.98;
  letter-spacing:-.012em;
  margin:0;
  color:var(--ink);
}
h1.display{
  font-size:clamp(38px, 7.6vw, 108px);
  letter-spacing:.10em;
  font-weight:300;
  color:var(--rose-deep);
}
.eyebrow{ color:var(--rose); }
h2.display{ font-size:clamp(30px, 5.4vw, 74px); }
.display span{ display:block; }

.eyebrow,.chapter{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.34em; color:var(--rose); margin:0 0 clamp(18px,3vh,30px);
}
.chapter{ color:var(--ink-faint); letter-spacing:.3em; font-size:11px; }

.lede{
  font-size:clamp(17px,1.9vw,25px); font-weight:300; line-height:1.5;
  margin:clamp(26px,4vh,44px) 0 0; color:var(--ink-soft); max-width:34ch;
}
.body{
  font-size:clamp(15px,1.28vw,18px); line-height:1.72; font-weight:300;
  color:var(--ink-soft); margin:0; max-width:46ch;
}
.body.dim{ color:var(--ink-soft); opacity:.86; }
.body.wide{ max-width:62ch; margin-top:clamp(26px,4vh,44px); }
.body em{ font-style:normal; color:var(--rose-deep); }

.cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(26px,4vw,68px); margin-top:clamp(34px,5vh,60px);
}

.pull{
  margin:clamp(44px,6vh,76px) 0 0;
  padding-top:clamp(22px,3vh,34px);
  border-top:1px solid var(--rule);
  font-size:clamp(19px,2.5vw,34px); font-weight:200; line-height:1.32;
  color:var(--rose-deep); max-width:22ch;
}
.foot-note{
  margin:clamp(20px,3vh,30px) 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-faint);
}

/* ── hero ────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:0 var(--gut);
}
.hero-in{
  margin-left:auto;                    /* copy right, ship left — as the DA */
  width:min(560px,100%);
}
@media (max-width:860px){
  /* portrait: copy at the top, the sea keeps the bottom of the frame */
  .hero{ align-items:flex-start; padding-top:19vh; }
  .hero-in{ margin-left:0; width:100%; }
  .hero::after{
    content:''; position:absolute; inset:0 0 42% 0; z-index:-1;
    background:linear-gradient(180deg, rgba(253,239,246,.92) 0%, rgba(253,239,246,.72) 62%, transparent 100%);
    pointer-events:none;
  }
  .hero-in{ position:relative; z-index:1; }
  h1.display{ font-size:clamp(34px,10vw,60px); }
}

.facts{
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,52px);
  margin:clamp(38px,6vh,62px) 0 0; padding-top:22px;
  border-top:1px solid var(--rule);
}
.facts div{ margin:0; }
.facts dt{ font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.18em; color:var(--rose-deep); }
.facts dd{ margin:6px 0 0; font-size:clamp(17px,2vw,23px); font-weight:300; color:var(--ink); }

.cue{
  position:absolute; z-index:2; left:var(--gut); bottom:clamp(24px,5vh,48px);
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  color:var(--rose-deep); text-decoration:none; font-size:11px; letter-spacing:.26em;
}
.cue i{ width:38px; height:1px; background:currentColor; animation:tide 3.4s ease-in-out infinite; }
.cue{ font-weight:400; }
@keyframes tide{ 0%,100%{ transform:scaleX(1); opacity:.7 } 50%{ transform:scaleX(1.7); opacity:1 } }

/* ── steps ───────────────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.steps li{
  display:flex; align-items:baseline; gap:16px;
  padding:14px 0; border-top:1px solid var(--rule-soft);
  font-size:clamp(14px,1.15vw,16px); color:var(--ink-soft);
}
.steps li b{ font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.12em; color:var(--rose); min-width:24px; }

/* ── comparison table ────────────────────────────────────────── */
.cmp{
  width:100%; margin-top:clamp(34px,5vh,56px);
  border-collapse:collapse; text-align:left;
  font-size:clamp(13px,1.05vw,15px);
}
.cmp th,.cmp td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
.cmp thead th{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.2em;
  color:var(--ink-faint); border-bottom-color:var(--rule); padding-bottom:10px;
}
.cmp tbody td:first-child{ color:var(--ink-faint); }
.cmp tbody td:nth-child(2){ color:var(--ink); }
.cmp tbody td:last-child{ color:var(--rose-deep); }
.cmp thead th:last-child{ color:var(--rose); }

/* ── patina strip ────────────────────────────────────────────── */
.patina-strip{
  display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,44px);
  margin-top:clamp(38px,5vh,62px); padding-top:clamp(22px,3vh,32px);
  border-top:1px solid var(--rule);
}
.patina-strip figure{ margin:0; }
.patina-strip canvas{
  width:clamp(72px,9vw,112px); height:auto; display:block;
  image-rendering:pixelated;
}
.patina-strip figcaption{
  margin-top:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; color:var(--ink-faint);
}

/* ── the register ────────────────────────────────────────────── */
.reg{
  display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(24px,3.4vw,52px); align-items:start;
  margin-top:clamp(34px,5vh,56px);
}
@media (max-width:900px){ .reg{ grid-template-columns:1fr; } }

.reg-grid-wrap{ min-width:0; }
#fleetgrid{
  width:100%; height:auto; display:block; cursor:crosshair;
  image-rendering:pixelated;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.34);
}
.reg-hint{
  margin:12px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; color:var(--ink-faint);
}

.reg-card{
  border:1px solid var(--rule); padding:22px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(3px);
}
#regship{ width:100%; height:auto; display:block; image-rendering:pixelated; }
.reg-card h3{
  margin:20px 0 4px; font-size:19px; font-weight:400; letter-spacing:.2em; color:var(--ink);
}
.reg-rank{
  margin:0 0 16px; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--rose);
}
.reg-traits{
  margin:0; padding-top:14px; border-top:1px solid var(--rule-soft);
  display:grid; grid-template-columns:auto 1fr; gap:7px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
}
.reg-traits dt{ color:var(--ink-faint); }
.reg-traits dd{ margin:0; color:var(--ink); text-align:right; }

/* ── status ──────────────────────────────────────────────────── */
.status{ list-style:none; margin:clamp(34px,5vh,54px) 0 0; padding:0; display:grid; gap:2px; max-width:520px; }
.status li{
  display:flex; align-items:center; gap:14px;
  padding:15px 0; border-top:1px solid var(--rule-soft);
  font-size:15px; color:var(--ink-soft); font-weight:300;
}
.status li b{ font-weight:400; color:var(--rose-deep); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--rose); flex:none; opacity:.7; }

/* ── footer ──────────────────────────────────────────────────── */
.foot{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px var(--gut) 34px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--ink-soft);
}
.foot-mid{ color:var(--rose); }

/* ── reveals ─────────────────────────────────────────────────── */
[data-rv]{ opacity:0; transform:translateY(16px); transition:opacity .95s ease, transform .95s cubic-bezier(.16,.84,.3,1); }
[data-rv].rv-in{ opacity:1; transform:none; }

.mask-line span{ overflow:hidden; display:block; }
.mask-line span > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,.84,.3,1);
}
.mask-line.rv-in span > i{ transform:none; }
.mask-line span:nth-child(2) > i{ transition-delay:.09s; }
.mask-line span:nth-child(3) > i{ transition-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv].rv-in{ opacity:1; transform:none; transition:none; }
  .mask-line span > i{ transform:none; transition:none; }
  .cue i{ animation:none; }
}

/* ── no-webgl fallback: the page must read completely ────────── */
.no-webgl body,
.no-webgl{ background:linear-gradient(180deg,#FCE0EC 0%,#FDEFF5 44%,#FBD3E4 60%,#F5A9C9 100%) fixed; }
.no-webgl .hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:url("../assets/da-fallback.jpg") left center/cover no-repeat;
  opacity:.5;
}
.no-webgl .pre{ display:none; }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:1120px){
  .topbar-right{ gap:12px; }
  .rail{ gap:0; }
  .rail a span{ display:none; }          /* numbers only — still navigable */
  .rail a{ padding:7px 9px; }
  .rail a em{ font-size:11px; }
  .topbar-meta{ font-size:10px; }
}
@media (max-width:640px){
  .rail{ display:none; }
}
@media (max-width:560px){
  .topbar-meta{ display:none; }   /* the handle stays, the chain label goes */
  .x-link .x-handle{ display:none; }
  .foot{ font-size:10px; letter-spacing:.16em; }
  .facts{ gap:20px; }
  .cmp th,.cmp td{ padding-right:10px; }
  .cmp thead th{ font-size:8px; letter-spacing:.16em; }
}