:root {
    --color-bg: #fffcf2;
    --color-text: #1a1a1a;
    --color-accent: #6b6b6b;
    --color-accent2: #6b5b6b;
    --color-hover: #6c5b6b;
    --space-unit: 1rem;

    --color-spooky: #ff8001;
    --font-body: Charter, "Bitstream Charter", Cambria, Georgia, serif;
    --font-heading: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    --fs-base: 1rem; /* 16px */
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;

    --line-height-body: 1.6;
    --line-height-heading: 1.2;
}

@font-face {
    font-family: "Fell English";
    src: url("fonts/im-fell-english-v14-latin-regular.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fell English";
    src: url("fonts/im-fell-english-v14-latin-italic.woff2") format("woff2");
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Anton";
    src: url("fonts/anton-v27-latin-regular.woff2");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Metal";
    src: url("fonts/metal-mania-v23-latin-regular.woff2");
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cinzel";
    src: url("fonts/cinzel-v26-latin-600.woff2");
    font-style: normal;
    font-display: swap;
}
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

body {
    background: var(--color-bg) url("/img/Wild.webp") center center / cover
        no-repeat fixed;

    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
    font-weight: 700;
}

h1 {
    font-size: var(--fs-h1);
}
h2 {
    font-size: var(--fs-h2);
}
h3 {
    font-size: var(--fs-h3);
}

header {
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

header h1 a {
    text-decoration: none;
    color: var(--color-text);
}

nav a {
    margin-right: 1.5rem;
    text-decoration: none;
    color: var(--color-text);
}

nav a:hover {
    text-decoration: underline;
}

.film {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 3rem;
}

.film img {
    max-width: 100%;
    height: auto;
}
.film-info h2 {
    margin-top: 0;
}
@media (max-width: 600px) {
    .film {
        grid-template-columns: 1fr;
    }
}

.trailer {
    display: block;
    text-align: center;
    background: var(--color-accent2);
    color: var(--color-accent);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s;
}

.trailer:hover {
    background: var(--color-hover);
}

.spooky {
    --color-bg: #1a1420;
    --color-text: #e8e2d4;
    --color-accent: #ff8001;
    --color-accent2: #14110f;
    --color-hover: #14210f;
    background-image: none;
    --font-heading: "Cinzel", Impact, sans-serif;
}
.spooky h1,
.spooky h2 {
    font-weight: normal;
}
.spooky .year {
    font-style: italic;
}
.spooky .when {
    font-family: var(--font-heading);
    font-style: italic;
}

.film.monkey h2 { font-family: "Anton", Impact, sans-serif; }
.film.mandy h2 { font-family: "Metal", Impact, sans-serif; }
.film.witch h2 { font-family: "Fell English", Georgia, serif; }
.film.backrooms h2 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }