:root{
  --bg:#ede4cf; --panel:#f8f2e3; --panel2:#efe6d1; --border:#c9bd9d;
  --ink:#2a2318; --ink-dim:#7d6f56; --gold:#8a6a2a; --red:#8a3226;
  --kia:#8a3226; --dow:#a3661f; --mia:#6b6357; --navy:#2c3e50; --navy-dim:#4a5f75;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a{ color:inherit; }

/* ---------- buttons / badges (same as the interactive app) ---------- */
.btn{ padding:8px 14px; border-radius:4px; border:1px solid var(--border); background:transparent;
      color:var(--ink); font-size:12.5px; cursor:pointer; text-decoration:none; display:inline-flex;
      align-items:center; gap:6px; transition:border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.btn:hover{ border-color:var(--navy); color:var(--navy); }
.badge{ font-size:10px; padding:2px 6px; border-radius:3px; text-align:center; font-weight:bold; letter-spacing:0.3px; }
.badge.KIA{ background:var(--kia); color:#fdf8ec; }
.badge.DOW{ background:var(--dow); color:#fdf8ec; }
.badge.MIA{ background:var(--mia); color:#fdf8ec; }

/* ---------- top site bar (lightweight - links back to the interactive archive) ---------- */
#siteBar{ background:var(--panel); border-bottom:3px solid var(--gold); padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
#siteBar a.brand{ font-family:Georgia,serif; font-size:17px; color:var(--navy); text-decoration:none; }
#siteBar a.brand:hover{ text-decoration:underline; }

/* ---------- soldier photo (shared with the popup version, just larger here) ---------- */
.profile-photo{ width:150px; height:150px; border-radius:6px; flex-shrink:0; position:relative;
    overflow:hidden; border:1px solid var(--border); background:var(--panel2); }
.profile-photo-placeholder{ position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; color:var(--ink-dim); }
.profile-photo-placeholder svg{ width:60px; height:60px; }
.profile-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-photo img[data-lightbox]{ cursor:pointer; transition:opacity 0.15s ease; }
.profile-photo img[data-lightbox]:hover{ opacity:0.85; }

/* ---------- page shell ---------- */
.profile-page{ width:100%; max-width:1180px; margin:0 auto; padding:36px 32px 60px; }
@media (max-width:720px){ .profile-page{ padding:24px 16px 48px; } }

.profile-page-header{ padding:8px 0 22px; border-bottom:2px solid var(--gold); margin-bottom:32px; }
.profile-page-header .top{ display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap; }
.profile-page-id{ flex:1; min-width:240px; padding-top:2px; }
.profile-page-name{ font-family:Georgia,serif; font-size:clamp(26px,3.4vw,38px); color:var(--navy);
    margin:0 0 6px; line-height:1.15; }
.profile-page-rankunit{ font-size:14.5px; color:var(--ink-dim); margin-bottom:16px; }
.profile-page-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.profile-page-actions .btn{ font-size:12.5px; }
.profile-page-actions .btn.studio{ border-color:var(--gold); color:#6b5220; }
.profile-page-actions .btn.studio:hover{ background:var(--gold); color:#fdf8ec; border-color:var(--gold); }
.profile-page-actions .badge{ font-size:11.5px; padding:5px 12px; }

.profile-quickfacts{ display:flex; flex-wrap:wrap; gap:26px 42px; margin-top:24px; padding-top:18px;
    border-top:1px solid var(--border); }
.profile-quickfacts .qf .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px;
    color:var(--ink-dim); display:block; margin-bottom:3px; }
.profile-quickfacts .qf .v{ font-size:15px; color:var(--ink); font-family:Georgia,serif; }

.profile-section-title{ font-family:Georgia,serif; font-size:11.5px; text-transform:uppercase;
    letter-spacing:1.4px; color:var(--gold); margin:0 0 16px; }
.profile-section-title.ruled{ padding-bottom:8px; border-bottom:1px solid var(--border); }

.profile-columns{ display:grid; grid-template-columns:2fr 3fr; gap:40px; align-items:start; margin-bottom:44px; }
@media (max-width:900px){ .profile-columns{ grid-template-columns:1fr; gap:30px; } }

.profile-story-text{ font-family:Georgia,serif; font-size:17px; line-height:1.8; color:var(--ink); }
.profile-story-awards{ margin-top:18px; }
.profile-story-awards .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px;
    color:var(--ink-dim); display:block; margin-bottom:4px; }
.profile-story-source{ font-size:11.5px; color:var(--ink-dim); margin-top:18px; padding-top:14px;
    border-top:1px dashed var(--border); }

.profile-map-col{ position:sticky; top:20px; }
#profileMap{ width:100%; height:420px; border:1px solid var(--border); border-radius:6px; background:var(--panel2); }
.profile-map-caption{ font-size:11px; color:var(--ink-dim); margin-top:9px; line-height:1.5; }

.profile-page-section{ margin-bottom:42px; }
.evidence-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.evidence-card{ border:1px solid var(--border); border-radius:6px; background:var(--panel); overflow:hidden;
    cursor:pointer; transition:border-color 0.15s ease, box-shadow 0.15s ease; }
.evidence-card:hover{ border-color:var(--gold); box-shadow:0 3px 10px rgba(42,35,24,0.14); }
.evidence-card .thumb{ height:100px; background:var(--panel2); display:flex; align-items:center;
    justify-content:center; overflow:hidden; }
.evidence-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.evidence-card .meta{ padding:9px 11px; }
.evidence-card .meta .type{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--gold); }
.evidence-card .meta .label{ font-size:12px; color:var(--ink); margin-top:2px; }
.evidence-empty{ font-size:13px; color:var(--ink-dim); font-style:italic; }

.profile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.profile-field{ font-size:12.5px; }
.profile-field .k{ color:var(--ink-dim); font-size:10.5px; text-transform:uppercase; letter-spacing:0.4px; display:block; margin-bottom:2px; }
.profile-field .v{ color:var(--ink); }
.profile-source{ font-size:11.5px; color:var(--ink-dim); }
.profile-source a{ color:var(--navy); }

.military-details{ background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:22px 24px; }
.military-details .profile-grid{ opacity:0.9; }
.military-details .profile-source{ margin-top:14px; }

.nearby-context{ font-size:12.5px; color:var(--ink-dim); margin:-8px 0 16px; font-family:'Courier New',Courier,monospace; }
.nearby-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.nearby-card{ border:1px solid var(--border); border-radius:6px; padding:13px 15px; cursor:pointer;
    background:var(--panel); transition:border-color 0.15s ease, box-shadow 0.15s ease; text-decoration:none; display:block; }
.nearby-card:hover{ border-color:var(--navy); box-shadow:0 3px 10px rgba(42,35,24,0.1); }
.nearby-card .name{ font-family:Georgia,serif; font-size:14px; color:var(--ink); }
.nearby-card .rank{ font-size:11px; color:var(--ink-dim); margin-top:1px; }
.nearby-card .meta-row{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.nearby-card .meta-row .badge{ font-size:9.5px; padding:2px 7px; }
.nearby-card .dist{ font-size:11px; color:var(--ink-dim); font-family:'Courier New',Courier,monospace; }
.nearby-more{ font-size:11.5px; color:var(--ink-dim); font-style:italic; margin-top:14px; }

/* ---------- photo lightbox (same behavior as the interactive app) ---------- */
.overlay{ position:fixed; inset:0; background:rgba(10,8,5,0.75); z-index:5000; display:flex;
    align-items:center; justify-content:center; }
.overlay.hidden{ display:none; }
#photoLightboxImg{ max-width:90vw; max-height:90vh; border-radius:6px; }
.photo-lightbox-close{ position:absolute; top:20px; right:28px; background:none; border:none;
    color:#fdf8ec; font-size:38px; line-height:1; cursor:pointer; padding:6px 10px; }
.photo-lightbox-close:hover{ color:var(--gold); }
.photo-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:none;
    color:#fdf8ec; font-size:52px; line-height:1; cursor:pointer; padding:10px 18px;
    opacity:0.75; transition:opacity 0.15s ease; }
.photo-lightbox-nav:hover{ opacity:1; color:var(--gold); }
.photo-lightbox-prev{ left:8px; }
.photo-lightbox-next{ right:8px; }
#photoLightboxCaption{ position:absolute; bottom:56px; left:0; right:0; text-align:center;
    color:#fdf8ec; font-size:13px; padding:0 60px; }
#photoLightboxCounter{ position:absolute; bottom:24px; left:0; right:0; text-align:center;
    color:#c9bd9d; font-size:11.5px; letter-spacing:0.5px; }

/* ---------- map marker popups ---------- */
.popup-name{ font-weight:bold; font-family:Georgia,serif; font-size:13px; }
.popup-detail{ font-size:11px; color:#444; margin-top:2px; }