/* ============================================================
   The Holy Thirukkural — theme (ported from the reference design)
   Tamil heritage: deep maroon, gold, ivory
   ============================================================ */
body{

margin:0;

font-family:"Noto Sans Tamil",sans-serif;

background-image:url("assets/img/bg-sea-sky.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

min-height:100vh;

position:relative;

}
:root {
  --radius: 0.5rem;
  -- background-image:url("assets/img/bg-sea-sky.jpg");
  --foreground: oklch(0.22 0.04 30);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.04 30);
  --primary:  oklch(0 0 1 / 0.5);  /*  oklch(0.36 0.13 25);      maroon */
  --primary-foreground: oklch(0.985 0.012 80);
  --secondary: oklch(0.94 0.025 70);
  --secondary-foreground: oklch(0.30 0.10 30);
  --muted: oklch(0.95 0.018 75);
  --muted-foreground: oklch(0.45 0.04 40);
  --accent: oklch(0.78 0.14 78);
  --border: oklch(0.88 0.02 70);
  --input: oklch(0.92 0.02 70);
  --ring: oklch(0.36 0.13 25);
  --gold: oklch(0.74 0.15 78);
  --gold-foreground: oklch(0.22 0.04 30);
  --cream: oklch(0.98 0.018 80);

  --shadow-elegant: 0 10px 30px -12px color-mix(in oklab, var(--primary) 30%, transparent);
  --gradient-primary: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 70%, var(--gold)));
  --gradient-hero: linear-gradient(160deg,
      color-mix(in oklab, var(--primary) 92%, black) 0%,
      var(--primary) 55%,
      color-mix(in oklab, var(--primary) 60%, var(--gold)) 100%);

  --font-tamil: "Noto Serif Tamil", "Latha", serif;
  /* Tamil font appended as a glyph-level fallback so any Tamil text renders
     correctly even in elements that use the display/sans fonts. */
  --font-display: "Cormorant Garamond", "Georgia", "Noto Serif Tamil", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Serif Tamil", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-image:url("https://theholythirukkural.com/new/assets/img/bg-sea-sky.png");
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:lang(ta), .ta, .font-tamil { font-family: var(--font-tamil); }
h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.page { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1; }

.container { margin: 0 auto; width: 100%; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
.max-7xl { max-width: 80rem; }
.max-6xl { max-width: 72rem; }
.max-5xl { max-width: 64rem; }
.max-4xl { max-width: 56rem; }
.max-wide { max-width: 1500px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--gold); margin: 0;
}
.muted { color: var(--muted-foreground); }
.gold { color: var(--gold); }

/* ornament line */
.ornament-border {
  height: 2px;
  background-image: linear-gradient(90deg,
    transparent 0, var(--gold) 20%, var(--primary) 50%, var(--gold) 80%, transparent 100%);
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.header-bar {
  display: flex; height: 4rem; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 0.75rem; }
.brand-badge {
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem; flex-shrink: 0;
  border-radius: 999px; background-image: var(--gradient-primary);
  color: var(--primary-foreground); box-shadow: var(--shadow-elegant);
}
.brand-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1; color: var(--primary); }
.brand-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); }
.nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 768px) { .nav { display: flex; } }
.nav a {
  border-radius: var(--radius); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 80%, transparent); transition: all .15s;
}
.nav a:hover { color: var(--primary); background: var(--secondary); }
.nav a.active { color: var(--primary); background: var(--secondary); }

.menu-btn {
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem;
  border-radius: var(--radius); border: 1px solid var(--border); color: var(--primary);
  background: transparent; cursor: pointer;
}
@media (min-width: 768px) { .menu-btn { display: none; } }
.mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--background); }
.mobile-nav.open { display: block; }
.mobile-nav nav { display: flex; flex-direction: column; padding: 0.5rem 1rem; }
.mobile-nav a { border-radius: var(--radius); padding: 0.75rem; font-size: 0.875rem; font-weight: 500; }
.mobile-nav a:hover { background: var(--secondary); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: var(--radius); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: all .15s;
}
.btn-gold { background: var(--gold); color: var(--gold-foreground); box-shadow: var(--shadow-elegant); }
.btn-gold:hover { transform: scale(1.02); }
.btn-outline-light { border-color: color-mix(in oklab, var(--primary-foreground) 30%, transparent); color: var(--primary-foreground); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-elegant); }
.btn-primary:hover { opacity: .95; }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.btn-ghost { border: 1px solid var(--border); background: var(--card); }
.btn-ghost:hover { background: var(--secondary); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------------- Hero (background reflects the real time of day) ---------------- 
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-image: linear-gradient(180deg,
    oklch(0.33 0.11 262) 0%,
    oklch(0.46 0.13 255) 32%,
    oklch(0.64 0.12 240) 66%,
    oklch(0.82 0.07 232) 100%);
}
*/
.hero {
    /* position: relative;
    overflow: hidden;
    min-height: 40vh; */

    /* background-image:
        linear-gradient(
            180deg,
            rgba(135,206,235,0.20) 0%,
            rgba(255,255,255,0.08) 35%,
            rgba(255,255,255,0.05) 70%,
            rgba(255,255,255,0.15) 100%
        ),
        url("/assets/img/bg-sea-sky.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	
    background-attachment: fixed; */
    position: relative;
    overflow: hidden;
    min-height: 1000px;
    background: transparent !important;
}
}



