/* ARK-1 — European Ark Authority house style (V2).
   Pale European daylight, navy ink, warm off-white panels. The Ark supplies the
   spectacle; the interface stays restrained. Serif display, mono metadata,
   sans prose. Flat panels, 1px technical rules, square corners. */

:root {
  --sky:      #dfe7ee;   /* pale European sky behind the vessel */
  --paper:    #efe9dd;   /* cream ground */
  --panel:    #f7f3ea;   /* warm off-white panel */
  --panel-2:  #e6dfd0;   /* raised strip / table head */
  --ink:      #16223a;   /* navy ink */
  --ink-soft: #3b4a66;
  --muted:    #6b7893;   /* blue-grey secondary */
  --rule:     #cdc4b2;
  --rule-sf:  #ded6c6;
  --coral:    #c0442d;   /* notices, deferrals, transfer */
  --green:    #3f6b4f;   /* confirmed / valid only */
  --blue:     #2f5d8a;   /* technical secondary, vacancy */
  --navy-card:#16223a;   /* the institutional record panel */

  /* aliases kept so older rules keep resolving */
  --stamp: var(--coral); --official: var(--blue); --gold: var(--ink); --ok: var(--green);

  --shadow: none;
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --serif: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--official); }
a:hover { text-decoration: none; }

.wrap { max-width: 1000px; margin: 0 auto; padding-inline: 20px; }

/* ---- notice bar ---- */
.noticebar {
  background: var(--panel-2); color: var(--muted);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding-block: 7px;
}
.noticebar .wrap { display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.noticebar b { color: var(--stamp); font-weight: 600; }

/* ---- masthead ---- */
.masthead { border-bottom: 2px solid var(--ink); padding-block: 18px 14px; }
.masthead .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crest {
  width: 42px; height: 42px; flex: none; border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--gold);
  
}
.mast-id { display: flex; align-items: center; gap: 12px; }
.mast-id h1 {
  margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
}
.mast-id p { margin: 1px 0 0; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.mast-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }

nav.tabs { border-bottom: 1px solid var(--rule); background: var(--paper); }
nav.tabs .wrap { display: flex; gap: 22px; overflow-x: auto; }
nav.tabs a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding-block: 11px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
nav.tabs a:hover { color: var(--ink); }
nav.tabs a[aria-current] { color: var(--gold); border-bottom-color: var(--gold); }

/* ---- hero ---- */
.hero { padding-block: 40px 26px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 36px; align-items: start; }
.hero h2 {
  font-family: var(--serif); font-size: clamp(40px, 9vw, 82px); line-height: .96;
  margin: 0 0 10px; letter-spacing: -.015em; font-weight: 700; text-wrap: balance;
  color: var(--ink);
}
.hero .kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px; opacity: .85;
}
.hero .lede { font-size: 18.5px; max-width: 58ch; margin: 0 0 12px; line-height: 1.45; }
.hero .lede strong { font-weight: 600; }
.subtle { color: var(--muted); font-size: 14px; max-width: 66ch; }

.stamp {
  border: 2px double var(--stamp); color: var(--stamp); padding: 11px 17px;
  
  background: rgba(255,106,82,.04);
  transform: rotate(-4deg); text-align: center; font-family: var(--mono);
  letter-spacing: .12em; text-transform: uppercase; flex: none; background: transparent;
}
.stamp b { display: block; font-size: 21px; letter-spacing: .16em; }
.stamp span { font-size: 10px; opacity: .85; }

.countdown {
  margin-top: 16px; border: 1px solid var(--rule); background: var(--panel);
  padding: 12px 16px; text-align: center; box-shadow: var(--shadow);
}
.countdown dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.countdown dd {
  margin: 4px 0 0; font-family: var(--mono); font-size: 26px; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.countdown dd small { display: block; font-size: 10px; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* ---- departure notice ---- */
.notice {
  border: 1px solid var(--rule); border-left: 4px solid var(--stamp);
  background: var(--panel); padding: 16px 18px; margin-block: 24px; box-shadow: var(--shadow);
}
.notice h3 {
  margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stamp);
}
.notice p { margin: 0; }
.notice .dates { font-family: var(--mono); font-size: 15px; margin-top: 10px; }
.notice .dates s { color: var(--muted); text-decoration-color: var(--stamp); }
.notice .dates b { color: var(--ink); }

/* ---- stats ---- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow);
}
.stat { padding: 14px 16px; border-right: 1px solid var(--rule-sf); border-bottom: 1px solid var(--rule-sf); }
.stat:last-child { border-right: 0; }
.stat dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px;
}
.stat dd { margin: 0; font-family: var(--mono); font-size: 21px; font-variant-numeric: tabular-nums; }

/* ---- sections ---- */
section { margin-block: 40px; }
h3.sec {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 7px; margin: 0 0 16px;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
h3.sec span { color: var(--muted); font-size: 10px; letter-spacing: .06em; }

/* ---- manifest ---- */
.manifest { border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow); }
.row {
  display: grid; grid-template-columns: 52px 34px 1fr auto; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule-sf); align-items: center;
}
.row:last-child { border-bottom: 0; }
.row .seat {
  font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.row .emblem { font-size: 19px; text-align: center; line-height: 1; }
.row .who { min-width: 0; }
.row .who b { font-weight: 600; }
.row .who a { text-decoration: none; }
.row .who a:hover { text-decoration: underline; }
.row .pitch {
  color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .amt {
  font-family: var(--mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row .amt small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.row.top .seat { color: var(--stamp); font-weight: 700; }
.row.airlock { background: color-mix(in srgb, var(--stamp) 7%, transparent); }
.row.out { opacity: .62; }
.row.out .seat { color: var(--stamp); }

.airlock-note {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--stamp); padding: 7px 14px; border-bottom: 1px solid var(--rule-sf);
  background: color-mix(in srgb, var(--stamp) 10%, transparent);
}

/* ---- ticker ---- */
.ticker { border: 1px solid var(--rule); background: var(--panel); max-height: 260px; overflow-y: auto; }
.tick {
  display: flex; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--rule-sf);
  font-family: var(--mono); font-size: 12px; align-items: baseline;
}
.tick:last-child { border-bottom: 0; }
.tick .t { color: var(--muted); flex: none; width: 62px; }
.tick .badge {
  flex: none; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 0 5px; border-radius: 2px;
}
.tick.boarded .badge, .tick.topped_up .badge { color: var(--ok); }
.tick.jettisoned .badge { color: var(--stamp); }
.tick.deferral .badge { color: var(--official); }
.tick.capacity .badge { color: var(--stamp); }
.tick .txt { color: var(--ink); min-width: 0; }

/* ---- form ---- */
.form-card {
  border: 1px solid var(--rule); border-top: 2px solid var(--gold); background: var(--panel);
  padding: 20px; box-shadow: var(--shadow);
}
.form-card h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 26px; font-weight: 700; }
.form-card > p.hint { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.field input {
  font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); border-radius: 2px; width: 100%;
}
.field input:focus { outline: 2px solid var(--official); outline-offset: -1px; }
.field .help { font-size: 11.5px; color: var(--muted); }

.amount-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  font-family: var(--mono); font-size: 12px; padding: 6px 10px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); cursor: pointer; border-radius: 2px;
}
.chip:hover { border-color: var(--ink); }

