/* =================================================================
   JYOTIRGANA — SHARED STYLES
   -----------------------------------------------------------------
   Every page loads this file and jyotirgana.js.

   COLOURS ARE NOT FIXED. --bg, --text, --dim and --accent are
   rewritten many times a second by jyotirgana.js as the reader
   scrolls. Never hardcode a colour in a page, or that element will
   fall out of the light.

   TYPOGRAPHY — two serifs doing two different jobs
   -----------------------------------------------------------------
   --display : Cormorant Garamond. Delicate, high-contrast, beautiful
               at size. Used ONLY large: the wordmark, headings,
               pull-quotes, numerals, helpline numbers.
   --serif   : Spectral. Drawn for screens; keeps its weight small
               and in sunlight. Used for every paragraph.

   Cormorant is a display face. Set it at 17px on a cheap phone in
   daylight and it thins to nothing — which is exactly the reader we
   cannot afford to lose. So it gets the drama and Spectral gets the
   reading, and the page has both.
   ================================================================= */

:root{
  --bg:      rgb(5,6,11);
  --text:    rgb(240,238,233);
  --dim:     rgb(149,146,139);
  --accent:  rgb(240,180,41);
  --line:    rgba(240,180,41,0.16);
  --panel:   rgba(255,255,255,0.035);
  --halo:    rgba(0,0,0,0);
  --dark-mix: 0;

  --max: 700px;
  --display: 'Cormorant Garamond', Georgia, serif;
  --serif:   'Spectral', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;
  --deva:      'Noto Sans Devanagari', system-ui, sans-serif;
  --deva-serif:'Noto Serif Devanagari', Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }

body{
  background:transparent;
  color:var(--text);
  font-family:var(--serif);
  font-weight:300;
  font-size:1.05rem;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-shadow:0 0 2px var(--halo), 0 1px 8px var(--halo);
}
body.lang-hi{ font-family:var(--deva-serif); line-height:1.95; font-size:1.05rem; }

/* ---------- the sky ---------- */
#jg-sky{ position:fixed; inset:0; z-index:0; pointer-events:none; display:block; }
body > header, body > main, body > footer,
body > section, body > article, body > div:not(#jg-sky){ position:relative; z-index:1; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--max); margin:0 auto; padding:0 26px; }
section{ padding:92px 0; }
@media (max-width:600px){ section{ padding:64px 0; } }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; color:var(--text); }
.lang-hi h1,.lang-hi h2,.lang-hi h3,.lang-hi h4{ font-family:var(--deva-serif); }

h2{ font-size:clamp(1.95rem,5vw,2.7rem); line-height:1.2; margin-bottom:26px; }
.lang-hi h2{ font-size:clamp(1.55rem,4vw,2.1rem); line-height:1.55; }
h3{ font-size:1.6rem; line-height:1.32; margin-bottom:10px; }
.lang-hi h3{ font-size:1.4rem; line-height:1.5; }
h4{ font-size:1.3rem; line-height:1.34; margin-bottom:6px; }
.lang-hi h4{ font-size:1.2rem; line-height:1.5; }

p{ color:var(--dim); margin-bottom:1.15em; }
p strong, strong{ color:var(--text); font-weight:500; }
em{ color:var(--accent); font-style:italic; }
.lang-hi em{ font-style:normal; font-weight:500; }
.lead{ color:var(--text); font-size:1.14rem; }

.label{
  font-family:var(--sans); font-size:0.68rem; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--accent); margin-bottom:20px; display:block;
}
.lang-hi .label{ font-family:var(--deva); font-size:0.8rem; letter-spacing:0.04em; text-transform:none; font-weight:500; }

.rule{ height:1px; background:var(--line); max-width:var(--max); margin:0 auto; }

