:root{
  --bg:#0a0b0d; --ink:#e7e5e0; --muted:#a3a6ab; --dim:#6f747a; --gold:#e8c46a; --gold-2:#f6dc95;
  --granite:#0d0f12; --line:#23262b; --card:#13161a; --walk:#3a3b3d; --accent:#c9a24e;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --wallfont:Optima,"Tenor Sans",Candara,"Segoe UI",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-text-size-adjust:100%}
a{color:var(--gold)}
a:hover{color:var(--gold-2)}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.top{border-bottom:1px solid var(--line);background:#07080a}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:56px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:22px;letter-spacing:.06em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-top:-4px}
.top nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;margin-left:auto}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.2}
.foot{border-top:1px solid var(--line);margin-top:48px;padding:28px 0 40px;color:var(--dim);font-size:13px}
.foot a{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #3a3d42;background:#15181c;color:var(--ink);padding:9px 14px;border-radius:8px;font:500 14px var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--gold);color:var(--gold-2)}
.btn.gold{background:linear-gradient(#d9b45a,#b38a35);color:#16120a;border-color:#b38a35}
.btn.gold:hover{filter:brightness(1.08);color:#16120a}

/* ---------- The Wall page ---------- */
.hero{padding:28px 0 10px;text-align:center}
.hero h1{font-size:clamp(30px,5vw,52px);margin:0;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.hero p{color:var(--muted);max-width:760px;margin:8px auto 0}
.controls{position:sticky;top:0;z-index:20;background:rgba(10,11,13,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.controls .wrap{max-width:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 16px}
.search{position:relative;flex:1 1 260px;max-width:460px}
.search input{width:100%;background:#111317;border:1px solid #33363b;color:var(--ink);padding:10px 12px;border-radius:8px;font:15px var(--sans)}
.search input:focus{outline:none;border-color:var(--gold)}
.results{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#111317;border:1px solid #33363b;border-radius:8px;max-height:60vh;overflow:auto;display:none;z-index:40}
.results.open{display:block}
.results button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #1d2024;color:var(--ink);padding:8px 12px;font:14px var(--sans);cursor:pointer}
.results button:hover,.results button.sel{background:#1b1e23;color:var(--gold-2)}
.results small{color:var(--dim);display:block}
.zoom{display:flex;gap:6px;align-items:center}
.zoom input{width:120px;accent-color:var(--gold)}
.jump{display:flex;gap:6px;flex-wrap:wrap}
.jump .btn{padding:7px 10px;font-size:13px}
.hint{color:var(--dim);font-size:12px;width:100%;text-align:center;margin:0}

#scroller{position:relative;overflow:auto;height:min(78vh,900px);background:
  linear-gradient(#1c2a1e,#121a14 22px,var(--walk) 23px,#2c2d2f 100%);cursor:grab;overscroll-behavior:contain;scrollbar-color:#444 #111}
#scroller.drag{cursor:grabbing;user-select:none}
#wall{position:relative;display:flex;align-items:flex-start;padding:0 40vw;margin-top:22px;font-size:6px}
.panel{flex:0 0 auto;width:76em;position:relative;padding:1.4em 1.6em 2.8em;
  background:
   radial-gradient(120% 60% at 30% 10%,rgba(255,255,255,.05),transparent 60%),
   linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,0) 35%,rgba(255,255,255,.02) 70%,rgba(0,0,0,.15)),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .57 0 0 0 0 .6 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
   var(--granite);
  border-right:1px solid #050506;box-shadow:inset 1px 0 0 rgba(255,255,255,.04);border-bottom:1px solid #000}
.panel.apex-l{box-shadow:inset 1px 0 0 rgba(255,255,255,.04),inset -6px 0 10px -6px rgba(0,0,0,.9)}
.pno{position:absolute;left:0;right:0;bottom:.8em;text-align:center;font-family:var(--wallfont);font-size:1.25em;letter-spacing:.2em;color:#8d9298}
.ln{height:1.42em;display:flex;justify-content:space-between;align-items:center;white-space:nowrap;font-family:var(--wallfont);text-transform:uppercase;letter-spacing:.04em}
.ln.one{justify-content:flex-start}
.nm{color:#aeb3b9;cursor:pointer;padding:0 .15em;border-radius:.2em;transition:color .15s,text-shadow .15s}
.engr .nm{text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.07)}
.nm:hover,.nm:focus,.nm.hl{color:var(--gold-2);text-shadow:0 0 .35em rgba(232,196,106,.85),0 0 1.2em rgba(232,196,106,.45);outline:none}
.nm.found{color:#fff3c8;text-shadow:0 0 .4em #e8c46a,0 0 1.4em #e8c46a;animation:pulse 1.6s ease-in-out 4}
@keyframes pulse{50%{text-shadow:0 0 .2em #e8c46a,0 0 .5em rgba(232,196,106,.3)}}
.inscr{font-family:var(--wallfont);text-transform:uppercase;color:#aeb3b9;font-size:1.05em;line-height:1.42em;letter-spacing:.06em;text-align:center;padding:0 2em}
.ph{color:#555a60}
#tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;
  background:rgba(14,15,18,.97);border:1px solid #5b4a22;border-radius:10px;padding:10px 14px;max-width:320px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#tip.on{opacity:1;transform:none}
#tip.touch{pointer-events:auto}
#tip b{display:block;font-family:var(--wallfont);text-transform:uppercase;letter-spacing:.06em;color:var(--gold-2);font-size:16px;font-weight:500}
#tip span{display:block;color:var(--muted);font-size:13px}
#tip em{display:block;color:var(--dim);font-size:12px;font-style:normal;margin-top:4px}
#tip a{pointer-events:auto}
.intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:34px}
.intro h2{font-size:24px;margin:0 0 6px}
.intro p{color:var(--muted);margin:0 0 10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:28px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.stat b{display:block;font-family:var(--serif);font-size:30px;color:var(--gold);font-weight:500}
.stat span{color:var(--muted);font-size:13px}

/* ---------- Profile ---------- */
.crumbs{font-size:13px;color:var(--dim);margin:18px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.pf-head{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:start;margin:22px 0 10px}
.portrait{width:150px;aspect-ratio:4/5;border-radius:10px;border:1px solid #2b2e33;background:linear-gradient(160deg,#16191d,#0d0f12);display:grid;place-items:center;overflow:hidden}
.portrait svg{width:72%;opacity:.9}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.pf-head h1{font-family:var(--wallfont);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:clamp(26px,4.2vw,40px);margin:0;color:var(--ink)}
.pf-sub{color:var(--muted);font-size:17px;margin:4px 0 0}
.pf-dates{font-family:var(--serif);font-size:20px;color:var(--ink);margin:8px 0 0}
.badge{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #4a3d1d;color:var(--gold);border-radius:999px;padding:2px 10px;margin-top:10px}
.lead{font-family:var(--serif);font-size:21px;line-height:1.55;color:#d9d6cf;margin:18px 0 6px;max-width:780px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.box h2{font-size:20px;margin:0 0 10px;color:var(--ink)}
dl.rec{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:15px}
dl.rec dt{color:var(--dim)}
dl.rec dd{margin:0;color:var(--ink)}
.locator{position:relative;margin:6px 0 4px}
.locator img{width:100%;height:auto;display:block;opacity:.95}
.locator i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(232,196,106,.35),0 0 14px var(--gold);transform:translate(-50%,-50%)}
.where{font-family:var(--serif);font-size:22px;color:var(--gold-2);margin:4px 0}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.names{list-style:none;padding:0;margin:0;columns:2;column-gap:20px;font-size:14px}
.names li{break-inside:avoid;margin:0 0 6px}
.names a{color:var(--ink);text-decoration:none}
.names a:hover{color:var(--gold)}
.names small{color:var(--dim);display:block}
.candle{display:flex;align-items:center;gap:14px}
.flame{width:26px;height:44px;position:relative;flex:0 0 auto}
.flame:before{content:"";position:absolute;left:7px;bottom:0;width:12px;height:24px;background:linear-gradient(90deg,#cfc8b8,#f1ece0 45%,#bdb6a6);border-radius:2px}
.flame:after{content:"";position:absolute;left:6px;bottom:23px;width:14px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6d5,#f2b53a 55%,rgba(242,120,30,0) 72%);opacity:0;transition:opacity .4s}
.lit .flame:after{opacity:1;animation:flick 2.2s infinite ease-in-out}
@keyframes flick{50%{transform:scale(.92) rotate(-2deg)}}
.src{color:var(--dim);font-size:13px;margin-top:26px}
.src p{margin:4px 0}
.note{color:var(--muted);font-size:14px}
.list-state{columns:3;column-gap:24px;list-style:none;padding:0}
.list-state li{margin:0 0 6px}
.city h3{font-size:18px;margin:22px 0 6px;color:var(--gold-2)}
.prose{max-width:780px}
.prose p,.prose li{color:#cfccc5}
@media (max-width:720px){
  .brand small{white-space:normal;letter-spacing:.1em;font-size:10px}
  .top nav{margin-left:0;gap:12px}
  .hero{padding:16px 0 4px}.hero p{font-size:15px}
  .hint{display:none}
  .jump .btn{padding:6px 8px;font-size:12px}
  .pf-head{grid-template-columns:96px 1fr;gap:16px}
  .portrait{width:96px}
  .grid2{grid-template-columns:1fr}
  .names{columns:1}
  .list-state{columns:2}
  .lead{font-size:19px}
  #scroller{height:70vh}
}

/* ---------- 2026-11 redesign: photographs, context, features ---------- */
.kick{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.embed .top,.embed .foot,.embed .hero-photo{display:none}
.embed #scroller{height:min(70vh,760px)}

/* home hero slideshow */
.hero-photo{position:relative;min-height:min(78vh,720px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#000;isolation:isolate}
.hero-photo img.hs{position:absolute;inset:-6% 0 0 0;width:100%;height:112%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;transform:translateY(var(--shift,0));filter:grayscale(.15) contrast(1.05)}
.hero-photo img.hs.on{opacity:calc(.72 * var(--fade,1));animation:kb 14s ease-out both}
@keyframes kb{from{transform:translateY(var(--shift,0)) scale(1.08)}to{transform:translateY(var(--shift,0)) scale(1)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.35) 0%,rgba(10,11,13,.15) 40%,rgba(10,11,13,.92) 88%,var(--bg) 100%);z-index:1}
.hero-in{position:relative;z-index:2;padding-bottom:18px;text-align:center}
.hero-in h1{font-size:clamp(44px,9vw,104px);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero-in p{max-width:760px;margin:8px auto 0;color:#d9d8d4;font-size:18px;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero-go{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px!important}
.hero-cap{position:relative;z-index:2;color:#a7aab0;font-size:12px;text-align:center;margin:0 auto 6px;min-height:18px}
.hero-dots{position:relative;z-index:2;display:flex;gap:6px;justify-content:center;padding-bottom:14px}
.hero-dots button{width:22px;height:4px;border-radius:2px;border:0;background:#4a4d52;cursor:pointer;padding:0}
.hero-dots button.on{background:var(--gold)}

/* name page photo band */
.pf-bg{position:relative;margin:0;height:clamp(220px,38vh,380px);overflow:hidden;background:#000;cursor:zoom-in}
.pf-bg img{position:absolute;inset:-8% 0 0 0;width:100%;height:116%;object-fit:cover;opacity:calc(.6 * var(--fade,1));transform:translateY(var(--shift,0));filter:grayscale(.2)}
.pf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.1),rgba(10,11,13,.55) 60%,var(--bg))}
.pf-bg figcaption{position:absolute;left:0;right:0;top:12px;z-index:2;font-size:12px;color:#c9cbcf;text-align:right;text-shadow:0 1px 6px #000}
.pf-bg figcaption em{display:block;color:#9da1a7}
.pf-main{position:relative;z-index:3;margin-top:-150px}
.pf-main .crumbs a,.pf-main .crumbs{color:#cfd1d4}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}

/* Medal of Honor */
.moh-box{border-color:#6b5a2a;background:linear-gradient(180deg,#191610,#13161a)}
.moh-box h2{color:var(--gold-2)}
blockquote.citation{margin:14px 0;padding:6px 0 6px 18px;border-left:3px solid var(--gold);font-family:var(--serif);font-size:20px;line-height:1.55;color:#ece9e1}
blockquote.citation p{margin:0 0 10px}
i.medal{font-style:normal;color:var(--gold)}

/* context */
.ctx{margin-top:18px}
.ctx p{font-size:17px;line-height:1.7;color:#dcdad5;max-width:860px}
.ctx-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ctx-links h3{font-size:17px;margin:0 0 6px;color:var(--muted)}
.ctx-links ul{margin:0;padding-left:18px}
.ctx-links li{margin:4px 0;font-size:15px}

/* feature bands and cards */
.band{position:relative;min-height:clamp(260px,46vh,440px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#000;cursor:zoom-in}
.band img{position:absolute;inset:-8% 0 0 0;width:100%;height:116%;object-fit:cover;opacity:calc(.6 * var(--fade,1));transform:translateY(var(--shift,0))}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.15),rgba(10,11,13,.75) 70%,var(--bg))}
.band-in{position:relative;z-index:2;padding-bottom:6px;cursor:auto}
.band-in h1{font-size:clamp(34px,6vw,64px);margin:0;letter-spacing:.04em}
.band-in p{max-width:780px;color:#d9d8d4;font-size:17px;margin:6px 0 0}
.band-cap{position:relative;z-index:2;font-size:12px;color:#a2a5aa;margin:6px auto 14px}
.sec-h{font-size:32px;margin:40px 0 12px}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.fcard{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#000;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform .6s ease,opacity .4s}
.fcard:hover img,.fcard:focus img{transform:scale(1.06);opacity:.8}
.fcard span{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));display:flex;flex-direction:column}
.fcard small{color:var(--gold);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.fcard b{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.15}
.fcard em{font-style:normal;color:#c9cbcf;font-size:14px}
.ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:10px 0}
.ncard{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card);text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.ncard:hover{border-color:var(--gold);transform:translateY(-2px)}
.ncard-pic{flex:0 0 56px;height:70px;border-radius:6px;overflow:hidden;background:#0d1014;display:flex;align-items:center;justify-content:center}
.ncard-pic img{width:100%;height:100%;object-fit:cover}
.ncard-pic svg{width:44px}
.ncard-t{display:flex;flex-direction:column;min-width:0}
.ncard-t b{font-family:var(--wallfont);letter-spacing:.04em;font-weight:500;font-size:15px}
.ncard-t small{color:var(--muted);font-size:13px}
.today{margin:34px 0 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#13161a,#0d0f12)}
.today-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.today-h h2{margin:0;font-size:30px}
.today-h a{margin-left:auto;font-size:14px}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:16px 0}
.tools input{background:#111317;border:1px solid #33363b;color:var(--ink);padding:9px 12px;border-radius:8px;font:15px var(--sans);min-width:260px}
.tools label{color:var(--muted)}
.tools span{color:var(--dim);font-size:14px}
.acts{display:flex;gap:8px;flex-wrap:wrap}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,6,8,.96);display:none;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.lb.on{display:flex}
.lb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-stage img{max-width:100%;max-height:82vh;transition:transform .15s ease;touch-action:none;cursor:grab}
.lb-cap{color:#c9cbcf;font-size:14px;max-width:900px;text-align:center;margin:8px 0 0}
.lb-hint{color:#6f747a;font-size:12px;margin:4px 0 0}
.lb-x{position:absolute;top:10px;right:14px;background:none;border:0;color:#fff;font-size:38px;cursor:pointer;line-height:1}
@media (max-width:640px){
  .pf-main{margin-top:-90px}
  .hero-in p{font-size:16px}
  .pf-bg figcaption em{display:none}
  .tools input{min-width:0;width:100%}
}