button.primary {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--panel); border: 0; padding: 14px 22px; cursor: pointer;
  border-radius: 2px; width: 100%; margin-top: 16px; font-weight: 600;
  
}
button.primary:hover { background: #22304d;  }
button.primary:disabled { opacity: .5; cursor: default; }

.formfoot { margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.err { color: var(--stamp); font-family: var(--mono); font-size: 12px; margin-top: 10px; }

.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; }

/* ---- boarding pass ---- */
.pass {
  border: 1px solid var(--ink); background: var(--panel); max-width: 620px; margin: 0 auto;
  box-shadow: var(--shadow);
}
.pass-top { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 2px dashed var(--rule); }
.pass-top h2 { font-family: var(--serif); font-size: 30px; margin: 0; }
.pass-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 18px; padding: 20px; }
.pass-body dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pass-body dd { margin: 3px 0 0; font-family: var(--mono); font-size: 17px; }
.pass-foot { padding: 14px 20px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); }
.status-ok { color: var(--ok); }
.status-out { color: var(--stamp); }

/* ---- prose ---- */
.prose { max-width: 68ch; }
.prose h3 { font-family: var(--serif); font-size: 22px; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 15.5px; }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--panel); padding: 1px 5px; border: 1px solid var(--rule); }

table.log { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--rule); }
table.log th, table.log td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule-sf); font-size: 13.5px; vertical-align: top; }
table.log th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
table.log td.no { font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--muted); }
table.log tr:last-child td { border-bottom: 0; }

footer.site { border-top: 1px solid var(--gold); margin-top: 56px; padding-block: 22px 40px; }
footer.site .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
footer.site a { color: var(--muted); }

.flash {
  border: 1px solid var(--ok); border-left: 4px solid var(--ok); background: var(--panel);
  padding: 14px 16px; margin-block: 18px;
}
.flash.bad { border-color: var(--stamp); border-left-color: var(--stamp); }

@media (max-width: 820px) {
  .two-col, .hero-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--rule-sf); }
  .stat dd { font-size: 18px; }
  .masthead .wrap { align-items: flex-start; }
  .mast-meta { text-align: left; }
  .hero .lede { font-size: 16px; }
  .stamp { justify-self: start; }
  .fields { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px 26px 1fr auto; gap: 9px; padding: 10px; }
  .hero { padding-block: 26px 18px; }
}

/* ============ two of every kind ============ */

.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }

.kindcard { border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow); }
.kindcard.full { border-color: var(--ink); }
.kindcard > header {
  display: flex; align-items: baseline; gap: 9px; padding: 10px 13px;
  border-bottom: 1px solid var(--rule); background: var(--panel-2, transparent);
}
.kindcard > header .glyph { font-size: 15px; line-height: 1; color: var(--muted); }
.kindcard > header b { font-size: 14.5px; font-weight: 600; }
.kindcard > header .kprice {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  letter-spacing: .04em; white-space: nowrap;
}
.kindcard.full > header .kprice { color: var(--stamp); }

.berth {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 13px; border-bottom: 1px solid var(--rule-sf);
}
.berth:last-child { border-bottom: 0; }
.berth .bn { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.berth .bwho { min-width: 0; font-size: 13.5px; font-weight: 600; }
.berth .bwho a { text-decoration: none; }
.berth .bwho a:hover { text-decoration: underline; }
.berth .bwho small {
  display: block; font-weight: 400; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.berth .bamt { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.berth.airlock { background: color-mix(in srgb, var(--stamp) 7%, transparent); }
.berth.airlock .bn { color: var(--stamp); font-weight: 700; }
.airtag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stamp); border: 1px solid currentColor; padding: 0 4px;
}
.berth .bamt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.berth.free { background: color-mix(in srgb, var(--official) 7%, transparent); }
.berth.free .bwho a { color: var(--official); }
.mated {
  color: var(--ok); margin-left: 6px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor;
  padding: 0 4px; vertical-align: 1px; font-weight: 400;
}
.waiting {
  padding: 6px 13px; border-top: 1px solid var(--rule-sf); font-family: var(--mono);
  font-size: 10.5px; color: var(--muted); letter-spacing: .04em;
}

/* ============ plain-English glosses ============ */

.notice .plain, .noticeitem .plain, .gitem .ark { margin-top: 9px; font-size: 14px; }
.notice .plain span, .noticeitem .plain span, .gitem .ark span {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.notice .plain, .noticeitem .plain { border-left: 2px solid var(--rule); padding-left: 11px; }

.explain {
  border: 1px solid var(--rule); border-left: 4px solid var(--official);
  background: var(--panel); padding: 16px 18px; margin-block: 22px;
}
.explain h4 { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.explain p { margin: 0 0 8px; max-width: 72ch; }
.explain p:last-child { margin-bottom: 0; }
.explain .dim { color: var(--muted); font-size: 13.5px; }
.explain.big h4 { font-size: 23px; }

/* ============ notices list ============ */

.noticelist { display: grid; gap: 12px; }
.noticeitem { border: 1px solid var(--rule); border-left: 4px solid var(--stamp); background: var(--panel); padding: 14px 16px; }
.noticeitem > header {
  display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono);
  font-size: 11px; color: var(--muted); margin-bottom: 7px;
}
.noticeitem > header b { color: var(--stamp); letter-spacing: .08em; }
.noticeitem p { margin: 0; }
.noticeitem .dates { font-family: var(--mono); font-size: 13px; margin-top: 9px; }
.noticeitem .dates s { color: var(--muted); }

/* ============ glossary ============ */

.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gitem { border: 1px solid var(--rule); background: var(--panel); padding: 14px 16px; }
.gitem h4 { margin: 0 0 5px; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.gitem p { margin: 0; font-size: 14px; }
.gitem .ark { color: var(--ink); border-top: 1px solid var(--rule-sf); padding-top: 8px; }

/* ============ mates ============ */

.mate-card {
  max-width: 620px; margin: 18px auto 0; border: 1px solid var(--rule);
  border-top: 3px solid var(--ok); background: var(--panel); padding: 18px 20px; box-shadow: var(--shadow);
}
.mate-card h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.mate-card p { margin: 0 0 10px; }
.mate-in {
  border: 1px solid var(--ok); border-left: 4px solid var(--ok); background: var(--paper);
  padding: 11px 13px; margin-bottom: 15px; font-size: 13.5px;
}
.copyrow { display: flex; gap: 8px; flex-wrap: wrap; }
.copyrow input {
  flex: 1 1 240px; min-width: 0; font-family: var(--mono); font-size: 12.5px; padding: 9px 11px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 2px;
}

.kindtag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); padding: 1px 5px; margin-left: 5px;
  white-space: nowrap;
}

.field select {
  font: inherit; font-size: 14.5px; padding: 9px 11px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); border-radius: 2px; width: 100%;
}
.field select:disabled { opacity: .7; }

