/* Hero C, "The page is a kundali", the default hero (see index.html).
   The hero is a North Indian chart in hairlines: outer square, both diagonals
   and the inner diamond make the twelve houses. The words sit in the centre on
   a soft paper veil; each house holds one feature. One accent, used once: the
   Lagna (house 1) outline. Motion: the chart draws itself once, then the words
   arrive. Nothing loops. */

/* C is the default hero; the head script marks ?hero=a or ?hero=b, and only
   then does C step aside. Without JS, C shows (lines need JS, words do not). */
html:not(.hero-a-on):not(.hero-b-on) main > .hero { display:none !important; }
html.hero-a-on .hc, html.hero-b-on .hc { display:none !important; }

/* A quiet invocation above every hero. Sanskrit stays visible in both languages. */
.hero-invocation { display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px 20px 8px; color:var(--tint); text-align:center; }
.invocation-ganesha { display:block; width:48px; height:45px; overflow:visible; }
.invocation-mantra { margin:0; color:color-mix(in srgb,var(--tint) 65%,var(--fg)); font:400 17px/1.45 'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif; letter-spacing:.025em; }
[data-theme$="dark"] .invocation-ganesha { filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tint) 12%,transparent)); }
@media(min-width:769px) {
  .hero-invocation { position:relative; width:fit-content; margin:-60px auto 0; }
}
@media(max-width:768px) {
  .hero-invocation { padding:4px 16px 8px; gap:4px; }
  .invocation-ganesha { width:44px; height:41px; }
  .invocation-mantra { font-size:16px; }
}

