/* =============================================================
   HIT AND RUN: MUSICAL IMPROV — Site Stylesheet
   Imports: css/design-tokens.css (via functions.php)
   ============================================================= */

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

body {
    margin: 0;
    background: var(--color-background);
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

img, video { display: block; max-width: 100%; height: auto; }

/* ─── Accessibility ──────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--hnr-yellow);
    color: var(--ink-900);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    text-decoration: none;
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
}

/* ─── Layout helpers ─────────────────────────────────────── */
.container {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
section { padding: var(--space-20) 0; }
section.tight { padding: var(--space-12) 0; }
section.on-black { background: var(--ink-900); color: var(--hnr-bone); }
section.on-black .section-h { color: var(--hnr-bone); }

/* ─── Typography helpers ─────────────────────────────────── */
.section-h {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    font-size: clamp(var(--text-3xl), 3.5vw, 42px);
    line-height: var(--lh-tight);
    margin: 14px 0 0;
    color: var(--ink-900);
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 13px 22px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease-out),
        transform  var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        color      var(--duration-fast) var(--ease-out);
}
.btn:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
}

/* Primary — red */
.btn--primary {
    background: var(--hnr-red);
    color: #fff;
    box-shadow: var(--shadow-poster);
}
.btn--primary:hover  { background: var(--red-600); color: #fff; }
.btn--primary:active { transform: scale(.97); background: var(--red-800); }

/* Secondary — outlined black */
.btn--secondary {
    background: transparent;
    color: var(--ink-900);
    border: 2px solid var(--ink-900);
    box-shadow: none;
}
.btn--secondary:hover  { background: var(--ink-900); color: #fff; }
.btn--secondary:active { transform: scale(.97); }

/* Accent — yellow */
.btn--accent {
    background: var(--hnr-yellow);
    color: var(--ink-900);
    box-shadow: var(--shadow-poster);
}
.btn--accent:hover  { background: var(--yellow-600); color: var(--ink-900); }
.btn--accent:active { transform: scale(.97); background: var(--yellow-700); }

/* Ghost — transparent, inherits text color */
.btn--ghost {
    background: transparent;
    color: var(--hnr-red);
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: none;
}
.btn--ghost:hover { background: var(--red-50); color: var(--red-600); }

/* Sizes */
.btn--lg { font-size: var(--text-base); padding: 16px 28px; }
.btn--sm { font-size: var(--text-xs);   padding: 9px  14px; }

/* ─── Navigation ─────────────────────────────────────────── */
.site-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--ink-900);
    color: #fff;
    transition: padding var(--duration-base) var(--ease-out);
}
.site-nav__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 32px;
    align-items: center;
}
.site-nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}
.site-nav__logo,
.site-nav__brand img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    object-fit: contain;
}
.site-nav__brand-text {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1;
}
.site-nav__brand-text small {
    display: block;
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.18em;
    color: var(--ink-300);
    margin-top: 4px;
}
.site-nav__links {
    display: flex;
    gap: 28px;
    justify-self: center;
}
.site-nav__links a,
.site-nav__links .menu-item a {
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 2px;
    transition: color var(--duration-fast) var(--ease-out);
}
.site-nav__links a:hover,
.site-nav__links .current-menu-item a,
.site-nav__links .current-page-ancestor a { color: var(--hnr-yellow); }
.site-nav__cta { justify-self: end; }
.site-nav__burger {
    display: none;
    background: none;
    border: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    justify-self: end;
}
.site-nav__burger span {
    width: 24px;
    height: 2px;
    background: #fff;
    display: block;
    transition: opacity var(--duration-fast);
}

/* Scroll stripe — reveals after scroll */
.site-nav__scroll-stripe {
    height: 0;
    overflow: hidden;
    transition: height var(--duration-base) var(--ease-out);
}
.site-nav.is-scrolled .site-nav__scroll-stripe { height: 4px; }

/* Mobile menu */
.site-nav__mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--ink-900);
    border-top: 1px solid var(--ink-700);
}
.site-nav__mobile a,
.site-nav__mobile .menu-item a {
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: var(--fw-demi);
}

/* WordPress menu list resets inside nav */
.site-nav__links ul,
.site-nav__mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inherit;
    flex-direction: inherit;
    gap: inherit;
}
.site-nav__links ul { display: flex; gap: 28px; }
.site-nav__mobile ul { display: flex; flex-direction: column; gap: 14px; }
/* Hide sub-menus in main nav (implement mega-menu separately if needed) */
.site-nav__links .sub-menu { display: none; }

