/* ============================================================
   Agent Orange ships: directory (/dc/ships) and vessel records
   (/dc/ships/:slug). Owner-approved redesign 2026-09-12, handoff
   CLAUDE-SHIPS-DIRECTORY-REDESIGN-HANDOFF-2026-09-12.md.

   TYPOGRAPHY IS THE SITE'S. This file declares LAYOUT and SIZE roles
   only; every family comes from the shared contract set in main.css
   (content headings Source Serif 4 600, UI Inter), and the three
   spacious roles are read as tokens, never re-invented as literals:
     --text-display        page title
     --text-display-2      section heading
     --text-card-title     illustrated content-card title
   A heading tag that is really a UI LABEL (the custody-style column
   heads, the era line) says so here with var(--font-sans). The 17px
   root is production's and is not touched.

   Every selector is scoped to .ships-page (directory) or .shipv-page
   (vessel record) so nothing leaks into the shared cascade.
   ============================================================ */

/* ---------- shared between the two surfaces ---------- */

.ships-page .sx-eyebrow,
.shipv-page .sx-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 .7rem;
}

.ships-page .sx-hero,
.shipv-page .sx-hero {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: center;
  gap: 2.5rem;
  padding: .5rem 0 1.8rem;
}
.ships-page .sx-hero-copy,
.shipv-page .sx-hero-copy { min-width: 0; overflow-wrap: break-word; }

.ships-page .sx-hero h1,
.shipv-page .sx-hero h1 {
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin: 0 0 1rem;
}

.ships-page .sx-lede {
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  line-height: 1.7;
  max-width: 38em;
}

/* The illustration. GENERIC ART, never a portrait of the vessel: the
   caption says "Illustration only" and the alt text never names a
   real ship. */
.ships-page .sx-art,
.shipv-page .sx-art {
  position: relative;
  margin: 0;
  align-self: stretch;
  min-height: 330px;
  max-height: 410px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.ships-page .sx-art img,
.shipv-page .sx-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center 65%;
}
.ships-page .sx-art figcaption,
.shipv-page .sx-art figcaption {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(16, 42, 67, .91);
  color: #e7eff8;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  padding: .45rem .85rem;
}

/* The hero jump rows moved into the shared reading-shell rail on 2026-09-14
   (/css/guide-reading.css). */

.ships-page .sx-stat {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-border);
  margin-top: 1.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ships-page .sx-stat strong {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-primary);
  margin-right: .3rem;
}

.ships-page .sx-section { padding-top: 2.6rem; }
.ships-page .sx-section-top,
.shipv-page .sx-section-top {
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
  align-items: end;
  margin-bottom: 1.3rem;
}
.ships-page .sx-section-top h2,
.shipv-page .sx-section-top h2 {
  font-size: var(--text-display-2);
  letter-spacing: var(--tracking-display);
  margin: 0 0 .4rem;
}
.ships-page .sx-section-top p,
.shipv-page .sx-section-top p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 46em;
}
.ships-page .sx-section-top > a,
.shipv-page .sx-section-top > a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Illustrated next-step cards. BUTTON LAW: 2px accent border, and the
   anchors carry cardfx-pop so card-fx.js wires the gold glow. */
.ships-page .sx-paths,
.shipv-page .sx-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.ships-page .sx-path,
.shipv-page .sx-path {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ships-page .sx-path:hover,
.ships-page .sx-path:focus-visible,
.shipv-page .sx-path:hover,
.shipv-page .sx-path:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.ships-page .sx-path img,
.shipv-page .sx-path img { width: 100%; height: 138px; object-fit: cover; }
.ships-page .sx-path-copy,
.shipv-page .sx-path-copy {
  padding: 1.2rem 1.3rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
/* The comp shrinks this kicker to about 10px. The audience is older veterans,
   so it stays at the smallest role in the scale (--text-xs, 12.75px at the
   17px root) and only loses its bottom margin. */
.ships-page .sx-path-copy .sx-eyebrow,
.shipv-page .sx-path-copy .sx-eyebrow { margin-bottom: .45rem; }
.ships-page .sx-path-h,
.shipv-page .sx-path-h {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-card-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0 0 .6rem;
}
.ships-page .sx-path-copy p,
.shipv-page .sx-path-copy p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}
.ships-page .sx-path-cta,
.shipv-page .sx-path-cta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: .6rem;
}

