/* Devam home page: the universe of stories, in night and gold (and, on request, in the colours of Holi). */
:root {
  --night: #05040b;
  --panel: rgba(11, 9, 22, 0.86);
  --gold: #f2c14e;
  --gold-2: #ffdf9a;
  --saffron: #ff7a1a;
  --red: #ff5a3d;
  --mint: #a8f0dc;
  --text: #f6f0e6;
  --muted: #d4cab8;   /* lighter since 11 October 2026: easier to read on the night sky */
  --line: rgba(242, 193, 78, 0.26);
  --serif: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --deva: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif;
  --tamil: 'Tiro Tamil', 'Noto Serif Tamil', serif;
  --gut: clamp(16px, 5vw, 72px);
}
html[data-palette="holi"] { --mint: #44e6a2; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); color: var(--text); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.6; background: var(--night); overflow-x: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the drawing is as tall as the screen with a phone's address bar hidden, so the bar sliding in or out never stretches it */
#cosmos { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.shade { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(130% 95% at 50% 45%, transparent 58%, rgba(5, 4, 11, 0.8) 100%); }
html.no-webgl #cosmos { display: none; }
html.no-webgl body { background:
  radial-gradient(1px 1px at 20% 30%, #ffdf9a 50%, transparent 51%) 0 0 / 180px 180px,
  radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%) 0 0 / 230px 230px,
  radial-gradient(60% 50% at 70% 40%, rgba(242, 193, 78, 0.18), transparent 70%), var(--night); }

/* Header */
header.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gut); transition: background 0.4s; }
header.top.solid { background: linear-gradient(rgba(5, 4, 11, 0.92), rgba(5, 4, 11, 0)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { height: 26px; width: auto; }
.brand .word { height: 22px; width: auto; }
header nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); font-size: 14px; }
header nav a { text-decoration: none; color: var(--text); opacity: 0.86; }
header nav a:hover { opacity: 1; color: var(--gold-2); }
header nav .login { opacity: 1; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; }
@media (max-width: 640px) { header nav a:not(.login) { display: none; } }

main { position: relative; z-index: 2; }
.scene { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
/* Marcellus comes in one weight only. A thin outline in the letter's own colour makes it a semi-bold, so headings
   stand out against the night sky and the colours (11 October 2026); the Devanagari lines get a lighter one. */
h1, h2, h3, .cap.step .who, .worlds li b, .course b, .poster .plate b, .row-label, .puja-next-h, .big-num, .tie-h, .card-title,
#truth .en, .tagline p, .wisdom-list .w-today, .kcard .pic b, .lbl.big, .lbl.god-name {
  -webkit-text-stroke: 0.028em currentColor; paint-order: stroke fill; }
.cap.step .verse, #truth .sa, .wisdom-list .w-script { -webkit-text-stroke: 0.016em currentColor; paint-order: stroke fill; }
h2 { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.06; }
.gold { color: var(--gold); }
.kick { font-size: 14px; color: var(--gold); margin-bottom: 10px; }
.sub { color: var(--muted); margin-top: 12px; max-width: 58ch; font-size: clamp(15px, 1.15vw, 17px); }
.wrap { width: min(1180px, calc(100% - 2 * var(--gut))); margin: 0 auto; }

/* Buttons */
.btn { font: 500 15px/1 var(--sans); color: #1a1205; background: var(--gold); border: 0; border-radius: 999px; padding: 15px 24px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.2s, background 0.2s; }
.btn:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.ghost { background: transparent; color: var(--gold-2); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--gold); }

/* 1. Hero */
#hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gut) 11vh; }
.hero-copy { max-width: 640px; }
h1 { font-size: clamp(44px, 7.4vw, 108px); line-height: 0.98; }
h1 span { display: block; }
.lede { margin-top: 22px; max-width: 540px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17.5px); }
.now-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 14px; text-decoration: none; border-radius: 16px;
  background: rgba(11, 9, 22, 0.66); border: 1px solid var(--line); transition: border-color 0.2s, transform 0.2s; }
.chip:hover { border-color: var(--gold); transform: translateY(-2px); }
.chip b { display: block; font-weight: 500; font-size: 14.5px; line-height: 1.3; }
.chip small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); flex: none; }
.dot.red { background: var(--red); box-shadow: 0 0 12px var(--red); }
.dot.green { background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-cue span { width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 760px) {
  #hero { padding-bottom: 9vh; }
  .scroll-cue { display: none; }
  .now-strip { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); scrollbar-width: none; }
  .now-strip::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
  h1 { font-size: 42px; }
  .lede { font-size: 14.5px; }
}