@media (max-width: 780px) {
    .site-nav__links,
    .site-nav__cta { display: none; }
    .site-nav__burger { display: flex; }
    .site-nav__inner { grid-template-columns: auto 1fr auto; }
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
    position: relative;
    background: var(--ink-900);
    color: #fff;
    padding: var(--space-20) 0 var(--space-24);
    overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__curtain {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0.18;
    pointer-events: none;
}
.hero__curtain span { flex: 1; height: 100%; }
.hero__curtain span:nth-child(1)  { background: linear-gradient(180deg, transparent, var(--red-700)); }
.hero__curtain span:nth-child(2)  { background: linear-gradient(180deg, transparent, var(--orange-700)); }
.hero__curtain span:nth-child(3)  { background: linear-gradient(180deg, transparent, var(--yellow-800)); }
.hero__curtain span:nth-child(4)  { background: linear-gradient(180deg, transparent, var(--green-700)); }
.hero__curtain span:nth-child(5)  { background: linear-gradient(180deg, transparent, var(--blue-700)); }
.hero__curtain span:nth-child(6)  { background: linear-gradient(180deg, transparent, var(--blue-800)); }
.hero__curtain span:nth-child(7)  { background: linear-gradient(180deg, transparent, var(--red-700)); }
.hero__curtain span:nth-child(8)  { background: linear-gradient(180deg, transparent, var(--yellow-800)); }
.hero__curtain span:nth-child(9)  { background: linear-gradient(180deg, transparent, var(--green-700)); }
.hero__curtain span:nth-child(10) { background: linear-gradient(180deg, transparent, var(--orange-700)); }
.hero__curtain span:nth-child(11) { background: linear-gradient(180deg, transparent, var(--red-700)); }

.hero__content { position: relative; text-align: center; }
.hero__eyebrow { color: var(--hnr-yellow); }
.hero__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: clamp(48px, 9vw, 128px);
    line-height: 0.95;
    margin: 18px 0 24px;
    color: #fff;
}
.hero__line  { display: block; }
.hero__line--accent { color: var(--hnr-yellow); font-style: italic; }
.hero__lede {
    max-width: 680px;
    margin: 0 auto;
    font-size: var(--text-lg);
    line-height: var(--lh-loose);
    color: var(--ink-200);
}
.hero__ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
}
.hero__ghost { color: var(--hnr-yellow); }
.hero__ghost:hover { background: rgba(201,154,60,.12); color: var(--hnr-yellow); }
.hero__stats {
    display: flex;
    justify-content: center;
    gap: 64px;
    margin-top: var(--space-16);
    flex-wrap: wrap;
}
.hero__stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.hero__stats strong {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 42px;
    color: var(--hnr-yellow);
    letter-spacing: 0.04em;
    line-height: 1;
}
.hero__stats span {
    font-size: 11.5px;
    font-weight: var(--fw-demi);
    letter-spacing: 0.14em;
    color: var(--ink-300);
    text-transform: uppercase;
}

/* ─── Reviews ────────────────────────────────────────────── */
.reviews { background: var(--ink-50); padding: var(--space-16) 0; }
.reviews__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.reviews__rail {
    overflow-x: auto;
    padding: 8px 0 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) transparent;
}
.reviews__track {
    display: flex;
    gap: 16px;
    padding: 0 24px;
}
.review-card {
    flex: 0 0 320px;
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translate(0, -2px); }
.review-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.src-pill {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--radius-full);
}
.src-pill--trustpilot { background: var(--green-100); color: var(--green-800); }
.src-pill--google     { background: var(--blue-50);   color: var(--blue-700);  }
.review-card__when {
    font-size: 11px;
    color: var(--ink-500);
    font-family: var(--font-mono);
}
.review-card blockquote {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--ink-700);
    font-style: italic;
}
.review-card footer {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--ink-900);
}

