/* Clean, Accessible, Fast — transparent window for content */

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

/* ─── Design tokens (iteration 23 — calm containment, paper-in-house) ──
   Three visual layers only:
     body.site-body   → outer field (light olive-gray, "outside")
     .site-frame      → the one house frame (warm paper)
     .page-inner      → inner reading plane (same paper, only a touch lighter)
   No card-in-card. No heavy shadow. One held frame. */
:root {
    --body-bg: #e8e9e3;
    --frame-bg: #f7f5ef;
    --inner-bg: #fbfaf7;
    --frame-border: #d8d5ca;
    --divider-color: #d8d6cf;
    --text-main: #2f2f2b;
    --text-secondary: #5f5d57;
    --brand-green: #5f7446;     /* muted olive — architectural, quiet */

    --frame-max: 1200px;
    --inner-max: 980px;

    --frame-radius: 12px;
    --frame-border-width: 1px;

    --house-pad-top: 26px;
    --house-pad-x: 28px;
    --house-pad-bottom: 18px;

    --portrait-width: 110px;
    --portrait-gap: 2.5rem;
    --house-title-size: 1.45rem;
    --house-title-gap: 0.75rem;
    --site-nav-gap: 1rem;

    --divider-gap-top: 8px;
    --divider-gap-bottom: 18px;

    --inner-pad-top: 18px;
    --inner-pad-x: 32px;
    --inner-pad-bottom: 40px;
    --page-nav-gap: 1rem;
    --page-content-gap: 1.75rem;
}

/* ─── Single-frame house architecture ─────────────────────────────────
   Layers:
     body.site-body      →  outer field (gray, outside the house)
     .site-frame         →  the one house — holds everything together
     .page-inner         →  changing content room inside the house
   Only ONE outer boundary. No stacked cards. No nested boxes. */

.site-body {
    background: var(--body-bg);
    color: var(--text-main);
}

.site-frame {
    max-width: var(--frame-max);
    margin: 20px auto;
    background: var(--frame-bg);
    border: var(--frame-border-width) solid var(--frame-border);
    border-radius: var(--frame-radius);
    overflow: hidden;
    box-shadow: none;
}

.house-header {
    padding: var(--house-pad-top) var(--house-pad-x) var(--house-pad-bottom);
    text-align: center;
    background: var(--frame-bg);
}

.house-portraits {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--portrait-gap);
}

.portrait-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Visual order in RTL flex: lower order = rightmost.
   BHS on visual right, RBS on visual left. */
.portrait-unit-bhs { order: 0; }
.portrait-unit-rbs { order: 1; }

.rabbi-portrait {
    width: var(--portrait-width);
    height: auto;
    display: block;
    border: 2px solid var(--brand-green);
    background: #f5f5f5;
}

.house-title-row {
    margin-top: var(--house-title-gap);
}

.house-title-link {
    display: inline-block;
    font-size: var(--house-title-size);
    font-weight: 500;
    color: var(--brand-green);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.house-title-link:active {
    color: #2f3a22;
}

/* Fixed house subtitle — part of the constant identity on every page.
   Secondary to the green house title, calm and centered. */
.house-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0.55rem auto 0;
    font-weight: 400;
}
@media (max-width: 700px) {
    .house-subtitle {
        font-size: 0.95rem;
        max-width: none;
        padding: 0 0.5rem;
    }
}

/* Global site nav inside house-header — constant cross-site links
   Full book/section titles, laid out in calm rows (not compressed to one line). */
.house-header .site-nav {
    margin-top: var(--site-nav-gap);
    position: static;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.9;
    padding: 0;
    z-index: auto;
}
.house-header .site-nav__row {
    display: block;
}
.house-header .site-nav__row + .site-nav__row {
    margin-top: 0.1rem;
}
.house-header .site-nav a {
    color: #3d4a2c;
    text-decoration: none;
    padding: 0.1rem 0.25rem;
}
.house-header .site-nav a:active {
    color: #fff;
    background: var(--brand-green);
}
.house-header .site-nav .dest-sep {
    color: #888;
    padding: 0 0.15rem;
}

