:root {
    --bg: #030604;
    --bg-soft: #07110c;
    --panel: #0b1510;
    --panel-2: #101812;
    --green: #57e87d;
    --green-bright: #91ffad;
    --green-deep: #188643;
    --red: #ff4d5d;
    --red-deep: #8f1425;
    --text: #f4f7f5;
    --muted: #aeb8b1;
    --line: rgba(255,255,255,.09);
    --shadow: 0 24px 70px rgba(0,0,0,.5);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--line);
    background: rgba(3,6,4,.88);
    backdrop-filter: blur(14px);
}

.nav-wrap {
    width: min(1180px, 92%);
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 900;
    letter-spacing: .4px;
    color: var(--green-bright);
}

.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: .95rem;
    font-weight: 800;
}

.main-nav a {
    color: #dfe6e1;
    transition: color .2s ease;
}

.main-nav a:hover {
    color: var(--green-bright);
}

.menu-toggle {
    display: none;
    width: 45px;
    height: 42px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
    display: block;
    height: 2px;
    background: #fff;
    margin: 5px 0;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    background:
        linear-gradient(115deg, rgba(4,15,8,.98) 0%, rgba(3,6,4,.96) 52%, rgba(18,4,7,.92) 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 11px);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 49.8%, rgba(255,255,255,.025) 50%, transparent 50.2%),
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.03), transparent 52%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 92%);
    min-height: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 58px;
    padding: 70px 0 82px;
}

.hero-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(95px);
    opacity: .18;
}

.hero-glow-green {
    left: -100px;
    top: 40px;
    background: var(--green);
}

.hero-glow-red {
    right: -130px;
    bottom: 10px;
    background: var(--red);
    opacity: .12;
}

.eyebrow {
    display: inline-block;
    color: var(--green-bright);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.hero h1 {
    max-width: 730px;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: .88;
    letter-spacing: -4px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hero h1 span {
    display: block;
    color: var(--green);
    text-shadow: 0 0 45px rgba(87,232,125,.16);
}

.tagline {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 900;
    margin-bottom: 16px;
}

.hero-text {
    max-width: 650px;
    color: var(--muted);
    font-size: 1.08rem;
    margin-bottom: 28px;
}

.hero-text strong {
    color: #ff9aa3;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .35px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn-primary {
    color: #031007;
    background: linear-gradient(135deg, var(--green-bright), var(--green));
    box-shadow: 0 12px 30px rgba(46,204,113,.18);
}

.btn-ghost {
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    background: rgba(255,255,255,.035);
}

.btn-dark {
    color: #dce6df;
    background: #18211b;
    border: 1px solid rgba(255,255,255,.08);
}

.btn-disabled {
    cursor: default;
    opacity: .62;
}

.hero-note {
    max-width: 650px;
    color: #849089;
    font-size: .9rem;
}

.hero-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 520px;
}

.logo-aura {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(74,255,128,.22) 0%, rgba(74,255,128,.08) 33%, transparent 70%);
    filter: blur(18px);
}

.hero-logo {
    position: relative;
    width: min(100%, 520px);
    filter:
        drop-shadow(0 30px 50px rgba(0,0,0,.6))
        drop-shadow(0 0 26px rgba(76,255,125,.08));
}

.hero-domain {
    position: relative;
    margin-top: 12px;
    color: #a8b4ab;
    letter-spacing: 1.7px;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.story-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #060b08;
}

.section-inner {
    width: min(1180px, 92%);
    margin: 0 auto;
}

.strip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.strip-grid > div {
    padding: 28px 34px;
}

.strip-grid > div:first-child {
    border-right: 1px solid var(--line);
}

.strip-kicker {
    display: block;
    color: var(--green);
    font-size: .75rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 3px;
}

.strip-kicker-red {
    color: #ff6f7c;
}

.strip-grid strong {
    font-size: 1.03rem;
}

.section {
    padding: 92px 0;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 38px;
}

.section-heading.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-heading h2,
.next-grid h2,
.about-grid h2 {
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    line-height: 1;
    letter-spacing: -2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.section-heading > p:last-child,
.next-grid > div > p:last-child,
.about-grid p {
    color: var(--muted);
}

.comic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.comic-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.comic-card.featured {
    border-color: rgba(87,232,125,.28);
}

.issue-art {
    position: relative;
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.issue-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,.022) 16px 17px),
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), transparent 42%);
}