/* ---------- navigation ---------- */
nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 26px; max-width:1120px; margin:0 auto; gap:14px;
}
.logo{
  font-family:var(--display); font-size:1.4rem; letter-spacing:0.22em;
  color:var(--accent); text-decoration:none;
}
.lang-hi .logo{ font-family:var(--deva-serif); letter-spacing:0.04em; }
.nav-links{ display:flex; gap:26px; list-style:none; align-items:center; flex-wrap:wrap; }
.nav-links a{
  font-family:var(--sans); color:var(--dim); text-decoration:none;
  font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; transition:color .3s;
}
.lang-hi .nav-links a{ font-family:var(--deva); font-size:0.88rem; letter-spacing:0; text-transform:none; }
.nav-links a:hover{ color:var(--accent); }
.lang{
  font-family:var(--deva) !important; text-transform:none !important;
  letter-spacing:0 !important; border:1px solid var(--line);
  padding:3px 12px; font-size:0.8rem !important;
}
.lang:hover{ border-color:var(--accent); }
@media (max-width:680px){ .nav-links{ gap:14px; } .nav-links a{ font-size:0.68rem; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:14px 32px; font-family:var(--sans);
  border:1px solid var(--accent); color:var(--accent); background:transparent;
  text-decoration:none; font-size:0.76rem; letter-spacing:0.16em;
  text-transform:uppercase; cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.lang-hi .btn{ font-family:var(--deva); font-size:0.92rem; letter-spacing:0; text-transform:none; }
.btn:hover{ background:var(--accent); color:var(--bg); }
.btn-solid{ background:var(--accent); color:var(--bg); font-weight:500; }
.btn-solid:hover{ background:transparent; color:var(--accent); }
.btn-quiet{ border-color:var(--line); color:var(--dim); }
.btn-quiet:hover{ color:var(--text); border-color:var(--text); background:transparent; }

/* =================================================================
   THE WORDMARK — every letter a firefly, with real fireflies on it
   ================================================================= */
.wordmark{
  font-family:var(--display);
  font-size:clamp(3rem,11.5vw,6.6rem); font-weight:300;
  letter-spacing:0.06em; line-height:1.06; margin-bottom:10px;
  position:relative; display:inline-block;
}
.lang-hi .wordmark{ font-family:var(--deva-serif); font-size:clamp(2.6rem,9.5vw,5.2rem); line-height:1.3; letter-spacing:0.02em; }

/* One box per word. An inline-block is a legal place for the browser
   to end a line, so without this the letter spans let "Jyotirgana"
   split across two lines in the middle of the word. Lines may break
   between these boxes and never inside one. */
.wm-word{ display:inline-block; white-space:nowrap; }

.wordmark span{
  display:inline-block; will-change:opacity, text-shadow;
  animation:jg-twinkle var(--dur,4s) ease-in-out var(--delay,0s) infinite;
}
@keyframes jg-twinkle{
  0%,100%{ opacity:.70; text-shadow:0 0 0 rgba(255,217,122,0); }
  8%     { opacity:1;   text-shadow:0 0 16px rgba(255,240,190,.95), 0 0 44px rgba(240,180,41,.6); }
  22%    { opacity:.85; text-shadow:0 0 7px rgba(255,240,190,.4), 0 0 22px rgba(240,180,41,.25); }
  42%    { opacity:.72; text-shadow:0 0 0 rgba(255,217,122,0); }
}
@media (prefers-reduced-motion:reduce){
  .wordmark span{ animation:none; opacity:1; text-shadow:0 0 18px rgba(240,180,41,.35); }
}

/* Fireflies that actually sit on the letters. JS moves them from
   letter to letter with a transition; the animation only pulses
   opacity, so the two never fight over `transform`. */
.perch{
  position:absolute; left:0; top:0; width:5px; height:5px; border-radius:50%;
  background:rgb(255,248,224); pointer-events:none; z-index:2;
  box-shadow:0 0 9px 3px rgba(255,230,150,.9), 0 0 26px 10px rgba(240,180,41,.4);
  transition-property:transform; transition-timing-function:cubic-bezier(.45,.05,.3,1);
  animation:jg-perch var(--pdur,5s) ease-in-out var(--pdelay,0s) infinite;
}
@keyframes jg-perch{
  0%,100%{ opacity:.10; }
  10%    { opacity:1; }
  26%    { opacity:.34; }
  46%    { opacity:.72; }
  62%    { opacity:.14; }
}
@media (prefers-reduced-motion:reduce){ .perch{ animation:none; opacity:.75; } }

/* ---------- page titles ----------
   The firefly wordmark belongs to the NAME ONLY: Jyotirgana, and
   ज्योतिर्गण. A sentence set in it fills with per-letter animation,
   fights for line breaks and reads as a logo rather than a heading.
   Every other page heading uses this instead: same face, same
   presence, no letter splitting, wraps like ordinary language. */
.page-title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2rem,6vw,3.6rem); line-height:1.14;
  letter-spacing:0.01em; margin-bottom:14px;
  text-wrap:balance;              /* keeps the last line from being one orphan word */
  max-width:18ch; margin-left:auto; margin-right:auto;
}
.lang-hi .page-title{
  font-family:var(--deva-serif);
  font-size:clamp(1.6rem,5vw,2.8rem); line-height:1.4; max-width:20ch;
}

/* ---------- hero ---------- */
.hero{ text-align:center; padding:106px 26px 84px; }
.hero .roman{
  font-family:var(--sans); font-size:0.74rem; letter-spacing:0.44em;
  color:var(--accent); opacity:.7; margin-bottom:34px; text-transform:uppercase;
}
.lang-hi .hero .roman{ font-family:var(--sans); }
.hero .lede{
  font-family:var(--display); font-size:clamp(1.35rem,3.5vw,1.8rem);
  font-style:italic; color:var(--dim); max-width:32ch; margin:0 auto 42px; line-height:1.55;
}
.lang-hi .hero .lede{ font-family:var(--deva-serif); font-style:normal; font-size:clamp(1.1rem,3vw,1.45rem); line-height:1.9; max-width:38ch; }

/* ---------- long-form prose ---------- */
article{ padding-bottom:80px; }
article p{ font-size:1.18rem; line-height:1.86; color:var(--text); margin-bottom:1.5em; }
.lang-hi article p{ font-size:1.14rem; line-height:2.05; }
article p.open{ font-family:var(--display); font-size:1.75rem; font-style:italic; line-height:1.5; }
.lang-hi article p.open{ font-family:var(--deva-serif); font-size:1.3rem; font-style:normal; }
article h2{
  font-family:var(--sans); font-size:0.7rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--accent); margin:3.4em 0 1.3em; text-align:center;
}
.lang-hi article h2{ font-family:var(--deva); font-size:0.9rem; letter-spacing:0.04em; text-transform:none; font-weight:500; }