@media (max-width: 700px) {
    .house-header .site-nav {
        font-size: 0.88rem;
        line-height: 1.8;
    }
}

.house-divider {
    height: 0;
    border-top: 1px solid var(--divider-color);
    margin: var(--divider-gap-top) 28px var(--divider-gap-bottom);
}

.page-inner {
    max-width: var(--inner-max);
    margin: 0 auto;
    padding: var(--inner-pad-top) var(--inner-pad-x) var(--inner-pad-bottom);
    background: var(--inner-bg);
    /* No radius — the outer frame does the containment. Only a soft
       tonal step from frame-bg to inner-bg, no box edges. */
}

.home-inner {
    padding-top: 0.75rem;
}

.page-inner > .page-header {
    text-align: center;
    background: transparent;
    border-bottom: none;
    padding: 0;
    display: block;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--brand-green);
    margin: 0 0 0.35rem;
    letter-spacing: 0.01em;
}

.page-source {
    margin: 0 0 0.3rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.page-inner .page-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.page-nav {
    margin-top: var(--page-nav-gap);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
    font-size: 0.92rem;
}
.page-nav a {
    color: #3d4a2c;
    text-decoration: underline;
    text-decoration-color: #c3cbb0;
    text-underline-offset: 3px;
    padding: 0.1rem 0.2rem;
}
.page-nav a:active {
    text-decoration-color: var(--brand-green);
}

.page-content {
    margin-top: var(--page-content-gap);
}

/* Homepage explanatory text — the only content block on the homepage
   below the fixed header. Quiet, readable, no decoration. */
.home-about {
    margin: 1.5rem auto 2.25rem;
    max-width: 720px;
}
.home-about p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-main);
    margin: 0 0 1.1rem;
}
.home-about p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1260px) {
    .site-frame {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 700px) {
    :root {
        --portrait-width: 90px;
        --portrait-gap: 2rem;
        --house-pad-top: 16px;
        --house-pad-bottom: 12px;
        --house-pad-x: 20px;
        --house-title-size: 1.3rem;
        --inner-pad-x: 20px;
        --inner-pad-bottom: 28px;
    }
    .house-divider {
        margin-left: 20px;
        margin-right: 20px;
    }
    .page-title {
        font-size: 1.5rem;
    }
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    right: 0;
    background: #5f7446;
    color: #fff;
    padding: 1rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 1100;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #2f3a22;
    outline-offset: 2px;
}

html {
    font-size: 19px;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: #eae9e5;
    color: #222;
    line-height: 1.85;
    direction: rtl;
}

/* ─── Destinations Strip ─── */

.dest-strip {
    background: #f5f4f0;
    border-bottom: 1px solid #e0e0dc;
    padding: 0.4rem 1rem;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.8;
}

.dest-strip a {
    color: #3d4a2c;
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    white-space: nowrap;
}

.dest-strip a:active {
    color: #fff;
    background: #5f7446;
}

.dest-strip .dest-current {
    font-weight: 700;
    color: #222;
}

.dest-strip .dest-sep {
    color: #666;                    /* was #a8a8a8 — pipe is text, WAVE checks contrast */
}

/* ─── Sticky Navigation ─── */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #e0e0dc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.nav-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    min-height: 52px;
}

.nav-home {
    color: #5f7446;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 0.25rem;
}

.nav-links a {
    color: #3d4a2c;
    text-decoration: underline;
    text-decoration-color: #8a9c78;
    text-underline-offset: 3px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.85rem 0.9rem;
}

.nav-links a:active {
    color: #2f3a22;
    text-decoration-color: #5f7446;
}

/* ─── Hero ─── */

.hero {
    text-align: center;
    padding: 4rem 2rem 3.5rem;
    background: #fff;
    border-bottom: 3px solid #5f7446;
}

.hero-compact {
    padding: 2rem 2rem 1.5rem;
}

.hero-compact .subtitle {
    margin-bottom: 1.5rem;
}

.hero-compact .rabbis {
    gap: 2rem;
    margin-bottom: 0;
}

.hero-compact .rabbis img {
    width: 100px;
}