/* ─── About ──────────────────────────────────────────────── */
.about { padding: var(--space-24) 0; }
.about__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: center;
}
.about__copy .lead {
    font-size: 19px;
    line-height: var(--lh-loose);
    color: var(--ink-100);
    margin-top: 24px;
}
.about__copy p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--ink-200);
    margin-top: 18px;
}
.about__copy strong { color: var(--hnr-yellow); }
.about__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.about__mark {
    background: var(--ink-800);
    padding: 28px;
    border-radius: var(--radius-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.about__logo, .about__mark img {
    width: 100%;
    max-width: 280px;
    border-radius: var(--radius-lg);
}
.about__stripe { width: 100%; }

/* ─── Shows grid ─────────────────────────────────────────── */
.shows { padding: var(--space-24) 0; background: var(--ink-50); }
.shows__head { text-align: center; margin-bottom: 48px; }
.shows__head .section-h { margin: 14px auto 16px; }
.shows__where { font-size: 15px; color: var(--ink-600); }
.shows__where a { color: var(--hnr-red); font-weight: var(--fw-demi); text-decoration-thickness: 2px; }
.shows__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.shows__footer { text-align: center; margin-top: 40px; }
.shows__empty { text-align: center; color: var(--ink-500); padding: 64px 0; }

/* Event card */
.event-card {
    background: #fff;
    border: 2px solid var(--ink-900);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-poster);
    transition:
        transform  var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}
.event-card:hover {
    transform: translate(-2px, -3px);
    box-shadow: 9px 9px 0 var(--hnr-black);
}
.event-card__stripes {
    display: flex;
    height: 10px;
}
.event-card__stripes > div { flex: 1; }
.event-card__stripes > div:nth-child(1) { background: var(--hnr-red); }
.event-card__stripes > div:nth-child(2) { background: var(--hnr-orange); }
.event-card__stripes > div:nth-child(3) { background: var(--hnr-yellow); }
.event-card__stripes > div:nth-child(4) { background: var(--hnr-green); }
.event-card__body { padding: 16px 18px 18px; }
.event-card__row { display: flex; gap: 14px; align-items: flex-start; }
.event-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--ink-900);
    border-radius: var(--radius-md);
    width: 62px;
    flex-shrink: 0;
    overflow: hidden;
}
.event-card__date .m {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--hnr-red);
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 3px 0;
}
.event-card__date .d {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    padding: 2px 0 4px;
    color: var(--ink-900);
}
.event-card__tag {
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hnr-red);
    margin-bottom: 4px;
}
.event-card h3,
.event-card h3 a {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0;
    color: var(--ink-900);
    text-decoration: none;
}
.event-card h3 a:hover { color: var(--hnr-red); }
.event-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0;
    font-size: 12.5px;
    color: var(--ink-600);
    font-family: var(--font-mono);
}
.event-card__status { color: var(--green-700); font-weight: var(--fw-demi); }
.event-card__status.is-warn   { color: var(--orange-700); }
.event-card__status.is-danger { color: var(--red-700); }
.event-card__status.is-muted  { color: var(--ink-500); }
.event-card__cta { width: 100%; }
.event-card__cta--disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }

/* ─── Mailing list ───────────────────────────────────────── */
.mailing {
    padding: var(--space-24) 0;
    background: var(--hnr-yellow);
    color: var(--ink-900);
    position: relative;
    overflow: hidden;
}
.mailing::before,
.mailing::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(
        to bottom,
        var(--hnr-red)    0    25%,
        var(--hnr-orange) 25%  50%,
        var(--hnr-yellow) 50%  75%,
        var(--hnr-green)  75% 100%
    );
}
.mailing::before { top: 0; }
.mailing::after  { bottom: 0; }
.mailing .eyebrow { color: var(--ink-900); }
.mailing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.mailing__form label { display: block; margin-bottom: 14px; }
.mailing__form label span {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.mailing__form input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 12px 14px;
    border: 2px solid var(--ink-900);
    background: #fff;
    border-radius: var(--radius-md);
    outline: none;
    color: var(--ink-900);
    box-sizing: border-box;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}
