/* ============ The site's looks (templates), the header button, the Get in touch page and the radio bar ============
   Loaded after style.css on every page. Colours are the brand tokens from style.css plus the few added below
   (see docs/DESIGN-COLORS.md). Each look is chosen in Admin > Site builder > Look and sets html[data-theme]:
   ministry (the standard look, style.css alone), editorial, immersive, immersive-light, warm, media. */
:root{
  /* added with the new logo (October 2026) */
  --night:#03053A;      /* the logo's plinth: the Immersive look's page colour */
  --night-2:#0A1150;    /* a raised surface on --night */
  --globe:#0B9DB5;      /* the logo's globe teal: decoration only, never text */
  --paper:#FAF6EE;      /* Warm welcome: page colour */
  --sand:#E8DDC9;       /* Warm welcome: borders */
  --clay:#A0522D;       /* Warm welcome: eyebrows and small accents (5.6:1 on --paper) */
  --clay-soft:#F3E4D4;  /* Warm welcome: tinted bands */
}

/* ---------- header: the full name as the wordmark, Get in touch as the one strong button, Give as a quieter link ---------- */
.brand-name{display:flex;flex-direction:column;font-size:1.04rem;line-height:1.12;letter-spacing:.2px}
.brand-name span:last-child{color:var(--teal-600)}
.nav-end a.cta,.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--white);text-decoration:none;font:600 .93rem/1.2 var(--font-body);padding:10px 18px;border-radius:99px;min-height:42px;white-space:nowrap;box-shadow:0 6px 16px rgba(5,11,90,.18);transition:background-color .2s,transform .18s,box-shadow .2s;margin-left:6px}
.nav-end a.cta:hover,.cta:hover{background:var(--indigo);color:var(--white);transform:translateY(-1px);box-shadow:0 10px 22px rgba(5,11,90,.24)}
.cta-top{display:none}
.nav-end a.give-link{display:inline-flex;align-items:center;gap:6px}
.give-link svg{color:var(--gold);flex:none}
@media(max-width:1240px){
  .cta-top{display:inline-flex;padding:8px 15px;min-height:42px;font-size:.88rem;margin:0 2px 0 0}
  .nav-end a.cta-nav{display:none}
  .nav-end a.give-link{justify-content:flex-start}
}
/* a wide screen but not quite wide enough for everything at full size */
.top .wrap{max-width:1360px}
@media(max-width:1400px){
  .menu>li>a{padding:9px 7px;font-size:.9rem}
  .menu>li>a::after{left:7px;right:7px}
  .brand-name{font-size:.96rem}
  .nav-end a.cta{padding:10px 16px}
}
@media(max-width:520px){
  .brand-name{font-size:.86rem}
  .burger{font-size:0;gap:0;padding:12px 11px}
  .cta-top{padding:8px 12px;font-size:.82rem;min-height:40px}
}
@media(max-width:400px){
  .top .wrap{gap:8px}
  .brand{gap:8px}
  .brand img{width:32px;height:32px}
  .brand-name{font-size:.8rem}
  .cta-top{padding:8px 10px;font-size:.8rem}
}
@media(max-width:330px){.brand-name{display:none}}

