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

:root{
  --clr-bg:#f8f6f1;
  --clr-surface:#ffffff;
  --clr-primary:#2d6a4f;
  --clr-primary-light:#40916c;
  --clr-accent:#d4a373;
  --clr-text:#1b1b1b;
  --clr-text-muted:#5a5a5a;
  --clr-border:#e0ddd5;
  --radius:10px;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --shadow-hover:0 6px 24px rgba(0,0,0,.10);
  --max-w:95%;
  --font-sans:'Noto Sans Tamil','Segoe UI',system-ui,sans-serif;
  --font-serif:'Noto Serif Tamil','Georgia',serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--clr-bg);color:var(--clr-text);line-height:1.75;font-size:17px}

a{color:var(--clr-primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--clr-primary-light)}

/* ── HEADER ── */
.site-header{
  background:var(--clr-primary);
  color:#fff;
  padding:1.2rem 1.5rem;
  position:sticky;top:0;z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.site-header .wrap{max-width:90%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.site-header h1{font-family:var(--font-serif);font-size:1.4rem;font-weight:700;letter-spacing:.02em}
.site-header h1 a{color:#fff}
.site-header nav a{color:rgba(255,255,255,.85);margin-left:1.5rem;font-size:.95rem;font-weight:500}
.site-header nav a:hover{color:#fff}

/* ── HERO ── */
.hero{
  text-align:center;
  padding:3.5rem 1.5rem 2.5rem;
  max-width:90%;margin:0 auto;
}
.hero h2{font-family:var(--font-serif);font-size:2rem;margin-bottom:.6rem;color:var(--clr-primary)}
.hero p{color:var(--clr-text-muted);font-size:1.05rem}

/* ── CARD GRID ── */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.8rem;
  max-width:100%;margin:0 auto;
  padding:0 1.5rem 3rem;
}

.card{
  background:var(--clr-surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s,box-shadow .25s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

.card-img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:linear-gradient(135deg,var(--clr-primary),var(--clr-accent));
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:#fff;overflow:hidden;
}
.card-img img{width:100%;height:100%;object-fit:cover}

.article-hero{width:100%;max-width:100%;height:auto;border-radius:var(--radius);margin-bottom:2rem;display:block}

.article-step-img{width:100%;height:auto;border-radius:12px;margin:1.5rem 0;display:block}

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

.card-body{padding:1.3rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column}
.card-tag{
  display:inline-block;
  background:rgba(45,106,79,.1);
  color:var(--clr-primary);
  font-size:.75rem;font-weight:600;
  padding:.25rem .7rem;border-radius:20px;
  margin-bottom:.6rem;width:fit-content;
}
.card-body h3{font-family:var(--font-serif);font-size:1.2rem;margin-bottom:.5rem;line-height:1.4}
.card-body p{color:var(--clr-text-muted);font-size:.92rem;flex:1}
.card-body .read-more{
  display:inline-block;margin-top:1rem;
  font-weight:600;font-size:.9rem;
  color:var(--clr-primary);
}
.card-body .read-more::after{content:' \2192'}

/* ── ARTICLE PAGE ── */
.article-wrap{max-width:var(--max-w);margin:0 auto;padding:2.5rem 1.5rem 4rem}

.article-wrap .breadcrumb{
  font-size:.85rem;color:var(--clr-text-muted);margin-bottom:1.5rem;
}
.article-wrap .breadcrumb a{color:var(--clr-primary)}

.article-header{text-align:center;margin-bottom:2.5rem}
.article-header h1{font-family:var(--font-serif);font-size:2rem;line-height:1.35;margin-bottom:.5rem}
.article-header .meta{color:var(--clr-text-muted);font-size:.9rem}

.article-body h2{
  font-family:var(--font-serif);
  font-size:1.35rem;
  color:var(--clr-primary);
  margin:2.2rem 0 .8rem;
  padding-bottom:.35rem;
  border-bottom:2px solid var(--clr-accent);
}
.article-body p{margin-bottom:1rem}
.article-body ul,.article-body ol{margin:.8rem 0 1rem 1.5rem}
.article-body li{margin-bottom:.4rem}
.article-body strong{color:var(--clr-primary)}

/* ── FOOTER ── */
.site-footer{
  text-align:center;
  padding:2rem 1.5rem;
  color:var(--clr-text-muted);
  font-size:.85rem;
  border-top:1px solid var(--clr-border);
}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .hero h2{font-size:1.5rem}
  .card-grid{grid-template-columns:1fr}
  .article-wrap{padding:1.5rem 1rem 3rem}
  .article-header h1{font-size:1.5rem}
  .article-hero{border-radius:0;margin-left:-1rem;margin-right:-1rem;width:calc(100% + 2rem)}
  .article-step-img{max-width:100%}
}

/* ── FILTER BAR ── */
.filter-bar{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem 1.5rem}
.filter-wrap{display:flex;flex-direction:column;gap:1rem}
.search-input{
  width:100%;padding:.8rem 1.2rem;
  border:2px solid var(--clr-border);border-radius:var(--radius);
  font-size:1rem;font-family:var(--font-sans);
  background:var(--clr-surface);transition:border-color .2s;
}
.search-input:focus{outline:none;border-color:var(--clr-primary)}
.filter-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-btn{
  padding:.45rem 1rem;border:2px solid var(--clr-border);
  border-radius:20px;background:var(--clr-surface);
  font-size:.85rem;font-weight:500;font-family:var(--font-sans);
  color:var(--clr-text-muted);cursor:pointer;transition:all .2s;
}
.filter-btn:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.filter-btn.active{background:var(--clr-primary);color:#fff;border-color:var(--clr-primary)}
.no-results{text-align:center;padding:3rem 1rem;color:var(--clr-text-muted);font-size:1.1rem}
.card.hidden{display:none}

.filter-row{display:flex;gap:.5rem;align-items:center}
.translit-btn{
  padding:.55rem .9rem;border:2px solid var(--clr-border);
  border-radius:var(--radius);background:var(--clr-surface);
  font-size:.8rem;font-weight:600;font-family:var(--font-sans);
  color:var(--clr-text-muted);cursor:pointer;transition:all .2s;white-space:nowrap;
}
.translit-btn:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.translit-btn.active{background:var(--clr-primary);color:#fff;border-color:var(--clr-primary)}
@media(max-width:600px){.filter-row{flex-direction:column;align-items:stretch}.translit-btn{align-self:flex-end}}