/* soft daylight wash near the top of the sky */
.hero-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(70% 60% at 50% -12%, rgba(255,255,255,0.40) 0%, transparent 60%),
    radial-gradient(50% 50% at 85% 0%, rgba(255,255,255,0.22) 0%, transparent 55%);
}
/* ---------- Hero starfield (twinkles + slow drift) ---------- */
.hero-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 84%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 84%);
}
.hero-stars::before, .hero-stars::after {
  content: ""; position: absolute; inset: -10% -20%; background-repeat: no-repeat;
}
.hero-stars::before {
  background-image:
    radial-gradient(2.6px 2.6px at 1.3% 39.0%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(3.0px 3.0px at 13.5% 53.4%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(2.4px 2.4px at 41.7% 22.9%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(2.6px 2.6px at 53.8% 29.6%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(3.0px 3.0px at 58.3% 7.1%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(2.4px 2.4px at 49.1% 2.9%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(2.6px 2.6px at 16.4% 38.0%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(3.0px 3.0px at 24.4% 3.2%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(1.6px 1.6px at 56.1% 8.1%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 24.4% 31.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 50.6% 5.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 87.9% 41.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 41.1% 19.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 78.1% 46.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 7.7% 34.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 23.5% 47.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 15.8% 39.2%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 48.7% 12.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 5.0% 65.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 97.0% 8.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 44.4% 66.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 18.9% 29.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 55.0% 47.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 28.1% 11.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 98.6% 31.2%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 23.3% 38.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 33.0% 10.8%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 77.3% 24.6%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 35.0% 5.6%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 92.6% 16.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 88.4% 32.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 23.6% 42.2%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 40.2% 53.1%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 65.3% 9.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 22.4% 31.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 9.0% 3.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 41.2% 47.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 64.7% 66.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 32.5% 30.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 49.6% 30.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 83.8% 31.6%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 43.9% 18.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 23.7% 52.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 13.2% 18.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 76.7% 60.1%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 96.8% 64.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 86.0% 52.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 64.0% 38.8%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 2.4% 22.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 35.7% 15.1%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 39.4% 48.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 73.7% 18.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.6px 1.6px at 95.6% 0.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 36.0% 41.0%, rgba(255,255,255,0.95), transparent 62%);
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
  animation: starTwinkleA 4.5s ease-in-out infinite alternate, starDriftA 150s linear infinite;
}
.hero-stars::after {
  background-image:
    radial-gradient(1.0px 1.0px at 59.2% 46.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 82.4% 55.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 26.6% 29.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 22.5% 16.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 19.5% 20.1%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 96.6% 38.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 40.4% 62.8%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 88.9% 69.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 43.6% 45.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 46.3% 0.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 24.1% 16.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 0.7% 5.6%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 73.4% 61.1%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 58.4% 25.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 1.3% 11.8%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 55.2% 59.2%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 25.1% 49.6%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 78.8% 17.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 25.0% 17.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 57.5% 41.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 66.5% 45.5%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 16.1% 30.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 89.0% 25.4%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 97.7% 49.8%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 61.8% 49.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 52.9% 24.0%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 5.7% 53.4%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 95.4% 29.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 82.6% 60.8%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 24.0% 9.6%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 50.4% 63.7%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 11.3% 19.3%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.0px 1.0px at 85.7% 11.9%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(1.4px 1.4px at 60.0% 34.7%, rgba(255,255,255,0.95), transparent 62%);
  opacity: 0.85;
  animation: starTwinkleB 6s ease-in-out infinite alternate, starDriftB 110s linear infinite;
}
@keyframes starTwinkleA { from { opacity: .65; } to { opacity: 1; } }
@keyframes starTwinkleB { from { opacity: .35; } to { opacity: .9; } }
@keyframes starDriftA { from { transform: translateX(0); } to { transform: translateX(-6%); } }
@keyframes starDriftB { from { transform: translateX(0); } to { transform: translateX(-9%); } }

/* ---------- Shooting stars ---------- */
.shoot {
  position: absolute; width: 150px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.75));
  opacity: 0; z-index: 0; pointer-events: none;
}
.shoot::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  background: #fff; border-radius: 50%; box-shadow: 0 0 8px 3px rgba(255,255,255,0.85);
}
.shoot-1 { top: 10%; left: 8%;  animation: shoot1 9s ease-in infinite; animation-delay: 2s; }
.shoot-2 { top: 6%;  left: 40%; animation: shoot2 11s ease-in infinite; animation-delay: 6.5s; }
@keyframes shoot1 {
  0%   { opacity: 0; transform: rotate(33deg) translateX(-220px); }
  6%   { opacity: 1; }
  20%  { opacity: 1; }
  34%  { opacity: 0; transform: rotate(33deg) translateX(560px); }
  100% { opacity: 0; transform: rotate(33deg) translateX(560px); }
}
@keyframes shoot2 {
  0%   { opacity: 0; transform: rotate(28deg) translateX(-200px); }
  5%   { opacity: 1; }
  18%  { opacity: 1; }
  30%  { opacity: 0; transform: rotate(28deg) translateX(620px); }
  100% { opacity: 0; transform: rotate(28deg) translateX(620px); }
}

/* floating clouds — fractal-noise layers drifting for a realistic sky */
.hero-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-clouds::before, .hero-clouds::after {
  content: ""; position: absolute; inset: -25%;
  background-repeat: repeat; will-change: background-position;
}
.hero-clouds::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='520'%3E%3Cfilter%20id='c'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.0085%200.013'%20numOctaves='4'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.95%20-0.30'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 800px 520px;
  opacity: 0.80; filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  animation: cloudDriftA 28s linear infinite;
}
.hero-clouds::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='520'%20height='360'%3E%3Cfilter%20id='c'%20x='0'%20y='0'%20width='100%'%20height='100%'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.018%200.027'%20numOctaves='5'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200.75%20-0.18'/%3E%3C/filter%3E%3Crect%20width='100%'%20height='100%'%20filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 520px 360px;
  opacity: 0.45; filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: cloudDriftB 18s linear infinite;
}

@keyframes cloudDriftA { from { background-position: 0 0; } to { background-position: 800px 0; } }
@keyframes cloudDriftB { from { background-position: 0 0; } to { background-position: -520px 0; } }

/* keep hero text legible across all sky phases */
.hero-copy h1, .hero-copy .hero-sub { text-shadow: 0 1px 14px rgba(255, 215, 0, 1)}
	/* rgba(20,20,40,0.35); } */
.hero-inner {
  position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center;
  padding: 1.75rem 1rem;
}
@media (min-width: 768px) {
  .hero-inner { grid-template-columns: minmax(0,15rem) 1fr minmax(0,17rem); padding: 2.25rem 1.5rem; }
  .hero-copy { text-align: center; }
  .hero-copy .hero-rotator { justify-content: center; }
  .hero-copy .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-copy .hero-actions { justify-content: center; }
}
.hero h1 { margin: 0.5rem 0 0; font-size: 2rem; font-weight: 600; line-height: 1.1; }
@media (min-width: 640px) { .hero h1 { font-size: 2.5rem; } }
@media (min-width: 768px) { .hero h1 { font-size: 3rem; } }
.hero-eyebrow {
  font-size: 1.05rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em;
  color: #ffe49b;
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 14px rgba(255,210,120,.45);
}
@media (min-width: 640px) { .hero-eyebrow { font-size: 1.15rem; } }
.hero-sub { margin-top: 0.85rem; max-width: 36rem; font-size: 1rem; color: color-mix(in oklab, #fff 88%, transparent); }
@media (min-width: 640px) { .hero-sub { font-size: 1.05rem; } }
.hero-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-figure { position: relative; margin: 0 auto; width: 100%; max-width: 18rem; }
.hero-figure .blur {
  position: absolute; inset: -0.5rem; border-radius: 999px;
  background: var(--gold); opacity: .25; filter: blur(40px);display:none;
}
.hero-figure img {
  position: relative; aspect-ratio: 1/1; width: 100%; border-radius: 1rem;
  border: 0px solid color-mix(in oklab, var(--gold) 70%, transparent);
  object-fit: cover; box-shadow: 0 25px 50px -12px rgba(0,0,0,0);
}


/* ---------------- Sections / cards ---------------- */
.section-pad {   padding:0 1rem 4rem;}
@media (min-width: 640px) { .section-pad { padding: 4rem 1.5rem; } }
.card {
  border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1.5rem;
  transition: box-shadow .15s;
}
.card:hover { box-shadow: var(--shadow-elegant); }
.card-2xl { border-radius: 1rem; box-shadow: var(--shadow-elegant); padding: 2rem; }
.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.section-card h3 { margin: 0; font-family: var(--font-tamil); font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.section-card .label { margin-top: 0.25rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.section-card p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.section-card .count { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* Kural of the day */
.kotd-title { margin: 0.5rem 0 0; text-align: center; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; color: var(--primary); }
@media (min-width: 640px) { .kotd-title { font-size: 2.25rem; } }
.kotd-card { margin-top: 2rem; }
.badge {
  display: inline-block; border-radius: 999px; background: var(--primary);
  padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--primary-foreground);
}
.badge-gradient { background-image: var(--gradient-primary); }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.kural-ta { margin-top: 1.5rem; font-family: var(--font-tamil); font-size: 1.5rem; line-height: 1.7; color: var(--foreground); }
@media (min-width: 640px) { .kural-ta { font-size: 1.875rem; } }
.kural-en { margin-top: 1rem; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.link-strong { display: inline-block; margin-top: 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.link-strong:hover { text-decoration: underline; }
.center { text-align: center; }

/* ---------------- About ---------------- */
.prose-lead { margin-top: 1.5rem; font-size: 1.125rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.about-title { margin: 0.5rem 0 0; font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; color: var(--primary); }
@media (min-width: 640px) { .about-title { font-size: 3rem; } }
.about-card h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.about-card p { margin-top: 0.75rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.about-card ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.about-card li { margin-bottom: 0.5rem; }
.col-span-2 { grid-column: 1 / -1; }

/* ---------------- Contact ---------------- */
.contact-grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 3fr 2fr; } }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.field input, .field textarea, .input {
  margin-top: 0.25rem; width: 100%; border-radius: var(--radius); border: 1px solid var(--input);
  background: var(--background); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
}
.form-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.form-2 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-2 { grid-template-columns: 1fr 1fr; } }
.info-list { margin: 1rem 0 0; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.info-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.socials { margin-top: 1.25rem; display: flex; gap: 0.75rem; }
.social-dot {
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--primary);
}
.social-dot:hover { background: var(--secondary); }
.alert-ok { color: var(--primary); font-size: 0.875rem; }
.map-box { aspect-ratio: 16/9; width: 100%; border-radius: 1rem; border: 1px solid var(--border); background: var(--muted); display: grid; place-items: center; color: var(--muted-foreground); font-size: 0.875rem; }

/* ---------------- Footer ---------------- */
.site-footer { margin-top: 4rem; border-top: 1px solid var(--border); background: var(--primary); color: var(--primary-foreground); }
.footer-grid { display: grid; gap: 2.5rem; padding: 3rem 1rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid h3 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--gold); }
.footer-grid h4 { margin: 0; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.footer-grid p { margin-top: 0.75rem; font-size: 0.875rem; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); }
.footer-links { margin-top: 1rem; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.footer-links a { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.footer-links a:hover { color: var(--gold); }
.footer-socials { margin-top: 1rem; display: flex; gap: 0.75rem; }
.footer-social-dot {
  display: grid; place-items: center; height: 2.25rem; width: 2.25rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 25%, transparent);
}
.footer-social-dot:hover { border-color: var(--gold); color: var(--gold); }
.footer-bottom { border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 15%, transparent); }
.footer-bottom-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 1.25rem 1rem; font-size: 0.75rem; color: color-mix(in oklab, var(--primary-foreground) 75%, transparent);
}
@media (min-width: 640px) { .footer-bottom-inner { flex-direction: row; } }
.to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40;
  display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 999px;
/*  background: var(--gold); color: var(--gold-foreground); box-shadow: var(--shadow-elegant); */
  border: none; cursor: pointer; transition: transform .15s; font-size: 1.25rem;
}
.to-top:hover { transform: scale(1.05); }

/* ---------------- Kural browser (3 columns) ---------------- */
.browser { display: grid; gap: 1.25rem; padding: 1.5rem 0.75rem; }
@media (min-width: 1024px) { .browser { grid-template-columns: 300px minmax(0, 1fr) 400px; } }
.browser-mobilebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
@media (min-width: 1024px) { .browser-mobilebar { display: none; } }

.sidebar { }
.sidebar-sticky { }
@media (min-width: 1024px) { .sidebar-sticky { position: sticky; top: 5rem; } }
.hide-lg { }
@media (min-width: 1024px) { .show-lg-only { display: none; } }
@media (max-width: 1023px) { .only-lg { display: none; } }

.panel { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); }
.panel-search { border-bottom: 1px solid var(--border); padding: 0.75rem; }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; border-radius: var(--radius); border: 1px solid var(--input); background: var(--background); padding: 0.5rem 0.75rem 0.5rem 2.25rem; font-size: 0.875rem; outline: none; font-family: inherit; }
.search-wrap input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent); }
.search-wrap .ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.tree { max-height: calc(100vh - 12rem); overflow-y: auto; padding: 0.5rem; }

.sec-node { margin-bottom: 0.25rem; }
.sec-toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 0.5rem; border-radius: var(--radius); padding: 0.5rem; text-align: left;
  background: transparent; border: none; cursor: pointer; color: inherit;
}
.sec-toggle:hover { background: var(--secondary); }
.sec-name { font-family: var(--font-tamil); font-size: 1rem; font-weight: 600; color: var(--primary); display: block; }
.sec-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); display: block; }
.chap-list { margin: 0.25rem 0 0; padding-left: 0.75rem; list-style: none; border-left: 1px solid var(--border); display: none; }
.sec-node.open .chap-list { display: block; }
.chap-list li { margin: 2px 0; }
.chap-link {
  display: block; width: 100%; border-radius: var(--radius); padding: 0.375rem 0.5rem;
  text-align: left; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent);
  background: transparent; border: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chap-link:hover { background: var(--secondary); }