/* ---------- footer: one tidy block: the name and motto, the page links in a row, contact details, copyright ---------- */
footer{margin-top:40px;padding:28px 0 max(18px,env(safe-area-inset-bottom));font-size:.9rem}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.footer-brand:hover{color:var(--white)}
.footer-brand img{width:44px;height:44px;flex:none;border-radius:10px;background:var(--white);padding:3px;object-fit:contain}
.footer-brand span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.footer-brand strong{font-size:.98rem}
.footer-brand em{color:var(--teal-300);font:italic .85rem var(--font-head)}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-nav a{color:var(--mist);text-decoration:none}
.footer-nav a:hover{color:var(--white);text-decoration:underline}
.footer-contact{margin:14px 0 0;color:var(--footer-text);display:flex;flex-wrap:wrap;gap:2px 0}
.footer-contact>*+*::before{content:'\00b7';margin:0 9px;opacity:.6}
.footer-contact a{color:var(--mist);text-decoration:none}
.footer-contact a:hover{color:var(--white);text-decoration:underline}
.footer-copy{margin-top:14px;padding-top:14px;font-size:.82rem}
@media(max-width:600px){
  footer{margin-top:28px;padding-top:22px}
  .footer-top{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-nav{gap:0 16px}
  .footer-nav a{padding:7px 0}
  .footer-contact{margin-top:8px;font-size:.86rem}
  .footer-copy{margin-top:10px;padding-top:12px}
}

/* ---------- the welcome banner: the photo behind it is only used by the Immersive look ---------- */
.hero-bg{display:none}
.hero-logo.is-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- Get in touch ---------- */
:root{
  --ico-visit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --ico-write:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --ico-pray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1.6 2 2.2 3.4 0 5.4C9.8 6.4 10.4 5 12 3z'/%3E%3Crect x='8.5' y='10' width='7' height='11' rx='1.5'/%3E%3C/svg%3E");
}
.touch-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 22px}
.touch{display:flex;flex-direction:column;gap:2px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--white);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);transition:transform .25s ease,border-color .25s,box-shadow .25s}
.touch:hover{color:var(--ink);border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.touch strong{color:var(--navy);font-size:1.05rem}
.touch-ico{width:42px;height:42px;border-radius:12px;background:var(--mist) center/22px no-repeat;margin-bottom:8px}
.ico-visit{background-image:var(--ico-visit)}.ico-write{background-image:var(--ico-write)}.ico-pray{background-image:var(--ico-pray)}
.visit-times p{margin:.15em 0}
.contact-details .visit-times{margin:0 0 1em}
@media(max-width:700px){
  .touch-ways{grid-template-columns:minmax(0,1fr);gap:10px}
  .touch{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;align-items:center;padding:12px 14px}
  .touch-ico{grid-row:span 2;margin:0}
}

/* ---------- home: the ministry's three expressions, and the Bishop ---------- */
.pillars-head{margin:0 0 4px}
.pillars-intro{margin:0 0 16px;max-width:60ch}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.pillar{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:22px 20px 18px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pillar::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal-600)}
.pillar-2::before{background:var(--navy)}.pillar-3::before{background:var(--indigo)}
.pillar h3{margin:4px 0 0;font-size:1.2rem}
.pillar h3 a{color:var(--navy);text-decoration:none;padding:0}
.pillar h3 a:hover{color:var(--teal-700)}
.pillar p{margin:0;color:var(--slate);font-size:.95rem;flex:1}
.pillar-link{font-weight:600;margin-top:6px;text-decoration:none}
.pillar-link:hover{text-decoration:underline}
.founder-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center}
.founder-card.no-photo{grid-template-columns:minmax(0,1fr)}
.founder-photo{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--mist)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.founder-copy h2{font-size:var(--fs-xl);margin:4px 0 10px}
.founder-copy .prose{margin-bottom:14px}
@media(max-width:700px){
  .founder-card{grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}
  .founder-copy h2{font-size:var(--fs-lg)}
}
[data-theme=warm] .pillar{border-color:var(--sand);box-shadow:none}
[data-theme=warm] .pillar-1::before{background:var(--clay)}
[data-theme=warm] .founder-photo{border:5px solid var(--white);box-shadow:-14px 14px 0 var(--clay-soft)}
[data-theme=editorial] .pillar{box-shadow:none;border-color:#E6EBF0}
[data-theme=immersive] .pillar{border-color:transparent;box-shadow:0 14px 44px rgba(0,0,0,.35);--tx:var(--ink);--hd:var(--navy);--sub:var(--indigo);--mu:var(--slate);--ln:var(--teal-600);--lnh:var(--teal-700);color:var(--tx)}

/* ---------- the radio bar ---------- */
.radio-bar{position:fixed;z-index:80;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:980px;margin:0 auto;background:rgba(5,11,90,.95);color:var(--white);border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px rgba(3,5,58,.35);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.rb-inner{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px}
.rb-play{flex:none;position:relative;width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--navy);display:grid;place-items:center;text-decoration:none;transition:transform .18s,box-shadow .3s}
.rb-play:hover{color:var(--navy);background:var(--mist);transform:scale(1.04)}
.rb-play svg{grid-area:1/1}
.radio-bar .rb-play::before{content:none!important;display:none!important}  /* not the headphone mark style.css gives links to .mp3 files */
.rb-i-pause{display:none}
.radio-bar:is([data-state=playing],[data-state=loading]) .rb-i-play{display:none}
.radio-bar:is([data-state=playing],[data-state=loading]) .rb-i-pause{display:block}
.radio-bar[data-state=playing] .rb-play{box-shadow:0 0 0 4px rgba(92,208,230,.4)}
.rb-spin{position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;border-top-color:var(--teal-300);opacity:0}
.radio-bar[data-state=loading] .rb-spin{opacity:1;animation:rb-spin 1s linear infinite}
@keyframes rb-spin{to{transform:rotate(360deg)}}
.rb-info{flex:1;min-width:0}
.rb-line{display:flex;align-items:center;gap:8px;min-width:0}
.rb-chip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:2px 9px 2px 6px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--teal-300);font:700 .68rem/1.5 var(--font-body);letter-spacing:1px;text-transform:uppercase}
.rb-chip svg{width:14px;height:14px}
.radio-bar.is-live .rb-chip{background:var(--error);color:var(--white)}
.radio-bar.is-off .rb-chip{color:var(--footer-text)}
.rb-name{font:700 .98rem/1.3 var(--font-body);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-now{font-size:.85rem;line-height:1.4;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rb-tools{display:flex;align-items:center;gap:10px;flex:none}
.rb-lite{display:inline-flex;align-items:center;gap:6px;margin:0;font:600 .8rem var(--font-body);color:var(--mist);cursor:pointer;min-height:44px;user-select:none}
.rb-lite input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--teal-300)}
.rb-vol{width:90px;accent-color:var(--teal-300)}
.rb-more{color:var(--white);font:600 .85rem var(--font-body);padding:10px 6px;text-decoration:none}
.rb-more:hover{color:var(--teal-300);text-decoration:underline}
.rb-min{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:var(--white);cursor:pointer;transition:background-color .2s}
.rb-min:hover{background:rgba(255,255,255,.2)}
.rb-min svg{transition:transform .25s}
.radio-bar.is-min{right:auto;max-width:calc(100% - 24px)}
.radio-bar.is-min .rb-now,.radio-bar.is-min .rb-tools>:not(.rb-min){display:none}
.radio-bar.is-min .rb-min svg{transform:rotate(180deg)}
.radio-bar.is-min .rb-name{max-width:42vw}
.radio-bar a:focus-visible,.radio-bar button:focus-visible,.radio-bar input:focus-visible{outline:3px solid var(--teal-300);outline-offset:2px}
html:not(.js) .rb-tools{display:none}
/* the footer clears the bar, so its last line is never hidden underneath */
body.has-radio footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media(pointer:coarse){.rb-vol{display:none}}
@media(max-width:620px){
  .radio-bar{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:16px}
  .rb-inner{gap:10px;padding:6px 8px 6px 6px}
  .rb-play{width:44px;height:44px}
  .rb-vol,.rb-more{display:none}
  .rb-lite{font-size:.72rem;gap:5px}
  .rb-name{font-size:.92rem}
  .rb-now{font-size:.8rem}
}
@media(max-width:370px){.rb-lite span{max-width:3.4em;line-height:1.1;white-space:normal}}
@media print{.radio-bar{display:none!important}}