.hero-compact .rabbis figcaption {
    font-size: 0.85rem;
}

h1 {
    font-size: 2.6rem;
    color: #5f7446;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.hero .subtitle {
    font-size: 1.05rem;
    color: #555;                    /* was #666 — stronger contrast on body gray */
    margin-bottom: 2.5rem;
    font-weight: 400;
}

.rabbis {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.rabbis figure {
    text-align: center;
}

.rabbis img {
    display: block;
    width: 124px;
    height: auto;
    border: 2px solid #5f7446;
    box-shadow: 0 3px 10px rgba(0,0,0,0.10);
    background: #f5f5f5;
}

.rabbis figcaption {
    margin-top: 0.85rem;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
}

.rabbis figcaption span {
    font-size: 0.85rem;
    color: #5f7446;
}

/* (old stale .rabbi block removed — now lives in .presence-header section) */

/* Hero action buttons */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.hero-btn {
    display: inline-block;
    color: #2d5c17;
    text-decoration: none;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.4;
    padding: 0.85rem 1.9rem;
    border: 2px solid #5f7446;
    background: #fff;
    min-width: 10.5rem;
    text-align: center;
}

.hero-btn:active {
    background: #5f7446;
    color: #fff;
    border-color: #2d5c17;
}

.hero-btn:focus {
    outline: 3px solid #2f3a22;
    outline-offset: 2px;
}

/* ─── Main Content ─── */

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ─── Intro ─── */

.intro {
    background: #fff;
    padding: 1.75rem 2rem;
    border-right: 4px solid #5f7446;
    margin: 3rem 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.intro p {
    font-size: 1.05rem;
    margin: 0;
    color: #333;
    line-height: 1.9;
}

/* ─── Sections ─── */

.section {
    padding: 1.1rem 0;                      /* -12% from 1.25 */
    border-bottom: none;
}

.section:first-child {
    padding-top: 1.5rem;                    /* -14% from 1.75 */
}

.section-alt {
    background: #f8f8f5;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

h2 {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2ead9;       /* -18% contrast from #d4e0cf */
    font-weight: 500;
}

p {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    color: #333;
}

/* ─── Card Grid ─── */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #e8e8e5;
    border-right: 3px solid #c5d9bc;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card:active {
    background: #edf5e8;
    border-right-color: #5f7446;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #3d4a2c;
    margin-bottom: 0.3rem;
    text-decoration: underline;
    text-decoration-color: #8a9c78;
    text-underline-offset: 2px;
}


.card-meta {
    font-size: 0.85rem;
    color: #555;                 /* was #777 — WCAG AA on body gray */
}

/* Upcoming / not-yet-built cards */
.card-upcoming {
    opacity: 0.55;
    cursor: default;
    border-right-color: #e8e8e5;
    background: #fcfcfa;
}

.card-upcoming:active {
    background: #fcfcfa;
    border-right-color: #e8e8e5;
}


.card-upcoming .card-title {
    color: #555;                 /* was #555 */
    text-decoration: none;
}

.card-upcoming .card-meta {
    color: #555;                 /* was #969696 — WCAG-passable */
}

/* Secondary section cards (quieter) */
#more .card {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ─── Site Map List ─── */

.site-map {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.map-link {
    display: block;
    padding: 0.5rem 0.5rem;
    font-size: 1.02rem;
    font-weight: 500;                       /* less assertive */
    color: #3d4a2c;
    text-decoration: underline;
    text-decoration-color: #8a9c78;
    text-underline-offset: 2px;
    border-bottom: none;                    /* no card separator */
    background: transparent;               /* no white card — flows with page */
}

a.map-link:active {
    background: #edf5e8;
}

a.map-link:focus {
    outline: 3px solid #2f3a22;
    outline-offset: 2px;
}

.map-sub {
    display: inline;
    font-size: 0.82rem;
    font-weight: 400;
    color: #555;                         /* was #777 — homepage helper text, AA passable */
    margin-right: 0.4rem;
    text-decoration: none;
}

.map-upcoming {
    color: #444;
    text-decoration: none;
    font-weight: 500;
}

/* ─── About ─── */

.about p {
    color: #444;
    max-width: 680px;
}

/* ─── Footer ─── */

footer {
    text-align: center;
    padding: 1.75rem 1rem;
    margin-top: 2rem;
    border-top: 1px solid #e5e5e0;
    background: #fbfbf9;
}

footer p {
    color: #555;                 /* was #8f8f8f */
    font-size: 0.82rem;
    margin: 0;
}

footer a {
    color: #555;                 /* was #8f8f8f */
    text-decoration: underline;
    text-decoration-color: #888;    /* footer underline — visible without harshness */
    text-underline-offset: 2px;
}

footer a:active {
    color: #5f7446;
}

/* ─── Focus for keyboard users ─── */

a:focus,
button:focus {
    outline: 3px solid #2f3a22;
    outline-offset: 3px;
}

/* Touch targets minimum 44x44px */
.nav-links a,
.card,
.hero-btn,
.download-link {
    min-height: 44px;
}

/* Selection color */
::selection {
    background: #5f7446;
    color: #fff;
}

/* ─── Responsive ─── */

@media (max-width: 700px) {
    html {
        font-size: 17px;
    }

    .nav-inner {
        flex-direction: column;
        padding: 0.5rem 1rem;
        gap: 0;
    }

    .nav-home {
        padding: 0.5rem 0;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
    }

    .nav-links a {
        padding: 0.65rem 0.75rem;
        font-size: 0.85rem;
    }

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

    h1 {
        font-size: 2.15rem;
    }

    .hero .subtitle {
        margin-bottom: 1.75rem;
        font-size: 1rem;
    }

    .rabbis {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .rabbis img {
        width: 100px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-btn {
        width: 100%;
        max-width: 22rem;
        padding: 1rem;
    }

    main {
        padding: 0 1.25rem;
    }

    .intro {
        margin: 2rem 0;
        padding: 1.25rem;
    }

    .section {
        padding: 0.875rem 0;      /* -12.5% from 1rem */
    }

    .section-alt {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 1.1rem 1.25rem;
    }

    /* Subpage mobile */
    .subpage-main {
        padding: 0 1.25rem;
    }

    .download-link {
        display: block;
        text-align: center;
    }

    /* Quick grid mobile */
    .quick-grid {
        grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
        gap: 0.35rem;
    }

    .q-num {
        font-size: 1rem;
    }

    .q-range {
        font-size: 0.75rem;
    }

    /* Lesson mobile */
    .lesson-row {
        padding: 0.85rem 0.75rem;
    }

    .lesson-play {
        min-width: 3rem;
        min-height: 3rem;
        font-size: 1.2rem;
    }

    .lesson-times {
        padding-right: 3.75rem;
        font-size: 0.85rem;
    }
}

/* ─── High contrast ─── */

@media (prefers-contrast: high) {
    body {
        background: #fff;
        color: #000;
    }

    .card {
        border-color: #333;
    }

    a {
        color: #000;
    }

    .nav-links a,
    .card {
        border-width: 3px;
    }
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ─── Sub-page styles ─── */

.subpage-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem 2rem;   /* tightened top: title flows into first content */
}

/* ─── Page header composition ───────────────────────────────────────────
   Same flat DOM at every breakpoint. Display switches:
     Narrow → flex with wrap.
       Both rabbis order:1 (sit together in row 1, centered as a tight pair).
       Title-block order:2 + flex:0 0 100% (forced to wrap to row 2).
     Wide   → CSS grid 3 columns.
       [RBS-left] [TITLE+SUBTITLE] [BHS-right] all in one row.
*/
/* ─── Presence header (iteration 19) ──────────────────────────────────
   Strong opening presence. Clean reading afterward (no sticky).
   Portraits + names above title on every page.
     Homepage = entering the house (larger)
     Inner    = continuing inside (calmer)
   Hierarchy: presence-header → site-nav → dest-strip → content
*/
.presence-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e8e8e5;
    padding: 1.5rem 1.25rem 1rem;
    text-align: center;
}

.presence-header__portraits {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 0;          /* portraits → title: zero gap (names provide spacing) */
}

.portrait-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rabbi {
    width: 90px;               /* mobile-first inner — slightly more present */
    height: auto;
    display: block;
    border: 2px solid #5f7446;
    background: #f5f5f5;
}

.rabbi-name {
    margin-top: 0.375rem;      /* ~6px */
    text-align: center;
    font-size: 0.6rem;         /* ~11px at 19px base */
    color: #555;               /* was #777 — small text needs more contrast */
    font-weight: normal;
    line-height: 1.4;
}

.presence-header__title {
    max-width: 900px;
}

.presence-header h1 {
    font-size: 1.65rem;
    line-height: 1.2;
    margin-bottom: 0.35rem;
    font-weight: 350;          /* slightly lighter than normal — portraits lead */
}

.page-subtitle {
    color: #555;                    /* was #666 — stronger contrast */
    font-size: 1rem;
    margin: 0;
}

/* Homepage variant — entering the house: portraits lead, title serves */
.presence-header--home {
    padding: 1.5rem 1.25rem 0.75rem;       /* restored ~5px breathing room */
}
.presence-header--home .rabbi {
    width: 116px;                           /* +10% from 106 */
}
.presence-header--home h1 {
    font-size: 1.8rem;                      /* -5% from 1.9 */
    color: #5f7446;
    font-weight: 350;
}

@media (min-width: 701px) {
    .presence-header {
        padding: 1.75rem 2rem 0.75rem;
    }
    .presence-header__portraits {
        gap: 2.5rem;
        margin-bottom: 0.2rem;
    }
    .rabbi { width: 110px; }   /* wide inner — slightly more primary */
    .rabbi-name {
        font-size: 0.68rem;   /* ~13px */
    }
    .presence-header h1 {
        font-size: 1.9rem;
    }
    .presence-header--home {
        padding: 1.75rem 2rem 0.5rem;      /* restored ~5px breathing room */
    }
    .presence-header--home .rabbi { width: 144px; }    /* +9% from 132 */
    .presence-header--home h1 { font-size: 2.05rem; }  /* -5% from 2.15 */
}

/* Book Intro — quiet opening note, NOT a card.
   Softened via tone only: no bg, no border, just generous padding
   and a subtle warm text color. */
.book-intro {
    padding: 0.5rem 0 1.25rem;
    margin: 0 0 2rem;
    background: transparent;
    border: none;
    box-shadow: none;
}

.book-intro p {
    margin: 0 0 1rem;
    color: var(--text-main);
    line-height: 1.9;
    font-size: 1.02rem;
}
.book-intro p:last-child {
    margin-bottom: 0;
}

/* Study-order block — quiet companion to book-intro.
   No bg, no border — just a typographic section with its own heading. */
.book-study-order {
    margin: 0 0 2.5rem;
    padding: 0.25rem 0 0;
    background: transparent;
    border: none;
}
.book-study-order h2 {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    color: var(--brand-green);
    font-weight: 500;
}
.book-study-order .source-note,
.book-download .source-note {
    margin: 0.25rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}
.book-study-order p {
    margin: 0 0 1rem;
    color: #333;
    line-height: 1.9;
}
.book-study-order p:last-child {
    margin-bottom: 0;
}

/* Download Section — typographic group, not a card.
   No bg, no border. Heading + links, spacious. */
.book-download {
    background: transparent;
    padding: 0;
    border: none;
    margin: 0 0 2.5rem;
}
.book-download h2 {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--brand-green);
    margin: 0 0 0.75rem;
}
.book-download h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-main);
    margin: 1.25rem 0 0.4rem;
}

.download-link {
    display: block;
    color: #3d4a2c;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: underline;
    text-decoration-color: #5f7446;
    text-underline-offset: 3px;
    padding: 0.35rem 0;
}

.download-link:active {
    color: #2f3a22;
}

.download-link:focus {
    outline: 3px solid #2f3a22;
    outline-offset: 2px;
}

/* ─── Quick Grid ─── */

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.4rem;
    margin: 1rem 0 2.5rem;
}

