@font-face{font-family:system;src:local("Arial")} :root{
  --bg:#050910;--bg2:#07111f;--panel:#0b1727;--panel2:#101d30;
  --red:#9e1f1a;--red2:#d3302f;--gold:#c89b3c;--gold2:#f4d27b;
  --cream:#f8f1e7;--muted:rgba(248,241,231,.76);--soft:rgba(248,241,231,.52);
  --line:rgba(244,210,123,.26);--shadow:rgba(0,0,0,.55);--max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--cream);background:
  radial-gradient(circle at 18% 0%,rgba(211,48,47,.24),transparent 30rem),
  radial-gradient(circle at 100% 8%,rgba(200,155,60,.18),transparent 24rem),
  linear-gradient(180deg,#02050a 0%,var(--bg2) 48%,#03050a 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 82%);
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit}
.skip-link{position:absolute;left:-9999px;top:1rem;background:var(--gold2);color:#07111f;padding:.8rem 1rem;border-radius:999px;z-index:1000}
.skip-link:focus{left:1rem}
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:70px;padding:10px max(16px,calc((100vw - var(--max))/2));
  background:rgba(3,7,13,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand img{width:46px;height:46px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.38))}
.brand span{display:grid;line-height:1.05}
.brand strong{text-transform:uppercase;letter-spacing:.035em;font-weight:950}
.brand em{font-style:normal;color:var(--gold2);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.topnav{display:flex;gap:.4rem}
.topnav a{padding:.7rem .85rem;border-radius:999px;color:var(--muted);border:1px solid transparent}
.topnav a:hover{color:var(--cream);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.hero{position:relative;overflow:hidden;padding:clamp(18px,4vw,46px) 0 38px}
.hero-bg{
  position:absolute;inset:0;opacity:.22;background:url("../img/captain-alaaf-hero.webp") center/cover no-repeat;
  filter:blur(18px) saturate(1.15);transform:scale(1.07);mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.hero-inner{position:relative;z-index:1;width:min(var(--max),calc(100% - 28px));margin:auto;display:grid;gap:clamp(18px,4vw,42px);grid-template-columns:minmax(280px,.72fr) minmax(320px,.9fr);align-items:center}
.hero-poster{
  margin:0;overflow:hidden;border:1px solid rgba(244,210,123,.34);border-radius:30px;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:0 34px 110px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.04) inset;
}
.hero-poster img{width:100%;height:auto;border-radius:22px}
.hero-copy{align-self:center}
.eyebrow{margin:0 0 .7rem;color:var(--gold2);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;font-weight:900}
h1,h2,h3,p{overflow-wrap:break-word}
.hero h1,.bio-hero h1,.section-head h2,.bio-card h2,.article-card h2,.image-feature h2,.single-card h1{
  margin:.2rem 0 .85rem;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;text-transform:uppercase;letter-spacing:.018em;line-height:.9;
  text-shadow:0 5px 0 rgba(158,31,26,.66),0 24px 54px rgba(0,0,0,.55);
}
.hero h1{font-size:clamp(3rem,9vw,7.8rem)}
.hero h1 span{color:var(--gold2)}
.hero p:not(.eyebrow),.section-head p,.bio-card p,.article-card p,.image-feature p,.single-card p{color:var(--muted);line-height:1.62;font-size:clamp(1rem,1.4vw,1.18rem)}
.hero-actions,.clip-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.15rem}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.82rem 1.04rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.075);color:var(--cream);font-weight:850;cursor:pointer;
  box-shadow:0 15px 34px rgba(0,0,0,.22);transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.button:hover{transform:translateY(-1px);border-color:rgba(244,210,123,.52)}
