/* ============================================================
   Shinyō Maru Memorial Map — archival / WWII Pacific cartographic
   ============================================================ */

:root {
  /* Paper, ink, navy, rust */
  --paper:        #f1e7d2;   /* warm aged paper */
  --paper-2:      #ebdfc6;   /* slightly deeper, sections */
  --paper-3:      #e3d4b5;   /* card surface */
  --paper-edge:   #c8b48b;   /* hairlines, dividers */

  --ink:          #1b1a17;   /* primary text */
  --ink-2:        #3b362e;   /* secondary */
  --ink-muted:    #6c6353;   /* tertiary */

  --navy:         #142536;   /* deep navy */
  --navy-2:       #1f3a52;   /* navy hover */
  --teal:         #1f5f6b;   /* chart of the Pacific */
  --rust:         #b8442d;   /* accent / chartline */
  --rust-2:       #8c2f1f;

  --confidence-sourced:  #2e6a4f;
  --confidence-approx:   #b07a1d;
  --confidence-inferred: #8c2f1f;

  /* Filter dot colors per category */
  --c-sinking:    #8c2f1f;
  --c-escape:     #b07a1d;
  --c-shelter:    #2e6a4f;
  --c-evac:       #1f5f6b;
  --c-memorial:   #4b3b69;
  --c-uncert:     #6c6353;

  --radius: 4px;
  --shadow-sm: 0 1px 0 rgba(20,18,12,0.06), 0 2px 6px rgba(20,18,12,0.05);
  --shadow-md: 0 2px 0 rgba(20,18,12,0.05), 0 12px 28px rgba(20,18,12,0.10);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  /* subtle paper grain via repeating linear-gradient */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(150,110,50,0.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(20,37,54,0.05), transparent 50%),
    repeating-linear-gradient(0deg, rgba(120,90,40,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,90,40,0.022) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--navy);
  text-decoration-color: var(--paper-edge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--rust); text-decoration-color: var(--rust); }
a:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

button { font: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--ink); color: var(--paper);
  padding: 8px 14px; border-radius: 4px; z-index: 9999;
}
.skip-link:focus { top: 12px; }

/* ============ Masthead ============ */
.masthead {
  position: sticky; top: 0; z-index: 500;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-edge);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  backdrop-filter: saturate(1.1);
}
.brand { display: flex; align-items: center; gap: 14px; }
.mark { width: 44px; height: 44px; color: var(--navy); flex: 0 0 auto; }
.mark-sm { width: 36px; height: 36px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.kicker {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.brand-title {
  font-family: var(--font-display);
  font-weight: 600; font-size: 26px; letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
.brand-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: var(--ink-2);
}
.topnav {
  display: flex; gap: 4px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topnav a {
  padding: 8px 12px; border-radius: 3px;
  color: var(--ink-2); text-decoration: none;
}
.topnav a:hover { background: var(--paper-2); color: var(--rust); }

@media (max-width: 820px) {
  .masthead { padding: 10px 14px; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  .topnav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { white-space: nowrap; flex: 0 0 auto; }
  .brand-title { font-size: 22px; }
}

/* ============ Opening ============ */
.opening { padding: 56px 28px 36px; max-width: 1280px; margin: 0 auto; }
.opening-grid {
  display: grid; gap: 36px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .opening-grid { grid-template-columns: 1fr; gap: 28px; } .opening { padding: 36px 18px; } }

.eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rust); margin: 0 0 12px;
}
.lede-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.12; font-weight: 500; letter-spacing: -0.015em;
  margin: 0 0 22px; color: var(--ink);
}
.lede-title em { font-style: italic; color: var(--ink-2); }
.lede-body { font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; color: var(--ink-2); max-width: 62ch; }
.lede-body strong { color: var(--ink); font-weight: 600; }

.opening-meta {
  background: var(--paper-3);
  border: 1px solid var(--paper-edge);
  padding: 22px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.opening-meta h3 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 14px; color: var(--ink-muted);
}
.opening-meta dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; }
.opening-meta dt { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 4px; }
.opening-meta dd { margin: 0; color: var(--ink); }
.opening-meta .muted { color: var(--ink-muted); font-size: 12.5px; }
.meta-note {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px dashed var(--paper-edge);
  font-size: 13px; color: var(--ink-2);
}

