/* ============================================================
   ROOT & RESET
   ============================================================ */
:root {
  --bg-deep:     #07111a;
  --bg-dark:     #0a0e14;
  --bg-card:     #0d1a24;
  --bg-hover:    #112030;
  --border:      #1e2a35;
  --border-mid:  #1e3a4a;
  --accent:      #4a9eba;
  --accent-dim:  #2a6080;
  --text-primary:#e8e0cc;
  --text-mid:    #c8c4b4;
  --text-muted:  #7a8a94;
  --text-faint:  #4a6070;
  --green:       #5a8a6a;
  --font-display:'Bebas Neue', sans-serif;
  --font-body:   'Space Mono', monospace;
  --font-serif:  'Libre Baskerville', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: #0a0e14; }

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-mid);
  font-size: 25px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ============================================================
   LAYOUT
   ============================================================ */
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* ============================================================
   NAV
   ============================================================ */

/* Site nav titles in top right */
   .site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(10,14,20,0.96);
  backdrop-filter: blur(8px);
}

/* Shipwreck city logo in the top left */
.nav-logo {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 3px;
  color: var(--text-primary);
  text-decoration: none;
}
.nav-logo span { color: var(--accent); }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 16px;
  letter-spacing: 2.5px;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text-primary); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 520px;
  background: var(--bg-deep);
  display: flex;
  align-items: flex-end;
  padding: 0 32px 56px;
  overflow: hidden;
}

/* faint wreck photo layered into hero background */
.hero-bg-photo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 45%);
  mask-image: linear-gradient(to right, transparent 0%, black 45%);
}
.hero-bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) brightness(0.18) sepia(0.6) hue-rotate(185deg) saturate(4);
  opacity: 0.75;
  display: block;
}

/* square grid behind the sonar sweep */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px);
  opacity: 0.8;
}

/* sonar sweep effect */
.hero-scan {
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.15;
  animation: scan 5s ease-in-out infinite;
}
@keyframes scan {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.15; }
  100% { top: 100%; opacity: 0; }
}