.mailing__form input:focus { box-shadow: 0 0 0 3px var(--hnr-blue); }
.mailing__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mailing__form .btn { margin-top: 8px; background: var(--ink-900); color: #fff; box-shadow: none; }
.mailing__form .btn:hover { background: var(--ink-700); }
.mailing__toast {
    margin-top: 14px;
    background: var(--ink-900);
    color: var(--hnr-yellow);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    font-weight: var(--fw-demi);
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--ink-900); color: var(--ink-200); }
.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 64px 24px 32px;
    max-width: var(--container-lg);
    margin: 0 auto;
}
.footer__logo, .footer__col--brand img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    object-fit: contain;
}
.footer__col-heading, .footer__col h6 {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin: 4px 0 14px;
}
.footer__col p { font-size: 13px; line-height: 1.55; margin: 0; }
.footer__col ul, .footer__nav-list { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col a, .footer__nav-list a {
    color: var(--ink-200);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--duration-fast) var(--ease-out);
}
.footer__col a:hover, .footer__nav-list a:hover { color: var(--hnr-yellow); }
.footer__map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--ink-300) !important;
}
.footer__map-link:hover { color: var(--hnr-yellow) !important; }
.footer__show-time { margin-top: 12px; font-size: 12px; color: var(--ink-400); }
.footer__show-time a { color: var(--ink-300); }
.footer__social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.footer__social a {
    color: var(--ink-400);
    transition: color var(--duration-fast) var(--ease-out);
    display: flex;
    align-items: center;
}
.footer__social a:hover { color: var(--hnr-yellow); }
.footer__legal {
    display: flex;
    justify-content: space-between;
    padding: 18px 24px 32px;
    border-top: 1px solid var(--ink-700);
    font-size: 12px;
    color: var(--ink-400);
    font-family: var(--font-mono);
    max-width: var(--container-lg);
    margin: 0 auto;
}

/* ─── Modal ──────────────────────────────────────────────── */
.modal-scrim {
    position: fixed;
    inset: 0;
    background: var(--scrim-strong);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    animation: hnrFadeIn 200ms var(--ease-out);
}
.modal-scrim[hidden] { display: none; }
@keyframes hnrFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
    background: #fff;
    border-radius: var(--radius-xl);
    max-width: 560px;
    width: 100%;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: hnrPopIn 360ms var(--ease-bounce);
}
@keyframes hnrPopIn {
    from { transform: translateY(20px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);      opacity: 1; }
}
.modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 12px;
}
.modal__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 22px;
    margin: 6px 0 0;
    color: var(--ink-900);
}
.modal__close {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--ink-700);
    line-height: 1;
    padding: 0 4px;
    transition: color var(--duration-fast) var(--ease-out);
}
.modal__close:hover { color: var(--hnr-red); }
.modal__body { padding: 8px 24px 16px; }
.modal__loading { color: var(--ink-500); font-size: var(--text-sm); padding: 12px 0; }
.modal__field { margin-bottom: 16px; }
.modal__field label, .modal__field > label {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--ink-700);
}
.modal__dates { display: flex; flex-direction: column; gap: 6px; }
.date-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 2px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color var(--duration-fast) var(--ease-out);
    width: 100%;
}
.date-btn:hover { border-color: var(--ink-400); }
.date-btn.is-on  { border-color: var(--hnr-red); background: var(--red-50); }
.date-btn span   { font-weight: var(--fw-demi); color: var(--ink-900); font-size: 14px; }
.date-btn small  { color: var(--ink-500); font-family: var(--font-mono); font-size: 11px; }
.modal__split { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.tier-row { display: flex; flex-direction: column; gap: 6px; }
.tier-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: #fff;
    border: 2px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.tier-btn:hover { border-color: var(--ink-400); }
.tier-btn.is-on  { border-color: var(--hnr-red); background: var(--red-50); }
.tier-btn strong { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.tier-btn span   { font-size: 12px; color: var(--ink-600); }
.qty {
    display: flex;
    align-items: center;
    border: 2px solid var(--ink-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.qty button {
    flex: 1;
    background: none;
    border: none;
    font-size: 22px;
    padding: 10px;
    cursor: pointer;
    color: var(--ink-900);
    transition: background var(--duration-fast) var(--ease-out);
}
.qty button:hover { background: var(--ink-100); }
.qty span { flex: 1; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px; }
.modal__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--ink-100);
    background: var(--ink-50);
}
.modal__total { display: flex; flex-direction: column; }
.modal__total span { font-size: 11px; font-weight: var(--fw-demi); letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-500); }
.modal__total strong { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 26px; color: var(--ink-900); }

/* ─── Page header ────────────────────────────────────────── */
.page-header {
    background: var(--ink-900);
    color: #fff;
    padding: var(--space-16) 0 var(--space-12);
}
.page-header__stripe { width: 100%; margin-bottom: var(--space-6); }
.page-title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    line-height: var(--lh-tight);
    color: #fff;
    margin: 14px 0 8px;
}
.page-subtitle { font-size: var(--text-base); color: var(--ink-300); margin: 0; }

