/* ============================================================
   Nityaveda — Practice. The mantra library, told in the same
   chain framework as Ideas: each mantra is a link, its giant
   Devanagari glyph alternating side to side, the three layers
   (meaning / reason / science) set against it. No cards.
   Scoped under body.practice2, after styles.css + dark.css.
   ============================================================ */

body.practice2{--aurora:rgba(120,140,210,.18)}

/* ---------- hero ---------- */
body.practice2 .p3-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(85% 75% at 20% -28%, var(--aurora), transparent 60%),
    radial-gradient(60% 50% at 92% 6%, rgba(186,200,240,.10), transparent 60%),
    linear-gradient(180deg, var(--nsky-mid,#0C0A24) 0%, var(--nsky-bot,#15123A) 55%, var(--paper) 100%)}
body.practice2 .p3-hero-inner{max-width:1180px;margin:0 auto;padding:64px 32px 84px;position:relative;z-index:2}
@media(max-width:680px){body.practice2 .p3-hero-inner{padding:52px 22px 58px}}
body.practice2 .p3-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
body.practice2 .p3-eyebrow .rule{height:1px;width:42px;background:var(--accent);opacity:.55}
body.practice2 .p3-eyebrow .eyebrow{color:var(--accent2);font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;
  font-weight:430;font-size:1.04rem;text-transform:none}
body.practice2 .p3-title{font-family:"Fraunces","Fraunces-fallback",serif;font-weight:330;
  font-size:clamp(2.7rem,6.4vw,5.2rem);line-height:.98;letter-spacing:-.018em;
  margin:0 0 26px;max-width:17ch;color:#fff;text-shadow:0 2px 50px rgba(0,0,0,.5)}
body.practice2 .p3-title em{font-style:italic;color:var(--accent)}
body.practice2 .p3-sub{color:var(--ink2);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.6;max-width:50ch;margin:0}
body.practice2 .p3-glyphrow{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,32px);margin-top:46px;align-items:baseline}
body.practice2 .p3-glyphrow .gr{text-decoration:none;line-height:1.1;
  padding:4px 2px;border-bottom:1px solid transparent;transition:border-color .3s ease}
body.practice2 .p3-glyphrow .gr .dev{font-family:var(--dev-disp,"Tillana",serif);
  font-size:clamp(1.3rem,2.3vw,1.85rem);color:var(--accent);opacity:.42;white-space:nowrap;
  transition:opacity .3s ease,transform .3s ease,text-shadow .3s ease;display:inline-block}
body.practice2 .p3-glyphrow .gr:hover .dev,body.practice2 .p3-glyphrow .gr:focus-visible .dev{
  opacity:1;transform:translateY(-3px);text-shadow:0 0 26px rgba(186,200,240,.5)}
body.practice2 .p3-glyphrow .gr:focus-visible{outline:none;border-bottom-color:var(--accent)}

/* ---------- today's mantra : the opening hinge ---------- */
body.practice2 .p3-today{background:var(--paper);padding:18px 0 0}
body.practice2 .p3-today-hinge{max-width:760px;margin:0 auto;padding:clamp(20px,4vh,40px) 32px clamp(8px,2vh,16px);text-align:center}
body.practice2 .p3-today-hinge p{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;font-weight:340;
  font-size:clamp(1.3rem,2.8vw,1.95rem);line-height:1.34;color:var(--accent2);margin:0;text-shadow:0 0 40px rgba(186,200,240,.18)}
body.practice2 .p3-today-hinge::after{content:"";display:block;width:1px;height:clamp(28px,5vh,46px);
  margin:clamp(18px,3vh,26px) auto 0;background:linear-gradient(180deg,var(--accent),transparent)}

/* ---------- the library : a chain of links ---------- */
body.practice2 .p3-chain{background:var(--paper);padding:0 0 10px}
body.practice2 .mantras{display:block}

/* each mantra renders as <details> but we present it as a full-bleed link */
body.practice2 details.mantra{max-width:1180px;margin:0 auto;border:0;position:relative}
body.practice2 details.mantra + details.mantra{border-top:1px solid var(--line)}
body.practice2 details.mantra summary{list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(38px,5.5vh,68px) 32px;position:relative}
body.practice2 details.mantra summary::-webkit-details-marker{display:none}
@media(max-width:760px){
  body.practice2 details.mantra summary{grid-template-columns:1fr;gap:14px;padding:42px 22px}
}
/* alternate the glyph side down the chain */
body.practice2 details.mantra:nth-of-type(even) .hd{order:2}
@media(max-width:760px){body.practice2 details.mantra:nth-of-type(even) .hd{order:0}}

/* the giant glyph */
body.practice2 .mantra .hd{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;align-self:center}
body.practice2 .mantra .hd::before{content:"";position:absolute;width:min(86%,420px);height:70%;border-radius:50%;
  background:radial-gradient(circle,var(--aurora),transparent 68%);filter:blur(8px);opacity:.7;z-index:0}
body.practice2 .mantra .hd .dev{font-family:var(--dev-disp,"Tillana",serif);
  font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.45;color:var(--accent);position:relative;z-index:1;
  text-shadow:0 0 50px rgba(186,200,240,.32);text-align:center;text-wrap:balance;max-width:14ch}
@media(max-width:760px){body.practice2 .mantra .hd .dev{font-size:clamp(1.7rem,6vw,2.6rem);max-width:16ch}}

/* the name/teaching column */
body.practice2 .mantra .nm{display:flex;flex-direction:column;max-width:46ch}
body.practice2 .mantra .nm b{font-family:"Fraunces","Fraunces-fallback",serif;font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;line-height:1.04;letter-spacing:-.01em;margin-bottom:6px}
body.practice2 .mantra .nm > span{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;color:var(--accent2);font-size:1.08rem;margin-bottom:18px}
body.practice2 .mantra .nm::after{content:"Open the three layers \2193";font-family:"Halant",serif;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);opacity:.7;margin-top:6px;transition:color .2s ease}
body.practice2 details.mantra[open] .nm::after{content:"Close \2191";color:var(--accent2);opacity:.9}
body.practice2 details.mantra[open] summary{padding-top:clamp(30px,4vh,52px);padding-bottom:clamp(8px,1.5vh,18px)}
body.practice2 details.mantra summary:hover .nm::after{color:var(--accent2)}

/* the opened detail: three layers + reading + audio, full width under the link */
body.practice2 .mantra .det{max-width:1180px;margin:0 auto;padding:0 32px clamp(44px,6vh,72px)}
@media(max-width:760px){body.practice2 .mantra .det{padding:0 22px 44px}}
body.practice2 .mantra .full{font-family:var(--dev-disp,"Tillana",serif);color:var(--accent2);
  font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.7;margin:0 0 6px;max-width:46ch;opacity:.85}
/* hide the small repeat for single-glyph mantras (full == headline); show only multi-word verses */
body.practice2 .mantra .full:not(.multi){display:none}
body.practice2 .mantra .tl{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;color:var(--ink2);font-size:1.02rem;margin:0 0 20px;max-width:50ch}
body.practice2 .mantra .playmantra{appearance:none;cursor:pointer;font:inherit;font-size:.94rem;
  color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:999px;
  padding:9px 22px;transition:background .2s ease,color .2s ease;margin-bottom:30px}
body.practice2 .mantra .playmantra:hover,body.practice2 .mantra .playmantra.on{background:var(--accent);color:var(--paper)}
body.practice2 .mantra .playmantra.muted{border-color:var(--line);color:var(--ink2);cursor:default}

body.practice2 .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,48px);margin:0 0 22px}
@media(max-width:760px){body.practice2 .layers{grid-template-columns:1fr;gap:22px}}
body.practice2 .layer{border-top:1px solid var(--line-gold,rgba(186,200,240,.26));padding-top:16px}
body.practice2 .layer .lk{display:block;font-family:"Halant",serif;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent2);margin-bottom:11px}
body.practice2 .layer p{color:var(--ink);font-size:1.02rem;line-height:1.62;margin:0}
body.practice2 .mantra .when{color:var(--ink2);font-size:.98rem;margin:6px 0 0}
body.practice2 .mantra .when .wk{font-family:"Halant",serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent2);margin-right:8px}