.pull{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.6rem,4.4vw,2.15rem); line-height:1.45; color:var(--accent);
  border-left:2px solid var(--accent); padding-left:26px; margin:2.4em 0;
}
.lang-hi .pull{
  font-family:var(--deva-serif); font-style:normal;
  font-size:clamp(1.25rem,3.4vw,1.55rem); line-height:1.8;
  border-left:none; border-right:2px solid var(--accent); padding-left:0; padding-right:26px;
}

/* ---------- cards & panels ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); }

.story-card{ background:var(--panel); border-left:2px solid var(--accent); padding:38px 34px; }
.lang-hi .story-card{ border-left:none; border-right:2px solid var(--accent); }
.story-card h3{ font-size:1.95rem; margin-bottom:4px; }
.lang-hi .story-card h3{ font-size:1.5rem; }
.story-card .meta{
  font-family:var(--sans); font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:22px;
}
.lang-hi .story-card .meta{ font-family:var(--deva); font-size:0.82rem; letter-spacing:0; text-transform:none; }
.story-card blockquote{
  font-family:var(--display); font-size:1.45rem; font-style:italic;
  line-height:1.55; color:var(--text); margin-bottom:26px;
}
.lang-hi .story-card blockquote{ font-family:var(--deva-serif); font-style:normal; line-height:1.9; font-size:1.12rem; }

/* ---------- findings ---------- */
.findings{ display:grid; gap:1px; background:var(--line); margin:34px 0 26px; }
@media (min-width:700px){ .findings{ grid-template-columns:repeat(3,1fr); } }
.finding{ background:var(--panel); padding:28px 22px; text-align:center; }
.finding .big{ font-family:var(--display); font-size:2.9rem; color:var(--accent); line-height:1.05; display:block; }
.lang-hi .finding .big{ font-family:var(--deva-serif); font-size:2.4rem; line-height:1.3; }
.finding .what{ font-size:0.9rem; color:var(--dim); display:block; margin-top:10px; line-height:1.55; }
.finding .stat{ font-family:var(--sans); font-size:0.68rem; color:var(--dim); opacity:.75; display:block; margin-top:8px; }

.citation{ font-size:0.9rem; color:var(--dim); line-height:1.75; border-left:2px solid var(--line); padding-left:18px; }
.lang-hi .citation{ border-left:none; border-right:2px solid var(--line); padding-left:0; padding-right:18px; }
.citation a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); }
.citation a:hover{ border-bottom-color:var(--accent); }

.limits, .note{
  border:1px solid var(--line); padding:24px 26px; margin-top:30px;
  font-size:0.95rem; color:var(--dim); line-height:1.78;
}
.limits strong, .note strong{ color:var(--text); font-weight:500; }
.note a{ color:var(--accent); }

/* ---------- grids ---------- */
.pillars{ display:grid; gap:26px; margin-top:34px; }
@media (min-width:640px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
.pillar{ border-top:1px solid var(--line); padding-top:18px; }
.pillar .sanskrit{
  font-family:var(--deva); color:var(--accent); font-size:0.78rem;
  letter-spacing:0.1em; display:block; margin-bottom:8px;
}
.pillar p{ font-size:0.98rem; margin:0; }

.ways{ display:grid; gap:20px; margin-top:36px; }
@media (min-width:700px){ .ways{ grid-template-columns:repeat(2,1fr); } }
.way{ background:var(--panel); border:1px solid var(--line); padding:28px 26px; }
.way.primary{ border-color:var(--accent); }
.way p{ font-size:0.98rem; margin-bottom:0; }
.way .tag{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px;
}
.lang-hi .way .tag{ font-family:var(--deva); font-size:0.8rem; letter-spacing:0; text-transform:none; }

/* ---------- six phases ---------- */
.phases{ margin-top:38px; }
.phase{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); }
.phase:last-child{ border-bottom:none; }
.phase .n{ font-family:var(--display); font-size:2.4rem; color:var(--accent); line-height:1; opacity:.45; min-width:1.4em; }
.lang-hi .phase .n{ font-family:var(--deva-serif); font-size:1.9rem; }
.phase .roman{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px;
}
.lang-hi .phase .roman{ font-family:var(--deva); font-size:0.8rem; letter-spacing:0; text-transform:none; }
.phase p{ font-size:0.99rem; margin-bottom:0; }
@media (max-width:520px){ .phase{ grid-template-columns:1fr; gap:6px; } .phase .n{ font-size:1.7rem; } }

/* ---------- three stages ---------- */
.stages{ display:grid; gap:20px; margin-top:34px; }
@media (min-width:760px){ .stages{ grid-template-columns:repeat(3,1fr); } }
.stage{ border:1px solid var(--line); background:var(--panel); padding:28px 24px; }
.stage.final{ border-color:var(--accent); }
.stage .n{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:12px;
}
.lang-hi .stage .n{ font-family:var(--deva); font-size:0.8rem; letter-spacing:0; text-transform:none; }
.stage p{ font-size:0.96rem; margin-bottom:0; }