/* 2. The thread */
#thread { height: 620vh; }
.cap { position: absolute; left: var(--gut); bottom: 18vh; max-width: 480px; opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease; pointer-events: none; }
.cap.on { opacity: 1; transform: none; pointer-events: auto; }
.cap h2 { margin-bottom: 14px; }
.cap p { color: var(--muted); font-size: clamp(15px, 1.25vw, 18px); }
.cap.step .who { font-family: var(--serif); font-size: clamp(34px, 4.4vw, 60px); line-height: 1; color: var(--gold); margin-bottom: 14px; }
.cap.step .what { color: var(--text); font-size: clamp(16px, 1.35vw, 19.5px); line-height: 1.55; }
.cap.step .verse { margin-top: 16px; font-family: var(--deva); font-size: clamp(19px, 1.7vw, 24px); color: var(--gold-2); }
.cap.step .verse small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.cap.outro h2 { max-width: 15ch; }
.cap.outro .btn { margin-top: 10px; }
.trail { position: absolute; left: var(--gut); right: var(--gut); bottom: 6vh; list-style: none; display: flex; align-items: center; opacity: 0; transition: opacity 0.5s; }
.trail.on { opacity: 1; }
.trail li { flex: 1; position: relative; font-size: 12px; color: var(--muted); padding-top: 18px; white-space: nowrap; }
.trail li::before { content: ''; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); background: var(--night); }
.trail li::after { content: ''; position: absolute; top: 8px; left: 12px; right: 4px; height: 1px; background: var(--line); }
.trail li:last-child { flex: none; }
.trail li:last-child::after { display: none; }
.trail li.done { color: var(--gold-2); }
.trail li.done::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
.trail li.done::after { background: var(--gold); }
@media (max-width: 760px) {
  .cap { left: 16px; right: 16px; bottom: 15vh; max-width: none; padding: 18px; border-radius: 18px; background: linear-gradient(rgba(5, 4, 11, 0), rgba(5, 4, 11, 0.7) 30%); }
  .trail li { font-size: 0; }
  .trail { bottom: 7vh; left: 16px; right: 16px; }
}

/* 3. Gods */
#gods { height: 280vh; }
.gods-copy { position: absolute; left: var(--gut); top: 16vh; max-width: 520px; transition: opacity 0.5s; }
.gods-copy p { margin-top: 16px; color: var(--muted); font-size: clamp(15px, 1.2vw, 17.5px); }
@media (max-width: 760px) { .gods-copy { top: 12vh; right: 16px; } .gods-copy p { font-size: 14.5px; } }