.issue-art-one {
    background: linear-gradient(155deg, #143c23, #07110c 60%, #020403);
}

.issue-art-two {
    background: linear-gradient(155deg, #18241b, #0a0d0b 60%, #020303);
}

.issue-art-three {
    background: linear-gradient(155deg, #311018, #120608 60%, #030202);
}

.issue-number,
.issue-status {
    position: absolute;
    top: 16px;
    z-index: 2;
    font-weight: 900;
    font-size: .83rem;
    letter-spacing: 1px;
}

.issue-number {
    left: 16px;
    font-size: 1.35rem;
}

.issue-status {
    right: 16px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #031007;
    background: var(--green-bright);
}

.issue-symbol {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(255,255,255,.13);
    border-radius: 50%;
    color: rgba(255,255,255,.8);
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -2px;
    box-shadow: inset 0 0 40px rgba(255,255,255,.02);
}

.issue-art-one .issue-symbol {
    border-color: rgba(87,232,125,.35);
    color: var(--green-bright);
    box-shadow: 0 0 45px rgba(87,232,125,.08);
}

.issue-art-three .issue-symbol {
    border-color: rgba(255,77,93,.35);
    color: #ff919b;
    box-shadow: 0 0 45px rgba(255,77,93,.08);
}

.comic-card-body {
    padding: 24px;
}

.issue-label {
    color: #849088;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .73rem;
    font-weight: 900;
    margin-bottom: 6px;
}

.comic-card h3 {
    font-size: 1.65rem;
    line-height: 1.05;
    margin-bottom: 12px;
}

.comic-card-body > p:not(.issue-label) {
    min-height: 104px;
    color: var(--muted);
    margin-bottom: 20px;
}

.character-section {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(18,76,37,.26) 0%, rgba(3,6,4,.95) 50%, rgba(88,12,22,.22) 100%),
        #050805;
}

.character-grid {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    align-items: stretch;
    gap: 18px;
}

.character-card {
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(5,8,6,.72);
    box-shadow: var(--shadow);
}

.green-knight {
    border-color: rgba(87,232,125,.22);
}

.nightmare {
    border-color: rgba(255,77,93,.22);
}

.character-topline {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--green-bright);
    margin-bottom: 5px;
}

.nightmare .character-topline {
    color: #ff8792;
}

.character-card h3 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.character-name {
    color: #8e9b92;
    font-weight: 800;
    margin-bottom: 18px;
}

.character-card > p:not(.character-name) {
    color: var(--muted);
    margin-bottom: 22px;
}

.character-card ul {
    list-style: none;
    display: grid;
    gap: 10px;
}

.character-card li {
    position: relative;
    padding-left: 19px;
    color: #dce5df;
}

.character-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 8px;
    height: 2px;
    background: var(--green);
}

.nightmare li::before {
    background: var(--red);
}

.versus-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 74px;
    height: 74px;
    margin: auto;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    background: #050705;
    font-weight: 900;
    font-size: 1.45rem;
    box-shadow: 0 15px 35px rgba(0,0,0,.4);
}

.next-issue {
    background: #050906;
}

.next-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 50px;
    align-items: center;
}

.coming-card {
    padding: 30px;
    border: 1px solid rgba(87,232,125,.18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(87,232,125,.08), rgba(255,255,255,.025));
}

.coming-label {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    margin-bottom: 12px;
    color: #041108;
    background: var(--green-bright);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.coming-card h3 {
    font-size: 1.8rem;
    margin-bottom: 9px;
}

.coming-card p {
    color: var(--muted);
}

.about-section {
    border-top: 1px solid var(--line);
    background: #020403;
}

.about-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 65px;
}

.about-grid p + p {
    margin-top: 16px;
}

.site-footer {
    border-top: 1px solid var(--line);
    background: #010201;
    padding: 36px 0;
}

.footer-inner {
    width: min(1180px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.footer-inner strong,
.footer-inner span {
    display: block;
}

.footer-inner span,
.copyright {
    color: #7f8982;
    font-size: .86rem;
}

.copyright {
    text-align: right;
}

@media (max-width: 920px) {
    .hero-inner,
    .next-grid,
    .about-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: auto;
        text-align: center;
        gap: 20px;
    }

    .hero-text,
    .hero-note {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-art {
        min-height: 380px;
    }

    .comic-grid {
        grid-template-columns: 1fr 1fr;
    }

    .comic-grid .comic-card:last-child {
        grid-column: span 2;
    }

    .character-grid {
        grid-template-columns: 1fr;
    }

    .versus-mark {
        margin: 2px auto;
    }
}

@media (max-width: 720px) {
    .nav-wrap {
        min-height: 68px;
    }

    .brand span {
        display: none;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 4%;
        border-bottom: 1px solid var(--line);
        background: #050906;
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        padding: 13px 8px;
        border-bottom: 1px solid rgba(255,255,255,.05);
    }

    .hero-inner {
        padding-top: 52px;
        padding-bottom: 55px;
    }

    .hero h1 {
        letter-spacing: -2.5px;
    }

    .hero-art {
        min-height: 300px;
    }

    .strip-grid {
        grid-template-columns: 1fr;
    }

    .strip-grid > div:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .section {
        padding: 68px 0;
    }

    .comic-grid {
        grid-template-columns: 1fr;
    }

    .comic-grid .comic-card:last-child {
        grid-column: auto;
    }

    .comic-card-body > p:not(.issue-label) {
        min-height: auto;
    }

    .character-card {
        padding: 28px 24px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto;
    }

    .copyright {
        text-align: center;
    }
}




/* Issue #1 homepage cover — show the complete cover without cropping */
.issue-art-one {
    position: relative;
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #07110c;
}

.issue-art-one::before {
    display: none;
}

.issue-cover-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
}

.issue-art-one .issue-number,
.issue-art-one .issue-symbol {
    display: none;
}

.issue-art-one .issue-status {
    top: auto;
    right: 14px;
    bottom: 14px;
}