/* ---------- language shift table ---------- */
.shift{ margin:34px 0 10px; border-top:1px solid var(--line); }
.shift-row{
  display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.shift-row .was{ text-align:right; color:var(--dim); text-decoration:line-through; text-decoration-thickness:1px; }
.shift-row .arrow{ color:var(--accent); font-size:0.85rem; }
.shift-row .now{ font-family:var(--display); font-size:1.42rem; color:var(--text); text-align:left; }
.lang-hi .shift-row .now{ font-family:var(--deva-serif); font-size:1.16rem; text-align:right; }
.lang-hi .shift-row .was{ text-align:left; }
@media (max-width:540px){
  .shift-row{ grid-template-columns:1fr; gap:2px; text-align:center; }
  .shift-row .was,.shift-row .now{ text-align:center; }
  .shift-row .arrow{ display:none; }
}

/* ---------- savitri ---------- */
.savitri{ text-align:center; padding:104px 26px 96px; }
.savitri .verse-en{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.45rem,4vw,2.15rem); line-height:1.62;
  color:var(--text); max-width:25ch; margin:0 auto 26px;
}
.savitri .verse-hi{
  font-family:var(--deva-serif); font-size:clamp(1rem,2.5vw,1.2rem);
  line-height:2; color:var(--dim); max-width:32ch; margin:0 auto 22px;
}
.savitri .attrib{ font-family:var(--sans); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); }
.savitri .transnote{ font-family:var(--sans); font-size:0.68rem; color:var(--dim); opacity:.7; margin-top:10px; }

/* ---------- helplines ---------- */
.helplines{ display:grid; gap:16px; margin:28px 0 26px; }
@media (min-width:640px){ .helplines{ grid-template-columns:repeat(3,1fr); } }
.helpline{
  border:1px solid var(--line); background:var(--panel);
  padding:22px 18px; text-align:center; text-decoration:none; display:block;
  transition:border-color .3s;
}
.helpline:hover{ border-color:var(--accent); }
.helpline .num{ font-family:var(--display); font-size:2.5rem; color:var(--accent); display:block; line-height:1.1; }
.lang-hi .helpline .num{ font-family:var(--deva-serif); font-size:2.1rem; line-height:1.35; }
.helpline .who{ font-size:0.8rem; color:var(--dim); display:block; margin-top:8px; line-height:1.55; }

.disclaimer{ font-size:0.93rem; color:var(--dim); border-left:2px solid var(--accent); padding-left:18px; line-height:1.8; }
.lang-hi .disclaimer{ border-left:none; border-right:2px solid var(--accent); padding-left:0; padding-right:18px; line-height:1.95; }

/* =================================================================
   PHOTOGRAPHS
   -----------------------------------------------------------------
   A photograph is a bright rectangle. Dropped into a dark page it
   sits there like a window cut in a wall, and it breaks the night.

   So the edges of every image dissolve into var(--bg), which is the
   colour the sky happens to be at that scroll position. Near the top
   of a page the photograph fades into black; near the bottom it fades
   into the sunrise. It is never framed, it emerges.

   Images are also slightly desaturated and darkened, so a phone
   snapshot sits inside the palette instead of shouting over it.
   ================================================================= */
.figure{ margin:64px 0; position:relative; }
.figure-media{ position:relative; overflow:hidden; }
.figure img{
  width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(.88) contrast(1.05) brightness(.94);
}
/* the dissolve. pointer-events none so it never blocks anything. */
.figure-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, var(--bg) 100%),
    linear-gradient(to right,  var(--bg) 0%, rgba(0,0,0,0) 9%,  rgba(0,0,0,0) 91%, var(--bg) 100%);
}
.figure figcaption{
  font-family:var(--sans); font-size:0.82rem; line-height:1.7;
  color:var(--dim); max-width:56ch; margin:18px auto 0; text-align:center; padding:0 26px;
}
.lang-hi .figure figcaption{ font-family:var(--deva); font-size:0.92rem; line-height:1.9; }

/* full width, breaking out of the reading column */
.figure.wide{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
/* Ratio is chosen per photograph, not applied uniformly.
   Wide crowd scenes get a cinematic band; single figures get room
   to breathe. The focal point of each image is set inline on the
   <img> with object-position, so the crop is art-directed here and
   nobody has to trim a file by hand. */
.figure.cinema img{ aspect-ratio:16/9; }
.figure.tall img{ aspect-ratio:4/3; }
@media (max-width:640px){ .figure.cinema img{ aspect-ratio:3/2; } }
@media (max-width:640px){
  .figure{ margin:44px 0; }
  .figure img{ aspect-ratio:4/3; }
}

/* =================================================================
   STORIES — "What it takes to be a Jyotirgana"
   -----------------------------------------------------------------
   One photograph, one story. The photograph and a single line are
   always visible. The whole story opens when the reader asks for it.

   WHY IT IS BUILT ON <details> AND NOT JAVASCRIPT:
   it works with the script blocked, it is readable by a screen
   reader, it opens when the reader hits ctrl+F and the match is
   inside, and it prints. None of that is true of a JS accordion.

   TO ADD A STORY: copy one <article class="story"> block, bump the
   number, change the image, the title, the hook and the words.
   ================================================================= */
.story{ padding:82px 0 0; }
.story:first-of-type{ padding-top:30px; }
.story + .story::before{
  content:""; display:block; height:1px; background:var(--line);
  max-width:var(--max); margin:0 auto 82px;
}

.story .figure{ margin:0 0 30px; }
.story .figure + .figure{ margin-top:-6px; }

.story-head{ max-width:var(--max); margin:0 auto; padding:0 26px; }
.story-n{
  font-family:var(--display); font-size:0.95rem; letter-spacing:0.3em;
  color:var(--accent); opacity:.55; display:block; margin-bottom:12px;
}
.lang-hi .story-n{ font-family:var(--deva-serif); letter-spacing:0.08em; font-size:1rem; }
.story-head h2{ font-size:clamp(1.8rem,4.6vw,2.5rem); line-height:1.2; margin-bottom:18px; }
.lang-hi .story-head h2{ font-size:clamp(1.45rem,3.8vw,1.95rem); line-height:1.55; }

/* the line that makes you open it */
.hook{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.18rem,3vw,1.5rem); line-height:1.5;
  color:var(--text); margin-bottom:0;
}
.lang-hi .hook{
  font-family:var(--deva-serif); font-style:normal;
  font-size:clamp(1.05rem,2.6vw,1.25rem); line-height:1.85;
}

