/* =========================================================
   THAMIZHOLI V4 — Tamil Heritage / Folk-line Design System
   ========================================================= */

:root{
  --v4-maroon:#8f171d;
  --v4-kumkum:#c52435;
  --v4-saffron:#e9540d;
  --v4-turmeric:#e6a31a;
  --v4-leaf:#577d43;
  --v4-ink:#3a241b;
  --v4-muted:#74655d;
  --v4-cream:#fff9ee;
  --v4-paper:#fffdf8;
  --v4-gold:#dcae43;
}

/* Page accents */
body.home-page{--page-accent:#b82227;--page-accent2:#ef6508;--page-accent3:#678e50;--folk:url("../patterns/home-folk.svg")}
body.kavithai-page{--page-accent:#b91f31;--page-accent2:#f06408;--page-accent3:#a85a24;--folk:url("../patterns/kavithai-folk.svg")}
body.kalacharam-page{--page-accent:#9e1f24;--page-accent2:#d98a12;--page-accent3:#537b44;--folk:url("../patterns/kalacharam-folk.svg")}
body.ilakkiyam-page{--page-accent:#8b1d22;--page-accent2:#c98216;--page-accent3:#5b6653;--folk:url("../patterns/ilakkiyam-folk.svg")}

html{background:#fff8ee}
body{
  isolation:isolate;
  background:
    radial-gradient(circle at 12% 12%,rgba(234,112,22,.10),transparent 30rem),
    radial-gradient(circle at 88% 32%,rgba(78,123,72,.08),transparent 30rem),
    linear-gradient(180deg,#fff8ee 0%,#fffdf9 42%,#fff7ef 100%) !important;
  color:var(--v4-ink);
}

/* Replace the old faint/broken backdrop */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:var(--folk) !important;
  background-repeat:repeat !important;
  background-size:360px 360px !important;
  background-position:18px 28px !important;
  opacity:.15 !important;
  animation:none !important;
}
body::after{display:none !important}

.top-border,header,main,footer{position:relative;z-index:2}

/* Traditional textile band under header */
header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-9px;
  height:9px;
  background:
    linear-gradient(90deg,transparent 0 7px,var(--v4-turmeric) 7px 11px,transparent 11px 18px) 0 0/18px 4px repeat-x,
    linear-gradient(90deg,var(--page-accent),var(--page-accent2),var(--v4-turmeric),var(--page-accent3));
  opacity:.94;
}
header{
  background:linear-gradient(115deg,#9d1822 0%,#c62237 55%,#d93a43 100%) !important;
  border-bottom:0 !important;
  box-shadow:0 12px 34px rgba(105,21,22,.20) !important;
}

.brand .mark{
  background:linear-gradient(145deg,#c85f10,#a92d17) !important;
  border:1px solid rgba(255,222,133,.55) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 8px 18px rgba(91,24,17,.22) !important;
  animation:none !important;
}
.brand .title{letter-spacing:.06em !important}
nav a[aria-current="page"]{
  background:linear-gradient(135deg,#dc5c19,#c83b27) !important;
  color:#ffe65a !important;
  box-shadow:0 6px 18px rgba(104,31,20,.18) !important;
}

/* Page background has real visible folk motifs now */
main{background:transparent !important}

/* Hero: parchment + subtle traditional edge */
.hero{padding-top:clamp(3.2rem,6vw,5rem) !important}
.hero-grid{align-items:center !important}
.hero-card,.kural-panel,.panel,.card,.topic-card{
  position:relative;
  border:1px solid rgba(205,156,45,.48) !important;
  box-shadow:0 20px 48px rgba(89,43,22,.10),inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.hero-card{
  background:
    radial-gradient(circle at 8% 8%,rgba(232,154,49,.08),transparent 12rem),
    linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,248,236,.96)) !important;
  border-radius:24px !important;
  padding:clamp(1.55rem,3vw,2.5rem) !important;
}
.hero-card::before,.kural-panel::before,.panel::before,.card::before,.topic-card::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;right:0 !important;top:0 !important;
  height:4px !important;
  background:linear-gradient(90deg,var(--page-accent),var(--page-accent2),var(--v4-turmeric),var(--page-accent3)) !important;
  opacity:1 !important;
}
.hero-card::after{
  content:"";
  position:absolute;
  right:18px;bottom:14px;
  width:90px;height:90px;
  background:var(--folk) center/180px auto;
  opacity:.10;
  pointer-events:none;
}
.hero h1{
  background:linear-gradient(110deg,var(--page-accent),var(--page-accent2) 72%,#c98712) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:drop-shadow(0 8px 16px rgba(148,42,20,.11)) !important;
}
.hero .subtitle{color:#bd2438 !important}
.hero .desc{color:#71665f !important}

/* Improve contrast of quote/kural side panel */
.kural-panel{
  background:
    linear-gradient(150deg,#7f1720 0%,#a7232a 52%,#bc4c18 100%) !important;
  color:#fffaf0 !important;
  border-color:rgba(229,179,64,.65) !important;
  box-shadow:0 22px 45px rgba(99,32,22,.18) !important;
}
.kural-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--folk);
  background-size:270px;
  background-position:85% 50%;
  opacity:.055;
  pointer-events:none;
}
.kural-panel .chip{
  background:rgba(255,250,225,.12) !important;
  border-color:rgba(255,221,115,.65) !important;
  color:#fff !important;
}
.kural-panel .chip b{color:#ffe45d !important}
.kural-verse,.kural-meaning{color:#fffdf7 !important}

/* Stronger sections */
.section,.yt{position:relative !important}
.section::after,.yt::after,.hero::after{
  content:"";
  display:block;
  width:min(360px,70vw);
  height:26px;
  margin:2.3rem auto 0;
  background:url("../patterns/divider.svg") center/contain no-repeat;
  opacity:.44;
}
.section .heading h2,.section h2{
  color:#aa2a1f !important;
  text-shadow:0 4px 14px rgba(144,46,24,.08);
}
.section .heading{
  position:relative;
}
.section .heading::after{
  content:"";
  flex:1;
  height:1px;
  margin-bottom:.55rem;
  background:linear-gradient(90deg,rgba(205,156,45,.6),transparent);
}

/* Cards feel like handmade paper, not generic white boxes */
.panel,.card,.topic-card{
  background:
    linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,247,233,.95)) !important;
  border-radius:20px !important;
}
.card:hover,.panel:hover,.topic-card:hover{
  transform:translateY(-3px);
  box-shadow:0 25px 55px rgba(94,41,21,.13) !important;
}
.card h3,.panel h3,.topic-card h3{color:var(--page-accent) !important}

/* Buttons */
.btn.primary{
  background:linear-gradient(135deg,var(--page-accent),var(--page-accent2)) !important;
  border-color:rgba(231,184,72,.55) !important;
}
.btn.ghost,.cta-mini{
  background:rgba(255,253,247,.94) !important;
  border:1px solid rgba(210,160,46,.62) !important;
  color:#a22623 !important;
}

/* SEO topic chips */
.topic-links a{
  background:#fff5dc !important;
  border-color:rgba(201,148,38,.38) !important;
  color:#6c392a !important;
}

/* Footer */
footer{
  background:
    linear-gradient(135deg,#5c1718 0%,#7f1a1f 55%,#8d3519 100%) !important;
  border-top:4px solid #d99b20 !important;
  box-shadow:inset 0 4px 0 rgba(255,226,129,.12);
}

/* Make accidental text selection fit the theme instead of browser blue */
::selection{background:#a51f2d;color:#fff8df}

/* Mobile */
@media(max-width:820px){
  body::before{background-size:300px 300px !important;opacity:.12 !important}
  .hero-card::after{width:70px;height:70px;opacity:.07}
  header::after{bottom:-7px;height:7px}
}
@media(max-width:520px){
  body::before{background-size:260px 260px !important;opacity:.10 !important}
  .hero::after,.section::after,.yt::after{width:220px;opacity:.36}
}