/**
 * Noir — the skin.
 *
 * Everything template-specific lives here. landing.css owns the layout and
 * reads these variables, so a new design is (mostly) a new copy of this block
 * with different values — not a new copy of the layout.
 *
 * Scoped to .lp-body--noir so two templates can coexist without leaking.
 */

.lp-body--noir {
    --lp-bg:     #0a0a0a;
    --lp-fg:     #ffffff;
    --lp-muted:  rgba(255, 255, 255, 0.74);
    --lp-accent: #e4262c;   /* the bright red of "The Murder Mystery Co." */
    --lp-cream:  #efe6d5;   /* the form card / badge / call button */
    --lp-ink:    #111111;

    --lp-hero-duotone: #8a1f18;   /* the red wash multiplied over the hero photo */

    --lp-font-display: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --lp-font-body:    'Roboto', Arial, sans-serif;

    --lp-radius:    22px;
    --lp-radius-sm: 8px;
}

.lp-body--noir .lp-hero__media::before {
    background: var(--lp-hero-duotone);
}

/*
 * The headline's emphasis word ("DYING") is italic and drops to pure white in
 * the comp, so it reads as a beat rather than a different colour.
 */
.lp-body--noir .lp-hero__title em,
.lp-body--noir .lp-hero__title i {
    font-style: italic;
    color: #ffffff;
}

/* "Why choose" eyebrow sits white above the red headline. */
.lp-body--noir .lp-heading__eyebrow {
    color: var(--lp-fg);
    font-family: var(--lp-font-body);
}

/*
 * Feature prop images are cutouts on black. A soft drop shadow keeps them from
 * looking pasted on, and matches the lit-from-above feel of the comp.
 */
.lp-body--noir .lp-feature__img {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
}

/* City names in body copy are underlined in the comp — they're links home. */
.lp-body--noir .lp-feature__text a,
.lp-body--noir .lp-intro__inner a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The submit button's paper-plane leans slightly, as in the comp. */
.lp-body--noir .lp-form__submit-icon {
    transform: rotate(-8deg);
}