/* ─── Post card (blog/archive) ───────────────────────────── */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: var(--space-8) 0; }
.post-card {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.post-card:hover { transform: translate(0, -2px); box-shadow: var(--shadow-md); }
.post-card__thumb img { width: 100%; height: 200px; object-fit: cover; }
.post-card__body { padding: 20px; }
.post-card__meta { font-size: var(--text-xs); color: var(--ink-400); margin-bottom: 8px; font-family: var(--font-mono); }
.post-card__title { font-family: var(--font-display); font-size: 20px; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; line-height: var(--lh-snug); margin: 0 0 10px; }
.post-card__title a { color: var(--ink-900); text-decoration: none; }
.post-card__title a:hover { color: var(--hnr-red); }
.post-card__excerpt { font-size: var(--text-sm); color: var(--ink-600); line-height: var(--lh-normal); margin: 0 0 16px; }

/* ─── Page content (generic pages, single posts) ─────────── */
.page-content { padding: var(--space-12) 0 var(--space-20); background: var(--ink-50); }
.entry-content {
    max-width: 720px;
}
.entry-content p  { margin: 0 0 1.25em; line-height: var(--lh-loose); }
.entry-content h2 { font-size: var(--text-2xl); margin: 2em 0 .5em; }
.entry-content h3 { font-size: var(--text-xl);  margin: 1.75em 0 .5em; }
.entry-content a  { color: var(--hnr-red); text-decoration-thickness: 2px; }
.entry-content blockquote {
    border-left: 4px solid var(--hnr-red);
    margin: 1.5em 0;
    padding: .75em 1.25em;
    font-style: italic;
    color: var(--ink-600);
    background: var(--red-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.entry-content img { border-radius: var(--radius-md); margin: 1.5em 0; }

/* ─── Single post ────────────────────────────────────────── */
.single-post__header { padding: var(--space-12) 0; }
.single-post__stripe { margin-bottom: var(--space-6); }
.single-post__meta { font-size: var(--text-sm); color: var(--ink-500); font-family: var(--font-mono); margin-bottom: 12px; }
.single-post__divider { margin: 0 6px; }
.single-post__title { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); margin: 0 0 var(--space-6); }
.single-post__thumb { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-10); }
.single-post__body { padding-bottom: var(--space-16); }
.single-post__footer { border-top: 1px solid var(--ink-200); padding-top: var(--space-8); }

/* ─── Single show ────────────────────────────────────────── */
.show-single__header { padding: var(--space-8) 0; }
.show-single__stripes { margin-bottom: var(--space-6); }
.show-single__title { margin: 12px 0 16px; }
.show-single__when { font-size: var(--text-sm); color: var(--ink-600); font-family: var(--font-mono); margin-bottom: 12px; }
.show-single__when a { color: var(--hnr-red); }
.status-badge { display: inline-block; font-size: var(--text-sm); font-weight: var(--fw-demi); padding: 4px 10px; border-radius: var(--radius-full); }
.status-badge--on-sale   { background: var(--green-50);  color: var(--green-700); }
.status-badge--almost-full { background: var(--orange-50); color: var(--orange-700); }
.status-badge--sold-out  { background: var(--red-50);    color: var(--red-700); }
.status-badge--cancelled { background: var(--ink-100);   color: var(--ink-500); }
.show-single__thumb { border-radius: var(--radius-lg); overflow: hidden; margin: var(--space-8) 0; }
.show-single__tickets { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--ink-200); }
.show-single__tickets-heading { font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.ticket-tiers { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-6); }
.ticket-tier {
    flex: 1;
    min-width: 200px;
    background: var(--ink-50);
    border: 2px solid var(--ink-200);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ticket-tier strong { font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.ticket-tier span { font-size: var(--text-sm); color: var(--ink-600); }
.show-single__sold-out { color: var(--red-700); font-weight: var(--fw-demi); margin-top: var(--space-4); }

/* ─── Cast archive ───────────────────────────────────────── */
.cast-grid-section { padding: var(--space-16) 0 var(--space-20); background: var(--ink-50); }
.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.cast-card {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.cast-card:hover { transform: translate(0, -2px); box-shadow: var(--shadow-md); }
.cast-card__photo { display: block; aspect-ratio: 1; overflow: hidden; }
.cast-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.cast-card__body { padding: 16px; }
.cast-card__name { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 4px; }
.cast-card__name a { color: var(--ink-900); text-decoration: none; }
.cast-card__name a:hover { color: var(--hnr-red); }
.cast-card__role { font-size: var(--text-sm); color: var(--hnr-red); font-weight: var(--fw-demi); margin: 0 0 2px; }
.cast-card__pronouns { font-size: 12px; color: var(--ink-400); margin: 0; }

/* ─── 404 ────────────────────────────────────────────────── */
.error-404 { padding: var(--space-32) 0; background: var(--ink-900); }
.error-404__inner { text-align: center; }
.error-404 .hnr-stripes { margin-bottom: var(--space-8); }
.error-404__heading { color: #fff; font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); margin: 16px 0 24px; }
.error-404__body { color: var(--ink-300); font-size: var(--text-lg); max-width: 560px; margin: 0 auto var(--space-8); }
.error-404__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─── No results ─────────────────────────────────────────── */
.no-results { padding: var(--space-20) 0; text-align: center; }
.no-results__heading { font-size: var(--text-3xl); }

/* ─── Widget ─────────────────────────────────────────────── */
.widget { margin-bottom: var(--space-8); }
.widget-title { font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 16px; }

/* ─── Post navigation ────────────────────────────────────── */
.nav-links { display: flex; justify-content: space-between; padding: var(--space-8) 0; border-top: 1px solid var(--ink-200); }
.nav-subtitle { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-400); margin-bottom: 4px; }
.nav-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-base); letter-spacing: 0.04em; text-transform: uppercase; }

/* ─── Icons ──────────────────────────────────────────────── */
.hnr-icon { display: inline-block; vertical-align: middle; stroke-width: 2; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .about__grid   { grid-template-columns: 1fr; gap: 32px; }
    .about__mark   { display: none; }   /* hide logo panel on mobile to save space */
}

@media (max-width: 780px) {
    .mailing__grid { grid-template-columns: 1fr; }
    .mailing__row  { grid-template-columns: 1fr; }
    .hero__stats   { gap: 32px; }
    .modal__split  { grid-template-columns: 1fr; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
    .footer__legal { flex-direction: column; gap: 6px; }
    .page-content .container { padding: 0 16px; }
}

@media (max-width: 480px) {
    .footer__inner { grid-template-columns: 1fr; }
    .hero__ctas    { flex-direction: column; }
    .about__ctas   { flex-direction: column; }
}

html { scroll-behavior: smooth; }

/* ============================================================
   MULTI-PAGE ADDITIONS — HNR Improv 2026
   ============================================================ */

/* ─── Prose (rich text content areas) ───────────────────── */
.prose {
    max-width: 72ch;
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    color: var(--color-text-primary);
}
.prose h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    margin: var(--space-10) 0 var(--space-4);
    color: var(--color-text-primary);
}
.prose h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-demi);
    font-size: var(--text-2xl);
    margin: var(--space-8) 0 var(--space-3);
}
.prose p  { margin: 0 0 var(--space-4); }
.prose ul,
.prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose strong { font-weight: var(--fw-demi); }
.prose em     { font-style: italic; }
.prose a      { color: var(--color-text-link); }
.prose a:hover { color: var(--color-text-link-hover); }
.prose blockquote {
    border-left: 4px solid var(--hnr-red);
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    background: var(--ink-50);
    font-style: italic;
    font-size: var(--text-lg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}
.badge--primary { background: var(--hnr-red); color: #fff; }
.badge--yellow  { background: var(--hnr-yellow); color: var(--ink-900); }
.badge--muted   { background: var(--ink-200); color: var(--ink-600); }

/* ─── Inner-page hero ────────────────────────────────────── */
.page-hero {
    background: var(--ink-900);
    color: #fff;
    padding: var(--space-16) 0 var(--space-12);
    position: relative;
}
.page-hero .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-8);
}
.page-hero__title {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(var(--text-4xl), 6vw, 72px);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.page-hero__sub {
    max-width: 600px;
    color: var(--ink-300);
    font-size: var(--text-lg);
    margin: var(--space-2) 0 0;
}
.page-hero .hnr-stripes { margin-top: var(--space-8); }

/* ─── Sidebar card (used on About, Press) ────────────────── */
.about-sidebar-card,
.press-sidebar-card {
    background: var(--ink-50);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.about-sidebar-card h3,
.press-sidebar-card h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-demi);
    font-size: var(--text-xl);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin: var(--space-2) 0 var(--space-3);
}
.about-sidebar-card p,
.press-sidebar-card p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.sidebar-show-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--ink-200); }
.sidebar-show-item:last-of-type { border-bottom: 0; margin-bottom: var(--space-4); }
.sidebar-show-item__date { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-show-item a { font-family: var(--font-display); font-weight: var(--fw-demi); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-primary); text-decoration: none; }
.sidebar-show-item a:hover { color: var(--hnr-red); }

