/* Apple 98.5 FM. Layout: dark broadcast bands (header, hero, support, footer)
   framing paper content bands, on a 1240px column. */
:root {
	--night: #13201A; --night-2: #1C2C24; --night-line: #2C4236; --night-soft: #3E5A4A;
	--paper: #F4F1E8; --sand: #ECE8DB; --card: #FFFFFF; --line: #E2DCCB;
	--ink: #13201A; --stone: #56615B; --mist: #A9B8AE; --cream: #F4F1E8; --cream-2: #C9D4CC;
	--red: #D63A33; --red-ink: #B02A22; --leaf: #98C55E; --harvest: #F2B33D;
	--display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
	--body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* Base */
body { background: var(--paper); color: var(--ink); font-family: var(--body); margin: 0; -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.site-main > * + * { margin-block-start: 0; }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, .wp-block-navigation-item__content:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); font-stretch: 100%; font-weight: 800; letter-spacing: -0.015em; word-spacing: .06em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1; }
.h-small, h2.h-small { font-size: clamp(24px, 3vw, 32px); }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { box-sizing: border-box; width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
.wrap.narrow { max-width: 820px; }
.stack { display: flex; flex-direction: column; gap: 28px; }
.stack-sm { display: flex; flex-direction: column; gap: 14px; }
.stack > *, .stack-sm > * { margin: 0 !important; }
.dark { background: var(--night); color: var(--cream); }
.dark a:not(.btn) { color: var(--cream); }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--red-ink); }
.dark .eyebrow { color: var(--leaf); }
.meta, .meta a { font-family: var(--mono); font-size: 13px; color: var(--red-ink); text-decoration: none; }
.meta-light, .dark .meta { color: var(--leaf); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sec-head > div { display: flex; flex-direction: column; gap: 8px; }
.more { font-weight: 700; text-decoration: none; color: var(--red-ink); }
.more:hover { text-decoration: underline; }
.band { padding-block: 72px; }
.band-tight { padding-top: 16px; }
.band-sand { background: var(--sand); }
[hidden] { display: none !important; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 700 17px/1 var(--body); text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; box-sizing: border-box; }
.btn svg { flex: none; }
.btn-red, .dark a.btn-red { background: var(--red); color: #FFFFFF; }
.btn-red:hover { background: var(--red-ink); color: #FFFFFF; }
.btn-ghost, .dark a.btn-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--night-soft); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cream-2); }
.btn-white { background: #FFFFFF; color: var(--ink); }
.btn-outline-white { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 2px #FFFFFF; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--night); }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--night); color: var(--cream); border-bottom: 1px solid var(--night-line); }
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 0; } }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 10px; }
.head-row > * { margin: 0 !important; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream) !important; text-decoration: none; flex: none; }
.brand img { display: block; }
.brand span { font-family: var(--display); font-stretch: 100%; font-weight: 800; font-size: 23px; letter-spacing: -.01em; }
.head-cta { display: flex; gap: 10px; align-items: center; flex: none; }
.site-nav { font-weight: 600; font-size: 16px; }
.site-nav .wp-block-navigation__container { gap: 26px; }
.site-nav .wp-block-navigation-item__content { color: var(--cream); text-decoration: none; padding-block: 10px; border-bottom: 2px solid transparent; }
.site-nav .wp-block-navigation-item__content:hover, .site-nav .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--leaf); }
.site-nav .wp-block-navigation-item__content { white-space: nowrap; }
.site-nav .wp-block-navigation__responsive-container-open { color: var(--cream); width: 48px; height: 48px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--night-soft); align-items: center; justify-content: center; }
@media (max-width: 1100px) {
	.site-nav { order: 3; }
	.site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.head-row { gap: 12px; }
	.head-row .brand { margin-right: auto !important; }
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--night); color: var(--cream); padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
.site-nav .is-menu-open .wp-block-navigation__container { gap: 6px; font-size: 22px; }
.site-nav .is-menu-open .wp-block-navigation-item__content { padding-block: 10px; }
.site-nav .wp-block-navigation__responsive-container-close { color: var(--cream); }
@media (max-width: 1240px) { .hide-md { display: none !important; } }
@media (max-width: 600px) { .hide-sm { display: none !important; } .brand img { height: 46px !important; } .brand span { font-size: 19px; } }

