/*
Theme Name: Kalachara
Theme URI: https://localhost/tamilai/
Author: Tamilai
Author URI: https://localhost/tamilai/
Description: A dark, gold-accented editorial theme for Tamil language & culture blogging. Inspired by classical Tamil kingdom aesthetics — deep black backgrounds, warm gold typography, and Tamil-script headings.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kalachara
*/

:root{
	--bg: #060200;
	--bg-alt: #0a0301;
	--bg-card: rgba(212,160,23,0.04);
	--bg-card-hover: rgba(212,160,23,0.08);
	--gold: #d4a017;
	--gold-bright: #f0c040;
	--gold-soft: rgba(240,192,64,0.85);
	--gold-dim: rgba(240,192,64,0.65);
	--gold-faint: rgba(240,192,64,0.4);
	--red: #c0392b;
	--border-soft: rgba(212,160,23,0.2);
	--border: rgba(212,160,23,0.35);
	--border-strong: rgba(212,160,23,0.5);
	/* Noto Sans Tamil is included as a fallback so Tamil glyphs inside a
	   Latin-primary run render in the right face, matching the live site. */
	--font-display: "Cormorant Garamond", "Noto Sans Tamil", Georgia, serif;
	--font-label: "Cinzel", "Noto Sans Tamil", Georgia, serif;
	--font-tamil: "Noto Sans Tamil", "Noto Sans", sans-serif;
	--max: 1200px;
	color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Kill any few-pixel horizontal scroll (decorative bleeds, sub-pixel rounding,
   classic scrollbar width) without trapping vertical scroll or breaking the
   sticky post sidebar — `clip` doesn't create a scroll container the way
   `hidden` does. */
html, body{ overflow-x: clip; }

body{
	margin: 0;
	max-width: 100%;
	background: var(--bg);
	color: var(--gold-bright);
	font-family: var(--font-label);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
}
.serif{ font-family: var(--font-display); }
.tamil{ font-family: var(--font-tamil); }
/* Any Tamil-script line uses Noto Sans Tamil (matches live .soul-quote / .*-tamil) */
.tamil-line{ font-family: var(--font-tamil); }

a{ color: var(--gold-bright); text-decoration: none; }
a:hover{ color: #fff; }

img{ max-width: 100%; height: auto; display: block; }

::selection{ background: var(--gold); color: #060200; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .view-toggle-btn:focus-visible{
	outline: 2px solid var(--gold-bright);
	outline-offset: 3px;
	border-radius: 2px;
}

::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }
html{ scrollbar-color: var(--border) var(--bg); }

h1,h2,h3,h4,h5,h6{
	font-family: var(--font-tamil);
	color: var(--gold-bright);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.5em;
}
h1{ font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -0.5px; }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3{ font-size: 1.4rem; }

p{ color: var(--gold-soft); font-family: var(--font-display); }

.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.eyebrow{
	display: inline-block;
	font-family: var(--font-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 16px;
}
.eyebrow.tamil{ font-family: var(--font-tamil); letter-spacing: 0.5px; }
.hero .eyebrow{
	background: rgba(212,160,23,0.1);
	border: 1px solid rgba(212,160,23,0.3);
	padding: 8px 18px;
	border-radius: 24px;
	letter-spacing: 3px;
	color: var(--gold);
	margin-bottom: 32px;
}

.divider-marks{
	text-align: center;
	color: var(--gold-faint);
	letter-spacing: 12px;
	margin: 60px 0;
	font-size: 14px;
}

/* Buttons */
.btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 16px 32px;
	border-radius: 28px;
	border: none;
	cursor: pointer;
	transition: transform .1s ease;
}
.btn-primary{
	background: linear-gradient(180deg, var(--gold) 0%, #b08510 100%);
	color: var(--bg);
	box-shadow: 0 4px 0 #8a6608, 0 8px 24px rgba(212,160,23,0.3);
}
.btn-primary:hover{ color: var(--bg); }
.btn-primary:active{ transform: translateY(2px); box-shadow: 0 2px 0 #8a6608; }
.btn-ghost{
	background: transparent; color: var(--gold);
	border: 1.5px solid rgba(212,160,23,0.5);
	padding: 14px 30px; font-weight: 600;
	transition: background .2s;
}
.btn-ghost:hover{ background: rgba(212,160,23,0.1); color: var(--gold-bright); }

/* Header — fixed bar. On desktop it's the live site's frosted translucent look;
   on mobile it's solid. The GPU-layer hints (translateZ / backface / will-change)
   keep `position: fixed` from jittering or detaching during mobile scroll —
   transform on the fixed element itself does NOT break its viewport anchoring. */
:root{ --nav-h: 73px; }
body{ padding-top: var(--nav-h); }
.site-header{
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: rgba(6,2,0,0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-soft);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}
/* Solid fallback where the frosted-glass blur isn't available. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
	.site-header{ background: var(--bg); }
}
.admin-bar .site-header{ top: 32px; }
@media screen and (max-width: 782px){
	.admin-bar .site-header{ top: 0; }
}

@media (max-width: 900px){
	.site-header{ background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.home .hero,
	.page-template-front-page .hero{ margin-top: 0; padding-top: 44px; }
}
.site-header .container{
	display: flex; align-items: center; gap: 40px;
	padding-top: 14px; padding-bottom: 14px;
}
.site-header .brand-emblem{ display: block; height: 44px; width: auto; }
.site-footer .brand-emblem{ display: block; height: 56px; width: auto; }
.primary-menu-wrap{ display: flex; align-items: center; flex: 1; min-width: 0; }
.secondary-navigation{ margin-left: auto; padding-left: 24px; }

/* Desktop: center the primary menu in the header.
   A 3-column grid with an empty first column as a "spacer" centers the
   main nav within the *remaining* space next to the secondary nav — unlike
   the old position:absolute + left:50% centering (which centered on the
   whole header, ignoring how wide the secondary nav actually was, and
   started overlapping it once Blog + the Test:First Letter badge widened
   both sides). Grid tracks never overlap, so this degrades to graceful
   crowding instead of overlapping text. */
@media (min-width: 901px){
	.primary-menu-wrap{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 20px;
	}
	.main-navigation{ grid-column: 2; justify-self: center; }
	.secondary-navigation{ grid-column: 3; justify-self: end; margin-left: 0; }
}
.site-branding{ display: flex; flex-direction: column; line-height: 1.1; }
.site-branding a{ color: var(--gold-bright); }
.brand-link{ display: flex; align-items: center; gap: 14px; }
.brand-emblem{ flex-shrink: 0; }
.brand-text{ display: flex; flex-direction: column; line-height: 1; }
.site-title{
	font-family: var(--font-label);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0;
	text-transform: none;
}
.site-title-tamil{
	font-family: var(--font-tamil);
	font-size: 12px;
	color: var(--gold);
	margin-top: 2px;
}
.primary-menu, .primary-menu ul{ list-style: none; margin: 0; padding: 0; }
.primary-menu li, .primary-menu li::marker{ list-style: none; }
.primary-menu li::marker{ content: ""; }
.primary-menu{ display: flex; align-items: center; gap: 28px; }
.primary-menu > li{ flex: 0 0 auto; }
.primary-menu a{ white-space: nowrap; }
.primary-menu a{
	font-family: var(--font-label);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(240,192,64,0.7);
	transition: color .2s;
}
.primary-menu a:hover{ color: var(--gold-bright); }

/* Active / current menu item */
.primary-menu li.is-active > a{ color: var(--gold-bright); position: relative; }
.primary-menu li.is-active > a::after{
	content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
	height: 2px; border-radius: 2px; background: var(--gold);
}

.primary-menu li.cta-nav{ margin-left: 20px; }
.primary-menu .cta-nav a{
	background: linear-gradient(180deg, var(--gold) 0%, #b08510 100%);
	color: var(--bg); padding: 10px 20px; border-radius: 24px;
	font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
	box-shadow: 0 2px 0 #8a6608;
	transition: transform .1s;
}
.primary-menu .cta-nav a:hover{ color: var(--bg); }
.primary-menu .cta-nav a:active{ transform: translateY(1px); }

/* Optional pill-button treatment for a nav item flagged `nav-cta`
   (via the kalachara_nav_left / kalachara_nav_right filters). Unused by default. */
.primary-menu li.nav-cta{ margin-left: 6px; }
.primary-menu .nav-cta a{
	background: linear-gradient(180deg, var(--gold) 0%, #b08510 100%);
	color: var(--bg);
	padding: 9px 22px;
	border-radius: 999px;
	font-weight: 700;
	box-shadow: 0 2px 0 #8a6608, 0 6px 16px rgba(212,160,23,0.28);
	transition: transform .12s ease, box-shadow .2s ease;
}
.primary-menu .nav-cta a:hover{ color: var(--bg); transform: translateY(-1px); }
.primary-menu .nav-cta.is-active > a::after{ display: none; }
.menu-toggle{ display: none; }

/* Hero */
.hero{
	padding: 100px 0 90px; text-align: center;
	position: relative; overflow: hidden;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(212,160,23,0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 30% 70%, rgba(192,57,43,0.08) 0%, transparent 50%),
		linear-gradient(180deg, #0a0301 0%, #1a0a04 50%, #2a1208 100%);
}
.hero .container{ position: relative; z-index: 2; }
/* Front page (desktop only): hero bleeds up behind the fixed translucent
   navbar, matching live. On mobile the header is sticky/in-flow, so this must
   not apply — hence the min-width guard. */
@media (min-width: 901px){
	.home .hero,
	.page-template-front-page .hero{
		margin-top: calc(-1 * var(--nav-h));
		padding-top: calc(var(--nav-h) + 56px);
	}
}
/* Compact hero for blog index / archives / search — no marketing content below it */
.hero--compact{ padding: 60px 0 40px; }
.hero--compact .container > :last-child{ margin-bottom: 0; }
@media (max-width: 720px){
	.hero--compact{ padding: 34px 0 26px; }
}
.hero-stars{ position: absolute; inset: 0; pointer-events: none; }
.star{ position: absolute; background: #f0c040; border-radius: 50%; animation: twinkle 4s infinite; }
@keyframes twinkle{
	0%, 100%{ opacity: 0.2; }
	50%{ opacity: 0.8; }
}
.moon-large{
	position: absolute; top: 100px; right: 10%;
	width: 100px; height: 100px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #f0c040, #d4a017);
	box-shadow: 0 0 60px rgba(240,192,64,0.25);
	opacity: 0.5;
}
.moon-large::after{
	content: ""; position: absolute; top: 12px; right: 12px;
	width: 70px; height: 70px; border-radius: 50%;
	background: #1a0a04; opacity: 0.5;
}
@media (max-width: 720px){
	.moon-large{ width: 60px; height: 60px; right: 8%; top: 110px; }
	.moon-large::after{ width: 42px; height: 42px; top: 8px; right: 8px; }
}
.hero-tamil-mark{
	font-family: var(--font-tamil);
	font-size: clamp(28px, 6vw, 52px);
	color: var(--gold);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 12px;
	text-shadow: 0 0 40px rgba(212,160,23,0.3);
}
.hero h1{ margin-bottom: 24px; }
.hero h1 em{ font-style: italic; color: var(--gold); }
.hero-slogan{ margin: 0 auto 32px; max-width: 600px; padding: 24px 20px; position: relative; }
.hero-slogan::before, .hero-slogan::after{
	content: ""; position: absolute; width: 60px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212,160,23,0.5), transparent);
	left: 50%; transform: translateX(-50%);
}
.hero-slogan::before{ top: 0; }
.hero-slogan::after{ bottom: 0; }
.hero .tamil-line{
	font-family: var(--font-tamil);
	font-size: clamp(22px, 3.5vw, 32px);
	color: var(--gold-bright);
	line-height: 1.4;
	margin-bottom: 10px;
	font-weight: 500;
	text-shadow: 0 0 30px rgba(212,160,23,0.25);
}
.hero-slogan-en{
	font-family: var(--font-display); font-style: italic;
	color: rgba(240,192,64,0.7); font-size: clamp(13px, 1.7vw, 16px);
	margin: 0;
}
.hero .lede{
	max-width: 640px; margin: 0 auto 48px;
	font-size: clamp(16px, 2.5vw, 22px); color: rgba(240,192,64,0.85);
}
.hero-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }
.hero-promise{
	display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
	color: rgba(240,192,64,0.6); font-family: var(--font-label);
	font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
}
.hero-promise > div{ display: flex; align-items: center; gap: 6px; }
.hero-promise .dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* Feature grid */
.section{ padding: 100px 0; }
@media (max-width: 720px){ .section{ padding: 70px 0; } }
.section-head{ text-align: center; max-width: 760px; margin: 0 auto 64px; }
/* Match the live site's section titles — sized to sit on one line */
.section-head h2{ font-size: clamp(24px, 4vw, 38px); line-height: 1.2; }
.section-head .section-title-en{
	font-family: var(--font-display); font-style: italic;
	font-size: clamp(18px, 3vw, 30px); color: var(--gold-soft);
	line-height: 1.3; margin: 8px 0 0;
}
.section-head .section-intro{
	font-family: var(--font-display);
	font-size: clamp(16px, 2vw, 20px); color: var(--gold-dim);
	line-height: 1.6; margin: 20px auto 0; max-width: 700px;
}
.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 30px; }
.card{
	background: var(--bg-card);
	border: 1px solid var(--border-soft);
	border-radius: 18px;
	padding: 32px 28px;
	transition: transform .3s, border-color .3s;
}
.card:hover{ border-color: rgba(212,160,23,0.5); transform: translateY(-4px); }
.card .icon{
	width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
	font-size: 28px; margin-bottom: 20px; border-radius: 14px;
	background: linear-gradient(135deg, rgba(212,160,23,0.2), rgba(192,57,43,0.15));
	border: 1.5px solid rgba(212,160,23,0.4);
}
.card h3{ font-family: var(--font-tamil); font-size: 20px; letter-spacing: normal; text-transform: none; color: var(--gold-bright); margin-bottom: 14px; }
.card p{ font-family: var(--font-display); font-size: 16px; color: rgba(240,192,64,0.8); margin: 0; line-height: 1.6; }

/* Blog toolbar: category filters + layout toggle */
.blog-toolbar{
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap; margin-bottom: 34px; padding-bottom: 20px;
	border-bottom: 1px solid var(--border-soft);
}
.blog-filters{ display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.blog-filter{
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 15px; border-radius: 999px;
	border: 1px solid var(--border-soft); background: rgba(212,160,23,0.04);
	font-family: var(--font-label); font-size: 11px; font-weight: 500;
	letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dim);
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.blog-filter:hover{ border-color: var(--border); color: var(--gold-bright); }
.blog-filter.is-active{ background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 700; }
.blog-filter-count{ font-size: 10px; opacity: 0.6; font-weight: 600; }
.blog-filter.is-active .blog-filter-count{ opacity: 0.8; }

.blog-view-toggle{
	display: flex; gap: 4px; flex-shrink: 0;
	background: rgba(212,160,23,0.04); border: 1px solid rgba(212,160,23,0.15);
	border-radius: 12px; padding: 4px;
}
.view-toggle-btn{
	width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 9px; background: transparent;
	color: rgba(240,192,64,0.5); cursor: pointer; transition: all .2s ease; padding: 0;
}
.view-toggle-btn:hover{ color: var(--gold-bright); }
.view-toggle-btn.is-active{ background: linear-gradient(180deg, var(--gold) 0%, #b08510 100%); color: var(--bg); box-shadow: 0 2px 0 #8a6608; }
.view-toggle-btn svg{ width: 18px; height: 18px; display: block; }
@media (max-width: 560px){
	.blog-view-toggle{ display: none; }
	.blog-filters{ width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
	.blog-filter{ flex-shrink: 0; }
}

/* Featured post (magazine-style lead story, page 1 of the blog listing only) */
.featured-post{ display: block; margin-bottom: 64px; padding-bottom: 56px; border-bottom: 1px solid rgba(212,160,23,0.15); }
.featured-media{
	position: relative; display: block; border-radius: 20px; overflow: hidden;
	min-height: 460px; background: rgba(212,160,23,0.08);
	border: 1px solid rgba(212,160,23,0.2);
}
/* No real image — don't reserve a huge empty panel for the watermark */
.featured-media:has(.featured-media-fallback){ min-height: 300px; }
.featured-media:has(.concept-glyph){ min-height: 340px; }
.featured-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.featured-media:hover img{ transform: scale(1.03); }
.featured-media-fallback{
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(ellipse at 72% 24%, rgba(212,160,23,0.14) 0%, transparent 55%),
		radial-gradient(ellipse at 24% 82%, rgba(192,57,43,0.10) 0%, transparent 55%),
		linear-gradient(135deg, #1a0a04, #0a0301);
}
.featured-media-fallback .brand-emblem{ width: 160px; height: 160px; opacity: 0.16; }
.featured-scrim{
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(6,2,0,0.95) 0%, rgba(6,2,0,0.55) 45%, transparent 75%);
}
.featured-overlay{ position: absolute; left: 0; right: 0; bottom: 0; padding: 44px; z-index: 2; }
.featured-overlay .post-card-tag{ background: rgba(212,160,23,0.18); }
.featured-overlay h2{
	font-family: var(--font-display); font-weight: 500; font-style: italic;
	font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; color: var(--gold-bright);
	margin: 14px 0 12px; text-shadow: 0 4px 24px rgba(0,0,0,0.5);
	max-width: 820px;
}
.featured-overlay .meta{ font-family: var(--font-label); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(240,192,64,0.75); margin: 0; }
.featured-excerpt{ padding-top: 28px; max-width: 680px; }
.featured-excerpt .excerpt{ font-family: var(--font-display); font-size: 19px; line-height: 1.6; color: rgba(240,192,64,0.8); margin-bottom: 24px; }
@media (max-width: 640px){
	.featured-media{ min-height: 220px; }
	.featured-media:has(.featured-media-fallback){ min-height: 180px; }
	.featured-overlay{ padding: 24px 22px; }
	.featured-media-fallback .brand-emblem{ width: 88px; height: 88px; }
	.featured-post{ margin-bottom: 44px; padding-bottom: 40px; }
	.featured-excerpt{ padding-top: 22px; }
	.featured-excerpt .excerpt{ font-size: 17px; }
	.featured-overlay h2{ font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* ------------------------------------------------------------------
 * Concept glyph — bespoke typographic hero for image-less posts
 * (mirrors the live tamil.ai ழ் deep-dive, where the letter is the art)
 * ------------------------------------------------------------------ */
.concept-glyph{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 28% 22%, rgba(212,160,23,0.20) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 88%, rgba(192,57,43,0.16) 0%, transparent 55%),
		linear-gradient(135deg, #1c0b05, #0a0301);
}
.concept-glyph::after{
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(212,160,23,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212,160,23,0.06) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
}
.concept-glyph-mark{
	position: relative;
	font-family: var(--font-tamil);
	font-weight: 600;
	line-height: 1;
	color: var(--gold-bright);
	text-shadow: 0 0 64px rgba(212,160,23,0.4);
	letter-spacing: -0.02em;
}
.concept-glyph--featured{ position: absolute; inset: 0; }
.concept-glyph--featured .concept-glyph-mark{ font-size: clamp(88px, 17vw, 176px); }
.concept-glyph--card{ position: absolute; inset: 0; }
.concept-glyph--card .concept-glyph-mark{ font-size: clamp(52px, 13vw, 88px); }
.post-card .thumb.thumb--glyph{ background: none; }
.concept-glyph--single{
	border: 1px solid var(--border-soft);
	border-radius: 16px;
	aspect-ratio: 16 / 7;
	margin: 10px 0 40px;
}
.concept-glyph--single .concept-glyph-mark{ font-size: clamp(96px, 22vw, 184px); }
@media (max-width: 640px){
	.featured-media:has(.concept-glyph){ min-height: 200px; }
	.concept-glyph--single{ aspect-ratio: 16 / 9; margin-bottom: 30px; }
	.concept-glyph--single .concept-glyph-mark{ font-size: clamp(76px, 26vw, 120px); }
	.concept-glyph::after{ background-size: 28px 28px; }
}

/* Blog listing */
.post-list{
	display: grid;
	/* auto-fill (not auto-fit): keep the column tracks even when a filter
	   leaves only one match, so a lone card stays a normal grid card
	   instead of stretching across the whole row. */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px;
}
/* Pre-hide cards only once blog-anim.js has confirmed GSAP is available. */
.post-list.js-blog-anim .post-card{ opacity: 0; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce){
	.post-list.js-blog-anim .post-card{ opacity: 1; }
}
.post-list.view-list{ display: flex; flex-direction: column; gap: 22px; }
.post-list.view-list .post-card{ flex-direction: row; }
.post-list.view-list .post-card .thumb{ width: 280px; flex-shrink: 0; aspect-ratio: auto; }
.post-list.view-list .post-card .body{ padding: 32px 34px; }
.post-list.view-list .post-card h2{ font-size: 1.6rem; }
@media (max-width: 640px){
	.post-list.view-list .post-card{ flex-direction: column; }
	.post-list.view-list .post-card .thumb{ width: 100%; aspect-ratio: 16 / 10; }
}
.post-card{
	border: 1px solid rgba(212,160,23,0.2);
	background: rgba(212,160,23,0.04);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: border-color .3s, box-shadow .3s;
}
/* Hover lift itself is owned by blog-anim.js (GSAP) on hover-capable pointers,
   so it isn't fought over by two animation systems on the same `transform`.
   This CSS fallback only supplies the lift when JS/GSAP hover isn't bound
   (no-JS, GSAP failed to load, or a touch/no-hover pointer). */
.post-card:hover{ border-color: rgba(212,160,23,0.5); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
@media (hover: hover){
	.post-list:not(.js-blog-anim) .post-card{ transition: transform .3s, border-color .3s, box-shadow .3s; }
	.post-list:not(.js-blog-anim) .post-card:hover{ transform: translateY(-4px); }
}
.post-card .thumb{ position: relative; display: block; background: rgba(212,160,23,0.08); aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.post-card .thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .thumb img{ transform: scale(1.05); }

/* Play badge on cards / featured media that have a video */
.thumb-play{
	position: absolute; left: 14px; bottom: 14px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(6,2,0,0.72); border: 1px solid rgba(212,160,23,0.6);
	color: var(--gold-bright); backdrop-filter: blur(4px);
	transition: background .2s ease, transform .2s ease;
}
.thumb-play svg{ margin-left: 2px; }
.post-card:hover .thumb-play,
.featured-media:hover .thumb-play{ background: var(--gold); color: var(--bg); transform: scale(1.08); }
.thumb-play-lg{ width: 56px; height: 56px; left: auto; right: 24px; top: 24px; bottom: auto; }
@media (max-width: 720px){ .thumb-play-lg{ width: 46px; height: 46px; right: 16px; top: 16px; } }

/* VLOG cards: the thumbnail is a playable YouTube "screen".
   Grid view = a 16:9 banner. List view (row layout) = an inset, centered
   16:9 panel sitting beside the article summary. */
.post-card .thumb.thumb-video{ aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.thumb-video .thumb-video-open{ position: absolute; inset: 0; display: block; z-index: 1; }
.thumb-video .thumb-video-open img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.post-card:hover .thumb-video .thumb-video-open img{ transform: scale(1.04); }
/* Scrim + "Watch" tag so the play control reads over any frame */
.thumb-video::before{
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(180deg, rgba(6,2,0,0.12) 0%, transparent 32%, transparent 58%, rgba(6,2,0,0.72) 100%);
}
.thumb-video::after{
	content: "\25B6  WATCH";
	position: absolute; left: 12px; bottom: 11px; z-index: 3; pointer-events: none;
	font-family: var(--font-label); font-size: 9.5px; font-weight: 700; letter-spacing: 2px;
	color: var(--gold-bright); text-shadow: 0 1px 6px rgba(0,0,0,0.65);
}
.thumb-video.is-playing::before,
.thumb-video.is-playing::after{ display: none; }
.thumb-play--screen{
	left: 50%; top: 50%; right: auto; bottom: auto;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 62px; height: 62px; padding: 0;
	background: rgba(6,2,0,0.5);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1.5px solid rgba(240,192,64,0.85);
	box-shadow: 0 10px 30px rgba(0,0,0,0.45);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.post-card:hover .thumb-play--screen{
	background: var(--gold); color: var(--bg);
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 10px 34px rgba(212,160,23,0.5);
}
.thumb-video.is-playing .thumb-video-open,
.thumb-video.is-playing .thumb-play--screen{ display: none; }
.thumb-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }

/* List view (row layout): a real inset 16:9 video panel, vertically centered
   against the summary — not a full-height cropped sliver. */
@media (min-width: 641px){
	.post-list.view-list .post-card .thumb.thumb-video{
		width: clamp(300px, 38%, 440px);
		aspect-ratio: 16 / 9;
		align-self: center;
		margin: 24px 0 24px 24px;
		border-radius: 14px;
		border: 1px solid var(--border-soft);
		overflow: hidden;
		box-shadow: 0 14px 34px rgba(0,0,0,0.32);
	}
	.post-list.view-list .post-card:has(.thumb-video) .body{ justify-content: center; padding: 26px 38px; }
}
.post-card .body{ padding: 28px; display: flex; flex-direction: column; flex: 1; }
.post-card-tag{
	display: inline-block; align-self: flex-start;
	font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold); background: rgba(212,160,23,0.12); border: 1px solid rgba(212,160,23,0.3);
	padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.post-card .meta{ font-family: var(--font-label); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-faint); margin-bottom: 10px; }
.post-card h2{ font-size: 1.4rem; line-height: 1.25; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card h2 a{ font-family: var(--font-display); font-weight: 600; color: var(--gold-bright); transition: color .2s ease; }
.post-card:hover h2 a{ color: #fff; }
.post-card .excerpt{ font-family: var(--font-display); color: rgba(240,192,64,0.75); font-size: 16px; line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .excerpt p{ margin: 0; }
.post-list.view-list .post-card .excerpt{ -webkit-line-clamp: 2; }
.post-card .read-more{
	display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
	font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
	border-bottom: 1px solid transparent;
	transition: color .2s, gap .2s;
	align-self: flex-start;
}
.post-card:hover .read-more{ color: var(--gold-bright); gap: 9px; }

/* Single post */
.post-entry{ padding: 44px 24px 100px; max-width: 780px; margin: 0 auto; }

/* Two-column layout: article + sidebar */
.post-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
	padding-top: 44px;
	padding-bottom: 100px;
}
/* min-width:0 lets the grid tracks shrink below their content's intrinsic
   width, so wide children (data tables, code) scroll inside their own
   overflow container instead of stretching the page. */
.post-layout .post-entry,
.post-layout .post-sidebar{ min-width: 0; }
.post-layout .post-entry{ max-width: 740px; margin: 0; padding: 0; }
.post-sidebar{
	position: sticky;
	top: calc(var(--nav-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 26px;
	font-size: 14px;
}
@media (max-width: 1040px){
	/* Single column: drop the grid entirely so wide children (tables, code)
	   scroll inside their own overflow box instead of stretching the page. */
	.post-layout{ display: block; padding-top: 40px; }
	.post-layout .post-entry{ max-width: 780px; margin: 0 auto; }
	.post-sidebar{ position: static; margin-top: 48px; }
	.widget-toc{ display: none; }
}

/* Sidebar widgets */
.post-sidebar .widget{
	border: 1px solid var(--border-soft);
	border-radius: 16px;
	padding: 22px;
	background: var(--bg-card);
	margin-bottom: 0;
}
.post-sidebar .widget-title{
	display: flex; align-items: baseline; gap: 8px;
	font-family: var(--font-tamil); font-size: 1rem; color: var(--gold-bright);
	margin: 0 0 14px; letter-spacing: 0; text-transform: none;
}
.widget-title-en{
	font-family: var(--font-label); font-size: 10px; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--gold-faint); font-weight: 600;
}

/* Table of contents */
.toc-nav{ display: flex; flex-direction: column; gap: 1px; }
.toc-link{
	font-family: var(--font-display); font-size: 15px; line-height: 1.35;
	color: var(--gold-dim); padding: 7px 10px;
	border-left: 2px solid transparent; transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.toc-link.toc-h3{ padding-left: 22px; font-size: 13.5px; }
.toc-link:hover{ color: var(--gold-bright); }
.toc-link.is-active{ color: var(--gold-bright); border-left-color: var(--gold); background: rgba(212,160,23,0.07); }

/* Article info */
.widget-meta{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.widget-meta li{ display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.widget-meta li > span{
	font-family: var(--font-label); font-size: 10px; letter-spacing: 1px;
	text-transform: uppercase; color: var(--gold-faint); flex-shrink: 0;
}
.widget-meta li > strong{ font-family: var(--font-display); font-weight: 600; color: var(--gold-bright); text-align: right; }
.widget-meta a{ color: var(--gold); }
.widget-meta a:hover{ color: var(--gold-bright); }

.widget-share{
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft);
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.widget-share-label{
	font-family: var(--font-label); font-size: 10px; letter-spacing: 1.5px;
	text-transform: uppercase; color: var(--gold-faint); margin-right: 2px;
}
.share-btn{
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid var(--border-soft); background: transparent;
	color: var(--gold-dim); cursor: pointer; transition: all .2s ease; padding: 0;
}
.share-btn:hover{ border-color: var(--border); color: var(--gold-bright); background: rgba(212,160,23,0.08); }
.share-copy.is-copied{ color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* Recent posts list */
.widget-post-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.widget-post-list li + li{ border-top: 1px solid var(--border-soft); }
.widget-post-list a{ display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.widget-post-list li:first-child a{ padding-top: 0; }
.widget-post-list li:last-child a{ padding-bottom: 0; }
.widget-post-list .wpl-title{ font-family: var(--font-display); font-size: 15px; line-height: 1.35; color: var(--gold-bright); }
.widget-post-list a:hover .wpl-title{ color: #fff; }
.widget-post-list .wpl-date{ font-family: var(--font-label); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-faint); }

/* Reading progress bar, pinned under the fixed nav */
.post-progress{ position: fixed; top: var(--nav-h); left: 0; right: 0; height: 3px; z-index: 90; pointer-events: none; background: rgba(212,160,23,0.08); }
.post-progress-bar{ height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
@media (prefers-reduced-motion: no-preference){ .post-progress-bar{ transition: width .15s linear; } }

/* Breadcrumb */
.post-crumb{ margin-bottom: 24px; }
.post-crumb a{
	font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold-dim); transition: color .2s ease;
}
.post-crumb a:hover{ color: var(--gold-bright); }

/* Header: category pills + title + meta row */
.post-cats{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.post-cat-pill{
	display: inline-block; padding: 6px 16px; border-radius: 999px;
	border: 1px solid var(--border); background: rgba(212,160,23,0.08);
	color: var(--gold); font-family: var(--font-label); font-size: 11px; font-weight: 600;
	letter-spacing: 1.5px; text-transform: uppercase; transition: all .2s ease;
}
.post-cat-pill:hover{ background: rgba(212,160,23,0.16); color: var(--gold-bright); }
.post-entry .entry-title{ margin-bottom: 22px; }
.post-meta-row{
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-family: var(--font-label); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
	color: var(--gold-faint); margin-bottom: 0;
}
.post-meta-row .meta-dot{ opacity: 0.6; }

.post-entry .featured{ margin: 36px 0 40px; border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.post-entry .featured img{ display: block; }
.featured-caption{ margin: 12px 0 0; text-align: center; font-family: var(--font-label); font-size: 12px; letter-spacing: 1px; color: var(--gold-faint); }

.post-entry .entry-content{ font-size: 20px; min-width: 0; overflow-wrap: break-word; }
.post-entry .entry-content > *{ max-width: 100%; }
.post-entry .entry-content > *{ margin-bottom: 1.4em; }
.post-entry .entry-content h2, .post-entry .entry-content h3{ margin-top: 1.6em; }
.post-entry .entry-content blockquote{
	border-left: 3px solid var(--gold);
	margin: 2em 0; padding: 0.4em 0 0.4em 28px;
	font-style: italic; color: var(--gold-bright); font-size: 1.2em;
}
.post-entry .entry-content a{ border-bottom: 1px solid var(--border); }
.post-entry .entry-content img{ border-radius: 4px; border: 1px solid var(--border-soft); }

/* First paragraph drop cap — editorial touch */
.post-entry .entry-content > p:first-of-type::first-letter{
	font-family: var(--font-display); font-size: 3.4em; font-weight: 600; color: var(--gold);
	float: left; line-height: 0.8; padding: 0.08em 0.12em 0 0;
}

/* Tags as chips */
.tags-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--border-soft); }
.tag-chip{
	display: inline-block; padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--border-soft); color: var(--gold-dim);
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
	transition: all .2s ease;
}
.tag-chip:hover{ border-color: var(--border); color: var(--gold-bright); background: rgba(212,160,23,0.06); }

/* Author box */
.author-box{
	display: flex; gap: 20px; align-items: flex-start;
	margin-top: 56px; padding: 28px; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--bg-card);
}
.author-box .author-avatar{ border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.author-box .author-label{ font-family: var(--font-label); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-faint); }
.author-box .author-name{ font-family: var(--font-tamil); font-size: 1.15rem; margin: 4px 0 8px; }
.author-box .author-bio{ font-family: var(--font-display); font-size: 15px; color: rgba(240,192,64,0.75); line-height: 1.6; margin: 0; }
@media (max-width: 560px){ .author-box{ flex-direction: column; align-items: center; text-align: center; } }

/* Prev / next post navigation */
.post-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.post-nav-link{
	display: flex; flex-direction: column; gap: 8px;
	border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px 22px;
	transition: all .2s ease;
}
.post-nav-link:hover{ border-color: var(--border); background: var(--bg-card-hover); }
.post-nav-next{ grid-column: 2; text-align: right; align-items: flex-end; }
.post-nav-dir{ font-family: var(--font-label); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.post-nav-title{ font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--gold-bright); line-height: 1.4; }
@media (max-width: 640px){
	.post-nav{ grid-template-columns: 1fr; }
	.post-nav-next{ grid-column: 1; text-align: left; align-items: flex-start; }
}

/* Related reading */
.related-section{ border-top: 1px solid var(--border-soft); }

/* Post media: videos + concept gallery */
.post-media-head{
	display: flex; align-items: baseline; gap: 12px;
	font-family: var(--font-tamil); font-size: 1.4rem; color: var(--gold-bright);
	margin: 0 0 20px;
}
.post-media-head-en{
	font-family: var(--font-label); font-size: 12px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--gold-faint); font-weight: 600;
}
.post-videos{ margin: 40px 0; }
.video-embed{
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	margin: 0 0 20px; border: 1px solid var(--border-soft); border-radius: 16px;
	overflow: hidden; background: #000; box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.video-embed:last-child{ margin-bottom: 0; }
.video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.post-gallery{ margin: 48px 0 8px; }
.post-gallery-grid{
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
.post-gallery-item{
	display: block; border-radius: 12px; overflow: hidden;
	border: 1px solid var(--border-soft); background: rgba(212,160,23,0.06);
	aspect-ratio: 4 / 3;
}
.post-gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-gallery-item:hover img{ transform: scale(1.05); }

/* Page */
.page-content{ padding: 70px 24px 100px; max-width: 780px; margin: 0 auto; font-size: 20px; }
.page-content .entry-title{ margin-bottom: 30px; }
.page-content .entry-content > *{ margin-bottom: 1.4em; }

/* Comments */
.comments-area{ max-width: 780px; margin: 0 auto; padding: 0 24px 80px; }
.comment-list{ list-style: none; margin: 0; padding: 0; }
.comment-list .comment{ border: 1px solid var(--border-soft); border-radius: 4px; padding: 24px; margin-bottom: 20px; }
.comment-form input, .comment-form textarea{
	width: 100%; background: var(--bg-alt); border: 1px solid var(--border-soft); color: var(--gold-bright);
	padding: 12px 14px; font-family: var(--font-display); font-size: 17px; border-radius: 3px; margin-bottom: 14px;
}
.comment-form textarea{ min-height: 140px; }
.comment-form textarea:focus, .comment-form input:focus{ border-color: var(--border-strong); }
.comment-form input[type="submit"]{
	width: auto; display: inline-flex; cursor: pointer;
	font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	padding: 14px 32px; border-radius: 2px; border: 1px solid var(--gold); background: var(--gold-bright); color: var(--bg);
	transition: all .25s ease;
}
.comment-form input[type="submit"]:hover{ background: #fff; border-color: #fff; box-shadow: 0 6px 24px rgba(240,192,64,0.35); }
.comment-reply-title{ font-family: var(--font-tamil); }
/* Honeypot spam-trap field: off-screen, not display:none — some bots skip
   hidden/display:none fields but still fill in ones merely positioned away. */
.kalachara-hp-field{
	position: absolute !important; left: -9999px !important; top: -9999px !important;
	width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0;
}

/* Pagination */
.pagination{ display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.pagination a, .pagination span{
	min-width: 40px; height: 40px; padding: 0 14px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(212,160,23,0.25); border-radius: 20px; color: rgba(240,192,64,0.7);
	transition: all .2s ease;
}
.pagination a:hover{ border-color: var(--border); color: var(--gold-bright); background: rgba(212,160,23,0.08); }
.pagination .current{
	background: linear-gradient(180deg, var(--gold) 0%, #b08510 100%);
	color: var(--bg); border-color: transparent; box-shadow: 0 2px 0 #8a6608;
}
@media (max-width: 560px){
	/* Wrap onto multiple rows instead of overflowing when there are many
	   page numbers — narrow pills keep prev/next legible either way. */
	.pagination{ flex-wrap: wrap; gap: 6px; margin-top: 40px; }
	.pagination a, .pagination span{ min-width: 36px; height: 36px; padding: 0 10px; font-size: 11px; }
}

/* CTA */
.cta{
	text-align: center; padding: 100px 0;
	background:
		radial-gradient(ellipse at 50% 50%, rgba(212,160,23,0.1) 0%, transparent 70%),
		linear-gradient(180deg, #1a0a04 0%, #060200 100%);
}
.cta h2{ margin-bottom: 18px; }
.cta p{ font-family: var(--font-display); max-width: 560px; margin: 0 auto 36px; font-size: 20px; }
.cta .tamil-line{ font-family: var(--font-tamil); font-weight: 600; }

/* Section background rhythm — matches the reference site's warm gradient shifts */
.problem-section{ background: radial-gradient(ellipse at 50% 20%, rgba(192,57,43,0.06) 0%, transparent 60%), var(--bg); }
.approach-section{ background: linear-gradient(180deg, #060200 0%, #1a0a04 100%); }
.payanam-section{
	background:
		radial-gradient(ellipse at 50% 50%, rgba(192,57,43,0.08) 0%, transparent 60%),
		radial-gradient(ellipse at 30% 70%, rgba(212,160,23,0.06) 0%, transparent 60%),
		linear-gradient(180deg, #1a0a04 0%, #0a0301 100%);
}
.kingdom-section{ background: radial-gradient(ellipse at 50% 50%, rgba(212,160,23,0.06) 0%, transparent 60%), var(--bg); overflow: hidden; }
.journey-section{ background: linear-gradient(180deg, #060200 0%, #1a0a04 50%, #060200 100%); }
.families-section{ background: linear-gradient(180deg, #1a0a04 0%, #060200 100%); }
.soul-section{
	background: radial-gradient(ellipse at 50% 50%, rgba(192,57,43,0.1) 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, #1a0a04 100%);
}
.soul-section .tamil-line{ color: var(--gold-bright); font-weight: 500; font-style: italic; }
.soul-section .lede{ font-style: italic; }

/* Footer */
.site-footer{ border-top: 1px solid var(--border-soft); padding: 60px 0 30px; background: var(--bg-alt); }
.footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-grid h4{ font-family: var(--font-label); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 600; }
.footer-grid ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid li{ margin-bottom: 0; }
.footer-grid a{ color: rgba(240,192,64,0.65); font-size: 13px; transition: color .2s; }
.footer-grid a:hover{ color: var(--gold-bright); }
.footer-brand .brand-link{ margin-bottom: 16px; }
.footer-brand .site-title{ font-size: 16px; }
.footer-tagline{ font-family: var(--font-tamil); font-size: 18px; color: var(--gold); font-weight: 500; margin: 0 0 14px; }
.footer-desc{ font-style: italic; font-family: var(--font-display); color: rgba(240,192,64,0.6); font-size: 14px; line-height: 1.6; max-width: 360px; }
.footer-social{ display: flex; gap: 12px; margin-top: 18px; }
.footer-social-link{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(240,192,64,0.3);
	color: rgba(240,192,64,0.65);
	transition: color .2s, border-color .2s, transform .15s ease;
}
.footer-social-link:hover{ color: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-2px); }
.footer-bottom{
	border-top: 1px solid rgba(212,160,23,0.15); padding-top: 24px;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
	font-size: 11px; color: rgba(240,192,64,0.5);
	font-family: var(--font-label); letter-spacing: 1px;
}
@media (max-width: 720px){
	.footer-grid{ grid-template-columns: 1fr; gap: 32px; }
}

/* Quote cards (felt problem) */
.quote-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 30px; margin-top: 50px; max-width: 980px; margin-left: auto; margin-right: auto; }
.quote-card{
	background: rgba(212,160,23,0.04); border: 1px solid rgba(212,160,23,0.2);
	border-radius: 18px; padding: 32px 26px; text-align: left;
}
.quote-card p{ font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--gold-bright); line-height: 1.5; margin: 0 0 16px; }
.quote-card cite{
	font-style: normal; font-size: 10px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--gold); font-weight: 600;
}

/* Kingdom section */
.kingdom-wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.kingdom-list{ list-style: none; margin: 0 0 32px; padding: 0; }
.kingdom-list li{
	padding: 10px 0; border-bottom: 1px solid rgba(212,160,23,0.15);
	display: flex; gap: 12px; align-items: baseline;
	font-family: var(--font-display); font-size: 16px; color: rgba(240,192,64,0.85);
}
.kingdom-list li::before{ content: "✦"; color: var(--gold); font-size: 12px; }
@media (max-width: 820px){ .kingdom-wrap{ grid-template-columns: 1fr; } }

/* Timeline */
.timeline{ position: relative; max-width: 760px; margin: 0 auto; padding-left: 40px; }
.timeline::before{
	content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 2px;
	background: linear-gradient(180deg, transparent, rgba(212,160,23,0.5) 20%, rgba(212,160,23,0.5) 80%, transparent);
}
.timeline-item{ position: relative; margin-bottom: 36px; }
.timeline-item::before{
	content: ""; position: absolute; left: -34px; top: 8px; width: 14px; height: 14px;
	border-radius: 50%; background: var(--gold); border: 2px solid var(--gold-bright);
	box-shadow: 0 0 16px rgba(240,192,64,0.4);
}
.timeline-item:last-child{ margin-bottom: 0; }
.timeline-item .marker{ font-family: var(--font-label); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 6px; }
.timeline-item h3{ font-family: var(--font-tamil); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.timeline-item p{ font-family: var(--font-display); font-size: 16px; color: rgba(240,192,64,0.75); margin: 0; line-height: 1.6; }

/* Soul / triad */
.triad{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
@media (max-width: 720px){ .triad{ grid-template-columns: 1fr; gap: 18px; } }
.triad .item{
	background: rgba(212,160,23,0.04); border: 1px solid rgba(212,160,23,0.2);
	border-radius: 16px; padding: 24px 18px; text-align: center;
}
.triad .item .tamil-word{ font-family: var(--font-tamil); font-size: 26px; font-weight: 600; color: var(--gold-bright); display: block; margin-bottom: 4px; }
.triad .item .label{ font-family: var(--font-label); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); font-weight: 600; display: block; margin-bottom: 12px; }
.triad .item p{ font-family: var(--font-display); color: rgba(240,192,64,0.7); font-size: 15px; line-height: 1.5; }

/* Founder note */
.founder-note-layout{
	display: grid; grid-template-columns: minmax(0, 720px) 300px;
	justify-content: center; gap: 64px; align-items: start;
	padding: 64px 24px 90px;
}
.founder-note{ min-width: 0; }
.founder-sidebar{ position: sticky; top: calc(var(--nav-h, 73px) + 24px); }
@media (max-width: 960px){
	.founder-note-layout{ grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
	.founder-sidebar{ position: static; margin-top: 10px; }
}
.sidebar-widget{
	background: rgba(212,160,23,0.04); border: 1px solid var(--border-soft);
	border-radius: 16px; padding: 24px 20px;
}
.sidebar-widget h4{
	font-family: var(--font-label); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--gold); margin: 0 0 18px; font-weight: 600;
}
.sidebar-post-list{ list-style: none; margin: 0; padding: 0; }
.sidebar-post-list li + li{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.sidebar-post-list a{ display: flex; align-items: center; gap: 12px; }
.sidebar-post-thumb{ flex-shrink: 0; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: block; background: rgba(212,160,23,0.08); }
.sidebar-post-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.sidebar-post-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sidebar-post-title{
	font-family: var(--font-tamil); font-size: 14px; font-weight: 600; color: var(--gold-soft);
	line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	transition: color .2s;
}
.sidebar-post-list a:hover .sidebar-post-title{ color: var(--gold-bright); }
.sidebar-post-date{ font-family: var(--font-label); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-faint); }
.sidebar-empty{ font-family: var(--font-display); font-size: 15px; color: var(--gold-dim); }
.sidebar-view-all{
	display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft);
	font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold); text-align: center;
}
.sidebar-view-all:hover{ color: var(--gold-bright); }
.founder-note .kicker{ font-family: var(--font-label); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(212,160,23,0.6); margin-bottom: 20px; }
.founder-note .tamil-title{ font-family: var(--font-tamil); font-weight: 700; font-size: 22px; color: rgba(212,160,23,0.75); margin-bottom: 8px; line-height: 1.4; }
.founder-note h1{ font-size: clamp(1.6rem, 4.6vw, 2rem); font-weight: 600; line-height: 1.3; margin-bottom: 24px; }
.founder-note .byline{
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	color: rgba(212,160,23,0.5); margin-bottom: 40px;
}
.founder-note .byline-dot{ color: rgba(212,160,23,0.25); }
.founder-note .content{ font-family: var(--font-display); font-size: 18px; line-height: 2; color: rgba(240,192,64,0.88); }
.founder-note .content > p{ margin-bottom: 22px; }
.founder-note .content strong{ color: var(--gold-bright); font-weight: 600; }
.founder-note .content .tamil-line{ font-family: var(--font-tamil); font-weight: 600; color: var(--gold-bright); font-size: 1.1em; margin: 1.6em 0; text-align: left; line-height: 1.6; }
.founder-note .pull-quote{
	font-family: var(--font-display); font-size: 22px; font-style: italic;
	color: rgba(240,192,64,0.75); border-left: 3px solid rgba(212,160,23,0.35);
	padding-left: 20px; margin: 36px 0; line-height: 1.7;
}
.founder-note .tamil-callout{
	font-family: var(--font-tamil); font-weight: 600; font-size: 16px; color: var(--gold-bright);
	background: rgba(212,160,23,0.06); border-left: 3px solid var(--gold);
	border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 28px 0; line-height: 1.8;
}
.founder-note .section-break{ text-align: center; color: rgba(212,160,23,0.25); font-size: 12px; letter-spacing: 8px; margin: 40px 0; }
.founder-note .closing-card{
	background: rgba(212,160,23,0.05); border: 1px solid rgba(212,160,23,0.18);
	border-radius: 16px; padding: 32px 26px; margin-top: 44px; text-align: center;
}
.founder-note .closing-ornament{ font-size: 10px; letter-spacing: 10px; color: rgba(212,160,23,0.25); display: block; margin-bottom: 18px; }
.founder-note .closing-card .tamil-line{ font-family: var(--font-tamil); font-size: 1.1rem; color: rgba(212,160,23,0.7); margin-bottom: 6px; text-align: center; }
.founder-note .closing-en{ font-family: var(--font-display); font-style: italic; font-size: 14px; color: rgba(240,192,64,0.5); margin-bottom: 20px; }
.founder-note .closing-name{ font-family: var(--font-label); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--gold-bright); margin-bottom: 4px; }
.founder-note .closing-role{ font-family: var(--font-label); font-size: 11px; letter-spacing: 1px; color: rgba(212,160,23,0.5); }
.founder-note .closing-role a{ color: rgba(212,160,23,0.5); }
@media (max-width: 640px){
	.founder-note .content{ font-size: 16px; }
	.founder-note .pull-quote{ font-size: 18px; }
}

/* Privacy / policy pages */
.policy-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
	padding-top: 70px;
	padding-bottom: 100px;
}
.policy-layout .policy-page{ min-width: 0; max-width: 780px; margin: 0; padding: 0; }
.policy-layout .post-sidebar{ min-width: 0; }
.policy-sidebar .toc-nav{ max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; }
@media (max-width: 1040px){
	.policy-layout{ display: block; padding-top: 50px; padding-bottom: 60px; }
	.policy-layout .policy-page{ max-width: 780px; margin: 0 auto; }
	.policy-sidebar{ display: none; }
}
@media (min-width: 1041px){
	.policy-toc{ display: none; }
}
.policy-page{ max-width: 860px; margin: 0 auto; padding: 70px 24px 100px; }
.policy-hero{ text-align: center; margin-bottom: 60px; }
.policy-hero .tamil-title{ font-family: var(--font-tamil); color: var(--gold-dim); margin-bottom: 10px; }
.policy-meta{ font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-faint); }
.policy-badges{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px; margin: 40px 0 60px; }
.policy-badge{ border: 1px solid var(--border-soft); background: var(--bg-card); border-radius: 4px; padding: 20px; font-size: 15px; font-family: var(--font-display); color: var(--gold-dim); }
.policy-badge .emoji{ font-size: 22px; display: block; margin-bottom: 10px; }
.policy-toc{ border: 1px solid var(--border-soft); border-radius: 4px; padding: 26px 30px; margin-bottom: 60px; columns: 2; column-gap: 30px; }
.policy-toc li{ margin-bottom: 6px; font-size: 15px; color: var(--gold-dim); padding-left: 6px; border-left: 2px solid transparent; transition: border-color .15s ease, padding-left .15s ease; }
.policy-toc a{ color: inherit; text-decoration: none; }
.policy-toc a:hover, .policy-toc a:focus-visible{ color: var(--gold-bright); text-decoration: underline; }
.policy-toc li.is-active{ border-left-color: var(--gold); padding-left: 12px; }
.policy-toc li.is-active a{ color: var(--gold-bright); }
.policy-section{ padding: 40px 0; border-top: 1px solid var(--border-soft); }
.policy-section h2{ font-size: 1.5rem; }
.policy-section p, .policy-section li{ font-size: 17px; color: var(--gold-soft); font-family: var(--font-display); }
.policy-section ul, .policy-section ol{ padding-left: 20px; }
.policy-table{ width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.policy-table th, .policy-table td{ border: 1px solid var(--border-soft); padding: 10px 14px; text-align: left; color: var(--gold-soft); font-family: var(--font-display); }
.policy-table th{ font-family: var(--font-label); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dim); background: var(--bg-card); }
/* Mobile: multi-column tables scroll inside their own box instead of widening the page */
@media (max-width: 720px){
	.policy-table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px; }
	.policy-table th, .policy-table td{ min-width: 120px; }
	.policy-toc{ columns: 1; padding: 22px 22px; }
}
.policy-check-list{ list-style: none; padding: 0; margin: 20px 0; }
.policy-check-list li{ padding: 10px 0 10px 30px; position: relative; border-bottom: 1px solid var(--border-soft); }
.policy-check-list li::before{ content: "✓"; position: absolute; left: 0; color: var(--gold); }
.policy-cross-list li::before{ content: "✕"; color: var(--red); }

.policy-back-to-top{
	position: fixed; right: 24px; bottom: 24px; z-index: 90;
	display: flex; align-items: center; gap: 6px;
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold-dim); background: rgba(6,2,0,0.85); backdrop-filter: blur(8px);
	border: 1px solid var(--border-soft); border-radius: 100px; padding: 10px 16px;
	opacity: 0; pointer-events: none; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.policy-back-to-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.policy-back-to-top:hover, .policy-back-to-top:focus-visible{ color: var(--gold-bright); border-color: var(--border-strong); }
@media (max-width: 720px){ .policy-back-to-top{ right: 16px; bottom: 16px; padding: 8px 14px; } }

/* Contact page */
.contact-notice{
	max-width: 700px; margin: -20px auto 40px; padding: 16px 22px;
	border-radius: 12px; font-family: var(--font-display); font-size: 16px; text-align: center;
}
.contact-notice-success{ background: rgba(74,133,39,0.12); border: 1px solid rgba(74,133,39,0.4); color: #8fce5c; }
.contact-notice-error{ background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.4); color: #e88478; }
.contact-notice a{ color: inherit; text-decoration: underline; }
.contact-grid{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 720px){ .contact-grid{ grid-template-columns: 1fr; gap: 36px; } }
.contact-form{ display: flex; flex-direction: column; gap: 6px; }
.contact-form-embed{ min-width: 0; }
.contact-form-embed iframe{ display: block; border-radius: 12px; }
.contact-form label{
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold-dim); margin: 14px 0 2px;
}
.contact-form label:first-child{ margin-top: 0; }
.contact-form input, .contact-form select, .contact-form textarea{
	width: 100%; background: var(--bg-alt); border: 1px solid var(--border-soft); color: var(--gold-bright);
	padding: 12px 14px; font-family: var(--font-display); font-size: 17px; border-radius: 10px;
}
.contact-form select{ appearance: none; cursor: pointer; }
.contact-form select:invalid{ color: rgba(240,192,64,0.45); }
.contact-form select option{ color: var(--gold-bright); }
.contact-form textarea{ min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline: none; border-color: var(--border-strong); }
.contact-form button{ margin-top: 18px; align-self: flex-start; }
.contact-info{
	background: rgba(212,160,23,0.04); border: 1px solid var(--border-soft);
	border-radius: 18px; padding: 30px 26px;
}
.contact-info-item{ padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.contact-info-item:first-child{ padding-top: 0; }
.contact-info-item:last-child{ padding-bottom: 0; border-bottom: none; }
.contact-info-item h4{
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold); margin-bottom: 8px; font-weight: 600;
}
.contact-info-item a, .contact-info-item p{ font-family: var(--font-display); font-size: 17px; color: var(--gold-soft); margin: 0; }
.contact-map{
	width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 50px;
	border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
	overflow: hidden; position: relative; height: 60vh; min-height: 480px; max-height: 640px;
}
.contact-map iframe{ position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
@media (max-width: 720px){ .contact-map{ height: 70vh; min-height: 360px; max-height: 480px; } }

/* Support page extras */
.policy-callout{
	background: rgba(212,160,23,0.07); border: 1px solid var(--border-soft);
	border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0;
	padding: 16px 20px; margin: 8px 0 24px;
}
.policy-callout p{ margin: 0; font-size: 17px; }
.policy-steps{ list-style: none; counter-reset: step; margin: 20px 0 0; padding: 0; }
.policy-steps li{
	counter-increment: step; position: relative; padding: 0 0 20px 46px;
	font-family: var(--font-display); font-size: 17px; color: var(--gold-soft); line-height: 1.6;
}
.policy-steps li:last-child{ padding-bottom: 0; }
.policy-steps li::before{
	content: counter(step); position: absolute; left: 0; top: 0;
	width: 29px; height: 29px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-label); font-size: 12px; font-weight: 700;
	color: var(--bg); background: var(--gold);
}
.policy-steps li strong{ font-family: var(--font-label); font-size: 14px; letter-spacing: 0.03em; color: var(--gold-bright); }
.policy-note{ border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; margin-top: 16px; }
.policy-note p{ margin: 0; font-size: 15px; }

/* ===== "The ழ Problem" engineering post components (scoped to .entry-content) ===== */
.entry-content .zha-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.6em; }
.entry-content .zha-chip{ font-family: var(--font-label); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dim); border: 1px solid var(--border-soft); border-radius: 100px; padding: 5px 12px; }

.entry-content .zha-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 1.8em 0; }
.entry-content .zha-stat{ border: 1px solid var(--border-soft); border-left: 4px solid var(--red); border-radius: 12px; padding: 18px 20px; background: var(--bg-card); }
.entry-content .zha-stat.win{ border-left-color: var(--gold); }
.entry-content .zha-stat b{ display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.entry-content .zha-stat span{ display: block; margin-top: 8px; font-size: 12px; color: var(--gold-dim); font-family: var(--font-label); letter-spacing: 0.5px; text-transform: uppercase; }

.entry-content .zha-tablewrap{ overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 12px; margin: 1.8em 0; }
.entry-content .zha-table{ width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.entry-content .zha-table th, .entry-content .zha-table td{ padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); color: var(--gold-soft); }
.entry-content .zha-table thead th{ font-family: var(--font-label); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-dim); background: var(--bg-card); }
.entry-content .zha-table tbody tr:last-child td{ border-bottom: none; }
.entry-content .zha-table .num{ text-align: right; font-variant-numeric: tabular-nums; }
.entry-content .zha-table .emph td{ background: rgba(192,57,43,0.12); }
.entry-content .zha-pill{ display: inline-block; font-family: var(--font-label); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; }
.entry-content .zha-pill.good{ background: var(--gold); color: var(--bg); }
.entry-content .zha-pill.warn{ background: #9E6B12; color: #fff; }
.entry-content .zha-pill.crit{ background: var(--red); color: #fff; }
.entry-content .zha-let{ font-family: var(--font-tamil); font-size: 1.2rem; color: var(--red); }

.entry-content .zha-callout{ border-left: 3px solid var(--gold); background: rgba(212,160,23,0.06); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 1.8em 0; }
.entry-content .zha-callout.finding{ border-left-color: var(--red); background: rgba(192,57,43,0.08); }
.entry-content .zha-callout .tag{ display: block; font-family: var(--font-label); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.entry-content .zha-callout.finding .tag{ color: var(--red); }
.entry-content .zha-callout p{ margin: 0; font-size: 16px; }

.entry-content .zha-f3{ border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px; margin: 1.6em 0; background: var(--bg-card); }
.entry-content .zha-f3 .row{ display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.entry-content .zha-f3 .rlab{ width: 76px; flex: none; font-family: var(--font-tamil); font-size: 18px; color: var(--gold-bright); }
.entry-content .zha-f3 .track{ position: relative; flex: 1; height: 22px; background: rgba(212,160,23,0.06); border-radius: 5px; }
.entry-content .zha-f3 .bar{ position: absolute; top: 0; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 10px; color: #fff; white-space: nowrap; }
.entry-content .zha-f3 .cap{ margin: 12px 0 0; font-size: 13px; color: var(--gold-dim); font-family: var(--font-display); }

.entry-content ol.zha-log{ list-style: none; counter-reset: x; padding: 0; margin: 1.6em 0; }
.entry-content ol.zha-log li{ position: relative; padding: 0 0 22px 44px; counter-increment: x; margin: 0; }
.entry-content ol.zha-log li::before{ content: counter(x); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 12px; font-weight: 700; color: var(--gold); }
.entry-content ol.zha-log h4{ font-family: var(--font-tamil); font-size: 16px; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--gold-bright); }
.entry-content ol.zha-log .verdict{ font-family: var(--font-label); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.entry-content ol.zha-log .v-dead{ background: rgba(192,57,43,0.15); color: var(--red); }
.entry-content ol.zha-log .v-win{ background: rgba(212,160,23,0.15); color: var(--gold); }
.entry-content ol.zha-log .v-partial{ background: rgba(158,107,18,0.20); color: #c99a3a; }
.entry-content ol.zha-log p{ margin: 0; font-size: 15px; color: var(--gold-soft); }
.entry-content ol.zha-log .mono-mini{ font-family: var(--font-label); font-size: 12px; color: var(--gold-faint); margin-top: 4px; }

/* Beta / Tally embed */
.beta-card{
	max-width: 620px; margin: 0 auto; text-align: center;
	background: rgba(6,2,0,0.6); backdrop-filter: blur(8px);
	border: 1.5px solid rgba(212,160,23,0.4); border-radius: 24px; padding: 48px 36px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.beta-card .eyebrow{
	color: var(--red); background: rgba(192,57,43,0.15); border: 1px solid rgba(192,57,43,0.4);
	padding: 6px 14px; border-radius: 16px; font-size: 10px; letter-spacing: 3px; font-weight: 700;
}
.beta-card iframe{ margin-top: 20px; border-radius: 12px; }
.beta-note{ font-size: 11px; color: rgba(240,192,64,0.5); letter-spacing: 1px; margin-top: 16px; }

/* Widgets / sidebar (fallback default WP markup) */
.widget{ margin-bottom: 36px; }
.widget h2, .widget-title{ font-family: var(--font-label); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dim); }

/* Mobile nav */
@media (max-width: 900px){
	.primary-menu-wrap{ display: none; }
	.menu-toggle{
		display: inline-flex; align-items: center; justify-content: center;
		margin-left: auto; flex-shrink: 0;
		width: 42px; height: 42px; padding: 0;
		background: none; border: 1px solid var(--border); border-radius: 50%;
		color: var(--gold-bright); cursor: pointer;
		transition: background .2s ease, border-color .2s ease;
	}
	.menu-toggle:hover{ background: rgba(212,160,23,0.1); border-color: rgba(212,160,23,0.7); }
	.menu-toggle-box{ position: relative; width: 18px; height: 12px; }
	.menu-toggle-bar{
		position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
		background: currentColor;
		transition: transform .25s ease, opacity .15s ease;
	}
	.menu-toggle-bar:nth-child(1){ top: 0; }
	.menu-toggle-bar:nth-child(2){ top: 5px; }
	.menu-toggle-bar:nth-child(3){ top: 10px; }
	.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){ opacity: 0; }
	.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
	.primary-menu-wrap.is-open{
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
		background: var(--bg); border-bottom: 1px solid var(--border-soft);
		box-shadow: 0 24px 40px -12px rgba(0,0,0,0.7);
		padding: 10px 32px 26px;
		animation: menuSlideDown .2s ease;
	}
	.primary-menu-wrap .primary-menu{ flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.primary-menu-wrap li{ padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
	.primary-menu-wrap li.cta-nav{ margin-left: 0; }
	.primary-menu-wrap li.nav-cta{ margin-left: 0; padding: 16px 0 4px; border-bottom: none; }
	.primary-menu-wrap .nav-cta a{ display: inline-block; }
	/* Active item in the dropdown: left accent bar instead of the underline */
	.primary-menu-wrap li.is-active{ padding-left: 12px; box-shadow: inset 3px 0 0 var(--gold); }
	.primary-menu-wrap li.is-active > a::after{ display: none; }

	/* Dropdown: the secondary nav (Privacy) drops into the same left-aligned
	   column as everything else; the Play Store icon sits on its own row
	   below it, as a labelled pill rather than a floated circle. */
	.primary-menu-wrap .main-navigation,
	.primary-menu-wrap .secondary-navigation{ width: 100%; }
	.primary-menu-wrap .secondary-navigation{
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-left: 0;
		padding-left: 0;
	}
	.primary-menu-wrap .secondary-navigation .nav-store-icon{
		align-self: flex-start;
		width: auto;
		height: auto;
		margin-top: 18px;
		padding: 9px 16px;
		border-radius: 999px;
		gap: 10px;
	}
	.primary-menu-wrap .secondary-navigation .nav-test-badge{
		align-self: flex-start;
		margin-top: 12px;
	}
	.primary-menu-wrap .secondary-navigation .nav-store-icon::after{
		content: "Get it on Google Play";
		font-family: var(--font-label);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--gold-dim);
	}
}
@keyframes menuSlideDown{
	from{ transform: translateY(-8px); }
	to{ transform: translateY(0); }
}
.screen-reader-text{ position:absolute; left:-9999px; }

/* ============================================================
   v1.1.0 — parity pass with the live tamil.ai landing page
   ============================================================ */

/* Split card titles (approach + families) */
.card .card-title-tamil{
	font-family: var(--font-tamil);
	font-size: 20px;
	color: var(--gold-bright);
	font-weight: 600;
	margin: 0 0 4px;
	letter-spacing: normal;
	text-transform: none;
}
.card .card-title-en{
	font-family: var(--font-label);
	color: rgba(240,192,64,0.7);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 14px;
}
.card .card-title-en + .card-title-tamil{ margin-bottom: 14px; }

/* App store badges */
.store-badges{
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 28px;
}
.footer-store-badge{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.store-badge-link{
	display: inline-block;
	line-height: 0;
	transition: transform .15s ease, opacity .15s ease;
}
.store-badge-link:hover{ transform: translateY(-2px); opacity: .9; }
.store-badge-img{ display: block; height: 48px; width: auto; }
.footer-store-badge .store-badge-img{ height: 42px; }
/* Apple app not live yet — badge rendered but hidden (see functions.php). */
.apple-badge-hidden{ display: none; }

/* Circular Google Play icon in the header */
.secondary-navigation{ display: flex; align-items: center; gap: 16px; }
.nav-store-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(212,160,23,0.4);
	border-radius: 50%;
	color: var(--gold-bright);
	flex-shrink: 0;
	transition: background .2s ease, border-color .2s ease;
}
.nav-store-icon:hover{ background: rgba(212,160,23,0.1); border-color: rgba(212,160,23,0.7); color: var(--gold-bright); }

/* "Test : First Letter" — links out to a separate standalone demo app */
.nav-test-badge{
	display: flex; align-items: center; gap: 6px; flex-shrink: 0;
	padding: 8px 10px;
	background: rgba(192,57,43,0.15);
	border: 1px solid rgba(192,57,43,0.5);
	border-radius: 20px;
	color: var(--gold-bright);
	font-family: var(--font-label); font-size: 11px; font-weight: 700;
	letter-spacing: 1px; text-transform: uppercase;
	transition: background .2s ease, border-color .2s ease;
}
.nav-test-badge:hover{ background: rgba(192,57,43,0.25); border-color: rgba(192,57,43,0.8); color: var(--gold-bright); }
.btn-test-hero{
	display: inline-flex; align-items: center; gap: 10px;
	margin: 14px 0 0;
	padding: 14px 30px;
	background: rgba(192,57,43,0.15);
	border: 1px solid rgba(192,57,43,0.6);
	border-radius: 28px;
	color: var(--gold-bright);
	font-family: var(--font-label); font-size: 13px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	transition: background .2s ease, border-color .2s ease;
}
.btn-test-hero:hover{ background: rgba(192,57,43,0.25); border-color: rgba(192,57,43,0.9); color: var(--gold-bright); }

/* Featured story card in the hero */
.zhcard{
	display: block;
	max-width: 620px;
	margin: 0 auto 56px;
	background: var(--bg-card);
	border: 1px solid rgba(212,160,23,0.25);
	border-left: 4px solid var(--gold);
	border-radius: 18px;
	padding: 28px 30px;
	text-align: left;
	box-shadow: 0 16px 40px rgba(0,0,0,0.35);
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.zhcard:hover{ transform: translateY(-3px); border-color: rgba(212,160,23,0.5); background: var(--bg-card-hover); }
.zhcard-eyebrow{
	display: block;
	color: var(--gold);
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 14px;
}
.zhcard-title{
	display: block;
	font-family: var(--font-display);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 600;
	font-style: italic;
	color: var(--gold-bright);
	line-height: 1.3;
	margin-bottom: 14px;
	text-shadow: 0 0 30px rgba(212,160,23,0.2);
}
.zhcard-z{ font-style: normal; color: var(--red); font-family: var(--font-tamil); }
.zhcard-sub{
	display: block;
	font-family: var(--font-display);
	font-size: 17px;
	color: rgba(240,192,64,0.7);
	line-height: 1.6;
	margin-bottom: 18px;
}
.zhcard-cta{
	display: inline-block;
	color: var(--gold);
	font-family: var(--font-label);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition: color .2s ease;
}
.zhcard:hover .zhcard-cta{ color: var(--gold-bright); }

/* Kingdom showcase — text + illustration */
.kingdom-wrap{ align-items: center; }
.kingdom-text .btn{ margin-top: 8px; }
.kingdom-visual{
	position: relative;
	aspect-ratio: 4 / 5;
	background: linear-gradient(180deg, #1a0a04 0%, #060200 100%);
	border: 1.5px solid rgba(212,160,23,0.3);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.kingdom-visual svg{ display: block; }
@media (max-width: 820px){
	.kingdom-visual{ max-width: 420px; margin: 0 auto; width: 100%; }
}

/* Festival greeting modal */
body.festival-modal-open{ overflow: hidden; }
.festival-modal{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.festival-modal[hidden]{ display: none; }
.festival-modal-backdrop{
	position: absolute; inset: 0; background: rgba(6,2,0,0.85); backdrop-filter: blur(6px);
	animation: festivalFadeIn .3s ease;
}
.festival-modal-card{
	position: relative; z-index: 1; max-width: 440px; width: 100%;
	background: var(--bg-alt); border: 1.5px solid rgba(212,160,23,0.4); border-radius: 24px;
	box-shadow: 0 30px 80px rgba(0,0,0,0.6);
	animation: festivalPopIn .35s cubic-bezier(.34,1.56,.64,1);
	overflow: hidden; /* clips the image to the card's own rounded corners — no manual bleed math needed */
	max-height: calc(100vh - 40px); overflow-y: auto;
}
.festival-modal-content{ padding: 32px 32px 36px; text-align: center; }
.festival-modal-card .brand-emblem{ display: block; margin: 0 auto 18px; }
.festival-modal-image{
	display: block; width: 100%; height: 220px; object-fit: cover;
}
.festival-modal-image[hidden]{ display: none; }
.festival-modal-tamil{ font-family: var(--font-tamil); font-size: 1.3rem; font-weight: 600; color: var(--gold-bright); margin: 16px 0 6px; }
.festival-modal-card h3{ font-size: 1.5rem; margin-bottom: 6px; }
.festival-modal-date{
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold-faint); margin-bottom: 18px;
}
.festival-modal-body{ font-family: var(--font-display); font-size: 16px; color: var(--gold-dim); line-height: 1.6; margin-bottom: 26px; }
.festival-modal-close{
	position: absolute; top: 16px; right: 16px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--border-soft); background: rgba(6,2,0,0.55); backdrop-filter: blur(4px); color: var(--gold-bright);
	display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; padding: 0;
}
.festival-modal-close:hover{ color: var(--gold-bright); border-color: var(--border); background: rgba(6,2,0,0.8); }
.festival-modal-close svg{ width: 16px; height: 16px; }
@media (max-width: 480px){
	.festival-modal-image{ height: 160px; }
	.festival-modal-content{ padding: 26px 22px 30px; }
}
@keyframes festivalFadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes festivalPopIn{ from{ opacity: 0; transform: scale(.92) translateY(8px); } to{ opacity: 1; transform: scale(1) translateY(0); } }
@media (prefers-reduced-motion: reduce){
	.festival-modal-backdrop, .festival-modal-card{ animation: none; }
}

/* Events table — [kalachara_events_table] shortcode */
.btn-small{ padding: 8px 18px; font-size: 11px; }
.kalachara-events-table{
	width: 100%; border-collapse: collapse; margin: 24px 0;
	font-family: var(--font-display); font-size: 14px; color: var(--gold-dim);
}
.kalachara-events-table th, .kalachara-events-table td{
	padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border-soft);
}
.kalachara-events-table th{
	font-family: var(--font-label); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold-faint); font-weight: 700;
}
.kalachara-events-table tbody tr:hover{ background: rgba(212,160,23,0.06); }
.kalachara-events-empty{ color: var(--gold-faint); font-style: italic; }
@media (max-width: 600px){
	.kalachara-events-table thead{ display: none; }
	.kalachara-events-table tr{ display: block; border-bottom: 1px solid var(--border-soft); padding: 10px 0; }
	.kalachara-events-table td{ display: flex; justify-content: space-between; gap: 12px; border-bottom: none; padding: 4px 0; }
	.kalachara-events-table td[data-label]::before{ content: attr(data-label); font-weight: 700; color: var(--gold-faint); }
}