/* v3.14.0 — sticky compact navigation and focused About introduction. */
.site-header-wrap {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.site-header-wrap .site-header {
    height: 104px;
    transition: height 200ms ease;
}
.site-header-wrap .site-brand {
    transition: font-size 200ms ease;
}
.site-header-wrap .site-brand img {
    max-height: 40px;
    transition: max-height 200ms ease;
}
.site-header-wrap.is-compact {
    border-bottom-color: var(--line);
}
.site-header-wrap.is-compact .site-header { height: 68px; }
.site-header-wrap.is-compact .site-brand { font-size: 24px; }
.site-header-wrap.is-compact .site-brand img { max-height: 34px; }

/* Two-column About hero: identity and portrait, no competing third message. */
.about-page-v2 .about-hero-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(36px, 5vw, 78px);
    align-items: center;
    padding-bottom: clamp(40px, 5vw, 68px);
}
.about-page-v2 .about-hero-heading {
    align-self: center;
    padding-top: 0;
    min-width: 0;
}
.about-page-v2 .about-hero-deck {
    max-width: 670px;
    margin-top: clamp(28px, 3vw, 44px);
    font-size: 28px !important;
    font-weight: 650;
    line-height: 1.3 !important;
}
.about-page-v2 .about-hero-portrait {
    justify-self: end;
    align-self: center;
    width: 100%;
    max-width: 440px;
    min-height: 0;
    max-height: 540px;
    aspect-ratio: 4 / 5;
}
.about-page-v2 .about-native-content { padding-top: clamp(44px, 5vw, 68px); }
.about-page-v2 .about-native-content > p:first-child {
    margin-bottom: clamp(56px, 6vw, 84px);
}

@media (max-width: 760px) {
    .site-header-wrap .site-header { height: 80px; }
    .site-header-wrap.is-compact .site-header { height: 60px; }
    .site-header-wrap .site-brand img { max-height: 34px; }
    .site-header-wrap.is-compact .site-brand img { max-height: 29px; }
    .site-header-wrap.is-compact .site-brand { font-size: 21px; }
    .about-page-v2 .about-hero-v2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding-bottom: 44px;
    }
    .about-page-v2 .about-hero-heading { align-self: start; }
    .about-page-v2 .about-hero-deck {
        font-size: 22px !important;
        line-height: 1.32 !important;
        margin-top: 26px;
    }
    .about-page-v2 .about-hero-portrait {
        justify-self: start;
        max-width: 420px;
        max-height: none;
        min-height: 0;
    }
    .about-page-v2 .about-native-content { padding-top: 44px; }
    .about-page-v2 .about-native-content > p:first-child { margin-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header-wrap,
    .site-header-wrap .site-header,
    .site-header-wrap .site-brand,
    .site-header-wrap .site-brand img { transition: none; }
}

/* v3.14.1 — more comfortable navigation sizes in both states. */
.site-header-wrap .site-brand { font-size: 28px; }
.site-header-wrap .site-nav .nav-link,
.site-header-wrap .search-button {
    font-size: 14px !important;
}
.site-header-wrap .site-brand img { max-height: 42px; }
.site-header-wrap.is-compact .site-brand { font-size: 24px; }
.site-header-wrap.is-compact .site-brand img { max-height: 34px; }

/* Work section headings must stick below the persistent navigation, not
   underneath it. The original 34px sticky top caused the overlap. */
@media (min-width: 821px) {
    .work-page-v2 .work-entry-heading {
        position: sticky;
        top: 124px;
        align-self: start;
        transition: top 200ms ease;
    }
    body:has(.site-header-wrap.is-compact) .work-page-v2 .work-entry-heading {
        top: 88px;
    }
}
@media (max-width: 820px) {
    /* Preserve the intentional non-sticky Work layout on narrow screens. */
    .work-page-v2 .work-entry-heading {
        position: static;
        top: auto;
    }
}
@media (max-width: 760px) {
    .site-header-wrap .site-brand { font-size: 23px; }
    .site-header-wrap.is-compact .site-brand { font-size: 21px; }
    .site-header-wrap .site-brand img { max-height: 36px; }
    .site-header-wrap.is-compact .site-brand img { max-height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
    .work-page-v2 .work-entry-heading { transition: none; }
}


/* v3.14.2 — sticky Work identity: number, title and role move together. */
@media (min-width: 821px) {
    .work-page-v2 .work-native-entry > .work-entry-heading {
        grid-column: 1 / span 2;
        grid-row: 1;
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        column-gap: clamp(26px, 4vw, 64px);
        align-items: start;
        position: sticky;
        top: 124px;
        align-self: start;
        z-index: 1;
    }
    .work-page-v2 .work-native-entry > .work-entry-body {
        grid-column: 3;
        grid-row: 1;
    }
    body:has(.site-header-wrap.is-compact) .work-page-v2 .work-native-entry > .work-entry-heading {
        top: 88px;
    }
}
.work-entry-title-stack { min-width: 0; }
.work-entry-heading .work-entry-number {
    display: block;
    align-self: start;
    margin: 0;
}
@media (min-width: 561px) and (max-width: 820px) {
    .work-page-v2 .work-native-entry > .work-entry-heading {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: clamp(16px, 3vw, 26px);
        grid-column: 1 / -1;
        position: static;
        top: auto;
    }
    .work-page-v2 .work-native-entry > .work-entry-body {
        grid-column: 2;
    }
}
@media (max-width: 560px) {
    .work-page-v2 .work-native-entry > .work-entry-heading {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        grid-column: 1;
        position: static;
        top: auto;
    }
    .work-page-v2 .work-native-entry > .work-entry-body {
        grid-column: 1;
    }
}

/* About belief and focus card titles use the established H3 scale rather
   than the larger 30px card-heading scale. Other pages are untouched. */
.about-page-v2 .about-native-content > ul > li strong {
    font-size: var(--type-h3) !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em;
}
@media (max-width: 680px) {
    .about-page-v2 .about-native-content > ul > li strong {
        font-size: var(--type-h3) !important;
        line-height: 1.25 !important;
    }
}

/* v3.14.3 — restore the original gold top rule above the sticky header.
   The rule already exists in default.hbs, but the sticky header's z-index
   covered it. It fades and slides away when navigation becomes compact. */
.top-rule {
    z-index: 250;
    opacity: 1;
    transform: translateY(0);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}
body:has(.site-header-wrap.is-compact) .top-rule {
    opacity: 0;
    transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
    .top-rule { transition: none; }
}


/* v3.14.6 — Smaller Essays and Talks titles only; book titles unchanged. */
.library-page .library-native-content > ul.library-essay-list > li strong,
.library-page .library-native-content > ul.library-talk-list > li strong {
    font-size: 22px !important;
    line-height: 1.3 !important;
    letter-spacing: -.012em;
}
@media (max-width: 680px) {
    .library-page .library-native-content > ul.library-essay-list > li strong,
    .library-page .library-native-content > ul.library-talk-list > li strong {
        font-size: 20px !important;
    }
}
/* Defensive styling for previously rendered card arrows. */
.library-native-content .native-card-arrow,
.about-native-content .about-selected-writing-list .native-card-arrow {
    display: none !important;
}