.chap-link.active { background: var(--secondary); color: var(--primary); font-weight: 600; }
.chap-link .num { margin-right: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
.chap-link .ta { font-family: var(--font-tamil); }
.chevron { color: var(--primary); flex-shrink: 0; transition: transform .15s; }
.sec-node.open .chevron { transform: rotate(90deg); }

/* center column */
.chapter-head { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.chapter-head .eyebrow { letter-spacing: 0.25em; }
.chapter-head h1 { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; color: var(--primary); }
@media (min-width: 640px) { .chapter-head h1 { font-size: 2.25rem; } }
.chapter-head h1 .ta { font-family: var(--font-tamil); }
.chapter-head h1 .small { margin-left: 0.75rem; font-size: 1rem; font-weight: 400; color: var(--muted-foreground); }
.chapter-head .meta { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

.kural-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.kural-item {
  display: block; width: 100%; border-radius: 0.75rem; border: 1px solid var(--border);
  background: var(--card); padding: 1.25rem; text-align: left; cursor: pointer; transition: all .15s;
  color: inherit;
}
.kural-item:hover { box-shadow: var(--shadow-elegant); }
.kural-item.active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 20%, transparent); }
.kural-item .ta { margin-top: 1rem; font-family: var(--font-tamil); font-size: 1.25rem; line-height: 1.7; color: var(--foreground); }
@media (min-width: 640px) { .kural-item .ta { font-size: 1.5rem; } }
.kural-item .en { margin-top: 0.5rem; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }

.pager { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.pager .info { font-size: 0.875rem; color: var(--muted-foreground); }

/* right column detail */
.detail { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1.25rem; box-shadow: var(--shadow-elegant); }
@media (min-width: 1024px) { .detail-wrap { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; } }
.detail .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.detail .crumb { margin-top: 0.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.detail .crumb .ta { font-family: var(--font-tamil); }
.detail .ta-couplet { margin-top: 1rem; font-family: var(--font-tamil); font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: var(--primary); }
.block { margin-top: 1rem; }
.block h3, .commentaries h3 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin: 0; }
.block p { margin-top: 0.25rem; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.commentaries { margin-top: 1.25rem; }
.commentary { margin-top: 0.75rem; border-radius: var(--radius); border-left: 2px solid var(--gold); background: color-mix(in oklab, var(--secondary) 50%, transparent); padding: 0.75rem; }
.commentary .author { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin: 0; }
.commentary p { margin: 0.25rem 0 0; font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.commentary p.ta { font-family: var(--font-tamil); }
.placeholder { border-radius: 0.75rem; border: 1px dashed var(--border); padding: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* drawer (mobile sidebar) */
.drawer-overlay { position: fixed; inset: 0; z-index: 50; display: none; }
.drawer-overlay.open { display: block; }
.drawer-overlay .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.drawer { position: absolute; inset-block: 0; left: 0; width: 85%; max-width: 24rem; background: var(--background); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); overflow-y: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 0.75rem; }
.drawer-head span { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--primary); }
.icon-btn { background: transparent; border: none; cursor: pointer; padding: 0.5rem; color: inherit; }

.thin-scroll::-webkit-scrollbar { width: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--primary) 35%, transparent); border-radius: 999px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

.search-results .group-title { padding: 0.5rem 0.5rem 0.25rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); }
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results .res-link { display: block; width: 100%; border-radius: var(--radius); padding: 0.5rem; text-align: left; font-size: 0.875rem; border: none; background: transparent; cursor: pointer; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results .res-link:hover { background: var(--secondary); }

svg.ico { width: 1rem; height: 1rem; }

/* ============================================================
   Porul Urai (detailed) + Comments — public kural page
   ============================================================ */
.porul-urai, .comments {
  margin-top: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border);
  background: var(--card); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-elegant);
}
.pu-title { margin: 0 0 1rem; font-family: var(--font-tamil); font-size: 1.6rem; color: var(--primary); }
.pu-sub { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--muted-foreground); }
.pu-body { line-height: 1.85; font-size: 1.02rem; color: var(--foreground); white-space: pre-wrap; overflow-wrap: anywhere; }
/* block elements inside reset the pre-wrap so HTML formatting still lays out normally */
.pu-body :is(p, h2, h3, h4, ul, ol, li, blockquote) { white-space: normal; }
/* collapsible Porul Urai (compact panels) with a Read more / Show less toggle */
.pu-collapse { position: relative; max-height: 18em; overflow: hidden; transition: max-height .35s ease; }
.pu-collapse.is-open { max-height: 6000px; }
.pu-collapse:not(.is-open)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em;
  background: linear-gradient(transparent, var(--card)); pointer-events: none;
}
.pu-more {
  margin-top: .5rem; background: none; border: none; color: var(--primary);
  font-weight: 600; cursor: pointer; font-size: .85rem; padding: .3rem 0;
}
.pu-more:hover { text-decoration: underline; }
.pu-body :is(h2,h3,h4) { font-family: var(--font-display); color: var(--primary); margin: 1.4rem 0 .5rem; }
.pu-body p { margin: 0 0 1rem; }
.pu-body ul, .pu-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.pu-body li { margin-bottom: .4rem; }
.pu-body blockquote { margin: 0 0 1rem; padding: .5rem 0 .5rem 1.1rem; border-left: 3px solid var(--gold); color: var(--muted-foreground); font-style: italic; }
.pu-body a { color: var(--primary); text-decoration: underline; }
.pu-body u { text-underline-offset: 2px; }

