/* Bad Swan Comics brand layer: black, white and swan red, taken from the logo. */
:root {
  --brand-red: #db061a;
  --brand-red-bright: #ff2a3d;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --site-primary: var(--brand-red);
  --site-secondary: var(--brand-white);
  --site-background: var(--brand-black);
  --site-on-primary: var(--brand-white);
  --site-on-secondary: var(--brand-black);
  --site-on-background: #f7f7f7;
  --site-font-body: Montserrat, Inter, Arial, Helvetica, sans-serif;
  --site-font-heading: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
body { background: var(--brand-black); font-family: var(--site-font-body); }
::selection { background: var(--brand-red); color: var(--brand-white); }

/* Logo-style slanted headings */
h1, h2, h3, .feature-copy h3, .card-info h3, .card-art strong, .ks-roadmap h3, .ks-scope-head strong,
.ks-support strong, .lede, .hero-copy .tagline, h1.page-title { font-style: italic !important; }

/* Wide-tracked italic labels, like the "COMICS" line in the logo */
.kicker, .eyebrow, .card-info small, .card-more, .back, nav, .btn, .next-badge, .ks-status, .ks-scope-head span, .signup button {
  font-family: var(--site-font-body); font-style: italic; font-weight: 900;
}
.kicker, .eyebrow { color: var(--brand-red-bright); letter-spacing: .3em; }
.eyebrow:before { background: var(--brand-red); height: 3px; transform: skewX(-20deg); }

/* Header */
header { padding-top: 16px; padding-bottom: 16px; }
.brand-logo { display: block; height: 64px; width: auto; }
nav a:hover, nav a[aria-current="page"] { color: var(--brand-red-bright); }
.nav-cta { background: var(--brand-red); color: var(--brand-white); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); padding-left: 20px; padding-right: 20px; }
.nav-cta:hover { color: var(--brand-white) !important; background: #b00414; }
.nav-contact { border-color: var(--brand-white); }
.nav-contact:hover { border-color: var(--brand-red-bright); }

/* Hero */
.hero, .series-hero { background: #050505; border-top: 0; border-bottom: 0; }
.hero:after, .series-hero:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brand-red); }
.hero-art { background: radial-gradient(ellipse at 50% 55%, #3a0509 0, #130204 42%, #050505 75%); }
.hero-art:after { background: linear-gradient(90deg, #050505 0%, transparent 22%); }
.hero-logo { position: relative; z-index: 1; display: block; width: min(86%, 580px); height: auto; filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
h1 span { color: var(--brand-red); }
.swoosh { display: block; width: min(100%, 360px); height: 22px; margin: -6px 0 26px; fill: var(--brand-red); }

/* Buttons */
.btn { border-color: var(--brand-white); }
.btn-red { background: var(--brand-red); border-color: var(--brand-red); }
.btn-red:hover { background: #b00414; border-color: #b00414; }
.btn-outline:hover { background: var(--brand-white); color: var(--brand-black); }

/* Light panels mirror the logo: black ink on white */
.feature, .themes, .ks-roadmap { background: var(--brand-white); color: var(--brand-black); }
.feature-copy h3 span, .themes h2 span { color: var(--brand-red); }

/* About page logo panel */
.about-mark { border: 0; padding: 0; transform: rotate(-2deg); }
.about-mark img { display: block; width: 100%; height: auto; }

/* Newsletter band in swan red */
.newsletter { background: var(--brand-red); }
.signup button { background: var(--brand-black); }
.signup button:hover { background: #1a1a1a; }

/* Footer */
footer { border-top: 1px solid #1c1c1c; }
.footer-logo { display: block; height: 58px; width: auto; }
.socials a:hover, .socials a:focus-visible { background: var(--brand-red); border-color: var(--brand-red); }

/* Red labels on white panels use the deeper logo red so small text stays readable */
.feature .kicker, .themes .kicker, .ks-roadmap .kicker { color: var(--brand-red); }

/* Keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brand-red-bright); outline-offset: 3px; }
.newsletter a:focus-visible, .newsletter button:focus-visible, .newsletter input:focus-visible { outline-color: var(--brand-white); }

/* Mobile menu opens directly below the header whatever its height */
header { position: relative; }

@media (max-width: 800px) {
  nav { background: var(--brand-black); top: 100%; z-index: 20; }
  .hero-art:after { background: linear-gradient(180deg, #050505 0%, transparent 22%); }
}
@media (max-width: 520px) {
  .brand-logo { height: 52px; }
  h1 { font-size: 64px; }
}

/* 404 page */
.not-found { text-align: center; display: flex; flex-direction: column; align-items: center; min-height: 60vh; justify-content: center; }
.not-found-logo { width: min(70%, 320px); height: auto; margin-bottom: 28px; }
.not-found p { color: #b8b8b8; font-size: 15px; line-height: 1.8; max-width: 460px; margin: 18px auto 28px; }
.not-found .actions { justify-content: center; }