:root{
  --bg:#0b0d12; --card:#121520; --text:#e7ecf3; --muted:#9aa4b2;
  --brand:#6aa2ff; --brand-2:#9a6bff; --border:#232838;

  /* One source of truth for hero logo width (landing + series detail) */
  --hero-logo-width: clamp(260px, 50vw, 780px);
}

/* Base */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
a{ color:var(--brand); text-decoration:none }
.container{ width:min(1100px,92%); margin-inline:auto }

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(11,13,18,.7); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px }
.brand-logo{ height:28px; width:auto; border-radius:6px }
.nav a{ margin-left:18px; color:var(--text); opacity:.9 }
.nav a:hover{ opacity:1 }

/* Hero (Home) */
.hero{ position:relative; padding:80px 0 }
.hero-inner{ display:grid; grid-template-columns:1fr; gap:24px }

/* Logo replaces H1 visually on the home hero */
.hero-title{ margin:0 0 8px; line-height:1; display:block }
.hero-logo{
  display:block;
  width:var(--hero-logo-width);
  max-width:100%;
  height:auto;
  margin:0 0 12px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.hero-copy h1{ margin:0 0 8px }
.tagline{ font-weight:600; color:var(--muted); margin:0 0 10px }
.intro{ max-width:60ch; margin:0 0 18px }

/* Buttons */
.btn{ display:inline-block; padding:12px 18px; border-radius:10px; border:1px solid var(--border) }
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none }
.btn-ghost{ color:var(--text); background:transparent }

/* Sections */
.about,.series,.contact{ padding:48px 0 }
h2{ font-size:clamp(22px,3vw,32px); margin:0 0 14px }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:12px }
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid var(--border); border-radius:14px; padding:18px;
}
.card .muted{ color:var(--muted); margin-top:-6px }
.logo{ max-height:56px; width:auto; margin-bottom:10px; opacity:.95 }

/* Footer */
.site-footer{ border-top:1px solid var(--border); margin-top:48px }
.footer-inner{ padding:24px 0; color:var(--muted); font-size:14px }

/* ----- Series detail hero (logo as headline, responsive; mirrors landing) ----- */
.series-hero{ padding:56px 0; border-top:1px solid var(--border) }
.series-hero-inner{ max-width:1100px; margin:0 auto; text-align:left }

/* If a legacy inline logo exists, hide it */
.series-hero-logo{ display:none; }

/* Keep H1 wrapper for semantics; logo is the visual headline */
.series-hero-title{ margin:0 0 12px; line-height:1; display:block }
.series-hero-logo-head{
  display:block;
  width:var(--hero-logo-width);   /* EXACT match to landing hero */
  max-width:100%;
  height:auto;
  margin:0 0 12px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Visually hidden text (SEO/a11y) */
.visually-hidden{
  position:absolute !important; height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Lists */
.bullets{ margin:0; padding-left:18px }
.bullets li{ margin:6px 0 }

/* ---- Logos replacing series card headers on the home page ---- */
.series-logo-link{ display:block; margin:0; padding:0; text-align:center }
.series-logo{
  display:block; width:100%; height:auto; object-fit:contain;
  max-height:100px; margin:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.series-logo-fallback{
  display:inline-block; font-weight:700; font-size:1.15rem;
  padding:.25rem .5rem; border:1px solid var(--border); border-radius:.5rem;
}

/* Global image safety */
img{ max-width:100%; height:auto }

/* Very narrow phones: slightly smaller series detail logo */
@media (max-width:400px){
  .series-hero-logo-head{ width:clamp(220px, 70vw, 300px); }
}
/* Series Logos - uniform size */
.series-logo {
  display: block;
  width: 200px;          /* fixed width for consistency */
  height: auto;          /* keeps aspect ratio */
  margin: 0 auto 16px;   /* centers inside card */
  object-fit: contain;   /* prevents stretching */
}

/* Make sure they shrink on smaller screens */
@media (max-width: 600px) {
  .series-logo {
    width: 150px;  /* smaller but proportional on mobile */
  }
}