.tick.mated .badge, .tick.credited .badge { color: var(--ok); }
.tick.struck .badge { color: var(--stamp); }

@media (max-width: 620px) {
  .kinds, .gloss { grid-template-columns: 1fr; }
}

/* ============ general arrangement drawing ============ */

.planwrap {
  border: 1px solid var(--rule); background: var(--panel);
  overflow-x: auto; padding: 8px 8px 0;
}
.plan { display: block; min-width: 780px; width: 100%; height: auto; }

.plan .hull { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.plan .engine { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.plan .centreline { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 16 4 2 4; }
.plan .cl { fill: var(--muted); font-size: 11px; }
.plan .dim { stroke: var(--muted); stroke-width: 1; }
.plan .dimbg { fill: var(--panel); }
.plan .dimtext { font-family: var(--mono); font-size: 11px; fill: var(--muted); text-anchor: middle; }
.plan .hatchline { stroke: var(--rule); stroke-width: 1; }

.plan .bay { fill: var(--paper); stroke: var(--rule); stroke-width: 1; transition: fill .15s; }
.plan .bay.full { stroke: color-mix(in srgb, var(--muted) 45%, var(--rule)); }
.plan a:hover .bay { fill: var(--panel-2); }
.plan a { cursor: pointer; }
.plan .bayhead { fill: var(--panel-2); stroke: var(--rule); stroke-width: 1; }
.plan .bno { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); }
.plan .blabel { font-family: var(--mono); font-size: 8.5px; fill: var(--ink); letter-spacing: .09em; }
.plan .bnum { font-family: var(--mono); font-size: 8px; fill: var(--muted); }
.plan .bfoot { font-family: var(--mono); font-size: 7.5px; fill: var(--muted); letter-spacing: .06em; }

.plan .slot.taken { fill: var(--panel); }
.plan .slot.air { fill: color-mix(in srgb, var(--stamp) 15%, var(--paper)); }
.plan .slot.free {
  fill: color-mix(in srgb, var(--official) 9%, var(--paper));
  stroke: var(--official); stroke-width: 1; stroke-dasharray: 3 3;
}
.plan .pname { font-family: var(--mono); font-size: 9px; fill: var(--ink); }
.plan .pamt { font-family: var(--mono); font-size: 9px; fill: var(--ink); text-anchor: end; }
.plan .pamt.free { fill: var(--official); }
.plan .pfree { font-family: var(--mono); font-size: 8.5px; fill: var(--official); letter-spacing: .1em; }

.plan .sealed { fill: url(#hatch); stroke: var(--stamp); stroke-width: 1; }
.plan .sealed-t {
  font-family: var(--mono); font-size: 12px; fill: var(--stamp);
  text-anchor: middle; letter-spacing: .22em;
}

.plan .holdbay { fill: none; stroke: var(--muted); stroke-width: 1; }
.plan .holdhatch { fill: url(#hatch); opacity: .3; }
.plan .holdcount { font-family: var(--mono); font-size: 8.5px; fill: var(--stamp); text-anchor: end; }
.plan .holdnames { font-family: var(--mono); font-size: 9px; fill: var(--ink); }
.plan .holdnote { font-family: var(--mono); font-size: 8px; fill: var(--muted); }
.plan .sect { font-family: var(--mono); font-size: 9px; fill: var(--muted); letter-spacing: .11em; }

/* ---- title block ---- */
.titleblock {
  display: grid; grid-template-columns: 1fr 1.25fr;
  border: 1px solid var(--rule); border-top: 0; background: var(--panel);
}
.tb-main { display: grid; grid-template-columns: 1fr 1fr; }
.tb-main > div {
  padding: 9px 12px; border-right: 1px solid var(--rule-sf); border-bottom: 1px solid var(--rule-sf);
}
.tb-main span {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.tb-main b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.tb-rev { border-collapse: collapse; width: 100%; border-left: 1px solid var(--rule); }
.tb-rev th, .tb-rev td {
  text-align: left; padding: 5px 10px; font-family: var(--mono); font-size: 10px;
  border-bottom: 1px solid var(--rule-sf); vertical-align: top;
}
.tb-rev th { font-size: 8.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.tb-rev td:first-child { color: var(--stamp); white-space: nowrap; }
.tb-rev td:nth-child(2) { white-space: nowrap; color: var(--muted); }

/* ---- the hold list ---- */
.holdrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--rule-sf); }
.holdrow:last-child { border-bottom: 0; }
.holdrow .hn { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.holdrow .hw { min-width: 0; font-size: 14px; font-weight: 600; }
.holdrow .hw small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.holdrow .ha { font-family: var(--mono); font-size: 13px; text-align: right; }
.holdrow .ha small { display: block; font-size: 10px; color: var(--muted); }

@media (max-width: 720px) {
  .titleblock { grid-template-columns: 1fr; }
  .tb-rev { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---- what a listing buys ---- */
.getbox { border: 1px solid var(--rule); border-left: 4px solid var(--ok); background: var(--panel); padding: 16px 18px; }
.getbox h4 { margin: 0 0 10px; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.getbox ul { margin: 0; padding-left: 18px; display: grid; gap: 9px; }
.getbox li { font-size: 13.5px; }
.getbox code { font-family: var(--mono); font-size: 11.5px; background: var(--paper); padding: 1px 4px; border: 1px solid var(--rule); }

/* ============ cause of evacuation ============ */

.evac {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: stretch;
  border: 1px solid var(--rule); border-left: 2px solid var(--stamp);
  background: var(--panel);
  padding: 22px 24px; margin-block: 26px; box-shadow: var(--shadow);
}
.evac .label { display: block; margin-bottom: 8px; }
.evac h3 {
  margin: 0 0 10px; font-family: var(--serif); font-size: clamp(22px, 3.4vw, 31px);
  font-weight: 700; line-height: 1.1; color: var(--stamp); text-wrap: balance;
}
.evac p { margin: 0 0 12px; max-width: 62ch; }
.evac p:last-child { margin-bottom: 0; }
.evac .dim { color: var(--muted); font-size: 13.5px; }

table.risk { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.risk th, table.risk td {
  text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-sf);
  font-size: 13px; vertical-align: top;
}
table.risk th {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); border-bottom-color: var(--rule);
}
table.risk td:first-child { color: var(--ink); }
table.risk td.fig { font-family: var(--mono); color: var(--stamp); white-space: nowrap; }
table.risk td.status {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
table.risk tr:last-child td { border-bottom: 0; }

/* ---- trajectory inset ---- */
.orbit { display: grid; place-items: start center; padding-top: 6px; }
.orbit svg { width: 100%; max-width: 380px; height: auto; }
.orbit .planet {
  fill: rgba(121,200,255,.07); stroke: var(--official); stroke-width: 1;
}
.orbit .planet-glow { fill: url(#earthglow); }
.orbit .terminator { fill: rgba(7,9,18,.72); }
.orbit .traj { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .9; }
.orbit .traj-halo { fill: none; stroke: var(--gold); stroke-width: 5; opacity: .07; }
.orbit .dest { fill: none; stroke: var(--gold); stroke-width: 1; }
.orbit .vessel { fill: var(--gold); }
.orbit .otext {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  fill: var(--muted);
}
.orbit .otext.hi { fill: var(--gold); }
.orbit .otext.ice { fill: var(--official); }
.orbit .tick { stroke: var(--rule); stroke-width: 1; }

@media (max-width: 820px) {
  .evac { grid-template-columns: 1fr; padding: 18px; }
  .orbit { order: -1; }
}

/* ============ full-bleed drawing ============ */

.bleed {
  width: 100vw; max-width: 100%;
  margin-inline: calc(50% - min(50vw, 50%));
  padding-inline: max(20px, calc((100% - 1460px) / 2));
}
.plan .pip.taken   { fill: var(--panel-2); stroke: var(--muted); stroke-width: 1; }
.plan .pip.airlock { fill: color-mix(in srgb, var(--stamp) 28%, var(--paper)); stroke: var(--stamp); stroke-width: 1; }
.plan .pip.vacant  { fill: none; stroke: var(--official); stroke-width: 1; stroke-dasharray: 3 2.5; }
.plan .bay.hot { stroke: color-mix(in srgb, var(--coral) 40%, var(--rule)); }
.plan .bprice { font-family: var(--mono); font-size: 11px; fill: var(--ink); text-anchor: end; }
.plan .blabel { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); letter-spacing: .1em; }
.plan .bno { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }
.plan .bfoot { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); letter-spacing: .08em; }
.plan .holdnames { font-family: var(--mono); font-size: 10px; fill: var(--ink); }
.plan .sealed-t { font-size: 13px; }

/* ============ vessel specifications ============ */

.specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border: 1px solid var(--rule); background: var(--panel); margin-top: -1px;
}
.specs > div { padding: 14px 17px; border-right: 1px solid var(--rule-sf); }
.specs > div:last-child { border-right: 0; }
.specs dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.specs dd { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ============ the berth board ============ */

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.bd-card {
  border: 1px solid var(--rule); background: var(--panel); display: flex; flex-direction: column;
}
.bd-card.full { border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.bd-card > header {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 15px;
  border-bottom: 1px solid var(--rule); background: var(--panel-2);
}
.bd-no { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.bd-glyph { color: var(--gold); font-size: 14px; line-height: 1; }
.bd-card > header b { font-size: 15.5px; font-weight: 600; }

.bd-berth {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 13px; align-items: start;
  padding: 13px 15px; border-bottom: 1px solid var(--rule-sf); text-decoration: none; color: inherit;
}
.bd-n { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 3px; }
.bd-who { min-width: 0; }
.bd-who b { font-size: 15px; font-weight: 600; }
.bd-who b a { color: var(--ink); text-decoration: none; }
.bd-who b a:hover { color: var(--gold); }
.bd-who p {
  margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bd-amt {
  font-family: var(--mono); font-size: 15px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bd-amt small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.bd-amt.free { color: var(--muted); }
.bd-berth.airlock { background: color-mix(in srgb, var(--stamp) 8%, transparent); }
.bd-berth.airlock .bd-n { color: var(--stamp); font-weight: 700; }
.bd-berth.vacant { background: color-mix(in srgb, var(--official) 6%, transparent); }
.bd-berth.vacant .bd-who b { color: var(--official); }
.bd-berth.vacant:hover { background: color-mix(in srgb, var(--official) 12%, transparent); }

.bd-cta {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 15px; border-top: 1px solid var(--rule); text-decoration: none;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.bd-cta b { font-size: 13.5px; color: var(--gold); letter-spacing: 0; }
.bd-cta:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--ink); }

.airtag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stamp); border: 1px solid currentColor; padding: 1px 5px; margin-left: 6px;
  vertical-align: 2px;
}

/* ---- the honest line above the button ---- */
.pdoom {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--stamp); text-align: center;
  letter-spacing: .02em;
}

/* ---- fewer competing accent bars ---- */
.explain { border-left-width: 1px; border-left-color: var(--rule); }
.getbox { border-left-width: 1px; border-left-color: var(--rule); border-top: 2px solid var(--ok); }

/* ============================================================
   V1 institutional shell — header, nav, hero, register
   ============================================================ */

.wrap { max-width: 1060px; margin: 0 auto; padding-inline: 20px; }

/* ---- masthead ---- */
header.masthead {
  border-bottom: 1px solid var(--rule); background: var(--paper);
  padding-block: 14px; padding-top: max(14px, env(safe-area-inset-top));
}
header.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.mast-id { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.mast-id .crest {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--rule); border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; color: var(--muted);
}
.mast-id b {
  display: block; font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.mast-id em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px;
}
.disclosure {
  margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--rule); padding: 5px 9px;
}

/* ---- nav ---- */
nav.tabs .wrap { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; }
.tabset { display: flex; gap: 0; overflow-x: auto; }
nav.tabs a {
  display: flex; align-items: center; min-height: 44px; padding-inline: 0; margin-right: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
nav.tabs a:hover { color: var(--ink); }
nav.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
nav.tabs .navcta {
  margin-right: 0; border-bottom: 0; color: var(--ink);
  border: 1px solid var(--rule); padding-inline: 14px; align-self: center; min-height: 38px;
}
nav.tabs .navcta:hover { background: var(--panel-2); }

/* ---- hero ---- */
.hero { padding-block: 44px 32px; border-bottom: 1px solid var(--rule); }
.docref {
  margin: 0 0 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--muted);
}
.hero h1 {
  margin: 0 0 20px; font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 7vw, 72px); line-height: .98; letter-spacing: -.01em;
  text-transform: uppercase; text-wrap: balance; color: var(--ink);
}
.hero .lede { margin: 0 0 14px; font-size: 17px; max-width: 62ch; }
.hero .deadpan {
  margin: 0 0 26px; font-size: 15px; color: var(--muted); max-width: 62ch;
  border-left: 1px solid var(--rule); padding-left: 14px;
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 0 22px; border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--panel-2); border-color: var(--muted); }
.btn.primary { background: var(--ink); color: var(--panel); border-color: var(--ink); font-weight: 600; }
.btn.primary:hover { background: #22304d; }
.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- live readout ---- */
.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--rule); margin: 0;
}
.readout > div { padding: 13px 16px; border-right: 1px solid var(--rule-sf); }
.readout > div:last-child { border-right: 0; }
.readout dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.readout dd {
  margin: 5px 0 0; font-family: var(--mono); font-size: 19px; font-variant-numeric: tabular-nums;
}

/* ---- register of compartments ---- */
.register { border: 1px solid var(--rule); }
.reg-head, .reg-row {
  display: grid; grid-template-columns: 1fr 92px 108px 132px; gap: 12px; align-items: center;
  padding: 0 16px; min-height: 52px;
}
.reg-head {
  min-height: 38px; background: var(--panel-2); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.reg-row {
  border-bottom: 1px solid var(--rule-sf); text-decoration: none; color: inherit;
  transition: background .15s;
}
.reg-row:last-child { border-bottom: 0; }
.reg-row:hover { background: var(--panel); }
.reg-name { font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.reg-name i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  letter-spacing: .08em; flex: none;
}
.reg-occ, .reg-min { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.reg-min { text-align: right; }
.reg-state { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.reg-state.vacant { color: var(--blue); }
.reg-state.one-berth { color: var(--blue); }
.reg-state.full { color: var(--muted); }

/* ---- footer ---- */
footer.site { border-top: 1px solid var(--rule); margin-top: 56px; padding-block: 26px 44px; }
footer.site p { margin: 0; font-size: 13px; color: var(--muted); max-width: 78ch; }
footer.site .foot-links { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }

/* ---- section headings ---- */
h3.sec {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin: 0 0 16px;
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
h3.sec span { color: var(--muted); font-size: 10px; letter-spacing: .08em; }

/* ---- mobile ---- */
@media (max-width: 720px) {
  .wrap { padding-inline: 18px; }
  /* the hero carries a full-width CTA immediately below; a second one here
     only squeezes the tab strip */
  nav.tabs .navcta { display: none; }
  nav.tabs a { margin-right: 20px; font-size: 10.5px; }
  header.masthead .wrap { align-items: flex-start; }
  .disclosure { order: 3; width: 100%; }
  .hero { padding-block: 30px 24px; }
  .hero .lede { font-size: 16px; }
  .actions .btn { flex: 1 1 100%; }
  .readout { grid-template-columns: 1fr 1fr; }
  .readout > div:nth-child(2n) { border-right: 0; }
  .readout > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-sf); }
  .reg-head { display: none; }
  .reg-row {
    grid-template-columns: 1fr auto; grid-template-areas: "name min" "occ state";
    padding-block: 12px; gap: 4px 12px; min-height: 64px;
  }
  .reg-name { grid-area: name; }
  .reg-min { grid-area: min; }
  .reg-occ { grid-area: occ; color: var(--muted); font-size: 12px; }
  .reg-state { grid-area: state; text-align: right; }
}

/* ---- cause strip under the notice ---- */
.cause-line {
  margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--rule);
  font-size: 14px; color: var(--muted);
}
.cause-line b { color: var(--ink); font-weight: 600; }
.cause-line a { color: var(--blue); text-decoration: none; white-space: nowrap; }
.cause-line a:hover { text-decoration: underline; }

/* ---- page heads (category, documents, privacy) ---- */
.kind-head { padding-block: 36px 26px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.kind-head h1 {
  margin: 0 0 12px; font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.04; letter-spacing: -.01em;
  text-transform: uppercase;
}
.kind-head .lede { margin: 0; font-size: 16.5px; max-width: 62ch; color: var(--ink); }
.kind-state {
  margin: 16px 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--muted);
}
.kind-state b { color: var(--ink); }

/* ---- occupants ---- */
.occupants { border: 1px solid var(--rule); }
.occ {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: start;
  padding: 18px 18px; border-bottom: 1px solid var(--rule-sf);
}
.occ:last-child { border-bottom: 0; }
.occ-n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding-top: 4px;
}
.occ-who { min-width: 0; }
.occ-who b { font-size: 17px; font-weight: 600; }
.occ-who b a { color: var(--ink); text-decoration: none; }
.occ-who b a:hover { text-decoration: underline; }
.occ-who p { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }
.occ-amt {
  font-family: var(--mono); font-size: 17px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.occ-amt small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.occ.vacant { background: var(--panel); }
.occ.vacant .occ-who b { color: var(--blue); }

/* ---- allocation block: the conversion moment ---- */
.allocation {
  display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-left: 2px solid var(--ink); background: var(--panel);
  padding: 22px 24px;
}
.allocation .label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.alloc-amt {
  margin: 6px 0 8px; font-family: var(--mono); font-size: 34px; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.alloc-note { margin: 0; font-size: 14px; color: var(--muted); max-width: 54ch; }
.racenote {
  margin: 14px 0 0; font-size: 13px; color: var(--muted); max-width: 78ch;
  border-left: 1px solid var(--rule); padding-left: 14px;
}

/* ---- documents index ---- */
.doc-row { grid-template-columns: 1fr auto; min-height: 64px; }
.doc-row .reg-name { flex-direction: column; align-items: flex-start; gap: 3px; }
.doc-row .reg-name b { font-size: 15.5px; font-weight: 600; }
.doc-row .reg-name em {
  font-style: normal; font-size: 13.5px; color: var(--muted); font-weight: 400;
}
.doc-row .reg-state { color: var(--muted); }

.more { margin: 20px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.more a { color: var(--blue); text-decoration: none; }
.more a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .occ { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 15px; }
  .occ-n { grid-column: 1 / -1; padding-top: 0; }
  .allocation { flex-direction: column; align-items: stretch; padding: 18px; }
  .allocation .btn { width: 100%; }
  .alloc-amt { font-size: 30px; }
}

/* ============================================================
   THE ARK — scene, shell, cutaway, hotspots
   ============================================================ */

.landing {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 40px; align-items: start; padding-block: 30px 10px;
}
.landing.is-open { grid-template-columns: minmax(0, 1fr) 392px; gap: 28px; }
.landing.is-open .landing-hero { display: none; }
.landing-panel { display: none; }
.landing.is-open .landing-panel { display: block; }

.ark-stage { position: relative; }
.ark { display: block; width: 100%; height: auto; max-height: 82vh; }

/* environment */
.ark .sky { fill: var(--sky); }
.ark .sky-far { fill: #aebecf; opacity: .72; }
.ark .sky-strut { stroke: #aebecf; stroke-width: 2; opacity: .72; }
.ark .deck-label { opacity: 0; transition: opacity 420ms ease 320ms; }
.ark.is-open .deck-label { opacity: 1; }
.ark .sky-sky { fill: var(--sky); }
.ark .ground { fill: #cfc7b6; }
.ark .ground-line { stroke: var(--rule); stroke-width: 1; }
.ark .gantry { fill: none; stroke: #8d8570; stroke-width: 1.4; }
.ark .gantry-x { stroke: #8d8570; stroke-width: .9; opacity: .75; }
.ark .gantry-arm { fill: #bdb3a0; stroke: #8d8570; stroke-width: 1; }
.ark .plinth { fill: #bdb3a0; stroke: #8d8570; stroke-width: 1.2; }

/* vessel skin */
.ark .hull-skin { fill: #e9e6df; stroke: var(--ink); stroke-width: 1.6; }
.ark .booster { fill: #ded9d0; stroke: var(--ink); stroke-width: 1.4; }
.ark .nozzle { fill: #c4bcae; stroke: var(--ink); stroke-width: 1.3; }
.ark .skin-seam { stroke: #aaa294; stroke-width: 1; }

/* markings */
.ark .mark-name {
  font-family: var(--display); font-size: 42px; font-weight: 700; fill: var(--ink);
  text-anchor: middle; letter-spacing: .06em;
}
.ark .mark-line, .ark .mark-ref {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-soft); text-anchor: middle;
  letter-spacing: .12em;
}
.ark .mark-ref { font-size: 10px; fill: var(--muted); }
.ark .seal circle { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.ark .seal .seal-inner { stroke-width: .8; }
.ark .seal-t {
  font-family: var(--display); font-size: 17px; font-weight: 700; fill: var(--ink);
  text-anchor: middle; letter-spacing: .06em;
}
.ark .seal-y { font-family: var(--mono); font-size: 9px; fill: var(--ink-soft); text-anchor: middle; }

/* the shell swings away like an inspection door */
.ark .shell-l, .ark .shell-r, .ark .shell-marks {
  transform-box: fill-box; will-change: transform, opacity;
  transition: transform 1100ms cubic-bezier(.22, .72, .18, 1), opacity 520ms ease;
}
.ark .shell-l { transform-origin: 0% 50%; }
.ark .shell-r { transform-origin: 100% 50%; }
.ark.is-open .shell-l { transform: translateX(-104%) perspective(1500px) rotateY(-62deg); opacity: .3; }
.ark.is-open .shell-r { transform: translateX(104%) perspective(1500px) rotateY(62deg); opacity: .3; }
.ark.is-open .shell-marks { opacity: 0; transition-duration: 340ms; }

/* cutaway */
.ark .interior-bg { fill: #2b3242; }
.ark .bay-shell { fill: #39414f; stroke: #10161f; stroke-width: 1; }
.ark .bay-glow { fill: #55617a; }
.ark .bay-full .bay-glow { fill: #c8b284; }
.ark .bay-part .bay-glow { fill: #8f9bb4; }
.ark .bay-empty .bay-glow { fill: #454e60; }
.ark .bay-code {
  font-family: var(--mono); font-size: 9px; fill: #cfd6e4; text-anchor: middle; letter-spacing: .06em;
}
.ark .bay-occ { font-family: var(--mono); font-size: 9px; fill: #0f1420; text-anchor: middle; }
.ark .bay-empty .bay-occ { fill: #aab3c4; }
.ark .deck-floor { stroke: #1b2230; stroke-width: 1.2; }
.ark .deck-letter {
  font-family: var(--mono); font-size: 11px; fill: var(--ink); letter-spacing: .12em;
}
.ark .deck-range { font-family: var(--mono); font-size: 9px; fill: var(--muted); letter-spacing: .08em; }
.ark .deck-code, .ark .deck-name {
  font-family: var(--mono); font-size: 10px; fill: #cfd6e4; letter-spacing: .1em;
}
.ark .service { fill: #232936; stroke: #10161f; stroke-width: 1; }
.ark .service-t {
  font-family: var(--mono); font-size: 8.5px; fill: #8b95a8; text-anchor: middle; letter-spacing: .14em;
}
.ark .hold-shell { fill: #1b212c; stroke: #0d1219; stroke-width: 1.2; }
.ark .hold-code { font-family: var(--mono); font-size: 10px; fill: #cfd6e4; letter-spacing: .1em; }
.ark .hold-name {
  font-family: var(--display); font-size: 22px; font-weight: 700; fill: #e6e2d8;
  text-anchor: middle; letter-spacing: .08em;
}
.ark .hold-sub {
  font-family: var(--mono); font-size: 8.5px; fill: #8b95a8; text-anchor: middle; letter-spacing: .12em;
}

/* hotspots */
.ark .ark-hotspots rect { fill: transparent; stroke: transparent; stroke-width: 1.5; }
.ark:not(.is-open) .ark-hotspots { pointer-events: none; }
.ark.is-open .hotspot:hover rect,
.ark.is-open .hotspot:focus-visible rect { stroke: #f2efe6; fill: rgba(242,239,230,.10); }
.ark .hotspot:focus { outline: none; }
.ark.is-open .hotspot.selected rect { stroke: #f2efe6; stroke-width: 2; fill: rgba(242,239,230,.16); }

/* ---- institutional record panel ---- */
.record {
  border: 1px solid var(--ink); background: var(--navy-card); color: #e9e6dd;
  position: sticky; top: 16px;
}
.record-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.record-code {
  font-family: var(--mono); font-size: 12px; background: #e9e6dd; color: var(--navy-card);
  padding: 3px 8px; letter-spacing: .08em;
}
.record-head h2 {
  margin: 0; font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: .02em;
}
.record-occ {
  margin: 0; padding: 0 18px 14px; font-family: var(--mono); font-size: 11px;
  color: #9fb0c9; letter-spacing: .1em; text-transform: uppercase;
}
.record-desc {
  margin: 0; padding: 0 18px 16px; font-size: 14px; color: #c3cbd9; line-height: 1.5;
  border-bottom: 1px solid #2b3750;
}
.record-berth {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: baseline;
  padding: 13px 18px; border-bottom: 1px solid #2b3750;
}
.record-berth .n { font-family: var(--mono); font-size: 12px; color: var(--coral); }
.record-berth b { font-size: 15px; font-weight: 600; }
.record-berth b a { color: #e9e6dd; text-decoration: none; }
.record-berth b a:hover { text-decoration: underline; }
.record-berth p { margin: 3px 0 0; font-size: 13px; color: #9fb0c9; font-style: italic; }
.record-berth .amt { font-family: var(--mono); font-size: 14px; }
.record-berth.vacant b { color: #8fc2f0; }

.record-alloc { padding: 16px 18px; border-bottom: 1px solid #2b3750; }
.record-alloc .amt {
  font-family: var(--mono); font-size: 24px; display: block; margin-bottom: 4px;
}
.record-alloc p { margin: 0 0 14px; font-size: 13px; color: #9fb0c9; line-height: 1.5; }
.record-cta {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  background: #dfe9f4; color: var(--navy-card); text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600;
}
.record-cta:hover { background: #fff; }

.record-list { max-height: 300px; overflow-y: auto; }
.record-list a {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 18px; border-bottom: 1px solid #232f45; text-decoration: none; color: #d5dbe6;
  font-size: 13.5px;
}
.record-list a:hover { background: #1d2a43; }
.record-list .c { font-family: var(--mono); font-size: 11px; color: #8b9ab4; }
.record-list .o { font-family: var(--mono); font-size: 11.5px; color: #9fb0c9; }
.record-list .o.full { color: var(--coral); }
.record-foot { padding: 12px 18px; font-family: var(--mono); font-size: 11px; color: #8b9ab4; }
.record-foot a { color: #8fc2f0; text-decoration: none; }

/* ---- mobile bottom sheet ---- */
@media (max-width: 900px) {
  .landing, .landing.is-open { grid-template-columns: 1fr; gap: 22px; }
  .landing.is-open .landing-hero { display: block; }
  .ark { max-height: none; }
  .landing-panel { display: none !important; }
  .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    transform: translateY(102%); transition: transform 260ms cubic-bezier(.22,.72,.18,1);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--ink); max-height: 76vh; overflow-y: auto;
  }
  .sheet.on { transform: translateY(0); }
  .sheet .record { position: static; border-left: 0; border-right: 0; border-bottom: 0; }
  .sheet-close {
    position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px;
    background: transparent; border: 0; color: #9fb0c9; font-size: 20px; cursor: pointer;
  }
}
@media (min-width: 901px) { .sheet { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ark .shell-l, .ark .shell-r, .ark .shell-marks, .sheet { transition-duration: 1ms !important; }
  .ark.is-open .shell-l, .ark.is-open .shell-r { transform: none; opacity: 0; }
}

/* ---- landing furniture ---- */
.regupdate {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0; padding: 10px 0 0; font-size: 13.5px; color: var(--muted);
}
.regupdate .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none;
  transform: translateY(-1px);
}
.regupdate b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral); font-weight: 500;
}
.landing-hero .docref { margin-bottom: 16px; }
.landing-hero h1 {
  margin: 0 0 18px; font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 5.6vw, 66px); line-height: .98; letter-spacing: -.005em;
  text-transform: uppercase;
}
.landing-hero h1 em { font-style: normal; font-size: .62em; letter-spacing: .005em; }
.landing-hero .lede { margin: 0 0 24px; font-size: 17.5px; max-width: 44ch; }
.landing-hero .actions { margin-bottom: 24px; }
.landing-hero .readout { border-color: var(--rule); grid-template-columns: repeat(3, 1fr); }
.readout dd { color: var(--ink); }
.entrynote {
  margin: 18px 0 0; font-size: 13px; color: var(--muted); max-width: 52ch;
  border-left: 1px solid var(--rule); padding-left: 14px;
}
.ark-caption {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 6px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ark-hint b { color: var(--ink); font-weight: 500; }
.record-alloc .label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #9fb0c9; margin-bottom: 4px;
}

/* ============================================================
   V1 HYBRID ART DIRECTION — illustrated world + live map
   ============================================================ */

.ark-stage {
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background:
    radial-gradient(circle at 68% 16%, rgba(255,255,255,.78), transparent 28%),
    linear-gradient(180deg, #cbd9e5 0%, #dde4e4 44%, #e8ddc8 76%, #d8cdb9 100%);
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(22,34,58,.12);
}

.ark-stage::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(22,34,58,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,34,58,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mix-blend-mode: multiply;
  opacity: .45;
}

.ark {
  position: relative;
  display: block;
  width: min(100%, 650px);
  margin-inline: auto;
  aspect-ratio: 330 / 875;
  max-height: none;
  isolation: isolate;
  perspective: 1600px;
}

.ark-art { position: absolute; inset: 0; z-index: 1; }
.ark-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  user-select: none; pointer-events: none;
  filter: saturate(.92) contrast(1.02);
}

.ark-closed-art {
  opacity: 1;
  transform: scale(.985);
  transition: opacity 460ms ease 250ms, transform 1100ms cubic-bezier(.2,.72,.16,1);
}
.ark-open-art {
  opacity: 0;
  transform: scale(.965);
  transition: opacity 520ms ease 170ms, transform 1100ms cubic-bezier(.2,.72,.16,1);
}
.ark.is-open .ark-closed-art { opacity: 0; transform: scale(1.015); transition-delay: 0ms; }
.ark.is-open .ark-open-art { opacity: 1; transform: scale(1); }

/* A single enormous inspection panel visually carries the opening transition.
   It uses the exterior illustration rather than a synthetic neon/SVG fairing. */
.ark-door {
  position: absolute; inset: 0;
  z-index: 4;
  background: url('/art/ark-closed.webp') center bottom / contain no-repeat;
  clip-path: polygon(47% 2%, 72% 7%, 72% 93%, 47% 97%);
  transform-origin: 72% 50%;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
}
.ark.is-opening .ark-door {
  opacity: .96;
  animation: arkDoorOpen 1100ms cubic-bezier(.2,.72,.16,1) both;
}
@keyframes arkDoorOpen {
  0% { transform: perspective(1600px) rotateY(0deg) translateX(0); opacity: .98; }
  72% { opacity: .92; }
  100% { transform: perspective(1600px) rotateY(72deg) translateX(45%); opacity: 0; }
}

.ark-hotspots {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease 650ms;
  overflow: visible;
}
.ark.is-open .ark-hotspots { opacity: 1; pointer-events: auto; }

.ark-hotspots .hotspot rect {
  fill: rgba(236,241,246,.01);
  stroke: rgba(240,237,226,.13);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
  transition: fill 140ms ease, stroke 140ms ease, stroke-width 140ms ease;
}
.ark-hotspots .hotspot text {
  font-family: var(--mono);
  font-size: 6.6px;
  fill: rgba(246,243,234,.78);
  letter-spacing: .02em;
  paint-order: stroke;
  stroke: rgba(9,16,27,.62);
  stroke-width: 1.5px;
  pointer-events: none;
}
.ark-hotspots .hotspot:hover rect,
.ark-hotspots .hotspot:focus-visible rect {
  fill: rgba(235,241,246,.08);
  stroke: rgba(255,253,245,.92);
  stroke-width: 1.15;
}
.ark-hotspots .hotspot.selected rect {
  fill: rgba(235,241,246,.12);
  stroke: #fffdf5;
  stroke-width: 1.35;
}
.ark-hotspots .hotspot:focus { outline: none; }
.ark-hotspots .hotspot-hold rect { stroke: rgba(246,243,234,.22); }

.ark-caption {
  position: relative; z-index: 8;
  margin: 0; padding: 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: rgba(239,233,221,.92);
  backdrop-filter: blur(8px);
}

/* The closed state is deliberately editorial; the art provides the spectacle. */
.landing:not(.is-open) .landing-hero {
  align-self: center;
  padding: clamp(12px, 2.5vw, 34px) 0;
}
.landing:not(.is-open) .ark-stage { border-radius: 1px; }

/* Open inspection state gives the illustrated vessel most of the canvas. */
.landing.is-open {
  grid-template-columns: minmax(480px, 1.35fr) minmax(320px, 390px);
  align-items: start;
}
.landing.is-open .ark-stage {
  background: linear-gradient(180deg, #c8d7e4 0%, #e7dfcf 100%);
}
.landing.is-open .ark { width: min(100%, 720px); }

@media (max-width: 900px) {
  .landing, .landing.is-open { grid-template-columns: 1fr; padding-top: 18px; }
  .landing.is-open .landing-hero { display: block; }
  .landing.is-open .landing-hero .lede,
  .landing.is-open .landing-hero .readout,
  .landing.is-open .landing-hero .entrynote { display: none; }
  .landing.is-open .landing-hero h1 { font-size: 30px; margin-bottom: 10px; }
  .landing.is-open .landing-hero .actions { margin-bottom: 0; }
  .landing.is-open .landing-hero .actions .primary { display: none; }
  .ark-stage { margin-inline: calc(50% - 50vw); border-left: 0; border-right: 0; }
  .ark {
    width: min(118vw, 580px);
    margin-inline: auto;
  }
  .ark-caption { padding-inline: max(14px, calc((100vw - 760px)/2)); }
  .ark-hotspots .hotspot text { font-size: 7.2px; }
}

@media (max-width: 520px) {
  .ark { width: 122vw; transform: translateX(-9vw); transform-origin: top center; }
  .landing.is-open .ark { width: 132vw; transform: translateX(-16vw); }
  .ark-caption { font-size: 8.5px; }
  .ark-caption > span:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ark-closed-art, .ark-open-art, .ark-hotspots { transition-duration: 1ms !important; }
  .ark.is-opening .ark-door { animation: none !important; opacity: 0; }
}

/* ============================================================
   PRODUCTION DECK DIRECTORY — annotation rail, not vessel labels
   ============================================================ */
.deck-directory, .mobile-deck-directory { display:none; }

@media (min-width: 901px) {
  .landing.is-open {
    grid-template-columns: minmax(450px, 1fr) 220px minmax(320px, 390px);
    gap: 12px;
  }
  .landing.is-open .deck-directory {
    display:block;
    position:relative;
    min-height:740px;
    height:min(82vh, 930px);
    align-self:start;
  }
  .deck-callout {
    position:absolute; left:0; right:0;
    padding:6px 4px 6px 17px;
    border-left:1px solid rgba(22,34,58,.34);
    font-family:var(--mono);
    color:var(--ink);
  }
  .deck-callout::before {
    content:""; position:absolute; left:-34px; top:14px; width:34px; height:1px;
    background:rgba(22,34,58,.32);
  }
  .deck-callout::after {
    content:""; position:absolute; left:-38px; top:11px; width:6px; height:6px;
    border:1px solid rgba(22,34,58,.45); border-radius:50%; background:var(--paper);
  }
  .deck-callout b {
    display:block; margin-bottom:4px; font-size:8.5px; line-height:1.25;
    letter-spacing:.08em; color:var(--ink-soft);
  }
  .deck-callout div { display:flex; flex-wrap:wrap; gap:2px 5px; line-height:1.25; }
  .deck-callout a {
    color:var(--muted); text-decoration:none; font-size:8.2px; font-weight:600;
  }
  .deck-callout span { color:var(--rule); font-size:8px; }
  .deck-callout a:hover, .deck-callout a:focus-visible, .deck-callout a.active {
    color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  }
  .deck-callout-a{top:18%}.deck-callout-b{top:29%}.deck-callout-c{top:40%}
  .deck-callout-d{top:51%}.deck-callout-e{top:62%}.deck-callout-f{top:73%}
  .ark-hotspots .hotspot.directory-focus rect {
    fill:rgba(235,241,246,.10); stroke:rgba(255,253,245,.96); stroke-width:1.15;
  }
}

@media (max-width: 900px) {
  .landing.is-open .mobile-deck-directory {
    display:grid; grid-template-columns:1fr; border:1px solid var(--rule);
    margin-top:-10px; background:rgba(247,243,234,.94);
  }
  .mobile-deck-row {
    display:grid; grid-template-columns:72px 1fr; gap:10px; padding:9px 11px;
    border-bottom:1px solid var(--rule-sf); font-family:var(--mono);
  }
  .mobile-deck-row:last-child { border-bottom:0; }
  .mobile-deck-row b { font-size:9px; letter-spacing:.08em; color:var(--ink-soft); }
  .mobile-deck-row div { font-size:8.8px; line-height:1.45; color:var(--muted); }
  .mobile-deck-row a { color:var(--muted); text-decoration:none; }
  .mobile-deck-row a:active { color:var(--ink); text-decoration:underline; }
}

/* Provision Register */
.provision-field textarea{width:100%;resize:vertical;min-height:86px}
.optional{font-weight:400;opacity:.58;margin-left:.35rem}
.provision-list{border-top:1px solid var(--line)}
.provision-row{display:grid;grid-template-columns:86px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.provision-no{font:700 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted)}
.provision-row b{font-family:var(--serif);font-size:20px;font-weight:500}
.provision-row p{margin:.35rem 0 0;color:var(--muted);font-size:13px}
@media(max-width:640px){.provision-row{grid-template-columns:1fr;gap:5px}.provision-row b{font-size:18px}}

/* Production boarding position chooser */
.position-preview{margin-top:10px;border:1px solid var(--line);background:rgba(255,255,255,.36)}
.position-preview>div{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.position-preview>div:last-child{border-bottom:0}.position-preview span{font:700 10px var(--mono);letter-spacing:.08em;color:var(--muted)}
.position-preview b{font-size:13px}.position-preview em{font:700 11px var(--mono);font-style:normal}
.position-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
.position-choice{appearance:none;text-align:left;padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.42);color:inherit;cursor:pointer}
.position-choice:hover,.position-choice:focus-visible,.position-choice.selected{border-color:var(--ink);background:rgba(255,255,255,.78);outline:none}
.position-choice b{display:block;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.04em}.position-choice span{display:block;margin-top:6px;font:700 22px var(--serif)}
.custom-amount{display:flex;align-items:center;justify-content:space-between;gap:12px}.custom-amount>span{font-size:12px;color:var(--muted)}
.amount-input{display:flex;align-items:center;border:1px solid var(--line);background:white;padding-left:10px}.amount-input span{font:700 14px var(--mono)}
.amount-input input{border:0!important;max-width:120px!important;background:transparent!important}
@media(max-width:650px){.position-actions{grid-template-columns:1fr}.custom-amount{align-items:flex-start;flex-direction:column}.amount-input{width:100%}.amount-input input{max-width:none!important;width:100%}}