/* ---------- the lookup ---------- */

.ships-page .sx-search {
  border: 2px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.6rem;
  scroll-margin-top: 90px;
}
.ships-page .sx-search h2 {
  font-size: var(--text-xl);
  margin: 0 0 1rem;
}
.ships-page .ship-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 275px auto;
  gap: .8rem;
  align-items: end;
  margin: 0;
}
.ships-page .ship-search-row label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
}
.ships-page .ship-search-row input[type="search"],
.ships-page .ship-search-row select {
  width: 100%;
  min-width: 0;
  min-height: 51px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
}
.ships-page .ship-search-btn {
  min-height: 51px;
  white-space: nowrap;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: .6rem 1.4rem;
  cursor: pointer;
}
.ships-page .ship-search-btn:hover,
.ships-page .ship-search-btn:focus-visible { background: var(--color-primary-light); }

.ships-page .sx-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: .8rem 0 0;
}
.ships-page .sx-example {
  border: 0;
  border-bottom: 1px dotted var(--color-text-muted);
  border-radius: 0;
  background: none;
  min-height: 44px;
  padding: .2rem .15rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-primary);
  cursor: pointer;
}
.ships-page .sx-example:hover { color: var(--color-primary-light); }

.ships-page .sx-under {
  margin: 1.1rem 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ships-page .sx-under p { margin: 0; max-width: 52em; }
.ships-page .sx-under a { font-weight: 600; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

/* Result presentation, built by public/js/ship-lookup.js. */
.ships-page .ship-results:empty { display: none; }
.ships-page .sx-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.4rem 0 .4rem;
}
.ships-page .sx-result-head h3 {
  font-size: var(--text-xl);
  margin: 0;
}
.ships-page .sx-result-clear {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 44px;
  padding: .4rem 1rem;
  cursor: pointer;
}
.ships-page .sx-result-note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 .9rem;
}
.ships-page .sx-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.ships-page .ship-card {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  background: var(--color-surface);
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0;
}
.ships-page .ship-card-body { min-width: 0; }
.ships-page .sx-thumb {
  width: 90px;
  height: 105px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.ships-page .sx-card-h {
  font-size: var(--text-card-title);
  line-height: 1.2;
  margin: .4rem 0 .3rem;
}
.ships-page .sx-card-h a { text-decoration: none; }
.ships-page .sx-card-h a:hover { text-decoration: underline; }
.ships-page .sx-hull {
  display: inline-block;
  border: 1px solid var(--color-accent);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .06em;
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.ships-page .ship-class,
.ships-page .ship-aka,
.ships-page .ship-family-tag {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: .25rem 0;
}
.ships-page .ship-cat { margin: .55rem 0 0; }
.ships-page .ship-cat-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .1rem .55rem;
}
.ships-page .ship-cat-key {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ships-page .ship-cat-note {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin: .3rem 0 0;
  padding-left: .8rem;
  border-left: 3px solid var(--color-accent);
}
.ships-page .ship-anomaly {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: .5rem 0 0;
}
.ships-page .sx-open {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .8rem;
  min-height: 44px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: .45rem 1rem;
  text-decoration: none;
}
.ships-page .sx-open:hover,
.ships-page .sx-open:focus-visible { background: var(--color-primary-light); }
.ships-page .sx-more {
  display: flex;
  margin: 1rem auto 0;
  min-height: 44px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: .5rem 1.3rem;
  cursor: pointer;
}
.ships-page .ship-card-family {
  display: block;
  grid-template-columns: none;
}
.ships-page .ship-miss {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.3rem;
  margin-top: 1.2rem;
  background: var(--color-surface);
  font-size: var(--text-md);
  line-height: 1.65;
}
.ships-page .ship-miss p { max-width: 48em; }
.ships-page .ship-miss button {
  min-height: 44px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: .5rem 1.1rem;
  cursor: pointer;
}
.ships-page .ship-hint {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: .9rem 0 0;
}

/* ---------- A to Z directory ---------- */

.ships-page .sx-alphabet {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
  padding: 0;
}
.ships-page .sx-alphabet a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--color-surface);
}
.ships-page .sx-alphabet a:hover { border-color: var(--color-accent); }

