/* Homepage palette, type and navigation for Releases and Credits.
   Palette values and aa-theme identifiers match index.html. */
  [data-theme="yellow-light"] { --bg:#FFFFFF; --card:#FFFFFF; --line:#ECE6D8; --fg:#1A1A1A; --fg2:#565043; --muted:#6E6859; --tint:#B88916; --on-accent:#FFFFFF; --cosmos:55,55,55; --pa:#B88916; --btn-bg:#0B0B0C; --btn-fg:#FFFFFF; }
  [data-theme="white-light"] { --bg:#FFFFFF; --card:#FFFFFF; --line:#ECECEC; --fg:#1A1A1A; --fg2:#565043; --muted:#6B6B6B; --tint:#F0632E; --on-accent:#FFFFFF; --cosmos:55,55,55; --pa:#FB8C3A; --btn-bg:#0B0B0C; --btn-fg:#FFFFFF; }
  [data-theme="mono-light"]   { --bg:#FFFFFF; --card:#FFFFFF; --line:#E6E6E6; --fg:#0A0A0A; --fg2:#4A4A4A; --muted:#6B6B6B; --tint:#0A0A0A; --on-accent:#FFFFFF; --cosmos:40,40,40;   --pa:#EDEDED; --btn-bg:#0A0A0A; --btn-fg:#FFFFFF; }
  [data-theme="yellow-dark"]  { --bg:#0B0B0C; --card:#151515; --line:#242424; --fg:#F4F4F4; --fg2:#BDBDBD; --muted:#7C7C7C; --tint:#F5B93A; --on-accent:#0B0B0C; --cosmos:225,225,225; --pa:#F5B93A; --btn-bg:#FAFAFA; --btn-fg:#0B0B0C; }
  [data-theme="mono-dark"]    { --bg:#0A0A0A; --card:#141414; --line:#262626; --fg:#FAFAFA; --fg2:#C8C8C8; --muted:#7A7A7A; --tint:#FAFAFA; --on-accent:#0A0A0A; --cosmos:235,235,235; --pa:#EDEDED; --btn-bg:#FAFAFA; --btn-fg:#0A0A0A; }
  /* Tint fill: yellow->orange gradient for the yellow themes, solid for mono */
  [data-theme="yellow-light"] { --tint-grad:linear-gradient(110deg,#B88916 0%,#C4961C 55%,#BE861A 100%); }
  [data-theme="yellow-dark"] { --tint-grad:linear-gradient(100deg,#FACC15 0%,#FB923C 55%,#EAB308 100%); }
  [data-theme="white-light"] { --tint-grad:linear-gradient(100deg,#FB8C3A 0%,#F0632E 55%,#E4551F 100%); }
  [data-theme="mono-light"], [data-theme="mono-dark"] { --tint-grad:var(--tint); }
:root {
  --font-body:'Inter','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Oriya','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Malayalam',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-heading:'Noto Serif',Georgia,serif;
  --soft:color-mix(in srgb,var(--tint) 6%,var(--bg));
  --accent-soft:color-mix(in srgb,var(--tint) 13%,var(--bg));
  --status-good:#177245;
  --status-bad:#b03c30;
  --status-warn:#94610c;
  --status-good-bg:color-mix(in srgb,var(--status-good) 9%,var(--bg));
  --status-bad-bg:color-mix(in srgb,var(--status-bad) 9%,var(--bg));
}
/* Festival colours for the hero canvases (hero-fest.js), named for what
   they are. Leaf green, saffron, red (kumkum, rakhi, hibiscus), sky blue and marigold serve every festival. Holi: six gulal colours, kept in every theme (B&W included), as Holi is colour. Navratri: the day colours (2027 adds pink; 2026 list: orange, white, red,
   royal blue, yellow, green, grey, purple, peacock green). Each stroke colour
   is at least 3:1 on its theme's background (white is drawn as pearl on the
   light themes, where true white would vanish). */
[data-theme$="light"] { --nav-orange:#D45D0C; --nav-white:#8C8476; --nav-red:#C62828; --nav-royal-blue:#2F55D4; --nav-yellow:#A07800; --nav-green:#1E8A3E; --nav-grey:#6B6B6B; --nav-purple:#7B3FC4; --nav-peacock-green:#0E8577; --fest-leaf:#2E7D32; --fest-saffron:#E8711A;
  --holi-pink:#D6336C; --holi-yellow:#A37A00; --holi-green:#2B8A3E; --holi-blue:#1C6FD0; --holi-orange:#D9530A; --holi-purple:#7048E8;
  --fest-red:#C62828; --fest-sky:#1C6FD0; --fest-marigold:#A87300; --nav-pink:#D6336C; }
[data-theme$="dark"] { --nav-orange:#FF9A4D; --nav-white:#F2EEE6; --nav-red:#FF6B6B; --nav-royal-blue:#7C9BFF; --nav-yellow:#F5C542; --nav-green:#5CCB7A; --nav-grey:#A8A8A8; --nav-purple:#B88AF0; --nav-peacock-green:#3CC9B5; --fest-leaf:#6CC27A; --fest-saffron:#FF9A4D;
  --holi-pink:#FF7AA8; --holi-yellow:#FFD43B; --holi-green:#69DB7C; --holi-blue:#74C0FC; --holi-orange:#FFA94D; --holi-purple:#B197FC;
  --fest-red:#FF6B6B; --fest-sky:#74C0FC; --fest-marigold:#FFC94D; --nav-pink:#FF7AA8; }
/* The footer's heart: a warm red in every theme. */
:root { --heart:#D6304F; }
[data-theme$="dark"] { --heart:#FB7185; }
/* Device frames (landing scroll story): body, glass, lens and a brushed-metal edge. */
:root { --dev-body:#0B0B0C; --dev-glass:#000000; --dev-lens:#1B2230; --dev-metal-a:#9A9DA3; --dev-metal-b:#3A3C41; --dev-metal-c:#D4D6DA; --dev-shadow:0 44px 70px -34px rgba(0,0,0,.5), 0 14px 26px -18px rgba(0,0,0,.35); }
[data-theme$="dark"] { --dev-metal-a:#B4B7BD; --dev-metal-b:#4A4D53; --dev-metal-c:#E6E8EB; --dev-shadow:0 44px 70px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04); }
[data-theme$="light"] { color-scheme:light; }
[data-theme$="dark"] { color-scheme:dark; --status-good:#91d5ac; --status-bad:#ffaaa3; --status-warn:#e9cb84; }
body { font-family:var(--font-body); letter-spacing:-.01em; -webkit-font-smoothing:antialiased; }
.site-frame { position:relative; width:100%; max-width:1240px; min-height:100vh; margin:auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.site-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; min-height:77px; padding:18px 30px; border-bottom:1px solid var(--line); background:var(--bg); }
.site-brand { display:inline-flex; align-items:center; gap:10px; font:700 17px/1.4 var(--font-body); color:var(--fg); letter-spacing:-.01em; text-decoration:none; white-space:nowrap; }
.site-brand:hover { text-decoration:none; }
.site-mark { width:28px; height:28px; display:inline-block; flex:none; background:var(--tint-grad); -webkit-mask:url('/logo-mark.png') center/contain no-repeat; mask:url('/logo-mark.png') center/contain no-repeat; }
/* Live mark (home header): the lotus's centre petal holds a tiny North Indian
   kundali that turns once every 16 s instead of the static pattern. The mark
   (logo-mark-open.png, petal left empty) and the chart are two masks painted
   with the same --tint-grad, so both follow every theme. Chart centre and size
   are fractions of the 500x466 mark drawn with contain in a square box:
   x 403/500, y .034 + 380/466 x .932 (the petal's widest point, where its
   largest inscribed circle sits, r 23/500). Side 28.5/500 is the largest whose
   turning corners (side x .707 + half the 7% line) keep 2/600 of the mark
   clear of the petal walls. Reduced motion keeps it still. */
.site-mark--live { position:relative; background:none; -webkit-mask:none; mask:none; }
.site-mark--live::before, .site-mark--live::after { content:""; position:absolute; background:var(--tint-grad); }
.site-mark--live::before { inset:0; -webkit-mask:url('/logo-mark-open.png') center/contain no-repeat; mask:url('/logo-mark-open.png') center/contain no-repeat; }
.site-mark--live::after { --k:5.7%; width:var(--k); height:var(--k); left:calc(80.6% - var(--k) / 2); top:calc(79.4% - var(--k) / 2); transform-origin:50% 50%; -webkit-mask:var(--kundali-glyph) center/100% 100% no-repeat; mask:var(--kundali-glyph) center/100% 100% no-repeat; animation:site-mark-turn 16s linear infinite; }
:root { --kundali-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M5 5H95V95H5Z M5 5L95 95 M95 5L5 95 M50 5L95 50L50 95L5 50Z' fill='none' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@keyframes site-mark-turn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .site-mark--live::after { animation:none; } }
.site-controls { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.site-nav { display:flex; align-items:center; gap:18px; }
.site-nav a { font-size:12px; font-weight:500; color:var(--fg2); text-decoration:none; padding:8px 0; }
.site-nav a:hover { color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
.site-themes { display:flex; gap:4px; border:1px solid var(--line); border-radius:999px; padding:4px; }
.site-themes button { border:1.5px solid transparent; background:transparent; border-radius:999px; width:30px; height:30px; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.site-themes button[aria-pressed="true"] { border-color:var(--tint); }
.site-chip { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(140,140,140,.42); background:#fff; }
.site-chip i { width:8px; height:8px; border-radius:50%; }
[data-site-theme="yellow-light"] i { background:#B88916; }
[data-site-theme="white-light"] i { background:#F0632E; }
[data-site-theme="mono-light"] i { background:#111; }
[data-site-theme="yellow-dark"] .site-chip,[data-site-theme="mono-dark"] .site-chip { background:#000; }
[data-site-theme="yellow-dark"] i { background:#F5B93A; }
[data-site-theme="mono-dark"] i { background:#fff; }
/* The theme dots show at every width; the old select is never shown. */
.site-theme-mobile { display:none !important; }
.site-theme-select { width:auto; min-height:38px; margin:0; padding:7px 28px 7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--fg); font:600 12px var(--font-body); }
.site-header :focus-visible { outline:2px solid var(--tint); outline-offset:4px; }
h1 { font-family:var(--font-heading); font-weight:700; color:var(--tint); }
[data-theme="yellow-light"] h1,[data-theme="yellow-dark"] h1,[data-theme="white-light"] h1 { background:var(--tint-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
h2 { font-family:var(--font-heading); font-weight:700; letter-spacing:-.02em; }
@media(max-width:760px) {
  .site-header { padding:16px 20px; gap:12px; }
  .site-controls { gap:14px; }
}
@media(max-width:580px) {
  /* Phones keep the five theme dots (32px touch targets), tighter. */
  .site-themes { gap:0; padding:2px; }
  .site-themes button { width:32px; height:32px; }
  .site-header { align-items:flex-start; }
  .site-controls { width:100%; justify-content:space-between; }
  .site-nav { gap:16px; }
}
@media(prefers-reduced-motion:no-preference) {
  body { transition:background .3s ease,color .3s ease; }
}

/* Keep the light gold invocation and accents on the same readable gold. */
[data-theme="yellow-light"] .invocation-mantra { color:var(--tint); }

/* Turmeric gold with a pale manuscript-paper wash. */
[data-theme="yellow-light"] { --soft:#FCF7E9; --accent-soft:#F3E7C5; }