/* ---------- science note ---------- */
body.practice2 .p3-sciencenote{max-width:760px;margin:0 auto;padding:clamp(40px,6vh,70px) 32px;text-align:center}
body.practice2 .p3-sciencenote .lk{font-family:"Halant",serif;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent2);display:block;margin-bottom:14px}
body.practice2 .p3-sciencenote p{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;font-weight:340;
  color:var(--ink);font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.5;margin:0 auto;max-width:40ch}

/* ---------- where next ---------- */
body.practice2 .p3-next{background:linear-gradient(180deg,var(--paper),#0C0A24);padding:10px 0 96px}
body.practice2 .p3-next .p3-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
body.practice2 .p3-next-row{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
body.practice2 .p3-next-row a{color:var(--accent2);text-decoration:none;font-family:"Fraunces","Fraunces-fallback",serif;font-size:1.1rem;
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .25s ease,color .25s ease}
body.practice2 .p3-next-row a:hover{color:#fff;border-color:var(--accent)}

/* motion */
body.practice2 .reveal{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s ease}
body.practice2 .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  body.practice2 #todayMantra .tm-dev{animation:p3breathe 7s ease-in-out infinite}
  @keyframes p3breathe{0%,100%{opacity:.92;text-shadow:0 0 54px rgba(186,200,240,.28)}
    50%{opacity:1;text-shadow:0 0 84px rgba(186,200,240,.48)}}
}
@media (prefers-reduced-motion: reduce){
  body.practice2 .reveal{opacity:1;transform:none;transition:none}
}


/* ============ bring to life ============ */
/* the giant glyph reacts when its mantra opens */
body.practice2 .mantra .hd .dev{transition:transform .6s cubic-bezier(.2,.7,.2,1),text-shadow .6s ease,color .4s ease}
body.practice2 details.mantra[open] .hd .dev{transform:scale(1.03);text-shadow:0 0 80px rgba(186,200,240,.5)}
body.practice2 .mantra .hd::before{transition:opacity .6s ease,transform .6s ease;transform:scale(.9)}
body.practice2 details.mantra[open] .hd::before{opacity:1;transform:scale(1.12)}

/* layers stagger-fade as the detail opens */
@media (prefers-reduced-motion: no-preference){
  body.practice2 details.mantra[open] .layer{animation:p3layer .7s ease both}
  body.practice2 details.mantra[open] .layer:nth-child(1){animation-delay:.04s}
  body.practice2 details.mantra[open] .layer:nth-child(2){animation-delay:.14s}
  body.practice2 details.mantra[open] .layer:nth-child(3){animation-delay:.24s}
  @keyframes p3layer{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  body.practice2 details.mantra[open] .full,
  body.practice2 details.mantra[open] .tl,
  body.practice2 details.mantra[open] .playmantra{animation:p3layer .6s ease both}
}

/* hover on a closed row: glyph brightens and drifts toward its name */
@media (hover:hover){
  body.practice2 details.mantra:not([open]) summary:hover .hd .dev{color:#fff;text-shadow:0 0 80px rgba(186,200,240,.55);transform:translateY(-3px)}
  body.practice2 details.mantra:not([open]) summary:hover .hd::before{opacity:1}
}

/* the Play button gets a soft sound-pulse ring while playing */
body.practice2 .mantra .playmantra.on{position:relative}
body.practice2 .mantra .playmantra.on::after{content:"";position:absolute;inset:-4px;border-radius:999px;
  border:1px solid var(--accent);animation:p3pulse 1.8s ease-out infinite;pointer-events:none}
body.practice2 #todayMantra .playmantra.on::after{content:"";position:absolute;inset:-4px;border-radius:999px;
  border:1px solid var(--accent);animation:p3pulse 1.8s ease-out infinite;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  @keyframes p3pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
}
@media (prefers-reduced-motion: reduce){
  body.practice2 .mantra .hd .dev,
  body.practice2 details.mantra[open] .hd .dev{transition:none;transform:none}
}


/* ---------- today's mantra : editorial split ---------- */
body.practice2 #todayMantra{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 clamp(32px,5vw,84px);
  align-items:center;max-width:1180px;margin:0 auto;
  padding:clamp(28px,4.5vh,48px) 32px clamp(24px,4vh,42px);text-align:left}
body.practice2 .tm-eyebrow{display:flex;align-items:center;gap:12px;
  font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;color:var(--accent2);font-size:.95rem;margin-bottom:14px;
  text-transform:none;letter-spacing:.01em;font-weight:400}
body.practice2 .tm-eyebrow::before{content:"";height:1px;width:30px;background:var(--line-gold,rgba(186,200,240,.26))}
body.practice2 .tm-name{font-family:"Fraunces","Fraunces-fallback",serif;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.7rem,3vw,2.4rem);color:#fff;line-height:1.06;margin:0 0 12px}
body.practice2 .tm-dev{font-family:var(--dev-disp,"Tillana",serif);color:var(--accent);
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.4;margin:0 0 6px;max-width:44ch;
  text-shadow:0 0 44px rgba(186,200,240,.32)}
body.practice2 .tm-dev.long{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.7}
body.practice2 .tm-tl{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;color:var(--ink2);
  font-size:.98rem;margin:0 0 16px;max-width:60ch}
body.practice2 .tm-why{color:var(--ink);font-size:1.04rem;line-height:1.6;max-width:56ch;margin:0}
body.practice2 .tm-side{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;
  border-left:1px solid var(--line);padding-left:clamp(28px,4vw,64px)}
body.practice2 #todayMantra .playmantra{appearance:none;cursor:pointer;font:inherit;
  font-family:"Fraunces","Fraunces-fallback",serif;font-size:1.04rem;letter-spacing:.02em;white-space:nowrap;
  color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:999px;
  padding:15px 38px;transition:background .2s ease,color .2s ease;position:relative}
body.practice2 #todayMantra .playmantra:hover,body.practice2 #todayMantra .playmantra.on{background:var(--accent);color:var(--paper)}
body.practice2 #todayMantra .playmantra.muted{border-color:var(--line);color:var(--ink2);cursor:default}
body.practice2 #todayMantra .layers{grid-column:1/-1;text-align:left;margin:clamp(24px,4vh,36px) 0 0}
@media(max-width:760px){
  body.practice2 #todayMantra{grid-template-columns:1fr;gap:0;padding:34px 22px 30px}
  body.practice2 .tm-side{border-left:0;border-top:1px solid var(--line);padding:18px 0 0;margin-top:20px;
    justify-content:flex-start;align-self:auto}
}

/* ---------- library cards : the same editorial split as today's mantra ---------- */
body.practice2 .mantra-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 clamp(32px,5vw,84px);
  align-items:center;max-width:1180px;margin:0 auto;
  padding:clamp(28px,4.5vh,48px) 32px clamp(24px,4vh,42px);text-align:left;
  border-top:1px solid var(--line)}
body.practice2 .mantra-card .layers{grid-column:1/-1;text-align:left;margin:clamp(24px,4vh,36px) 0 0}
body.practice2 .mantra-card .playmantra{appearance:none;cursor:pointer;font:inherit;
  font-family:"Fraunces","Fraunces-fallback",serif;font-size:1.04rem;letter-spacing:.02em;white-space:nowrap;
  color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:999px;
  padding:15px 38px;transition:background .2s ease,color .2s ease;position:relative}
body.practice2 .mantra-card .playmantra:hover,body.practice2 .mantra-card .playmantra.on{background:var(--accent);color:var(--paper)}
body.practice2 .mantra-card .playmantra.muted{border-color:var(--line);color:var(--ink2);cursor:default}
body.practice2 .mantra-card .playmantra.on::after{content:"";position:absolute;inset:-4px;border-radius:999px;
  border:1px solid var(--accent);animation:p3pulse 1.8s ease-out infinite;pointer-events:none}
@media(max-width:760px){
  body.practice2 .mantra-card{grid-template-columns:1fr;gap:0;padding:34px 22px 30px}
}