.q-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    border: 1px solid #c6cdb0;
    background: #fff;
    padding: 0.5rem 0.25rem;
    line-height: 1.3;
    min-height: 44px;
}

.q-item:active {
    background: #edf5e8;
    border-color: #5f7446;
}

.q-item:focus {
    outline: 3px solid #2f3a22;
    outline-offset: 2px;
}

.q-num {
    font-weight: 700;
    font-size: 1.1rem;
    color: #3d4a2c;
}

.q-range {
    font-size: 0.8rem;
    color: #333;
    font-weight: 500;
}

.q-dur {
    font-size: 0.72rem;
    color: #555;                 /* was #999 — fails AA at 11-12px */
}

/* ─── Lesson List ─── */

.lessons {
    margin-bottom: 2.5rem;
}

.lessons-intro {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
}

.lessons-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Lesson rows — full timeline always visible */
.lesson-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    padding: 1rem;
    border-bottom: 1px solid #e4e4e0;
    background: #fff;
    scroll-margin-top: 4.5rem;
}

.lesson-row:first-child {
    border-top: 1px solid #e8e8e5;
}

.lesson-row:target {
    background: #edf5e8;
    border-right: 3px solid #5f7446;
}

.lesson-row.playing {
    background: #edf5e8;
    border-right: 3px solid #5f7446;
}