details.story-body{ max-width:var(--max); margin:22px auto 0; padding:0 26px; }
details.story-body > summary{
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); cursor:pointer;
  list-style:none; display:inline-block; padding:9px 0;
  border-bottom:1px solid var(--line); transition:border-color .3s;
}
.lang-hi details.story-body > summary{
  font-family:var(--deva); font-size:0.92rem; letter-spacing:0; text-transform:none; font-weight:500;
}
details.story-body > summary::-webkit-details-marker{ display:none; }
details.story-body > summary::marker{ content:""; }
details.story-body > summary::after{ content:"  \2193"; opacity:.7; }
details.story-body[open] > summary::after{ content:"  \2191"; }
details.story-body > summary:hover{ border-bottom-color:var(--accent); }
details.story-body > summary:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

.story-text{ padding-top:26px; }
.story-text p{ font-size:1.14rem; line-height:1.86; color:var(--text); margin-bottom:1.35em; }
.lang-hi .story-text p{ font-size:1.1rem; line-height:2.05; }
.story-text p:last-child{ margin-bottom:0; }
/* the sentence the whole story was built to arrive at */
.story-text p.land{
  color:var(--accent); font-family:var(--display); font-style:italic;
  font-size:1.3rem; line-height:1.55; margin:1.6em 0;
}
.lang-hi .story-text p.land{
  font-family:var(--deva-serif); font-style:normal; font-weight:500;
  font-size:1.16rem; line-height:1.9;
}
/* something a participant actually said */
.story-text p.said{
  font-family:var(--display); font-style:italic; font-size:1.35rem;
  color:var(--text); text-align:center; margin:1.7em auto; max-width:34ch;
}
.lang-hi .story-text p.said{
  font-family:var(--deva-serif); font-style:normal; font-size:1.18rem;
  line-height:1.9; max-width:38ch;
}

@media (max-width:640px){
  .story{ padding-top:58px; }
  .story + .story::before{ margin-bottom:58px; }
}
@media print{
  details.story-body > summary{ display:none; }
  details.story-body{ display:block !important; }
  .story-text{ display:block !important; }
}

/* =================================================================
   SAVITRI — verse, and the plain speech underneath it
   -----------------------------------------------------------------
   Blank verse on a phone WILL wrap. Without help, a wrapped line
   looks like a new line of poetry and the metre falls apart. So
   every line gets a hanging indent: the continuation sits inset,
   and the reader can see at a glance that it is the same line
   still going.

   .verse    Sri Aurobindo's own words. Never edited, never trimmed.
   .verse-hi A bhāvānuvāda. A sense-rendering, NOT a translation of
             record, and it is labelled as such every single time it
             appears. Do not let these two ever look alike.
   .gloss    Ours. Plain speech. Deliberately quieter than the verse.
   ================================================================= */
.movement{ margin:0 0 66px; }
.movement:last-child{ margin-bottom:0; }

.verse{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.14rem,2.9vw,1.42rem); line-height:1.7;
  color:var(--text); margin:0 0 30px;
  padding-left:24px; border-left:2px solid var(--accent);
}
.verse p{
  color:inherit; margin:0 0 0.5em;
  padding-left:1.4em; text-indent:-1.4em;   /* the hanging indent */
}
.verse p:last-child{ margin-bottom:0; }
.lang-hi .verse{ font-family:var(--display); }  /* English original stays in Cormorant */

.verse-hi{
  font-family:var(--deva-serif); font-size:1.02rem; line-height:1.95;
  color:var(--dim); margin:0 0 30px;
  padding-right:22px; border-right:2px solid var(--line);
  border-left:none; text-align:right;
}
.verse-hi p{ color:inherit; margin:0 0 0.45em; padding-right:1.2em; text-indent:-1.2em; }
.verse-hi p:last-child{ margin-bottom:0; }
.transnote{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); opacity:.72;
  display:block; margin:0 0 10px; text-align:right;
}
.lang-hi .transnote{ font-family:var(--deva); font-size:0.8rem; letter-spacing:0; text-transform:none; }

.gloss p{ font-size:1.1rem; line-height:1.86; color:var(--dim); }
.lang-hi .gloss p{ font-size:1.06rem; line-height:2.05; }
.gloss p strong{ color:var(--text); }
/* the one sentence in a movement that has to land */
.gloss p.land{
  font-family:var(--display); font-style:italic; font-size:1.28rem;
  line-height:1.55; color:var(--accent); margin:1.5em 0;
}
.lang-hi .gloss p.land{
  font-family:var(--deva-serif); font-style:normal; font-weight:500;
  font-size:1.14rem; line-height:1.9;
}

