/* ============================================================
   Nityaveda — Ideas. Six linked concepts told as one chain.
   Signature: the Sanskrit word is the hero of each link, set
   large and luminous, the teaching beside it, alternating
   sides so the eye moves down the chain. Between the links,
   the hinge questions run full width: the visible connective
   tissue of the teaching.
   Scoped under body.ideas2, after styles.css + dark.css.
   ============================================================ */

body.ideas2{--aurora:rgba(120,140,210,.20)}

/* ---------- hero ---------- */
body.ideas2 .i2-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(90% 80% at 22% -30%, var(--aurora), transparent 60%),
    radial-gradient(60% 50% at 92% 8%, rgba(186,200,240,.10), transparent 60%),
    linear-gradient(180deg, var(--nsky-mid,#0C0A24) 0%, var(--nsky-bot,#15123A) 55%, var(--paper) 100%)}
body.ideas2 .i2-hero-inner{max-width:1180px;margin:0 auto;padding:64px 32px 84px;position:relative;z-index:2}
@media(max-width:680px){body.ideas2 .i2-hero-inner{padding:52px 22px 60px}}
body.ideas2 .i2-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
body.ideas2 .i2-eyebrow .rule{height:1px;width:42px;background:var(--accent);opacity:.55}
body.ideas2 .i2-eyebrow .eyebrow{color:var(--accent2);font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;
  font-weight:430;font-size:1.04rem;letter-spacing:.01em;text-transform:none}
body.ideas2 .i2-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.ideas2 .i2-title em{font-style:italic;color:var(--accent)}
body.ideas2 .i2-sub{color:var(--ink2);font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.6;
  max-width:50ch;margin:0}
body.ideas2 .i2-glyphrow{display:flex;gap:clamp(14px,3vw,34px);margin-top:48px;flex-wrap:wrap;align-items:baseline}
body.ideas2 .i2-glyphrow span{font-family:var(--dev-disp,"Tillana",serif);
  font-size:clamp(1.5rem,3vw,2.3rem);color:var(--accent);opacity:.32;
  transition:opacity .4s ease,transform .4s ease;cursor:default}
body.ideas2 .i2-glyphrow span:hover{opacity:.9;transform:translateY(-3px)}

/* ---------- the chain ---------- */
body.ideas2 .i2-chain{background:var(--paper);padding:24px 0 0}
body.ideas2 .i2-link{position:relative;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;
  padding:clamp(56px,8vh,110px) 32px}
@media(max-width:760px){
  body.ideas2 .i2-link{grid-template-columns:1fr;gap:10px;padding:48px 22px;text-align:left}
}
body.ideas2 .i2-link:nth-child(even) .i2-glyphwrap{order:2}
@media(max-width:760px){body.ideas2 .i2-link:nth-child(even) .i2-glyphwrap{order:0}}
body.ideas2 .i2-glyphwrap{display:flex;justify-content:center;align-items:center;position:relative;grid-row:1}
body.ideas2 .i2-glyph{font-family:var(--dev-disp,"Tillana",serif);
  font-size:clamp(5.5rem,16vw,12rem);line-height:.86;color:var(--accent);
  text-shadow:0 0 60px rgba(186,200,240,.35);
  transition:opacity 1s ease,transform 1s ease;will-change:transform;position:relative;z-index:1}
@media(max-width:760px){body.ideas2 .i2-glyph{font-size:clamp(4.5rem,26vw,7rem)}}
body.ideas2 .i2-glyphwrap::before{content:"";position:absolute;width:min(70%,360px);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,var(--aurora),transparent 68%);
  filter:blur(8px);opacity:.7;z-index:0}
body.ideas2 .i2-text{max-width:46ch;grid-row:1}
body.ideas2 .i2-roman{font-family:"Halant",serif;font-size:.82rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent2);display:block;margin-bottom:12px;opacity:.9}
body.ideas2 .i2-name{font-family:"Fraunces","Fraunces-fallback",serif;font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.04;color:#fff;margin:0 0 4px;letter-spacing:-.01em}
body.ideas2 .i2-gloss{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;color:var(--accent2);
  font-size:1.06rem;margin:0 0 18px}
body.ideas2 .i2-text p{color:var(--ink);font-size:1.12rem;line-height:1.7;margin:0}
body.ideas2 .i2-text p i{color:var(--accent);font-style:italic}

/* the hinge */
body.ideas2 .i2-hinge{position:relative;max-width:760px;margin:0 auto;
  padding:clamp(30px,6vh,64px) 32px;text-align:center}
body.ideas2 .i2-hinge p{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;font-weight:340;
  font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.32;color:var(--accent2);margin:0;
  text-shadow:0 0 40px rgba(186,200,240,.18)}
body.ideas2 .i2-hinge::after{content:"";display:block;width:1px;height:clamp(28px,5vh,48px);
  margin:clamp(18px,3vh,28px) auto 0;background:linear-gradient(180deg,var(--accent),transparent)}

/* yoga four roads */
body.ideas2 .i2-roads{grid-column:1/-1;grid-row:2;margin-top:clamp(28px,4vh,48px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,40px);max-width:1180px}
/* mobile: single column, so reset the desktop row pins to stop glyph/text overlap.
   Placed AFTER the base grid-row rules so it wins the cascade. */
@media(max-width:760px){
  body.ideas2 .i2-glyphwrap{grid-row:auto}
  body.ideas2 .i2-text{grid-row:auto}
  body.ideas2 .i2-roads{grid-row:auto;margin-top:24px}
}
@media(max-width:880px){body.ideas2 .i2-roads{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:480px){body.ideas2 .i2-roads{grid-template-columns:1fr}}
body.ideas2 .i2-road{border-top:1px solid var(--line);padding-top:16px;align-self:start}
body.ideas2 .i2-road .rk{font-family:var(--dev-disp,"Tillana",serif);color:var(--accent);
  font-size:1.5rem;display:block;margin-bottom:6px}
body.ideas2 .i2-road .rn{font-family:"Fraunces","Fraunces-fallback",serif;color:#fff;font-size:1.08rem;display:block;margin-bottom:4px}
body.ideas2 .i2-road p{color:var(--ink2);font-size:.96rem;line-height:1.5;margin:0}

/* closing fold-up */
body.ideas2 .i2-gather{max-width:760px;margin:0 auto;padding:clamp(40px,7vh,80px) 32px 0;text-align:center}
body.ideas2 .i2-gather p{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;font-weight:340;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.5;color:#fff;margin:0 auto;max-width:30ch}
body.ideas2 .i2-gather .hl{color:var(--accent)}

/* monument */
body.ideas2 .i2-verse{position:relative;text-align:center;padding:96px 0 100px;margin-top:40px;
  background:radial-gradient(60% 90% at 50% 40%,var(--aurora),transparent 70%),var(--paper)}
body.ideas2 .i2-verse .dev{font-family:var(--dev-disp,"Tillana",serif);
  font-size:clamp(2.4rem,7vw,4.4rem);line-height:1.3;color:var(--accent);
  text-shadow:0 0 64px rgba(186,200,240,.4);margin:0}
body.ideas2 .i2-verse .en{font-family:"Fraunces","Fraunces-fallback",serif;font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.55rem);color:#fff;margin:20px 0 0}
body.ideas2 .i2-verse .src{font-family:"Halant",serif;font-size:.84rem;letter-spacing:.08em;
  color:var(--ink2);margin-top:16px}
@media (prefers-reduced-motion: no-preference){
  body.ideas2 .i2-verse .dev{animation:i2breathe 7s ease-in-out infinite}
  @keyframes i2breathe{0%,100%{opacity:.92;text-shadow:0 0 50px rgba(186,200,240,.26)}
    50%{opacity:1;text-shadow:0 0 80px rgba(186,200,240,.46)}}
}

/* where next */
body.ideas2 .i2-next{background:linear-gradient(180deg,var(--paper),#0C0A24);padding:20px 0 100px}
body.ideas2 .i2-next .wrap{max-width:1240px;padding:0 28px}
body.ideas2 .i2-next-row{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px}
body.ideas2 .i2-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.ideas2 .i2-next-row a:hover{color:#fff;border-color:var(--accent)}

/* motion */
body.ideas2 .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
body.ideas2 .reveal.in{opacity:1;transform:none}
body.ideas2 .i2-link .i2-glyph{opacity:0;transform:translateY(30px) scale(.96)}
body.ideas2 .i2-link.in .i2-glyph{opacity:1;transform:none}
body.ideas2 .i2-link .i2-text{opacity:0;transform:translateY(18px);transition:opacity .9s ease .15s,transform .9s ease .15s}
body.ideas2 .i2-link.in .i2-text{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  body.ideas2 .reveal,
  body.ideas2 .i2-link .i2-glyph,
  body.ideas2 .i2-link .i2-text{opacity:1 !important;transform:none !important;transition:none}
}