body {
    opacity: 0;
    animation: pageFade 0.8s ease-out forwards;
    min-height: 100vh;
}

@keyframes pageFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.bg-accent-500 {
    background-color: #564032 !important;
    border-color: #564032 !important;
}

.hover\:bg-accent-600:hover,
.bg-accent-500:hover {
    background-color: #442b28 !important;
}

.media-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.media-frame video,
.media-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

nav.nav-scrolled {
    background-color: oklch(var(--background-50) / 0.98) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Nav link states: the compiled Tailwind classes (text-background-100,
   hover:text-background-50) are near-white and were only ever meant for the
   transparent overlay on the dark hero photo. They need their own colors
   once the header gets a solid light background on scroll, and the hover
   rule's higher specificity (class + :hover) beats a plain override, hence
   !important below. */

nav a.group:not(.text-accent-400) {
    color: oklch(var(--background-100)) !important;
}

nav a.group:not(.text-accent-400):hover {
    color: oklch(var(--accent-300)) !important;
}

nav a.group.text-accent-400 {
    color: oklch(var(--accent-400)) !important;
}

nav a.group.text-accent-400:hover {
    color: oklch(var(--accent-500)) !important;
}

nav.nav-scrolled a.group:not(.text-accent-400) {
    color: oklch(var(--primary-800)) !important;
}

nav.nav-scrolled a.group:not(.text-accent-400):hover {
    color: oklch(var(--accent-600)) !important;
}

nav.nav-scrolled a.group.text-accent-400 {
    color: oklch(var(--accent-500)) !important;
}

nav.nav-scrolled a.group.text-accent-400:hover {
    color: oklch(var(--accent-700)) !important;
}

/* Logo wordmark and mobile menu button are also styled white-on-dark by
   default; give them a readable color once the header goes solid. */
nav.nav-scrolled a[href="index.html"] span,
nav.nav-scrolled button {
    color: oklch(var(--primary-800)) !important;
}

nav.nav-scrolled a[href="index.html"]:hover span {
    color: oklch(var(--accent-500)) !important;
}

.podcast-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.podcast-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid oklch(var(--background-200) / 0.6);
    background-color: oklch(var(--background-100));
    color: oklch(var(--primary-800));
    font-family: var(--font-label);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.podcast-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: oklch(var(--accent-100));
    color: oklch(var(--accent-600));
    font-size: 1.3rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.podcast-links a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    background-color: oklch(var(--accent-500));
    border-color: oklch(var(--accent-500));
    color: oklch(var(--background-50));
}

.podcast-links a:hover .podcast-link-icon {
    background-color: oklch(var(--background-50) / 0.2);
    color: oklch(var(--background-50));
}