/* Category dots used across the page */
.dot {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  vertical-align: 0;
  margin: 0 4px 0 0;
  border: 1px solid rgba(0,0,0,0.18);
}
.dot-sink     { background: var(--c-sinking); }
.dot-escape   { background: var(--c-escape); }
.dot-shelter  { background: var(--c-shelter); }
.dot-evac     { background: var(--c-evac); }
.dot-memorial { background: var(--c-memorial); }
.dot-uncert   { background: var(--c-uncert); }

/* ============ Map view ============ */
.mapview {
  padding: 24px 28px 64px;
  max-width: 1480px; margin: 0 auto;
}
@media (max-width: 900px) { .mapview { padding: 18px 14px 40px; } }

.map-frame {
  background: var(--paper-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.map-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-edge);
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
}
.toolbar-label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-muted); margin-right: 6px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  color: var(--ink-2);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  padding: 6px 11px; border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { background: #f6ecd6; }
.chip.is-on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.chip.is-on .dot { border-color: rgba(255,255,255,0.2); }
.chip:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.map-shell {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 0;
  min-height: 560px;
}
@media (max-width: 900px) {
  .map-shell { grid-template-columns: 1fr; min-height: 0; }
}

#map {
  min-height: 560px;
  background: #e8d9b6;
}
@media (max-width: 900px) { #map { min-height: 380px; } }

.detail-panel {
  background: var(--paper-2);
  border-left: 1px solid var(--paper-edge);
  padding: 22px 22px;
  overflow-y: auto;
  max-height: 700px;
}
@media (max-width: 900px) {
  .detail-panel { border-left: 0; border-top: 1px solid var(--paper-edge); max-height: none; }
}
.detail-empty {
  color: var(--ink-muted); font-style: italic; font-family: var(--font-display);
  font-size: 17px; line-height: 1.5; margin: 0;
}
.detail-panel .d-kicker {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.detail-panel h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; line-height: 1.15; margin: 0 0 4px; letter-spacing: -0.01em;
  color: var(--ink);
}
.detail-panel .d-date {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.05em;
  margin: 0 0 14px;
}
.detail-panel .d-coords {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted);
  background: var(--paper-3);
  border: 1px dashed var(--paper-edge);
  padding: 6px 10px; border-radius: 3px;
  display: inline-block; margin: 0 0 14px;
}
.confidence {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.confidence.sourced  { color: var(--confidence-sourced); }
.confidence.approx   { color: var(--confidence-approx); }
.confidence.inferred { color: var(--confidence-inferred); }

.detail-panel p.d-narrative {
  font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px;
}
.detail-panel .d-cites {
  border-top: 1px dashed var(--paper-edge); padding-top: 12px; margin-top: 8px;
}
.detail-panel .d-cites h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 6px; color: var(--ink-muted);
}
.detail-panel .d-cites ul { list-style: none; padding: 0; margin: 0; }
.detail-panel .d-cites li { font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.detail-panel .d-cites a { word-break: break-word; }

/* ============ Timeline ============ */
.timeline {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.t-item {
  background: var(--paper-3);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--paper-edge);
  border-radius: 3px;
  padding: 14px 16px 14px 15px;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  font-family: inherit;
}
.t-item:hover { background: #f4e7c9; }
.t-item:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.t-item.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.t-item.is-active .t-date,
.t-item.is-active .t-title,
.t-item.is-active .t-loc { color: var(--paper); }
.t-item.is-active .t-cat { color: var(--paper); opacity: 0.85; }

.t-item.is-hidden { display: none; }

.t-cat-bar {
  width: 100%; height: 2px; margin-bottom: 10px;
  background: var(--c-uncert);
}
.t-cat-sinking    .t-cat-bar { background: var(--c-sinking); }
.t-cat-escape     .t-cat-bar { background: var(--c-escape); }
.t-cat-shelter    .t-cat-bar { background: var(--c-shelter); }
.t-cat-evacuation .t-cat-bar { background: var(--c-evac); }
.t-cat-memorial   .t-cat-bar { background: var(--c-memorial); }
.t-cat-uncertainty .t-cat-bar { background: var(--c-uncert); }

.t-cat {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted);
}
.t-date {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; color: var(--ink-muted);
  margin: 2px 0 6px;
}
.t-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; line-height: 1.2; margin: 0 0 4px;
  color: var(--ink);
}
.t-loc { font-size: 12.5px; color: var(--ink-muted); }