.ships-page .dir-browse { border-top: 1px solid var(--color-border); }
.ships-page .dir-browse details.dir-group {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  margin: 0;
  background: none;
  scroll-margin-top: 90px;
}
.ships-page .dir-browse details.dir-group summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 54px;
  padding: .8rem .6rem;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
}
.ships-page .dir-browse details.dir-group summary::-webkit-details-marker { display: none; }
.ships-page .dir-browse details.dir-group summary::after {
  content: '+';
  margin-left: auto;
  font-family: var(--font-sans);
}
.ships-page .dir-browse details.dir-group[open] summary::after { content: '\2212'; }
.ships-page .dir-browse .dir-count {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ships-page .dir-browse ul.dir-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  columns: auto;
  list-style: none;
  padding: 0 .6rem 1.1rem;
  margin: 0;
  gap: .2rem 1.6rem;
}
.ships-page .dir-browse ul.dir-list li { min-width: 0; padding: 0; }
.ships-page .dir-browse ul.dir-list a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.ships-page .dir-browse ul.dir-list a:hover { text-decoration: underline; }
.ships-page .dir-browse .dir-hull {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- source context ---------- */

.ships-page .sx-context {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.5rem;
  margin-top: 2.8rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--color-border);
}
.ships-page .sx-context h2 { font-size: var(--text-2xl); }
.ships-page .sx-prose p,
.ships-page .sx-prose li {
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  line-height: 1.75;
}
.ships-page .sx-catguide details { border-bottom: 1px solid var(--color-border); }
.ships-page .sx-catguide summary {
  padding: .7rem 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}
.ships-page .sx-catguide details p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 0 0 .6rem;
  margin: 0;
}
.ships-page .sx-catguide > p { font-size: var(--text-sm); color: var(--color-text-muted); }

.ships-page .framing-banner,
.shipv-page .shipv-warn {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin: 1.5rem auto;
  max-width: var(--prose-measure);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.ships-page .framing-banner strong,
.shipv-page .shipv-warn strong { color: var(--color-primary); }

.ships-page .sx-source,
.shipv-page .sx-source {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: var(--prose-measure);
  margin: 2rem auto 0;
  line-height: 1.75;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-border);
}
.ships-page .sx-source p,
.shipv-page .sx-source p { margin: 0 0 .6rem; }

/* ---------- vessel record page ---------- */