.comments-grid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .comments-grid { grid-template-columns: 1fr 360px; } }
.comment-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .85rem; background: color-mix(in oklab, var(--secondary) 35%, #fff); }
.comment-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.comment-name { font-weight: 700; color: var(--primary); }
.comment-stars { color: var(--gold); letter-spacing: 1px; }
.comment-date { color: var(--muted-foreground); font-size: .8rem; margin-left: auto; }
.comment-msg { margin: .5rem 0 0; line-height: 1.6; color: var(--foreground); white-space: pre-line; }

.comment-form { border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; background: color-mix(in oklab, var(--secondary) 30%, #fff); align-self: start; }
.comment-form h3 { margin: 0 0 1rem; font-family: var(--font-display); color: var(--primary); font-size: 1.3rem; }
.cf-row { margin-bottom: .9rem; }
.cf-row label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.cf-row input[type=text], .cf-row textarea, .cf-row .cf-select {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--input); border-radius: var(--radius);
  font: inherit; background: #fff; outline: none; resize: vertical;
}
.cf-row input:focus, .cf-row textarea:focus, .cf-row .cf-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent); }
.star-pick { display: flex; gap: .15rem; font-size: 1.6rem; }
.star-pick button { background: none; border: none; cursor: pointer; color: var(--gold); padding: 0 .05rem; line-height: 1; }
.cf-note { margin: .75rem 0 0; font-size: .8rem; color: var(--muted-foreground); }
.comment-flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-weight: 500; }
.comment-flash.ok { background: color-mix(in oklab, var(--gold) 22%, #fff); border: 1px solid var(--gold); }
.comment-flash.err { background: color-mix(in oklab, var(--destructive) 14%, #fff); border: 1px solid var(--destructive); color: var(--destructive); }

/* ============================================================
   Home-page interactive browser
   ============================================================ */
.home-browse { margin-top: 2rem; display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 1024px) { .home-browse { grid-template-columns: 320px minmax(0, 1fr); } }
.home-browse-side .panel { position: static; }
@media (min-width: 1024px) { .home-browse-side .panel { position: sticky; top: 5rem; } }
.home-browse-main { min-width: 0; }
.home-browse-main .detail { box-shadow: var(--shadow-elegant); }
.home-browse-main .pu-body { line-height: 1.8; }
.home-browse-main .pu-body :is(h2,h3,h4) { font-family: var(--font-display); color: var(--primary); margin: 1rem 0 .4rem; }
.home-browse-main .pu-body ul, .home-browse-main .pu-body ol { padding-left: 1.4rem; }

/* ============================================================
   Hero rotating phrase
   ============================================================ */
.hero-rotator {
  margin: 0.9rem 0 0; min-height: 1.6em; display: flex; align-items: center; gap: .35em;
  font-size: 1.6rem; font-weight: 600; color: var(--gold);
}
.rotator-fixed {
  text-shadow: 0 1px 12px color-mix(in oklab, var(--gold) 35%, transparent);
}
@media (min-width: 640px) { .hero-rotator { font-size: 2rem; } }
.rotator-word {
  display: inline-block; transition: opacity .35s ease, transform .35s ease;
  text-shadow: 0 1px 12px color-mix(in oklab, var(--gold) 35%, transparent);
}
.rotator-word.is-out { opacity: 0; transform: translateY(-10px); }

/* ============================================================
   Hero colorful title + live clock
   ============================================================ */
.hero-title-grad {
  font-family: var(--font-tamil); font-weight: 700; display: inline-block;
  /* warm gold — complements the blue sky and stays readable over white clouds */
  background: linear-gradient(95deg, #fff3c4 0%, #ffd86b 35%, #f6b73c 70%, #e2902a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(60,30,0,0.45)) drop-shadow(0 3px 10px rgba(20,30,60,0.55));
  line-height: 1.25; padding-bottom: 0.08em;
}
/* navbar live clock (next to Contact Us) */
.nav-clock {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem;
  font-variant-numeric: tabular-nums; letter-spacing: .03em; font-size: .8rem; font-weight: 600;
  color: var(--primary);
  background: var(--secondary);
  border: 1px solid var(--border);
  padding: .35rem .7rem; border-radius: 999px; white-space: nowrap;
}
.nav-clock::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px 1px color-mix(in oklab, var(--gold) 70%, transparent);
}

/* ============================================================
   Reviews band (above footer)
   ============================================================ */
.reviews-band {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--secondary) 45%, var(--background));
  padding: 3rem 1rem;
}
.reviews-title {
  margin: .35rem 0 1.75rem; text-align: center; font-family: var(--font-display);
  font-size: 2rem; font-weight: 600; color: var(--primary);
}
.reviews-grid { display: grid; gap: 1.25rem; max-width: 60rem; margin: 0 auto; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
.review-slot { transition: opacity .5s ease, transform .5s ease; }
.review-slot.is-fading { opacity: 0; transform: translateY(8px); }
.review-card blockquote { min-height: 4.5em; }
.review-card {
  margin: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: 0.85rem; padding: 1.5rem 1.4rem; box-shadow: var(--shadow-elegant);
  display: flex; flex-direction: column; gap: 1rem; position: relative;
}
.review-card::before {
  content: "\201C"; position: absolute; top: .2rem; left: .8rem;
  font-family: var(--font-display); font-size: 3.2rem; line-height: 1;
  color: color-mix(in oklab, var(--gold) 55%, transparent);
}
.review-card blockquote {
  margin: 0; padding-top: 1.1rem; font-size: 1rem; line-height: 1.7;
  color: var(--foreground); flex: 1;
}
.review-card figcaption {
  font-weight: 700; color: var(--primary); font-size: .92rem;
  border-top: 1px solid var(--border); padding-top: .75rem;
}

/* ---------- Language switch (EN / தமிழ்) ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: .35rem; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--background); cursor: pointer; line-height: 1;
}
.lang-opt {
  padding: 3px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--muted-foreground);
  transition: background .2s, color .2s;
}
html:not(.lang-ta) .lang-opt[data-lang="en"],
html.lang-ta .lang-opt[data-lang="ta"] {
  background: var(--primary); color: var(--primary-foreground);
}
/* Content visibility driven by the switch — English is the default */
.only-ta { display: none; }
html.lang-ta .only-ta { display: block; }
html.lang-ta .only-en { display: none; }

/* Porul Urai header with its own Tamil|English switch */
.pu-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.pu-head h3, .pu-head .pu-title { margin: 0; }
.lang-toggle-sm { margin-left: 0; }
.lang-toggle-sm .lang-opt { padding: 2px 8px; font-size: .72rem; }

/* ============================================================
   BACKGROUND VIDEOS
   1. Hero          -> assets/video/video1.mp4  (full screen, section-scoped)
   2. Rest of page  -> assets/video/video2.mp4  (fixed, one continuous bg)
   ============================================================ */

/* ---------- Hero video element ---------- */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the section, never distorts */
  object-position: center;
  z-index: 0;
  display: block;
  border: 0;
  pointer-events: none;       /* clicks pass through to the content */
}

/* ---------- 1. Hero — full-screen video 1 ---------- */
.hero.hero-video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* min-height (not height) so tall mobile content grows instead of clipping */
  min-height: 100vh;
  min-height: 100svh;         /* avoids the mobile URL-bar height jump */
  padding: 0;
  /* fallback colour keeps the text readable if the video fails to load */
  background: #0b1b2b !important;
}

/* dark overlay — keeps hero text readable over any video frame */
.hero.hero-video .hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.60) 0%,
      rgba(0, 0, 0, 0.35) 45%,
      rgba(0, 0, 0, 0.65) 100%);
}