/* the passage given whole at the end, for the reader who now wants it */
.whole{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:44px 0; margin:14px 0 0;
}
.whole .verse{ border-left:none; padding-left:0; }
.lang-hi .whole .verse-hi{ border-right:none; padding-right:0; }

/* addressed directly to somebody in trouble right now */
.right-now{
  border:1px solid var(--accent); padding:30px 28px; margin:44px 0;
}
.right-now .rn-head{
  font-family:var(--sans); font-size:0.68rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px;
}
.lang-hi .right-now .rn-head{ font-family:var(--deva); font-size:0.84rem; letter-spacing:0; text-transform:none; font-weight:500; }
.right-now p{ color:var(--text); }
.right-now p:last-child{ margin-bottom:0; }

.attrib{
  font-family:var(--sans); font-size:0.7rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); opacity:.8; margin-top:16px;
}
.lang-hi .attrib{ font-family:var(--deva); font-size:0.85rem; letter-spacing:0; text-transform:none; }

@media (max-width:600px){
  .movement{ margin-bottom:48px; }
  .verse{ padding-left:16px; }
  .verse-hi{ padding-right:14px; }
}

/* the note saying more will come */
.more-coming{
  border:1px solid var(--line); padding:30px 28px; margin-top:88px;
  text-align:center; font-size:0.96rem; color:var(--dim); line-height:1.8;
}
.more-coming strong{ color:var(--text); font-weight:500; }

/* ---------- share ----------
   Deliberately not styled like a social button. No counts, no icons,
   no brand colours. The wording asks the reader to pass it to one
   person who needs it, which is how this actually travels. */
.share{ text-align:center; }
.share .share-lead{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem,3vw,1.5rem); color:var(--text);
  max-width:32ch; margin:0 auto 26px; line-height:1.5;
}
.lang-hi .share .share-lead{
  font-family:var(--deva-serif); font-style:normal;
  font-size:clamp(1.05rem,2.8vw,1.3rem); max-width:38ch; line-height:1.8;
}
.share-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.share-note{ font-size:0.86rem; color:var(--accent); margin-top:18px; min-height:1.3em; }

/* ---------- footer ---------- */
footer{ padding:64px 26px 72px; text-align:center; border-top:1px solid var(--line); color:var(--dim); }
footer .mark{ font-family:var(--deva-serif); color:var(--accent); letter-spacing:0.12em; font-size:1.2rem; margin-bottom:14px; }
footer p{ font-size:0.86rem; margin-bottom:8px; }
footer a{ color:var(--accent); text-decoration:none; }

/* ---------- print ---------- */
@media print{
  #jg-sky{ display:none; }
  html,body{ background:#fff !important; color:#000 !important; text-shadow:none !important; }
  p,h1,h2,h3,h4,footer,.wordmark span{ color:#000 !important; text-shadow:none !important; animation:none !important; }
  .perch{ display:none; }
}


/* =================================================================
   THE LOADING SEQUENCE, AND THE MARK
   -----------------------------------------------------------------
   Darkness · mud · two lotuses · lights glittering ON the petals ·
   lights lifting off · many rising · the sunrise.

   THREE RULES IT OBEYS, BECAUSE OF WHO READS THIS SITE

   1. IT CAN NEVER TRAP ANYBODY. The whole thing is CSS and removes
      itself on a timer whether or not a single line of script runs.
      Script only tidies up afterwards. If JavaScript fails on a
      village handset, nobody is left staring at a black screen.

   2. EVERY PAGE, EVERY TIME, THREE SECONDS. Not once per visit.
      Click a story and the passage plays before the story arrives.
      The rising loops rather than finishing, so lights keep leaving
      the lotuses for as long as the screen is up and it never looks
      frozen on a slow connection.

   3. ONLY OPACITY AND TRANSFORM ANIMATE, so a weak handset does the
      work on the GPU and does not stutter.
   ================================================================= */
.jg-load{
  position:fixed; inset:0; z-index:9999; background:#05060B;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:jgOut .5s ease 3s forwards;
}
@keyframes jgOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.jg-load.gone{ animation:jgOut .45s ease forwards; }
/* The sequence now runs on EVERY page, every time. There is no
   skip rule any more. Arjun chose the ritual over the shortcut. */

.jg-stage{ position:relative; width:300px; height:250px; }

.jg-sun{
  position:absolute; left:50%; top:38%; width:230px; height:230px;
  margin:-115px 0 0 -115px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,246,218,.95) 0%, rgba(247,206,110,.5) 32%,
                             rgba(240,180,41,.14) 64%, rgba(240,180,41,0) 100%);
  opacity:0; transform:scale(.12);
  animation:jgSun 1.15s cubic-bezier(.2,.7,.3,1) 1.75s forwards,
            jgSunBreathe 5s ease-in-out 2.9s infinite;
}
@keyframes jgSun{ to{ opacity:1; transform:scale(1); } }
@keyframes jgSunBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* lights RESTING on the petals. They arrive first and never leave:
   each lotus is carrying light before it gives any away. */