/* ─── About page ─────────────────────────────────────────── */
.about-content { padding: var(--space-16) 0; }
.about-content__inner {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .about-content__inner { grid-template-columns: 1fr; }
}

/* ─── Cast Archive — grid ────────────────────────────────── */
.cast-grid-section { padding: var(--space-16) 0; }
.cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-6);
}
.cast-grid--alumni .cast-card { opacity: 0.80; }
.cast-grid--alumni .cast-card:hover { opacity: 1; }

.cast-card {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.cast-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.cast-card__photo-link { display: block; aspect-ratio: 1; overflow: hidden; }
.cast-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.cast-card:hover .cast-card__photo { transform: scale(1.04); }
.cast-card__photo--placeholder {
    background: var(--ink-100);
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-400);
}

.cast-card__body { padding: var(--space-4); }
.cast-card__name { font-family: var(--font-display); font-weight: var(--fw-demi); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--space-1); }
.cast-card__name a { color: var(--color-text-primary); text-decoration: none; }
.cast-card__name a:hover { color: var(--hnr-red); }
.cast-card__role { font-size: var(--text-xs); color: var(--hnr-red); margin: 0 0 var(--space-1); }
.cast-card__pronouns { font-size: var(--text-xs); color: var(--ink-400); margin: 0; }
.cast-card__tenure { font-size: var(--text-xs); color: var(--ink-400); margin: var(--space-1) 0 0; }
.cast-card__quote { font-size: var(--text-xs); font-style: italic; color: var(--ink-500); margin: var(--space-2) 0 0; line-height: 1.4; }

