:root{--red:#b71c1c;--red-d:#8e0000;--gold:#ffb300;--ink:#1a1a1a;--text:#2b2b2b;--muted:#6b6b6b;--line:#e6e6e6;--bg:#f2f3f5;--card:#fff;--head:'Noto Serif Tamil','Mukta Malar',serif;--body:'Mukta Malar','Noto Sans Tamil',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);color:var(--ink);line-height:1.4;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* top bar */
.topbar{background:var(--red-d);color:#ffd9d9;font-size:14px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:32px}
.tb-links a{margin-left:16px;color:#fff;font-weight:500}

/* masthead */
.mast{background:#fff;border-top:4px solid var(--gold)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 16px}
.logo{display:block;flex:none}
.logo img{height:92px;width:auto}
.mast-ad{flex:1;max-width:728px;min-width:0}

/* category nav */
.catnav{background:linear-gradient(90deg,var(--red),#d32f2f 60%,#e65100);border-bottom:0;position:sticky;top:0;z-index:50;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.catnav-row{display:flex;overflow-x:auto;scrollbar-width:none;gap:2px}
.catnav-row::-webkit-scrollbar{display:none}
.catnav a{flex:none;padding:12px 16px;font-weight:700;font-size:16px;color:#fff;border-bottom:4px solid transparent}
.catnav a:hover{background:rgba(0,0,0,.15)}
.catnav a.on{background:rgba(0,0,0,.22);border-bottom-color:var(--gold)}

/* ticker */
.ticker{background:#fffbea;border-bottom:2px solid var(--gold)}
.ticker-row{display:flex;align-items:center;gap:8px;overflow:hidden;padding:0 16px}
.live{flex:none;display:inline-flex;align-items:center;gap:6px;background:#111;color:#fff;font-weight:800;font-size:13px;letter-spacing:1px;padding:4px 10px;border-radius:3px}
.live-dot{width:9px;height:9px;border-radius:50%;background:#ff1744;box-shadow:0 0 0 0 rgba(255,23,68,.7);animation:pulse 1.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,23,68,0)}100%{box-shadow:0 0 0 0 rgba(255,23,68,0)}}
.ticker-tag{flex:none;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:4px 12px;border-radius:3px;margin:8px 0}
.ticker-move b{color:var(--red);margin-right:6px;font-weight:800}
.ticker-track{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ticker-move{display:flex;gap:40px;white-space:nowrap;animation:tick 45s linear infinite;width:max-content}
.ticker-move a{font-weight:500;font-size:15px}
.ticker-move a::before{content:"◆";color:var(--gold);margin-right:10px;font-size:11px;vertical-align:middle}
.ticker:hover .ticker-move{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

.page{padding-top:20px;padding-bottom:24px}
.empty{color:var(--muted);background:#fff;padding:24px;border-radius:8px}

/* hero */
.hero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:26px}
.hero-main{position:relative;border-radius:10px;overflow:hidden;background:var(--ink);min-height:380px;display:block}
.hero-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-text{position:absolute;inset:auto 0 0 0;padding:70px 22px 22px;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.hero-text h2{color:#fff;font-size:clamp(22px,3vw,32px);margin:10px 0 6px}
.hero-text p{color:#e6e6e6;margin:0;font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-block;background:var(--c);color:#fff;font-weight:700;font-size:14px;padding:2px 12px;border-radius:3px}
.hero-list{display:flex;flex-direction:column;gap:12px}
.mini{display:flex;gap:12px;background:#fff;border-radius:8px;padding:10px;flex:1;align-items:center}
.mini img{width:112px;height:80px;object-fit:cover;border-radius:6px;flex:none}
.mini h3{font-size:16px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini:hover h3,.card:hover h3,.row:hover h2{color:var(--red)}
.kicker{font-size:13px;font-weight:700}
time{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}

/* category blocks */
.cat-block{background:#fff;border-radius:10px;padding:16px;margin-bottom:22px;border-top:5px solid var(--c)}
.cat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cat-head h2{font-size:22px;color:var(--c)}
.cat-head a{font-weight:700;color:var(--c);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card .img{aspect-ratio:16/10;background:#eceff1;border-radius:6px;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:16px;line-height:1.5;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* sidebar */
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:64px}
.box{background:#fff;border-radius:10px;overflow:hidden}
.box-title{background:var(--ink);color:#fff;font-size:18px;padding:10px 16px}
.latest{list-style:none;margin:0;padding:4px 16px;counter-reset:n}
.latest li{counter-increment:n;padding:10px 0 10px 38px;position:relative;border-bottom:1px solid var(--line)}
.latest li:last-child{border:0}
.latest li::before{content:counter(n);position:absolute;left:0;top:10px;width:28px;height:28px;border-radius:50%;background:#fde7e7;color:var(--red);font-weight:800;display:grid;place-items:center;font-size:14px}
.latest a{font-weight:600;font-size:15px;line-height:1.5}
.latest a:hover{color:var(--red)}

/* category page */
.cat-banner{background:var(--c);color:#fff;border-radius:10px;padding:18px 22px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.cat-banner h1{color:#fff;font-size:28px}
.cat-banner a{background:rgba(255,255,255,.2);padding:4px 12px;border-radius:4px;font-weight:700}
.list{display:flex;flex-direction:column;gap:14px}
.row{display:grid;grid-template-columns:240px 1fr;gap:16px;background:#fff;border-radius:10px;padding:12px}
.row .img{aspect-ratio:16/10;background:#eceff1;border-radius:6px;overflow:hidden}
.row img{width:100%;height:100%;object-fit:cover}
.row h2{font-size:20px}
.row p{margin:6px 0 0;color:var(--muted);font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* article */
.post{background:#fff;border-radius:10px;padding:28px 32px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:10px}
.crumbs a:last-child{color:var(--c);font-weight:700}
.post h1{font-size:clamp(24px,3.4vw,34px);line-height:1.4}
.standfirst{font-size:19px;color:#444;margin:12px 0 0;padding-left:14px;border-left:4px solid var(--c)}
.byline{display:flex;align-items:center;gap:12px;margin:18px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline strong{display:block;line-height:1.3}.byline time{margin:0}
.by-avatar{width:42px;height:42px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.wa{margin-left:auto;background:#25d366;color:#fff;font-weight:700;padding:7px 16px;border-radius:20px;font-size:15px}
figure{margin:0 0 20px}figure img{width:100%;border-radius:8px}
.body{font-size:19px;line-height:1.95;color:#222}
.body p{margin:0 0 1.1em}
.related{margin-top:28px;padding-top:18px;border-top:3px solid var(--c)}
.related h2{font-size:21px;margin-bottom:14px}
.related .cards{grid-template-columns:repeat(2,1fr)}

/* ads */
.ad{text-align:center}
.ad-label{display:block;font-size:11px;color:#999;margin-bottom:2px}
.ad img{margin:0 auto;border-radius:4px}
.ad-sidebar{background:#fff;border-radius:10px;padding:10px}
.ad-in_article{margin:24px 0;padding:12px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.ad-footer{margin:0 0 24px}

.ad-slider{position:relative}
.ad-slide{display:none}.ad-slide.on{display:block;animation:fadein .5s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.ad-dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.ad-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#ccc;padding:0;cursor:pointer}
.ad-dots button.on{background:var(--red);width:20px;border-radius:4px}
.house-ad{display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#fff8e1 0%,#ffe082 45%,#ffb300 100%);border:2px dashed #e65100;border-radius:10px;padding:10px 16px;color:var(--red-d);text-align:left;position:relative;overflow:hidden}
.house-ad::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.5s infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.house-ad img{width:56px;height:56px;flex:none}
.ha-text{flex:1;min-width:0}
.ha-text strong{display:block;font-family:var(--head);font-size:19px;line-height:1.3}
.ha-text small{display:block;color:#5d4037;font-size:14px}
.ha-btn{flex:none;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:20px;box-shadow:0 3px 0 var(--red-d)}
.house-ad.tall{flex-direction:column;text-align:center;padding:22px 16px;min-height:250px;justify-content:center}
.house-ad.tall img{width:84px;height:84px}
.mast-ad .house-ad{padding:8px 14px}.mast-ad .house-ad img{width:46px;height:46px}
.mast-ad .ha-text strong{font-size:17px}

.soc{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:14px;margin-left:14px}
.soc svg{width:16px;height:16px;fill:currentColor}
.soc:hover{color:var(--gold)}
.foot-social{display:flex;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.foot-social .soc{margin:0;padding:6px 14px;border-radius:20px;font-size:14px}
.foot-social .soc.wa{background:#25d366}.foot-social .soc.fb{background:#1877f2}.foot-social .soc.ig{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)}
.foot-social .soc:hover{color:#fff;filter:brightness(1.1)}
.wa-follow{display:flex;align-items:center;gap:12px;background:#e8f8ee;border:1.5px solid #25d366;border-radius:10px;padding:12px 16px;margin-top:20px;font-weight:600}
.wa-follow a{margin-left:auto;background:#25d366;color:#fff;padding:7px 16px;border-radius:20px;white-space:nowrap}

.source-box{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#e3f2fd;border-left:5px solid #1565c0;border-radius:8px;padding:14px 16px;margin:16px 0;font-size:16px}
.source-box a{background:#1565c0;color:#fff;font-weight:700;padding:8px 18px;border-radius:20px}

.img.noimg,.noimg{background:linear-gradient(135deg,#ffe082,#ffb300) center/48px no-repeat}

/* footer */
.foot{background:#1c1c1c;color:#bdbdbd;margin-top:10px;border-top:5px solid var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;padding-top:30px;padding-bottom:24px}
.foot h4{color:#fff;margin:0 0 10px;font-size:17px}
.foot-grid a{display:block;padding:3px 0}.foot-grid a:hover{color:var(--gold)}
.foot-grid a.foot-logo{display:inline-flex;align-items:center;margin-bottom:12px;width:auto}
.foot-logo img{height:64px;width:auto;display:block}
.foot-about p{margin:0;max-width:420px;color:#bdbdbd;font-size:15px;line-height:1.7}
.foot-cats{display:flex;flex-direction:column}
.foot-cats .cat-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.foot-bottom{text-align:center;padding:14px;border-top:1px solid #333;font-size:14px}

/* responsive */
@media(max-width:1024px){
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  body{font-size:16px}
  .topbar .tb-links{display:none}
  .mast-row{padding:8px 12px;flex-direction:column;align-items:center;gap:8px}
  .mast-ad{width:100%}
  .logo img{height:64px}
  .catnav a{padding:10px 12px;font-size:15px}
  .wrap{padding:0 12px}
  .page{padding-top:12px}
  .hero{grid-template-columns:1fr;gap:12px}
  .hero-main{min-height:260px}
  .hero-text{padding:50px 14px 14px}
  .mini img{width:96px;height:68px}
  .cat-block{padding:12px;border-radius:8px}
  .cat-head h2{font-size:19px}
  .cards{gap:12px}
  .card h3{font-size:15px}
  .row{grid-template-columns:120px 1fr;gap:12px;padding:10px}
  .row h2{font-size:16px}.row p{display:none}
  .post{padding:16px;border-radius:0;margin:0 -12px}
  .standfirst{font-size:17px}
  .body{font-size:18px;line-height:1.9}
  .byline{flex-wrap:wrap}
  .foot-grid{grid-template-columns:1fr;gap:22px;text-align:center}
  .foot-about p{margin:0 auto}
  .foot-social{justify-content:center}
  .foot-cats .cat-links{justify-items:center}
  .ticker-tag{font-size:13px;padding:3px 8px}
}
@media(max-width:760px){
  .ticker-tag{display:none}
  .house-ad.wide{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .house-ad.wide img{width:42px;height:42px}
  .house-ad.wide .ha-text strong{font-size:16px}
  .house-ad.wide .ha-btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){.ticker-move,.house-ad::after,.live-dot{animation:none}}

/* ===== header animations ===== */
.mast{position:relative;border-top:0}
.mast::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#ff6f00,#ffb300,#fff59d,#ffb300,#ff6f00);background-size:200% 100%;animation:goldline 4s linear infinite}
@keyframes goldline{to{background-position:200% 0}}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff1744;margin-right:8px;vertical-align:1px;box-shadow:0 0 0 0 rgba(255,23,68,.7);animation:pulse 1.6s infinite}
.tb-clock{margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.3);color:#ffd54f;font-weight:700;font-variant-numeric:tabular-nums}
.logo{position:relative;overflow:hidden;border-radius:10px;animation:logoRise .9s cubic-bezier(.2,.9,.3,1.2) both}
.logo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:logoShine 6s 1.2s ease-in-out infinite;pointer-events:none}
@keyframes logoRise{from{opacity:0;transform:translateY(-12px) scale(.96)}}
@keyframes logoShine{0%{left:-60%}18%,100%{left:130%}}
.logo:hover img{transform:scale(1.03)}.logo img{transition:transform .3s}
.mast-ad .ad{position:relative;animation:adIn .8s .3s both}
@keyframes adIn{from{opacity:0;transform:translateX(20px)}}
.mast-ad .ad>a,.mast-ad .ad-slide>a{display:block;position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s}
.mast-ad .ad>a::after,.mast-ad .ad-slide>a::after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:logoShine 7s 2s ease-in-out infinite}
.mast-ad .ad a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.catnav{background-size:200% 100%;animation:navflow 12s ease-in-out infinite alternate}
@keyframes navflow{to{background-position:100% 0}}
.catnav{background-image:linear-gradient(90deg,#b71c1c,#d32f2f 40%,#e65100 70%,#b71c1c)}
.catnav a{position:relative;animation:navIn .5s both}
.catnav a:nth-child(1){animation-delay:.1s}.catnav a:nth-child(2){animation-delay:.16s}.catnav a:nth-child(3){animation-delay:.22s}.catnav a:nth-child(4){animation-delay:.28s}.catnav a:nth-child(5){animation-delay:.34s}.catnav a:nth-child(6){animation-delay:.4s}.catnav a:nth-child(7){animation-delay:.46s}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}}
.catnav a::before{content:"";position:absolute;left:50%;right:50%;bottom:0;height:4px;background:#ffb300;border-radius:4px 4px 0 0;transition:left .25s,right .25s}
.catnav a:hover::before,.catnav a.on::before{left:12px;right:12px}
.catnav a.on{border-bottom-color:transparent}
.catnav a:hover{background:rgba(0,0,0,.12)}
@media(prefers-reduced-motion:reduce){.mast::before,.live-dot,.logo,.logo::after,.mast-ad .ad,.mast-ad .ad a::after,.catnav,.catnav a{animation:none!important}}

/* ===== top bar trending rotator + masthead ambience ===== */
.topbar .wrap{gap:18px}
.tb-flash{flex:1;display:flex;align-items:center;gap:10px;min-width:0;max-width:640px;margin-left:auto}
.tb-flash-tag{flex:none;background:#ffb300;color:#5d0000;font-weight:800;font-size:12px;padding:2px 10px;border-radius:3px;animation:tagGlow 2s ease-in-out infinite}
@keyframes tagGlow{50%{box-shadow:0 0 12px rgba(255,179,0,.8)}}
.tb-flash-box{position:relative;flex:1;height:22px;overflow:hidden}
.tb-flash-box a{position:absolute;inset:0;color:#fff;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.9,.3,1),opacity .55s}
.tb-flash-box a.on{opacity:1;transform:none}
.tb-flash-box a.out{opacity:0;transform:translateY(-100%)}
.tb-flash-box a:hover{color:#ffd54f;text-decoration:underline}
.mast{overflow:hidden}
.mast .wrap{position:relative;z-index:1}
.mast-glow{position:absolute;border-radius:50%;filter:blur(50px);opacity:.16;pointer-events:none;animation:mastFloat 14s ease-in-out infinite alternate}
.mast-glow.g1{width:420px;height:420px;background:#e53935;left:-120px;top:-180px}
.mast-glow.g2{width:360px;height:360px;background:#ffb300;right:-80px;bottom:-200px;animation-duration:18s}
@keyframes mastFloat{to{transform:translate(90px,40px) scale(1.15)}}
.mast-dots{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(rgba(183,28,28,.18) 1.2px,transparent 1.3px);background-size:22px 22px;animation:dotsMove 30s linear infinite;mask-image:linear-gradient(90deg,#000,transparent 45%,transparent 60%,#000)}
@keyframes dotsMove{to{background-position:220px 110px}}
.logo img{animation:logoGlow 5s ease-in-out infinite}
@keyframes logoGlow{50%{filter:drop-shadow(0 4px 14px rgba(255,179,0,.45))}}
@media(max-width:760px){.tb-flash{max-width:none;margin:0}.tb-flash-tag{font-size:11px;padding:2px 6px}.tb-flash-box a{font-size:13px}.topbar .date .tb-clock{display:none}.topbar .wrap{flex-wrap:nowrap}.topbar .date{display:none}}
@media(prefers-reduced-motion:reduce){.tb-flash-tag,.mast-glow,.mast-dots,.logo img{animation:none!important}.tb-flash-box a{transition:none}}

/* plain white masthead behind logo */
.mast{background:#fff!important}
.mast-glow,.mast-dots{display:none!important}
.logo img{animation:none!important;filter:none!important}
.logo{background:#fff}

/* ===== full-width layout ===== */
.wrap{max-width:none;width:100%;padding-left:clamp(12px,3vw,48px);padding-right:clamp(12px,3vw,48px);box-sizing:border-box}
.layout{grid-template-columns:minmax(0,1fr) clamp(280px,22vw,380px)}
.hero{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.hero-main{min-height:clamp(340px,34vw,560px)}
.cards{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.related .cards{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.foot-grid{grid-template-columns:1.4fr 1fr}
.post{max-width:none}
.body,.standfirst{max-width:860px}
@media(min-width:1600px){.hero-list .mini{padding:12px}.mini img{width:150px;height:96px}.mini h3{font-size:17px}}
@media(max-width:1024px){.layout{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}
/* news without a picture: branded placeholder instead of an empty grey box */
.card .img,.row .img{position:relative}
.card .img:not(:has(img)),.row .img:not(:has(img)),.card .img.noimg,.row .img.noimg{background:linear-gradient(135deg,#fff3e0,#ffe0b2) center/42% no-repeat}
.card .img:not(:has(img))::after,.row .img:not(:has(img))::after,.card .img.noimg::after,.row .img.noimg::after{content:"";position:absolute;inset:0;background:url(/assets/icon-192.png?v=2) center/38% no-repeat;opacity:.55}