:root{
  --bg:#FBF6EE;
  --ink:#2A1A12;
  --ink-2:#3A2A1E;
  --ink-3:#4A3628;
  --muted:#6E5A4A;
  --maroon:#8E1B12;
  --maroon-hover:#A8240F;
  --link-hover:#B8320F;
  --saffron:#F2A31B;
  --sand:#F7E2BC;
  --sand-2:#EFE3CF;
  --sand-3:#F3E9D8;
  --line:#EADFCB;
  --line-2:#E3D5BE;
  --line-3:#D8C6A8;
  --cream:#FFF8EE;
  --gutter:clamp(16px,4vw,40px);
  --serif:'Newsreader','Noto Serif Tamil',serif;
  --tamil-serif:'Noto Serif Tamil',serif;
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--maroon);text-decoration:none}
a:hover{color:var(--link-hover)}
img{display:block}
[hidden]{display:none !important}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1)}}

.app{min-height:100vh;display:flex;flex-direction:column;font-family:'Hind Madurai',system-ui,sans-serif;font-size:16px;line-height:1.55}
.wrap{max-width:1240px;margin:0 auto}
main{flex:1}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,246,238,0.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header__bar{height:4px;background:var(--saffron)}
.site-header__inner{padding:12px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand img{width:56px;height:56px;object-fit:contain}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--tamil-serif);font-weight:700;font-size:24px;color:var(--maroon)}
.brand__tag{font-size:13px;color:var(--muted);letter-spacing:0.02em}
.main-nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-weight:500;font-size:15px}
.main-nav a{color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.main-nav a.is-active{color:var(--maroon);border-bottom-color:var(--maroon)}

/* Notice (API error) */
.notice{margin:16px auto 0;padding:0 var(--gutter)}
.notice__box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;font-size:13px;color:var(--muted);background:var(--sand-3);border-radius:8px;padding:8px 14px}
.notice__btn{font:inherit;font-weight:600;color:var(--maroon);background:none;border:0;padding:4px 0;cursor:pointer}
.notice__btn:hover{color:var(--link-hover)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-radius:999px;transition:background-color .15s,color .15s,border-color .15s}
.btn--primary{background:var(--maroon);color:var(--cream);padding:14px 24px}
.btn--primary:hover{background:var(--maroon-hover);color:var(--cream)}
.btn--outline{padding:14px 22px;border:1.5px solid var(--maroon);color:var(--maroon)}
.btn--outline:hover{background:var(--maroon);color:var(--cream)}
.btn--ghost{padding:10px 16px;border:1.5px solid var(--line-3);color:var(--ink);font-weight:500;font-size:14px}
.btn--ghost:hover{border-color:var(--maroon);color:var(--maroon)}
.btn--small{padding:10px 18px;font-size:14px}

/* Hero */
.hero{padding:clamp(28px,5vw,64px) var(--gutter) 0}
.hero__card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,5vw,72px);align-items:center;background:var(--sand);border-radius:20px;padding:clamp(24px,5vw,64px)}
.hero__copy{display:flex;flex-direction:column;gap:18px;max-width:520px}
.hero__kicker{font-size:14px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--maroon)}
.hero__title{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-0.01em}
.hero__lead{margin:0;font-size:18px;color:var(--ink-3);text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero__cover{justify-self:center;display:block;width:min(100%,360px);position:relative}
.hero__cover-shadow{position:absolute;inset:16px -16px -16px 16px;background:var(--maroon);border-radius:6px}
.hero__cover-img{position:relative;aspect-ratio:1/1.414;border-radius:6px;overflow:hidden;background:#EAD7B5;box-shadow:0 20px 40px -18px rgba(60,20,0,0.45)}
.hero__cover-img img{width:100%;height:100%;object-fit:cover}

/* Loader */
.loader{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}
.loader__ring{position:relative;width:96px;height:96px}
.loader__ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid rgba(142,27,18,0.14);border-top-color:var(--maroon);border-right-color:var(--saffron);animation:spin 1.1s linear infinite}
.loader__ring img{position:absolute;inset:14px;width:68px;height:68px;object-fit:contain;animation:breathe 2.2s ease-in-out infinite}
.loader__text{font-size:16px;font-weight:600;color:var(--maroon)}
.loader__hint{font-size:14px;color:var(--muted);max-width:320px;opacity:0;transition:opacity .4s}
.is-slow .loader__hint{opacity:1}
.hero__card--loading{display:flex;align-items:center;justify-content:center;min-height:clamp(300px,42vw,520px)}
.reader__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--ink);transition:opacity .4s}
.reader__loading.is-done{opacity:0;pointer-events:none}
.reader__loading .loader__ring::before{border-color:rgba(243,230,210,0.15);border-top-color:var(--saffron);border-right-color:#F3E6D2}
.reader__loading .loader__text{color:#F3E6D2}
.reader__loading .loader__hint{color:#BFAE96}

/* Consent for external content */
.reader__state.consent{gap:14px;overflow-y:auto;justify-content:safe center}
.consent__logo{width:64px;height:64px;object-fit:contain}
.consent__text{margin:0;max-width:520px;font-size:15px;line-height:1.6;color:#E9DCC8;text-wrap:pretty}
.consent__text a{color:var(--saffron);font-weight:600}
.consent__remember{display:flex;align-items:flex-start;gap:10px;max-width:520px;font-size:14px;color:#E9DCC8;cursor:pointer;text-align:left}
.consent__remember input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--saffron);cursor:pointer}
.consent__btn{border:0;font:inherit;font-weight:600;cursor:pointer;margin-top:4px}
.consent__ext{font-size:14px;color:#BFAE96 !important;font-weight:500 !important}
.consent__ext:hover{color:var(--saffron) !important}
.cookie-box{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--sand-3)}
.cookie-box .cookie-status{margin:0;flex:1 1 220px}
.cookie-box .btn{font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:none}
.cookie-box .btn--primary{background:var(--maroon);border:0}

/* Archive grid */
.archive{padding:clamp(40px,6vw,80px) var(--gutter) clamp(48px,6vw,96px);scroll-margin-top:90px}
.archive__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;border-bottom:1px solid var(--line-2);padding-bottom:16px;margin-bottom:32px}
.archive__title{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.5vw,40px)}
.archive__count{font-size:14px;color:var(--muted)}
.grid{--card-min:200px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));gap:clamp(22px,3vw,40px) clamp(14px,2.5vw,28px)}
.grid--loading{gap:clamp(18px,3vw,36px) clamp(14px,2.5vw,28px)}
.skeleton{display:flex;flex-direction:column;gap:10px}
.skeleton__cover{aspect-ratio:1/1.414;border-radius:6px;background:var(--sand-2);animation:pulse 1.4s ease-in-out infinite}
.skeleton__line{height:14px;width:60%;border-radius:4px;background:var(--sand-2)}
.card{display:flex;flex-direction:column;gap:12px;color:var(--ink);transition:transform .2s ease}
.card:hover{transform:translateY(-4px);color:var(--ink)}
.card__cover{aspect-ratio:1/1.414;border-radius:6px;overflow:hidden;background:var(--sand-2);box-shadow:0 10px 24px -14px rgba(60,20,0,0.4),0 0 0 1px rgba(60,20,0,0.06)}
.card__cover img{width:100%;height:100%;object-fit:cover}
.card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card__title{font-family:var(--serif);font-weight:600;font-size:19px}
.card__cta{font-size:13px;font-weight:600;color:var(--maroon);white-space:nowrap}
.empty{font-size:16px;color:var(--muted);padding:24px 0}