.shipv-page .sx-hero { padding-top: .3rem; }
.shipv-page .sx-hero h1 { font-size: var(--text-display); }
.shipv-page .shipv-identity {
  display: flex;
  gap: .7rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: .9rem 0;
}
.shipv-page .sx-hull {
  display: inline-block;
  border: 1px solid var(--color-accent);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .06em;
  padding: .35rem .65rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.shipv-page .shipv-lede {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 38em;
}
.shipv-page .sx-art { min-height: 255px; }
.shipv-page .sx-art img { min-height: 255px; }

/* Ship-type illustrations (2026-09-12): the whole ship must stay visible, so
   this frame takes the art's own 3:2 ratio (no crop, no height clamp at any
   width), stays centred instead of stretching to the hero copy, and puts the
   caption below the image inside the same border. The generic art (the
   directory, and any hull without a type illustration) keeps the frame above. */
.shipv-page .sx-art.shipv-type-art { align-self: center; height: auto; min-height: 0; max-height: none; }
.shipv-page .sx-art.shipv-type-art img { height: auto; min-height: 0; object-fit: contain; }
.shipv-page .sx-art.shipv-type-art figcaption { position: static; }

.shipv-page .shipv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(285px, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.shipv-page .shipv-panel {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  scroll-margin-top: 90px;
}
.shipv-page .shipv-panel-head {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
/* main.css centres `.editorial h2`, which is right for a full-width guide
   section and wrong for a titled panel and a sidebar: a centred heading over
   left-flush source text reads as a caption for the wrong block. The vessel
   record keeps the shell's `editorial` class for its prose, so the alignment
   is corrected here rather than by dropping the class. */
.shipv-page .shipv-panel-head h2,
.shipv-page .shipv-board h2,
.shipv-page .shipv-cat h3,
.shipv-page .sx-section-top h2,
.shipv-page .shipv-context h2 { text-align: left; }

.shipv-page .shipv-panel-head h2 { font-size: var(--text-xl); margin: 0; }
.shipv-page .shipv-cat {
  padding: 1.3rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  max-width: none;
}
.shipv-page .shipv-cat:last-child { border-bottom: 0; }
/* A category tag is a UI LABEL wearing no heading tag, and the plain-English
   category name beside it IS the entry's content heading. */
.shipv-page .shipv-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .12rem .6rem;
}
.shipv-page .shipv-cat h3 {
  font-size: var(--text-lg);
  margin: .5rem 0 0;
}
.shipv-page .shipv-note {
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  border-left: 3px solid var(--color-accent);
  padding: .6rem 0 .6rem 1.1rem;
  margin: .9rem 0 .3rem;
  color: var(--color-text);
}
.shipv-page .shipv-quote-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
/* The plain-English gloss on the category is ours, not VA's, so it is set
   apart from the quoted narrative but is NOT the absent-narrative note. */
.shipv-page .shipv-key {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: .3rem 0 0;
}
.shipv-page .shipv-nonote {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: .5rem 0 0;
}
.shipv-page .shipv-idnote {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 1rem 1.5rem;
  background: var(--color-bg-alt);
  line-height: 1.6;
}
.shipv-page .shipv-idnote p { margin: .3rem 0 0; }
.shipv-page .shipv-idnote strong { color: var(--color-primary); }

.shipv-page .shipv-board {
  padding: 1.5rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: #102f4c;
  color: #e7eff8;
}
.shipv-page .shipv-board h2 { font-size: var(--text-xl); color: #ffffff; margin: 0 0 .5rem; }
.shipv-page .shipv-board .sx-eyebrow { color: #ecc87a; }
.shipv-page .shipv-board p { font-size: var(--text-sm); color: #c5d6e8; }
/* Scoped through .shipv-board so it outweighs the panel's own `p` rule. */
.shipv-page .shipv-board .shipv-count {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  color: #f0c979;
  margin: .8rem 0 .3rem;
}
.shipv-page .shipv-board .shipv-count-label { font-family: var(--font-sans); font-size: var(--text-sm); color: #ffffff; margin: 0; }
.shipv-page .shipv-board-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: .8rem 0 .8rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: #c6ddf6;
  color: #0e2943;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  padding: .5rem 1rem;
}
.shipv-page .shipv-board small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #c5d6e8;
  line-height: 1.7;
}
/* The panel keeps a fixed navy background in both themes, so its link colour
   is fixed too: --color-primary flips to light blue in dark mode but stays
   navy in light, which is 1.4:1 on this panel. #bad9ff is 8.4:1 on #102f4c. */
.shipv-page .shipv-board .shipv-help {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #bad9ff;
}

.shipv-page .shipv-anomaly {
  margin: 1.2rem auto 0;
  max-width: var(--prose-measure);
  padding: 1rem 1.1rem;
  border: 1px dashed var(--color-accent);
  background: var(--color-bg-alt);
  font-size: var(--text-sm);
  line-height: 1.65;
}
.shipv-page .shipv-anomaly strong { color: var(--color-primary); }
.shipv-page .shipv-anomaly p { margin: .4rem 0 0; }

.shipv-page .sx-section { padding-top: 2.4rem; }
/* SYMMETRY LAW: bare prose on the shared measure with auto side margins. */
.shipv-page .shipv-prose > p,
.shipv-page .shipv-prose > ul { max-width: var(--prose-measure); margin-inline: auto; }
.shipv-page .shipv-prose p,
.shipv-page .shipv-prose li {
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  line-height: 1.75;
}
.shipv-page .shipv-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--color-border);
}
.shipv-page .shipv-context h2 { font-size: var(--text-2xl); }
.shipv-page .shipv-context .shipv-prose > p { max-width: none; margin-inline: 0; }

.shipv-page .shipv-similar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.shipv-page .shipv-sim {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  background: var(--color-surface);
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.shipv-page .shipv-sim:hover,
.shipv-page .shipv-sim:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.shipv-page .shipv-sim-h {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin: .35rem 0 .5rem;
}
.shipv-page .shipv-sim p { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .ships-page .sx-hero,
  .shipv-page .sx-hero { gap: 1.6rem; }
  .ships-page .ship-search-row { grid-template-columns: minmax(0, 1fr) 225px; }
  .ships-page .ship-search-btn { grid-column: 1 / -1; }
  .shipv-page .shipv-layout { grid-template-columns: 1.3fr 1fr; }
  .ships-page .sx-result-grid { grid-template-columns: 1fr; }
  .ships-page .dir-browse ul.dir-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ships-page .sx-hero,
  .shipv-page .sx-hero { display: flex; flex-direction: column; gap: 1.3rem; padding: .4rem 0 1.3rem; }
  .ships-page .sx-hero h1,
  .shipv-page .sx-hero h1 { letter-spacing: var(--tracking-display); margin-bottom: .8rem; }
  .ships-page .sx-art,
  .shipv-page .sx-art { width: 100%; height: 185px; min-height: 0; max-height: none; }
  .ships-page .sx-art img,
  .shipv-page .sx-art img { min-height: 0; height: 100%; object-position: center 66%; }
  .ships-page .sx-stat { margin-top: .9rem; padding-top: .8rem; gap: .7rem; }
  .ships-page .sx-search { padding: 1.1rem 1rem; }
  .ships-page .ship-search-row { grid-template-columns: 1fr; }
  .ships-page .sx-under { display: block; }
  .ships-page .sx-under p { margin-bottom: .6rem; }
  .ships-page .sx-under a { white-space: normal; }
  .ships-page .sx-section,
  .shipv-page .sx-section { padding-top: 1.9rem; }
  .ships-page .sx-section-top,
  .shipv-page .sx-section-top { display: block; }
  .ships-page .sx-section-top > a,
  .shipv-page .sx-section-top > a { margin-top: .6rem; }
  .ships-page .sx-paths,
  .shipv-page .sx-paths { grid-template-columns: 1fr; gap: .8rem; }
  .ships-page .sx-path,
  .shipv-page .sx-path { flex-direction: row; }
  .ships-page .sx-path img,
  .shipv-page .sx-path img { width: 102px; height: auto; min-height: 170px; }
  .ships-page .sx-path-copy,
  .shipv-page .sx-path-copy { padding: 1rem .9rem; }
  .ships-page .dir-browse ul.dir-list { grid-template-columns: 1fr; }
  .ships-page .sx-context,
  .shipv-page .shipv-context { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.1rem; padding-top: 1.6rem; }
  .ships-page .ship-card { grid-template-columns: 72px minmax(0, 1fr); padding: 1rem .9rem; gap: .9rem; }
  .ships-page .sx-thumb { width: 72px; height: 98px; }
  .shipv-page .shipv-layout { grid-template-columns: 1fr; }
  .shipv-page .shipv-panel-head,
  .shipv-page .shipv-cat { padding: 1.1rem 1rem; }
  .shipv-page .shipv-idnote { padding: 1rem; }
  .shipv-page .shipv-board { padding: 1.2rem; }
  .shipv-page .shipv-similar { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ships-page .sx-path,
  .shipv-page .sx-path,
  .shipv-page .shipv-sim { transition: none; }
}