* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
}

/* Header and Navigation */
/* Header uses .header, .header-content, .site-title, .nav from common.css */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.hero {
    background: var(--gradient-primary);
    color: var(--color-text-on-primary);
    padding: 4rem 2rem;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.hero .subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Who writes these notes: seen by everyone, but quieter than the subtitle */
.hero .hero-byline {
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    opacity: 0.85;
    margin: -1rem auto 0;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Buttons use shared .btn system from common.css */
/* Homepage uses .btn-lg .btn-light and .btn-lg .btn-secondary */

/* Updates Box */
.updates-box {
    background: var(--color-accent-yellow-light);
    border-left: 4px solid var(--color-accent-yellow);
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: 8px;
    max-width: 1200px;
}

.updates-box a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.updates-box p {
    margin: 0.5rem 0;
}

/* Section Styles */
/* Sections use .section-container and .section-container-lg from common.css */
/* Section h2 and h3 typography inherited from .section-container system */

/* New Here Section */
.newcomer {
    background: var(--color-accent-blue-light);
    border-left: 4px solid var(--color-accent-blue);
}

/* The global reset zeroes paragraph margins; separate consecutive paragraphs */
.newcomer p + p {
    margin-top: var(--spacing-md);
}

/* "A note about me" callout: the episode-page disclaimer's accent, on a
   white card so it stands out from the tinted New Here section */
.about-notes {
    background: var(--color-bg-white);
    border-left: 4px solid var(--color-accent-yellow);
    border-radius: 8px;
    padding: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.about-notes p {
    margin: 0;
}

.about-notes strong {
    color: var(--color-accent-yellow-dark);
}

.about-notes a {
    color: var(--color-primary);
}

/* Each half of the byline stays whole; a narrow screen breaks at the dot */
.hero-byline span {
    white-space: nowrap;
}

.newcomer ul {
    list-style: none;
    padding: 0;
}

.newcomer li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--color-accent-blue-border);
}

.newcomer li:last-child {
    border-bottom: none;
}

.newcomer li a {
    color: var(--color-accent-blue-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
}

.newcomer li a:hover {
    color: var(--color-accent-blue);
    text-decoration: underline;
}

/* Featured Episodes */
.featured {
    background: var(--gradient-subtle);
}

.featured-intro a {
    color: var(--color-primary);
}

/* Sampler cards: the "Read notes" link covers the whole card */
.sampler-card {
    position: relative;
}

.sampler-card a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--radius-lg);
}

/* Keyboard focus outlines the card rather than just the link */
.sampler-card a:focus-visible {
    outline: none;
}

.sampler-card a:focus-visible::after {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Episode cards use .card .card-elevated from common.css */
/* Container uses .card-grid from common.css */
/* Typography (h3, p, a) inherited from .card system */

.episode-number {
    display: inline-block;
    background: var(--color-fill-primary);
    color: var(--color-text-on-primary);
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.8rem;
}

/* Quick Access Grid */
.quick-access {
    background: var(--color-bg-white);
}

.access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* browsers without min() */
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* How to Navigate: three equal columns, or one stack on narrower screens
   (auto-fit left a lone third item under two). Each column spans two rows
   of a shared subgrid so the headings and paragraphs line up across. */
.navigate-grid {
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .navigate-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0;
    }

    @supports (grid-template-rows: subgrid) {
        .navigate-grid > div {
            display: grid;
            grid-row: span 2;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
    }
}

.access-card {
    background: var(--color-fill-primary);
    color: var(--color-text-on-primary);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    transition: all var(--transition-base);
    font-weight: 600;
    font-size: 1.1rem;
}

.access-card:hover {
    background: var(--color-fill-primary-hover);
    transform: translateY(-5px);
    box-shadow: var(--shadow-primary-lg);
}

/* Session Sections */
.sessions {
    background: var(--color-bg-white);
}

.session-group {
    border: 2px solid var(--color-border-light);
    border-radius: 12px;
    margin: 1.5rem 0;
    overflow: hidden;
    transition: border-color var(--transition-base);
}

.session-group:hover {
    border-color: var(--color-primary);
}

.session-group summary {
    background: var(--color-fill-primary);
    color: var(--color-text-on-primary);
    padding: 1.5rem;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 700;
    list-style: none;
    /* Title | count | arrow: the title takes the slack, so every count lines
       up at the right instead of floating mid-row by title length */
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--spacing-md);
    align-items: center;
    transition: background var(--transition-base);
}