.lesson-row {
    cursor: pointer;
}

/* Play button */
.lesson-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    min-height: 2.8rem;
    padding: 0.3rem 0.7rem;
    color: #3d4a2c;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    border: 2px solid #c6cdb0;
    background: #f0f6ec;
    flex-shrink: 0;
}

.lesson-play:active {
    background: #5f7446;
    color: #fff;
    border-color: #2d5c17;
}

.lesson-play:focus {
    outline: 3px solid #2f3a22;
    outline-offset: 2px;
}

/* Info block next to play button */
.lesson-info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.5rem;
    min-width: 0;
    flex: 1;
}

.lesson-range {
    font-size: 1.05rem;
    font-weight: 600;
    color: #222;
}

.lesson-topic {
    font-size: 0.85rem;
    font-weight: 500;
    color: #3d4a2c;
}

.lesson-dur {
    font-size: 0.82rem;
    color: #555;                 /* was #999 — AA passable */
}

/* Timeline — always visible */
.lesson-times {
    width: 100%;
    padding-right: 3.65rem;
    font-size: 0.92rem;
    color: #444;
    line-height: 1.9;
}

/* ─── Sticky Audio Player ─────────────────────────────────────────────
   Uses native <audio controls> so browsers always render:
     play/pause • current time • seek slider • total duration
   Layout guarantees slider + times always have room, even on mobile.
   On narrow screens we stack (label on top, full-width audio below)
   so the slider gets the full viewport width. */