.hero.hero-video .hero-inner {
  position: relative;
  z-index: 2;                 /* above video (0) and overlay (1) */
  width: 100%;
}

/* The animated sky (glow / clouds / stars / shooting stars) is still in the
   markup but hidden while the video is the hero background.
   Delete this one rule to layer the sky back on top of the video. */
.hero.hero-video .hero-glow,
.hero.hero-video .hero-clouds,
.hero.hero-video .hero-stars,
.hero.hero-video .shoot { display: none; }

/* video frames are busier than the old flat sky — strengthen the text shadow */
.hero.hero-video .hero-copy h1,
.hero.hero-video .hero-copy .hero-sub,
.hero.hero-video .hero-eyebrow {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.55);
}

@media (max-width: 767px) {
  .hero.hero-video .hero-inner { padding-top: 2rem; padding-bottom: 2rem; }
}

/* ---------- 2. VIDEO 2 — continuous background for the whole page ----------
   One fixed, viewport-sized video sitting behind every section after the Hero.
   Because it is fixed (not per-section), it plays continuously and never
   restarts. z-index -1 puts it above the page canvas but behind all content,
   so no section markup or layout has to change.                             */
/* Header height. The fixed video starts below this line, so the header / nav
   bar keeps its own background and never has video behind it.
   Value = .header-bar height (4rem) + .site-header 1px bottom border. */