.cast-empty { color: var(--color-text-secondary); font-style: italic; }

.cast-alumni-section { padding: var(--space-16) 0; }
.cast-alumni-section .section-h { color: #fff; margin-bottom: var(--space-8); }

/* ─── Cast Member Single ─────────────────────────────────── */
.cast-member-hero {
    background: var(--ink-900);
    color: #fff;
    padding: var(--space-16) 0 0;
}
.cast-member-hero__inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-10);
    align-items: center;
    padding-bottom: var(--space-12);
}
.cast-member-hero__photo { position: relative; }
.cast-member-hero__img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.cast-member-hero__placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--ink-800);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-400);
}
.cast-breadcrumb { margin-bottom: var(--space-4); }
.cast-breadcrumb a { color: var(--ink-400); font-size: var(--text-sm); text-decoration: none; letter-spacing: 0.06em; }
.cast-breadcrumb a:hover { color: var(--hnr-yellow); }
.cast-member-hero__name {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: clamp(var(--text-3xl), 5vw, 64px);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    color: #fff;
    margin: var(--space-3) 0 var(--space-2);
    line-height: var(--lh-tight);
}
.cast-member-hero__role { color: var(--hnr-yellow); margin-bottom: var(--space-2); }
.cast-member-hero__pronouns { color: var(--ink-400); font-size: var(--text-sm); }
.cast-member-hero__tenure { color: var(--ink-400); font-size: var(--text-sm); }
.cast-member-hero__quote {
    margin: var(--space-6) 0 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--hnr-yellow);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--ink-200);
    line-height: var(--lh-normal);
}
.cast-member-hero__quote p { margin: 0; }

.cast-member-bio {
    padding: var(--space-16) 0;
    background: var(--color-background);
}
.cast-member-bio .prose { margin: 0 auto; }

.cast-member-nav {
    border-top: 1px solid var(--ink-200);
    padding: var(--space-8) 0;
}
.cast-member-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
}
.cast-member-nav__prev,
.cast-member-nav__next {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: var(--fw-demi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-primary);
}
.cast-member-nav__prev:hover,
.cast-member-nav__next:hover { color: var(--hnr-red); }
.cast-member-nav__next { justify-content: flex-end; text-align: right; }