.player-bar {
    position: fixed;           /* sticky breaks inside site-frame's overflow:hidden */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    border-top: 2px solid #5f7446;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.player-bar[hidden] {
    display: none;
}

/* Anchor navigation leaves room for the fixed player bar.
   Body padding only when the player is actually visible. */
html {
    scroll-padding-bottom: 88px;
}
body:has(.player-bar:not([hidden])) {
    padding-bottom: 88px;
}
@media (max-width: 700px) {
    html {
        scroll-padding-bottom: 104px;
    }
    body:has(.player-bar:not([hidden])) {
        padding-bottom: 104px;
    }
}

.player-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #3d4a2c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;          /* title never eats more than 40% of the bar */
}

.player-audio {
    flex: 1 1 auto;
    min-width: 0;            /* lets the audio shrink/grow inside flex */
    width: auto;
    max-width: 100%;
    height: 2.5rem;
}

@media (max-width: 700px) {
    .player-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
    }
    .player-label {
        max-width: 100%;
        font-size: 0.9rem;
        text-align: center;
    }
    .player-audio {
        width: 100%;
        height: 2.5rem;
    }
}

/* ─── Print ─── */

@media print {
    .site-nav {
        display: none;
    }

    body {
        font-size: 12pt;
    }

    main {
        max-width: 100%;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .card {
        background: none;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .hero-actions {
        display: none;
    }
}