/* ==========================================================================
   Content pages (chola, literature, explore, engine, about).
   These pages render their own markup from JSON with the class names below.
   This file maps those names onto the design-system tokens, so the pages get
   the new look without their data code changing. Colours only via tokens.
   ========================================================================== */
body{margin:0;background:var(--bg);color:var(--text);font:var(--text-base)/1.65 var(--font-body)}
img{max-width:100%;display:block}
.wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter);padding-block:var(--space-4) var(--space-7)}
.narrow{max-width:var(--measure)}
.mute{color:var(--text-muted)}
.ta{font-family:var(--font-tamil);line-height:max(1.7,var(--ta-lh))}
.br{font-family:var(--font-brahmi);font-feature-settings:"ccmp","locl","mark","mkmk","liga","clig"}
main section{padding-block:var(--space-7)}
.section-alt{background:var(--bg-alt);border-block:1px solid var(--rule)}

.crumbs{font:max(var(--text-sm),var(--ta-floor))/1.5 var(--font-ui);color:var(--text-muted);margin:var(--space-5) 0 var(--space-2)}
.hero{padding-block:var(--space-7) var(--space-6)}
.hero-grid{display:grid;gap:var(--space-6);align-items:center}
@media(min-width:54rem){.hero-grid{grid-template-columns:1.25fr .9fr}}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.btns{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch);padding-inline:var(--space-4);border-radius:var(--radius-2);border:2px solid var(--button-bg);background:var(--button-bg);color:var(--button-text);font:600 var(--text-sm)/1 var(--font-ui);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--button-bg-hover);border-color:var(--button-bg-hover);color:var(--button-text)}
.btn.ghost{background:transparent;color:var(--accent-text);border-color:var(--accent)}
.btn.ghost:hover{background:var(--bg-alt);color:var(--text)}
.btn.sm{min-height:2.25rem;padding-inline:var(--space-3);font-size:var(--text-xs)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

.grid{display:grid;gap:var(--space-5)}
.g2,.g3,.g4{grid-template-columns:1fr}
@media(min-width:40rem){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;margin:0;padding:var(--space-4);background:var(--surface);color:var(--text);border:1px solid var(--edge);border-radius:var(--radius-2);box-shadow:var(--shadow-rest);text-decoration:none}
a.card:hover{box-shadow:var(--shadow-lift);border-color:var(--accent)}
.card h3{margin-bottom:var(--space-1)}
.card p{margin:0;color:var(--text-muted);font-size:var(--text-sm)}
.card .glyph{display:block;margin-bottom:var(--space-2);font:400 2rem var(--font-brahmi);color:var(--accent-text)}
.tile{padding:var(--space-5);background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius-3);box-shadow:var(--shadow-rest)}
.tile .big{font:400 clamp(3.2rem,9vw,5.6rem)/1.1 var(--font-brahmi);color:var(--accent-text);word-break:break-all}
.tile .tam{font:600 1.6rem var(--font-tamil);margin-top:var(--space-2)}
.stat b{display:block;font:700 2.2rem var(--font-display);color:var(--accent-text)}.stat span{color:var(--text-muted);font-size:var(--text-sm)}
.pill{display:inline-flex;align-items:center;padding:.125rem var(--space-3);border-radius:var(--radius-pill);background:var(--bg-alt);color:var(--text-muted);border:1px solid var(--edge);font:600 var(--text-xs)/1.5 var(--font-ui)}
.pill.ok{color:var(--text);border-color:var(--accent)}
.pill.warn{color:var(--text);border-style:dashed;border-color:var(--text-muted)}
.note{margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border:1px dashed var(--text-muted);border-radius:var(--radius-2);background:var(--surface);color:var(--text-muted);font-size:var(--text-sm)}
.kural{font:500 1.3rem/1.7 var(--font-tamil);border-left:3px solid var(--accent);padding-left:var(--space-4)}
.kural .br{display:block;font-size:1.5rem;color:var(--accent-text);margin-top:var(--space-2)}