@media (max-width: 700px) {
    .cast-member-hero__inner { grid-template-columns: 1fr; }
    .cast-member-hero__photo { max-width: 220px; margin: 0 auto; }
}

/* ─── Title Archives ─────────────────────────────────────── */
.title-archives { padding: var(--space-16) 0; }
.title-archives__intro {
    max-width: 64ch;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-10);
    line-height: var(--lh-normal);
}
.title-archives__year-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-12);
}
.title-archives__year-nav a {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: var(--fw-demi);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 14px;
    border: 1.5px solid var(--ink-300);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.title-archives__year-nav a:hover {
    background: var(--hnr-red);
    border-color: var(--hnr-red);
    color: #fff;
}
.title-archives__year {
    margin-bottom: var(--space-16);
    scroll-margin-top: 80px;
}
.title-archives__year-heading {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--text-4xl);
    letter-spacing: var(--ls-display);
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 2px solid var(--ink-200);
    padding-bottom: var(--space-3);
}
.title-archives__year-count {
    font-size: var(--text-sm);
    font-weight: var(--fw-book);
    color: var(--ink-400);
    letter-spacing: 0.04em;
    text-transform: none;
}
.title-archives__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0;
}
.title-archives__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--ink-100);
    counter-increment: none;
}
.title-archives__item:hover { background: var(--ink-50); }
.title-archives__date {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: var(--fw-demi);
    letter-spacing: 0.10em;
    color: var(--ink-400);
    min-width: 48px;
    flex-shrink: 0;
}
.title-archives__title {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-style: italic;
}

/* ─── Press Page ─────────────────────────────────────────── */
.press-content { padding: var(--space-16) 0; }
.press-content__inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-16);
    align-items: start;
}
@media (max-width: 900px) {
    .press-content__inner { grid-template-columns: 1fr; }
}

/* ─── Podcast Page ───────────────────────────────────────── */
.podcast-content { padding: var(--space-16) 0; }
.podcast-intro { max-width: 64ch; margin-bottom: var(--space-10); }
.podcast-subscribe-links {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}
.podcast-episodes { margin-top: var(--space-12); }
.podcast-episodes .section-h { margin-bottom: var(--space-8); }
.podcast-episodes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}
.podcast-episode-card {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: box-shadow var(--duration-fast);
}
.podcast-episode-card:hover { box-shadow: var(--shadow-md); }
.podcast-episode-card__meta { margin-bottom: var(--space-2); }
.podcast-episode-card__date { font-size: var(--text-xs); color: var(--ink-400); letter-spacing: 0.08em; text-transform: uppercase; }
.podcast-episode-card__title { font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-demi); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-2); }
.podcast-episode-card__title a { color: var(--color-text-primary); text-decoration: none; }
.podcast-episode-card__title a:hover { color: var(--hnr-red); }
.podcast-episode-card__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.podcast-episode-card__listen {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--hnr-red);
    text-decoration: none;
}
.podcast-episode-card__listen:hover { color: var(--red-700); }

/* ─── Show Archive ───────────────────────────────────────── */
.shows-archive { padding: var(--space-16) 0; }
.shows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

/* ─── Utility: on-black section text overrides ───────────── */
.on-black .prose { color: var(--ink-200); }
.on-black .prose a { color: var(--hnr-mustard); }
.on-black .prose h2 { color: var(--hnr-bone); }

/* ─── Responsive additions ───────────────────────────────── */
@media (max-width: 780px) {
    .cast-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .title-archives__list { grid-template-columns: 1fr; }
    .cast-member-nav__inner { grid-template-columns: 1fr; gap: var(--space-3); }
    .cast-member-nav__all { justify-self: start; }
    .page-hero__title { font-size: clamp(var(--text-3xl), 10vw, var(--text-4xl)); }
    .podcast-episodes__grid { grid-template-columns: 1fr; }
}

/* ─── Active nav link (JS-set for fallback menu) ─────────── */
.site-nav__links a.is-active,
.site-nav__links .menu-item.current-menu-item > a { color: var(--hnr-yellow) !important; }

/* ─── Title archives: active year pill ───────────────────── */
.title-archives__year-nav a.is-active {
    background: var(--hnr-red);
    border-color: var(--hnr-red);
    color: #fff;
}