/* ---------- Theme tokens ---------- */
  :root{
    --bg:#faf7f3;--card:#fff;--ink:#1f1a16;--muted:#75695f;--line:#ebe3da;
    --accent:#d9660f;--accent-2:#f08a2c;--accent-soft:#fcefe3;--maroon:#7a2323;
    --shadow:0 1px 2px rgba(60,30,10,.04),0 8px 24px rgba(60,30,10,.06);
    --r:22px;
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --bg:#14100d;--card:#1e1814;--ink:#f3ece4;--muted:#a99b8d;--line:#352a22;--accent:#f08a2c;--accent-soft:#2c2018;--maroon:#ffb98a;--shadow:none}}
  :root[data-theme="dark"]{
    --bg:#14100d;--card:#1e1814;--ink:#f3ece4;--muted:#a99b8d;--line:#352a22;--accent:#f08a2c;--accent-soft:#2c2018;--maroon:#ffb98a;--shadow:none}

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.015em;line-height:1.15}
  a{color:var(--accent)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
  :focus-visible{outline:3px solid var(--accent-2);outline-offset:3px;border-radius:8px}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ---------- Header ---------- */
  header{padding:18px 0}
  header .wrap{display:flex;align-items:center;justify-content:space-between}
  .brand{font-family:Fraunces,serif;font-size:1.4rem;font-weight:600;color:var(--maroon);text-decoration:none;display:flex;align-items:center;gap:8px}
  .brand b{color:var(--accent);font-weight:600}
  .hdr-r{display:flex;align-items:center;gap:12px}
  .tag{font-size:.88rem;color:var(--muted)}
  .theme{border:1px solid var(--line);background:var(--card);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1rem}

  /* ---------- Hero (Baba's photo: baba.jpg next to this file) ---------- */
  .hero{position:relative;border-radius:28px;overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:44px;color:#fff;
    background:linear-gradient(to top,rgba(30,10,4,.92) 0%,rgba(30,10,4,.45) 50%,rgba(30,10,4,.05) 100%),url("/baba.jpg") center 18%/cover no-repeat,radial-gradient(120% 90% at 80% 0%,#c2571a,#7a2323 55%,#3a0f0f)}
  .hero .om{position:absolute;top:28px;right:34px;font-size:3.2rem;opacity:.22;font-family:serif}
  .eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#ffc58f}
  .hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);max-width:660px;color:#fff}
  .hero h1 em{font-style:normal;color:#ffb366}
  .hero p{color:rgba(255,255,255,.86);font-size:1.08rem;max-width:520px}
  .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:600;text-decoration:none;background:var(--accent);color:#fff;transition:background .15s,transform .15s}
  .btn:hover{background:var(--accent-2);transform:translateY(-1px)}
  .btn.glass{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25)}
  .btn.ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
  .dot{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:p 1.4s infinite}
  @keyframes p{50%{opacity:.25}}

  /* ---------- Tiles ---------- */
  .sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:44px 0 16px}
  .sec-h h2{font-size:1.6rem}
  .sec-h span{color:var(--muted);font-size:.92rem}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:left;cursor:pointer;font:inherit;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:8px;min-height:180px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
  .tile:hover{transform:translateY(-3px);border-color:var(--accent-2)}
  .tile .ic{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.45rem;flex-shrink:0}
  .tile h3{font-size:1.3rem;margin-top:auto}
  .tile p{color:var(--muted);font-size:.93rem}
  .tile .go{position:absolute;top:22px;right:22px;color:var(--muted);font-size:1.1rem;transition:transform .18s,color .18s}
  .tile:hover .go{transform:translateX(3px);color:var(--accent)}
  .tile.wide{grid-column:span 3;flex-direction:row;align-items:center;min-height:0;gap:18px}
  .tile.wide h3{margin:0}
  .live{grid-column:span 2;background:#111;color:#fff;border:0;overflow:hidden;justify-content:flex-end}
  .live::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,#d9660f 0%,#7a2323 45%,#1a0b07 100%)}
  .live>*{position:relative}
  .live p{color:rgba(255,255,255,.82)}
  .live .go{color:#fff}
  .badge{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.14);padding:5px 11px;border-radius:999px;width:max-content;margin-bottom:auto}

  @media(max-width:860px){.grid{grid-template-columns:1fr 1fr}.live,.tile.wide{grid-column:span 2}}
  @media(max-width:560px){
    .hero{min-height:380px;padding:26px;border-radius:22px}
    .hero .om{display:none}
    .grid{grid-template-columns:1fr;gap:12px}
    .live,.tile.wide{grid-column:span 1}
    .tile:not(.live){flex-direction:row;align-items:center;min-height:0;padding:18px;gap:14px}
    .tile:not(.live) h3{margin:0;font-size:1.15rem}
    .tile:not(.live) .go{position:static;margin-left:auto}
    .live{min-height:170px}
  }

  /* ---------- About (helps search engines) ---------- */
  .about{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:56px;padding:32px;border-radius:var(--r);background:var(--accent-soft)}
  .about h2{font-size:1.6rem;margin-bottom:10px}
  .about p{color:var(--muted);margin-bottom:10px}
  .coins{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
  .coin{background:var(--card);border-radius:18px;padding:20px;text-align:center}
  .coin h3{font-size:1.35rem;color:var(--maroon)}
  .coin p{margin:4px 0 0;font-size:.9rem}
  @media(max-width:760px){.about{grid-template-columns:1fr;padding:24px}}

  .quote{text-align:center;padding:60px 0 36px}
  .quote blockquote{font-family:Fraunces,serif;font-size:clamp(1.6rem,4vw,2.2rem)}
  .quote cite{display:block;color:var(--muted);font-style:normal;margin-top:6px}
  footer{text-align:center;color:var(--muted);font-size:.85rem;padding:0 20px 36px}

  /* ---------- Modal (bottom sheet on phones) ---------- */
  .ov{position:fixed;inset:0;background:rgba(20,10,5,.5);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
  .ov.open{display:flex}
  .modal{background:var(--card);border-radius:24px;width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:30px;position:relative;animation:up .22s ease}
  @keyframes up{from{opacity:0;transform:translateY(16px)}}
  @media(max-width:560px){.ov{align-items:flex-end;padding:0}.modal{border-radius:24px 24px 0 0;max-height:88vh;padding:26px 22px 32px}}
  .x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);cursor:pointer;font-size:1rem}
  .modal h2{font-size:1.75rem;margin-bottom:6px;padding-right:44px}
  .sub{color:var(--muted);margin-bottom:18px}
  .panel{display:none}.panel.on{display:block}
  textarea{width:100%;min-height:84px;padding:14px;border:1px solid var(--line);border-radius:14px;font:inherit;resize:vertical;margin-bottom:14px;background:var(--bg);color:var(--ink)}
  .res{display:none;margin-top:20px;background:var(--accent-soft);border-radius:18px;padding:22px;animation:up .25s ease}
  .lbl{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
  .res h3{font-size:1.4rem;margin:4px 0 8px}
  .lesson{font-style:italic;color:var(--maroon);margin-top:10px}
  .note{font-size:.82rem;color:var(--muted);margin-top:12px}
  .yn{font-family:Fraunces,serif;font-size:4.2rem;color:var(--accent);text-align:center;animation:f .8s ease}
  @keyframes f{from{opacity:0;transform:scale(.8)}}
  .steps{display:flex;gap:6px;margin:4px 0 18px}.steps span{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .3s}.steps span.on{background:var(--accent)}
  ol{padding-left:22px}ol li{margin-bottom:9px}ol li::marker{color:var(--accent);font-weight:600}

/* ---------- Shared additions ---------- */
.nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.nav a{color:var(--muted);text-decoration:none}.nav a:hover{color:var(--accent)}
footer .fine{margin-top:10px;font-size:.78rem;max-width:620px;margin-left:auto;margin-right:auto}
.crumb{font-size:.88rem;color:var(--muted);margin:4px 0 16px}.crumb a{color:var(--accent);text-decoration:none}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow);max-width:640px;margin:24px auto 0}
.box h2{font-size:1.5rem;margin-bottom:6px}
.faq{max-width:720px;margin:56px auto 0}
.faq h2{font-size:1.6rem;margin-bottom:14px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{color:var(--muted);margin-top:8px}
.more{text-align:center;margin-top:40px}

/* Thursday banner */
.thu{display:none;align-items:center;gap:10px;justify-content:center;background:var(--accent-soft);color:var(--maroon);font-weight:500;font-size:.92rem;padding:10px 16px;border-radius:14px;margin-bottom:14px;text-align:center}
.thu.on{display:flex}

/* Today's quote */
.today{margin-top:16px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;box-shadow:var(--shadow)}
.today .q-ic{font-size:2.2rem;line-height:1;color:var(--accent);font-family:Fraunces,serif}
.today .lbl{display:block;margin-bottom:4px}
.today blockquote{font-family:Fraunces,serif;font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.35}
.today .acts{display:flex;gap:8px}
.icon-btn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 14px;cursor:pointer;font:inherit;font-size:.88rem;font-weight:500;text-decoration:none;white-space:nowrap}
.icon-btn:hover{border-color:var(--accent)}
@media(max-width:640px){.today{grid-template-columns:1fr;gap:10px;padding:22px}.today .q-ic{display:none}}

/* Jaap counter */
.jaap{text-align:center}
.bead{width:180px;height:180px;border-radius:50%;margin:10px auto 14px;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,var(--accent-2),var(--accent) 45%,var(--maroon) 100%);color:#fff;font-family:Fraunces,serif;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(217,102,15,.35);transition:transform .08s;-webkit-tap-highlight-color:transparent}
.bead:active{transform:scale(.96)}
.bead b{font-size:3rem;line-height:1}.bead span{font-size:1rem;opacity:.9}
.mala{color:var(--muted);font-size:.92rem}
.ring{height:6px;border-radius:6px;background:var(--line);overflow:hidden;max-width:260px;margin:10px auto}.ring i{display:block;height:100%;background:var(--accent);width:0;transition:width .15s}

/* Donate tile */
.tile.donate .ic{background:#fde8e8}
.donate-note{font-size:.82rem;color:var(--muted);margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px dashed var(--line)}
.tile.w2{grid-column:span 2}
@media(max-width:560px){.tile.w2{grid-column:span 1}}
.numin{width:96px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--bg);color:var(--ink);margin-left:6px}
.grid.hub{grid-template-columns:repeat(2,1fr);max-width:760px;margin:24px auto 0}
@media(max-width:560px){.grid.hub{grid-template-columns:1fr}}

/* Morning prayer */
.pray-band{display:flex;align-items:center;gap:16px;margin-top:16px;padding:18px 22px;border-radius:var(--r);text-decoration:none;color:var(--ink);background:linear-gradient(120deg,var(--accent-soft),var(--card));border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .18s,border-color .18s}
.pray-band:hover{transform:translateY(-2px);border-color:var(--accent-2)}
.pray-band .pb-ic{font-size:2rem}
.pray-band strong{display:block;font-family:Fraunces,serif;font-size:1.25rem;font-weight:600}
.pray-band .pb-sub{display:block;color:var(--muted);font-size:.92rem}
.pray-band .btn{margin-left:auto;flex-shrink:0}
@media(max-width:560px){.pray-band{flex-wrap:wrap}.pray-band .btn{margin-left:0;width:100%;justify-content:center}}
.prayer .steps{margin-bottom:22px}
.ptext{font-size:1.15rem;line-height:1.7}

/* Vision */
.vision{margin-top:56px;text-align:center;padding:40px 28px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.vision .lbl{display:inline-block;margin-bottom:8px}
.vision h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:12px}
.vision p{max-width:640px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.75}
.vision + .about{margin-top:16px}
.chant-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Calm home (distraction-free) ---------- */
.calm .hero.center{align-items:center;text-align:center;justify-content:center;min-height:520px;gap:16px;
  background:linear-gradient(to top,rgba(30,10,4,.88) 0%,rgba(30,10,4,.35) 55%,rgba(30,10,4,.15) 100%),url("/baba.jpg") center 22%/cover no-repeat,#3a0f0f}
.calm .hero.center h1{font-size:clamp(2.6rem,7vw,4.4rem);max-width:none}
.calm .hero.center p{max-width:520px;margin:0 auto}
.calm .hero.center .cta{justify-content:center}
.calm-quote{text-align:center;padding:64px 12px 8px;max-width:760px;margin:0 auto}
.calm-quote .lbl{display:block;margin-bottom:12px}
.calm-quote blockquote{font-family:Fraunces,serif;font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.35}
.link-btn{background:none;border:0;color:var(--accent);font:inherit;font-size:.9rem;cursor:pointer;margin-top:14px;padding:4px}
.link-btn:hover{text-decoration:underline}
.calm-h{text-align:center;font-size:1.5rem;margin:64px 0 20px}
.calm-grid .tile{min-height:0;align-items:flex-start;padding:22px}
.calm-grid .tile h3{margin-top:6px}
.calm .vision{margin-top:72px;background:var(--accent-soft);border:0;box-shadow:none}
.calm-coins{max-width:360px;margin:22px auto 0}
.calm-coins .coin{padding:14px}
.vision-sub{margin-top:18px!important;font-size:.95rem!important}
.foot-acts{margin-bottom:10px}.foot-acts a{color:var(--accent);text-decoration:none}
.foot-acts .link-btn{margin:0;font-size:.85rem}
@media(max-width:560px){.calm .hero.center{min-height:460px}.calm-h{margin-top:48px}}

/* ---------- Language, bigger text, listen ---------- */
html{font-size:17px}
html.big{font-size:20px}
.lang-pick{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:2px 0 10px}
.lang-pick button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:.95rem;cursor:pointer}
.lang-pick button.on{background:var(--accent);border-color:var(--accent);color:#fff}
#bigText{font-weight:700;font-size:.9rem}
.q-acts{display:flex;gap:18px;justify-content:center}
body.lang-in h1,body.lang-in h2,body.lang-in h3,body.lang-in blockquote{font-family:inherit;letter-spacing:0;line-height:1.35}
.btn,.tile{min-height:48px}
@media(max-width:560px){.lang-pick{gap:4px;flex-wrap:nowrap}.lang-pick button{padding:6px 9px;font-size:.8rem;white-space:nowrap}}
[hidden]{display:none!important}
.top-nav{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:center;padding:0 0 12px;font-size:.92rem}
.top-nav a{color:var(--muted);text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent}
.top-nav a:hover{color:var(--accent)}
.top-nav a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
@media(max-width:560px){.top-nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch}.top-nav::-webkit-scrollbar{display:none}.top-nav a{white-space:nowrap}}
header .wrap.hdr-nav{display:block}

/* ---------- Review fixes ---------- */
:root{--muted:#62574e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--muted:#c2b4a6}}
:root[data-theme="dark"]{--muted:#c2b4a6}
.calm-grid .tile{position:relative;padding-right:44px}
.calm-grid .tile .go{position:absolute;top:22px;right:20px;margin:0}
.tile:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.lang-pick button,.top-nav a,.link-btn,.theme{min-height:44px}
.safe-note{font-size:.88rem;color:var(--ink);background:var(--accent-soft);border-radius:12px;padding:10px 14px;margin-top:16px}
.trust{font-size:.82rem;color:var(--muted);margin-top:10px}
#stepLbl{margin:-8px 0 14px}
@media(max-width:560px){
  .top-nav{flex-wrap:wrap!important;overflow:visible!important;justify-content:center!important;gap:6px!important}
  .top-nav a{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:.82rem;background:var(--card);display:inline-flex;align-items:center}
  .top-nav a.on{background:var(--accent);color:#fff;border-color:var(--accent)}
  .lang-pick button{min-height:40px}
}
@media(max-width:560px){
  .top-nav{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important}
  .top-nav a{justify-content:center;text-align:center;white-space:normal!important;line-height:1.2;padding:6px 8px;min-height:40px}
}

/* Faster hero photo: WebP, smaller file on phones */
.hero{background-image:linear-gradient(to top,rgba(30,10,4,.92) 0%,rgba(30,10,4,.45) 50%,rgba(30,10,4,.05) 100%),image-set(url("/baba-1400.webp") type("image/webp"),url("/baba.jpg") type("image/jpeg"))}
.calm .hero.center{background-image:linear-gradient(to top,rgba(30,10,4,.88) 0%,rgba(30,10,4,.35) 55%,rgba(30,10,4,.15) 100%),image-set(url("/baba-1400.webp") type("image/webp"),url("/baba.jpg") type("image/jpeg"))}
@media(max-width:700px){
  .hero{background-image:linear-gradient(to top,rgba(30,10,4,.92) 0%,rgba(30,10,4,.45) 50%,rgba(30,10,4,.05) 100%),image-set(url("/baba-800.webp") type("image/webp"),url("/baba.jpg") type("image/jpeg"))}
  .calm .hero.center{background-image:linear-gradient(to top,rgba(30,10,4,.88) 0%,rgba(30,10,4,.35) 55%,rgba(30,10,4,.15) 100%),image-set(url("/baba-800.webp") type("image/webp"),url("/baba.jpg") type("image/jpeg"))}
}