:root{
    --paper: #e6e1d3;
    --paper-raised: #efeadd;
    --ink: #211d19;
    --ink-soft: #5b564d;
    --ink-faint: #948d7f;
    --rule: #c7bfa9;
    --navy: #232c36;
    --navy-deep: #171d24;
    --brass: #93743b;
    --brass-bright: #b08f4d;
    --cream: #efe9da;
    --serif: 'Source Serif 4', Georgia, serif;
    --sans: 'Public Sans', -apple-system, sans-serif;
  }
  *{ box-sizing: border-box; }
  body{ margin:0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }

  header{ background: var(--navy); color: var(--cream); padding: 10px 0 9px; border-bottom: 2px solid var(--brass); }
  .header-inner{ position:relative; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
  header .kicker{ font-size: 10px; letter-spacing: 0.04em; color: var(--brass-bright); margin: 0 0 2px; padding-right:90px; }
  header h1{ font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 2px; letter-spacing: 0.01em; }
  header p.sub{ margin: 0; font-size: 11.5px; color: #c7c2b3; max-width: 640px; line-height: 1.35; }
  .header-inner.collapsed p.sub{ display:none; }

  .header-collapse{ position:absolute; top:2px; right:0; display:flex; align-items:center; gap:4px; background:none; border:none; padding:0; font-family: var(--sans); font-size:10px; font-weight:600; letter-spacing:0.03em; color:#8b93a0; cursor:pointer; }
  .header-collapse:hover{ color: var(--cream); }
  .header-collapse-arrow{ display:inline-block; font-size:11px; transition: transform 0.15s ease; }
  .header-inner.collapsed .header-collapse-arrow{ transform: rotate(180deg); }

  .mode-switch{ display:flex; gap:6px; margin-top:8px; background: rgba(255,255,255,0.06); border-radius:6px; padding:3px; max-width:400px; }
  .mode-btn{ flex:1; font-family: var(--sans); font-size:11.5px; font-weight:600; padding:6px 10px; border:none; background:transparent; color:#a8a294; border-radius:4px; cursor:pointer; }
  .mode-btn.active{ background: var(--brass); color: var(--navy-deep); }
  .mode-btn:hover:not(.active){ color: var(--cream); }

  .app{ display: grid; grid-template-columns: 260px 1fr; gap: 0; max-width: 1180px; margin: 0 auto; }

  .sidebar{ padding: 26px 20px; border-right: 1px solid var(--rule); }
  .sidebar h2{ font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 14px; }
  .person-btn{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:transparent; border:none; border-radius:3px; padding:10px; cursor:pointer; margin-bottom:4px; font-family: var(--sans); }
  .person-btn:hover{ background: var(--paper-raised); }
  .person-btn.active{ background: var(--navy); }
  .person-btn.active .p-name{ color: var(--cream); }
  .person-btn.active .p-role{ color:#b7b1a0; }

  .filter-tabs{ display:flex; gap:4px; margin-bottom:14px; background: var(--paper-raised); border-radius: 4px; padding: 3px; }
  .filter-tab{ flex:1; font-family: var(--sans); font-size:11px; font-weight:600; padding:7px 4px; border:none; background:transparent; color: var(--ink-soft); border-radius:3px; cursor:pointer; }
  .filter-tab.active{ background: var(--navy); color: var(--cream); }
  .filter-tab:hover:not(.active){ background: rgba(0,0,0,0.05); }

  .entry-btn{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:transparent; border:none; border-radius:3px; padding:10px; cursor:pointer; margin-bottom:4px; font-family: var(--sans); }
  .entry-btn:hover{ background: var(--paper-raised); }
  .entry-btn.active{ background: var(--navy); }
  .entry-btn.active .e-name{ color: var(--cream); }
  .entry-btn.active .e-role{ color:#b7b1a0; }
  .e-avatar{ flex:none; width:32px; height:32px; border-radius:50%; background: var(--brass); color: var(--cream); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-size:12px; font-weight:600; margin-top:1px; overflow:hidden; }
  .e-name{ font-size:13.5px; font-weight:600; color: var(--ink); display:block; }
  .e-role{ font-size:11.5px; color: var(--ink-soft); display:block; margin-top:1px; line-height:1.35; }
  .legend-note{ font-size:11px; color: var(--ink-faint); margin-top:10px; line-height:1.5; }
  .card-label{ font-size:10.5px; font-weight:700; letter-spacing:0.08em; color: var(--ink-faint); margin: 16px 0 6px; }
  .sightline-text{ font-size:13.5px; color: var(--ink-soft); line-height:1.6; max-width:64ch; font-style:italic; margin:0 0 8px; }
  .avatar{ flex:none; width:34px; height:34px; border-radius:50%; background: var(--brass); color: var(--cream); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-size:13px; font-weight:600; overflow:hidden; }
  .avatar-photo{ background: var(--navy-deep); }
  .avatar-photo img{ width:100%; height:100%; object-fit:cover; }
  .p-name{ font-size:14px; font-weight:600; color: var(--ink); display:block; }
  .p-role{ font-size:12px; color: var(--ink-soft); display:block; margin-top:1px; }

  .legend{ margin-top:30px; padding-top:20px; border-top:1px solid var(--rule); }
  .legend h2{ font-size:11.5px; font-weight:600; letter-spacing:0.06em; color: var(--ink-faint); margin:0 0 12px; }
  .legend-swatch{ width:26px; height:0; flex:none; border-top-width:2.5px; border-top-style:solid; border-color: #c99a3d; }
  .legend-swatch.reconstructed{ border-top-style:dashed; border-color: #b5562e; }
  .legend-swatch.estimated{ border-top-style:dotted; border-top-width:3.5px; border-color: #5b84a6; }

  .map-legend{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-bottom:10px; }
  .map-legend-item{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--ink-soft); line-height:1.4; }
  .map-legend-item b{ color: var(--ink); font-weight:600; }

  .map-controls{ display:flex; flex-wrap:wrap; gap:4px; background: var(--paper-raised); border-radius:5px; padding:3px; }
  .tile-btn{ font-family: var(--sans); font-size:11px; font-weight:600; padding:6px 10px; margin:0; border:none; border-radius:3px; background:transparent; color: var(--ink-soft); cursor:pointer; }
  .tile-btn.active{ background: var(--navy); color: var(--cream); }
  .tile-btn:hover:not(.active){ background: rgba(0,0,0,0.05); }
  .about-toggle{ margin-top:24px; font-size:12px; color:var(--brass); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-family: var(--sans); }
  .about-box{ display:none; margin-top:12px; font-size:12px; line-height:1.6; color: var(--ink-soft); background: var(--paper-raised); border-left:2px solid var(--brass); padding:12px 14px; }
  .about-box.open{ display:block; }

  main{ padding: 26px 30px 40px; }

  footer.site-footer{ background: var(--navy); color: #c7c2b3; border-top: 3px solid var(--brass); padding: 26px 0 30px; margin-top: 10px; }
  footer.site-footer .footer-inner{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }
  footer.site-footer p{ font-size: 12.5px; line-height: 1.7; margin: 0 0 10px; max-width: 68ch; }
  footer.site-footer a{ color: var(--brass-bright); text-decoration: none; border-bottom: 1px solid var(--brass-bright); padding-bottom: 1px; }
  footer.site-footer a:hover{ color: var(--cream); }
  footer.site-footer .footer-links{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 22px; }
  footer.site-footer .footer-links a{ font-size: 12.5px; font-weight: 600; }

  .section-label{ font-family: var(--sans); font-size:11px; font-weight:700; letter-spacing:0.09em; color: var(--brass); margin: 26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule); }
  main > .section-label:first-child{ margin-top:0; }

  .section-label-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin: 26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule); }
  main > .section-label-row:first-child{ margin-top:0; }
  .section-label-row .section-label{ margin:0; padding-bottom:0; border-bottom:none; }

  .map-frame{ background: var(--navy-deep); border-radius:4px; padding:10px; position:relative; }
  #map{ height: clamp(260px, 48vh, 460px); border-radius: 2px; background: #232c36; }
  .map-diag{ font-size: 12px; color: #d8c9a3; background: #2a1f16; border: 1px solid var(--brass); border-radius: 3px; padding: 10px 12px; margin: 8px 8px 0; line-height: 1.6; }
  .map-diag a{ color: var(--brass-bright); }
  .map-caption{ font-size:10.5px; color:#8b93a0; letter-spacing:0.02em; padding: 8px 8px 2px; }

  .scroll-cue{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:0; padding:10px 0 2px; background:none; border:none; font-family: var(--sans); font-size:11.5px; font-weight:600; letter-spacing:0.03em; color: var(--brass); cursor:pointer; }
  .scroll-cue:hover{ color: var(--brass-bright); }
  .scroll-cue-arrow{ display:inline-block; font-size:14px; line-height:1; animation: scrollCueBounce 1.6s ease-in-out infinite; }
  @keyframes scrollCueBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

  .timeline{ display:flex; align-items:center; gap:14px; }
  .tl-btn{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); background: var(--paper-raised); color: var(--ink); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
  .tl-btn:disabled{ opacity:0.35; cursor:default; }
  .tl-track{ position:relative; flex:1; height:46px; }
  .tl-line{ position:absolute; left:0; right:0; top:22px; height:1px; background: var(--rule); }
  .tl-tick{ position:absolute; top:8px; transform: translateX(-50%); text-align:center; cursor:pointer; width:90px; }
  .tl-tick .dot{ width:9px; height:9px; border-radius:50%; background: var(--ink-faint); margin:0 auto 6px; border:2px solid var(--paper); }
  .tl-tick.confirmed .dot{ background: #c99a3d; }
  .tl-tick.reconstructed .dot{ background: #b5562e; }
  .tl-tick.estimated .dot{ background: #5b84a6; }
  .tl-tick.active .dot{ background: var(--brass); transform: scale(1.3); }
  .tl-tick .time{ font-size:11px; color: var(--ink-soft); font-weight:600; }
  .tl-tick.active .time{ color: var(--brass); }

  @media (max-width: 640px){
    .tl-tick{ width:60px; }
    .tl-tick .time{ display:none; font-size:9.5px; }
    .tl-tick.active .time{ display:block; }
    .tl-tick .dot{ width:11px; height:11px; }
    .tl-tick.active .dot{ transform: scale(1.5); }
    .timeline{ gap:8px; }
    .tl-btn{ width:30px; height:30px; }
  }

  .detail{ background: var(--paper-raised); border:1px solid var(--rule); border-radius:4px; padding:22px 26px; }
  .detail-top{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:6px; }
  .detail-time{ font-family: var(--serif); font-size:19px; color: var(--ink); }
  .badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
  .badge.confirmed{ background: #8a6524; color: var(--cream); }
  .badge.reconstructed{ background: #8a3e1f; color: var(--cream); }
  .badge.estimated{ background: #3d5b73; color: var(--cream); }
  .detail-place{ font-size:13px; color: var(--brass); font-weight:600; margin:0 0 12px; }
  .place-link{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; cursor:pointer; }
  .place-link:hover{ color: var(--brass-bright); border-bottom-style:solid; }
  .place-gmaps{ font-size:10.5px; font-weight:400; color: var(--ink-faint); text-decoration:none; margin-left:5px; }
  .place-gmaps:hover{ color: var(--brass); }
  .place-flash{ width:34px; height:34px; border-radius:50%; background: rgba(201,154,61,0.5); animation: travelerPulse 0.8s ease-out 2; }
  .detail-narrative{ font-family: var(--serif); font-size:16px; line-height:1.65; color: var(--ink); margin:0 0 16px; max-width:62ch; }
  .sources{ margin-top:18px; font-size:12px; color: var(--ink-soft); line-height:1.7; }
  .sources b{ display:block; color: var(--ink); font-size:11.5px; letter-spacing:0.04em; margin-bottom:4px; }

  .media-card{ margin-top:14px; border:1px solid var(--rule); border-left: 3px solid var(--brass); border-radius:3px; padding:12px 14px; background: var(--paper); display:flex; gap:12px; }
  .media-card .mc-glyph{ flex:none; width:34px; height:34px; border-radius:50%; background: var(--navy); display:flex; align-items:center; justify-content:center; }
  .media-card .mc-glyph svg{ width:16px; height:16px; }
  .media-card .mc-body{ flex:1; min-width:0; }
  .media-card .mc-label{ font-size:10.5px; font-weight:600; letter-spacing:0.06em; color: var(--brass); margin:0 0 4px; }
  .media-card .mc-title{ font-family: var(--serif); font-size:14.5px; color: var(--ink); margin:0 0 3px; }
  .media-card .mc-credit{ font-size:12px; color: var(--ink-soft); margin:0 0 3px; }
  .media-card .mc-note{ font-size:11.5px; color: var(--ink-faint); margin:0 0 8px; line-height:1.5; }
  .media-card a.mc-link{ font-size:12px; color: var(--brass); text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:1px; }
  .media-card a.mc-link:hover{ color: var(--brass-bright); }

  .video-thumb{ position:relative; width:100%; max-width:280px; border-radius:3px; overflow:hidden; cursor:pointer; margin-bottom:8px; background:#0c0f13; }
  .video-thumb img{ display:block; width:100%; height:auto; opacity:0.85; }
  .video-thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .video-thumb .play svg{ width:44px; height:44px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); }
  .img-embed{ width:100%; max-width:300px; border-radius:3px; margin-bottom:8px; display:block; border:1px solid var(--rule); cursor:pointer; }
  .img-fallback{ display:none; font-size:11.5px; color: var(--ink-faint); margin-bottom:8px; font-style:italic; }

  .video-lightbox{ position:fixed; inset:0; background: rgba(17,15,12,0.88); display:none; align-items:center; justify-content:center; z-index:999; padding: 30px; }
  .video-lightbox.open{ display:flex; }
  .video-lightbox .frame-wrap{ width:100%; max-width:800px; max-height:85vh; background:#000; display:flex; align-items:center; justify-content:center; }
  .video-lightbox .frame-wrap iframe{ width:100%; aspect-ratio:16/9; border:0; }
  .video-lightbox .frame-wrap img{ max-width:100%; max-height:85vh; object-fit:contain; }
  .video-lightbox .close{ position:absolute; top:24px; right:30px; background:none; color:var(--cream); font-size:15px; cursor:pointer; font-family: var(--sans); border:1px solid var(--cream); padding:6px 12px; border-radius:20px; }

  .leaflet-popup-content-wrapper{ background: var(--cream); color: var(--ink); font-family: var(--sans); border-radius: 3px; }
  .leaflet-popup-content{ font-size: 12.5px; line-height: 1.5; margin: 10px 12px; }
  .leaflet-popup-tip{ background: var(--cream); }

  .person-hero{ background: var(--navy-deep); border-radius:4px; overflow:hidden; display:none; border: 1px solid var(--brass); }
  .hero-media{ width:100%; max-height:320px; overflow:hidden; background:#0c0f13; display:flex; align-items:center; justify-content:center; }
  .hero-img{ width:100%; max-height:320px; object-fit:contain; cursor:pointer; display:block; }
  .hero-img-fallback{ width:100%; padding: 30px 24px; align-items:center; justify-content:center; text-align:center; }
  .hero-img-fallback span{ font-size:12.5px; color:#c7c2b3; line-height:1.7; }

  .hero-placeholder{
    position:relative; width:100%; height:220px; overflow:hidden; display:block; text-decoration:none;
    background:
      repeating-linear-gradient(135deg, rgba(201,154,61,0.05) 0px, rgba(201,154,61,0.05) 1px, transparent 1px, transparent 14px),
      radial-gradient(ellipse at center, #2c3644 0%, #1c232c 75%, #171d24 100%);
  }
  .hero-placeholder:hover{ filter: brightness(1.08); }
  .hero-placeholder-monogram{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family: var(--serif); font-weight:600; font-size:150px; color: rgba(239,233,218,0.05);
    letter-spacing:-4px; pointer-events:none; user-select:none;
  }
  .hero-placeholder-content{ position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
  .hero-placeholder-content svg{ opacity:0.65; }
  .hero-placeholder-label{ font-family: var(--sans); font-size:10.5px; letter-spacing:0.12em; color:#8b93a0; }
  .hero-placeholder-cta{ font-family: var(--serif); font-size:15px; color: var(--brass-bright); letter-spacing:0.01em; margin-top:0; }
  .hero-corner{ position:absolute; width:22px; height:22px; border-color: rgba(201,154,61,0.55); }
  .hero-corner.tl{ top:14px; left:14px; border-top:2px solid; border-left:2px solid; }
  .hero-corner.tr{ top:14px; right:14px; border-top:2px solid; border-right:2px solid; }
  .hero-corner.bl{ bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid; }
  .hero-corner.br{ bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid; }
  .hero-info{ padding:16px 20px 18px; }
  .hero-name{ font-family: var(--serif); font-size:19px; color: var(--cream); margin:0 0 2px; }
  .hero-role{ font-size:12.5px; color:#a8a294; margin:0 0 10px; }
  .hero-caption{ font-family: var(--serif); font-size:14.5px; color:#efe9da; margin:0 0 3px; font-style:italic; }
  .hero-credit{ font-size:12px; color:#a8a294; margin:0; }
  .hero-link{ display:inline-block; margin-top:10px; font-size:12px; color: var(--brass-bright); text-decoration:none; border-bottom:1px solid var(--brass-bright); padding-bottom:1px; }
  .hero-link:hover{ color: var(--cream); }

  .traveler-icon-wrap{ position:relative; width:0; height:0; }
  .traveler-pulse{ position:absolute; left:-17px; top:-17px; width:34px; height:34px; border-radius:50%; background: rgba(201,154,61,0.45); animation: travelerPulse 1.5s ease-out infinite; }
  .traveler-core{ position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:#c99a3d; border:2px solid #171d24; box-shadow: 0 0 0 2px rgba(239,233,218,0.95), 0 0 8px rgba(0,0,0,0.5); }
  @keyframes travelerPulse{ 0%{ transform:scale(0.35); opacity:0.9; } 100%{ transform:scale(1.5); opacity:0; } }

  .roster-avatar{ width:36px; height:36px; border-radius:50%; background: var(--cream); border: 2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-family: var(--serif); font-weight:600; font-size:13px; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,0.45); cursor:pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow:hidden; }
  .roster-avatar-photo img{ width:100%; height:100%; object-fit:cover; }
  .roster-avatar:hover{ transform: scale(1.12); }
  .roster-avatar.inactive{ opacity: 0.78; }
  .roster-avatar.active{ background: var(--navy); color: var(--cream); border-color: #c99a3d; box-shadow: 0 0 0 3px rgba(201,154,61,0.55), 0 2px 8px rgba(0,0,0,0.5); transform: scale(1.18); }
  .roster-label{ position:absolute; top:39px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family: var(--sans); font-size:10.5px; font-weight:600; color:#efe9da; background: rgba(15,18,22,0.82); padding:2px 7px; border-radius:3px; pointer-events:none; opacity:0; transition: opacity 0.15s ease; }
  .roster-wrap:hover .roster-label, .roster-wrap.active .roster-label{ opacity:1; }

  @media (max-width: 860px){
    .app{ grid-template-columns: 1fr; }
    .sidebar{ border-right:none; border-bottom:1px solid var(--rule); }
  }