/* ---------- the Site builder: choosing a look ---------- */
.look-list{border:0;padding:0;margin:0;display:grid;gap:10px}
.look-opt{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--white);cursor:pointer;font-weight:400;transition:border-color .2s,box-shadow .2s}
.look-opt:hover{border-color:var(--teal)}
.look-opt.on{border-color:var(--teal-600);box-shadow:inset 0 0 0 1px var(--teal-600)}
.look-opt input{position:absolute;opacity:0;pointer-events:none}
.look-opt:focus-within{outline:3px solid var(--royal);outline-offset:2px}
.look-text strong{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:.98rem}
.look-text>span{display:block;font-size:.86rem;color:var(--slate);line-height:1.45;margin-top:2px}
.look-text em{display:block;font-size:.8rem;color:var(--teal-700);font-style:normal;margin-top:4px}
.look-thumb{position:relative;display:block;width:104px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--page)}
.look-thumb i,.look-thumb b,.look-thumb em{position:absolute;display:block}
.look-thumb i{left:0;right:0;top:0;height:10px;background:var(--white);border-bottom:1px solid var(--border)}
.look-thumb b{left:6px;right:6px;top:14px;height:30px;border-radius:4px}
.look-thumb em{left:6px;bottom:6px;width:46px;height:18px;border-radius:3px;background:var(--white);border:1px solid var(--border)}
.look-sw{position:absolute;right:5px;bottom:6px;display:flex;gap:2px}
.look-sw s{display:block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(11,16,51,.2)}
.look-ministry b{background:var(--gradient-brand)}
.look-editorial{background:var(--white)}
.look-editorial b{background:linear-gradient(var(--ink),var(--ink)) 50% 6px/62% 5px no-repeat,linear-gradient(var(--slate),var(--slate)) 50% 14px/40% 2px no-repeat,linear-gradient(#C9D3DE,#C9D3DE) 50% 100%/100% 9px no-repeat}
.look-immersive{background:var(--night);border-color:var(--night)}
.look-immersive i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.look-immersive b{left:0;right:0;top:10px;height:36px;border-radius:0;background:linear-gradient(to top,var(--night),rgba(3,5,58,.2)),linear-gradient(120deg,#2B4C9B,#137A9E)}
.look-warm{background:var(--paper);border-color:var(--sand)}
.look-warm i{background:var(--paper);border-color:var(--sand)}
.look-warm b{background:linear-gradient(var(--navy),var(--navy)) 0 8px/48% 5px no-repeat,linear-gradient(var(--clay),var(--clay)) 0 17px/30% 3px no-repeat,linear-gradient(#C9A98C,#C9A98C) 100% 0/32% 100% no-repeat;border-radius:0}
.look-media b{background:var(--ink);height:22px}
.look-media em{left:0;right:0;bottom:0;width:auto;height:12px;border-radius:0;background:var(--navy);border:0}
.look-media .look-sw{bottom:16px}

/* =====================================================================================================================
   EDITORIAL: a white page, a large centred headline, a wide photo under it, sans-serif headings, pill buttons
   ===================================================================================================================== */
html[data-theme=editorial]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-theme=editorial] body:not(.is-admin){background:var(--white)}
[data-theme=editorial] :is(h1,h2){font-weight:800;letter-spacing:-.02em}
[data-theme=editorial] .brand-name{font-weight:800;letter-spacing:-.01em}
[data-theme=editorial] .btn,[data-theme=editorial] .nav-end a.cta{border-radius:99px}
[data-theme=editorial] .card,[data-theme=editorial] .event-card,[data-theme=editorial] .book,[data-theme=editorial] .tile{border-radius:18px;box-shadow:none;border-color:#E6EBF0}
[data-theme=editorial] .hero{background:transparent;color:var(--ink);padding:76px 0 34px;text-align:center}
[data-theme=editorial] .hero::before{display:none}
[data-theme=editorial] .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:40px}
[data-theme=editorial] .hero-copy{max-width:900px}
[data-theme=editorial] .hero .motto{color:var(--teal-600);letter-spacing:4px}
[data-theme=editorial] .hero h1{color:var(--navy);font-size:clamp(2.3rem,6.2vw,4.5rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:.25em}
[data-theme=editorial] .hero p{color:var(--slate);font-size:1.18rem;margin-inline:auto}
[data-theme=editorial] .hero-actions{justify-content:center}
[data-theme=editorial] .hero .btn.light{background:var(--navy);color:var(--white)}
[data-theme=editorial] .hero .btn.light:hover{background:var(--indigo)}
[data-theme=editorial] .hero .btn.outline-light{background:var(--mist);color:var(--navy);border-color:var(--mist)}
[data-theme=editorial] .hero .btn.outline-light:hover{background:#CBEAF2}
[data-theme=editorial] .hero.has-photo .hero-art{display:block;width:100%;max-width:1200px;height:auto;aspect-ratio:21/9;border-radius:26px;background:var(--ink);box-shadow:0 30px 70px rgba(11,16,51,.22);overflow:hidden;animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
[data-theme=editorial] .hero.has-photo .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
[data-theme=editorial] .hero.no-photo .hero-logo{order:-1;width:84px;height:84px;background:none;box-shadow:none;margin-bottom:-20px;animation:rise .8s both}
[data-theme=editorial] .hero.no-photo .hero-logo img{width:100%}
[data-theme=editorial] .verse-band{background:transparent;border-block:1px solid var(--border)}
[data-theme=editorial] .page-hero{background:var(--white);color:var(--ink);border-bottom:1px solid var(--border)}
[data-theme=editorial] .page-hero h1{color:var(--navy)}
[data-theme=editorial] .page-hero .eyebrow{color:var(--teal-600)}
[data-theme=editorial] .page-hero .verse{color:var(--indigo)}
[data-theme=editorial] .page-hero::before,[data-theme=editorial] .page-hero::after{display:none}
@media(max-width:820px){
  [data-theme=editorial] .hero{padding:44px 0 24px}
  [data-theme=editorial] .hero.has-photo .hero-art{order:1;aspect-ratio:16/10;border-radius:18px;width:100%;justify-self:stretch}
  [data-theme=editorial] .hero.has-photo .hero-portrait{width:100%}
}

/* =====================================================================================================================
   IMMERSIVE: a dark night-blue stage, a full-screen photo behind the welcome. Reading surfaces (cards, forms, tables) stay
   light, so long texts are as easy to read as on the other looks. Text that sits on the stage itself uses the --tx/--hd
   family below; light surfaces reset it.
   ===================================================================================================================== */
html[data-theme=immersive]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-theme=immersive] body:not(.is-admin){--tx:#E6ECF8;--hd:var(--white);--sub:#D5D8FA;--mu:#A9B6D6;--ln:var(--teal-300);--lnh:#9BE3F0;
  color:var(--tx);background:radial-gradient(1000px 600px at 85% -10%,rgba(26,63,224,.26),transparent 60%),radial-gradient(800px 520px at 0% 35%,rgba(31,162,186,.13),transparent 60%),var(--night);background-color:var(--night);background-repeat:no-repeat}
[data-theme=immersive] :is(.card,.event-card,.book,.tile,details,table,.bcast-next,.opt,.side,.touch,form.contact-form){--tx:var(--ink);--hd:var(--navy);--sub:var(--indigo);--mu:var(--slate);--ln:var(--teal-600);--lnh:var(--teal-700);color:var(--tx)}
[data-theme=immersive] :is(.give-panel,.card.plain){--tx:var(--mist);--hd:var(--white);--sub:#D5D8FA;--mu:#A9B6D6;--ln:var(--teal-300);--lnh:#9BE3F0;color:var(--tx)}
[data-theme=immersive] .card.plain{--tx:#E6ECF8}
/* everything that is not the header, footer, bar or a coloured band */
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(h1,h2,h4){color:var(--hd)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(h3),
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) .card h2{color:var(--sub)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(.muted,.hint,.event-place){color:var(--mu)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(.eyebrow){color:var(--ln)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) a:where(:not(.btn,.tile,.touch,.media-audio,.stream-tabs a,.cta,.card-photo,.wl-opt,.vcard)){color:var(--ln)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) a:where(:not(.btn,.tile,.touch,.media-audio,.stream-tabs a,.cta,.card-photo,.wl-opt,.vcard)):hover{color:var(--lnh)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) .btn.ghost{color:var(--ln);border-color:var(--ln)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) .btn.ghost:hover{background:var(--ln);color:var(--night)}
[data-theme=immersive] .prose blockquote{background:rgba(92,208,230,.1);color:inherit}
[data-theme=immersive] .verse{color:var(--sub)}
[data-theme=immersive] .card{border-color:transparent;box-shadow:0 14px 44px rgba(0,0,0,.35)}
[data-theme=immersive] .card.plain{box-shadow:none}
[data-theme=immersive] :is(.event-card,.book,.tile){border-color:transparent}
[data-theme=immersive] .btn,[data-theme=immersive] .nav-end a.cta{border-radius:99px}
[data-theme=immersive] hr.soft,[data-theme=immersive] .list li{border-color:rgba(127,140,190,.25)}
/* header: dark glass */
[data-theme=immersive] .top{background:rgba(3,5,58,.74);border-bottom-color:rgba(255,255,255,.08)}
[data-theme=immersive] .top.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.4)}
[data-theme=immersive] .brand,[data-theme=immersive] .brand:hover{color:var(--white)}
[data-theme=immersive] .brand-name span:last-child{color:var(--teal-300)}
[data-theme=immersive] :is(.menu>li>a,.nav-end a,.nav-end button.linkish,.acct-btn){color:#E6ECF8}
[data-theme=immersive] :is(.menu>li>a:hover,.menu>li.on>a){color:var(--white)}
[data-theme=immersive] :is(.nav-end a:hover,.nav-end button.linkish:hover,.acct-btn:hover,.sub-toggle:hover){background:rgba(255,255,255,.1);color:var(--white)}
[data-theme=immersive] .sub-toggle{color:#A9B6D6}
[data-theme=immersive] .nav-end a.cta,[data-theme=immersive] .cta{background:var(--white);color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.3)}
[data-theme=immersive] .nav-end a.cta:hover,[data-theme=immersive] .cta:hover{background:var(--mist);color:var(--navy)}
[data-theme=immersive] .burger{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
@media(max-width:1240px){
  [data-theme=immersive] .menu>li.on>a{background:rgba(255,255,255,.1)}
  [data-theme=immersive] .sub{background:transparent;border-left-color:rgba(255,255,255,.15)}
  [data-theme=immersive] .sub a{color:#E6ECF8}
  [data-theme=immersive] .sub a:hover,[data-theme=immersive] .sub a.on{background:rgba(255,255,255,.1);color:var(--white)}
  [data-theme=immersive] .nav-end{border-top-color:rgba(255,255,255,.1)}
}
/* the welcome: a full-screen photo (or the brand gradient), centred words */
[data-theme=immersive] .hero{min-height:min(86vh,780px);display:grid;align-items:center;padding:90px 0 80px;text-align:center}
[data-theme=immersive] .hero.has-photo{background:var(--night)}
[data-theme=immersive] .hero.has-photo::before{display:none}
[data-theme=immersive] .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;animation:hero-zoom 18s ease-out both}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
[data-theme=immersive] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--night) 3%,rgba(3,5,58,.74) 42%,rgba(3,5,58,.38))}
[data-theme=immersive] .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
[data-theme=immersive] .hero-copy{max-width:920px}
[data-theme=immersive] .hero .motto{display:inline-flex;padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:3px}
[data-theme=immersive] .hero h1{font-size:clamp(2.4rem,7vw,5.3rem);font-weight:900;letter-spacing:-.035em;line-height:1;margin-bottom:.3em}
[data-theme=immersive] .hero p{margin-inline:auto;font-size:1.15rem;font-weight:300}
[data-theme=immersive] .hero-actions{justify-content:center}
[data-theme=immersive] .hero.has-photo .hero-art{display:none}
[data-theme=immersive] .hero.no-photo .hero-logo{order:-1;width:130px;height:130px;background:none;box-shadow:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
[data-theme=immersive] .hero.no-photo .hero-logo img{width:100%}
[data-theme=immersive] .verse-band{background:rgba(255,255,255,.04);border-block:1px solid rgba(255,255,255,.07)}
[data-theme=immersive] .verse-big{color:#D5D8FA}
[data-theme=immersive] .verse-ref{color:#A9B6D6}
[data-theme=immersive] footer{background:#02032C;border-top:1px solid rgba(255,255,255,.07)}
[data-theme=immersive] .radio-bar{background:rgba(10,17,80,.92);border-color:rgba(92,208,230,.22)}
@media(max-width:820px){
  [data-theme=immersive] .hero{min-height:0;padding:64px 0 56px}
  [data-theme=immersive] .hero.has-photo{min-height:72vh}
}

/* =====================================================================================================================
   IMMERSIVE LIGHT: the Immersive layout in daylight, with more colour than white. The same full-width photo behind the welcome
   and centred words, under a soft blue tint with white words; the pages are a pale blue-grey with white cards. Without a photo
   the welcome is a bright blue-to-teal gradient with the logo. (Between Ministry blue and the night-blue Immersive look.)
   ===================================================================================================================== */
html[data-theme=immersive-light]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--lt-page:#E6F0F7;--lt-blue:rgba(14,52,140,.58)}
[data-theme=immersive-light] body:not(.is-admin){background:radial-gradient(900px 520px at 90% -8%,rgba(31,162,186,.2),transparent 62%),radial-gradient(760px 480px at -5% 30%,rgba(26,63,224,.1),transparent 62%),var(--lt-page);background-color:var(--lt-page);background-repeat:no-repeat}
[data-theme=immersive-light] :is(h1,h2){letter-spacing:-.02em}
[data-theme=immersive-light] .btn,[data-theme=immersive-light] .nav-end a.cta{border-radius:99px}
[data-theme=immersive-light] .card{border-color:transparent;border-radius:20px;box-shadow:0 12px 36px rgba(5,11,90,.12)}
[data-theme=immersive-light] :is(.event-card,.book,.tile,.touch){border-radius:18px;border-color:transparent;box-shadow:0 10px 28px rgba(5,11,90,.1)}
[data-theme=immersive-light] .card.plain{box-shadow:none}
[data-theme=immersive-light] .top{background:rgba(255,255,255,.92);border-bottom-color:rgba(5,11,90,.06)}
[data-theme=immersive-light] .top.scrolled{box-shadow:0 8px 26px rgba(5,11,90,.12)}

/* the welcome: the photo fills the whole banner under a blue tint, white words, and the bottom melts into the page */
[data-theme=immersive-light] .hero{min-height:min(80vh,720px);display:grid;align-items:center;padding:84px 0 76px;text-align:center;background:linear-gradient(135deg,#1B4F9C 0%,#1FA2BA 100%)}
[data-theme=immersive-light] .hero.has-photo{background:#1B4F9C}
[data-theme=immersive-light] .hero.has-photo::before{display:none}
[data-theme=immersive-light] .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;animation:hero-zoom 18s ease-out both}
[data-theme=immersive-light] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--lt-blue) 0%,rgba(14,52,140,.5) 62%,var(--lt-page) 100%)}
[data-theme=immersive-light] .hero.no-photo::before{opacity:.45}
[data-theme=immersive-light] .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
[data-theme=immersive-light] .hero-copy{max-width:920px}
[data-theme=immersive-light] .hero .motto{display:inline-flex;padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:3px}
[data-theme=immersive-light] .hero h1{color:var(--white);font-size:clamp(2.4rem,7vw,5.3rem);font-weight:900;letter-spacing:-.035em;line-height:1;margin-bottom:.3em;text-shadow:0 2px 24px rgba(5,11,90,.35)}
[data-theme=immersive-light] .hero p{margin-inline:auto;color:#F1F8FC;font-size:1.15rem;font-weight:400;text-shadow:0 1px 14px rgba(5,11,90,.35)}
[data-theme=immersive-light] .hero-actions{justify-content:center}
[data-theme=immersive-light] .hero.has-photo .hero-art{display:none}
[data-theme=immersive-light] .hero.no-photo .hero-logo{order:-1;width:130px;height:130px;background:none;box-shadow:none;filter:drop-shadow(0 14px 30px rgba(5,11,90,.3))}
[data-theme=immersive-light] .hero.no-photo .hero-logo img{width:100%}
[data-theme=immersive-light] .verse-band{background:rgba(255,255,255,.55)}
[data-theme=immersive-light] .page-hero{background:linear-gradient(135deg,#1B4F9C 0%,#1FA2BA 100%)}
@media(max-width:820px){
  [data-theme=immersive-light] .hero{min-height:0;padding:60px 0 52px}
  [data-theme=immersive-light] .hero.has-photo{min-height:68vh}
}

/* =====================================================================================================================
   MINISTRY BLUE and EDITORIAL: with a photo in the welcome banner, the photo goes BEHIND the welcome (as in the Immersive looks)
   instead of beside or below it. Without a photo nothing changes.
   ===================================================================================================================== */
[data-theme=ministry] .hero.has-photo{background:var(--navy);min-height:min(66vh,600px);display:grid;align-items:center;padding:84px 0}
[data-theme=ministry] .hero.has-photo::before{display:none}
[data-theme=ministry] .hero.has-photo .hero-bg,[data-theme=editorial] .hero.has-photo .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2}
[data-theme=ministry] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,11,90,.9) 0%,rgba(5,11,90,.66) 52%,rgba(10,26,143,.28) 100%)}
[data-theme=ministry] .hero.has-photo .hero-grid{grid-template-columns:minmax(0,1fr);width:100%} /* the hero is a grid, which would otherwise shrink the centred wrapper to the text */
[data-theme=ministry] .hero.has-photo .hero-copy{max-width:680px;justify-self:start;text-align:left}
[data-theme=ministry] .hero.has-photo .hero-art{display:none}

[data-theme=editorial] .hero.has-photo{background:var(--ink);color:var(--white);min-height:min(72vh,660px);display:grid;align-items:center;padding:96px 0 84px}
[data-theme=editorial] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,16,51,.84) 0%,rgba(11,16,51,.5) 55%,rgba(11,16,51,.38) 100%)}
[data-theme=editorial] .hero.has-photo .hero-art{display:none}
[data-theme=editorial] .hero.has-photo h1{color:var(--white)}
[data-theme=editorial] .hero.has-photo p{color:#E6ECF8}
[data-theme=editorial] .hero.has-photo .motto{color:var(--teal-300)}
[data-theme=editorial] .hero.has-photo .btn.light{background:var(--white);color:var(--navy)}
[data-theme=editorial] .hero.has-photo .btn.light:hover{background:var(--mist)}
[data-theme=editorial] .hero.has-photo .btn.outline-light{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.7)}
[data-theme=editorial] .hero.has-photo .btn.outline-light:hover{background:rgba(255,255,255,.14)}
@media(max-width:820px){
  [data-theme=ministry] .hero.has-photo{min-height:0;padding:56px 0 52px}
  [data-theme=ministry] .hero.has-photo::after{background:linear-gradient(to bottom,rgba(5,11,90,.7),rgba(5,11,90,.82))}
  [data-theme=editorial] .hero.has-photo{min-height:0;padding:60px 0 52px}
}

/* =====================================================================================================================
   WARM WELCOME: cream paper, serif headings, a framed portrait, a warm clay accent
   ===================================================================================================================== */
[data-theme=warm] body:not(.is-admin){background:var(--paper)}
[data-theme=warm] .top{background:rgba(250,246,238,.95);border-bottom-color:var(--sand)}
[data-theme=warm] .card,[data-theme=warm] .event-card,[data-theme=warm] .book,[data-theme=warm] .tile,[data-theme=warm] .touch{border-color:var(--sand);border-radius:20px;box-shadow:none}
[data-theme=warm] :is(.eyebrow,.card .eyebrow){color:var(--clay)}
[data-theme=warm] .btn{border-radius:12px}
[data-theme=warm] .nav-end a.cta,[data-theme=warm] .cta{background:var(--indigo);border-radius:12px}
[data-theme=warm] .nav-end a.cta:hover,[data-theme=warm] .cta:hover{background:var(--navy)}
[data-theme=warm] .hero{background:transparent;color:var(--ink);padding:64px 0 70px}
[data-theme=warm] .hero::before{display:none}
[data-theme=warm] .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}
[data-theme=warm] .hero .motto{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:var(--clay-soft);color:var(--clay);letter-spacing:2px}
[data-theme=warm] .hero .motto::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--clay)}
[data-theme=warm] .hero h1{color:var(--navy);font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.08;font-weight:700}
[data-theme=warm] .hero p{color:var(--slate);font-size:1.12rem}
[data-theme=warm] .hero .btn.light{background:var(--indigo);color:var(--white)}
[data-theme=warm] .hero .btn.light:hover{background:var(--navy)}
[data-theme=warm] .hero .btn.outline-light{background:var(--white);color:var(--navy);border:1px solid var(--sand)}
[data-theme=warm] .hero .btn.outline-light:hover{background:var(--clay-soft)}
[data-theme=warm] .hero.has-photo .hero-art{position:relative;width:100%;max-width:420px;height:auto;aspect-ratio:4/5;border-radius:32px;border:6px solid var(--white);background:var(--white);box-shadow:0 30px 60px rgba(46,42,126,.18);overflow:visible}
[data-theme=warm] .hero.has-photo .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:26px}
[data-theme=warm] .hero.has-photo .hero-art::after{content:'';position:absolute;left:-24px;bottom:-24px;width:100%;height:100%;border:2px solid rgba(160,82,45,.35);border-radius:34px;z-index:-1}
[data-theme=warm] .hero.no-photo .hero-logo{background:var(--white);box-shadow:0 0 0 12px var(--clay-soft),0 24px 50px rgba(46,42,126,.15)}
[data-theme=warm] .verse-band{background:var(--clay-soft)}
[data-theme=warm] .cta-band{background:var(--indigo)}
[data-theme=warm] .page-hero{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--sand)}
[data-theme=warm] .page-hero h1{color:var(--navy)}
[data-theme=warm] .page-hero .eyebrow{color:var(--clay)}
[data-theme=warm] .page-hero .verse{color:var(--indigo)}
[data-theme=warm] .page-hero::before,[data-theme=warm] .page-hero::after{display:none}
[data-theme=warm] .touch-ico,[data-theme=warm] .bcast-next{background-color:var(--clay-soft)}
@media(max-width:820px){
  [data-theme=warm] .hero{padding:40px 0 48px}
  [data-theme=warm] .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  [data-theme=warm] .hero.has-photo .hero-art{display:block;width:74%;max-width:340px;justify-self:center;order:0}
}

/* =====================================================================================================================
   MEDIA HUB: for listeners and viewers: a compact dark banner, flat cards, and the radio docked full width
   ===================================================================================================================== */
html[data-theme=media]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-theme=media] body:not(.is-admin){background:var(--page)}
[data-theme=media] :is(h1,h2){font-weight:800;letter-spacing:-.015em}
[data-theme=media] .hero{background:var(--ink);padding:40px 0}
[data-theme=media] .hero::before{opacity:.5}
[data-theme=media] .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:32px}
[data-theme=media] .hero h1{font-size:clamp(1.8rem,3.8vw,2.7rem)}
[data-theme=media] .hero-art{width:120px;height:120px}
[data-theme=media] .hero.has-photo .hero-art{width:min(380px,36vw);height:auto;aspect-ratio:16/10;border-radius:16px;background:var(--navy);box-shadow:0 18px 40px rgba(0,0,0,.4)}
[data-theme=media] .hero.has-photo .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
[data-theme=media] .card{border-radius:14px}
[data-theme=media] .verse-band{background:var(--white);border-block:1px solid var(--border);padding:28px 0}
[data-theme=media] .radio-bar{left:0;right:0;bottom:0;max-width:none;border-radius:0;border-width:1px 0 0;background:var(--ink)}
[data-theme=media] .rb-inner{max-width:1040px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom))}
[data-theme=media] .rb-play{width:52px;height:52px}
[data-theme=media] .radio-bar.is-min{right:auto;bottom:12px;left:12px;border-radius:18px;border-width:1px}
[data-theme=media] .radio-bar.is-min .rb-inner{padding:8px 10px 8px 8px}
@media(max-width:820px){
  [data-theme=media] .hero{padding:28px 0}
  [data-theme=media] .hero.has-photo .hero-art{display:none}
}

