:root{color-scheme:light;--red:#94281C;--cream:#FEDCB9;--ink:#491B18;--rule:rgb(254 220 185 / .28);--font:Arial,Helvetica,sans-serif;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--red);color:var(--cream);font-family:var(--font);-webkit-text-size-adjust:100%}
a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
button,summary,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}
main:focus{outline:none}
.wrap{width:86%;max-width:1240px;margin-inline:auto}
.eyebrow{margin:0 0 18px;font-size:11px;line-height:1.6;letter-spacing:2.4px;text-transform:uppercase;font-weight:700}
h1,h2,h3,p{overflow-wrap:break-word}
h1,h2{font-family:var(--serif);font-weight:400}
h2{font-size:clamp(31px,3.4vw,46px);line-height:1.15;margin:0 0 24px}
p{line-height:1.8}
.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:225px;border-bottom:1px solid var(--rule)}
.brand{position:relative;display:block;flex:none;width:250px;height:208px}
.brand-emblem{position:absolute;inset:0 auto auto 0;width:200px;height:208px;object-fit:contain}
.brand-wordmark{position:absolute;left:78px;top:35px;width:150px;height:auto}
.desktop-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 28px;align-items:center;min-width:0}
.desktop-nav a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:14px}
.desktop-nav a:hover{text-decoration:underline}
.outline{padding:12px 21px;border:1px solid rgb(254 220 185 / .6);border-radius:30px;gap:6px}
.outline:hover{background:rgb(254 220 185 / .08)}
.mobile-menu{display:none}
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:35px;padding-block:48px 56px}
.hero h1{font-size:clamp(38px,4.3vw,62px);line-height:1.1;letter-spacing:-1.2px;margin:0 0 24px;max-width:750px}
.hero-description{max-width:565px;font-size:16px;margin:0}
.buttons{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:16px 24px;border-radius:30px;background:var(--cream);color:var(--ink);text-decoration:none;font-size:14px;line-height:1.4;font-weight:700}
.button:hover{background:#FFE8D1}
.textlink{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:14px}
.hero-art{display:flex;justify-content:center;align-items:center;padding:0 10px}
.monorail{display:block;width:100%;max-width:390px;height:auto;filter:drop-shadow(10px 18px 15px rgb(49 10 10 / .15))}
.welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:70px;padding-block:48px 52px;border-top:1px solid var(--rule)}
.welcome h2{max-width:440px;font-size:clamp(30px,3.1vw,43px)}
.welcome-copy p{font-size:16px;margin:0 0 20px}
.welcome-copy .welcome-close{font-family:var(--serif);font-size:20px;line-height:1.6;margin-bottom:0}
.listening-strip{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;border-block:1px solid var(--rule);padding:21px 7%;font-size:10px;line-height:1.5;letter-spacing:1.8px;text-transform:uppercase;text-align:center}
.listen{background:var(--cream);color:var(--ink);padding:55px 7%}
.listen-panel{max-width:1180px;margin:auto;border:1px solid rgb(73 27 24 / .35);padding:38px}
.listen h2{margin-bottom:16px}
.listen-intro{margin:0;max-width:740px}
.platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:24px;margin:30px 0}
.platforms a{display:flex;align-items:center;justify-content:center;min-height:60px;max-width:226px;width:100%;text-decoration:none}
.platforms a:hover{filter:brightness(.95)}
.platforms img{display:block;width:100%;height:auto;clip-path:inset(10% 1.33% 11.2% 1.33% round 10px)}
.platforms .youtube-badge{clip-path:inset(9.5% 0 11.1% 3.1% round 10px)}
.libsyn-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:49px;border:1px solid #222;border-radius:11px;background:#fff;color:#111;line-height:1.25}
.libsyn-badge small{font-size:10px;letter-spacing:1px}
.libsyn-badge strong{font-size:23px}
.rss-row{display:flex;align-items:center;justify-content:space-between;gap:24px;border-block:1px solid rgb(73 27 24 / .2);padding:23px 0}
.rss-row h3{font:700 16px/1.5 var(--font);margin:0}
.rss-row p{font-size:14px;margin:4px 0 0}
.rss-badge{display:flex;flex:none;flex-direction:column;align-items:center;gap:3px;background:#fff;border:1px solid #222;border-radius:9px;padding:9px 14px;text-decoration:none;min-height:50px}
.rss-badge small{font-size:9px;letter-spacing:1px}
.rss-badge strong{color:#A44B00;font-size:19px}
.embedded-player{margin-top:30px}
.embedded-player h3{font:400 27px/1.2 var(--serif);margin:0 0 10px}
.player-hint{font-size:14px;margin:0 0 20px}
.embedded-player iframe{display:block;width:100%;height:45px;border:0;background:#fff}
.player-fallback{margin:10px 0 0}
.player-fallback .textlink{font-size:12px}
.recommendations{padding:58px 7% 60px;border-bottom:1px solid var(--rule)}
.section-inner{max-width:1180px;margin-inline:auto}
.recommendations h2{max-width:850px;font-size:clamp(29px,3.1vw,41px);margin-bottom:36px}
.show-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.show-row a{display:flex;align-items:center;flex-direction:column;gap:16px;text-align:center;text-decoration:none;font-size:14px;line-height:1.6}
.show-row img{display:block;width:150px;height:154px;object-fit:contain}
.show-row a:hover>span:not(.sr-only){text-decoration:underline;text-underline-offset:5px}
.community-section{padding-block:55px}
.community{padding:38px 44px;border:1px solid rgb(254 220 185 / .4);display:flex;align-items:center;justify-content:space-between;gap:40px}
.community h2{margin-bottom:14px;font-size:clamp(31px,3.2vw,43px)}
.community p:not(.eyebrow){max-width:650px;margin:0;font-size:16px}
.community .button{flex:none}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:26px;border-top:1px solid var(--rule);font-size:12px}
.site-footer p{margin:0}
.footer-note{color:inherit;opacity:1;font-style:italic}
.footer-links{display:flex;gap:25px;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.skip{position:absolute;left:-9999px;top:12px;z-index:10;background:var(--cream);color:var(--ink);padding:15px}
.skip:focus{left:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:1440px){.hero{padding-block:62px 70px}}
@media(max-width:1000px){.desktop-nav{gap:20px}.hero{gap:15px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.hero h1{font-size:44px}.welcome{gap:40px}.platforms{gap:16px}.listen-panel{padding:30px}.community{padding:32px}}
@media(max-width:760px){
  html{scroll-padding-top:18px}
  .wrap{width:88%}
  .site-header{min-height:182px;gap:12px}
  .brand{width:205px;height:180px}
  .brand-emblem{width:174px;height:180px}
  .brand-wordmark{left:67px;top:30px;width:130px}
  .desktop-nav{display:none}
  .mobile-menu{display:block;align-self:center;margin-left:auto}
  .mobile-menu summary{display:flex;align-items:center;justify-content:center;gap:10px;list-style:none;cursor:pointer;min-height:46px;border:1px solid rgb(254 220 185 / .65);border-radius:26px;padding:10px 15px;font-size:14px}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .menu-icon{font-size:20px;line-height:1}
  .mobile-menu[open] .menu-icon{transform:rotate(45deg)}
  .mobile-menu nav{position:absolute;z-index:5;top:calc(100% - 10px);left:0;right:0;display:grid;background:var(--red);border:1px solid rgb(254 220 185 / .55);padding:10px 20px;box-shadow:0 16px 25px rgb(49 10 10 / .2)}
  .mobile-menu nav a{display:flex;align-items:center;min-height:49px;gap:6px;text-decoration:none;font-size:16px}
  .mobile-menu nav a+a{border-top:1px solid var(--rule)}
  .hero{grid-template-columns:minmax(0,1fr);gap:25px;padding-block:35px 36px}
  .hero h1{font-size:clamp(36px,6.9vw,50px);letter-spacing:-.7px}
  .eyebrow{font-size:10px;letter-spacing:1.8px}
  .hero-description{max-width:580px;font-size:16px}
  .buttons{gap:12px 22px;margin-top:24px}
  .hero-art{justify-content:flex-end;padding:0 6%}
  .monorail{width:52%;min-width:180px;max-width:245px}
  .welcome{grid-template-columns:minmax(0,1fr);gap:5px;padding-block:36px 40px}
  .welcome h2{max-width:540px;font-size:34px;margin-bottom:22px}
  .welcome-copy p{font-size:16px}
  .listening-strip{gap:10px 24px;padding:19px 6%;font-size:9px;letter-spacing:1.3px}
  .listen{padding:38px 6%}
  .listen-panel{padding:25px}
  .listen h2{font-size:33px}
  .platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:23px 0}
  .platforms a{margin-inline:auto}
  .rss-row{align-items:flex-start;gap:16px}
  .rss-row p{max-width:300px}
  .rss-badge{padding:9px 10px}
  .rss-badge small{font-size:8px;letter-spacing:.6px}
  .show-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
  .recommendations{padding:40px 6%}
  .recommendations h2{font-size:33px;margin-bottom:28px}
  .show-row a{font-size:13px}
  .community-section{padding-block:36px}
  .community{display:block;padding:27px}
  .community .button{margin-top:24px}
  .site-footer{align-items:flex-start;flex-direction:column;gap:10px;padding-block:22px}
}
@media(max-width:390px){
  .brand{width:179px;height:157px}.brand-emblem{width:151px;height:157px}.brand-wordmark{left:58px;top:26px;width:113px}.site-header{min-height:161px}
  .mobile-menu summary{padding:10px 12px;gap:7px}
  .hero h1{font-size:36px}
  .hero-art{padding-right:0}
  .listen-panel{padding:20px}
  .listen h2,.recommendations h2,.welcome h2{font-size:30px}
  .rss-row{flex-direction:column}
  .platforms{gap:8px 10px}
  .platforms a{min-height:48px}
  .libsyn-badge{min-height:34px;border-radius:9px}.libsyn-badge small{font-size:8px}.libsyn-badge strong{font-size:18px}
  .show-row img{width:130px;height:134px}
  .community{padding:23px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep the expanded navigation within the header at desktop widths. */
@media(min-width:761px){.desktop-nav{flex-wrap:wrap;justify-content:flex-end;gap:10px 22px;max-width:790px;min-width:0}}
@media(max-width:760px){.mobile-menu nav{max-height:70vh;overflow-y:auto}}

/* Responsive text badges replace the cropped legacy images. */
.platforms a{max-width:none;min-width:0;min-height:78px}.platforms .libsyn-badge{box-sizing:border-box;min-height:78px;padding:10px 8px;gap:4px;text-align:center}.platforms .libsyn-badge strong{font-size:clamp(16px,1.5vw,22px);line-height:1.25;white-space:normal}.platforms .libsyn-badge small{font-size:9px;line-height:1.3}@media(max-width:350px){.platforms{grid-template-columns:minmax(0,1fr)}}

/* The introduction lets the headline and copy lead. */
.hero{display:block}.hero-copy{max-width:900px}.hero-description{max-width:650px}

@media(max-width:760px){.mobile-menu summary{width:48px;height:48px;min-height:48px;padding:10px;border:0;border-radius:6px}.hamburger-icon{display:block;flex:none}.mobile-menu summary:hover{background:rgb(254 220 185 / .08)}}

@media(max-width:760px){.mobile-menu summary{padding:6px}.hamburger-icon{width:36px;height:36px}}

.desktop-nav a{font-size:12px;letter-spacing:.7px}.desktop-nav{gap:6px 22px}
/* Explicit desktop rows, independent of available screen width. */
@media(min-width:761px){.desktop-nav{display:grid;grid-template-columns:repeat(4,max-content);grid-template-rows:repeat(2,44px);gap:4px 26px;justify-content:end}.desktop-nav a{justify-content:flex-start}.desktop-nav a:nth-child(5){grid-column:1;grid-row:2}.desktop-nav a:nth-child(6){grid-column:2 / span 2;grid-row:2}.desktop-nav a:nth-child(7){grid-column:4;grid-row:2}}
@media(min-width:761px) and (max-width:1000px){.desktop-nav{gap:4px 14px}.desktop-nav a{font-size:11px;letter-spacing:.3px}}

/* A quiet dusk atmosphere, with room for the opening invitation. */
.hero{position:relative;isolation:isolate;padding-block:88px 96px}
.hero::before{content:"";position:absolute;z-index:-1;inset:0 calc((100vw - 100%) / -2);pointer-events:none;background:radial-gradient(ellipse at 83% 26%,rgb(254 220 185 / .12),transparent 36%),radial-gradient(circle at 87% 64%,rgb(249 188 107 / .12) 0, rgb(249 188 107 / .04) 17px,transparent 40px),radial-gradient(circle at 73% 42%,rgb(254 220 185 / .09) 0,transparent 26px),radial-gradient(circle at 94% 36%,rgb(254 220 185 / .08) 0,transparent 33px),radial-gradient(ellipse at 55% 45%,transparent 30%,rgb(41 19 37 / .24) 100%)}
.hero-copy{max-width:960px}
.hero .eyebrow{margin-bottom:28px}
.hero h1{font-size:clamp(42px,4.8vw,68px);line-height:1.14;max-width:960px;margin-bottom:32px}
.hero-description{max-width:580px;font-size:17px;line-height:1.9}
.hero .buttons{margin-top:36px;gap:16px}
.button-secondary{color:var(--cream);background:rgb(254 220 185 / .035);border:1px solid rgb(254 220 185 / .65)}
.button-secondary:hover{background:rgb(254 220 185 / .12)}
@media(max-width:760px){.hero{padding-block:58px 64px}.hero h1{font-size:clamp(39px,7.2vw,54px);letter-spacing:-.7px;margin-bottom:28px}.hero .eyebrow{margin-bottom:24px}.hero-description{font-size:16px;max-width:36em}.hero .buttons{margin-top:30px;gap:14px}.hero::before{background:radial-gradient(ellipse at 95% 20%,rgb(254 220 185 / .1),transparent 55%),radial-gradient(circle at 90% 75%,rgb(249 188 107 / .07),transparent 32px),radial-gradient(ellipse at center,transparent 20%,rgb(41 19 37 / .2) 100%)}}
@media(max-width:390px){.hero h1{font-size:38px}}

/* Make the newest audio escape the first invitation after the hero. */
.latest{padding-bottom:56px}.latest-card{border:1px solid rgb(254 220 185 / .45);border-radius:16px;padding:38px 40px;background:var(--cream);color:var(--red);box-shadow:none}
.latest-heading{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}.latest-heading .eyebrow{margin:0}.episode-meta{font-size:11px;letter-spacing:1px;margin:0;line-height:1.7}
.latest-content{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:center}.latest h2{font-size:clamp(30px,3vw,42px);max-width:680px;margin-bottom:18px}.latest-content p{margin:0;font-size:15px;line-height:1.8}.latest-content .episode-tip{margin-top:16px;font-family:var(--serif);font-size:18px}.latest-playback{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:18px}.episode-play{border:0;cursor:pointer;font-family:inherit;font-size:16px;min-height:62px}.episode-play:focus-visible{outline:3px solid var(--cream);outline-offset:5px}.latest audio{width:100%;max-width:100%;display:block}.latest-playback .textlink{justify-content:center;font-size:13px;text-align:center}
@media(max-width:760px){.latest{padding-bottom:40px}.latest-card{padding:28px 24px}.latest-heading{gap:8px;margin-bottom:22px}.latest-content{grid-template-columns:minmax(0,1fr);gap:28px}.latest h2{font-size:32px}.episode-meta{font-size:10px}.latest-playback{gap:16px}}

.latest{padding-top:16px}.feed-status{font-size:12px;line-height:1.6;margin:0 0 20px;opacity:.85}.feed-status:empty{display:none}

/* Platform cards: recognizable marks with simple, roomy labels. */
.platforms{gap:16px}.platforms a{border-radius:14px;min-height:100px;transition:transform .15s ease,box-shadow .15s ease}.platforms a:hover{filter:none;transform:translateY(-3px);box-shadow:0 9px 18px rgb(73 27 24 / .1)}
.platform-button{--platform-accent:#94281C;display:flex;align-items:center;gap:13px;width:100%;min-height:100px;padding:19px 16px;background:#fffaf4;border:1px solid rgb(73 27 24 / .2);border-top:3px solid var(--platform-accent);border-radius:14px;color:#33201e}
.platform-apple{--platform-accent:#9933CC}.platform-spotify{--platform-accent:#16863c}.platform-youtube{--platform-accent:#e52323}.platform-libsyn{--platform-accent:#00858a}
.platforms .platform-icon{display:block;flex:0 0 36px;width:36px;height:36px;max-width:none;clip-path:none;object-fit:contain;color:var(--platform-accent)}
.platform-label{display:flex;flex-direction:column;gap:5px;min-width:0}.platform-label small{font-size:9px;font-weight:700;letter-spacing:.8px;line-height:1.4;color:#705a52}.platform-label strong{font-size:17px;line-height:1.25}.platform-arrow{margin-left:auto;color:#82695d;font-size:16px}
.rss-badge{flex-direction:row;align-items:center;gap:12px;padding:12px 18px;border-color:rgb(73 27 24 / .2);background:#fffaf4;border-radius:12px}.rss-icon{width:25px;height:25px;color:#b5530a;flex:none}.rss-badge>span{display:flex;flex-direction:column;gap:3px}.rss-badge strong{color:#49281b}.rss-badge small{font-size:9px}
@media(max-width:1100px) and (min-width:761px){.platforms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.platforms{gap:12px}.platform-button{flex-direction:column;justify-content:center;gap:12px;padding:19px 10px;min-height:146px;text-align:center}.platform-label{gap:5px}.platform-label strong{font-size:17px}.platform-label small{font-size:8px;letter-spacing:.6px}.platform-arrow{display:none}.platforms .platform-icon{flex-basis:34px;width:34px;height:34px}}
@media(max-width:350px){.platforms{grid-template-columns:minmax(0,1fr)}.platform-button{flex-direction:row;text-align:left;justify-content:flex-start;min-height:90px;padding:16px;gap:16px}.platform-label strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){.platforms a{transition:none}.platforms a:hover{transform:none}}

/* Featured episode uses the confirmed WTTM palette. */
.latest .episode-play{background:var(--red);color:var(--cream)}.latest .episode-play:hover{background:var(--red);text-decoration:underline}.latest .episode-play:focus-visible{outline-color:var(--red)}

/* Comfortable reading measures and restrained uppercase tracking. */
.eyebrow{letter-spacing:1.5px}
.hero-description{max-width:min(580px,68ch)}
.welcome-copy p,.latest-content p,.listen-intro{max-width:68ch}
.community p:not(.eyebrow){max-width:min(650px,68ch)}
.hero-description,.welcome-copy p,.latest-content p,.listen-intro,.community p:not(.eyebrow){opacity:1}
@media(max-width:760px){.eyebrow{letter-spacing:1.2px}}

/* Static audio details in the WTTM cream and burgundy palette. */

.episode-kicker{display:flex;align-items:center;gap:12px}.headphone-icon{display:block;width:27px;height:27px;flex:none;color:var(--red)}


@media(max-width:760px){.headphone-icon{width:24px;height:24px}.episode-kicker{gap:10px}}


/* Each desktop row spaces its own links without shared grid columns. */
@media(min-width:761px){.desktop-nav{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:none}.desktop-nav-row{display:flex;align-items:center;justify-content:flex-end;gap:26px}.desktop-nav a:nth-child(n){grid-column:auto;grid-row:auto}}
@media(min-width:761px) and (max-width:1000px){.desktop-nav-row{gap:14px}}

/* Desktop navigation lives in its own full-width row beneath the brand. */
.header-tagline{font:400 clamp(22px,2.4vw,32px)/1.35 var(--serif);text-align:right;max-width:510px;margin:0}.header-tagline span{display:block;font:700 11px/1.8 var(--font);letter-spacing:1.5px;text-transform:uppercase;margin-top:10px}
@media(min-width:761px){.site-header{border-bottom:0}.desktop-button-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:1240px;padding:4px 0 24px;border-bottom:1px solid var(--rule)}.desktop-button-nav a:nth-child(n){display:flex;justify-content:center;align-items:center;grid-column:auto;grid-row:auto;min-width:0;min-height:48px;white-space:normal;text-align:center;font-size:11px;letter-spacing:.6px;padding:10px 8px;border:1px solid rgb(254 220 185 / .5);border-radius:8px;line-height:1.4}.desktop-button-nav a:hover{background:var(--cream);color:var(--red);text-decoration:none}}
@media(min-width:761px) and (max-width:1000px){.desktop-button-nav{gap:7px}.desktop-button-nav a:nth-child(n){font-size:10px;letter-spacing:.2px;padding:9px 5px}}
@media(max-width:760px){.header-tagline{display:none}}

/* Keep the desktop tagline together, sized to the space beside the logo. */
@media(min-width:761px){.header-tagline{max-width:none;min-width:0;white-space:nowrap;font-size:clamp(14px,2.05vw,28px);line-height:1.25;letter-spacing:0}}

/* Approved comparison B: thin cream edge, on desktop and mobile. */
.site-header .brand-emblem,.site-header .brand-wordmark{filter:drop-shadow(1px 0 0 #FEDCB9) drop-shadow(-1px 0 0 #FEDCB9) drop-shadow(0 1px 0 #FEDCB9) drop-shadow(0 -1px 0 #FEDCB9)}

/* Match the hero calls to action, including outlined button borders. */
.hero .buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:540px;gap:16px;align-items:stretch}
.hero .buttons .button{width:100%;min-width:0;height:58px;padding:12px 16px;border:1px solid transparent;text-align:center}
.hero .buttons .button-secondary{border-color:rgb(254 220 185 / .65)}
@media(max-width:600px){.hero .buttons{grid-template-columns:minmax(0,1fr);max-width:340px;gap:14px}}

/* Paul faces into the invitation; keep the headline prominent. */
.hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:36px;align-items:center}
.hero-copy{min-width:0;max-width:none}.hero h1{font-size:clamp(42px,4.5vw,68px)}
.hero-portrait{align-self:center;justify-self:end;width:100%;max-width:430px}.hero-portrait img{display:block;width:100%;height:auto}
@media(min-width:761px) and (max-width:1000px){.hero{gap:22px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.hero .buttons{grid-template-columns:minmax(0,1fr);max-width:340px}}
@media(max-width:760px){.hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:40px}.hero h1{font-size:clamp(39px,7.2vw,54px)}.hero-portrait{width:76%;max-width:340px;justify-self:end}}
@media(max-width:390px){.hero h1{font-size:38px}}

/* Mobile: compact portrait beside the description, before the actions. */
@media(max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr) clamp(96px,30vw,140px);gap:0 16px;align-items:center}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{grid-column:1 / -1;grid-row:1}
  .hero h1{grid-column:1 / -1;grid-row:2}
  .hero-description{grid-column:1;grid-row:3;max-width:none}
  .hero-portrait{grid-column:2;grid-row:3;width:100%;max-width:140px;align-self:center;justify-self:end}
  .hero .buttons{grid-column:1 / -1;grid-row:4;max-width:100%;margin-top:30px}
}

/* Increase the mobile portrait by 50% while retaining its description row. */
@media(max-width:760px){.hero{grid-template-columns:minmax(0,1fr) clamp(144px,45vw,210px)}.hero-portrait{max-width:210px}}

/* Keep the second headline line together on mobile only. */
@media(max-width:760px){.hero h1 .hero-return-line{font-size:clamp(22px,6.1vw,40px);letter-spacing:-.4px;white-space:nowrap}}

.hero-sound-labels{display:block;font-weight:700;line-height:1.5;margin-bottom:8px}

/* Edge-to-edge park photograph opens the hero; preserve its full composition. */
.hero{padding-top:0;row-gap:48px}
.hero-panorama{grid-column:1 / -1;grid-row:1;width:100vw;max-width:none;margin:0 calc((100% - 100vw) / 2)}
.hero-panorama img{display:block;width:100%;height:auto}
@media(max-width:760px){.hero{padding-top:0;row-gap:0}.hero-panorama{margin-bottom:36px}.hero-copy>.eyebrow{grid-row:2}.hero h1{grid-row:3}.hero-description,.hero-portrait{grid-row:4}.hero .buttons{grid-row:5}}

/* Desktop title and motto share an exact 2:1 font-size ratio. */
@media(min-width:761px){.header-tagline{font-size:clamp(10px,1.3vw,18px);white-space:nowrap}.header-tagline .header-show-name{display:block;font-family:var(--serif);font-weight:400;font-size:2em;line-height:1.25;text-transform:none;letter-spacing:0;margin:0 0 10px}.header-tagline .header-show-motto{display:block;font-family:var(--serif);font-weight:400;font-size:1em;line-height:1.25;letter-spacing:0;margin:0}}

/* Enlarge the desktop show title by 50%; keep the motto unchanged. */
@media(min-width:761px){.header-tagline{flex:1}.header-tagline .header-show-name{font-size:3em;white-space:normal;text-wrap:balance}}

/* RSS shares the platform-card treatment and responsive layout. */
.rss-row .rss-badge{display:flex;width:226px;max-width:100%;padding:0;border:0;border-radius:14px;background:none;transition:transform .15s ease,box-shadow .15s ease}
.platform-rss{--platform-accent:#b5530a}
.rss-badge .rss-icon{display:block;width:36px;height:36px;flex:0 0 36px;color:var(--platform-accent)}
.rss-badge .platform-label{align-items:flex-start}.rss-badge .platform-label strong{font-size:17px;color:#33201e}.rss-badge .platform-label small{font-size:9px;letter-spacing:.8px;line-height:1.4;color:#705a52}
.rss-row .rss-badge:hover{transform:translateY(-3px);box-shadow:0 9px 18px rgb(73 27 24 / .1)}
@media(max-width:760px){.rss-row .rss-badge{width:calc((100% - 12px)/2);min-width:124px}.rss-badge .rss-icon{width:34px;height:34px;flex-basis:34px}.rss-badge .platform-label{align-items:center}.rss-badge .platform-label small{font-size:8px;letter-spacing:.6px}}
@media(max-width:390px){.rss-row .rss-badge{min-width:0}}
@media(max-width:350px){.rss-row .rss-badge{width:100%}.rss-badge .platform-label{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.rss-row .rss-badge{transition:none}.rss-row .rss-badge:hover{transform:none}}
.rss-badge>.platform-button{flex-direction:row;align-items:center;gap:13px}
@media(max-width:760px){.rss-badge>.platform-button{flex-direction:column;gap:12px}}
@media(max-width:350px){.rss-badge>.platform-button{flex-direction:row;gap:16px}}

/* One responsive navigation, removed from focus and reading order when closed. */
.header-shell{position:relative}.nav-toggle[hidden],.shared-nav[hidden]{display:none!important}
.nav-toggle{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;padding:6px;border:0;border-radius:6px;background:transparent;color:var(--cream);cursor:pointer}.nav-toggle:hover{background:rgb(254 220 185 / .08)}.nav-toggle:focus-visible{outline:3px solid var(--cream);outline-offset:5px}
@media(min-width:761px){.shared-nav a.mobile-only-nav-link{display:none!important}}
@media(max-width:760px){.shared-nav{display:grid;gap:0;max-width:none;border:1px solid rgb(254 220 185 / .55);padding:10px 20px;background:var(--red);max-height:70vh;overflow-y:auto}.nav-ready .shared-nav{position:absolute;z-index:5;top:calc(100% - 10px);left:6%;right:6%;margin:0;width:auto;box-shadow:0 16px 25px rgb(49 10 10 / .2)}.shared-nav a{display:flex;align-items:center;min-height:49px;gap:6px;font-size:16px;letter-spacing:.7px;text-decoration:none;white-space:normal}.shared-nav a+a{border-top:1px solid var(--rule)}}

/* Reset desktop alignment so the mobile menu fills a single column. */
@media(max-width:760px){.shared-nav{grid-template-columns:minmax(0,1fr);grid-template-rows:none;justify-content:stretch;justify-items:stretch;align-items:stretch}.shared-nav a{width:100%;justify-content:flex-start;text-align:left;grid-column:auto;grid-row:auto}}

.nav-toggle .menu-close-icon{display:none}.nav-toggle[aria-expanded="true"] .menu-open-icon{display:none}.nav-toggle[aria-expanded="true"] .menu-close-icon{display:block}

/* Layered masthead: original assets, live caption, exact brand colors. */
.header-shell{background:#94281C}
.site-header{position:relative;isolation:isolate;width:100%;max-width:none;min-height:0;padding:0 3%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;border:0;overflow:hidden}
.site-header::before{content:"";position:absolute;z-index:-1;inset:14% 0 18%;background:#C4261A;box-shadow:0 4px 5px rgb(0 0 0 / .2)}
.masthead-brand{display:block;min-width:0;height:clamp(185px,21.5vw,350px)}
.masthead-art{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.masthead-train{position:absolute;left:0;top:-35%;width:58%;height:125%;max-width:none;object-fit:contain;transform:rotate(-24deg);transform-origin:center;filter:drop-shadow(1px 0 0 #19100e)}
.masthead-wordmark{position:absolute;left:42%;top:2%;width:58%;height:94%;object-fit:contain;max-width:none;filter:drop-shadow(1px 0 0 #FEFDFB) drop-shadow(-1px 0 0 #FEFDFB) drop-shadow(0 2px 0 #19100e)}
.masthead-caption{margin:0;align-self:center;color:#FEFDFB;font:800 clamp(18px,2.55vw,42px)/1.24 var(--font);letter-spacing:.4px;text-shadow:2px 3px 3px rgb(0 0 0 / .35)}
@media(max-width:760px){
 .site-header{grid-template-columns:minmax(0,1fr) 48px;padding:10px 5% 20px;gap:8px 12px;overflow:visible}
 .site-header::before{inset:18px 0 14px}
 .masthead-brand{grid-column:1;grid-row:1;height:clamp(125px,35vw,225px)}
 .masthead-train{left:0;top:-25%;width:58%;height:125%}
 .masthead-wordmark{left:40%;width:60%;top:2%;height:94%}
 .masthead-caption{grid-column:1 / -1;grid-row:2;text-align:center;font-size:clamp(14px,3.6vw,23px);line-height:1.35;padding:0 4px}
 .site-header .nav-toggle{grid-column:2;grid-row:1;align-self:center;justify-self:end;position:relative}
}

/* Desktop: turn the train clockwise so the nose drops below the wordmark. */
@media(min-width:761px){.masthead-train{transform:rotate(0deg)}}

/* Mobile uses the corrected train angle too, with room above the caption. */
@media(max-width:760px){.masthead-train{transform:rotate(0deg);top:-25%;height:120%}.masthead-art{overflow:hidden}.masthead-caption{margin-top:4px}}

/* Keep the mobile caption on one line; retain the desktop line break. */
@media(max-width:760px){.masthead-caption{font-size:clamp(9px,2.95vw,21px);letter-spacing:.1px;white-space:nowrap;width:100%;padding:0}.masthead-caption br{display:none}}

.hero-panorama .panorama-mobile{display:none}
@media(max-width:760px){.hero-panorama .panorama-desktop{display:none}.hero-panorama .panorama-mobile{display:block}}

/* Remove the obsolete second desktop nav row and balance its vertical gaps. */
@media(min-width:761px){.desktop-button-nav.shared-nav{grid-template-rows:auto;row-gap:0;padding-block:8px;margin-block:0}.hero{padding-top:0}}

@media(min-width:761px){.desktop-button-nav.shared-nav{padding-bottom:16px}}

/* Trim the two-pixel light edge from the 2048px-wide banner at any scale. */
.hero-panorama{overflow:hidden}.hero-panorama img{margin-bottom:calc(-100vw / 1024)}

/* Accessibility: visible focus, text resizing, and narrow-screen reflow. */
:where(a,button,audio,iframe):focus-visible{outline:3px solid currentColor;outline-offset:5px}
.hero .buttons .button{height:auto;min-height:58px}
.hero .buttons .button:focus-visible{outline-color:var(--cream)}
.latest-playback .textlink{flex-wrap:wrap}
.platform-label strong,.platform-label small,.masthead-caption{overflow-wrap:anywhere}
.rss-row>div,.community>div,.latest-content>div{min-width:0}
@media(max-width:760px){
 .hero h1 .hero-return-line{white-space:normal;font-size:clamp(1.375rem,6.1vw,2.5rem)}
 .masthead-caption{white-space:normal;font-size:clamp(.5625rem,2.95vw,1.3125rem)}
 .shared-nav{max-height:70dvh;scroll-padding-block:12px}
}
/* Larger default text also gets a roomier layout, without shrinking the type. */
@media(max-width:20em){
 .hero{grid-template-columns:minmax(0,1fr)}
 .hero-description{grid-column:1;grid-row:4}
 .hero-portrait{grid-column:1;grid-row:5;width:50%;margin-top:20px}
 .hero .buttons{grid-row:6}
 .platforms{grid-template-columns:minmax(0,1fr)}
 .platform-button{flex-direction:row;text-align:left;min-height:90px}
 .rss-row{flex-direction:column}
 .rss-row .rss-badge{width:100%}
 .rss-badge>.platform-button{flex-direction:row}
 .rss-badge .platform-label{align-items:flex-start}
 .listen-panel{padding:20px}
}
@media(forced-colors:active){
 .button,.platform-button,.nav-toggle{border:1px solid ButtonText}
 :where(a,button,audio,iframe):focus-visible{outline-color:Highlight}
}

/* YouTube invitation: live copy and a separate illustration, all in reading order. */
.youtube-section{padding-block:64px 56px;border-bottom:1px solid var(--rule);background:var(--red);color:var(--cream)}
.youtube-panel{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.8fr);gap:32px 44px;align-items:center}
.youtube-copy{min-width:0;max-width:68ch}
.youtube-copy .eyebrow{display:flex;align-items:center;gap:16px}
.youtube-copy .eyebrow::after{content:"";height:1px;flex:1;background:var(--cream);max-width:130px}
.youtube-copy h2{font-size:clamp(2.5rem,5vw,4.75rem);line-height:1.08;margin-bottom:22px}
.youtube-copy .youtube-lead{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.45;margin:0 0 14px}
.youtube-copy p:not(.eyebrow):not(.youtube-lead){font-size:1rem;margin:0 0 26px}
.youtube-cta{gap:14px;max-width:100%;text-align:left;min-height:76px;border:1px solid transparent;border-radius:14px;padding:16px 22px;font-size:1.125rem;line-height:1.4}
.youtube-cta svg{flex:none}.youtube-cta>span:first-of-type{min-width:0;overflow-wrap:anywhere}
.youtube-handle{display:block;font-size:.8125rem;font-weight:400;margin-top:3px}
.youtube-cta:focus-visible{outline-color:var(--cream)}
.youtube-host{grid-column:2;grid-row:1 / span 2;display:block;width:100%;height:auto;max-height:640px;object-fit:contain;align-self:end}
.youtube-scenes{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-self:end}
.youtube-scenes figure{min-width:0;margin:0;border:3px solid var(--cream);background:var(--cream);color:var(--red);border-radius:4px}
.youtube-scenes img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.youtube-scenes figcaption{font-size:.75rem;font-weight:700;line-height:1.5;padding:9px 7px;text-align:center;overflow-wrap:anywhere}
@media(max-width:760px){
 .youtube-section{padding-block:40px}
 .youtube-panel{grid-template-columns:minmax(0,1fr);gap:26px}
 .youtube-copy h2{font-size:clamp(2.5rem,9vw,3.5rem)}
 .youtube-host{grid-column:1;grid-row:auto;width:65%;max-width:240px;max-height:none;justify-self:end}
 .youtube-scenes{grid-column:1;gap:10px}
 .youtube-scenes figcaption{font-size:.75rem;padding:8px 4px}
}
@media(max-width:22em){.youtube-scenes{grid-template-columns:minmax(0,1fr)}.youtube-scenes figure{display:grid;grid-template-columns:1fr 1fr;align-items:center}.youtube-cta{padding:14px;gap:10px}}
@media(forced-colors:active){.youtube-scenes figure{border-color:CanvasText}}

/* Compact mobile YouTube composition; desktop keeps its full-height host. */
.youtube-host-frame{display:contents}
@media(max-width:760px){
 .youtube-panel{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px 12px;align-items:start}
 .youtube-copy{display:contents}
 .youtube-copy>.eyebrow{grid-column:1/-1;grid-row:1;margin:0}
 .youtube-copy h2{grid-column:1/-1;grid-row:2;margin:0 0 6px;font-size:clamp(2.25rem,8.6vw,3.5rem)}
 .youtube-copy .youtube-lead{grid-column:1;grid-row:3;margin:0;font-size:1.125rem;line-height:1.4}
 .youtube-copy p:not(.eyebrow):not(.youtube-lead){grid-column:1;grid-row:4;margin:0;font-size:.9375rem;line-height:1.65}
 .youtube-host-frame{display:block;grid-column:2;grid-row:3/span 2;align-self:end;min-width:0;aspect-ratio:3/5;overflow:hidden;border-bottom:1px solid var(--rule)}
 .youtube-host-frame .youtube-host{display:block;width:135%;max-width:none;max-height:none;height:auto;margin-left:-22%;object-fit:contain}
 .youtube-cta{grid-column:1/-1;grid-row:5;width:100%;justify-content:center;margin-top:4px;padding:14px 16px;min-height:72px;font-size:1rem;gap:12px}
 .youtube-handle{font-size:.75rem}
 .youtube-scenes{grid-column:1/-1;grid-row:6;gap:10px;margin-top:4px}
}
/* Keep enlarged default text comfortable instead of squeezing the copy. */
@media(max-width:20em){
 .youtube-panel{grid-template-columns:minmax(0,1fr)}
 .youtube-copy .youtube-lead,.youtube-copy p:not(.eyebrow):not(.youtube-lead){grid-column:1}
 .youtube-host-frame{grid-column:1;grid-row:5;width:45%;justify-self:end;aspect-ratio:1/1;max-width:150px}
 .youtube-cta{grid-row:6}
 .youtube-scenes{grid-row:7}
}



/* Listening section proportions follow the supplied desktop/mobile concept. */
.listen-welcome{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:center}
.listen-welcome-copy{min-width:0}
.listen-calvin-picture{display:block;align-self:end;min-width:0;justify-self:end;width:100%;max-width:440px}
.listen-calvin{display:block;width:100%;height:auto}
.listen-welcome+.platforms{margin-top:0}
.platform-arrow{flex:none}
@media(max-width:760px){
 .listen{padding:28px 4%}
 .listen-panel{padding:22px 16px}
 .listen-welcome{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px;align-items:center;margin-bottom:12px}
 .listen-welcome .eyebrow{font-size:.5625rem;letter-spacing:1px;margin-bottom:9px;line-height:1.5}
 .listen-welcome h2{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.08;margin-bottom:10px}
 .listen-welcome .listen-intro{font-size:.8125rem;line-height:1.4}
 .listen-calvin-picture{align-self:end;width:100%;max-width:none}
 .listen-calvin{width:100%;height:auto}
 .listen .platforms{grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 16px;align-items:stretch}
 .listen .platforms>a{min-height:0;align-items:stretch;margin:0;max-width:none}
 .listen .platform-button{flex-direction:row;justify-content:flex-start;text-align:left;min-height:66px;padding:12px 15px;gap:13px;border-radius:12px}
 .listen .platforms .platform-icon{flex:0 0 32px;width:32px;height:32px}
 .listen .platform-label{gap:3px}
 .listen .platform-label small{font-size:.5rem;letter-spacing:.7px}
 .listen .platform-label strong{font-size:1rem}
 .listen .platform-arrow{display:block;margin-left:auto;width:18px;height:18px}
 .listen .rss-row{flex-direction:column;gap:10px;padding:14px 0}
 .listen .rss-row h3{font-size:.9375rem}
 .listen .rss-row p{font-size:.8125rem;line-height:1.5;margin-top:3px}
 .listen .rss-row .rss-badge{width:100%;min-height:0}
 .listen .rss-badge .platform-label{align-items:flex-start}
 .listen .rss-badge .rss-icon{width:32px;height:32px;flex-basis:32px}
 .listen .embedded-player{margin-top:18px}
 .listen .embedded-player h3{font-size:1.5rem}
 .listen .player-hint{font-size:.8125rem;line-height:1.5;margin-bottom:12px}
}
/* Reflow for very narrow widths or enlarged default text. */
@media(max-width:20em){
 .listen-welcome{grid-template-columns:minmax(0,1fr)}
 .listen-calvin-picture{width:55%;max-width:200px}
}