.jg-rest i{
  position:absolute; left:50%; top:50%; border-radius:50%;
  width:var(--s); height:var(--s);
  margin-left:calc(var(--s) / -2); margin-top:calc(var(--s) / -2);
  background:radial-gradient(circle,#FFFDF4 0%,#FFE9A8 26%,rgba(240,180,41,0) 72%);
  opacity:0; transform:translate(var(--x),var(--y)) scale(.3);
  animation:jgSit .7s cubic-bezier(.2,.8,.3,1) var(--d) forwards,
            jgPulse 2.9s ease-in-out var(--d) infinite;
}
@keyframes jgSit{ to{ opacity:1; transform:translate(var(--x),var(--y)) scale(1); } }

/* lights that LIFT OFF. Every one starts on a lotus and travels.
   Nothing in this animation arrives from outside the frame, which
   is the entire argument of the project running as a mechanism. */
.jg-rise i{
  position:absolute; left:50%; top:50%; border-radius:50%;
  width:var(--s); height:var(--s);
  margin-left:calc(var(--s) / -2); margin-top:calc(var(--s) / -2);
  background:radial-gradient(circle,#FFFDF4 0%,#FFE9A8 26%,rgba(240,180,41,0) 72%);
  opacity:0; transform:translate(var(--ox),var(--oy)) scale(.25);
  /* THE RISING LOOPS. It does not finish and stop. Each light leaves
     a lotus, climbs, thins out and is replaced, for as long as the
     screen is up. So the sequence never looks frozen, whatever the
     connection is doing. */
  animation:jgRise var(--dur,4.6s) linear var(--d) infinite,
            jgPulse 2.5s ease-in-out var(--d) infinite;
}
@keyframes jgRise{
  0%  { opacity:0; transform:translate(var(--ox),var(--oy)) scale(.25); }
  12% { opacity:1; }
  72% { opacity:1; }
  100%{ opacity:0; transform:translate(var(--x),var(--y)) scale(1); }
}
@keyframes jgPulse{ 0%,100%{ filter:brightness(1); } 45%{ filter:brightness(1.8); } }

/* WHERE THE FLOWER STANDS. Read this before moving it.
   The mud is painted AFTER the lotuses, so the mud sits ON TOP of
   them. That is correct: a lotus grows out of mud, it does not
   float in front of it. But it means the base must sit within a
   couple of pixels of the mud line.
       base of flower above the stage floor = bottom + (height - 84)
       mud surface above the stage floor    = 54 to 64
   bottom:48px puts the base at 52px, two pixels under the lowest
   point of the mud. Lower it and the mud swallows the flowers and
   you see nothing but petal tips. */
.jg-lot{
  position:absolute; bottom:48px; width:120px; height:88px;
  transform-origin:50% 100%;
  opacity:0; transform:translateY(16px) scale(.6);
  animation:jgLot 1s cubic-bezier(.2,.8,.3,1) .58s forwards;
}
.jg-lot-r{ left:24px; }
.jg-lot-w{ right:24px; }
@keyframes jgLot{ to{ opacity:1; transform:translateY(0) scale(1); } }

.jg-mud{
  position:absolute; left:-30px; right:-30px; bottom:0; height:74px;
  background:linear-gradient(180deg,#1C120A 0%,#0E0905 55%,#050403 100%);
  clip-path:polygon(0 22%,14% 14%,30% 26%,48% 17%,66% 27%,82% 16%,100% 24%,100% 100%,0 100%);
  opacity:0; transform:translateY(14px);
  animation:jgMud .8s ease .15s forwards;
  box-shadow:0 -1px 0 rgba(240,180,41,.18);
}
@keyframes jgMud{ to{ opacity:1; transform:translateY(0); } }

.jg-word{
  margin-top:22px; font-family:var(--deva-serif); font-size:1.5rem;
  letter-spacing:.06em; color:var(--accent);
  opacity:0; animation:jgWord .8s ease 2.15s forwards;
}
@keyframes jgWord{ to{ opacity:.92; } }

/* Somebody who has told their phone to stop moving things gets the
   finished picture and a short fade, not the sequence. */
@media (prefers-reduced-motion:reduce){
  .jg-load{ animation:jgOut .4s ease 1.1s forwards; }
  .jg-sun,.jg-rest i,.jg-rise i,.jg-lot,.jg-mud,.jg-word{ animation:none !important; opacity:1 !important; }
  .jg-lot,.jg-mud{ transform:none !important; }
  .jg-rest i,.jg-rise i{ transform:translate(var(--x),var(--y)) !important; }
}

/* the mark, standing above the name in the footer */
.footer-mark{ width:64px; height:64px; display:block; margin:0 auto 14px; opacity:.9; }


/* The three lines from Book Six that state the whole argument, sitting
   on the front page just above the way through to it. */
.frontverse{ margin:44px 0 34px; }
.frontverse .verse{ font-size:clamp(1.2rem,3vw,1.5rem); margin-bottom:20px; }
.frontverse p{ font-size:1.02rem; }
.frontverse a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line); }
.frontverse a:hover{ border-bottom-color:var(--accent); }

/* ==================================================================
   LINKS IN PROSE
   ------------------------------------------------------------------
   There was no rule for this at all. A bare <a> inside a paragraph fell
   back to the browser's own dark blue, which against this near-black
   ground is close to unreadable, and gave no sign that it was a way
   through to anything. Every link in running text is now gold with a
   quiet rule under it that lights when you touch it.

   Buttons are excluded: they carry their own border and colour.
   ================================================================== */
a{ color:var(--accent); }
p a:not(.btn), li a:not(.btn), figcaption a:not(.btn), dd a:not(.btn),
.pillar a:not(.btn), .door a:not(.btn){
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease;
}
p a:not(.btn):hover, li a:not(.btn):hover, .pillar a:not(.btn):hover{
  color:var(--text); border-bottom-color:var(--accent);
}
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ==================================================================
   THE SIX PHASES
   ------------------------------------------------------------------
   Six, not four, and Dhāraṇā and Dhyāna are ONE phase and not two.
   The numbers matter: a reader should be able to see where the phase
   he is being offered sits in the whole arc.
   ================================================================== */
.pillars{ grid-template-columns:1fr; }
@media (min-width:720px){ .pillars{ grid-template-columns:repeat(2,1fr); gap:30px 40px; } }
.pillar{ position:relative; padding-top:20px; }
.pillar .phase-n{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.2em;
  color:var(--dim); display:block; margin-bottom:6px;
}
.pillar h4{ margin-bottom:2px; }
.pillar.live{ border-top-color:var(--accent); }
.pillar .here{
  display:inline-block; margin-top:10px; font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--line);
  padding:5px 10px; border-radius:2px;
}
.lang-hi .pillar .here{ font-family:var(--deva); letter-spacing:0; text-transform:none; font-size:0.82rem; }
.pillar .here:hover{ background:var(--accent); color:var(--bg); border-color:var(--accent); }

