:root{
  --midnight:#0E1B2B; --gold:#CFAF56; --teal:#1C8A9E; --silver:#C4C7CC; --ember:#E27A3F;
  --page-bg:var(--midnight); --text:#E7EDF3; --maxw:1200px;
  /* existing vars ... */
  --logo-w: 300px;    /* Logo width */
  --logo-y: 25px;      /* move logo UP/DOWN (-up / +down) */
  --logo-x: -100px;      /* move logo left/right (-left, +right) */
  --hero-pad-i: 20px; /* left/right padding inside the hero band */

  /* Set URLs directly in variables (no quotes) */
  --hero-3840: url(/assets/img/hero/hero_strip_3840x320_overlay.jpg);
  --hero-2560: url(/assets/img/hero/hero_strip_2560x260_overlay.jpg);
  --hero-1920: url(/assets/img/hero/hero_strip_1920x220_overlay.jpg);
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}

/* Thin cinematic header */
.hero{
  position:relative;
  height:clamp(150px,22vh,280px);
  background-image: var(--hero-1920);
  background-size:cover;
  background-position:50% 48%;
  display:flex; align-items:center;
}
@media(min-width:1921px){ .hero{ background-image: var(--hero-2560); } }
@media(min-width:2561px){ .hero{ background-image: var(--hero-3840); } }
.hero__inner{
  width:100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding:14px var(--hero-pad-i);
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 6px;
}
.brand__crest{
  width: var(--logo-w);
  height:auto;
  display:block;
  transform: translate(var(--logo-x), var(--logo-y));
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
.tagline{
  font-family:Cinzel,serif;
  color:var(--silver);
  opacity:.9;
  font-size:clamp(12px,1.2vw,14px)
}

/* Divider */
.divider{ display:flex; justify-content:center; padding:6px 0; background:transparent }
.divider img{ width:min(100%,1200px); height:auto; filter: drop-shadow(0 0 10px rgba(207,175,86,.35)); }

/* Nav bar */
.navwrap{ background: var(--page-bg); border-bottom:1px solid rgba(196,199,204,.15); }
.nav{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
}
.nav a, .nav__btn{
  font-family:Cinzel,serif; font-weight:700; letter-spacing:.04em;
  padding:10px 16px; border:1px solid rgba(207,175,86,.35); border-radius:999px;
  color:var(--gold); background:rgba(255,255,255,.02); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease;
}
.nav a:hover, .nav__btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 0 12px rgba(28,138,158,.25);
  color:#fff; border-color:var(--teal);
}

/* Dropdowns */
.nav__group{ position:relative }
.nav__menu{
  position:absolute; top:110%; left:50%; transform:translateX(-50%); min-width:260px;
  background:rgba(14,27,43,.98); border:1px solid rgba(196,199,204,.15); border-radius:14px; padding:10px; display:none; z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.nav__menu a{ display:block; padding:10px 12px; border-radius:10px; color:var(--silver); border:none }
.nav__menu a:hover{ background:rgba(28,138,158,.18); color:#fff }
.nav__menu.open{ display:block }

/* Content */
.content{ max-width:var(--maxw); margin:28px auto 80px; padding:0 20px; display:grid; gap:24px }
.panel{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(196,199,204,.12);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  padding:clamp(16px,2.4vw,24px);
}
.panel h1{ font-family:Cinzel,serif; color:var(--gold); margin:0 0 10px }
.featuregrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px }
.card{ display:block; padding:14px; border:1px solid rgba(196,199,204,.15); border-radius:14px; color:var(--text); background:rgba(255,255,255,.02) }
.card:hover{ border-color:var(--teal); box-shadow:0 10px 24px rgba(0,0,0,.35) }

footer{
  border-top:1px solid rgba(196,199,204,.12);
  color:var(--silver); opacity:.9; text-align:center;
  padding:28px 20px 46px; font-size:14px;
}

/* Arhden banner header (Oct 31, 2026) - the banner image already contains the logo and title */
.hero--banner{
  height:auto;
  background:#0a0e16;
  background-image:none;
  display:block;
  text-align:center;
  padding:0 0 10px;
}
.hero__banner{
  display:block;
  width:100%;
  max-width:1600px;
  aspect-ratio:1024/339;
  object-fit:cover;
  margin:0 auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.hero__tagline{margin-top:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}