/* Hero */
.hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-block: 48px 64px; }
.hero-inner > * { margin: 0 !important; }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-copy > * { margin: 0 !important; }
.hero-title { font-size: clamp(44px, 6.2vw, 90px); line-height: .95; color: var(--cream); }
.hero-lede, .page-hero-lede { font-size: 20px; color: var(--cream-2); max-width: 34em; }
.hero-art { flex: 1 1 420px; min-width: 0; max-width: 600px; position: relative; }
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-art .hero-mascot { position: absolute; left: 22%; top: 14%; width: 56%; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
@media (prefers-reduced-motion: no-preference) { .hero-art .hero-mascot { animation: apple-bob 4s ease-in-out infinite; } }
@keyframes apple-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* On air card */
.onair { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.onair-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.live-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: apple-pulse 2s infinite; } }
@keyframes apple-pulse { 0% { box-shadow: 0 0 0 0 rgba(152, 197, 94, .55); } 70% { box-shadow: 0 0 0 10px rgba(152, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(152, 197, 94, 0); } }
.onair-time { font-size: 14px; color: var(--mist); }
.onair-show { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 26px; line-height: 1.1; }
.onair-host { margin-top: 2px; color: var(--mist); }
.bar { height: 6px; background: var(--night-line); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--leaf); border-radius: 6px; }
.onair-next { font-size: 15px; color: var(--mist); }
.onair-next b { color: var(--cream); font-weight: 600; }

/* Dial */
.dial { background: var(--sand); border-bottom: 1px solid var(--line); }
.dial .wrap { padding-block: 18px; }
.dial-scroll { overflow-x: auto; }
.dial svg { display: block; width: 100%; min-width: 720px; height: auto; }

