/* =============================================================
   comic.css — Comic-book expression layer for MC Quick
   Additive only. Unlink from index.html to disable.
   ============================================================= */

/* --- Fonts -------------------------------------------------- */
/* Bangers + Bebas Neue + Inter. Comic display is a substitution —
   the live app ships no branded font. Swap by dropping local files
   into fonts/ and rewriting these @import lines. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- Display type classes ----------------------------------- */
.mc-display {
    font-family: 'Bangers', Impact, Haettenschweiler, sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #fff;
}

.mc-impact {
    font-family: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
}

/* Stacked black-then-red shadow — the signature comic titling */
.mc-stacked-shadow {
    text-shadow:
        2px 2px 0 #0a0a0a,
        4px 4px 0 #ec1d24;
}

.mc-stacked-shadow-lg {
    text-shadow:
        3px 3px 0 #0a0a0a,
        6px 6px 0 #ec1d24;
}

/* --- Halftone dot fields ------------------------------------ */
.halftone {
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.6px);
    background-size: 6px 6px;
}

.halftone-red {
    background-color: #1a0606;
    background-image: radial-gradient(rgba(236, 29, 36, 0.4) 1.5px, transparent 1.6px);
    background-size: 6px 6px;
}

.halftone-soft {
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.4px);
    background-size: 5px 5px;
}

/* --- Header wordmark ---------------------------------------- */
.mc-wordmark {
    height: 26px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* --- Splash "ASSEMBLE..." treatment ------------------------- */
.mc-splash-title {
    font-family: 'Bangers', Impact, sans-serif;
    font-size: 56px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    text-shadow:
        3px 3px 0 #0a0a0a,
        6px 6px 0 #ec1d24;
    margin-top: 1rem;
}

/* --- SELECT IDENTITY heading -------------------------------- */
/* Replaces the Tailwind `text-2xl font-black tracking-tighter` pairing
   on the h1 at index.html:202. Sized to fit within the header row. */
.mc-select-identity {
    font-family: 'Bangers', Impact, sans-serif;
    font-size: 28px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    text-shadow:
        2px 2px 0 #0a0a0a,
        4px 4px 0 #ec1d24;
    padding-right: 8px;
}

/* --- Hero tile halftone overlay ----------------------------- */
/* Applied to the hero-select tile surface so the aspect color
   shows a subtle dot field underneath the portrait. */
.mc-hero-tile {
    position: relative;
}

.mc-hero-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);
    background-size: 5px 5px;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.65;
}

/* --- Section eyebrow shouts --------------------------------- */
/* Optional helper — a small impact label for section labels. */
.mc-eyebrow-comic {
    font-family: 'Bebas Neue', Impact, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 13px;
    color: #ec1d24;
}