/* ============ Leaflet popup styling ============ */
.leaflet-container { font-family: var(--font-body); background: #e8d9b6; }
.leaflet-popup-content-wrapper {
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--paper-edge);
}
.leaflet-popup-tip { background: var(--paper); border: 1px solid var(--paper-edge); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.5; min-width: 220px; }
.leaflet-popup-content .pop-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; line-height: 1.15; margin: 0 0 4px;
}
.leaflet-popup-content .pop-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 8px;
}
.leaflet-popup-content .pop-link {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rust);
}
.leaflet-control-attribution {
  background: rgba(241,231,210,0.8) !important;
  color: var(--ink-2) !important;
  font-size: 10.5px !important;
}
.leaflet-control-attribution a { color: var(--navy) !important; }

/* Custom map markers */
.mk-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; color: #fff;
  font-weight: 700; letter-spacing: 0;
}
.mk-sinking    { background: var(--c-sinking); }
.mk-escape     { background: var(--c-escape); }
.mk-shelter    { background: var(--c-shelter); }
.mk-evacuation { background: var(--c-evac); }
.mk-memorial   { background: var(--c-memorial); }
.mk-uncertainty{ background: var(--c-uncert); }

.mk-icon.is-active {
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: -1px;
  transform: scale(1.18);
  z-index: 1000;
}

/* ============ People ============ */
.people, .gallery, .sources { padding: 56px 28px; max-width: 1280px; margin: 0 auto; }
@media (max-width: 900px) { .people, .gallery, .sources { padding: 40px 18px; } }

.section-head { margin-bottom: 26px; max-width: 720px; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.01em;
  margin: 0 0 10px; color: var(--ink);
}
.section-lede { color: var(--ink-2); font-size: 16px; margin: 0; max-width: 60ch; }

.people-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.person-card {
  background: var(--paper-3);
  border: 1px solid var(--paper-edge);
  padding: 20px 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.person-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.15; margin: 0 0 2px; color: var(--ink);
}
.person-role {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 10px;
}
.person-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 6px; }

/* ============ Gallery ============ */
.gallery-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.archival {
  background: var(--paper-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin: 0;
  display: flex; flex-direction: column;
}
.archival img {
  width: 100%; height: 240px; object-fit: cover;
  filter: sepia(0.08) contrast(1.04);
  background: var(--ink);
  display: block;
}
.archival figcaption, .archival > * { padding-left: 18px; padding-right: 18px; }
.archival figcaption {
  padding-top: 14px; padding-bottom: 16px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
.archival figcaption strong { color: var(--ink); }
.rights {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-muted);
}
.archival.linkcard { padding: 20px 0; }
.archival.linkcard header { padding-bottom: 0; }
.archival.linkcard p { padding-top: 0; padding-bottom: 0; font-size: 14px; color: var(--ink-2); margin: 8px 0 12px; }
.archival.linkcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 6px 0 0; }
.archival.linkcard .card-kicker {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rust);
}
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { font-size: 13.5px; padding: 4px 0; border-top: 1px dashed var(--paper-edge); }
.linklist li:first-child { border-top: 0; }

.rights-block {
  margin-top: 24px; padding: 16px 18px;
  background: var(--paper-2);
  border: 1px dashed var(--paper-edge);
  border-radius: 3px;
  font-size: 13.5px; color: var(--ink-2);
}

/* ============ Sources ============ */
.source-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
  counter-reset: srcc;
}
.source-list li {
  background: var(--paper-3);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  font-size: 14px; line-height: 1.55;
}
.source-list li::before {
  counter-increment: srcc;
  content: counter(srcc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--rust); padding-top: 2px;
}
.source-list .src-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 17px; line-height: 1.2; color: var(--ink); margin: 0 0 4px;
}
.source-list .src-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 6px;
}
.source-list p { margin: 0 0 6px; color: var(--ink-2); }
.source-list a { word-break: break-word; }

/* ============ Footer ============ */
.footer {
  background: var(--navy); color: #d4c8ad;
  padding: 36px 28px;
  margin-top: 56px;
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; gap: 22px; align-items: flex-start;
}
.footer .mark { color: #d4c8ad; }
.footer p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.footer .muted { color: rgba(212,200,173,0.7); font-size: 12.5px; }
.footer a { color: #e9ddc4; }
@media (max-width: 600px) { .footer-inner { flex-direction: column; } }

/* ============ Misc ============ */
::selection { background: var(--rust); color: #fff5e2; }