/* ---------- a picture at the top of a page (Admin > Menu & pages > Page pictures) ----------
   The picture is the background of the page's header band (pageHead in views/layout.tsx), under the brand tint, like the
   home page's welcome. The Father's Business Summit's own banner takes it the same way. */
body.has-pic .page-hero,body.has-pic .fbs-hero{background:linear-gradient(135deg,rgba(5,11,90,.84),rgba(19,122,158,.6)),var(--page-pic) center 30%/cover no-repeat;color:var(--white);border-bottom:0}
body.has-pic .page-hero{padding:72px 0 64px}
body.has-pic .page-hero h1{color:var(--white)}
body.has-pic .page-hero .eyebrow,body.has-pic .fbs-hero .eyebrow{color:var(--teal-300)}
body.has-pic .page-hero .verse,body.has-pic .page-hero .page-intro{color:var(--mist)}
body.has-pic .page-hero::before,body.has-pic .page-hero::after{display:none}
.page-intro{max-width:40em;margin:.4em 0 0;font-size:1.05rem}
body.has-pic .page-hero .page-back{display:inline-block;margin-bottom:12px;font-size:.92rem;font-weight:600;text-decoration:none;color:var(--mist)}
body.has-pic .page-hero .page-back:hover{color:var(--white);text-decoration:underline}
/* one event, one book: a slimmer band with the way back; the page's own title follows */
body.has-pic .page-hero.slim{padding:96px 0 18px}
body.has-pic .page-hero.slim .page-back{margin:0}
@media(max-width:600px){body.has-pic .page-hero{padding:48px 0 44px}body.has-pic .page-hero.slim{padding:64px 0 14px}}