/* Reader */
.reader{padding:clamp(16px,3vw,32px) clamp(12px,4vw,40px) clamp(32px,5vw,64px)}
.reader__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.reader__titles{display:flex;flex-direction:column;gap:4px}
.reader__back{font-size:14px;font-weight:600}
.reader__title{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,44px);line-height:1.1}
.reader__actions{display:flex;flex-wrap:wrap;gap:8px}
.reader__frame{position:relative;width:100%;height:calc(100vh - 220px);height:calc(100dvh - 220px);min-height:480px;border-radius:12px;overflow:hidden;background:var(--ink);box-shadow:0 20px 50px -30px rgba(40,10,0,0.6)}
.reader__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reader__state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#F3E6D2;text-align:center;padding:24px}
.reader__state-title{font-family:'Newsreader',var(--tamil-serif);font-size:24px}
.reader__state a{color:var(--saffron);font-weight:600}

/* Legal pages */
.legal{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,72px) var(--gutter) clamp(48px,6vw,96px)}
.legal h1{margin:0 0 32px;font-family:'Newsreader',serif;font-weight:600;font-size:clamp(36px,5vw,52px);line-height:1.05}
.legal__body{display:flex;flex-direction:column;gap:28px;font-size:16px;color:var(--ink-2)}
.legal h2{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--ink)}
.legal p{margin:0;text-wrap:pretty}
.legal p + p,.legal ul + p{margin-top:12px}
.legal ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.legal__note{font-size:15px;color:var(--muted)}

/* Footer */
.site-footer{background:var(--ink);color:#E9DCC8}
.site-footer__inner{padding:40px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.site-footer__brand{display:flex;align-items:center;gap:14px}
.site-footer__brand img{width:52px;height:52px;object-fit:contain}
.site-footer__text{display:flex;flex-direction:column;line-height:1.3}
.site-footer__name{font-family:var(--tamil-serif);font-weight:700;font-size:20px;color:var(--saffron)}
.site-footer__copy{font-size:13px;color:#BFAE96}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.site-footer nav a{color:#E9DCC8}
.site-footer nav a:hover{color:var(--saffron)}
.site-footer__sep{color:var(--muted)}

/* Consent banner (sticks to the bottom of the viewport, never covers the footer) */
.consent-banner{position:sticky;bottom:0;z-index:30;background:var(--ink);color:#E9DCC8;border-top:4px solid var(--saffron);box-shadow:0 -12px 30px -18px rgba(40,10,0,0.6)}
.consent-banner__inner{padding:16px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px}
.consent-banner__text{margin:0;flex:1 1 420px;font-size:14px;line-height:1.6;text-wrap:pretty}
.consent-banner__text strong{color:var(--cream)}
.consent-banner__text a{color:var(--saffron);font-weight:600;white-space:nowrap}
.consent-banner__text a:hover{color:#FFC65C}
.consent-banner__actions{display:flex;gap:10px;flex:0 0 auto}
.consent-banner__btn{font:inherit;font-size:15px;font-weight:600;min-width:132px;padding:11px 20px;border-radius:999px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.consent-banner__btn--primary{background:var(--saffron);color:var(--ink);border:1.5px solid var(--saffron)}
.consent-banner__btn--primary:hover{background:#FFB938;border-color:#FFB938}
.consent-banner__btn--secondary{background:transparent;color:var(--cream);border:1.5px solid #E9DCC8}
.consent-banner__btn--secondary:hover{background:var(--cream);color:var(--ink)}
@media (max-width:560px){
  .consent-banner__actions{width:100%}
  .consent-banner__btn{flex:1;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .card,.btn{transition:none}
  .card:hover{transform:none}
  .skeleton__cover{animation:none}
  .loader__ring::before{animation-duration:3s}
  .loader__ring img{animation:none}
}