.button:active{transform:translateY(1px)}
.button.primary{background:linear-gradient(135deg,var(--red2),var(--red) 62%,#5e100d);border-color:rgba(244,210,123,.42)}
.button.ghost{background:rgba(7,17,31,.68)}
.button.small{min-height:42px;padding:.65rem .86rem;font-size:.9rem}
.clips-section{width:min(var(--max),calc(100% - 28px));margin:0 auto;padding:36px 0 68px}
.section-head{max-width:780px;margin-bottom:1.1rem}
.section-head h2,.bio-card h2{font-size:clamp(2.4rem,7vw,5.4rem)}
.rail-wrap{position:relative}
.clip-rail{
  display:flex;gap:clamp(14px,3vw,24px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100vw - min(var(--max),100vw))/2);
  padding:8px 0 20px;scrollbar-width:thin;scrollbar-color:var(--gold) rgba(255,255,255,.08);
}
.clip-card{
  flex:0 0 min(82vw,390px);scroll-snap-align:center;overflow:hidden;border:1px solid rgba(244,210,123,.28);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  box-shadow:0 26px 78px rgba(0,0,0,.42);transform:translateZ(0);
}
.clip-media{background:#02060b;border-bottom:1px solid var(--line)}
.clip-media video,.clip-media img{width:100%;aspect-ratio:9/16;object-fit:contain;background:#02060b}
.clip-body{padding:16px 16px 18px;background:linear-gradient(180deg,rgba(7,17,31,.97),rgba(5,10,18,.98))}
.clip-meta{display:flex;justify-content:space-between;gap:.7rem;color:var(--gold2);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900}
.clip-card h3,.single-card h1{margin:.62rem 0 .42rem;font-size:clamp(2rem,6vw,3.75rem)}
.clip-card h3{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;text-transform:uppercase;line-height:.92;text-shadow:0 4px 0 rgba(158,31,26,.65)}
.clip-card p{margin:.35rem 0;color:var(--muted);line-height:1.48}
.rail-btn{
  position:absolute;top:42%;z-index:6;width:46px;height:46px;border-radius:999px;border:1px solid rgba(244,210,123,.34);background:rgba(5,10,18,.76);
  color:var(--cream);font-size:2rem;line-height:1;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px);box-shadow:0 18px 38px rgba(0,0,0,.35)
}
.rail-btn.prev{left:-12px}.rail-btn.next{right:-12px}
.rail-dots{display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
.rail-dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(248,241,231,.28);padding:0;cursor:pointer}
.rail-dots button.is-active{width:28px;background:var(--gold2)}
.bio-teaser{width:min(var(--max),calc(100% - 28px));margin:0 auto;padding:0 0 76px}
.bio-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.58fr);gap:clamp(18px,4vw,42px);align-items:center;border:1px solid var(--line);
  border-radius:34px;padding:clamp(18px,4vw,38px);background:linear-gradient(145deg,rgba(158,31,26,.18),rgba(255,255,255,.035));box-shadow:0 28px 80px rgba(0,0,0,.35)
}
.bio-card img{border-radius:24px;border:1px solid rgba(244,210,123,.22)}
.footer{
  min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:min(var(--max),calc(100% - 28px));margin:auto;padding:28px 0;
  color:var(--soft);border-top:1px solid var(--line)
}
.footer nav{display:flex;gap:1rem;flex-wrap:wrap}
.footer a:hover{color:var(--cream)}
.toast{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:100;transform:translate(-50%,130%);
  background:rgba(5,10,18,.96);border:1px solid var(--line);border-radius:999px;padding:.88rem 1.05rem;color:var(--cream);box-shadow:0 20px 60px rgba(0,0,0,.5);transition:transform .22s ease
}
.toast.is-visible{transform:translate(-50%,0)}
.bio-page{width:min(var(--max),calc(100% - 28px));margin:auto}
.bio-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.56fr);gap:clamp(18px,4vw,46px);align-items:center;padding:clamp(28px,6vw,70px) 0}
.bio-hero h1{font-size:clamp(3rem,8vw,7rem)}
.bio-hero img{border-radius:30px;border:1px solid var(--line);box-shadow:0 30px 100px rgba(0,0,0,.48)}
.content-section{padding:22px 0 54px}
.article-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.article-card{border:1px solid var(--line);border-radius:28px;padding:clamp(18px,3vw,30px);background:rgba(255,255,255,.045)}
.article-card.large{grid-row:span 2}
.article-card h2{font-size:clamp(2.2rem,6vw,4.7rem)}
.article-card h3{margin-top:0;font-size:1.35rem;color:var(--gold2)}
.article-card li{margin:.55rem 0;color:var(--muted)}
.image-feature{display:grid;grid-template-columns:minmax(260px,.58fr) 1fr;gap:clamp(18px,4vw,42px);align-items:center;border:1px solid var(--line);border-radius:32px;padding:clamp(16px,3vw,26px);background:rgba(255,255,255,.04)}
.image-feature.reverse{grid-template-columns:1fr minmax(260px,.58fr)}
.image-feature.reverse img{order:2}
.image-feature img{border-radius:22px}
.image-feature h2{font-size:clamp(2.2rem,6vw,4.7rem)}
.single-clip{width:min(720px,calc(100% - 28px));margin:auto;padding:28px 0 72px}
.backlink{margin-bottom:18px}
.single-card{border:1px solid var(--line);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.045);box-shadow:0 30px 90px rgba(0,0,0,.42)}
.single-card .clip-body{padding:22px}
@media (max-width:860px){
  .topbar{min-height:64px}.brand em{display:none}.topnav a{padding:.58rem .7rem}
  .hero-inner,.bio-card,.bio-hero,.article-grid,.image-feature,.image-feature.reverse{grid-template-columns:1fr}
  .hero-poster{order:0}.hero-copy{order:1}.hero h1{font-size:clamp(3rem,14vw,5.7rem)}
  .clip-card{flex-basis:min(86vw,390px)}
  .rail-btn{display:none}
  .image-feature.reverse img{order:0}
}
@media (max-width:560px){
  .topbar{padding-inline:12px}.brand strong{font-size:.96rem}.brand img{width:40px;height:40px}
  .hero{padding-top:16px}.hero-inner,.clips-section,.bio-teaser,.bio-page,.footer,.single-clip{width:calc(100% - 20px)}
  .hero-poster,.clip-card,.bio-card,.article-card,.image-feature,.single-card{border-radius:24px}
  .hero-poster{padding:7px}.hero-poster img{border-radius:18px}
  .clip-card{flex-basis:88vw}.clip-body{padding:14px}
  .clip-actions .button{flex:1}
}