/* the page pictures screen */
.pp-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:12px}
.pp-thumb{aspect-ratio:16/9;border-radius:10px;background:var(--mist);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pp-thumb img{width:100%;height:100%;object-fit:cover}
.pp-body select,.pp-body input[type=file]{width:100%;max-width:420px}
@media(max-width:600px){.pp-row{grid-template-columns:minmax(0,1fr)}}

.bld-pagepick{max-width:210px;margin-left:12px;min-height:34px;padding:4px 8px;font-size:.85rem;vertical-align:middle}

/* ---------- the radio bar's words open the live room on the Listen page ---------- */
a.rb-info{color:inherit;text-decoration:none;display:block;border-radius:10px}
a.rb-info:hover .rb-name{text-decoration:underline}
.radio-bar.is-live .rb-now::after{content:' \00b7  like, react & chat \203A';opacity:.85}

/* ---------- the live room (Listen page): listen, like, react, chat ---------- */
.live-room{margin-bottom:26px}
.live-room-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.live-room-head h2{margin:.1em 0}
.live-room-count{text-align:right;display:flex;flex-direction:column;gap:2px;font-weight:700}
.room-actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.room-actions .btn.on{background:var(--teal-700);color:var(--white)}
.room-like.on{background:var(--mist);border-color:var(--teal-600);color:var(--teal-700)}
.room-reacts{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.room-react{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:99px;border:1px solid var(--border);background:var(--white);font-size:1.35rem;cursor:pointer;transition:transform .12s}
.room-react:hover:not(:disabled){transform:scale(1.08)}
.room-react:active:not(:disabled){transform:scale(.94)}
.room-react:disabled,.room-like:disabled{opacity:.5;cursor:not-allowed}
.room-react small{font:700 .75rem var(--font-body);color:var(--slate);min-width:1ch}
.react-floats{position:absolute;left:0;right:0;bottom:100%;height:140px;pointer-events:none;overflow:visible}
.react-float{position:absolute;bottom:0;font-size:1.8rem;animation:react-rise 2.4s ease-out forwards;will-change:transform,opacity}
@keyframes react-rise{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(var(--drift,0),-130px) scale(1.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.react-float{animation:none;display:none}}
.chat-log{list-style:none;margin:0 0 10px;padding:10px 12px;height:260px;overflow-y:auto;background:var(--page);border:1px solid var(--border);border-radius:12px}
.chat-msg{padding:4px 0;word-break:break-word;font-size:.95rem}
.chat-msg strong{color:var(--indigo)}
.chat-msg.host{background:var(--mist);border-radius:8px;padding:6px 8px;margin:4px -4px}
.chat-msg.host strong{color:var(--teal-700)}
.chat-form{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:8px}
.chat-note{margin:8px 0 0;min-height:1.2em}
.chat-note.bad{color:var(--error)}
@media(max-width:600px){.chat-form{grid-template-columns:minmax(0,1fr) auto}.chat-form [data-chat-name]{grid-column:1/-1}.chat-log{height:220px}}

/* ---------- the broadcaster: connection monitor and chat moderation ---------- */
.bc-net-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.bc-grid dt{font-size:.75rem;color:var(--slate);margin:0}
.bc-grid dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.bc-q{display:inline-block;padding:3px 10px;border-radius:99px;font:700 .8rem var(--font-body);background:var(--mist);color:var(--teal-700)}
.bc-q.good{background:#DFF3E4;color:#17662B}
.bc-q.fair{background:#FFF1CC;color:#7A5200}
.bc-q.poor{background:#FBDADA;color:#9A1B1B}
.bc-chatlog,.bc-pending{list-style:none;margin:8px 0;padding:0}
.bc-chatlog{max-height:230px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:var(--page)}
.bc-chatlog li,.bc-pending li{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(5,11,90,.06);font-size:.92rem;word-break:break-word}
.bc-chatlog li>span,.bc-pending li>span{flex:1;min-width:0}
.bc-pending{border:1px solid #E8C86A;background:#FFF8E1;border-radius:10px;padding:6px 10px}
.bc-pending li:last-child,.bc-chatlog li:last-child{border-bottom:0}
.bc-chatlog .btns,.bc-pending .btns{display:flex;gap:4px;flex:none}
.bc-chatlog .btn.small,.bc-pending .btn.small{padding:3px 8px;min-height:30px;font-size:.78rem}
.bc-chatlog .host strong{color:var(--teal-700)}
@media(max-width:420px){.bc-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- bands: a page in clear sections (Watch & Listen). The tint comes from the text colour, so it also works on the dark looks ---------- */
.band{padding:36px 0}
.band.alt{background:color-mix(in srgb,currentColor 4%,transparent);border-block:1px solid color-mix(in srgb,currentColor 9%,transparent)}
.band h2{margin-top:0}
.page-hero:has(+ .band){margin-bottom:0}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.band .media-latest{margin:0 0 12px}
.vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.vcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.vcard-pic{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--mist)}
.vcard-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vcard:hover .vcard-pic img{transform:scale(1.04)}
.vcard-play{position:absolute;left:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:rgba(5,11,90,.82)}
.vcard-play::after{content:'';position:absolute;left:15px;top:12px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.vcard strong{font-size:1rem;line-height:1.35}
.vcard:hover strong{text-decoration:underline}
.years{margin-top:28px}
.years h3{margin:0 0 10px}
.years .row{margin:0}
@media(max-width:760px){.vcards{grid-template-columns:1fr;gap:14px}.vcard{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:start;column-gap:12px}.vcard-pic{grid-row:span 2}.vcard-play{width:30px;height:30px;left:6px;bottom:6px}.vcard-play::after{left:11px;top:8px;border-width:7px 0 7px 11px}.band{padding:28px 0}}

/* ---------- Watch & Listen: the two halves side by side ---------- */
.wl-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
.wl-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--white);border:1px solid var(--border);color:var(--navy);text-decoration:none;box-shadow:0 1px 3px rgba(11,16,51,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wl-opt:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(5,11,90,.35);border-color:var(--teal-300)}
.wl-opt strong{display:block;font:700 1.2rem var(--font-head);line-height:1.2}
.wl-sub{display:block;font-size:.88rem;color:var(--slate)}
.wl-opt.on{background:linear-gradient(120deg,#0A0F3C,#2A1E7A 60%,#0E7C93);border-color:transparent;color:#fff;box-shadow:0 18px 36px -16px rgba(42,30,122,.7)}
.wl-opt.on .wl-sub{color:#C9CFF5}
.wl-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--mist);color:var(--teal-700)}
.wl-opt.on .wl-ico{background:rgba(255,255,255,.12);color:#fff}
/* the Watch icon: a screen with a play mark and a blinking live dot */
.ico-screen{position:relative;display:block;width:30px;height:21px;border:2.5px solid currentColor;border-radius:5px}
.ico-screen-play{position:absolute;left:10px;top:4px;border-style:solid;border-width:5.5px 0 5.5px 8px;border-color:transparent transparent transparent currentColor}
.ico-screen-dot{position:absolute;right:-6px;top:-6px;width:9px;height:9px;border-radius:50%;background:#FF5E8A;box-shadow:0 0 0 2px var(--white);animation:wl-blink 1.6s ease-in-out infinite}
.wl-opt.on .ico-screen-dot{box-shadow:0 0 0 2px #1C1356}
/* the Listen icon: equaliser bars */
.ico-eq{display:flex;align-items:flex-end;gap:3px;height:24px}
.ico-eq i{display:block;width:4px;border-radius:2px;background:currentColor;height:40%;animation:wl-eq 1.1s ease-in-out infinite}
.ico-eq i:nth-child(2){animation-delay:-.3s}
.ico-eq i:nth-child(3){animation-delay:-.6s}
.ico-eq i:nth-child(4){animation-delay:-.15s}
.wl-opt:not(.on):not(:hover) .ico-eq i{animation-play-state:paused}
@keyframes wl-eq{0%,100%{height:30%}50%{height:100%}}
@keyframes wl-blink{50%{opacity:.25}}
@media(max-width:600px){.wl-switch{gap:10px}.wl-opt{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}.wl-ico{width:44px;height:44px;border-radius:13px}.wl-sub{font-size:.8rem}}

/* ---------- the live room: a studio with its own night-and-neon colours on every look ---------- */
.studio{--st-ink:#F4F6FF;--st-mute:#BCC3F0;--st-cyan:#33D1E0;--st-violet:#7B6CFF;--st-rose:#FF5E8A;--st-amber:#FFB547;
  position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:26px 26px 22px;margin:0;color:var(--st-ink);
  background:radial-gradient(130% 140% at 0% 0%,#2A1E7A 0%,#0A0F3C 52%,#060A2A 100%);
  box-shadow:0 34px 60px -26px rgba(10,15,60,.65),inset 0 1px 0 rgba(255,255,255,.08)}
.studio-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(64px);pointer-events:none;animation:st-glow 16s ease-in-out infinite alternate}
.studio-glow.g1{width:360px;height:360px;top:-150px;right:-90px;background:var(--st-violet);opacity:.55}
.studio-glow.g2{width:320px;height:320px;bottom:-170px;left:-70px;background:var(--st-cyan);opacity:.3;animation-delay:-8s}
.studio.on-air .studio-glow.g2{background:var(--st-rose);opacity:.5}
@keyframes st-glow{to{transform:translate(-50px,36px) scale(1.18)}}
.studio-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.studio .onair{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:700 .72rem var(--font-body);letter-spacing:2px;text-transform:uppercase;color:var(--st-mute)}
.studio.on-air .onair{background:linear-gradient(90deg,var(--st-rose),#FF3D6E);border-color:transparent;color:#fff;animation:st-onair 2s ease-out infinite}
.studio .onair .live-dot{background:#fff;margin:0;width:8px;height:8px}
@keyframes st-onair{0%{box-shadow:0 0 0 0 rgba(255,94,138,.6)}70%,100%{box-shadow:0 0 0 14px rgba(255,94,138,0)}}
.studio-count{display:inline-flex;align-items:center;gap:8px;color:var(--st-mute);font-size:.9rem;font-weight:600}
.studio-count .phones{display:inline-flex;color:var(--st-cyan)}
.studio.is-playing .studio-count .phones{animation:st-bob 1.3s ease-in-out infinite}
@keyframes st-bob{50%{transform:translateY(-3px) rotate(-8deg)}}
.studio [data-room-listeners]:not(:empty) + [data-room-online]:not(:empty)::before{content:'·';margin-right:8px}
.studio-main{display:flex;align-items:center;gap:24px;margin:24px 0 4px}
.studio-play{position:relative;flex:none;width:100px;height:100px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--st-cyan),var(--st-violet) 55%,var(--st-rose));box-shadow:0 16px 36px -10px rgba(123,108,255,.8);transition:transform .2s ease}
.studio-play:hover{transform:scale(1.05)}
.studio-play:active{transform:scale(.96)}
.studio-play:focus-visible{outline:3px solid var(--st-amber);outline-offset:4px}
.studio-play svg{position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.studio-play .sp-i-play{margin-left:5px}
.studio-play .sp-i-pause,.studio-play.on .sp-i-play{display:none}
.studio-play.on .sp-i-pause{display:block}
.sp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(123,108,255,.6);opacity:0;pointer-events:none}
.studio.is-playing .sp-ring{animation:st-ring 2.4s ease-out infinite}
.studio.is-playing .sp-ring.r2{animation-delay:1.2s}
@keyframes st-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
.studio:not(.is-playing):not(.is-loading) .studio-play{animation:st-breathe 3.2s ease-in-out infinite}
@keyframes st-breathe{50%{box-shadow:0 16px 48px -4px rgba(51,209,224,.8)}}
.studio.is-loading .studio-play::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:3px solid transparent;border-top-color:var(--st-amber);animation:rb-spin .9s linear infinite}
.studio-info{min-width:0}
.studio.studio .studio-info h2{color:#fff;margin:0 0 6px;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.15}
.studio .studio-info p{color:var(--st-mute);margin:0}
.studio-hint{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;letter-spacing:.3px;color:var(--st-cyan)}
.studio-wave{display:block;width:100%;height:120px;margin:2px 0 8px}
.studio:not(.is-live) .studio-live{display:none}
.studio-live{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.studio .room-actions{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0}
.studio .room-like{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font:700 1rem var(--font-body);cursor:pointer;transition:background .2s,border-color .2s}
.studio .room-like .heart{color:var(--st-rose)}
.studio .room-like b{color:var(--st-mute);font-variant-numeric:tabular-nums}
.studio .room-like.on{background:rgba(255,94,138,.2);border-color:var(--st-rose);color:#fff}
.studio .room-like.pop .heart{animation:st-heart .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes st-heart{0%{transform:scale(.5)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
.studio .room-reacts{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.studio .room-react{position:relative;display:grid;place-items:center;width:52px;height:52px;min-height:0;padding:0;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font-size:1.5rem;cursor:pointer;transition:transform .15s ease,background .15s}
.studio .room-react:hover:not(:disabled){transform:translateY(-4px) scale(1.08);background:rgba(255,255,255,.14)}
.studio .room-react:active:not(:disabled) span{animation:st-wiggle .45s}
@keyframes st-wiggle{25%{transform:rotate(-16deg) scale(1.25)}75%{transform:rotate(12deg)}}
.studio .room-react small{position:absolute;right:-7px;top:-7px;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--st-rose);color:#fff;font:700 .68rem var(--font-body)}
.studio .room-react small:empty{display:none}
.studio .react-floats{left:0;right:0;bottom:60px;height:200px}
.studio .room-chat{border-radius:18px;background:rgba(4,8,36,.55);border:1px solid rgba(255,255,255,.1);padding:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.studio .chat-log{background:transparent;border:0;padding:4px 6px;height:240px;margin:0 0 10px;scrollbar-color:rgba(255,255,255,.25) transparent}
.studio .chat-msg{color:var(--st-ink);padding:6px 10px;margin:0 0 6px;border-radius:12px;background:rgba(255,255,255,.06);animation:st-msg .3s ease-out}
.studio .chat-msg strong{color:var(--st-cyan)}
.studio .chat-msg.host{background:linear-gradient(90deg,rgba(255,181,71,.22),rgba(255,94,138,.14));margin:0 0 6px}
.studio .chat-msg.host strong{color:var(--st-amber)}
@keyframes st-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.studio .chat-form input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.studio .chat-form input::placeholder{color:var(--st-mute)}
.studio .chat-form .btn{background:linear-gradient(135deg,var(--st-cyan),var(--st-violet));border:0;color:#fff}
.studio .chat-note{color:var(--st-mute);margin:12px 0 0}
.studio .chat-note.bad{color:#FFB4C4}
.studio button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){
  .studio{padding:20px 16px 18px;border-radius:22px}
  .studio-main{gap:16px;margin-top:18px}
  .studio-play{width:80px;height:80px}
  .studio-play svg{width:28px;height:28px}
  .studio-wave{height:90px}
  .studio-live{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.studio,.studio *,.wl-switch *{animation:none!important}}