:root {
    --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Source Serif 4", Georgia, "Times New Roman", "Iowan Old Style", serif;
    --bg: #f7f8fb;
    --text: #0f172a;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main p,
main li {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0.01em;
}

main h1,
main h2,
main h3,
main h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

main .hero-landing__title {
    font-weight: 700;
    letter-spacing: -0.035em;
}

main .hero-video-dialog__title {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0;
}

/* Django messages (flash feedback after redirects)
   Fixed below the navbar so they stay visible when the URL has a hash
   (e.g. #add-comment-form) and the page jumps down the viewport. */
.site-messages {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--nav-height, 56px) + 10px);
    z-index: 95;
    width: min(72rem, calc(100% - 2rem));
    max-width: 72rem;
    margin: 0;
    padding: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-messages__item {
    pointer-events: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    line-height: 1.45;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.site-messages__item--success {
    background: #e8f6ee;
    color: #14532d;
    border: 1px solid #86efac;
}

.site-messages__item--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.site-messages__item--warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.site-messages__item--info,
.site-messages__item--debug {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}