:root{
  --navy-0:#05132d;
  --navy-1:#0d2951;
  --navy-2:#1f4c8f;
  --navy-deep:#04122c;
  --navy-foot:#0e2954;
  --ink:#12386b;
  --blue:#2a80d5;
  --blue-lt:#4cacf9;
  --gold:#f1b806;
  --gold-2:#dcb623;
  --sky:#b9d4f2;
  --pill-bg:#eff5fc;
  --pill-br:#d3e3f5;
  --panel:#f0f5fb;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Lato',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
img{max-width:100%;}
a{color:inherit;}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:#12386b;
  padding:10px 16px; z-index:200; font-weight:700;
}
.skip:focus{left:8px; top:8px;}

/* ---------------- NAV ---------------- */
.topnav{
  position:sticky; top:0; z-index:100;
  background:rgba(6,20,45,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(122,168,224,.22);
}
.navwrap{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:18px; min-height:56px;
}
.navbrand{
  font-weight:900; letter-spacing:.12em; color:#fff; text-decoration:none; font-size:15px;
}
.navlinks{margin-left:auto; display:flex; align-items:center; gap:26px;}
.navlinks a{
  color:#cfe0f5; text-decoration:none; font-size:14px; font-weight:400; letter-spacing:.02em;
  padding:6px 0; border-bottom:2px solid transparent;
}
.navlinks a:hover{color:#fff; border-bottom-color:var(--gold);}
.navlinks a.navcta{
  background:var(--gold); color:#0d2951; font-weight:700; padding:8px 16px; border-radius:3px;
  border-bottom:none; letter-spacing:.03em;
}
.navlinks a.navcta:hover{background:#ffc82b; color:#0d2951;}
.navtoggle{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:14px 4px;
}
.navtoggle span, .navtoggle span::before, .navtoggle span::after{
  content:''; display:block; width:24px; height:2px; background:#dbe8f8; position:relative;
}
.navtoggle span::before{position:absolute; top:-7px;}
.navtoggle span::after{position:absolute; top:7px;}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--navy-0) 0%, var(--navy-1) 45%, var(--navy-2) 100%);
  color:#fff;
  padding:34px 0 54px;
}
.hexes{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.hero-inner{position:relative; z-index:2; text-align:center;}

.topline{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:13.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
.topline .publisher{color:#e8f0fb;}
.topline .issn{color:#cfe0f5; font-weight:400; letter-spacing:.08em; text-transform:none; font-size:14.5px;}
.topline-rule{
  height:1px; margin:14px 0 0;
  background:linear-gradient(90deg, rgba(150,190,235,.55), rgba(150,190,235,.12));
}

.emblem{
  display:block; margin:26px auto 20px; width:min(370px,62vw); height:auto;
}

.kicker{
  margin:0; font-size:clamp(15px,2.2vw,25px); font-weight:700;
  letter-spacing:.30em; text-transform:uppercase; color:#cfe0f5;
}
.gold-rule{
  width:min(270px,42vw); height:3px; margin:16px auto 22px;
  background:linear-gradient(90deg, rgba(241,184,6,.15), var(--gold-2) 25%, var(--gold-2) 75%, rgba(241,184,6,.15));
}

.journal-title{margin:0; font-weight:900; line-height:1.12; letter-spacing:.005em;}
.journal-title span{display:block; text-transform:uppercase;}
.journal-title .t1{font-size:clamp(26px,5.4vw,60px);}
.journal-title .t2{font-size:clamp(21px,4.3vw,48px);}

/* ---------------- DIVIDER ---------------- */
.divider{
  height:6px;
  background:linear-gradient(90deg, var(--blue) 0%, var(--blue-lt) 48%, var(--gold-2) 100%);
}

/* ---------------- LIGHT SECTION ---------------- */
.light{
  background:linear-gradient(180deg, #d3e5f5 0%, #ffffff 16%, #ffffff 100%);
  padding:44px 0 56px;
}
.strapline{
  margin:0 0 34px; text-align:center; font-weight:700;
  font-size:clamp(15px,2vw,19.5px); color:#123a6b; letter-spacing:.01em;
}

.pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; margin-bottom:38px;
}
.pills span{
  background:var(--pill-bg); border:1px solid var(--pill-br); border-radius:999px;
  padding:9px 20px; font-size:15px; font-weight:700; color:#1c4e8f; white-space:nowrap;
}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:34px;}
.card{
  background:#fff; border:1px solid #e4ecf5; border-top:3px solid var(--blue);
  border-radius:5px; padding:26px 20px 24px; text-align:center;
  box-shadow:0 1px 3px rgba(18,56,107,.05);
}
.card .icon{height:70px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.card .icon svg{height:66px; width:auto;}
.card h3{margin:0 0 8px; font-size:22px; font-weight:700; color:#123a6b;}
.card p{margin:0; font-size:15.5px; line-height:1.6; color:#5a6c82; font-weight:400;}

.aim{
  background:var(--panel); border-left:5px solid var(--gold);
  padding:20px 26px 22px; text-align:center; border-radius:0 4px 4px 0;
}
.aim h2{
  margin:0 0 8px; font-size:17px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:#1c4e8f;
}
.aim p{margin:0; font-size:16px; color:#3f5875; line-height:1.6;}

/* ---------------- FOOTER ---------------- */
.foot{
  background:linear-gradient(135deg, var(--navy-deep) 0%, #0a2044 55%, var(--navy-foot) 100%);
  color:#cfe0f5; padding:34px 0 30px; text-align:center;
}
.badges{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:26px;}
.badges span{
  border:1px solid rgba(150,190,235,.42); border-radius:999px;
  padding:8px 20px; font-size:14.5px; font-weight:700; color:#e4eefb; white-space:nowrap;
}
.site{margin:0 0 4px; font-size:clamp(18px,2.6vw,25px); font-weight:900; letter-spacing:.02em;}
.site a{color:#fff; text-decoration:none;}
.site a:hover{color:var(--gold);}
.mail{margin:0; font-size:clamp(14px,1.8vw,17px); font-weight:300; color:#cfe0f5;}
.mail a{color:inherit; text-decoration:none;}
.mail a:hover{color:var(--gold);}
.foot-rule{
  height:1px; max-width:520px; margin:24px auto 18px;
  background:linear-gradient(90deg, rgba(150,190,235,.06), rgba(150,190,235,.45), rgba(150,190,235,.06));
}
.pub{margin:0 0 4px; font-size:15.5px; font-weight:700; color:#b9cfe9; letter-spacing:.02em;}
.copy{margin:0; font-size:13.5px; color:#8fabcd; letter-spacing:.02em;}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:860px){
  .cards{grid-template-columns:1fr; gap:16px;}
  .navtoggle{display:block;}
  .navlinks{
    display:none; order:3; width:100%; flex-direction:column; align-items:flex-start;
    gap:0; padding-bottom:10px;
  }
  .topnav.open .navlinks{display:flex;}
  .navlinks a{width:100%; padding:11px 0; border-bottom:1px solid rgba(122,168,224,.15);}
  .navlinks a.navcta{margin-top:10px; text-align:center;}
}
@media (max-width:560px){
  .wrap, .navwrap{padding:0 18px;}
  .topline{flex-direction:column; align-items:center; gap:6px; text-align:center;}
  .topline .publisher{font-size:12px;}
  .topline .issn{font-size:13px;}
  .hero{padding:26px 0 40px;}
  .pills{gap:9px 10px;}
  .pills span{padding:8px 15px; font-size:13.5px;}
  .badges span{padding:7px 15px; font-size:13px;}
  .aim{padding:18px 18px 20px;}
}

@media print{
  .topnav,.skip{display:none;}
  .hero,.foot{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}