/* 4. Worlds */
#worlds { height: 380vh; }
.worlds-copy { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); max-width: 480px; }
.worlds { list-style: none; margin: 26px 0; }
.worlds li { padding: 10px 0; border-top: 1px solid rgba(242, 193, 78, 0.14); color: var(--muted); transition: color 0.4s; }
.worlds li b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; transition: color 0.4s; }
.worlds li span { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.55; transition: max-height 0.6s, opacity 0.5s, margin 0.5s; }
.worlds li.on { color: var(--text); }
.worlds li.on b { color: var(--gold); }
.worlds li.on span { max-height: 120px; opacity: 1; margin-top: 6px; }
html[data-palette="holi"] .worlds li:nth-child(1).on b { color: #ffcf5c; }
html[data-palette="holi"] .worlds li:nth-child(2).on b { color: #ff4d9d; }
html[data-palette="holi"] .worlds li:nth-child(3).on b { color: #5aa8ff; }
html[data-palette="holi"] .worlds li:nth-child(4).on b { color: #ff8a33; }
html[data-palette="holi"] .worlds li:nth-child(5).on b { color: #44e6a2; }
@media (min-width: 761px) {
  #worlds .sticky::before, #gods .sticky::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 56%; pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 4, 11, 0.86), rgba(5, 4, 11, 0.5) 55%, rgba(5, 4, 11, 0)); }
  #gods .sticky::before { width: 100%; height: 42%; bottom: auto; background: linear-gradient(rgba(5, 4, 11, 0.8), rgba(5, 4, 11, 0)); }
}
@media (max-width: 760px) {
  .worlds-copy { top: auto; bottom: 6vh; transform: none; right: 16px; padding: 18px; border-radius: 18px; background: rgba(5, 4, 11, 0.72); }
  .worlds li { padding: 6px 0; }
  .worlds li b { font-size: 21px; }
  .worlds-copy h2 { font-size: 26px; }
  .worlds-copy .btn { padding: 12px 18px; font-size: 14px; }
}

/* Plain sections sit over a dimmed universe */
.plain { position: relative; z-index: 2; }
#puja, #app, #stories, #truth { background: rgba(5, 4, 11, 0.78); }
#puja { padding: 18vh 0 14vh; background: linear-gradient(rgba(5, 4, 11, 0), rgba(5, 4, 11, 0.82) 16%, rgba(5, 4, 11, 0.82) 84%, rgba(5, 4, 11, 0)); }

/* 5. Puja at home */
.puja-row { margin-top: 34px; }
.puja-live { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.course { position: relative; border-radius: 20px; overflow: hidden; background: #08071a; border: 1px solid rgba(242, 193, 78, 0.18); text-decoration: none; }
.course canvas { width: 100%; aspect-ratio: 1 / 1; display: block; }
.course .meta { padding: 14px 16px 18px; }
.course b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.course small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.course .go { margin-top: 14px; display: inline-flex; font-size: 14px; font-weight: 500; color: #1a1205; background: var(--gold); border-radius: 999px; padding: 10px 18px; }
.course .tag { position: absolute; z-index: 1; top: 12px; left: 12px; font-size: 12px; font-weight: 600; color: #1a1205; background: var(--gold); border-radius: 999px; padding: 4px 10px; }
.course.live { display: grid; grid-template-columns: 46% 1fr; align-items: center; transition: border-color 0.25s, transform 0.25s; }
.course.live:hover { border-color: var(--gold); transform: translateY(-3px); }
.course.live .art { position: relative; display: block; }
.course.live b { font-size: clamp(22px, 2.2vw, 30px); }
.course.live .meta { padding: 18px 20px; }
.puja-next-h { margin: 34px 0 12px; font-family: var(--serif); font-size: 22px; color: var(--gold-2); }
.puja-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.course.next b { font-size: 18px; }
.course.next .meta { padding: 10px 14px 14px; }
.course.more { align-self: stretch; display: flex; align-items: flex-end; background: linear-gradient(135deg, rgba(242, 193, 78, 0.14), rgba(8, 7, 26, 0.92)); }
.course.more b { color: var(--gold); }
@media (max-width: 860px) {
  .puja-live { grid-template-columns: 1fr; }
  .course.live { grid-template-columns: 42% 1fr; }
  .puja-next { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .course.live b { font-size: 20px; }
  .course.live .meta { padding: 12px 14px; }
  .course.live small { font-size: 12px; }
  .course .go { padding: 8px 14px; font-size: 13px; margin-top: 10px; }
  .course.next b { font-size: 16px; }
  .course.next small { font-size: 12px; }
}

/* 6. Temples */
#temples { height: 460vh; }
.temples-copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 32px)); text-align: center; }
.big-num { font-family: var(--serif); font-size: clamp(64px, 11vw, 168px); line-height: 0.95; color: var(--gold); opacity: 0; transition: opacity 0.6s; text-shadow: 0 0 40px rgba(242, 193, 78, 0.35); }
.big-num small { -webkit-text-stroke: 0; display: block; font-family: var(--sans); font-size: clamp(14px, 1.3vw, 18px); color: var(--muted); margin-top: 12px; }
.big-num.on { opacity: 1; }
.t-line { position: absolute; left: 0; right: 0; top: calc(100% + 20px); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s; }
.t-line.on { opacity: 1; transform: none; }
.t-note { position: absolute; left: 0; right: 0; top: calc(100% + 150px); font-size: 12.5px; color: var(--muted); opacity: 0; transition: opacity 0.6s; }
.t-note.on { opacity: 0.85; }
@media (max-width: 760px) { .temples-copy { top: 38%; } .t-line { font-size: 16px; } }

/* 7. The app */
#app { padding: 16vh 0 12vh; background: linear-gradient(rgba(5, 4, 11, 0), rgba(5, 4, 11, 0.86) 16%, rgba(5, 4, 11, 0.9)); }
.app-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.phone { width: 230px; height: 472px; border-radius: 38px; background: #000; border: 2px solid #2b2638; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 7px #120f20, 0 0 60px rgba(242, 193, 78, 0.12); }
.notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 12px; background: #000; z-index: 3; }
.screen { position: absolute; inset: 0; background: #12101c; display: flex; flex-direction: column; }
.app-top { display: flex; align-items: center; gap: 8px; padding: 34px 14px 8px; font-size: 13px; font-weight: 600; color: #fff; }
.app-top img { height: 14px; width: auto; }
.deck { position: relative; flex: 1; margin: 6px 12px 10px; }
.kcard { position: absolute; inset: 0; background: #fffaf0; border-radius: 16px; overflow: hidden; color: #2a2018; transition: transform 0.9s cubic-bezier(.2, .8, .2, 1), opacity 0.9s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.kcard .pic { position: relative; aspect-ratio: 3 / 2; background-size: cover; background-position: center; }
.kcard .pic::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); }
.kcard .pic b { position: absolute; z-index: 1; left: 10px; bottom: 8px; color: #fff; font-family: var(--serif); font-weight: 400; font-size: 17px; }
.kcard .pin { margin: 8px 10px 0; font-size: 9.5px; font-weight: 600; color: #8a5a10; }
.kcard p { margin: 4px 10px 0; font-size: 10.5px; line-height: 1.5; }
.kcard.up { transform: translateY(-115%) rotate(-4deg); opacity: 0; }
.kcard.under { transform: scale(0.92) translateY(10px); opacity: 0.7; }
.tabs { display: flex; justify-content: space-around; padding: 9px 4px 16px; font-size: 9px; color: #8e8799; border-top: 1px solid #241f33; }
.tabs .on { color: var(--gold); }
.app-copy .soon { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14.5px; }
.notify { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.notify input { flex: 1 1 220px; min-width: 0; font: 15px var(--sans); color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 999px; padding: 13px 18px; }
.notify input:focus { outline: none; border-color: var(--gold); }
.notify-msg { flex-basis: 100%; font-size: 13.5px; color: var(--mint); min-height: 1.4em; }
.notify-msg.bad { color: #ffab91; }
@media (max-width: 760px) {
  .app-wrap { grid-template-columns: 1fr; justify-items: center; }
  .app-copy { justify-self: stretch; }
  .phone { width: 206px; height: 424px; }
}

/* 8. A universe of stories */
#stories { padding: 14vh 0 12vh; overflow: hidden; }
#stories .head { margin-bottom: 36px; }
.rows { position: relative; z-index: 2; display: grid; gap: 24px; }
.row-label { padding: 0 var(--gut); font-family: var(--serif); font-size: 24px; color: var(--gold-2); line-height: 1; margin-bottom: 12px; }
.track { display: flex; gap: 14px; overflow-x: auto; padding: 4px var(--gut) 14px; scrollbar-width: none; cursor: grab; }
.track::-webkit-scrollbar { display: none; }
.poster { flex: 0 0 auto; width: clamp(140px, 14vw, 200px); position: relative; border: 1px solid rgba(242, 193, 78, 0.2); border-radius: 16px; overflow: hidden; background: #0d0b1c;
  cursor: pointer; transition: transform 0.25s, opacity 0.35s, filter 0.35s, border-color 0.25s, box-shadow 0.25s; font: inherit; color: inherit; text-align: left; padding: 0; }
.poster img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; pointer-events: none; }
.poster .plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(rgba(5, 4, 11, 0), rgba(5, 4, 11, 0.92) 45%); }
.poster .plate b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.1; color: #fff; }
.poster .plate small { display: block; font-size: 11.5px; color: var(--gold-2); line-height: 1.35; margin-top: 2px; }
.poster:hover { transform: translateY(-4px); border-color: var(--gold); }
#stories.picking .poster { opacity: 0.22; filter: grayscale(0.8); }
#stories.picking .poster.hot, #stories.picking .poster.sel { opacity: 1; filter: none; }
.poster.sel { transform: translateY(-6px) scale(1.04); border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(242, 193, 78, 0.35); }
.poster.hot { border-color: var(--gold-2); box-shadow: 0 0 24px rgba(242, 193, 78, 0.3); }
.links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.links path { fill: none; stroke-linecap: round; }
.links .l-glow { stroke: rgba(255, 190, 80, 0.55); stroke-width: 6; }
.links .l-line { stroke: #ffe2a1; stroke-width: 1.6; }
.tie { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); background: rgba(10, 8, 20, 0.96);
  border: 1px solid var(--gold); border-radius: 20px; padding: 18px 20px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.tie[hidden] { display: none; }
.tie-x { position: absolute; top: 12px; right: 12px; font: 500 12px var(--sans); color: var(--muted); background: none; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.tie-h { font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--gold); padding-right: 70px; }
.tie-b { font-size: 14.5px; margin-top: 6px; color: var(--muted); }
.tie-c { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
.tie-c span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.tie-c .tie-l { border: 0; padding: 0 4px 0 0; color: var(--muted); }

/* 9. Truth, wisdom and the tagline */
#truth { padding: 14vh 0 12vh; text-align: center; background: rgba(5, 4, 11, 0.9); }
#truth .sa { font-family: var(--deva); font-size: clamp(30px, 4.6vw, 64px); line-height: 1.3; color: var(--gold); }
#truth .roman { margin-top: 10px; font-style: italic; color: var(--muted); }
#truth .en { margin-top: 18px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); }
#truth .src { margin-top: 8px; font-size: 13px; color: var(--muted); }
.wisdom-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; text-align: left; }
.wisdom-list li { border: 1px solid rgba(242, 193, 78, 0.18); border-radius: 18px; padding: 20px 18px; background: rgba(11, 9, 22, 0.7); }
.wisdom-list .w-script { font-family: var(--deva); font-size: 19px; line-height: 1.45; color: var(--gold-2); }
.wisdom-list .w-script[lang="ta"] { font-family: var(--tamil); font-size: 17px; }
.wisdom-list .w-today { margin-top: 12px; font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.wisdom-list .w-en { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.wisdom-list .w-src { margin-top: 8px; font-size: 12px; color: var(--gold); opacity: 0.85; }
.tagline { margin-top: 72px; }
.tagline p { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; max-width: 22ch; margin: 0 auto; }
.tag-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 980px) { .wisdom-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wisdom-list { grid-template-columns: 1fr; } }

/* Footer */
.foot { position: relative; z-index: 2; background: #030208; border-top: 1px solid rgba(242, 193, 78, 0.12); padding: 34px 0 40px; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot nav { display: flex; gap: 20px; }
.foot nav a { text-decoration: none; }
.foot p { flex-basis: 100%; }

/* Labels over the universe */
#labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; font-size: 12px; line-height: 1; white-space: nowrap; color: var(--text); opacity: 0;
  padding: 3px 0 0 10px; will-change: transform, opacity; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.lbl.t-god { color: var(--gold-2); }
.lbl.t-text { color: #f4e6c8; }
.lbl.t-place { color: #ffae73; }
.lbl.t-festival { color: #ff8f7a; }
.lbl.t-history { color: #e6c49f; }
.lbl.t-wisdom { color: var(--mint); }
html[data-palette="holi"] .lbl.t-god { color: #ffd66e; }
html[data-palette="holi"] .lbl.t-place { color: #ff9a4d; }
html[data-palette="holi"] .lbl.t-festival { color: #ff6fb1; }
html[data-palette="holi"] .lbl.t-history { color: #7dbbff; }
html[data-palette="holi"] .lbl.t-wisdom { color: #5cf0b4; }
.lbl.big { font-family: var(--serif); font-size: 17px; }
.lbl.god-name { font-family: var(--serif); font-size: 18px; color: var(--gold-2); transform-origin: left top; padding: 0; }
.reticle { position: absolute; left: 0; top: 0; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  border: 1px solid rgba(255, 214, 140, 0.6); opacity: 0; transition: opacity 0.5s; box-shadow: 0 0 24px rgba(255, 190, 90, 0.2) inset; }
.reticle::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(255, 214, 140, 0.4); animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Story card */
.card { position: fixed; z-index: 40; right: 18px; top: 50%; transform: translateY(-50%); width: min(360px, calc(100% - 36px));
  background: rgba(10, 8, 20, 0.95); border: 1px solid var(--line); border-radius: 22px; padding: 24px 22px 20px; }
.card[hidden] { display: none; }
.card-x { position: absolute; top: 14px; right: 14px; font: 500 12px var(--sans); color: var(--muted); background: none; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.card-type { font-size: 12.5px; color: var(--gold); }
.card-title { font-size: 30px; line-height: 1.1; margin-top: 4px; padding-right: 70px; }
.card-blurb { margin-top: 10px; color: var(--muted); font-size: 15px; }
.card-links-h { margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.card-links button { font: 13px var(--sans); color: var(--text); background: rgba(242, 193, 78, 0.08); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.card-links button:hover { border-color: var(--gold); color: var(--gold-2); }
@media (max-width: 640px) { .card { top: auto; bottom: 12px; transform: none; right: 12px; left: 12px; width: auto; max-height: 52vh; overflow: auto; } }

/* Explore mode */
body.exploring { overflow: hidden; }
body.exploring main, body.exploring .foot { visibility: hidden; }
#explore-ui { position: fixed; z-index: 35; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
#explore-ui[hidden] { display: none; }
#explore-ui > * { pointer-events: auto; }
.explore-hint { font-size: 13px; color: var(--muted); background: rgba(5, 4, 11, 0.7); padding: 8px 14px; border-radius: 999px; }
body.exploring #cosmos { cursor: grab; }
body.exploring #cosmos:active { cursor: grabbing; }

#toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1a1530; color: var(--text); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 14px; font-size: 14px; max-width: calc(100% - 32px); }
#toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; } }