:root{--navy:#071120;--navy2:#0d1b2d;--cream:#f4efe5;--gold:#e4b45a;--red:#9d2834;--white:#fff;--sans:'DM Sans',Arial,sans-serif;--serif:'Libre Caslon Display',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--sans);font-size:16px;line-height:1.65}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:1rem}
header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,5vw,5rem);position:absolute;inset:0 0 auto;z-index:10;color:#fff;border-bottom:1px solid #ffffff2a}
.brand{display:flex;align-items:center;gap:.8rem;color:inherit;text-decoration:none;font-weight:700;font-size:1.2rem}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-size:.8rem;letter-spacing:.08em}
nav{display:flex;gap:clamp(.85rem,1.6vw,2rem)}
nav a{color:inherit;text-decoration:none;font-size:.85rem}
.lang{background:transparent;color:#fff;border:1px solid #ffffff66;border-radius:99px;padding:.45rem .75rem;cursor:pointer}
.hero{min-height:850px;position:relative;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--navy)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#071120f5 0%,#071120c9 46%,#07112039 78%),linear-gradient(0deg,#071120e8,transparent 45%)}
.hero-copy{position:relative;z-index:2;width:min(720px,88vw);margin-left:clamp(1.3rem,8vw,9rem);padding-top:3rem}
.kicker,.section-tag{color:var(--gold);font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.hero h1{font:400 clamp(4.8rem,10vw,9.5rem)/.75 var(--serif);margin:1.4rem 0 2rem;letter-spacing:-.045em}
.hero h1 em{color:var(--gold);font-style:normal}
.hero-copy>p:not(.kicker){max-width:590px;font-size:1.2rem;color:#d6deea}
.actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.button{display:inline-flex;padding:.85rem 1.2rem;text-decoration:none;font-weight:700;font-size:.85rem}
.gold{background:var(--gold);color:var(--navy)}
.line{border:1px solid #ffffff80;color:#fff}
.hero-note{position:absolute;z-index:2;right:clamp(1.5rem,5vw,5rem);bottom:3rem;display:grid;text-align:right}
.hero-note b{color:var(--gold);font-size:1.25rem}
.hero-note span{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.signal{position:absolute;z-index:2;right:8%;top:42%;display:flex;align-items:center;gap:6px;height:120px;opacity:.75}
.signal i{display:block;width:3px;height:25%;background:var(--gold);animation:pulse 1.4s ease-in-out infinite}
.signal i:nth-child(2),.signal i:nth-child(6){height:55%;animation-delay:.15s}
.signal i:nth-child(3),.signal i:nth-child(5){height:85%;animation-delay:.3s}
.signal i:nth-child(4){height:100%;animation-delay:.45s}
@keyframes pulse{50%{transform:scaleY(.45);opacity:.5}
}
.impact{display:grid;grid-template-columns:repeat(3,1fr);background:var(--red);color:#fff;padding:2rem clamp(1.2rem,8vw,9rem)}
.impact div{display:flex;align-items:center;gap:1rem;border-right:1px solid #ffffff36;padding-right:2rem}
.impact div:last-child{border:0}
.impact strong{font:400 3rem var(--serif);color:var(--gold)}
.impact span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.section{padding:clamp(5rem,9vw,9rem) clamp(1.3rem,8vw,9rem)}
h2{font:400 clamp(3rem,6vw,6rem)/.92 var(--serif);letter-spacing:-.035em;margin:.8rem 0 2rem}
.listen{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,8vw,9rem);align-items:center;background:var(--navy2);color:#fff;position:relative;overflow:hidden}
.listen::before{content:"";position:absolute;width:460px;height:460px;border:1px solid #e4b45a22;border-radius:50%;left:-230px;top:-180px;box-shadow:0 0 0 80px #e4b45a0b,0 0 0 160px #e4b45a08}
.listen-copy{position:relative;z-index:1}
.listen-copy h2{margin-bottom:1.5rem}
.listen-copy>p{color:#b7c2d0;max-width:560px}
.on-air{display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;align-items:center;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #ffffff26}
.on-air>span{grid-row:1/3;width:12px;height:12px;background:var(--red);border-radius:50%;box-shadow:0 0 0 6px #9d28342e;animation:onair 1.8s ease-in-out infinite}
.on-air strong{font-size:.85rem}.on-air small{color:#8e9aaa}
@keyframes onair{50%{box-shadow:0 0 0 11px #9d283408}}
.player-card{position:relative;z-index:1;background:#f8f3e9;color:var(--navy);padding:clamp(1.3rem,3vw,2.5rem);box-shadow:0 30px 80px #02060d77}
.now-playing{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #07112022}
.now-playing span,.playlist-heading span{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--red);font-weight:700}
.now-playing h3{font:400 clamp(2rem,4vw,3.4rem)/1 var(--serif);margin:.35rem 0}
.now-playing p{margin:0;color:#657083;font-size:.8rem}
.mini-signal{display:flex;align-items:center;gap:4px;height:52px}
.mini-signal i{width:3px;height:30%;background:var(--gold);animation:pulse 1.2s ease-in-out infinite;animation-play-state:paused}
.player-card.playing .mini-signal i{animation-play-state:running}.mini-signal i:nth-child(2),.mini-signal i:nth-child(4){height:75%;animation-delay:.12s}.mini-signal i:nth-child(3){height:100%;animation-delay:.25s}
.transport{display:flex;justify-content:center;align-items:center;gap:1rem;margin:1.4rem 0}
.transport button{width:44px;height:44px;border:1px solid #0711202c;border-radius:50%;background:transparent;color:var(--navy);font-size:1.2rem;cursor:pointer}
.transport .play-main{width:64px;height:64px;border:0;background:var(--red);color:#fff;font-size:1.35rem;padding-left:.35rem;box-shadow:0 8px 20px #9d28343d}
.transport button:hover,.transport button:focus-visible{border-color:var(--red);outline:none;transform:translateY(-1px)}
.timeline{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:.7rem;font-size:.7rem;color:#657083}
input[type="range"]{accent-color:var(--red);width:100%;cursor:pointer}
.volume{display:grid;grid-template-columns:auto auto minmax(80px,180px) auto;justify-content:end;align-items:center;gap:.5rem;margin:1rem 0 1.5rem;color:#657083;font-size:.7rem}
.volume label{text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-right:.3rem}
.playlist-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #07112022;padding:1.3rem 0 .6rem}
.playlist-heading strong{font-size:.8rem;text-transform:uppercase;letter-spacing:.11em}.playlist-heading span{color:#657083}
.playlist{list-style:none;padding:0;margin:0;max-height:258px;overflow:auto}
.track-item{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:.65rem;width:100%;border:0;border-bottom:1px solid #07112016;background:transparent;color:var(--navy);padding:.76rem .5rem;text-align:left;cursor:pointer}
.track-item>span{color:#8992a0;font-size:.7rem}.track-item strong{font-size:.9rem}.track-item i{font-style:normal;color:var(--red);opacity:0}
.track-item:hover,.track-item:focus-visible{background:#e4b45a18;outline:none}.track-item.active{background:#e4b45a2b}.track-item.active i{opacity:1}.track-item.active strong{color:var(--red)}
.serial{display:grid;grid-template-columns:minmax(260px,.62fr) 1.38fr;gap:clamp(3rem,7vw,8rem);align-items:start;background:#e9dfcc}
.serial-cover{position:sticky;top:2rem}
.serial-cover>img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 25px 65px #07112038}
.serial-cover>div{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--red);color:#fff;padding:1rem 1.2rem}
.serial-cover span{grid-row:1/3;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.serial-cover strong{font:400 2.8rem/1 var(--serif);color:var(--gold)}.serial-cover small{text-align:right;text-transform:uppercase;letter-spacing:.08em}
.serial-content h2{font-size:clamp(3rem,5vw,5.4rem);max-width:800px}
.serial-intro{color:#465063;max-width:760px;font-size:1.08rem}
.novel-player{background:var(--navy);color:#fff;padding:clamp(1.2rem,2.5vw,2rem);margin:2rem 0;box-shadow:0 20px 50px #07112028}
.novel-now{display:flex;justify-content:space-between;align-items:start;gap:1rem;padding-bottom:1rem;border-bottom:1px solid #ffffff24}
.novel-now span{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}.novel-now h3{font:400 clamp(1.8rem,3vw,2.7rem)/1 var(--serif);margin:.35rem 0}.novel-now p{margin:0;color:#aeb8c5;font-size:.8rem}
#novel-intro{border:1px solid #e4b45a77;background:transparent;color:var(--gold);padding:.65rem .8rem;cursor:pointer;font-size:.75rem}
.novel-controls{display:flex;justify-content:center;align-items:center;gap:1rem;margin:1.25rem 0}.novel-controls button{width:42px;height:42px;border:1px solid #ffffff40;border-radius:50%;background:transparent;color:#fff;font-size:1.1rem;cursor:pointer}.novel-controls .novel-play{width:60px;height:60px;border:0;background:var(--gold);color:var(--navy);padding-left:.25rem}
.novel-player .timeline{color:#aeb8c5}.novel-player input[type="range"]{accent-color:var(--gold)}
.episodes-head{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin:2.2rem 0 .8rem}.episodes-head strong{text-transform:uppercase;letter-spacing:.12em;font-size:.85rem}.episodes-head span{font-size:.75rem;color:#657083}
.episodes{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-height:420px;overflow:auto;padding-right:.35rem}
.episode{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border:1px solid #07112022;background:#f4efe5;color:var(--navy);padding:.75rem .85rem;cursor:pointer;text-align:left}.episode span{font-size:.78rem}.episode i{font-style:normal;color:var(--red);opacity:0}.episode:hover,.episode:focus-visible{border-color:var(--red);outline:none}.episode.active{background:var(--gold);border-color:var(--gold)}.episode.active i{opacity:1}.episode.resume::after{content:"•";color:var(--red);font-size:1.25rem}
.mission-grid{display:grid;grid-template-columns:1.05fr .75fr;gap:clamp(3rem,8vw,9rem);align-items:start}
.mission-grid h2{margin-top:0}
.mission-grid p{color:#465063}
.lead{font-size:1.3rem;color:var(--navy)!important}
.author-link{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:center;margin-top:2rem;padding:1.1rem 1.25rem;border:1px solid #07112030;color:var(--navy);text-decoration:none;transition:.2s}
.author-link span{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--red);font-weight:700}
.author-link strong{grid-column:1;font:400 1.65rem var(--serif)}
.author-link i{grid-column:2;grid-row:1/3;font-style:normal;font-size:1.4rem;color:var(--red)}
.author-link:hover,.author-link:focus-visible{background:var(--gold);border-color:var(--gold);outline:none;transform:translateY(-2px)}
.studio{background:var(--navy);color:#fff}
.studio-heading{display:grid;grid-template-columns:1fr .55fr;gap:5rem;align-items:end;margin-bottom:3rem}
.studio-heading h2{margin-bottom:0}
.studio-heading>p{color:#b7c2d0}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:.65rem}
.photo{padding:0;border:0;background:#111b29;overflow:hidden;cursor:pointer}
.photo.hero-photo{grid-column:span 2;grid-row:span 2}
.photo.wide{grid-column:span 2}
.photo img{display:block;width:100%;height:100%;object-fit:cover;transition:.3s}
.photo:hover img,.photo:focus-visible img{transform:scale(1.04);filter:brightness(1.08)}
.photo:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.history{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(3rem,8vw,9rem);align-items:center}
.history-image img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.history-copy p{color:#465063;max-width:650px}
.history blockquote{font:400 2.2rem/1.2 var(--serif);margin:2.5rem 0 0;color:var(--red)}
.cielo{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,7vw,8rem);align-items:center;background:var(--red);color:#fff;overflow:hidden}
.cielo .section-tag{color:var(--gold)}
.cielo h2{margin-bottom:1.2rem}
.cielo-copy>p{color:#f1dfe1;max-width:560px}
.cielo .cielo-lead{font:400 clamp(1.7rem,3vw,2.6rem)/1.15 var(--serif);color:#fff}
.cielo-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #ffffff40}
.cielo-facts div{display:grid;gap:.2rem}
.cielo-facts strong{font:400 clamp(2rem,4vw,3.5rem)/1 var(--serif);color:var(--gold)}
.cielo-facts span{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
.cielo-media video{display:block;width:100%;aspect-ratio:16/9;background:#05070b;object-fit:cover;box-shadow:0 28px 70px #38070d66}
.cielo-caption{display:grid;grid-template-columns:84px 1fr;gap:1rem;align-items:center;margin-top:1rem}
.cielo-caption img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.cielo-caption p{margin:0;color:#f1dfe1;font-size:.85rem}
.connect{display:grid;grid-template-columns:.7fr 1fr;gap:clamp(3rem,8vw,9rem);background:var(--gold)}
.connect h2{margin-bottom:1rem}
.channels{display:grid}
.channels a{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:1rem;color:var(--navy);text-decoration:none;border-bottom:1px solid #07112045;padding:1.4rem 0}
.channels a:first-child{border-top:1px solid #07112045}
.channels small{text-transform:uppercase;letter-spacing:.12em}
.channels strong{font:400 clamp(1.5rem,3vw,2.5rem) var(--serif)}
.channels span{font-size:1.4rem}
footer{display:flex;justify-content:space-between;padding:2rem clamp(1.3rem,8vw,9rem);background:var(--navy);color:#aeb8c5;font-size:.75rem}
footer a{color:var(--gold);text-decoration:none}footer a:hover,footer a:focus-visible{text-decoration:underline;outline:none}
dialog{padding:0;border:0;background:transparent;max-width:94vw;max-height:94vh}
dialog::backdrop{background:#020711eb}
dialog img{display:block;max-width:90vw;max-height:88vh;object-fit:contain}
.close{position:fixed;right:2rem;top:1rem;border:0;background:transparent;color:#fff;font-size:3rem;cursor:pointer}
@media(max-width:900px){header nav{display:none}
.signal{display:none}
.hero{min-height:780px}
.hero-copy{padding-top:5rem}
.impact,.listen,.serial,.mission-grid,.studio-heading,.history,.cielo,.connect{grid-template-columns:1fr}
.impact div{display:block}
.impact strong{display:block}
.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
.history-image{max-width:520px}
.history-image img{aspect-ratio:4/3}
.connect{gap:2rem}
.cielo-media{max-width:760px}
.player-card{max-width:760px;width:100%}
.serial-cover{position:relative;top:auto;max-width:440px}.episodes{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){.hero h1{font-size:4.4rem}
.hero-note{left:1.3rem;right:auto;text-align:left}
.impact{padding:1.5rem 1.3rem}
.impact strong{font-size:2.2rem}
.impact span{font-size:.6rem}
.section{padding:4.5rem 1.3rem}
.gallery{grid-auto-rows:130px}
.photo.hero-photo{grid-column:span 2}
.channels a{grid-template-columns:1fr auto}
.channels small{grid-column:1/-1}
.channels strong{font-size:1.45rem;overflow-wrap:anywhere}
footer{display:grid;gap:.5rem}
.now-playing h3{font-size:2.25rem}.volume{grid-template-columns:auto auto 1fr auto}.player-card{padding:1.15rem}.listen{gap:2.5rem}
.episodes{grid-template-columns:repeat(2,1fr);max-height:370px}.novel-now{display:grid}.episodes-head{display:grid}.serial-cover{max-width:none}
}

/* Official RadioDoxa identity */
.brand{width:180px;height:42px;background:url('assets/radiodoxa-logo-blue.png') center/contain no-repeat}
.brand span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-copy::before{content:"";display:block;width:min(390px,75vw);height:74px;margin-bottom:1.2rem;background:url('assets/radiodoxa-logo-blue.png') left center/contain no-repeat}
.mission::before{content:"";display:block;width:min(520px,90%);height:100px;margin:0 0 3.5rem;background:url('assets/radiodoxa-logo.png') left center/contain no-repeat}
@media(max-width:560px){.brand{width:145px}.hero-copy::before{height:58px;margin-bottom:1rem}.mission::before{height:72px;margin-bottom:2.5rem}}