/* article / reading */
.article{max-width:var(--measure)}
.article h2{margin-top:1.8em}.article h3{margin-top:1.4em}
.article p{font-size:var(--text-base);margin-bottom:1.15em}
.article.tam p{font-family:var(--font-tamil);line-height:1.95}
.attr{font-size:var(--text-sm);color:var(--text-muted);border-top:1px solid var(--rule);padding-top:var(--space-4);margin-top:var(--space-6)}
.layout{display:grid;gap:var(--space-6);align-items:start}
@media(min-width:56rem){.layout{grid-template-columns:280px 1fr}}
.side{border-right:1px solid var(--rule);padding-right:var(--space-4)}
@media(min-width:56rem){.side{position:sticky;top:var(--space-4);max-height:calc(100vh - 2rem);overflow:auto}}
@media(max-width:55.99rem){.side{border:0;padding:0}}
.side h4{font:700 var(--text-xs)/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:var(--space-4) 0 var(--space-2)}
.side a{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-2);text-decoration:none;color:var(--text);font-size:var(--text-sm);line-height:1.35}
.side a:hover{background:var(--bg-alt)}
.side a.on{background:var(--button-bg);color:var(--button-text)}
.side a small{display:block;color:var(--text-muted);font-size:var(--text-xs)}
.side a.on small{color:inherit}
.toolbar{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center;margin:var(--space-3) 0 var(--space-5)}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:var(--radius-pill);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--text);min-height:var(--touch);padding-inline:var(--space-4);font:600 var(--text-sm) var(--font-ui);cursor:pointer}
.seg button.on{background:var(--button-bg);color:var(--button-text)}
.toolbar input[type=search]{border:1px solid var(--edge);background:var(--surface);color:var(--text);border-radius:var(--radius-pill);min-height:var(--touch);padding-inline:var(--space-4);font:var(--text-sm) var(--font-ui);min-width:200px}
.poem{font:500 1.22rem/1.95 var(--font-tamil);white-space:pre-wrap}
.poem .bline,.couplet .bline{display:block;font:400 1.35rem/1.6 var(--font-brahmi);color:var(--accent-text)}
.poem .bline{margin:0 0 var(--space-3)}
.poem-line{margin:0 0 .5em}
.couplet{position:relative;margin:0 0 var(--space-3);padding:var(--space-4) var(--space-5) var(--space-4) 4rem;background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius-2);font:500 1.2rem/1.8 var(--font-tamil)}
.couplet .n{position:absolute;left:var(--space-4);top:var(--space-4);width:2.25rem;height:2.25rem;border-radius:50%;background:var(--bg-alt);color:var(--accent-text);font:700 var(--text-xs)/2.25rem var(--font-ui);text-align:center}
.couplet .bline{margin-top:var(--space-2)}
mark{background:color-mix(in srgb,var(--accent) 35%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.pager{display:flex;justify-content:space-between;gap:var(--space-3);margin:var(--space-6) 0}
.works-group h3{margin:var(--space-6) 0 var(--space-3)}
.work-card .meta{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.work-card .t{font:600 1.35rem var(--font-tamil);margin-bottom:2px}
.work-card .e{font:600 1rem var(--font-display);color:var(--text-muted)}

/* forms and tables */
.panel{padding:var(--space-4);background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius-2);box-shadow:var(--shadow-rest)}
.panel h3{font:700 var(--text-xs)/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-3)}
textarea,select,input[type=text]{width:100%;border:1px solid var(--edge);background:var(--bg);color:var(--text);border-radius:var(--radius-2);padding:var(--space-3);font:1.1rem/1.5 var(--font-tamil)}
select{font:var(--text-sm) var(--font-ui)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.tbl th,.tbl td{border-bottom:1px solid var(--rule);padding:var(--space-2) var(--space-3);text-align:left;vertical-align:middle}
.tbl th{font:700 var(--text-xs) var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.tbl .br{font-size:1.7rem;color:var(--accent-text)}
.chart-wrap{overflow:auto;border:1px solid var(--edge);border-radius:var(--radius-2);background:var(--surface)}

.toast{position:fixed;left:50%;bottom:var(--space-5);transform:translate(-50%,1rem);padding:var(--space-3) var(--space-4);background:var(--ink);color:var(--paper);border-radius:var(--radius-2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}