/* Today strip */
.today-scroll { overflow-x: auto; padding: 4px 4px 10px; margin-inline: -4px; }
.today-row { display: flex; gap: 14px; min-width: max-content; }
.slot { width: 228px; padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
.slot .t { font-size: 14px; color: var(--stone); }
.slot .n { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 20px; line-height: 1.15; }
.slot .n a { color: inherit; text-decoration: none; }
.slot .n a:hover { text-decoration: underline; }
.slot .h { font-size: 15px; color: var(--stone); }
.slot.now { background: var(--night); border-color: var(--night); color: var(--cream); }
.slot.now .t, .slot.now .h { color: var(--mist); }
.slot-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pill { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; background: var(--leaf); color: var(--night); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* Shows grid (query loop) */
.shows-query .shows, .related-query .related, .news-query .news-grid { list-style: none; margin: 0; padding: 0; }
.shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 22px; }
.shows > li { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.shows > li > * { margin: 0 !important; }
.show-img { margin: 0; }
.show-img img, .show-img a { display: block; border-radius: 20px; overflow: hidden; }
.show-img img { width: 100%; object-fit: contain !important; transition: transform .2s ease; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.shows > li:hover .show-img img { transform: scale(1.03); }
.show-title { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; }
.show-title a { color: var(--ink); text-decoration: none; }
.show-title a:hover { color: var(--red-ink); }

/* Support band */
.support { background: var(--red); color: #FFFFFF; }
.support-inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; padding-block: 64px; }
.support-inner > * { margin: 0 !important; }
.support-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.support-copy > * { margin: 0 !important; }
.support h2 { font-size: clamp(34px, 5vw, 62px); line-height: .98; color: #FFFFFF; }
.support p { font-size: 19px; max-width: 34em; }

/* News grid (query loop) */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.news-grid > li { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin: 0; transition: box-shadow .2s ease; }
.news-grid > li:hover { box-shadow: 0 10px 28px rgba(19, 32, 26, .12); }
.news-grid > li > * { margin: 0 !important; }
.news-img img { display: block; width: 100%; object-fit: cover; background: var(--sand); }
.news-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.news-body > * { margin: 0 !important; }
.news-title { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.news-title a { color: var(--ink); text-decoration: none; }
.news-title a:hover { color: var(--red-ink); }
.news-excerpt { color: var(--stone); font-size: 16px; }
.news-excerpt p { margin: 0; }
.news-excerpt .wp-block-post-excerpt__more-text { display: none; }
@media (min-width: 900px) {
	.news-home .news-grid { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
	.news-home .news-grid > li:first-child { grid-row: span 2; background: var(--night); border-color: var(--night); }
	.news-home .news-grid > li:first-child .news-title { font-size: 30px; }
	.news-home .news-grid > li:first-child .news-title a { color: var(--cream); }
	.news-home .news-grid > li:first-child .news-excerpt { color: var(--cream-2); }
	.news-home .news-grid > li:first-child .meta { color: var(--leaf); }
	.news-home .news-grid > li:not(:first-child) .news-img { display: none; }
}
.pager { margin-top: 12px; font-weight: 700; }
.pager a { color: var(--red-ink); text-decoration: none; }
.pager .page-numbers { padding: 6px 10px; border-radius: 8px; }
.pager .page-numbers.current { background: var(--night); color: var(--cream); }

/* Sponsors */
.sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.sponsor { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; max-width: 100%; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-sizing: border-box; }
a.sponsor { text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
a.sponsor:hover, a.sponsor:focus-visible { transform: translateY(-2px); border-color: var(--red); box-shadow: 0 6px 18px rgba(19, 32, 26, .12); }
a.sponsor:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sponsor img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Page hero */
.page-hero { padding-block: 44px 52px; }
.page-hero.flush-bottom { padding-bottom: 26px; }
.page-hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.page-hero-top > * { margin: 0 !important; }
.page-hero-title { display: flex; flex-direction: column; gap: 10px; }
.page-hero-title > * { margin: 0 !important; }
.page-hero h1, .page-hero .wp-block-post-title, .page-hero .wp-block-query-title { font-size: clamp(42px, 6vw, 82px); line-height: .95; color: var(--cream); }
.page-hero .article-title { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; }
.page-hero-top .page-hero-lede { max-width: 26em; }
.back { color: var(--leaf) !important; font-family: var(--mono); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }

/* Program guide */
.guide-tabs-band { background: var(--night); }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tab { flex: none; min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px 14px 0 0; background: var(--night-2); color: var(--cream-2); font: 700 16px var(--body); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--card); color: var(--ink); }
.guide-body { padding-bottom: 72px; display: flex; flex-direction: column; gap: 18px; }
.guide-card { background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 24px 24px; overflow: hidden; }
.js .guide-card + .guide-card { margin-top: 0; border-top: 0; border-radius: 0 0 24px 24px; }
.guide-card + .guide-card { margin-top: 24px; border-top: 1px solid var(--line); border-radius: 24px; }
.guide-head { padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.guide-head h2 { font-size: 28px; }
.guide-count { color: var(--stone); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .t { flex: 0 0 200px; font-size: 15px; color: var(--stone); }
.row .s { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.row .s b { font-family: var(--display); font-stretch: 100%; font-size: 20px; line-height: 1.2; }
.row .s span { font-size: 15px; color: var(--stone); }
.row.now { background: var(--night); color: var(--cream); border-bottom-color: var(--night); }
.row.now .t, .row.now .s span { color: var(--mist); }
.row-link { font-weight: 700; font-size: 15px; color: var(--red-ink); text-decoration: none; }
.row.now .row-link { color: var(--leaf); }
.guide-note { color: var(--stone); font-size: 15px; }

/* Show page */
.show-hero-inner { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; padding-block: 48px 64px; }
.show-hero-inner > * { margin: 0 !important; }
.show-art { flex: 0 1 400px; min-width: 0; }
.show-art img { width: 100%; border-radius: 28px; object-fit: contain !important; display: block; background: var(--card); }
.show-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.show-copy > * { margin: 0 !important; }
.show-copy h1 { font-size: clamp(42px, 5.4vw, 78px); line-height: .95; color: var(--cream); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: 14px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--night-soft); }
.about { display: flex; flex-wrap: wrap; gap: 44px; }
.about > * { margin: 0 !important; }
.about-main { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.about-main > * { margin: 0 !important; }
.about-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel { border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.panel.dark-p { background: var(--night); color: var(--cream); }
.panel.dark-p .eyebrow { color: var(--leaf); }
.big-phone { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 28px; color: var(--cream) !important; text-decoration: none; }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.related > li { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: 20px; padding: 12px; margin: 0; }
.related > li > * { margin: 0 !important; }
.rel-img { flex: none; }
.rel-img img { width: 72px !important; height: 72px !important; border-radius: 14px; object-fit: contain !important; display: block; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.rel-title { font-family: var(--body); font-stretch: 100%; font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.rel-title a { color: var(--ink); text-decoration: none; }

/* Prose (news, shows, About Us) */
.prose { font-size: 19px; line-height: 1.65; max-width: 40em; }
.prose > * + * { margin-top: 1em; }
.prose img { border-radius: 16px; }
.prose a { color: var(--red-ink); }
.article-img img { border-radius: 22px; width: 100%; display: block; }
.article-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.about-sections { display: flex; flex-direction: column; gap: 48px; max-width: 860px; }
.about-section { display: flex; flex-direction: column; gap: 16px; }
.about-section h2 { font-size: clamp(26px, 3vw, 36px); }
.about-text { font-size: 18px; line-height: 1.65; }
.about-text > * + * { margin-top: 1em; }
.about-text ul { padding-left: 1.2em; }

/* Footer */
.foot-inner { padding-block: 56px 28px; display: flex; flex-direction: column; gap: 40px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.foot-brand { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; color: var(--cream-2); }
.foot-brand-row { display: flex; align-items: center; gap: 14px; }
.foot-brand .name { font-family: var(--display); font-stretch: 100%; font-weight: 800; font-size: 28px; color: var(--cream); }
.foot-brand p { max-width: 22em; }
.foot-col { flex: 0 1 190px; display: flex; flex-direction: column; gap: 10px; color: var(--cream-2); }
.foot-col.wide { flex-basis: 260px; }
.foot-col h3 { font-family: var(--mono); font-stretch: 100%; font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); margin-bottom: 4px; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--night-soft); display: flex; align-items: center; justify-content: center; }
.foot-base { border-top: 1px solid var(--night-line); padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--cream-2); }

/* Phone player bar */
.mini { display: none; }
@media (max-width: 600px) {
	.mini { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--night); color: var(--cream); align-items: center; gap: 12px; border-top: 1px solid var(--night-line); }
	.mini .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
	.mini small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--leaf); }
	.mini b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
	.mini-play { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; flex: none; }
	.foot-inner { padding-bottom: 110px; }
}

/* Live player dialog */
.listen-dialog { border: 0; border-radius: 24px; padding: 0; max-width: 460px; width: calc(100% - 32px); background: var(--night); color: var(--cream); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.listen-dialog::backdrop { background: rgba(19, 32, 26, .6); }
.dlg { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.dlg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dlg-title { display: flex; flex-direction: column; gap: 6px; }
.dlg h2 { font-size: 28px; line-height: 1.05; color: var(--cream); }
.dlg-host { color: var(--cream-2); }
.x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--night-2); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.listen-player { border-radius: 14px; overflow: hidden; background: var(--night-2); min-height: 100px; }
.listen-player iframe { display: block; width: 100%; height: 100px; border: 0; }
.dlg-link { color: var(--leaf) !important; font-size: 15px; font-weight: 600; }

/* Station Log form embeds.
   The frame has no scrollbar, so the page scrolls instead. Heights are measured
   per form and width, plus a small buffer for validation messages. */
.stationlog-embed { margin: 8px 0 24px; }
.stationlog-panel { background: var(--night); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(19, 32, 26, .18); }
.stationlog-frame { display: block; width: 100%; border: 0; background: var(--night); color-scheme: light; }
/* Station Log adds 48px of padding above the card on Contact and Complaints (16px on Fault). Trim it to match. */
.stationlog-frame[data-form="contact"], .stationlog-frame[data-form="complaint"] { margin-top: -32px; }
.stationlog-frame[data-form="contact"] { height: 1348px; }
.stationlog-frame[data-form="complaint"] { height: 2018px; }
.stationlog-frame[data-form="fault"] { height: 1590px; }
@media (max-width: 720px) {
	.stationlog-frame[data-form="contact"] { height: 1398px; }
	.stationlog-frame[data-form="complaint"] { height: 2038px; }
	.stationlog-frame[data-form="fault"] { height: 1610px; }
}
@media (max-width: 480px) {
	.stationlog-frame[data-form="contact"] { height: 1508px; }
	.stationlog-frame[data-form="complaint"] { height: 2178px; }
	.stationlog-frame[data-form="fault"] { height: 1690px; }
}
@media (max-width: 360px) {
	.stationlog-frame[data-form="contact"] { height: 1628px; }
	.stationlog-frame[data-form="complaint"] { height: 2298px; }
	.stationlog-frame[data-form="fault"] { height: 1810px; }
}
.stationlog-fallback { margin-top: 12px; font-size: 14px; color: var(--stone); }

/* Form pages (Contact, Complaints, Report a fault): green surround to match the
   hero, two columns on large screens, form only on small screens. */
.site-main:has(.sl-layout) .page-hero { padding-bottom: 28px; }
.site-main:has(.sl-layout) .page-hero .wrap.narrow,
.band:has(.sl-layout) .wrap.narrow { max-width: 1240px; }
.band:has(.sl-layout) .prose, .band:has(.sl-layout) .wp-block-post-content { max-width: none; }
.band:has(.sl-layout) { background: var(--night); color: var(--cream); padding-block: 8px 96px; }
.sl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sl-aside { display: none; }
.sl-main { min-width: 0; max-width: 760px; width: 100%; }
@media (min-width: 1024px) {
	.sl-layout { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 64px; align-items: start; }
	.sl-aside { display: block; position: sticky; top: 110px; }
}
.prose .sl-aside .sl-logo { display: block; width: 150px; height: auto; margin: 0 0 28px; }
.prose .sl-aside .eyebrow { margin: 0; color: var(--leaf); }
.prose .sl-aside h2 { font-size: 40px; line-height: 1.05; margin: 10px 0 16px; color: var(--cream); }
.prose .sl-aside .sl-text { color: var(--mist); font-size: 17px; line-height: 1.55; margin: 0 0 24px; }
.prose .sl-aside .sl-details { margin: 0 0 28px; display: grid; gap: 14px; }
.prose .sl-aside dt { font-family: var(--mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); }
.prose .sl-aside dd { margin: 4px 0 0; font-size: 17px; color: var(--cream); }
.prose .sl-aside dd a { color: var(--cream); }
.prose .sl-aside .sl-other { border-top: 1px solid rgba(244, 241, 232, .15); padding-top: 20px; }
.prose .sl-aside .sl-other .eyebrow { margin-bottom: 6px; }
.prose .sl-aside .sl-other a { display: block; color: var(--cream); font-weight: 700; text-decoration: none; padding: 6px 0; }
.prose .sl-aside .sl-other a:hover, .prose .sl-aside .sl-other a:focus-visible { color: var(--leaf); }
.sl-layout .stationlog-embed { margin: 0; }
.sl-layout .stationlog-panel { box-shadow: none; border: 0; }
.prose .sl-layout .stationlog-fallback { color: var(--mist); }
.prose .sl-layout .stationlog-fallback a { color: var(--cream); }

/* Shows page: directory of shows with their own page. */
.show-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 22px; }
.show-card { margin: 0; }
.show-card-link { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }
.show-card-media { display: block; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; }
.show-card-media > img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s ease; }
.show-card-link:hover .show-card-media > img, .show-card-link:hover .show-tile-logo { transform: scale(1.04); }
.show-card-link:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 20px; }
.show-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 120%, var(--night-line) 0, var(--night-2) 45%, var(--night) 75%); }
.show-tile::before { content: ""; position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%); width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(152, 197, 94, .25); box-shadow: 0 0 0 26px rgba(152, 197, 94, .05), 0 0 0 28px rgba(152, 197, 94, .18); }
.show-tile-logo { position: relative; width: 46% !important; height: auto !important; transition: transform .2s ease; }
.show-card-name { font-family: var(--display); font-stretch: 100%; font-weight: 700; font-size: 20px; line-height: 1.15; }
.show-card-link:hover .show-card-name { color: var(--red-ink); }
.show-card-host { font-size: 15px; color: var(--stone); }

/* Program guide: rows expand in place (Station Log pattern). Native details/summary, no script. */
.guide-item { border-bottom: 1px solid var(--line); }
.guide-item:last-child { border-bottom: 0; }
.guide-item > summary { list-style: none; cursor: pointer; position: relative; }
.guide-item > summary::-webkit-details-marker { display: none; }
.guide-item > summary .row { border-bottom: 0; padding-right: 64px; }
.guide-item > summary::after { content: ""; position: absolute; right: 28px; top: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; opacity: .55; }
.guide-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.guide-item:has(.row.now) > summary::after { color: var(--cream); }
.guide-item > summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.guide-item > summary:hover .row:not(.now) { background: var(--paper); }
.guide-more { display: grid; gap: 14px; padding: 6px 26px 22px calc(26px + 200px + 26px); background: var(--paper); }
.guide-item:has(.row.now) .guide-more { background: var(--night-2); color: var(--cream); }
.host-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.host-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px 6px 6px; }
.host-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--night); color: var(--leaf); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; }
.host-card b { display: block; font-size: 15px; color: var(--ink); }
.host-card small { display: block; font-size: 12px; color: var(--stone); }
.guide-also { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--stone); }
.guide-item:has(.row.now) .guide-also { color: var(--mist); }
.guide-more-actions { margin: 0; }
.guide-more-actions .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
@media (max-width: 700px) {
	.guide-more { padding: 4px 26px 20px; }
	.guide-item > summary::after { right: 22px; }
}

/* Homepage headline: words rise in one after another; "valley." in leaf green with a red underline that sweeps in. */
.hero-title .ht-w { display: inline-block; opacity: 0; transform: translateY(.35em); animation: ht-in .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-title .ht-w:nth-child(1) { animation-delay: .05s; }
.hero-title .ht-w:nth-child(2) { animation-delay: .17s; }
.hero-title .ht-w:nth-child(3) { animation-delay: .29s; }
.hero-title .ht-w:nth-child(4) { animation-delay: .41s; }
.hero-title .ht-em { position: relative; color: var(--leaf); animation-delay: .6s; }
.hero-title .ht-em::after { content: ""; position: absolute; left: .02em; right: .32em; bottom: -.12em; height: .08em; border-radius: .05em; background: var(--red); transform: scaleX(0); transform-origin: left center; animation: ht-line .55s 1.25s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes ht-in { to { opacity: 1; transform: none; } }
@keyframes ht-line { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
	.hero-title .ht-w, .hero-title .ht-em::after { animation: none; opacity: 1; transform: none; }
}