: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;
}
@font-face {
    font-family: "Racing Sans";
    src: url("fonts/racing-sans-one-v17-latin-regular.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, .rsvp summary, .rsvp button {
    display: block;
    text-align: center;
    background: var(--color-accent2);
    color: var(--color-accent);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s;
}

.rsvp summary{
    cursor: pointer;
    list-style: none;
    width: fit-content;
    padding: 0.25rem 5rem;
}
.rsvp summary::-webkit-details-marker { display: none; }
.rsvp button {
    border: none;
    font: inherit;
    cursor: pointer;
    width: fit-content;
    padding: 0.25rem 2rem;
}
.trailer:hover, .rsvp summary:hover,  .rsvp button:hover {
    background: var(--color-hover);
}

.spooky {
    --color-bg: #1a1420;
    --color-text: #e8e2d4;
    --color-accent: #ff8001;
    --color-accent2: #0a0000;
    --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;
}

.silver {
    --color-bg: #111;
    --color-text: #e4e4e4;
    --color-accent: #e4e4e4;
    --color-accent2: #2a2a2a;
    --color-hover: #444;
    --font-heading: "Bodoni 72", Didot, "Playfair Display", Georgia, serif;
    background-image: radial-gradient(ellipse at center, #222 0%, #050505 100%);
}
.silver h1,
.silver h2 {
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.silver .film img {
    filter: grayscale(1) contrast(1.1);
    border: 6px solid #e4e4e4;
}
.silver .when {
    font-family: var(--font-heading);
    font-style: italic;
}

.add-to-calendar {
    font-size: 0.9em;
}
.add-to-calendar a {
    color: var(--color-accent);
}

.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; }
.film.shining h2 { font-family: "Racing Sans", Impact, sans-serif; }
.film.fly h2 {
    font-family: "Anton", Impact, sans-serif;
    text-shadow: 0 0 8px #3ddc84;
}
.film.conjuring h2 { font-family: "Cinzel", Georgia, serif; }

.rsvp-website {
    position: absolute;
    left: -9999px;
}

.thanksgiving {
    --color-bg: #f3e6c8;
    --color-text: #3b2414;
    --color-accent: #a4471d;
    --color-accent2: #7a2618;
    --color-hover: #5a3a1a;
    --color-card: #fbf4e2;
    --font-heading: "Fell English", Georgia, serif;
    background-image: radial-gradient(ellipse at center, #f8eed6 0%, #e6cf9f 100%);
}
.thanksgiving h1,
.thanksgiving h2 {
    font-weight: normal;
    color: var(--color-accent2);
}
.thanksgiving .event {
    background: var(--color-card);
    border: 4px double var(--color-accent);
    padding: 2.5rem 2rem;
    margin-bottom: 3rem;
    text-align: center;
}
.thanksgiving .event h1 {
    font-size: 2.75rem;
    margin: 0.25rem 0 1rem;
}
.thanksgiving .kicker,
.thanksgiving .when,
.thanksgiving .where {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.15rem;
    margin: 0.25rem 0;
}
.thanksgiving .ornament {
    color: var(--color-accent);
    font-size: 1.5rem;
    margin: 1rem 0;
}
.thanksgiving .invite {
    max-width: 34em;
    margin: 0 auto;
    text-align: left;
}
.thanksgiving .rsvp {
    max-width: 24em;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-accent);
}
.thanksgiving .rsvp h2 {
    margin-top: 0;
}
.thanksgiving .rsvp label {
    display: block;
    margin-bottom: 0.5rem;
}
.thanksgiving .rsvp input[type="text"],
.thanksgiving .rsvp textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem;
    font: inherit;
    color: var(--color-text);
    background: #fffaf0;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    margin-bottom: 1rem;
}
.thanksgiving .rsvp button {
    margin: 0 auto;
    color: var(--color-card);
    font-family: var(--font-heading);
    font-size: 1.1rem;
}
.thanksgiving .rsvp .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.thanksgiving .guest-list {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-accent);
}
.thanksgiving .guest-list iframe {
    width: 100%;
    height: 20rem;
    border: none;
}
/* The guest list served by rsvp.py inside the iframe */
body.embed {
    margin: 0;
    background: var(--color-card, transparent);
}
.embed ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.embed li {
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--color-accent);
}
.embed .dishes {
    font-style: italic;
}
.embed .empty {
    text-align: center;
    font-style: italic;
}
@media (max-width: 600px) {
    .thanksgiving .event {
        padding: 1.5rem 1rem;
    }
    .thanksgiving .event h1 {
        font-size: 2.25rem;
    }
}