/* --- responsive image hardening for Captain Alaaf character bible update --- */
.hero-poster img,
.bio-hero img,
.bio-card img,
.image-feature img,
.article-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-poster,
.bio-hero,
.bio-card,
.image-feature,
.article-card {
  min-width: 0;
}

.origin-card {
  max-width: none;
}

.origin-card h2 {
  font-size: clamp(2.2rem, 6vw, 4.9rem);
}

@media (max-width: 860px) {
  .hero-inner {
    align-items: start;
  }

  .hero-poster {
    max-width: min(520px, 100%);
    margin-inline: auto;
  }

  .bio-hero img,
  .image-feature img,
  .bio-card img {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .hero-copy p:not(.eyebrow),
  .section-head p,
  .bio-card p,
  .article-card p,
  .image-feature p,
  .single-card p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .bio-hero {
    padding-top: 24px;
  }

  .article-card li {
    line-height: 1.45;
  }
}


/* --- Character-profile update / responsive image hardening --- */
.hero-poster,
.bio-hero img,
.bio-card img,
.image-feature img {
  overflow:hidden;
}

.hero-poster img,
.bio-hero img,
.bio-card img,
.image-feature img {
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
}

.hero-poster img {
  aspect-ratio:auto;
}

.clip-media video,
.single-card .clip-media video {
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  object-fit:contain;
  object-position:center;
  background:#02060b;
}

.profile-facts dl {
  margin:0;
  display:grid;
  gap:.85rem;
}

.profile-facts dt {
  color:var(--gold2);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.76rem;
}

.profile-facts dd {
  margin:0;
  color:var(--muted);
  line-height:1.48;
}

.power-list {
  margin:1rem 0;
  padding-left:1.1rem;
}

.power-list li {
  margin:.75rem 0;
  color:var(--muted);
  line-height:1.55;
}

.origin-card,
.final-bio-cta .article-card {
  max-width:960px;
  margin-inline:auto;
}

.origin-card h2,
.final-bio-cta h2 {
  font-size:clamp(2.3rem,6vw,5.2rem);
}

.article-card strong,
.image-feature strong {
  color:var(--cream);
}

@media (max-width:860px) {
  .hero-poster {
    max-width:min(560px,100%);
    margin-inline:auto;
  }

  .bio-hero img,
  .bio-card img,
  .image-feature img {
    max-height:none;
  }

  .bio-card img {
    order:-1;
  }
}

@media (max-width:560px) {
  .hero-poster {
    border-radius:22px;
  }

  .bio-hero img,
  .bio-card img,
  .image-feature img {
    border-radius:18px;
  }

  .article-card,
  .image-feature {
    padding:16px;
  }

  .profile-facts dl {
    gap:.7rem;
  }
}