/* ===== In the Wake — Unified Styles (v2.245) ===== */
:root{
  --sea:#0a3d62; --foam:#e6f4f8; --rope:#d9b382; --ink:#083041; --sky:#f7fdff; --accent:#0e6e8e;
  /* Grid / compass tuning */
  --grid-stroke: rgba(255,255,255,.24);
  --grid-label: rgba(255,255,255,.85);
  --grid-outline: rgba(8,48,65,.35);
  --compass-tint: invert(39%) sepia(9%) saturate(1063%) hue-rotate(151deg) brightness(92%) contrast(89%);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--ink); background:var(--sky); line-height:1.55;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto; display:block }

/* ===== Header + Nav ===== */
.hero-header{ position:relative; border-bottom:6px double var(--rope); background:#eaf6f6 }
.navbar{
  max-width:1100px; margin:0 auto;
  display:flex; gap:.6rem; padding:.5rem .9rem .35rem;
  align-items:flex-end; position:relative; z-index:5;
}
.brand{ display:flex; align-items:flex-end; gap:.6rem }
.brand img{ height:28px; width:auto; display:block }
.brand-title{ font-weight:700; color:var(--ink); font-size:.95rem }
.version-badge{ font-size:.72rem; opacity:.8; margin-left:.35rem }

/* Pills nav — right, bottom-aligned, no overlap with logo */
.pills{
  margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap;
  align-self:flex-end; justify-content:flex-end; padding-bottom:.05rem;
  max-width:min(78vw, 860px);
}
.pills a{
  padding:.35rem .7rem; border-radius:10px; border:1px dashed var(--rope);
  background:#fff; font-size:.9rem; color:var(--accent); text-decoration:none;
}
.pills a:hover{ text-decoration:none; background:#f9fdfd; }

/* ===== Full-bleed hero ===== */
.hero{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  min-height:clamp(200px, 24vw, 340px);
  background:url('index_hero.jpg') 50% 50% / cover no-repeat;
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
}
/* Cross-browser “unmute” of the hero (kills filters/blends/opacity everywhere) */
body.no-hero-filter .hero,
.hero-header .hero,
.hero-header .hero *{
  filter:none !important; mix-blend-mode:normal !important; opacity:1 !important;
}
/* Nuke any pseudo overlays if present */
.hero::before,.hero::after{ content:none !important }

/* Grid overlay */
.latlon-grid{ position:absolute; inset:0; z-index:1; pointer-events:none }
.latlon-grid svg{ width:100%; height:100% }
.hero .latlon-grid .grid-lines{ stroke: var(--grid-stroke); vector-effect:non-scaling-stroke }
.hero .latlon-grid .grid-labels text{
  fill: var(--grid-label);
  paint-order: stroke; stroke: var(--grid-outline); stroke-width:.4px;
  vector-effect: non-scaling-stroke; letter-spacing:.2px; font-size:2.2px;
}
@media (max-width:900px){ .hero .latlon-grid .grid-labels text{ font-size: 2.0px } }
@media (max-width:700px){ .hero .latlon-grid .grid-labels text{ font-size: 1.9px } }
@media (max-width:520px){ .hero .latlon-grid .grid-labels text{ font-size: 1.7px } }

/* Compass */
.hero-compass{
  position:absolute; right:min(3vw,1rem); top:.5rem;
  width:86px; opacity:.95; z-index:2;
  filter: var(--compass-tint) drop-shadow(0 2px 6px rgba(0,0,0,.25));
  pointer-events:none;
}

/* Ship lockup + tagline */
.hero-title{
  position:absolute; left:min(3vw,1rem); bottom:clamp(.6rem,2vw,1.4rem);
  z-index:3; display:flex; align-items:flex-end; gap:.6rem;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
.hero-title .logo{
  width:clamp(189px, 23.1vw, 378px);
  max-width:min(45vw, 520px);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
.hero .tagline{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(.55rem,1.6vw,1.1rem);
  font-weight:700; letter-spacing:.2px; color:#e6f4f8;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  font-size:clamp(.9rem,1.5vw,1.35rem); white-space:nowrap; z-index:3;
}

/* One long hero credit pill — always bottom-right */
.hero-credit{ position:absolute; right:.85rem; bottom:.85rem; z-index:4 }
.hero-credit .pill.long{
  display:inline-block; padding:.45rem .7rem; border-radius:999px;
  background:#fff; border:1px solid var(--rope); font-weight:600; color:#0a3d62;
  box-shadow:0 1.5px 6px rgba(8,48,65,.15); text-decoration:none;
}
.hero-credit .pill.long:hover{ background:#f9fdfd; text-decoration:none }

/* ===== Content + cards ===== */
.wrap { max-width:1100px; margin:0 auto; padding:20px 14px 36px; }
.card{
  background:#fff; border:2px solid var(--rope); border-radius:14px;
  padding:1rem; margin:.8rem 0; box-shadow:0 2px 6px rgba(8,48,65,.08);
  position:relative; overflow:hidden;
}
h1,h2,h3{ color:var(--sea) }

/* Watermark — ONLY on Ken’s Logbook, slightly stronger */
.note-kens-logbook::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:min(60%, 360px); height:min(60%, 360px);
  background:url('/assets/watermark.png') center/contain no-repeat;
  opacity:.12; pointer-events:none;
}

/* Reusable two-up grid (equal height) */
.grid-2{ display:grid; gap:1rem; align-items:stretch; }
.grid-2 > .card{ display:flex; flex-direction:column }
@media (min-width:980px){ .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Dining card order */
#dining-card { order:1; }
@media (min-width:980px){ #dining-card { order:2; } }

/* Dining card: top image stays visible */
#dining-card .card-hero{ width:100%; border-radius:12px; margin-bottom:12px; }

/* Dining content */
.venues.two-col{ display:grid; gap:1rem }
@media (min-width:760px){ .venues.two-col{ grid-template-columns:1fr 1fr } }
.venue-list{ margin:.25rem 0 0 1.1rem }
.venue-list a{ color:inherit; text-decoration:none; border-bottom:1px dotted #c9d7de }
.venue-list a:hover{ text-decoration:none; border-bottom-color:#7ba0b2 }

/* Ship stats under First Look */
.ship-stats.card.mini{ margin-top:.6rem }
.stats-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.4rem .8rem; font-size:.95rem;
}
.stat-line{
  display:flex; gap:.35rem; justify-content:space-between;
  border-bottom:1px dashed #e4e9ec; padding:.2rem 0;
}
.stat-key{ color:#355; font-weight:600 }
.stat-val{ color:#024 }

/* Optional Photo grid */
.photo-grid{
  display:grid; gap:.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.photo-grid figure{ margin:0; }
.photo-grid img{ width:100%; height:auto; display:block; border-radius:12px; }
.photo-grid figcaption{ font-size:.8rem; color:#546; margin-top:.35rem; }

/* Ken’s Logbook prose */
.note-kens-logbook .pill{
  display:inline-block; padding:.45rem .7rem; border-radius:999px;
  background:#e6f4f8; border:1px solid var(--rope); font-weight:600;
  color:#0a3d62; margin:.2rem 0 .8rem;
}
.note-kens-logbook .prose{ line-height:1.65; font-size:1rem; color:var(--ink); position:relative; z-index:1; }
.note-kens-logbook .prose h3{ margin:1.1rem 0 .4rem; color:var(--sea); }
.note-kens-logbook .prose p{ margin:.65rem 0; }
.note-kens-logbook .prose ul{ padding-left:1.1rem; margin:.5rem 0; }
.note-kens-logbook .prose li{ margin:.35rem 0; }
.sail-deals{ margin-top:.9rem }

/* Swiper */
.swiper{ width:100%; max-width:820px; margin:0 auto; }
.swiper-slide iframe{
  width:100%; aspect-ratio:16/9; display:block; border:0; border-radius:12px;
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next,
.swiper .swiper-pagination{ z-index:4; }

/* Buttons */
.btn{
  display:inline-block; padding:.5rem .8rem; border-radius:999px;
  border:1px solid var(--accent); color:var(--accent);
  text-decoration:none; font-size:.95rem; line-height:1;
}
.btn:hover{ background:var(--accent); color:#fff; }
.btn.ghost{ background:#fff }
.btn.ghost:hover{ background:#f2fbff }

/* Kill legacy stripes */
.hockey-stick,.masthead-stripe,.header-stripe,
header.site-header::before, header.site-header::after{ display:none !important }

/* Responsive tweaks */
@media (max-width:600px){
  .hero{ min-height:clamp(170px,30vw,300px) }
  .hero-title .logo{ width:clamp(170px,36vw,320px) }
}

/* ===== ships.html additions ===== */
.jump-menu { margin: 0 0 12px }
.jump-line { display:flex; gap:.4rem; flex-wrap:wrap }
.pill {
  display:inline-block; padding:.35rem .6rem; border:1px dashed var(--rope);
  border-radius:999px; background:#fff; font-size:.9rem;
}
.more-lines summary { cursor:pointer; padding:.35rem .6rem; border:1px dashed var(--rope); border-radius:999px; background:#fff }
.more-lines .more-wrap { margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.4rem }
.more-lines a { padding:.25rem .55rem; border:1px solid var(--rope); border-radius:999px; background:#fff; font-size:.85rem }

.fleet-root > .card { margin-bottom: 1rem }
.class-pills { display:flex; gap:.4rem; flex-wrap:wrap; margin:.2rem 0 .6rem }

.ship-card {
  display:grid; grid-template-columns: 96px 1fr; gap:.6rem;
  align-items:center; padding:.6rem; border:2px solid var(--rope);
  border-radius:14px; background:#fff; text-decoration:none; color:inherit;
  box-shadow:0 2px 6px rgba(8,48,65,.08);
}
.ship-card .thumb { width:96px; height:64px; overflow:hidden; border-radius:10px; background:#eef4f6; border:1px solid #dfe7ea }
.ship-card .thumb img { width:100%; height:100%; object-fit:cover }
.ship-card .thumb img.thumb-fallback { object-fit:contain; padding:6px; background:#fff }
.ship-card .body { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.ship-card .badge {
  font-size:.72rem; background:#e6f4f8; border:1px solid var(--rope);
  border-radius:999px; padding:.1rem .5rem;
}
.ship-card.historical .badge.hist { background:#fff4f1; border-color:#e2a58b }
.ship-card.is-disabled { opacity:.7; pointer-events:none }

/* Collapsible */
.collapsible > details > summary { cursor:pointer; font-weight:700; }
.collapsible > details[open] { scroll-margin-top: 90px; }

/* Anchor targets */
[id]{ scroll-margin-top: 90px }

/* Center the voyage tips card */
.note-kens-logbook .prose .card.voyage-tips {
  max-width: 800px;
  width: 100%;
  margin: 2rem auto 1rem; /* Top/bottom margins, auto left/right for centering */
}

/* Ensure the card content doesn't stretch too wide */
.card.voyage-tips .card-content {
  max-width: 100%;
}

/* Center the button group */
.card.voyage-tips .button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.card.voyage-tips .button-group .btn {
  flex: 1;
  min-width: 160px;
  max-width: 200px;
  text-align: center;
}

/* Responsive: Stack buttons on mobile */
@media (max-width: 768px) {
  .card.voyage-tips .button-group {
    flex-direction: column;
    align-items: center;
  }
  
  .card.voyage-tips .button-group .btn {
    width: 100%;
    max-width: 250px;
  }
}

/* Nuclear option: Force center regardless of parent */
.card.voyage-tips {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 800px !important;
  width: calc(100% - 2rem) !important; /* Account for padding */
}

/* Ensure the prose container doesn't interfere */
.note-kens-logbook .prose {
  position: relative;
}

/* Wrap the card in a centering container if needed */
.voyage-tips-wrapper {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}