/* BEMA's name for the session, with this site's topic beneath it */
.session-name .session-title,
.session-name .session-topic {
    display: block;
}

.session-name .session-topic {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    opacity: 0.85;
    margin-top: 0.15rem;
}

.session-group summary::-webkit-details-marker {
    display: none;
}

.session-group summary::after {
    content: "▼";
    content: "▼" / "";
    transition: transform var(--transition-base);
}

.session-group[open] summary::after {
    transform: rotate(180deg);
}

.session-group summary:hover {
    background: var(--color-fill-primary-hover);
}

.episode-list {
    padding: 1.5rem;
    background: var(--color-bg-light);
}

.episode-item {
    position: relative;
    padding: 0.8rem;
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

.episode-item:hover {
    background: var(--color-bg-white);
    border-radius: 6px;
}

.episode-item:last-child {
    border-bottom: none;
}

.episode-item a {
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: 500;
}

/* The episode link covers its whole row, subtitle and padding included */
.episode-item a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
}

.episode-item:hover a {
    color: var(--color-primary);
}

/* Keyboard focus outlines the row rather than just the title */
.episode-item a:focus-visible {
    outline: none;
}

.episode-item a:focus-visible::after {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.episode-subtitle {
    color: var(--color-text-tertiary);
    font-size: 0.9rem;
    margin-left: 1rem;
}

/* Search Box */
.search-highlight {
    background: var(--color-bg-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    margin: 2rem auto;
    text-align: center;
}

.search-box {
    display: flex;
    max-width: 600px;
    margin: 1.5rem auto;
    gap: 1rem;
}

.search-input {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    font-size: 1rem;
}

/* Search button uses .btn .btn-lg .btn-primary from common.css */

/* Footer */
/* Footer uses .footer from common.css */

/* Responsive */
/* Nav and header-content responsive styles in common.css */
@media (max-width: 768px) {
    .hero h1 {
        font-size: var(--font-size-2xl);
    }

    .hero .subtitle {
        font-size: var(--font-size-md);
    }

    .episode-cards {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons {
        align-items: center;
    }

    .cta-buttons .btn {
        white-space: normal;
        width: 100%;
        max-width: 22rem;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .search-box {
        flex-direction: column;
    }

    /* Title on top, count (or badge) beneath it, arrow at the right */
    .session-group summary {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: var(--spacing-sm);
        row-gap: 0.25rem;
        font-size: var(--font-size-md);
        padding: var(--spacing-sm) 1.25rem;
    }

    .session-group summary > span {
        grid-column: 1;
        justify-self: start;
    }

    .session-group summary > .badge {
        margin-left: 0;
    }

    .session-group summary::after {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .episode-list {
        padding: var(--spacing-sm);
    }

    .access-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }

    .access-card {
        padding: 1.25rem var(--spacing-sm);
        font-size: var(--font-size-base);
    }

    /* "How to Navigate" reuses .access-grid but holds paragraphs, so stack it */
    .navigate-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* ============================================
   FLEX GAP FALLBACKS (Safari < 14.1)
   theme-switcher.js adds html.no-flex-gap when flex `gap` is unsupported.
   Margins mirror the gap values above, per breakpoint.
   ============================================ */
.no-flex-gap .cta-buttons > * + *,
.no-flex-gap .search-box > * + * {
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .no-flex-gap .cta-buttons > * + *,
    .no-flex-gap .search-box > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
}

/* Utility Classes */
.text-center-mt {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.section-heading {
    margin-bottom: var(--spacing-sm);
}

.helper-text {
    margin-top: var(--spacing-sm);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.session-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
}

.badge {
    display: inline-block;
    background: var(--color-badge);
    color: var(--color-text-on-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.badge-warning {
    background: var(--color-accent-orange);
    color: #1d1e22;
    font-size: 0.8rem;
}

.coming-soon {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-text-tertiary);
}

.coming-soon-title {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
}

.coming-soon-subtitle {
    font-size: var(--font-size-sm);
}

.icon {
    margin-right: 0.5rem;
}