/* ==================================================================
   THE DOOR
   ------------------------------------------------------------------
   The session was a line of text in a paragraph and the eye went past
   it. A practice you are asking a man to give thirty five minutes to
   should look like an invitation, not a footnote. Three photographs
   from the practice itself, because nothing persuades like seeing the
   thing you are being asked to do.

   The photographs are `contain`, never `cover`. These are postures
   with hands and feet at the edges of the frame and they are not to be
   cropped, here or anywhere.
   ================================================================== */
.door{
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  margin:34px 0 8px; background:var(--panel);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.door:hover{ border-color:var(--accent); box-shadow:0 0 40px -18px var(--accent); }
.door-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
}
.door-strip img{
  width:100%; height:132px; object-fit:contain; display:block;
  background:#05060B; padding:6px 0;
}
@media (min-width:720px){ .door-strip img{ height:180px; } }
.door-body{ padding:22px 24px 26px; }
.door-label{
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px;
}
.lang-hi .door-label{ font-family:var(--deva); letter-spacing:0.04em; text-transform:none; font-size:0.8rem; }
.door-body h3{
  font-family:var(--deva-serif,var(--display)); font-weight:400;
  font-size:clamp(1.3rem,4.4vw,1.75rem); line-height:1.35; margin-bottom:10px; color:var(--text);
}
.door-body p{ margin-bottom:20px; max-width:56ch; }
.door-body .btn{ margin-top:2px; }

/* ==================================================================
   THE OTHER WAY IN  ·  hero-need
   ------------------------------------------------------------------
   A second door in the hero, for the reader who did not come to read.
   It is deliberately quieter than the main button and deliberately
   above everything else on the page, because somebody in trouble at
   night does not scroll. He looks once and leaves.

   The Hindi line comes first and is the larger of the two, because
   that is who is most likely to arrive in that state.
   ================================================================== */
.hero-need{ margin-top:34px; }
.hero-need a{
  display:inline-block; text-decoration:none; text-align:left;
  border:1px solid var(--line); border-radius:3px;
  padding:15px 22px; max-width:32ch;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
  /* stated here rather than inherited. This link sits on the darkest
     panel on the site, and if any rule above it fails to load it must
     not fall back to the browser's default blue, which is invisible
     there. Every child below restates its colour for the same reason. */
  color:var(--accent);
  border-bottom-color:var(--line);
}
.hero-need a:hover{
  border-color:var(--accent); background:rgba(240,180,41,0.05);
  transform:translateY(-1px);
}
.hero-need span{
  display:block; font-family:var(--deva-serif); font-size:1.16rem;
  line-height:1.5; color:var(--accent);
}
.hero-need b{
  display:block; font-weight:400; font-family:var(--display);
  font-style:italic; font-size:1.02rem; color:var(--text);
  margin-top:3px; opacity:.92;
}
.hero-need i{
  display:block; font-style:normal; font-family:var(--sans);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-top:10px;
}


/* ==================================================================
   NO LINK MAY EVER BE BLUE
   ------------------------------------------------------------------
   The hero link was rendering in the browser's default blue on the
   dark panel, where it is effectively invisible. The cause was that
   it relied on a rule further down the cascade for its colour.

   This block is the floor. It is last in the file so it wins, it
   names no element in particular, and it costs nothing. Buttons keep
   their own colours because they carry a border and a fill.
   ================================================================== */
a:not(.btn):not(.btn-solid):link,
a:not(.btn):not(.btn-solid):visited{ color:var(--accent); }
a:not(.btn):not(.btn-solid) b,
a:not(.btn):not(.btn-solid) span,
a:not(.btn):not(.btn-solid) i,
a:not(.btn):not(.btn-solid) u,
a:not(.btn):not(.btn-solid) s{ color:inherit; }
.hero-need a b{ color:var(--text); }
.hero-need a span{ color:var(--accent); }
.hero-need a i{ color:var(--dim); }