/* sonar blips */
.hero-blip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.hero-blip-1 { left: 30%; top: 18%; --blip-color: #5a8a6a; }
.hero-blip-2 { left: 38%; top: 52%; --blip-color: #4a9eba; }
.hero-blip-3 { left: 44%; top: 83%; --blip-color: #5a8a6a; }
/*.hero-blip-4 { left: 14%; top: 40%; --blip-color: #9a5a7a; }*/
.hero-blip-5 { left: 50%; top: 34%; --blip-color: #4a9eba; }
.hero-blip-6 { left: 27%; top: 62%; --blip-color: #c87941; }
.hero-blip-7 { left: 22%; top: 72%; --blip-color: #6a7aaa; }

.hero-blip::before,
.hero-blip::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.hero-blip::before {
  width: 6px;
  height: 6px;
  background: var(--blip-color);
  box-shadow: 0 0 6px var(--blip-color), 0 0 14px var(--blip-color);
}
.hero-blip::after {
  width: 14px;
  height: 14px;
  border: 1px solid var(--blip-color);
}

/* blip 1 — top 18%, fires at ~30% */
.hero-blip-1::before { animation: blipDot1 5s ease-in-out infinite; }
.hero-blip-1::after  { animation: blipRing1 5s ease-in-out infinite; }
@keyframes blipDot1 {
  0%, 28%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  30%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  58%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  68%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing1 {
  0%, 29%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  30%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  45%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}

/* blip 2 — top 52%, fires at ~52% */
.hero-blip-2::before { animation: blipDot2 5s ease-in-out infinite; }
.hero-blip-2::after  { animation: blipRing2 5s ease-in-out infinite; }
@keyframes blipDot2 {
  0%, 50%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  52%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  80%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  90%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing2 {
  0%, 50%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  52%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  67%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}

/* blip 3 — top 83%, fires at ~72% */
.hero-blip-3::before { animation: blipDot3 5s ease-in-out infinite; }
.hero-blip-3::after  { animation: blipRing3 5s ease-in-out infinite; }
@keyframes blipDot3 {
  0%, 70%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  72%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  92%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  99%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing3 {
  0%, 70%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  72%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  87%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}

/* blip 4 — top 40%, fires at ~40% 
.hero-blip-4::before { animation: blipDot4 5s ease-in-out infinite; }
.hero-blip-4::after  { animation: blipRing4 5s ease-in-out infinite; }
@keyframes blipDot4 {
  0%, 38%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  40%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  68%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  78%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing4 {
  0%, 39%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  40%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  55%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}*/

/* blip 5 — top 24%, fires at ~22% */
.hero-blip-5::before { animation: blipDot5 5s ease-in-out infinite; }
.hero-blip-5::after  { animation: blipRing5 5s ease-in-out infinite; }
@keyframes blipDot5 {
  0%, 39%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  41%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  57%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  63%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing5 {
  0%, 40%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  41%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  56%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}

 /* blip 6 — top 62%, fires at ~62% */
.hero-blip-6::before { animation: blipDot6 5s ease-in-out infinite; }
.hero-blip-6::after  { animation: blipRing6 5s ease-in-out infinite; }
@keyframes blipDot6 {
  0%, 55%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  57%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  88%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  96%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing6 {
  0%, 56%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  57%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  72%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}

/* blip 7 — top 72%, fires at ~72% 
.hero-blip-7::before { animation: blipDot7 5s ease-in-out infinite; }
.hero-blip-7::after  { animation: blipRing7 5s ease-in-out infinite; }
@keyframes blipDot7 {
  0%, 70%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  72%      { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  94%      { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  99%      { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
  100%     { opacity: 0; }
}
@keyframes blipRing7 {
  0%, 71%  { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  72%      { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  87%      { opacity: 0;   transform: translate(-50%,-50%) scale(6); }
  100%     { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
}*/

.hero-waterlines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

/* Little bitty text above shipwreck city */
.hero-eyebrow {
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-top: 24px;
}

/* Big Shipwreck City Text */
.hero-title {
  font-family: var(--font-display);
  font-size: 180px;
  line-height: 0.9;
  letter-spacing: 2px;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.hero-title em { color: var(--accent); font-style: normal; }


.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.9;
  color: var(--text-muted);
  max-width: 500px;
}

.hero-meta {
  position: absolute;
  right: 32px;
  bottom: 56px;
  z-index: 2;
  text-align: right;
}
.hero-meta-label {
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hero-meta-val {
  font-size: 18px;
  color: var(--green);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat {
  background: var(--bg-dark);
  padding: 22px 28px;
  transition: opacity 0.2s, filter 0.2s;
}
a.stat:hover {
  opacity: 0.75;
  filter: brightness(1.2);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 100px;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section { padding: 48px 32px; }
.section-wide { padding: 48px 0; }

.section-label {
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
a.section-label-link {
  text-decoration: none;
  transition: color 0.15s;
}
a.section-label-link:hover { color: var(--text-primary); }

.section-label::after {
  content: '';
  display: block;
  flex: 1;
}

/* ============================================================
   WRECK GRID (archive page listing)
   ============================================================ */
.wrecks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}

/* ============================================================
   WRECK SCROLL TRACK (homepage horizontal scroll)
   ============================================================ */
.wrecks-scroll-section {
  padding: 0;
}
.wrecks-scroll-section .container { padding: 0 32px; }

.wrecks-scroll-track {
  display: flex;
  overflow-x: auto;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) var(--bg-dark);
}
.wrecks-scroll-track::-webkit-scrollbar { height: 3px; }
.wrecks-scroll-track::-webkit-scrollbar-track { background: var(--bg-dark); }
.wrecks-scroll-track::-webkit-scrollbar-thumb { background: var(--border-mid); }

.wrecks-scroll-track .wreck-card {
  flex: 0 0 384px;
  scroll-snap-align: start;
}

.wreck-photo-tile {
  flex: 0 0 384px;
  scroll-snap-align: start;
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.wreck-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
.wreck-photo-tile:hover img { opacity: 0.7; }
.wreck-photo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.wrecks-scroll-wrapper {
  position: relative;
}
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--accent);
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
  font-family: var(--font-body);
}
.scroll-arrow:hover { background: var(--bg-hover); }
.scroll-arrow:disabled { opacity: 0.15; cursor: default; pointer-events: none; }
.scroll-arrow-left  { left: 0; }
.scroll-arrow-right { right: 0; }

.wreck-card {
  background: var(--bg-card);
  padding: 45px;
  cursor: pointer;
  transition: background 0.2s;
  display: block;
  color: inherit;
  text-decoration: none;
}
.wreck-card:hover { background: var(--bg-hover); text-decoration: none; }

.wreck-card-num {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 10px;
}
.wreck-card-name {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1;
}
.wreck-card-meta {
  font-size: 15px;
  color: var(--text-faint);
  line-height: 1.7;
  margin-bottom: 12px;
}
.wreck-card-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.wreck-type-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--border-mid);
  color: var(--accent);
}

.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-recently-explored  { background: #4a9eba; }
.status-previously-explored{ background: #5a8a6a; }
.status-never-explored     { background: #c87941; }

/* ============================================================
   MAP SECTION
   ============================================================ */
.map-section {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.map-section .container { padding: 0 32px; }

.map-wrapper {
  position: relative;
  width: 100%;
}
#wreck-map,
#full-map {
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 500px;
  background: #0d1e2c;
  border: 1px solid var(--border-mid);
}
.map-wrapper:fullscreen,
.map-wrapper:-webkit-full-screen {
  background: var(--bg-deep);
}
.map-wrapper:fullscreen #wreck-map,
.map-wrapper:fullscreen #full-map,
.map-wrapper:-webkit-full-screen #wreck-map,
.map-wrapper:-webkit-full-screen #full-map {
  width: 100%;
  min-height: unset;
  border: none;
}
.map-fullscreen-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 1000;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--text-mid);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.map-fullscreen-btn:hover { background: var(--bg-hover); color: var(--accent); }

/* Leaflet overrides */
.leaflet-container { background: #0d1e2c !important; font-family: var(--font-body) !important; }
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 0 !important;
  color: var(--text-mid) !important;
  box-shadow: none !important;
}
/* Wreck map markers */
@keyframes sonar-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.5); opacity: 0; }
}
.wreck-marker {
  position: relative;
  width: 12px; height: 12px;
  background: var(--mc);
  border: 2px solid #07111a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 27%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.wreck-marker::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--mc);
  opacity: 0;
  pointer-events: none;
}
.wreck-marker:hover { transform: scale(1.5); }
.wreck-marker:hover::after { animation: sonar-ping 0.7s ease-out forwards; }

.leaflet-popup-tip { background: var(--bg-card) !important; }
.leaflet-popup-content { font-family: var(--font-body); font-size: 24px; line-height: 1.6; }
.popup-name { font-family: var(--font-display); font-size: 40px; color: var(--text-primary); letter-spacing: 1px; }
.popup-meta { color: var(--text-faint); font-size: 20px; letter-spacing: 1px; margin: 4px 0 8px; }
.popup-link { color: var(--accent); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; }
.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text-mid) !important;
  border-color: var(--border-mid) !important;
  border-radius: 0 !important;
}
.leaflet-control-attribution {
  background: rgba(10,14,20,0.8) !important;
  color: var(--text-faint) !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
}
.leaflet-control-layers {
  background: rgba(10,14,20,0.92) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-mid) !important;
}
.leaflet-control-layers-toggle {
  background-color: var(--bg-card) !important;
  border-radius: 0 !important;
}
.leaflet-control-layers-expanded {
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}
.leaflet-control-layers label {
  color: var(--text-mid) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 !important;
}

/* ============================================================
   WRECK DETAIL PAGE
   ============================================================ */
.wreck-hero {
  position: relative;
  background: var(--bg-deep);
  padding: 36px 32px 40px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.wreck-hero-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px);
  opacity: 0.2;
}

.wreck-hero-content { position: relative; z-index: 2; max-width: 760px; }

.wreck-breadcrumb {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.wreck-breadcrumb a { color: var(--accent); }

.wreck-catalog-num {
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--accent);
  margin-bottom: 10px;
}

.wreck-title {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.92;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.wreck-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 520px;
}

.wreck-data-bar {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
}
.wreck-data-item {
  padding: 16px 28px;
  border-right: 1px solid var(--border);
  flex: 1;
}
.wreck-data-item:last-child { border-right: none; }
.wreck-data-label {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.wreck-data-val {
  font-size: 20px;
  color: var(--text-primary);
}

.wreck-body {
  display: grid;
  grid-template-columns: 1fr 416px;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.wreck-main {
  padding: 48px 40px 48px 32px;
  border-right: 1px solid var(--border);
}

.wreck-aside { padding: 48px 28px; background: var(--bg-deep); }

.prose-section { margin-bottom: 40px; }
.prose-section h3 {
  font-size: 17px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.prose-section p {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.9;
  color: var(--text-mid);
}

.aside-label {
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-top: 28px;
}
.aside-label:first-child { margin-top: 0; }

.aside-coord {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--green);
  line-height: 1.8;
}
.aside-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.aside-detail-row span:last-child { color: var(--text-primary); }

.footage-embed {
  margin-top: 32px;
  aspect-ratio: 16/9;
  background: var(--bg-deep);
  border: 1px solid var(--border-mid);
}
.footage-embed iframe { width: 100%; height: 100%; border: none; }
.footage-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ============================================================
   WRECK PHOTO GALLERY (detail page)
   ============================================================ */
.wreck-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 40px;
}
.wreck-gallery-item {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-deep);
}
.wreck-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.wreck-gallery-item:hover img { transform: scale(1.04); }

/* ============================================================
   WRECK PRIMETIME IMAGE + GALLERY
   ============================================================ */
.wreck-primetime-wrap {
  width: 100%;
  background: #020810;
  border-bottom: 1px solid var(--border);
  line-height: 0;
}
.wreck-primetime-wrap img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}
.wreck-img-placeholder {
  width: 100%;
  height: 380px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.wreck-img-placeholder svg { opacity: 0.08; }

.wreck-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  background: #020810;
  border-bottom: 1px solid var(--border);
  padding: 4px;
}
.wreck-gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.wreck-gallery img:hover { opacity: 0.8; }

/* ============================================================
   MINI MAP (detail page)
   ============================================================ */
#wreck-detail-map {
  width: 100%;
  height: 200px;
  margin-top: 16px;
  border: 1px solid var(--border-mid);
}

/* ============================================================
   NAVIGATION BETWEEN WRECKS
   ============================================================ */
.wreck-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.wreck-nav-item {
  background: var(--bg-dark);
  padding: 24px 28px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.wreck-nav-item:hover { background: var(--bg-hover); }
.wreck-nav-dir {
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--text-mid);
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.wreck-nav-name {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text-primary);
  letter-spacing: 1px;
}
.wreck-nav-item.next { text-align: right; }

/* ============================================================
   ABOUT / MAP PAGES
   ============================================================ */
.page-hero {
  background: var(--bg-deep);
  padding: 72px 32px 48px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px);
  opacity: 0.2;
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero .hero-eyebrow { font-size: 19px; }

.page-title {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 0.92;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin-top: 12px;
  margin-bottom: 16px;
}
.page-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.8;
}

/* ============================================================
   MAP LEGEND (shared — main page + map page)
   ============================================================ */
.map-legend {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  font-size: 15px;
  color: var(--text-faint);
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot   { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   SUPPORTERS
   ============================================================ */
.field-scroll-track {
  display: flex;
  overflow-x: auto;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.field-scroll-track::-webkit-scrollbar { display: none; }
.field-photo-tile {
  flex: 0 0 480px;
  height: 320px;
  scroll-snap-align: start;
  background: var(--bg-deep);
  overflow: hidden;
  position: relative;
}
.field-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.8);
}
.field-photo-tile:hover img {
  transform: scale(1.04);
  filter: brightness(1);
}

.supporters-section {
  border-top: 1px solid var(--border);
  padding: 48px 32px;
}
.supporters-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 56px;
  padding-top: 8px;
}
.supporters-grid img {
  height: 96px;
  width: auto;
  opacity: 1;
  filter: brightness(0.7);
  transition: opacity 0.2s, filter 0.2s;
}
.supporters-grid a:hover img {
  opacity: 1;
  filter: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-deep);
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--text-primary);
}
.footer-logo span { color: var(--accent); }
.footer-copy {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 13px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  border: none;
}
.btn-primary { background: var(--accent); color: var(--bg-deep); }
.btn-primary:hover { background: #5cb0ce; text-decoration: none; color: var(--bg-deep); }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-ghost:hover { background: rgba(74,158,186,0.1); text-decoration: none; }

/* ============================================================
   UTILITY
   ============================================================ */
.divider { border: none; border-top: 1px solid var(--border); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-title { font-size: 72px; }
  .wrecks-grid { grid-template-columns: 1fr 1fr; }
  .wrecks-scroll-track .wreck-card { flex: 0 0 336px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .wreck-body { grid-template-columns: 1fr; }
  .wreck-aside { border-top: 1px solid var(--border); }
  .wreck-title { font-size: 60px; }
}

@media (max-width: 600px) {
  .hero-title { font-size: 52px; }
  .wrecks-grid { grid-template-columns: 1fr; }
  .wrecks-scroll-track .wreck-card { flex: 0 0 312px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .site-nav { padding: 14px 20px; }
  .nav-links { gap: 16px; }
  .section { padding: 32px 20px; }
  .wreck-title { font-size: 44px; }
  .wreck-data-bar { flex-wrap: wrap; }
}