/* AR Nation Radio – warm design: ivory, burgundy, gold. Station brand first; church branding only in the provider section. */
:root{--m:#6e1423;--m2:#8c1c30;--g:#c9a227;--g2:#f3e6bf;--bg:#fbf7ef;--card:#fffdf8;--t:#2b1d16;--mut:#6f6054;--r:18px;--sh:0 6px 24px rgba(110,20,35,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--t);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--m);letter-spacing:.01em;line-height:1.25}
h1{margin:.4rem 0;font-size:clamp(2rem,5vw,2.8rem)}h2{font-size:1.45rem;margin:2.2rem 0 .8rem;padding-bottom:.35rem;border-bottom:2px solid var(--g2)}h3{font-size:1.15rem;margin:1.6rem 0 .6rem}
a{color:var(--m2)}a:hover{color:var(--m)}
.b{background:var(--m);color:#fff;font-weight:700;padding:.5rem 1rem;text-align:center;font-size:.9rem}
main{max-width:900px;margin:0 auto;padding:1.5rem 1.2rem 2rem}
.hero{background:linear-gradient(160deg,var(--card) 0%,var(--g2) 140%);border:1px solid #ead9ad;border-radius:28px;padding:2rem 1.6rem;text-align:center;box-shadow:var(--sh)}
.btn{display:inline-block;background:var(--m);color:#fff;border:0;border-radius:999px;padding:.8rem 1.5rem;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;margin:.3rem;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:hover{background:var(--m2);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(110,20,35,.18)}.btn.sm{padding:.45em .9em;font-size:.88rem}
.btn.alt{background:var(--g2);color:var(--m);border:1px solid #e3cf95}.btn.alt:hover{background:#efdca6;color:var(--m)}.btn[disabled],.btn.off{background:#e6ddd2;color:#6f6054;cursor:not-allowed}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.card{background:var(--card);border:1px solid #efe2c6;border-radius:var(--r);padding:1.1rem;box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;background:var(--card)}td,th{padding:.55rem;border-bottom:1px solid #efe2c6;text-align:left}th{color:var(--m)}
.mut{color:var(--mut);font-size:.92rem}fieldset{border:1px dashed var(--m);border-radius:12px;opacity:.75}
input,textarea,select{width:100%;padding:.6rem .7rem;margin:.2rem 0 .7rem;border:1px solid #dccdb3;border-radius:10px;background:#fff;font:inherit}
.fam{background:#f7efdc;border-radius:var(--r);padding:1rem;margin-top:1.5rem}.fam a{color:var(--m)}
audio{width:100%}footer{text-align:center;padding:2rem 1rem;color:var(--mut);font-size:.88rem;border-top:1px solid #efe2c6;margin-top:2rem}
.mascot{display:block;width:min(64vw,220px);height:auto;aspect-ratio:1;border-radius:26px;border:3px solid var(--g);box-shadow:var(--sh);margin:0 auto 1rem}.mascot.sm{width:min(50vw,170px)}
@media(min-width:720px){.hero{display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:center;text-align:left}.hero .mascot{margin:0}}
.np{background:var(--card);border:1px solid #efe2c6;border-radius:var(--r);padding:1rem 1.1rem;margin:.8em 0;box-shadow:var(--sh)}.ctl{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;margin-top:1.2rem}
table.sch td{padding:.5em .5em;vertical-align:top}.tm{white-space:nowrap;font-weight:bold;color:var(--m)}
.ep{display:flex;flex-wrap:wrap;gap:.4em;align-items:center;justify-content:space-between;border-bottom:1px solid #efe2c6;padding:.5em 0}.ep span{flex:1 1 14em}
/* Now-playing artwork: logo on top (scales to card width, aspect kept), label on its own line below – works at every width */
.art{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;margin-bottom:.35rem;min-width:0}
.art img{display:block;width:100%;max-width:312px;height:auto;aspect-ratio:312/58;object-fit:contain;border-radius:6px;background:#fff}
.art strong{display:block;overflow-wrap:anywhere}
.np{overflow-wrap:anywhere}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.ctl label{display:flex;align-items:center;gap:.5em;flex:1 1 200px;min-height:44px;margin:0 .3rem}
.ctl input[type=range]{flex:1;min-width:120px;width:auto;margin:0;min-height:44px;accent-color:var(--m)}
.verse{overflow-wrap:break-word}.card{min-width:0}
.day{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.6rem}@media(min-width:720px){.day{grid-template-columns:1fr 1.6fr}}
.clk{font-family:Georgia,serif;font-size:2rem;color:var(--m)}.verse{font-family:Georgia,serif;font-size:1.1rem;font-style:italic}.verse cite{display:block;font-style:normal;color:var(--mut);font-size:.9rem;margin-top:.4rem}
dialog{border:0;border-radius:24px;padding:1.4rem;max-width:min(560px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.25);background:var(--card)}dialog::backdrop{background:rgba(43,29,22,.45)}
@media(max-width:600px){dialog{margin:auto 0 0;max-width:100vw;width:100vw;border-radius:24px 24px 0 0}}
.on{color:#2f7a3a}.off{color:#a40000}.logo-text{display:inline-block;font-weight:800;font-size:1.4em;border:2px solid var(--m);border-radius:10px;padding:.2em .6em;color:var(--m)}
.fade{animation:fd .6s ease both}@keyframes fd{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
select{min-height:44px}

.spk{display:flex;align-items:center;gap:.6em;margin:.4em 0}.spk img{width:80px;height:80px;border-radius:10px;object-fit:cover;flex:none}
.spk figcaption{font-size:.9em;line-height:1.3}.spk-name{font-weight:700}.spk-credit{font-size:.85em;color:#555}

/* ===== Brand finish 2026-10-21 (logo-matched): deep maroon + gold. Styling only. See specs/BRAND_STYLE_AR_Nation_Radio_2026-10-21.md ===== */
@font-face{font-family:"Cinzel";src:url(fonts/cinzel-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
:root{--maroon:#470108;--maroon-d:#360004;--maroon-l:#6a0f17;--gold-d:#a37a51;--gold:#eeb76e;--gold-l:#fae1b6;--ivory:#fbf3e4;
 --m:#5a0a12;--m2:#7a1a22;--g:#c9a063;--g2:#f3e2c2;--card:#fffaf1;--t:#2b1d16;--mut:#5f5046;
 --gold-grad:linear-gradient(180deg,#fae1b6 0%,#eeb76e 48%,#a37a51 100%);--glow:0 0 0 1px rgba(238,183,110,.35),0 8px 28px rgba(0,0,0,.35),0 0 22px rgba(238,183,110,.18)}
body{background:radial-gradient(120% 80% at 50% 0%,#5c0710 0%,var(--maroon) 45%,var(--maroon-d) 100%) fixed;background-color:var(--maroon);color:var(--ivory)}
h1,h2,h3,.clk{font-family:"Cinzel",Georgia,"Times New Roman",serif;letter-spacing:.03em}
main>h1,main>h2,main>h3,.hero h1,.hero h2,section>h2,section>h3,main>section>h1{color:var(--gold);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{border-bottom:0;padding-bottom:.45rem}
main h2{position:relative}main h2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(238,183,110,0),#eeb76e 20%,#fae1b6 50%,#eeb76e 80%,rgba(238,183,110,0))}
a{color:var(--gold-l)}a:hover{color:#fff}
.mut{color:#e9d3b0}footer{color:#e9d3b0;border-top:1px solid rgba(238,183,110,.35)}
.b{background:linear-gradient(90deg,var(--maroon-d),var(--maroon-l),var(--maroon-d));color:var(--gold-l);border-bottom:1px solid rgba(238,183,110,.45)}
.hero{background:linear-gradient(160deg,#5e0912 0%,var(--maroon) 55%,var(--maroon-d) 100%);border:1px solid rgba(238,183,110,.55);box-shadow:var(--glow);color:var(--ivory)}
.hero .mut{color:#ecd8b6}
.mascot{border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(238,183,110,.12),0 10px 30px rgba(0,0,0,.45),0 0 28px rgba(238,183,110,.25)}
.btn{background:var(--gold-grad);color:#2a0306;border:1px solid #a37a51;box-shadow:0 2px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.45)}
.btn:hover{background:linear-gradient(180deg,#fff0d2 0%,#f3c47f 50%,#b38a5f 100%);color:#2a0306;box-shadow:0 4px 18px rgba(238,183,110,.35)}
.btn.alt{background:transparent;color:var(--gold-l);border:1px solid var(--gold)}.btn.alt:hover{background:rgba(238,183,110,.12);color:#fff}
.btn[disabled],.btn.off{background:#5a3a3c;color:#e3d2c0;border-color:#7a5a4c;box-shadow:none}
/* Light surfaces keep dark text for AA readability */
.card,.np,table,.fam,dialog{background:var(--card);color:var(--t);border-color:#e6cf9f}
.card,.np{box-shadow:0 6px 22px rgba(0,0,0,.28),0 0 0 1px rgba(238,183,110,.25)}
.card a,.np a,table a,.fam a,dialog a{color:var(--m2)}.card a:hover,.np a:hover,table a:hover,dialog a:hover{color:var(--m)}
.card .mut,.np .mut,table .mut,.fam .mut,dialog .mut{color:var(--mut)}
.card h1,.card h2,.card h3,.np h2,.np h3,dialog h2,dialog h3,.fam h2,.fam h3{color:var(--m);background:none;-webkit-text-fill-color:currentColor}
.card .btn.alt,.np .btn.alt,dialog .btn.alt,.fam .btn.alt{color:var(--m);border-color:var(--gold-d)}
th,.tm,.clk{color:var(--m)}.clk{font-weight:700}
.ctl input[type=range]{accent-color:var(--gold)}
.logo-text{color:var(--m);border-color:var(--gold-d)}
fieldset{border-color:var(--gold)}
.on{color:#a8e0a2}.card .on,.np .on{color:#2f7a3a}.off{color:#ffb4a8}.card .off,.np .off{color:#a40000}
.npthumb{float:left;width:72px;height:72px;margin:0 .85rem .4rem 0;border-radius:12px;border:1px solid var(--gold-d,#a37a51);box-shadow:0 0 12px rgba(238,183,110,.25);object-fit:cover}.np::after{content:"";display:block;clear:both}
/* ===== Fluid first-screen layout (2026-10-21): header -> Listen Live -> now playing above the fold at every size. Order/sizing only; no fixed heights. Checked by scripts/check_fold.py ===== */
main{display:flex;flex-direction:column;padding-top:clamp(.6rem,2.5vh,1.5rem)}
main>*{order:20;min-width:0}
.hero{order:1;padding:clamp(.8rem,2.6vh,2rem) clamp(.9rem,3vw,1.6rem)}
.hero h1{font-size:clamp(1.4rem,1rem + 2.4vw,2.8rem);margin:.2rem 0}
.hero p{margin:.4rem 0;font-size:clamp(.92rem,.85rem + .3vw,1.05rem)}
.mascot{width:clamp(64px,min(22vw,22vh),220px)}
@media(min-width:720px){.hero{grid-template-columns:clamp(96px,min(18vw,22vh),220px) 1fr;gap:clamp(1rem,2.5vw,2rem)}.hero .mascot{width:100%}}
.ctl{order:2;margin-top:clamp(.5rem,2vh,1.2rem)}
#np{order:3;margin:clamp(.4rem,1.5vh,.8rem) 0}
main>p:has(#ib2){order:4;margin:.2rem 0}#tm{order:5;margin:.2rem 0}
.day{order:6}
.npthumb{width:clamp(56px,10vmin,72px);height:auto;aspect-ratio:1}
/* Phones: compact header row, description below the player */
@media(max-width:600px){
 main{display:grid;grid-template-columns:clamp(52px,16vw,68px) minmax(0,1fr);column-gap:.75rem;align-items:center}
 main>*{grid-column:1/-1}
 .hero,.hero>div{display:contents}
 .hero>div>*{grid-column:1/-1;order:7;min-width:0}
 .hero .mascot{order:1;grid-column:1;grid-row:span 2;width:100%;margin:0;border-radius:14px;border-width:1px}
 .hero h1{order:1;grid-column:2;margin:0;font-size:clamp(1.15rem,5.6vw,1.6rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end}
 .hero h1+p{order:2;grid-column:2;margin:0;font-size:clamp(.8rem,3.6vw,.98rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:start}
 .hero p:nth-of-type(2){display:none}
 .hero h1+p~p{color:#e9d3b0;font-size:.95rem;margin:.3rem 0}
 .ctl{flex-wrap:nowrap;gap:.4em}.ctl .btn{white-space:nowrap;padding:.6rem clamp(.6rem,2.6vw,1rem);margin:0;flex:none;font-size:clamp(.88rem,3.8vw,1rem)}.ctl label{flex:1 1 0;min-width:0;margin:0}.ctl input[type=range]{min-width:0;width:100%}
 #np{padding:.8rem .9rem;line-height:1.5}
}
/* Short landscape (phones on their side): side-by-side, player left, now playing right */
@media(max-height:520px) and (min-aspect-ratio:4/3){
 main{display:grid;max-width:none;grid-template-columns:clamp(44px,12vh,60px) minmax(0,1fr) minmax(0,1.15fr);column-gap:.8rem;row-gap:.4rem;align-items:start;padding:.6rem 1rem}
 main>*{grid-column:1/-1}
 .hero,.hero>div{display:contents}
 .hero>div>*{grid-column:1/-1;order:7;min-width:0}
 .hero .mascot{order:1;grid-column:1;grid-row:1/span 2;width:100%;margin:0;border-radius:12px;border-width:1px}
 .hero h1{order:1;grid-column:2;grid-row:1;margin:0;font-size:clamp(1.05rem,4.5vh,1.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hero h1+p{order:2;grid-column:2;grid-row:2;margin:0;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hero p:nth-of-type(2){display:none}
 .hero h1+p~p{color:#e9d3b0;font-size:.95rem;margin:.3rem 0}
 .ctl{grid-column:1/3;grid-row:3;margin:.3rem 0 0;flex-wrap:wrap;gap:.4em}.ctl .btn{margin:0;white-space:nowrap}.ctl label{flex:1 1 140px;margin:0}
 main>p:has(#ib2){grid-column:1/3;grid-row:4}
 #np{grid-column:3;grid-row:1/span 5;margin:0;padding:.7rem .9rem;line-height:1.45;font-size:.95rem}
 #np .spk img,#np .npthumb{width:56px;height:56px}
}
/* Now-playing: square picture tagged to the speaker name on one row; source line small (2026-10-21) */
.npsrc{font-size:.8rem;letter-spacing:.02em;color:var(--mut);margin:0 0 .45rem}
.np .nprow{display:flex;align-items:center;gap:.75rem;margin:0 0 .5rem}
.np .nprow img{width:64px;height:64px;flex:none;border-radius:12px;object-fit:cover;border:1px solid var(--gold-d,#a37a51);box-shadow:0 0 10px rgba(238,183,110,.22)}
.np .nprow figcaption{line-height:1.25}.np .nprow .spk-name{font-size:1.08rem;font-weight:700}.np .nprow .spk-credit{font-size:.78rem;color:var(--mut)}
@media(max-height:520px) and (min-aspect-ratio:4/3){.np .nprow img{width:48px;height:48px}}
/* Up next: decorative circular avatar per row (2026-10-21) */
.uprow{display:flex;align-items:center;gap:.6rem}.uprow>div{min-width:0}
.upav{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--gold-d,#a37a51);pointer-events:none}
.upcr{font-size:.72rem;color:var(--mut)!important;text-decoration:none}.upcr:hover{text-decoration:underline}

.topnav{text-align:right;font-size:.85rem;padding:.35rem 1rem;line-height:1.3}