:root { --header-h: calc(4rem + 1px); }

.page-video-bg {
  position: fixed;
  top: var(--header-h);       /* starts below the header, never behind it */
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;       /* never intercepts clicks or scrolling */
  background: #0b1b2b;        /* fallback if the video cannot load */
}

.page-video-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills any viewport, never distorts */
  object-position: center;
  display: block;
  border: 0;
}

/* dark overlay so every section's text stays readable over the video */
.page-video-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.55) 100%);
}

/* Sections after the Hero are already background-less, so the video shows
   through automatically. These two only guard against a stacking context
   trapping the fixed video. */
body:has(.page-video-bg) .page,
body.has-page-video .page { background: transparent; }

/* ---- JUDGEMENT CALL -------------------------------------------------------
   Content cards were solid white, which would hide the video almost entirely.
   Overriding --card once makes every card / panel / detail / kural item /
   commentary slightly translucent, so the video reads through while the dark
   body text stays legible.
   To go back to fully solid cards, delete this one rule.
   To show more or less video, change 0.92 (1 = solid, 0 = fully clear).      */
body:has(.page-video-bg),
body.has-page-video { --card: rgba(255, 255, 255, 0.92); }

/* ---------- Hero Rotator — transparent band over video 2 ---------- */
.rotator-band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(220px, 32vh, 380px);
  background: transparent;    /* video 2 shows through */
}

.rotator-band-inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* rotator markup + animation unchanged — only centred in its band and given a
   stronger shadow so the gold stays legible over moving video frames */
.rotator-band .hero-rotator {
  margin: 0;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}
.rotator-band .rotator-fixed,
.rotator-band .rotator-word {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.70), 0 1px 3px rgba(0, 0, 0, 0.60);
}

@media (min-width: 640px) {
  .rotator-band-inner { padding: 3.25rem 1.5rem; }
}
.hero-figure{
    position: relative;
    overflow: visible;
}

.thiruvalluvar-video{
    width: 140%;          /* Video பெருசாகும் */
    height: auto;

    position: relative;
    left: 10px;           /* Right side move */
    top: -35px;           /* Top move */

    background: transparent;
    z-index: 1;
}
.thiruvalluvar-image {
    width: 100%;
    height: auto;
    display: block;
}
.hero-copy h1 {
    margin-top: -180px; /* Increase/decrease as needed */
}
.hero-figure-2 {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-figure-2 img {
    width: 100%;
    height: 80%;
    object-fit:cover;
    border-radius: 50%;
    animation: zoomInOut 6s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes zoomInOut {
    0% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}
animation: zoomInOut 10s ease-in-out infinite;