
:root{
  --bg:#0b1e2a; --panel:#0f2a3a; --panel2:#0e2736;
  --ink:#e9f6f2; --muted:#9fb6c2; --accent1:#aaf3de; --accent2:#a7d8ff;
  --border:#1c3c4d;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.65}
a{color:#bfe6ff;text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1040px;margin:0 auto;padding:20px}
/* Header with rectangular sub-logo badge */
header.site{position:sticky;top:0;z-index:1000;background:rgba(10,25,35,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:60px;height:auto;mix-blend-mode:lighten;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.brand-badge{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,#122e3d,#0d2533)}
.badge-top{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#bfe6ff}
.badge-bottom{font-size:18px;font-weight:900;background:linear-gradient(90deg,#bff5e6,#b1daff);
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.4px}
.menu-btn{border:1px solid #244a5b;background:#0f2736;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.menu-btn span{display:block;width:22px;height:2px;background:#e6f4f6;border-radius:2px}
nav.drawer{position:fixed;top:0;right:0;height:100vh;width:min(86vw,380px);background:#0d2230;border-left:1px solid #1a3f52;
  transform:translateX(100%);transition:transform .25s ease;z-index:2001;overflow:auto;padding:16px}
nav.drawer.open{transform:none}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:2000}
nav.drawer a{display:block;margin:10px 0;border:1px solid #1a3f52;border-radius:12px;padding:12px 14px;background:#0f2937}
/* Hero */
.hero{padding:28px 20px;text-align:center}
.hero img{width:246px;height:auto;display:block;margin:0 auto 6px} /* spacing tweak from v6.1 */
.hero h1{font-size:40px;margin:8px 0 6px}
.hero .sub{color:var(--muted);max-width:820px;margin:0 auto}
/* Cards */
.section{background:var(--panel2);border:1px solid var(--border);border-radius:18px;padding:18px;margin:24px 0}
.badge{display:inline-block;background:#1a3b49;color:#d7eef3;border:1px solid #264f61;border-radius:999px;padding:5px 10px;font-weight:700;font-size:12px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#0a2230;border:1px solid #99c8ff;border-radius:14px;
  padding:12px 16px;font-weight:800;margin-top:8px}
/* Article head */
.article-head{background:#0d2533;border-bottom:1px solid rgba(255,255,255,.08)}
.article-head .kicker{text-align:center;letter-spacing:.18em;text-transform:uppercase;color:#a8d9ff;font-weight:800;font-size:12px;margin-top:12px}
.article-head h1{text-align:center;margin:4px 0 6px;font-size:42px;font-weight:900}
.dateline{text-align:center;margin:0 0 12px}
.dateline .t1{font-weight:900}
.dateline .t2{font-weight:900;font-style:italic}
/* Map + quick facts */
.map-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0c2130}
.quick{background:#0f2a3a;border:1px solid var(--border);border-radius:14px;padding:12px;margin-top:12px}
.quick h3{margin:0 0 6px}.quick ul{margin:0;padding-left:18px;color:#d0e4ee}
/* Newspaper-style photo blocks */
.photo-block{margin:18px 0 26px;overflow:auto}
.photo-block img{max-width:44%;height:auto;border-radius:12px;border:1px solid #17394a;background:#0c2130}
.photo-block.float-left img{float:left;margin:0 16px 10px 0}
.photo-block.float-right img{float:right;margin:0 0 10px 16px}
.photo-caption{font-size:14px;color:#cfe2ea;margin:6px 0 0}
.photo-block h3{margin:0 0 8px}
.photo-block p{margin:0 0 10px}
/* Footer */
footer.site{margin-top:26px;padding:16px 0;border-top:1px solid #0f2b3a;background:#0b1a24}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{width:26px;height:auto}
.footer-title{font-weight:800;background:linear-gradient(90deg,#ccffe9,#a9d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