.hc {
  --ink-line:color-mix(in srgb,var(--fg) 20%,var(--bg));
  --ink-word:var(--fg2);
  --wash:color-mix(in srgb,var(--fg) 4.5%,transparent);
  --lagna:var(--tint);
  --e:cubic-bezier(.2,.7,0,1);
  --hc-h:clamp(600px, calc(100svh - 72px), 1040px);
  /* Typing finishes before 2s; hold the completed word briefly. */
  --hc-intro-end:2.2s;
  --mala-base:#8B4828; --mala-light:#C17B45; --mala-shadow:#4B2518;
  --mala-ridge:#5D301E; --mala-thread:#D46720; --mala-thread-light:#F6C26A;
  position:relative; margin:0 auto;
  width:min(calc(100% - 2 * var(--gutter)), calc(var(--maxw) - 2 * var(--gutter)));
  height:var(--hc-h);
}
[data-theme="yellow-light"] .hc { --lagna:#C98A06; }
[data-theme$="dark"] .hc { --ink-line:color-mix(in srgb,var(--fg) 22%,var(--bg)); --wash:color-mix(in srgb,var(--fg) 5.5%,transparent); }
[data-theme$="dark"] .hc { --mala-base:#A96339; --mala-light:#D6985B; --mala-shadow:#58301F; --mala-ridge:#62351D; --mala-thread:#F19A45; --mala-thread-light:#FFD38A; }

/* ---------- The chart ---------- */
.hc-stage { position:absolute; left:0; right:0; top:24px; bottom:32px; -webkit-tap-highlight-color:transparent; }
.hc-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hc-lines .hl { fill:none; stroke:var(--ink-line); stroke-width:1; stroke-linecap:square; }
.hc-lines .lagna { fill:none; stroke:var(--lagna); stroke-width:1.25; stroke-linejoin:miter; }
/* The four lines from the corners of the screen to the chart's corners
   (hero-c.js): they arrive with the intro, then stay as a faint hairline. */
.hc-lines .edge { fill:none; stroke:var(--thread,var(--tint)); stroke-width:1; stroke-linecap:round; opacity:.16; pointer-events:none; }
[data-theme$="dark"] .hc-lines .edge { opacity:.2; }
.hc-lines .hit { fill:transparent; stroke:none; transition:fill .18s ease; cursor:pointer; }
.hc-lines .hit.on { fill:var(--wash); }

/* House labels: number, line icon, one word in small caps. */
.hc-houses { position:absolute; inset:0; z-index:4; pointer-events:none; }
.hc-h {
  position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:8px 8px; border:0; border-radius:2px; background:none; cursor:pointer; pointer-events:auto;
  color:var(--ink-word); font:inherit; -webkit-tap-highlight-color:transparent;
  transition:color .18s ease;
}
.hc-h i { font:400 12px/1 'Noto Serif',Georgia,serif; font-style:normal; color:var(--muted); letter-spacing:.02em; font-variant-numeric:lining-nums; }
.hc-h svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.hc-h b { font:500 11px/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; padding-left:.16em; }
html[data-indic] .hc-h b { font-size:13px; letter-spacing:.01em; padding-left:0; font-weight:600; text-transform:none; }
.hc-h.on, .hc-h:hover { color:var(--fg); }
.hc-h.on i { color:var(--fg); }
.hc-h:focus-visible { outline:1px solid var(--fg); outline-offset:4px; }
.hc-h[data-h="1"] i { color:var(--lagna); }

/* Positions as shares of the chart. Triangles sit at their centroids; the four
   diamonds keep clear of the words in the middle. */
.hc-h[data-h="1"]  { --x:.5;    --y:.115; }
.hc-h[data-h="2"]  { --x:.25;   --y:.085; }
.hc-h[data-h="3"]  { --x:.1;    --y:.25; }
.hc-h[data-h="4"]  { --x:.105;  --y:.5; }
.hc-h[data-h="5"]  { --x:.1;    --y:.75; }
.hc-h[data-h="6"]  { --x:.25;   --y:.915; }
.hc-h[data-h="7"]  { --x:.5;    --y:.9; }
.hc-h[data-h="8"]  { --x:.75;   --y:.915; }
.hc-h[data-h="9"]  { --x:.9;    --y:.75; }
.hc-h[data-h="10"] { --x:.895;  --y:.5; }
.hc-h[data-h="11"] { --x:.9;    --y:.25; }
.hc-h[data-h="12"] { --x:.75;   --y:.085; }

/* ---------- Canvases ----------
   The drawing behind the words is a pluggable canvas (html[data-canvas], set
   before first paint; see index.html and hero-c.js). Every canvas fills the
   same rectangle, so a swap never moves anything.
   kundali-north: the default above. kundali-south: the South Indian square
   chart, signs fixed, Lagna in Aries, houses running clockwise.
   diya: Diwali, a toran along the top, rangoli in the corners and a row of
   diyas lit one by one. No house labels; the words stay as they are. */
[data-canvas="kundali-south"] .hc-h[data-h="1"]  { --x:.375; --y:.125; }
[data-canvas="kundali-south"] .hc-h[data-h="2"]  { --x:.625; --y:.125; }
[data-canvas="kundali-south"] .hc-h[data-h="3"]  { --x:.875; --y:.125; }
[data-canvas="kundali-south"] .hc-h[data-h="4"]  { --x:.875; --y:.375; }
[data-canvas="kundali-south"] .hc-h[data-h="5"]  { --x:.875; --y:.625; }
[data-canvas="kundali-south"] .hc-h[data-h="6"]  { --x:.875; --y:.875; }
[data-canvas="kundali-south"] .hc-h[data-h="7"]  { --x:.625; --y:.875; }
[data-canvas="kundali-south"] .hc-h[data-h="8"]  { --x:.375; --y:.875; }
[data-canvas="kundali-south"] .hc-h[data-h="9"]  { --x:.125; --y:.875; }
[data-canvas="kundali-south"] .hc-h[data-h="10"] { --x:.125; --y:.625; }
[data-canvas="kundali-south"] .hc-h[data-h="11"] { --x:.125; --y:.375; }
[data-canvas="kundali-south"] .hc-h[data-h="12"] { --x:.125; --y:.125; }
html:not([data-canvas^="kundali"]) .hc-houses, html:not([data-canvas^="kundali"]) .hc-cap { display:none; }
/* South: the words sit in the open middle four cells, centred on them. */
@media (min-width:769px) { [data-canvas="kundali-south"] .hc-copy { top:50%; } }
.hc-eyebrow .ev-diya, .hc-eyebrow .ev-f, html:not([data-canvas^="kundali"]) .hc-eyebrow .ev-base { display:none; }
[data-canvas="diya"] .hc-eyebrow .ev-diya,
[data-canvas="navratri"] .ev-f[data-f="navratri"], [data-canvas="dussehra"] .ev-f[data-f="dussehra"],
[data-canvas="holi"] .ev-f[data-f="holi"], [data-canvas="karwa-chauth"] .ev-f[data-f="karwa-chauth"],
[data-canvas="chhath"] .ev-f[data-f="chhath"], [data-canvas="sankranti"] .ev-f[data-f="sankranti"],
[data-canvas="shivratri"] .ev-f[data-f="shivratri"], [data-canvas="ganesh-chaturthi"] .ev-f[data-f="ganesh-chaturthi"],
[data-canvas="janmashtami"] .ev-f[data-f="janmashtami"], [data-canvas="raksha-bandhan"] .ev-f[data-f="raksha-bandhan"],
[data-canvas="onam"] .ev-f[data-f="onam"], [data-canvas="ugadi-gudi-padwa"] .ev-f[data-f="ugadi-gudi-padwa"],
[data-canvas="eid"] .ev-f[data-f="eid"], [data-canvas="christmas"] .ev-f[data-f="christmas"],
[data-canvas="new-year"] .ev-f[data-f="new-year"], [data-canvas="purnima"] .ev-f[data-f="purnima"],
[data-canvas="pitru-paksha"] .ev-f[data-f="pitru-paksha"], [data-canvas="eclipse"] .ev-f[data-f="eclipse"],
[data-canvas="transit"] .ev-f[data-f="transit"],
[data-canvas="dev-uthani"] .ev-f[data-f="dev-uthani"],
[data-canvas="vasant-panchami"] .ev-f[data-f="vasant-panchami"],
[data-canvas="ram-navami"] .ev-f[data-f="ram-navami"],
[data-canvas="hanuman-jayanti"] .ev-f[data-f="hanuman-jayanti"],
[data-canvas="akshaya-tritiya"] .ev-f[data-f="akshaya-tritiya"],
[data-canvas="rath-yatra"] .ev-f[data-f="rath-yatra"],
[data-canvas="teej"] .ev-f[data-f="teej"],
[data-canvas="nag-panchami"] .ev-f[data-f="nag-panchami"] { display:inline; }
.hc-lines .dl { fill:none; stroke:var(--ink-line); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .ac { fill:none; stroke:var(--lagna); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .flame { fill:color-mix(in srgb,var(--lagna) 22%,transparent); stroke:var(--lagna); stroke-width:1.25; stroke-linejoin:round; }
.hc-lines .dot { fill:var(--ink-line); stroke:none; }
.hc-lines .flame { transform-box:fill-box; transform-origin:50% 100%; }
/* Festival canvases (hero-fest.js): a lighter ink for the far layer, a
   firmer one for the focal pieces, the accent at two weights, and the
   festival's own colour (--fc, set per canvas from the festival tokens in
   site-theme.css) for strokes (.fs), soft fills (.ff) and glows (.fg). */
.hc-lines .dl2 { fill:none; stroke:var(--ink-line); stroke-width:.8; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.hc-lines .dl3 { fill:none; stroke:color-mix(in srgb,var(--fg) 38%,var(--bg)); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .ac2 { fill:none; stroke:var(--lagna); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .fs { fill:none; stroke:var(--fc,var(--lagna)); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .fs2 { fill:none; stroke:var(--fc,var(--lagna)); stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.hc-lines .ff { fill:color-mix(in srgb,var(--fc,var(--lagna)) 18%,transparent); stroke:var(--fc,var(--lagna)); stroke-width:1.2; stroke-linejoin:round; }
.hc-lines .ff2 { fill:color-mix(in srgb,var(--fc,var(--lagna)) 8%,transparent); stroke:var(--fc,var(--lagna)); stroke-width:1.2; }
/* The dancers wear the selected theme's accent; the Devi symbol retains
   the Navratri day's colour. Both update through inherited theme tokens. */
.hc-lines .nav-dancer { --fc:var(--tint); }
.hc-lines .nav-dancer .dl2, .hc-lines .nav-dancer .dl3 { stroke:var(--fc); }
.hc-lines .mala-bead { stroke:var(--mala-shadow); stroke-width:.45; stroke-linejoin:round; }
.hc-lines .mala-groove { fill:none; stroke:var(--mala-ridge); stroke-width:.55; stroke-linecap:round; }
.hc-lines .mala-glint { fill:none; stroke:var(--mala-light); stroke-width:.45; stroke-linecap:round; opacity:.75; }
.hc-lines .mala-cord, .hc-lines .mala-tassel { fill:none; stroke:var(--mala-thread); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .mala-knot { fill:var(--mala-thread); stroke:var(--mala-shadow); stroke-width:.4; }
.hc-lines .mala-wrap { fill:none; stroke:var(--mala-thread-light); stroke-width:.6; stroke-linecap:round; }
.hc-lines .lf { fill:color-mix(in srgb,var(--fest-leaf) 10%,transparent); stroke:var(--fest-leaf); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .lfo { fill:none; stroke:var(--fest-leaf); stroke-width:1; stroke-linecap:round; }
.hc-lines .mod { fill:var(--bg); stroke:color-mix(in srgb,var(--fg) 45%,var(--bg)); stroke-width:1.1; stroke-linejoin:round; }
.hc-lines .pf { fill:color-mix(in srgb,var(--fc) 55%,transparent); stroke:var(--fc); stroke-width:.8; stroke-linejoin:round; }
.hc-lines .pw { fill:var(--bg); stroke:var(--ink-line); stroke-width:.8; }
.hc-lines .om { font-family:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif; font-weight:400; text-anchor:middle; dominant-baseline:central; fill:color-mix(in srgb,var(--lagna) 16%,transparent); stroke:var(--lagna); stroke-width:1.1; }
.hc-lines .shade { fill:color-mix(in srgb,var(--fc) 9%,transparent); stroke:none; }
.hc-lines .zg { font-family:'Noto Sans Symbols','Segoe UI Symbol','Apple Symbols',sans-serif; text-anchor:middle; dominant-baseline:central; fill:color-mix(in srgb,var(--fg) 45%,var(--bg)); }
.hc-lines .zg.on { fill:var(--lagna); }
.hc-lines .zr { font:600 14px var(--font-body); text-anchor:middle; dominant-baseline:central; fill:var(--lagna); }
.hc-lines .pg path, .hc-lines .pg circle { fill:none; stroke:var(--lagna); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hc-lines .dim { fill:var(--bg); stroke:none; }
.hc-lines .fcap { font:500 12px var(--font-body); letter-spacing:.04em; text-anchor:middle; dominant-baseline:central; fill:var(--muted); }
.hc-lines .fcap.on { fill:var(--lagna); }
.hc-lines .flag { fill:color-mix(in srgb,var(--fest-saffron) 78%,transparent); stroke:var(--fest-saffron); stroke-width:1.2; stroke-linejoin:round; }
/* Glows: softer where the accent is black. */
[data-theme="mono-light"] .hc-lines { --gk:.4; }
.hc-lines .heap { fill:color-mix(in srgb,var(--fc) 72%,transparent); stroke:var(--fc); stroke-width:1; stroke-linejoin:round; }
.hc-lines .bead { fill:var(--bg); stroke:color-mix(in srgb,var(--fg) 45%,var(--bg)); stroke-width:1.1; }
.hc-lines .adot { fill:var(--lagna); stroke:none; }
.hc-lines .fdot { fill:var(--fc,var(--lagna)); stroke:none; }
.hc-lines .idot { fill:var(--ink-line); stroke:none; }
.hc-lines .trail { fill:none; stroke:url(#hcf-trail); stroke-width:1.6; stroke-linecap:round; }
.hc-lines .unlit { fill:none; stroke:var(--ink-line); stroke-width:1; stroke-dasharray:2 2.5; }
[data-theme$="dark"] .hc-lines .fs, [data-theme$="dark"] .hc-lines .ff, [data-theme$="dark"] .hc-lines .ac2 { filter:drop-shadow(0 0 3px color-mix(in srgb,var(--fc,var(--lagna)) 55%,transparent)); }
.hc-lines.swap { animation:hc-in .5s ease both; }
@media (prefers-reduced-motion:reduce) { .hc-lines.swap { animation:none; } }

/* One line of benefit for the house in focus. */
.hc-cap {
  position:absolute; left:0; top:0; z-index:5; width:max-content; max-width:288px;
  padding:8px 12px; background:var(--bg); border:1px solid var(--line); border-radius:2px;
  font-size:13px; line-height:1.45; color:var(--fg2); text-align:center; text-wrap:balance;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.hc-cap.show { opacity:1; }
.hc-cap small { display:block; margin-bottom:2px; font:500 10px/1.6 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
html[data-indic] .hc-cap small { font-size:12px; letter-spacing:.02em; }

/* ---------- The words, centred in the inner diamond ---------- */
.hc-copy {
  position:absolute; left:50%; top:calc(50% - 12px); transform:translate(-50%,-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  /* A fixed box, so the web fonts arriving late cannot move the veil. */
  width:min(100%, 760px);
}
/* Paper veil: the chart's lines fade out behind the words. */
.hc-copy::before {
  content:''; position:absolute; z-index:-1; left:-13%; right:-13%; top:-26%; bottom:-26%;
  background:radial-gradient(closest-side,var(--bg) 66%,color-mix(in srgb,var(--bg) 75%,transparent) 84%,transparent 100%);
  pointer-events:none;
}
.hc-eyebrow { font:500 12px/16px var(--font-body); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); padding-left:.24em; }
/* Dhanteras / Lakshmi Puja muhurat under the Diwali greeting. */
.hc-eyebrow .ev-muh { display:block; margin-top:6px; letter-spacing:.02em; text-transform:none; font-weight:600; color:var(--tint, #F0632E); }
html[data-indic] .hc-eyebrow { font-size:14px; letter-spacing:.04em; padding-left:0; }
.hc-word, [data-theme] h1.hc-word {
  margin-top:24px;
  font-family:'Noto Serif',Georgia,serif; font-weight:700; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(56px,6.4vw,96px); line-height:1; letter-spacing:-.005em;
  color:var(--hc-ink,var(--fg)); -webkit-text-fill-color:currentColor;
  background:none; margin-right:-.005em;
}
[data-theme="white-light"] .hc-word { --hc-ink:var(--tint); }
.hc-tag { margin-top:16px; font-family:var(--font-heading); font-weight:600; font-size:clamp(20px,1.9vw,28px); line-height:1.25; color:var(--fg2); letter-spacing:-.005em; }
html[data-indic] .hc-tag { letter-spacing:0; }
.hc-stores { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; margin-top:40px; }
.hc-stores a { border-radius:12px; }
.hc-stores a:focus-visible { outline:2px solid var(--fg); outline-offset:4px; }
.hc-stat { margin-top:16px; min-height:40px; font-size:13px; line-height:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.hc-stat b { color:var(--fg2); font-weight:600; }
.hc-stat + .hc-note { margin-top:8px; }
.hc-now { display:block; margin-bottom:8px; }
.hc-live { display:inline-flex; align-items:center; gap:4px; margin-right:8px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--live, #138A4B); }
.hc-live i { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; }
@media (prefers-color-scheme:dark) { :root:not([data-theme$="light"]) .hc-live { --live:#3DDC84; } }
[data-theme$="dark"] .hc-live { --live:#3DDC84; }
@media (prefers-reduced-motion:no-preference) { .hc-live i { animation:hc-live 2s ease-out infinite; } }
@keyframes hc-live { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow:0 0 0 6px transparent; } }
/* Scroll cue: phones only (see the 768px block). */
.hc-cue { display:none; }
.hc-note { margin-top:16px; font-size:13px; line-height:16px; color:var(--muted); }
.hc-note a { color:var(--fg); text-underline-offset:3px; }
.hc-note a:focus-visible { outline:2px solid var(--fg); outline-offset:2px; border-radius:2px; }

/* ---------- Entrance: the brand settles, then its surroundings appear ---------- */
@media (prefers-reduced-motion:no-preference) {
  .hc-copy > .hc-eyebrow, .hc-copy > .hc-tag { animation:hc-up 1.2s var(--m-ease) var(--hc-intro-end) both; }
  .hc-copy > .hc-stores, .hc-copy > .hc-stat { animation:hc-after-type .8s ease var(--hc-intro-end) both; }
  .hc-stage { animation:hc-in 1.6s ease var(--hc-intro-end) both; }
  .hc-sky svg { animation:hc-in 1.6s ease var(--hc-intro-end) both; }
  .hc-copy > .hc-cue { animation:hc-in .8s ease var(--hc-intro-end) both, hc-bob 2.4s ease-in-out 3s infinite; }
  .hc-copy > .hc-cue.gone { animation:none; }
  /* House words wait for the chart to start drawing (hero-c.js adds .go). */
  html.js .hc-stage:not(.go) .hc-h { opacity:0; }
  .hc-stage.go .hc-h { animation:hc-in .8s var(--m-ease) both; animation-delay:calc(var(--hc-intro-end) + .4s + var(--n) * var(--m-stagger)); }
  .hc.paused, .hc.paused * { animation-play-state:paused !important; }
}
@keyframes hc-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes hc-after-type { from { opacity:0; visibility:hidden; } to { opacity:1; visibility:visible; } }
@media (prefers-reduced-motion:no-preference) and (max-width:768px) {
  .hc-sky .ring { animation:hc-spin 240s linear infinite; }
  .hc-sky .spin { animation:hc-spin var(--p) linear infinite; animation-delay:var(--d); }
  .hc-sky .spin.rev { animation-direction:reverse; }
  .hc-sky .up { animation:hc-spin var(--p) linear infinite reverse; animation-delay:var(--d); transform-box:fill-box; transform-origin:center; }
  .hc-sky .spin.rev .up { animation-direction:normal; }
}
.hc-sky .ring, .hc-sky .spin { transform-box:view-box; transform-origin:0 0; }
@keyframes hc-spin { to { transform:rotate(360deg); } }
@keyframes hc-bob { 0%,100% { transform:translateY(0); opacity:1; } 50% { transform:translateY(6px); opacity:.55; } }
@keyframes hc-in { from { opacity:0; } to { opacity:1; } }
.hc-h[data-h="1"] { --n:0; } .hc-h[data-h="2"] { --n:1; } .hc-h[data-h="3"] { --n:2; } .hc-h[data-h="4"] { --n:3; }
.hc-h[data-h="5"] { --n:4; } .hc-h[data-h="6"] { --n:5; } .hc-h[data-h="7"] { --n:6; } .hc-h[data-h="8"] { --n:7; }
.hc-h[data-h="9"] { --n:8; } .hc-h[data-h="10"] { --n:9; } .hc-h[data-h="11"] { --n:10; } .hc-h[data-h="12"] { --n:11; }

/* ---------- Narrow screens: words and badges first, a square chart below ---------- */
@media (max-width:980px) and (min-width:769px) {
  .hc-h b { font-size:10px; letter-spacing:.12em; }
  .hc-h svg { width:18px; height:18px; }
}
/* Phones: hero B's sky (zodiac ring, nine grahas) faint behind the words. */
.hc-sky { display:none; }
@media (max-width:768px) {
  /* Centre the copy in the clear area between each festival's artwork.
     Short screens grow naturally rather than putting art behind the text. */
  .hc { --hc-top:148px; width:auto; height:auto; padding:0 var(--gutter); }
  .hc-copy { position:relative; left:auto; top:auto; transform:none; width:auto; justify-content:center;
    min-height:calc(100vh - var(--hc-top)); min-height:calc(100svh - var(--hc-top));
    padding:var(--hc-art-top,32px) 0 var(--hc-art-bottom,220px); }
  .hc-copy::before { display:none; }
  .hc-lines { overflow:hidden; }
  .hc-stage, .hc-cap { display:none; }
  .hc { position:relative; }
  .hc-copy { z-index:1; }
  .hc-sky {
    display:block; position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
    width:min(calc(100vw - 8px), 560px); aspect-ratio:1; transform:translate(-50%,-50%);
    opacity:.14; color:var(--fg);
  }
  [data-theme$="dark"] .hc-sky { opacity:.2; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--tint) 45%,transparent)); }
  .hc-sky svg { width:100%; height:100%; overflow:visible; }
  .hc-sky .rc, .hc-sky .orb { fill:none; stroke:currentColor; stroke-width:.25; }
  .hc-sky .orb { stroke-width:.18; stroke-dasharray:.6 1.6; }
  .hc-sky .div, .hc-sky .tick { stroke:currentColor; stroke-width:.25; }
  .hc-sky text { fill:currentColor; font:6px/1 'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Apple Symbols',sans-serif; text-anchor:middle; dominant-baseline:central; }
  .hc-sky .gl path, .hc-sky .gl circle { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .hc-sky .gl .f { fill:currentColor; stroke:none; }
  .hc-sky .su { color:var(--tint); }
  /* Diya on phones: the toran and the lamps, faint, behind the words. */
  html:not([data-canvas^="kundali"]) .hc-sky { display:none; }
  html:not([data-canvas^="kundali"]) .hc-stage { display:block; position:absolute; inset:0; top:0; bottom:0; z-index:0; pointer-events:none; }
  html:not([data-canvas^="kundali"]) .hc-lines .dl { stroke:color-mix(in srgb,var(--fg) 30%,var(--bg)); }
  .hc-cue {
    display:grid; place-items:center; position:absolute; left:50%; bottom:16px; width:44px; height:44px; margin-left:-22px;
    border:0; border-radius:50%; background:none; color:var(--fg2); cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:opacity .3s ease;
  }
  .hc-cue svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .hc-cue:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
  .hc-cue.gone { opacity:0; pointer-events:none; }
  .hc-word, [data-theme] h1.hc-word { margin-top:16px; font-size:clamp(36px,11vw,72px); }
  .hc-tag { margin-top:8px; }
  .hc-stores { margin-top:32px; gap:12px; }
}
/* Long greeting lines stay on one line on phones. */
@media (max-width:480px) {
  [data-canvas="pitru-paksha"] .hc-eyebrow, [data-canvas="eclipse"] .hc-eyebrow, [data-canvas="transit"] .hc-eyebrow,
  [data-canvas="purnima"] .hc-eyebrow, [data-canvas="navratri"] .hc-eyebrow { font-size:11px; letter-spacing:.1em; padding-left:.1em; }
  html[data-indic][data-canvas="pitru-paksha"] .hc-eyebrow, html[data-indic][data-canvas="eclipse"] .hc-eyebrow,
  html[data-indic][data-canvas="transit"] .hc-eyebrow, html[data-indic][data-canvas="purnima"] .hc-eyebrow { font-size:13px; letter-spacing:0; }
}
@media (max-width:380px) {
  .hc .play-badge img { height:50px; }
  .hc .store-badge { height:50px; min-width:0; padding:0 14px; }
}

/* One positioning line; festival greetings keep their own seasonal slot. */
html[data-canvas^="kundali"] .hc-eyebrow{display:none}

/* Expanded activity participates in desktop flow so it cannot overlap the next section. */
@media(min-width:769px){
}