/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Subtle background artwork, veiled by a cream scrim so the warm palette
   survives the cool grey of the image. Set on the root element rather than
   body so it paints the full canvas even when content is short. */
html {
    background-color: #f9f2ec;
    background-image:
        linear-gradient(rgba(249, 242, 236, 0.68), rgba(249, 242, 236, 0.68)),
        url('../img/cfpbg.png');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center top;
    background-attachment: fixed, fixed;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #331712;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    background: transparent;
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

/* Masthead */
.masthead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(51, 23, 18, 0.15);
}

.center-logo {
    display: block;
    max-width: 420px;
    width: auto;
    height: auto;
}

.eyebrow {
    font-family: 'Marion', Georgia, serif;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8a5a3b;
}

.masthead h1 {
    font-family: 'Marion', Georgia, serif;
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.subtitle {
    font-family: 'Marion', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.4;
    color: #6b4433;
    max-width: 30ch;
    margin-top: -1.25rem;
}

.tagline {
    font-family: 'Marion', Georgia, serif;
    color: #331712;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-align: center;
    max-width: 52ch;
}

/* Key dates callout */
.key-dates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
    /* The masthead centers its children, which would otherwise shrink-wrap
       this row and force the cards to wrap early. */
    align-self: stretch;
}

.date-card {
    flex: 1 1 160px;
    background-color: #f2e6da;
    border: 1px solid rgba(51, 23, 18, 0.12);
    border-radius: 4px;
    padding: 1rem 0.9rem;
    text-align: center;
}

.date-card .label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a5a3b;
}

.date-card .value {
    display: block;
    font-family: 'Marion', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.3;
    margin-top: 0.35rem;
}

/* Content sections */
section {
    margin-top: 3.5rem;
}

section h2 {
    font-family: 'Marion', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(51, 23, 18, 0.15);
    margin-bottom: 1.25rem;
}

section p + p {
    margin-top: 1rem;
}

section ul + p {
    margin-top: 1.75rem;
}

.lede {
    font-family: 'Marion', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #6b4433;
}

.topic-list,
.guideline-list,
.question-list {
    margin-top: 1rem;
    padding-left: 1.25rem;
}

.topic-list li,
.guideline-list li,
.question-list li {
    margin-bottom: 0.5rem;
}

/* Questions read as a sequence of prompts rather than a checklist. */
.question-list {
    list-style: none;
    padding-left: 0;
}

.question-list li {
    padding-left: 1.25rem;
    border-left: 2px solid rgba(138, 90, 59, 0.35);
    margin-bottom: 1rem;
}

/* Call to action */
.cta {
    text-align: center;
    margin-top: 3.5rem;
}

.cta-button {
    display: inline-block;
    font-family: 'Marion', Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f9f2ec;
    background-color: #331712;
    border: 1px solid #331712;
    border-radius: 4px;
    padding: 0.85rem 2.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    background-color: #8a5a3b;
    border-color: #8a5a3b;
}

/* Inline links in body copy */
section a,
.cta-note a {
    color: #8a5a3b;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

section a:hover,
.cta-note a:hover {
    color: #331712;
}

/* The CTA button is a link; keep it out of the inline-link rules above. */
.cta a.cta-button {
    color: #f9f2ec;
    text-decoration: none;
}

.cta a.cta-button:hover {
    color: #f9f2ec;
}

.cta-note {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #6b4433;
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(51, 23, 18, 0.15);
    text-align: center;
}

.social-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.social-icon {
    width: 49px;
    height: 49px;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.site-footer p {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #6b4433;
}

.site-footer a {
    color: #8a5a3b;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* iOS Safari mis-sizes fixed backgrounds against the document rather
       than the viewport, which blows the artwork up. Let it scroll instead. */
    html {
        background-attachment: scroll, scroll;
        background-position: center center, center top;
    }

    .container {
        padding: 2.5rem 1.25rem 3rem;
    }

    .center-logo {
        max-width: 340px;
    }

    .masthead h1 {
        font-size: 2.1rem;
    }

    .subtitle {
        font-size: 1.15rem;
        margin-top: -1rem;
    }

    .lede {
        font-size: 1.15rem;
    }

    .tagline {
        font-size: 1rem;
    }

    .social-icon {
        width: 39px;
        height: 39px;
    }

    /* Four cards land 2x2 rather than 3+1. */
    .date-card {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 480px) {
    .center-logo {
        max-width: 260px;
    }

    .masthead h1 {
        font-size: 1.7rem;
    }

    .subtitle {
        font-size: 1.05rem;
        margin-top: -0.85rem;
    }

    .lede {
        font-size: 1.05rem;
    }

    .tagline {
        font-size: 0.9rem;
    }

    .social-links {
        gap: 1rem;
    }

    .social-icon {
        width: 34px;
        height: 34px;
    }

    .date-card {
        flex-basis: 100%;
    }
}