:root{
    /* Brand palette — sampled from the Temple Prayer ark-lamp logo */
    --navy:#1d2935;          /* brand navy (background) */
    --navy-deep:#141d26;     /* page background */
    --navy-soft:#243240;     /* cards / raised surfaces */
    --gold:#ffa849;          /* brand gold (logo iconography) */
    --gold-bright:#ffc078;   /* hover / highlight */
    --gold-deep:#e08e2e;     /* pressed / borders */
    --ink:#f3f1ea;           /* warm off-white text */
    --ink-soft:#a7b4c0;      /* secondary text */
    --line:#33424f;
    --maxw:1080px;
    --radius:14px;
    --serif:"Georgia","Iowan Old Style","Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--navy-deep);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:var(--gold-bright);text-decoration:none}
  a:hover{text-decoration:underline}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .4em}
  .icon{width:1em;height:1em;display:inline-block;vertical-align:middle;color:var(--gold)}

  /* ---------- Header / Nav ---------- */
  header.site{position:sticky;top:0;z-index:50;background:rgba(20,29,38,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav-inner{max-width:var(--maxw);margin:0 auto;padding:.6rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .brand{display:flex;align-items:center;gap:.6rem;cursor:pointer;color:var(--ink)}
  .brand span{color:var(--gold)}
  .brand svg{width:30px;height:30px;color:var(--gold)}
  .brand b{font-family:var(--serif);font-size:1.15rem;letter-spacing:.4px}
  .brand b span{color:var(--gold)}
  nav.top a{color:var(--ink-soft);font-size:.92rem;margin-left:1.3rem;font-weight:500}
  nav.top a:hover{color:var(--gold-bright);text-decoration:none}
  .nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.4rem .6rem;font-size:1rem;cursor:pointer}
  .nav-drop{position:relative;display:inline-block}
  .nav-drop-toggle{cursor:pointer}
  .nav-drop-menu{display:none;position:absolute;top:100%;left:0;padding-top:.5rem;z-index:60}
  .nav-drop-menu-card{background:var(--navy);border:1px solid var(--line);border-radius:10px;padding:.4rem;min-width:170px;box-shadow:0 10px 28px rgba(0,0,0,.45)}
  .nav-drop-menu a{display:block;margin:0;padding:.5rem .7rem;border-radius:6px;font-size:.9rem;white-space:nowrap}
  .nav-drop-menu a:hover{background:rgba(255,168,73,.12);text-decoration:none}
  .nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{display:block}

  /* ---------- Hero ---------- */
  .hero{background:radial-gradient(1200px 420px at 50% -10%, rgba(255,168,73,.14), transparent 60%),linear-gradient(180deg,var(--navy),var(--navy-deep));border-bottom:1px solid var(--line)}
  .hero-inner{max-width:var(--maxw);margin:0 auto;padding:3rem 1.2rem 3.2rem;text-align:center}
  .hero-logo{max-width:min(560px,92%);height:auto;margin:0 auto .4rem;display:block}
  .kicker{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:.75rem;font-weight:700}
  .hero-inner h1{max-width:1180px;margin-left:auto;margin-right:auto}
  .hero h1{font-size:clamp(1.9rem,4.6vw,3rem);margin-top:.7rem}
  .hero p.lead{max-width:760px;margin:1.3rem auto 0;color:var(--ink-soft);font-size:1.1rem}
  .hero p.lead.story-phrase{color:#fff;font-weight:700;margin-top:2.2rem}
  .story-figure{margin:1.1rem auto 0}
  .story-scripture{max-width:760px;margin:1.1rem auto 0;padding:0 .4rem;text-align:left;border-left:3px solid var(--gold);border-radius:0}
  .story-scripture .t{display:block;color:var(--gold);font-weight:700;font-size:1.1rem;font-style:italic;padding-left:.9rem}
  .story-scripture .v{display:block;margin-top:.35rem;padding-left:.9rem;color:var(--gold);font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
  .story-divider{max-width:760px;margin:2rem auto 0;border:none;border-top:1px solid var(--line)}
  .story-ornament{text-align:center;color:var(--gold);font-size:1.5rem;margin:0;letter-spacing:.4em}
  .story-close{max-width:760px;margin:3rem auto 0;padding:2.6rem 1.8rem 2.2rem;background:var(--navy-soft);border:1px solid var(--line);border-radius:var(--radius)}
  .story-close .kicker{display:block;text-align:center;margin-bottom:.7rem}
  .story-close p.lead.story-phrase{margin-top:2rem}
  .story-close p.lead.story-explain{color:var(--ink-soft);font-weight:400;font-size:1rem;margin-top:.6rem}
  .story-final{margin:2.2rem 0 0;padding:1.3rem 1.6rem;border-left:3px solid var(--gold);background:rgba(255,168,73,.07);border-radius:0 var(--radius) var(--radius) 0;text-align:left}
  .story-final p{margin:0;color:#fff;font-weight:700;font-size:1.2rem;font-family:var(--serif)}
  .story-final p+p{margin-top:.7rem}
  @media(max-width:640px){.story-close{padding:2rem 1.2rem 1.8rem}.story-final{padding:1.1rem 1.2rem}.story-final p{font-size:1.08rem}}
  @media(max-width:640px){.story-scripture .t{font-size:1rem}.story-scripture .v{font-size:.75rem}}
  .cta-row{margin-top:1.8rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-block;padding:.75rem 1.4rem;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:.15s}
  .btn-primary{background:linear-gradient(160deg,var(--gold-bright),var(--gold));color:#3a2408}
  .btn-primary:hover{filter:brightness(1.06);text-decoration:none}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--gold);text-decoration:none}


  /* ---------- Home hero slideshow ---------- */

  /* ---------- Sections ---------- */
  section.block{max-width:var(--maxw);margin:0 auto;padding:3rem 1.2rem}
  .section-head{margin-bottom:1.6rem}
  .section-head .kicker{display:block;margin-bottom:.3rem}
  .section-head h2{font-size:clamp(1.5rem,3vw,2rem)}
  .section-head p{color:var(--ink-soft);margin:.3rem 0 0;max-width:680px}

  /* ---------- Class grid ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
  .card{background:var(--navy-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.18s}
  .card:hover{transform:translateY(-3px);border-color:var(--gold)}
  .card .thumb{aspect-ratio:16/9;background:radial-gradient(120% 120% at 50% 20%, #2b3a49, #131c24);display:grid;place-items:center;position:relative}
  .card .thumb svg{width:56px;height:56px;color:var(--gold);opacity:.92}
  .card .thumb img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
  .card .thumb .badge{position:absolute;top:.6rem;left:.6rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.55);color:var(--ink);padding:.2rem .5rem;border-radius:6px;z-index:1}
  .card .thumb .play{position:absolute;right:.6rem;bottom:.6rem;width:34px;height:34px;border-radius:50%;background:rgba(255,168,73,.95);display:grid;place-items:center;color:#3a2408;font-size:.9rem}
  .card .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
  .card .body .stn{color:var(--gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
  .card .body h3{font-size:1.12rem;margin:.25rem 0 .35rem}
  .card .body p{color:var(--ink-soft);font-size:.9rem;margin:0}
  .card .meta{margin-top:auto;padding-top:.8rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
  .pill{font-size:.7rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.15rem .55rem;transition:filter .15s;text-decoration:none;display:inline-block}
  .pill.ready{color:var(--gold-bright);border-color:var(--gold-deep)}
  .pill:hover{filter:brightness(1.35)}
  .pill-right{margin-left:auto}

  /* ---------- Pattern at a Glance: image hotspots + mobile list ---------- */
  .pattern-figure{position:relative;margin:0 auto;max-width:960px;width:100%;aspect-ratio:1600/900;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden}
  .pattern-figure img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
  .hotspot{position:absolute;background:transparent;border:none;padding:0;margin:0;cursor:pointer;border-radius:8px;transition:.15s}
  .hotspot:hover,.hotspot:focus-visible{background:rgba(255,168,73,.16);outline:2px solid rgba(255,168,73,.55);outline-offset:-2px}
  .hotspot::after{content:'Click to Open';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(4px);opacity:0;pointer-events:none;white-space:nowrap;background:rgba(10,20,31,.94);color:var(--gold-bright);border:1px solid var(--gold-deep);border-radius:999px;padding:.3rem .58rem;font-size:.66rem;font-weight:700;letter-spacing:.03em;box-shadow:0 5px 16px rgba(0,0,0,.35);transition:opacity .16s ease,transform .16s ease;z-index:3}
  .hotspot:hover::after,.hotspot:focus-visible::after{opacity:1;transform:translate(-50%,-50%) translateY(0)}
  @media(max-width:640px){
    .hotspot::after{display:none}
    .hotspot{display:none}
  }
  .hotspot-mobile{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;border:none;padding:0;margin:0;cursor:pointer}
  @media(max-width:640px){
    .hotspot-mobile{display:block}
  }
  .pattern-list{display:none;text-align:left;max-width:520px;margin:1.4rem auto 0}
  .pattern-list .station-row{width:100%;background:var(--navy-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:1.2rem}
  .pattern-list .station-row .row-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;cursor:pointer}
  .pattern-list .station-row .row-body{padding:1rem 1.1rem 1.1rem}
  .pattern-list .station-row .row-num{color:var(--gold);font-family:var(--serif);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
  .pattern-list .station-row h3{font-size:1.15rem;margin:.2rem 0 .1rem;color:var(--ink)}
  .pattern-list .station-row .row-sub{font-family:var(--serif);font-style:italic;color:var(--gold-bright);font-size:.92rem;display:block;margin-bottom:.5rem}
  .pattern-list .station-row p{color:var(--ink-soft);font-size:.92rem;margin:0 0 .8rem}
  .pattern-list .station-row .row-btn{display:inline-block;background:var(--gold);color:#3a2408;font-weight:700;font-size:.9rem;padding:.55rem 1.1rem;border-radius:999px;border:none;cursor:pointer}
  @media(max-width:640px){
    .pattern-list{display:block}
  }

  
  /* ---------- Class hero gallery ---------- */
  .class-hero{position:relative;margin:1.35rem 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#0b1f3d;box-shadow:0 14px 34px rgba(0,0,0,.2)}
  .class-hero-frame{position:relative;aspect-ratio:16/9;overflow:hidden}
  .class-hero-slide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
  .class-hero-slide.active{opacity:1}
  .class-hero-caption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;background:linear-gradient(transparent,rgba(4,13,26,.9));color:#fff;font-family:var(--serif);font-size:1.08rem;letter-spacing:.02em}
  .class-hero-dots{display:flex;justify-content:center;gap:.45rem;padding:.72rem;background:rgba(8,28,53,.96)}
  .class-hero-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.35);padding:0;cursor:pointer}
  .class-hero-dot.active{background:var(--gold-bright);box-shadow:0 0 0 2px rgba(255,198,92,.2)}

  /* ---------- Station popup ---------- */
  #stationOverlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:rgba(8,12,18,.78);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1rem}
  #stationOverlay.open{display:flex}
  .station-popup{background:linear-gradient(180deg,#f8f1dd,#f0e3c0);color:var(--navy-deep);border:2px solid #dca24a;border-radius:22px;max-width:min(660px,92vw);width:100%;max-height:min(80vh,620px);overflow:hidden;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5)}
  .station-popup .close-x{position:absolute;top:1rem;right:1rem;background:var(--navy);border:2px solid #dca24a;color:var(--gold-bright);width:44px;height:44px;border-radius:50%;font-size:1.35rem;cursor:pointer;line-height:1;display:grid;place-items:center;z-index:5}
  .station-popup .close-x:hover{filter:brightness(1.08)}
  .station-shell{padding:.85rem .85rem .8rem}
  .station-kicker{color:#84622e;letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;font-weight:700;margin-bottom:.55rem}
  .station-layout{display:grid;grid-template-columns:minmax(210px,32%) 1fr;gap:1rem;align-items:start}
  .station-media-wrap{background:linear-gradient(180deg,#fff7e6,#f3e6c7);border:2px solid #d9b477;border-radius:18px;padding:.8rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);display:flex;flex-direction:column}
  .station-media-frame{position:relative;width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#d3bd93;border:1px solid rgba(111,82,34,.25);box-shadow:0 8px 26px rgba(0,0,0,.14)}
  .station-media-frame .slide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .95s ease-in-out}
  .station-media-frame .slide.is-active{opacity:1}
  .station-note{margin-top:.6rem;font-size:.76rem;color:#6b5736}
  .station-copy{padding:.05rem .1rem .1rem}
  .station-title{font-family:var(--serif);font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.04;color:#163568;margin:.05rem 0 .1rem;text-transform:uppercase;letter-spacing:.03em}
  .station-subtitle{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:#7a5c2a;margin-bottom:.7rem}
  .station-copy p{font-size:.88rem;line-height:1.45;color:#243240;margin:0 0 .7rem}
  .station-benefits{list-style:none;padding:0;margin:.55rem 0 0;display:grid;gap:.45rem}
  .station-benefits li{background:rgba(255,255,255,.48);border:1px solid rgba(211,170,96,.55);border-radius:12px;padding:.5rem .65rem .5rem 2.4rem;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.05);font-size:.82rem;line-height:1.35}
  .station-benefits li::before{content:'✦';position:absolute;left:.65rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold-bright);font-size:.72rem;box-shadow:0 0 0 2px #dca24a}
  .station-actions{display:flex;flex-direction:column;gap:.55rem;margin-top:.75rem;align-items:stretch}
  .station-cta{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--gold-bright),var(--gold));color:#3a2408;border:none;border-radius:999px;padding:.72rem 1rem;font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:0 8px 20px rgba(255,168,73,.2);width:100%}
  .station-cta:hover{filter:brightness(1.04)}
  .station-secondary{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#163568;border:1px solid rgba(22,53,104,.24);border-radius:999px;padding:.68rem .95rem;font-weight:600;font-size:.84rem;cursor:pointer;width:100%}
  .station-secondary:hover{background:rgba(22,53,104,.05)}
  @media(max-width:860px){
    #stationOverlay{padding:.65rem}
    .station-popup{max-width:420px;max-height:88vh}
    .station-shell{padding:.8rem}
    .station-layout{grid-template-columns:1fr;gap:1rem}
    .station-media-wrap{padding:.7rem}
    .station-copy p{font-size:.9rem;line-height:1.45}
    .station-subtitle{font-size:1.12rem}
    .station-actions{flex-direction:column}
    .station-cta,.station-secondary{width:100%}
  }

  /* ---------- About ---------- */
  .about{background:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .about .inner{max-width:var(--maxw);margin:0 auto;padding:3rem 1.2rem;display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start}
  .about blockquote{margin:0;font-family:var(--serif);font-size:1.25rem;color:var(--ink);border-left:3px solid var(--gold);padding-left:1rem}
  .stations-list{list-style:none;margin:.4rem 0 0;padding:0}
  .stations-list li{display:flex;align-items:center;gap:.7rem;margin:.55rem 0;color:var(--ink-soft)}
  .stations-list li svg{width:22px;height:22px;color:var(--gold);flex:0 0 auto}

  /* ---------- Mailing list ---------- */
  .signup{max-width:var(--maxw);margin:0 auto;padding:3rem 1.2rem;text-align:center}
  .signup-form-wrap{margin:1.4rem auto 0;max-width:520px;min-height:500px;background:var(--navy-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:visible}
  .signup-form-wrap iframe{min-height:500px}

  /* ---------- Footer ---------- */
  footer.site{border-top:1px solid var(--line);color:var(--ink-soft)}
  footer.site .inner{max-width:var(--maxw);margin:0 auto;padding:2rem 1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem}

  /* ---------- Class detail (modal-page) ---------- */
  #classView,#musicView{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--navy-deep);overflow-y:auto}
  #classView.open,#musicView.open{display:block}
  .music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.1rem}
  .music-card{background:var(--navy-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:block;color:inherit;text-decoration:none;transition:.18s;font:inherit;text-align:left;padding:0;width:100%;cursor:pointer}
  .music-card:hover{border-color:var(--gold);transform:translateY(-2px)}
  .music-card .thumb{aspect-ratio:1/1;position:relative;background:#131c24}
  .music-card .thumb img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}
  .music-card .thumb .play{position:absolute;right:.5rem;bottom:.5rem;width:32px;height:32px;border-radius:50%;background:rgba(255,168,73,.95);display:grid;place-items:center;color:#3a2408;font-size:.85rem;z-index:1}
  .music-card .mbody{padding:.75rem .85rem .9rem}
  .music-card .mbody h4{font-size:.94rem;margin:0 0 .2rem;line-height:1.3;font-family:var(--serif);color:var(--ink)}
  .music-card .mbody .artist{color:var(--gold);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
  .music-card .mbody .plays{color:var(--ink-soft);font-size:.76rem;margin-top:.3rem}
  .music-fab-wrap{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;align-items:center;gap:.5rem}
  .music-fab{width:40px;height:40px;border-radius:50%;background:var(--gold);border:1px solid var(--gold-deep);color:var(--navy-deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);transition:.15s;opacity:.88}
  .music-fab svg{width:16px;height:16px}
  .music-fab #musicFabIcon{font-size:1.5rem;line-height:1;font-family:Georgia,serif}
  .music-fab-wrap:hover .music-fab,.music-fab-wrap.panel-open .music-fab{opacity:1;background:var(--gold-bright)}
  .music-fab:hover{border-color:var(--gold);background:var(--navy)}
  .music-panel{background:var(--navy-soft);border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem .55rem .8rem;display:flex;align-items:center;gap:.55rem;box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translateX(8px);pointer-events:none;transition:.18s}
  .music-fab-wrap.panel-open .music-panel{opacity:1;transform:translateX(0);pointer-events:auto}
  .music-panel span{color:var(--ink-soft);font-size:.78rem;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .music-panel input[type=range]{width:80px;accent-color:var(--gold)}
  .music-panel .mp-btn{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:1rem;padding:.15rem;line-height:1;flex:0 0 auto}
  .music-panel .mp-btn:hover{color:var(--gold-bright)}
  @media(max-width:640px){.music-panel span{display:none}.music-panel input[type=range]{width:56px}}
  .detail-top{position:sticky;top:0;background:rgba(20,29,38,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .detail-top .inner{max-width:860px;margin:0 auto;padding:.8rem 1.2rem;display:flex;align-items:center;gap:1rem}
  .back{background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.45rem 1rem;cursor:pointer;font-size:.9rem}
  .back:hover{border-color:var(--gold)}
  .detail-body{max-width:860px;margin:0 auto;padding:1.6rem 1.2rem 4rem}
  .detail-title{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
  .detail-title svg{width:52px;height:52px;color:var(--gold);flex:0 0 auto}
  .detail-body .stn{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700}
  .detail-body h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:.15rem 0}
  .video-wrap{aspect-ratio:16/9;background:#0e151c;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:1.2rem 0;display:grid;place-items:center}
  .video-wrap iframe{width:100%;height:100%;border:0}
  .video-placeholder{text-align:center;color:var(--ink-soft);padding:2rem}
  .story-video-wrap{aspect-ratio:9/16;max-width:360px;width:100%;background:#0e151c;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:2.6rem auto 0;box-shadow:0 14px 34px rgba(0,0,0,.3)}
  .story-video-wrap iframe{width:100%;height:100%;border:0}
  .detail-section{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
  .detail-section h2{font-size:1.4rem;color:var(--gold-bright)}
  .qlist{counter-reset:q;list-style:none;padding:0;margin:1rem 0 0}
  .qlist li{counter-increment:q;position:relative;padding:.6rem 0 .6rem 2.4rem;border-bottom:1px solid var(--line);color:var(--ink)}
  .qlist li::before{content:counter(q);position:absolute;left:0;top:.55rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy-soft);border:1px solid var(--gold-deep);color:var(--gold-bright);display:grid;place-items:center;font-size:.85rem;font-weight:700}
  .resource-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
  .verses{margin-top:1rem;color:var(--ink-soft);font-size:.95rem;line-height:2}
  .verses .bg-ref{display:inline-block;background:var(--navy-soft);border:1px solid var(--line);border-radius:6px;padding:.15rem .5rem;color:var(--gold-bright);font-family:var(--sans);white-space:nowrap;cursor:pointer;text-decoration:none;margin:.08rem .04rem}.verses .bg-ref:hover{border-color:var(--gold);background:#26394b}

  @media(max-width:720px){
    nav.top{display:none}
    nav.top.show{display:flex;flex-direction:column;position:absolute;top:100%;right:0;background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:.8rem;gap:.4rem}
    nav.top.show a{margin:0}
    .nav-toggle{display:inline-block}
    .nav-drop-menu{position:static;padding-top:0}
    .nav-drop-menu-card{box-shadow:none;border:none;padding:0 0 0 1rem;margin-top:.3rem;background:transparent;min-width:0;display:flex;flex-direction:column;gap:.3rem}
    .nav-drop.open .nav-drop-menu{display:block}
    .about .inner{grid-template-columns:1fr}
  }

  /* ---------- Scripture passage popover ---------- */
  .scripture-link{display:inline-block;color:var(--gold-bright);background:#243545;border:1px solid #3a4e60;border-radius:8px;padding:.42rem .72rem;text-decoration:none;cursor:pointer;transition:.16s ease;font-size:.98rem}
  .scripture-link:hover,.scripture-link:focus{background:#2d4356;border-color:var(--gold);outline:none;transform:translateY(-1px)}
  #scripturePopover{position:fixed;z-index:500;display:none;width:min(430px,calc(100vw - 24px));background:#f8f1dd;color:#1d2935;border:2px solid #dca24a;border-radius:15px;box-shadow:0 18px 55px rgba(0,0,0,.48);padding:1rem 1rem .9rem}
  #scripturePopover.open{display:block}
  #scripturePopover .sp-ref{font-family:var(--serif);font-size:1.18rem;font-weight:700;color:#163568;margin:0 2.2rem .45rem 0}
  #scripturePopover .sp-version{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#8a642d;font-weight:700;margin-bottom:.55rem}
  #scripturePopover .sp-text{font-size:.94rem;line-height:1.55;color:#273747}
  #scripturePopover .sp-actions{display:flex;gap:.6rem;align-items:center;margin-top:.8rem;padding-top:.7rem;border-top:1px solid rgba(106,81,41,.2)}
  #scripturePopover .sp-open{color:#163568;font-weight:700;text-decoration:none;font-size:.86rem}
  #scripturePopover .sp-close{position:absolute;right:.55rem;top:.5rem;border:none;background:#163568;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem}
  @media(max-width:640px){#scripturePopover{left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto;max-height:55vh;overflow:auto}.scripture-link{font-size:.9rem;padding:.38rem .62rem}}

  /* ---------- Fallback for browsers without CSS aspect-ratio support (e.g. iPadOS Safari before v15) ----------
     Every image/video frame above sizes itself purely via aspect-ratio, with its actual
     content positioned absolutely inside — none of that content contributes height on its
     own. On a browser that doesn't understand aspect-ratio, every one of these boxes
     collapses to zero height: photos vanish and the elements below them shift up and
     overlap.

     For every container below whose content is ENTIRELY absolutely-positioned, the fix is
     the classic pre-2021 "padding-bottom percentage" aspect-ratio hack (height:0 plus a
     padding-bottom percentage, which — unlike a flat min-height — always resolves against
     the container's own actual width, so the box stays properly proportioned at any card
     size instead of an approximate fixed floor). This has been supported since CSS2, long
     before aspect-ratio existed, so it works on every browser aspect-ratio doesn't.

     .video-wrap is deliberately excluded and kept on a flat min-height instead — its
     iframe child is sized via height:100% (not absolute positioning), and percentage
     heights don't resolve the same way against a padding-bottom-based height:0 box, so the
     padding trick would break the video embed rather than fix it. */
  @supports not (aspect-ratio: 1/1){
    .card .thumb{height:0;padding-bottom:56.25%}
    .pattern-figure{height:0;padding-bottom:56.25%}
    .class-hero-frame{height:0;padding-bottom:56.25%}
    .station-media-frame{height:0;padding-bottom:100%}
    .music-card .thumb{height:0;padding-bottom:100%}
    .video-wrap{min-height:220px}
  }

  /* ---------- Cyan CTA (Learn the Pattern) ---------- */
  .btn-cyan{background:#22d3ee;border-color:#22d3ee;color:#0b2530}
  .btn-cyan:hover{background:#67e8f9;border-color:#67e8f9;text-decoration:none;filter:none}

.amp-note{background:#eef3f7;border-left:4px solid var(--gold);padding:.65rem .8rem;margin:.55rem 0 .8rem;font-size:.86rem}
.passage-card{border:1px solid var(--line);border-radius:7px;padding:.65rem .8rem;margin:.55rem 0;break-inside:avoid;background:#fffdf8}
.passage-card h3{margin:0 0 .3rem;font-family:var(--serif);font-size:.93rem;color:var(--navy)}
.passage-card p{margin:0;font-size:.86rem;line-height:1.38}
.verse-link{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--gold);text-underline-offset:2px;position:relative;cursor:pointer}
.verse-link:hover::after{content:attr(data-verse);position:absolute;z-index:9999;left:0;top:1.5em;width:min(360px,80vw);background:#182633;color:#fff;padding:.65rem .75rem;border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.28);font:13px/1.35 var(--sans);white-space:normal;text-align:left}
@media print{.verse-link{text-decoration:none}.verse-link:hover::after{display:none}}