/* Full stylesheet — loaded non-blocking. Anything above the fold is already
   painted from critical.css, so nothing here may change layout of the header,
   the sponsor rail, the nav or the countdown. */

/* ---------------------------------------------------------------- layout */
main.wrap{padding-top:8px;padding-bottom:32px}
.sec{margin:28px 0}
.sec__h{font-size:19px;margin:0 0 14px;padding-bottom:8px;position:relative;
  border-bottom:2px solid var(--border);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* A short gold underline under the heading text, echoing the parent site's
   banded headings without importing its ornamental artwork. */
.sec__h::after{content:"";position:absolute;left:0;bottom:-2px;width:96px;height:3px;
  background:var(--gold-line);border-radius:2px}
.sec__more{font-size:13px;font-weight:400;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px;padding:0 2px}
.sec--prose p{max-width:68ch}

.crumbs{margin:10px 0 4px}
.crumbs__list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--muted)}
.crumbs__item+.crumbs__item::before{content:"›";margin-inline-end:6px;color:#c4b5ae}
.crumbs__item a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.crumbs__item a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- article */
.art{margin:12px 0 24px}
.art__h1{font-size:26px;line-height:1.28;margin:0 0 12px}
@media(min-width:720px){.art__h1{font-size:32px}}
.art__lede{font-size:17px;color:#4a423f;max-width:68ch}
.art__alt,.art__meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.art__body p,.art__body{max-width:68ch}
.art__flag{background:#fff4e0;border-inline-start:4px solid var(--gold);padding:10px 14px;border-radius:0 8px 8px 0;font-size:14px}
.art__rel{font-weight:700}
.art--404{text-align:center;padding:32px 0}
.art--404 .links{display:inline-block;text-align:start}

.deskflag{background:#ffe7e7;border:1px dashed var(--live);color:#8c2b20;padding:8px 12px;
  border-radius:6px;font-size:13px}
.needs-verify{background:#fff8d8;border-inline-start:3px solid var(--gold);padding-inline-start:10px}

.facts{display:grid;gap:0;margin:16px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.facts__row{display:grid;grid-template-columns:minmax(92px,32%) 1fr;gap:12px;padding:9px 14px;
  border-bottom:1px solid #f2e9e1}
/* On wide screens a percentage column pushes the value into the middle of the
   row; cap it so label and value stay visually paired. */
@media(min-width:720px){.facts__row{grid-template-columns:180px 1fr}}
.facts__row:last-child{border-bottom:0}
.facts dt{font-size:13px;color:var(--muted);margin:0}
.facts dd{margin:0;font-size:14px;font-weight:600}

.ticks{list-style:none;padding:0;display:grid;gap:7px}
.ticks li{padding-inline-start:24px;position:relative;font-size:15px}
.ticks li::before{content:"";position:absolute;inset-inline-start:4px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

.links{list-style:none;padding:0;display:grid;gap:6px}
.links a{font-size:15px;display:inline-flex;align-items:center;min-height:26px;padding:2px 0}

.backlink{margin:22px 0}

/* ------------------------------------------------------------------ grid */
/* Cards are as tall as their contents, not as tall as their neighbour.
   A grid stretches its items by default, so in a three-column row the two
   shorter cards were padded out to match the tallest -- 86px of empty space
   under one of them on /arugil/, reported as a card with excessive blank
   space at the bottom. Below 640px there is one column and the problem does
   not arise, which is why it only ever showed on a desktop. */
.grid{display:grid;gap:12px;align-items:start}
.grid--3{grid-template-columns:1fr}
@media(min-width:640px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.tile{display:block;background:#fff;border:1px solid var(--border);border-radius:11px;padding:15px;
  text-decoration:none;color:inherit}
.tile:hover{border-color:#d6bfae;box-shadow:0 2px 10px rgba(123,22,34,.07)}
/* Card headings are h2 on an ungrouped index and h3 under a group title, so
   both ranks are styled. Rank is the outline; the look is the same. */
.tile h2,.tile h3{font-size:16px;margin:0 0 6px;color:var(--brand);display:flex;align-items:center;gap:8px}
.tile h2 .ico,.tile h3 .ico{flex:0 0 auto;color:var(--gold)}
.tile p{font-size:14px;color:#5a4f4c;margin:0}
.tile__alt{font-size:12px;color:var(--muted);margin:0 0 6px !important}
.tile__meta{font-size:12px;color:var(--muted);margin-top:8px !important}
/* The lead tile used to carry a white-to-cream gradient and a warmer border.
   The difference was too slight to read as emphasis and too visible to read as
   nothing, so in a row of six it looked like one box had been got wrong --
   which is how it was reported. A distinction has to be legible as a
   distinction or it is just noise; this one is dropped, and the lead tile is
   the same ground as the rest. It still leads by being first and by being the
   larger card.
   .tile--alert below is deliberately NOT flattened with it: that one marks a
   cancelled darshan, and the colour is carrying a fact a reader needs. */
.tile--lead{background:#fff;border-color:var(--border)}
.tile--alert{background:#fff4e0;border-color:var(--gold)}
.tile--video h2::before,.tile--video h3::before{content:"▶ ";color:var(--live);font-size:12px}

.chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0}
.chip{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:6px 13px;font-size:13px;text-decoration:none;color:#5a4a46}
.chip:hover{border-color:var(--gold);color:var(--brand)}

.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0}
.card--today{border-inline-start:4px solid var(--live)}
.card__h{font-size:18px;margin:0 0 8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card__lede{margin:0 0 10px;color:#4a423f}
.card__meta{font-size:13px;color:var(--muted);margin:0 0 12px}

.note{background:#f7f2ec;border-radius:10px;padding:14px 16px;font-size:14px;color:#5a4f4c}
.note--small{font-size:12px;padding:8px 12px}

/* -------------------------------------------------------------- timeline */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;inset-inline-start:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl__day{position:relative;padding-inline-start:30px;padding-bottom:22px}
.tl__mark{position:absolute;inset-inline-start:0;top:5px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid #d8c8bc}
.tl__day.is-past .tl__mark{background:#d8c8bc}
.tl__day.is-today .tl__mark{border-color:var(--live);background:var(--live);box-shadow:0 0 0 4px rgba(192,57,43,.16)}
.tl__day.is-upcoming .tl__mark{border-color:var(--gold)}
.tl__day.is-eventday .tl__mark{border-color:var(--gold);background:var(--gold)}
.tl__day.is-past .tl__body{opacity:.72}
.tl__date{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:0 0 3px}
.tl__date b{font-size:17px;color:var(--brand)}
/* The date text shrinks and wraps within itself rather than dropping below
   the number as a block. With flex-wrap alone, a phone that could not fit
   "13 September - Aavani 27 - Sunday" beside the 13 moved the whole phrase to
   the next line and left the 13 sitting by itself (TM053). Now the number
   keeps its column and only the weekday, at worst, turns under the text. */
/* Grows only to its own width. flex-grow alone stretched the text across
   the whole row, and the pills after it -- Today, Key day -- went to the far
   right edge with a field of nothing between (TM055). max-content caps the
   growth at what the text needs, so a pill sits beside the words it belongs
   to on a wide screen and wraps under them on a narrow one. */
.tl__date > span:not(.pill){flex:1 1 12ch;min-width:0;max-width:max-content}
.tl__h{font-size:16px;margin:0 0 5px}
/* Grow the hit area to a comfortable 27px without shifting the layout: the
   padding is cancelled by an equal negative margin. */
.tl__h a{text-decoration:none;display:inline-block;padding:3px 0;margin:-3px 0}
.tl__sum{font-size:14px;color:#5a4f4c;margin:0 0 10px;max-width:66ch}
.tl--compact .tl__day{padding-bottom:15px}

.ses{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:0 0 9px}
.ses--major{border-color:var(--gold);background:#fffdf7}
.ses--muhurtham{border-color:var(--live);background:#fff6f4}
.ses__time{font-size:13px;font-weight:700;color:var(--brand);margin:0 0 5px;font-variant-numeric:tabular-nums}
.ses__h{font-size:15px;margin:0 0 5px}
.ses__venue{font-size:13px;color:#6b5f5c;margin:0 0 5px}
.ses__note{font-size:12px;color:var(--muted);margin:0 0 7px;font-style:italic}
.ses__rites{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ses__rites li{font-size:13.5px;color:#4a423f;padding-inline-start:15px;position:relative}
.ses__rites li::before{content:"·";position:absolute;inset-inline-start:4px;color:#c4b5ae;font-weight:700}

/* ------------------------------------------------------------------ live */
.nextbar{position:sticky;top:41px;z-index:25;background:var(--brand-deep);color:#fff;display:flex;
  align-items:center;gap:10px;padding:9px 16px;font-size:13px;border-radius:0 0 10px 10px;
  margin:0 -16px 14px}
.nextbar__label{background:var(--gold);color:var(--brand-deep);font-weight:700;font-size:11px;padding:2px 8px;border-radius:4px}
.nextbar__what{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nextbar__in{font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold)}
.live__head .dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#ff3b30;
  margin-inline-end:8px;animation:pulse 1.6s infinite}
.live__viewers{font-size:13px;color:#6b5f5c}
.live__viewers b{color:var(--live);font-variant-numeric:tabular-nums}

.player{margin:14px 0}
.player__slot{position:relative;aspect-ratio:16/9;background:#1a1012;border-radius:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.player__slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* The still behind the play button (TM062): fills the slot, darkened a
   little so the button reads; the iframe that replaces it sits on top. */
.player__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:brightness(.78)}
.player__slot--reel .player__poster{object-fit:cover}
.player__play{position:relative;z-index:1}
.player__play{background:var(--live);color:#fff;border:0;border-radius:999px;padding:13px 26px;
  font:inherit;font-weight:700;cursor:pointer}
.player__pending{background:#f7f2ec;border:1px dashed #d8c8bc;border-radius:11px;padding:22px;text-align:center}
.player__pending p{margin:0 0 6px;font-size:14px}
.ad--companion{margin-top:10px}

.moments__list{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.moments__i{display:flex;gap:12px;align-items:baseline;background:#fff;border:1px solid var(--border);
  border-radius:9px;padding:10px 13px;font-size:14px}
.moments__i b{font-variant-numeric:tabular-nums;color:var(--brand)}
.moments__i.is-live{background:var(--live);border-color:var(--live);color:#fff}
.moments__i.is-live b{color:#fff}
.moments__i.is-done{opacity:.55}

/* The live page's sections are siblings with no margins of their own, so the
   updates ran flush into the muhurtham list above them -- reported as நேரலைத்
   தகவல்கள் sticking to the section above it. Measured: a 0px gap where every
   other section pair on the site has 28. */
.live > section + section{margin-top:28px}
.feed__refresh{background:var(--live);color:#fff;border:0;border-radius:999px;padding:5px 14px;
  font:inherit;font-size:13px;cursor:pointer}
.feed__list{list-style:none;padding:0;margin:0}
.feed__i{display:grid;grid-template-columns:62px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--border)}
.feed__i.is-pinned{background:#fffdf7;border-inline-start:3px solid var(--gold);padding-inline-start:10px}
.feed__i.is-new{animation:flash 1.6s ease-out}
@keyframes flash{from{background:#fff4e0}to{background:transparent}}
.feed__t{font-size:13px;font-weight:700;color:var(--live);font-variant-numeric:tabular-nums;padding-top:2px}
.feed__h{font-size:16px;margin:0 0 6px}
.feed__x{font-size:15px;color:#4a423f}
.feed__x p{margin:0 0 .7em}
.feed__fig{margin:0 0 9px}
.feed__fig img{border-radius:9px}
.feed__fig figcaption{font-size:11px;color:var(--muted);padding-top:4px}
.feed__empty{padding:22px;background:#f7f2ec;border-radius:10px;font-size:14px;color:#6b5f5c;text-align:center}

/* --------------------------------------------------------------- gallery */
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:640px){.thumbs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:940px){.thumbs--grid{grid-template-columns:repeat(4,1fr)}}
.thumb{display:block;border-radius:9px;overflow:hidden;background:#ece3da;aspect-ratio:3/2}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb--print{aspect-ratio:auto}
.thumb--print figcaption{font-size:11px;color:var(--muted);padding:6px 2px}

.slide__fig{margin:0}
.slide__fig img{width:100%;border-radius:11px;background:#ece3da}
.slide__cap{padding:11px 2px}
/* The caption carries the page h1. It must not look like one: same size,
   same weight and the same line-height as the paragraph it replaced. */
.slide__cap p,.slide__cap h1{margin:0 0 4px;font-size:15px;font-weight:inherit;line-height:inherit}
.slide__credit{font-size:11px;color:var(--muted);text-transform:uppercase}
.slide__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:14px}
.slide__count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ad--inslide{margin:18px auto}

/* --------------------------------------------------------------- compare */
.cmp{position:relative;border-radius:11px;overflow:hidden;background:#ece3da}
.cmp__side{margin:0;position:relative}
.cmp__side img{width:100%;display:block}
.cmp__side figcaption{position:absolute;bottom:0;inset-inline-start:0;background:rgba(20,10,12,.72);
  color:#fff;font-size:11px;padding:5px 10px;border-start-end-radius:8px}
.cmp__side figcaption b{color:var(--gold);margin-inline-end:6px}
/* With JS the two frames stack and the range wipes between them. Without it
   they simply sit one under the other, which still reads fine. */
.cmp.is-live .cmp__side--now{position:absolute;inset:0;overflow:hidden}
.cmp.is-live .cmp__side--now img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__range{position:absolute;bottom:12px;inset-inline:12px;width:calc(100% - 24px);z-index:3}
.compare__note{font-size:14px;color:#5a4f4c;margin-top:10px;max-width:66ch}
.compare--lead .sec__h{color:var(--brand)}

/* ------------------------------------------------------------------ lamp */
.lamp{background:linear-gradient(170deg,var(--brand-deep),var(--brand-deep));border-radius:14px;padding:26px 18px;
  color:#fff;text-align:center;margin:18px 0}
.lamp__flame{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}
.lamp__flame span{display:block;width:34px;height:64px;border-radius:50% 50% 46% 46%;
  background:radial-gradient(ellipse at 50% 78%,#fff6d8,#ffb638 42%,#e8631a 76%,rgba(232,99,26,0) 100%);
  filter:blur(.4px);animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scaleY(1) translateY(0)}45%{transform:scaleY(1.09) translateY(-3px)}}
.lamp__total{margin:0 0 18px}
.lamp__total b{display:block;font-size:36px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.lamp__total span{font-size:13px;color:#d6bebe}
.lampform{max-width:340px;margin:0 auto;text-align:start}
.lampform__row{margin-bottom:11px}
.lampform__row label{display:block;font-size:12px;color:#d6bebe;margin-bottom:4px}
.lampform__row input{width:100%;padding:11px 13px;border-radius:8px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px}
.lampform__row input::placeholder{color:#a89494}
.btn--lamp{width:100%;margin-top:4px;padding:13px}
.lampform__msg{font-size:13px;margin:9px 0 0;min-height:1.3em;color:#ffd7a8}
.lamp__done{max-width:340px;margin:0 auto;display:grid;gap:9px}
.lamp__thanks{font-size:17px;color:var(--gold);margin:0 0 4px}
/* The sponsor's mark, on the dark lamp ground.

   It used to carry filter:brightness(0) invert(1), which flattens every pixel
   to white -- including the white ground the logo is drawn on. The result was
   a blank rounded rectangle where the brand should be, reported twice as "the
   logo is not visible", and it was not visible: there was nothing left of it.
   A contracted mark does not get recoloured. It sits on its own light plate so
   it reads against the dark zone, at a size somebody can actually see. */
.lamp__by{margin:26px 0 0;font-size:12px;color:#e6d8d8}
.lamp__by span{display:block;text-transform:none;letter-spacing:normal;
  margin-bottom:10px;font-weight:600}
html:lang(en) .lamp__by span{text-transform:uppercase;letter-spacing:.09em}
.lamp__by a{display:inline-block;background:#fff;border-radius:8px;
  padding:12px 18px;border:1px solid rgba(184,144,85,.55);
  box-shadow:0 4px 16px rgba(0,0,0,.22);transition:box-shadow .2s}
.lamp__by a:hover,.lamp__by a:focus-visible{box-shadow:0 6px 22px rgba(0,0,0,.3)}
.lamp__by a:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.lamp__by img{height:72px;width:auto;display:block;margin:0}
@media(max-width:520px){.lamp__by img{height:56px}.lamp__by a{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.lamp__by a{transition:none}}
.lamp-cta{background:linear-gradient(170deg,var(--brand-deep),var(--brand-deep));border-radius:14px;padding:22px 18px;color:#fff}
.lamp-cta__h{color:var(--gold);font-size:19px}
.lamp-cta p{font-size:14px;color:#e8d8d8;max-width:56ch}
.lamp-cta__count{margin:14px 0 0;font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums}
.lamp-cta__count small{display:block;font-size:12px;color:#d6bebe}
.lampwall{list-style:none;padding:0;margin:0;display:grid;gap:7px;grid-template-columns:1fr}
@media(min-width:640px){.lampwall{grid-template-columns:repeat(3,1fr)}}
.lampwall__i{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px}
.lampwall__i b{display:block;color:var(--brand)}
.lampwall__i span{color:var(--muted);font-size:12px}

/* ------------------------------------------------------------------ misc */
/* border-radius on a table with border-collapse:collapse is undefined, and the
   two engines resolved it in opposite directions: Chrome kept the rounded
   corners and dropped the outer border, Firefox drew the border and ignored the
   radius. Reported as the timings table looking different in each.

   separate + zero spacing is the defined form -- the border belongs to the
   table box rather than being merged into the cells, so the radius has an edge
   to round. The cell rules below are unaffected: they draw border-bottom, which
   collapse was not merging anyway. */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--border);border-radius:10px;
  overflow:hidden;font-size:14px}
.tbl th,.tbl td{padding:10px 13px;text-align:start;border-bottom:1px solid #f2e9e1;vertical-align:top}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{background:#f7f2ec;font-size:12px;color:var(--muted);text-transform:uppercase}
.tbl__time{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand)}
.tbl__note{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.faq__i{background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:9px}
.faq__q{padding:13px 15px;font-weight:700;font-size:15px;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q::before{content:"+";color:var(--gold);font-weight:700;margin-inline-end:9px}
.faq__i[open] .faq__q::before{content:"–"}
.faq__a{padding:0 15px 14px;font-size:14.5px;color:#4a423f}
.faq__a p{margin:0 0 .7em}

.prevnext{display:grid;gap:9px;grid-template-columns:1fr;margin:26px 0}
@media(min-width:640px){.prevnext{grid-template-columns:1fr 1fr}}
.prevnext__a{display:block;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 15px;
  text-decoration:none;color:inherit}
.prevnext__a span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase}
.prevnext__a b{color:var(--brand);font-size:14.5px}
.prevnext__a--next{text-align:end}

.pano__stage{position:relative;aspect-ratio:16/9;background:#1a1012;border-radius:11px;display:flex;align-items:center;
  justify-content:center;color:#e8d8d8;text-align:center;padding:20px}
.pano__pending{font-size:14px;margin:0}
.pano__scenes{display:flex;gap:7px;flex-wrap:wrap;list-style:none;padding:0;margin:11px 0 0}
.pano__btn{background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 14px;
  font:inherit;font-size:13px;cursor:pointer}
.pano__btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--brand-deep);color:#e8d8d8;margin-top:36px;padding:28px 0 20px;font-size:14px}
.foot__cols{display:grid;gap:22px;grid-template-columns:1fr}
/* Two columns from the narrowest phone up: five stacked lists made the
   footer 1,800px on a 390px screen. */
@media(min-width:360px){.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}}
@media(min-width:640px){.foot__cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.foot__cols{grid-template-columns:repeat(5,1fr)}}
.foot__h{font-size:13px;color:var(--gold);text-transform:uppercase;margin:0 0 9px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.foot a{color:#e8d8d8;text-decoration:none;font-size:13.5px;
  display:inline-flex;align-items:center;min-height:26px}
.foot a:hover{color:var(--gold);text-decoration:underline}
.foot__dense{max-height:none}
.foot__dense a{font-size:12.5px}
.foot__base{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#cbb9b9}
.foot__note a{font-size:12px;color:var(--gold)}
.foot__copy{margin:0}

/* Tracking on these five labels used to be declared here, after the Tamil
   reset in critical.css, so it won the cascade and letter-spaced Tamil on
   every page -- the footer headings and the darshan table among them. The
   values live in critical.css under html:lang(en) only. Do not re-add a
   letter-spacing here without a :lang(en) guard. */

/* ----------------------------------------------------------------- print
   People do print these pages — a darshan timing or a ritual calendar taped
   to a fridge. Strip the furniture, put ink on white, and spell out where a
   link goes, because a printed underline is not clickable. Breadcrumbs stay:
   on paper they are the only thing saying which page this is. */
@media print{
  .nav,.rail,.netbar,.ad,.foot,.alert,.cd__actions,.bnav,.share,.totop,
  .pushinvite,.skip,.deco--bells{display:none !important}
  html,body{background:#fff !important;color:#000 !important}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  .art__body a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;word-break:break-all}
  .art__leadfig{float:none;width:auto;margin:0 0 12px}
  .prevnext,.art,.sec,.facts,.hours{break-inside:avoid}
  img{max-width:100% !important}
}

/* Temple opening hours — the answer people came for, so give it room. */
.hours{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.hours{grid-template-columns:1fr 1fr}}
.hours__i{background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:13px 16px;border-inline-start:4px solid var(--gold)}
.hours__k{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;
  margin-bottom:3px}
.hours__v{font-size:17px;color:var(--brand);font-weight:700;line-height:1.35}

/* ------------------------------------------------------------- ornament
   Gold lotus divider. Used where a page changes register — above the footer,
   and closing the hub. Decorative only, so it is aria-hidden. */
.orn{display:flex;align-items:center;gap:12px;margin:30px auto;max-width:420px;color:var(--gold-deep)}
.orn__rule{flex:1;height:2px;border-radius:2px}
.orn__rule:first-child{background:linear-gradient(90deg,rgba(200,145,42,0),var(--gold-deep))}
.orn__rule:last-child{background:linear-gradient(90deg,var(--gold-deep),rgba(200,145,42,0))}
.orn__mark{flex:0 0 auto}
.orn--emerald{color:var(--emerald)}
.foot .orn{color:var(--gold);opacity:.75;margin:0 auto 22px}

/* --------------------------------------------------- emerald accents
   Meenakshi's own colour, kept for the things that are hers: the lamp, the
   deities, and the lit state of the calendar. Used sparingly — it is an
   accent against the brick red, not a second brand colour. */
.tile--deities,.tile--lamp{border-inline-start:4px solid var(--emerald)}
.tile--deities h2,.tile--deities h3,.tile--lamp h2,.tile--lamp h3{color:var(--emerald)}
.lamp-cta{border:1px solid rgba(232,163,61,.35)}
.lamp-cta__h{color:var(--gold)}
.hours__i{border-inline-start-color:var(--emerald)}
.ses--muhurtham{border-inline-start:4px solid var(--gold)}
.facts__row dt{color:var(--emerald)}
.ticks li::before{background:var(--emerald)}

/* Heading icons sit optically on the text baseline, not the box. */
.sec__h .ico,.foot__h .ico{vertical-align:-2px;margin-inline-end:7px;opacity:.9}
.foot__h{display:flex;align-items:center;gap:7px}

/* --------------------------------------------------------- push invite
   Shown in the page after real engagement; the browser's own permission
   prompt only follows the reader's tap. A denied origin can never ask again,
   so one badly timed prompt on 9 September would cost the muhurtham alerts. */
.pushinvite{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--brand-deep);color:#F7E7D2;
  border-top:2px solid var(--gold);box-shadow:0 -4px 18px rgba(0,0,0,.28);
  transform:translateY(100%);transition:transform .28s ease-out;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.pushinvite.is-in{transform:translateY(0)}
.pushinvite__in{max-width:1080px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pushinvite__ico{flex:0 0 auto;color:var(--gold)}
.pushinvite__t{margin:0;font-size:13.5px;line-height:1.45;flex:1 1 220px;min-width:0}
.pushinvite__t b{color:var(--gold);display:block}
.pushinvite__acts{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.pushinvite__no{background:none;border:0;color:#D9C4BC;font:inherit;font-size:13px;
  cursor:pointer;padding:8px 6px;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.pushinvite{transition:none}}

/* ================================================================ bottom nav
   Phone only. Desktop keeps the horizontal section nav under the masthead. */
.bnav{display:none}
@media(max-width:767px){
  .bnav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:46;
    background:var(--brand-deep);border-top:2px solid var(--gold);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(0);transition:transform .22s ease-out;
    box-shadow:0 -3px 16px rgba(46,10,2,.3)}
  /* Yields while the reader is reading; returns the moment they scroll up. */
  .bnav.is-away{transform:translateY(115%)}
  .bnav__list{display:flex;list-style:none;margin:0;padding:0}
  .bnav__item{flex:1 1 0;min-width:0}
  .bnav__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    width:100%;min-height:56px;padding:7px 2px 6px;
    background:none;border:0;font:inherit;font-size:10.5px;line-height:1.2;
    color:#E9D2BE;text-decoration:none;cursor:pointer;text-align:center}
  .bnav__a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bnav__a .ico{opacity:.8}
  .bnav__a.is-on{color:var(--gold2)}
  .bnav__a.is-on .ico{opacity:1}
  .bnav__a:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
  /* The sticky ad sits directly above the bar, never under it. The offset is
     the bar's measured height (set on :root by site.js) rather than a guessed
     constant — the border and the safe-area inset made a hardcoded 56px two
     pixels short, which is exactly enough to clip the ad label. */
  body.has-bnav .ad--sticky,body.has-bnav .ad-sticky{bottom:var(--bnav-h,58px)}
  body.has-bnav .pushinvite{bottom:var(--bnav-h,58px)}
}
@media(prefers-reduced-motion:reduce){.bnav{transition:none}}

/* ------------------------------------------------------------------ sheet */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:70}
.sheet__scrim{position:absolute;inset:0;background:rgba(30,12,4,.6)}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow-y:auto;
  background:var(--parchment);border-top:3px solid var(--gold);
  border-radius:14px 14px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .26s ease-out}
.sheet.is-open .sheet__panel{transform:translateY(0)}
.sheet__grip{width:42px;height:4px;border-radius:2px;background:var(--border-strong);
  margin:2px auto 14px}
.sheet__grp{margin:0 0 16px}
.sheet__h{font-size:12px;color:var(--brand);margin:0 0 7px;font-weight:700;
  padding-bottom:5px;border-bottom:1px solid var(--border)}
.sheet__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sheet__list a{display:flex;align-items:center;gap:9px;padding:11px 8px;min-height:44px;
  text-decoration:none;color:var(--ink-2);font-size:14px;border-radius:6px}
.sheet__list a:hover,.sheet__list a:focus-visible{background:var(--stone);color:var(--brand)}
.sheet__list .ico{flex:0 0 auto;color:var(--gold-deep)}
.sheet__close{width:100%;margin-top:6px;padding:13px;border:1px solid var(--border-strong);
  background:none;border-radius:6px;font:inherit;font-size:15px;color:var(--brand);cursor:pointer}
@media(prefers-reduced-motion:reduce){.sheet__panel{transition:none}}

/* --------------------------------------------------- standalone link targets
   Links that sit on their own line are navigation, not prose, so they need a
   comfortable target. WCAG exempts links inline within a paragraph; these are
   not that. Padding is cancelled by an equal negative margin, so the hit area
   grows to 24px+ without moving anything on the page. */
.ses__venue a,
.faq__a > p > a,
.art__rel a,
.art__flag a,
.backlink a,
.sec__more{
  display:inline-block;padding:4px 0;margin:-4px 0}

/* ======================================================================
   ARCHITECTURAL PLAQUE CARDS
   The brief asks for cards that read as carved plaques rather than generic
   web cards, and for an arch — the shape you actually stand under walking
   into a mandapam. Both are drawn: a clip-path ogee for the arch head, a
   double rule for the incised border, gold only at the edge.

   Every card carries an image slot at a fixed 4:3. Until the picture desk
   delivers, that slot holds a drawn motif on stone rather than a broken
   frame, and a photograph drops straight in with no relayout.
   ====================================================================== */
.plaque{position:relative;display:flex;flex-direction:column;
  background:var(--surface);color:inherit;text-decoration:none;
  border:1px solid var(--border);border-radius:4px 4px 3px 3px;
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s}
.plaque:hover,.plaque:focus-visible{transform:translateY(-3px);
  box-shadow:var(--shadow-lift);border-color:var(--border-strong)}
.plaque:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Arch head: the card's image area is cut to a temple arch. */
.plaque__fig{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(170deg,var(--stone),var(--surface-2));
  display:flex;align-items:center;justify-content:center}
.plaque__fig img{width:100%;height:100%;object-fit:cover}
.plaque--arch .plaque__fig{
  clip-path:path("M0 100 C0 40 22 0 50 0 C78 0 100 40 100 100 Z");
  clip-path:none}
/* The drawn stand-in: a gold motif on stone, centred in the frame. */
.plaque__motif{color:var(--gold-deep);opacity:.5}
.plaque__body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.plaque__k{font-size:11px;color:var(--ink-2);font-weight:700}
.plaque__h{font-size:16px;margin:0;color:var(--brand);line-height:1.35}
.plaque__d{font-size:14px;color:var(--ink-2);margin:0}
.plaque__meta{margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted);
  border-top:1px solid var(--border)}
/* Incised gold hairline along the top edge — the carved plaque cue. */
.plaque::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gold-line);opacity:.65;z-index:1}
.plaque--lead::before{opacity:1;height:4px}

.pgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:560px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.plaque{transition:none}.plaque:hover{transform:none}}

/* ======================================================================
   ORNAMENT SYSTEM  (§2-4, §29, §34)
   ====================================================================== */

/* Ornamental divider: carved rule with a lotus at the centre. */
.orn-div{display:flex;align-items:center;gap:14px;color:var(--gold-deep);
  margin:0 auto;max-width:460px}
.orn-div__r{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep))}
.orn-div__r:last-child{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.orn-div__m{flex:0 0 auto;opacity:.9}

/* Carved cornice band. One tiled SVG: lotus bud between beads, the moulding
   that runs along a mandapam eave. */
.orn-band{height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cg fill='none' stroke='%23A07C1C' stroke-width='1.1' opacity='.55'%3E%3Cpath d='M0 12h48'/%3E%3Cpath d='M24 3c2 2.2 3 4 3 5.4a3 3 0 0 1-6 0C21 7 22 5.2 24 3Z'/%3E%3Ccircle cx='6' cy='8' r='1.6'/%3E%3Ccircle cx='42' cy='8' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center}

/* Pillar, flanking a title on wide screens only. */
.orn-pillar{color:var(--gold-deep);opacity:.28}

/* Kolam, dropped into a corner. Never more than one per screen. */
.orn-kolam{color:var(--gold-deep);opacity:.18;position:absolute;pointer-events:none}

/* ---------------------------------------------------- section headings §29
   Eyebrow, title, architectural rule. Replaces the bare <h2> everywhere. */
.shead--start{text-align:start}
.shead--start .shead__rule{justify-content:flex-start}
.shead__rule b{display:block;width:6px;height:6px;background:var(--gold);
  transform:rotate(45deg);border-radius:1px}

/* ------------------------------------------------------------- zones §33
   The page is not one flat colour. Each band has its own ground, and the
   ornament bands carry the eye across the joins. */
.zone{padding:var(--temple-section-gap) 0;position:relative}
.zone--stone{background:linear-gradient(180deg,var(--stone),var(--surface-2));
  background-blend-mode:normal}
.zone--dark p{color:#E9D9C6}

/* -------------------------------------------------- oversized numbers §30 */
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--border)}
@media(min-width:720px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs__i{position:relative;background:var(--surface);padding:20px 14px;text-align:center;overflow:hidden}
.figs__ghost{position:absolute;inset:auto -6px -18px auto;font-size:86px;font-weight:700;
  color:var(--brand);opacity:.05;line-height:1;pointer-events:none;user-select:none}

/* --------------------------------------------- gopuram silhouette bands §32 */
.orn-gopuram{display:block;width:100%;height:auto}
.gband{color:var(--brand-deep);opacity:.14;line-height:0;margin-bottom:-1px}
/* The band is a silhouette that scales with the width of whatever holds it,
   so on a 1280px screen a 74px ornament was rendering 640px tall -- more than
   half the footer, and the single reason the footer felt enormous. Give it a
   fixed band height and let the drawing size itself to that instead. */
.foot .gband{color:var(--gold);opacity:.16;margin-bottom:10px;
  height:104px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.foot .gband svg{height:104px;width:auto;max-width:none;flex:0 0 auto}
@media(max-width:700px){
  .foot .gband,.foot .gband svg{height:64px}
}

/* ======================================================================
   HUB ZONE COMPONENTS
   ====================================================================== */
main.flow{padding:0}
main.flow .crumbs{display:none}
.zone__div{margin:clamp(26px,5vw,40px) auto}
.zone__more{text-align:center;margin:clamp(18px,3vw,28px) 0 0}

/* Today */
.today{background:var(--surface);border:var(--temple-border);border-radius:4px;
  padding:18px 20px;margin:0 0 22px;position:relative;box-shadow:var(--temple-shadow)}
.today::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold-line)}
.today__k{margin:0 0 6px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.today__h{margin:0 0 6px;font-size:var(--fs-h2);color:var(--maroon)}
.today__d{margin:0 0 14px;color:var(--ink-2)}

/* Button on light grounds */
.tbtn--ink{color:var(--brand);background:var(--surface);border-color:var(--border-strong)}
.tbtn--ink:hover{background:var(--stone);border-color:var(--gold-deep)}

/* Corridor scroll (§16): a row you walk along. */
.rail__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:15px;color:var(--maroon);margin:26px 0 12px;font-weight:700}
.hscroll{display:flex;gap:12px;list-style:none;margin:0 0 8px;padding:2px 16px 12px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin-inline:-16px}
.hscroll::-webkit-scrollbar{display:none}
.hscroll__i{flex:0 0 clamp(190px,58vw,230px);scroll-snap-align:start}

/* Architectural plate (§11): a photographic plate with its measurements. */
.plate{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  background:var(--surface);border:var(--temple-border);border-radius:3px;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.plate:hover,.plate:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lift);
  border-color:var(--gold-deep)}
.plate__fig{aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(180deg,var(--surface-2),var(--stone));padding-bottom:6px}
/* The plate is a 4:5 box because that is the shape a photograph of a tower
   wants. When there is no photograph and the drawn motif stands in, the same
   box left a 92px drawing marooned at the foot of a 370px empty panel, which
   reads as an image that failed to load rather than as an ornament.

   A card carrying the motif instead of a picture is not reserving space for a
   picture, so it takes the height the drawing needs, centres it, and draws it
   large enough to be the point of the card. */
.plate__motif{color:var(--gold-deep);opacity:.55;width:88%}
.plate__fig:not(:has(.mediapic)){aspect-ratio:auto;min-height:132px;
  align-items:center;padding-block:14px}
.plate__fig:not(:has(.mediapic)) .plate__motif{width:74%}
/* :has is not everywhere yet. Without it the card keeps the old proportions,
   which is plain rather than broken. */
.plate__b{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px}
.plate__h{font-size:14.5px;color:var(--maroon);font-weight:600;line-height:1.35}
.plate__m{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Mandapam museum list (§12): numbered, like a catalogue. */
.mlist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--surface);
  border:1px solid var(--border);border-radius:4px;overflow:hidden;
  grid-template-columns:1fr}
@media(min-width:560px){.mlist{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.mlist{grid-template-columns:repeat(3,1fr)}}
.mlist__i a{display:flex;align-items:center;gap:12px;background:var(--surface);
  box-shadow:0 0 0 1px var(--border);
  padding:12px 14px;min-height:48px;text-decoration:none;color:var(--ink-2);font-size:14.5px}
.mlist__i a:hover,.mlist__i a:focus-visible{background:var(--surface-2);color:var(--brand)}
.mlist__n{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;min-width:22px}
.mlist__t{min-width:0}

/* Dark zone plaques */
.pgrid--dark .plaque{background:rgba(255,253,249,.06);border-color:rgba(235,217,166,.22)}
.pgrid--dark .plaque__fig{background:rgba(255,253,249,.05)}
.pgrid--dark .plaque__h{color:var(--gold-soft)}
.pgrid--dark .plaque__d{color:#E4D3C0}
.pgrid--dark .plaque__motif{color:var(--gold)}
.pgrid--dark .plaque__meta{border-top-color:rgba(235,217,166,.18);color:#C9B6A4}

/* Lamp zone (§18): a field of lamps, drawn with gradients rather than sprites. */
.lampzone{position:relative;overflow:hidden;text-align:center}
.lampzone__field{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    radial-gradient(6px 8px at 12% 78%,rgba(255,196,92,.75),transparent 70%),
    radial-gradient(5px 7px at 28% 88%,rgba(255,196,92,.55),transparent 70%),
    radial-gradient(6px 9px at 44% 72%,rgba(255,196,92,.65),transparent 70%),
    radial-gradient(5px 7px at 62% 86%,rgba(255,196,92,.5),transparent 70%),
    radial-gradient(6px 8px at 78% 76%,rgba(255,196,92,.7),transparent 70%),
    radial-gradient(5px 7px at 91% 89%,rgba(255,196,92,.45),transparent 70%);
  animation:lampflicker 5.5s ease-in-out infinite}
@keyframes lampflicker{0%,100%{opacity:.5}50%{opacity:.72}}
.lampzone__in{position:relative}
.lampzone__d{max-width:44ch;margin:0 auto 16px}
.lampzone__n{margin:0 0 18px}
.lampzone__n b{display:block;font-size:clamp(30px,7vw,46px);color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.1}
.lampzone__n span{font-size:13px;color:#D9C6B2}
@media(prefers-reduced-motion:reduce){.lampzone__field{animation:none}}

/* ======================================================================
   TEMPLE FRAME — sitewide (§3, §15)
   Every interior page sits inside the architecture, not just the hub: a
   carved cornice under the nav, an incised gold edge on the content column,
   and a kolam at the foot. Drawn, so it costs nothing per page.
   ====================================================================== */
main.wrap{position:relative;padding-top:6px}
main.wrap::before{content:"";display:block;height:14px;margin:0 -16px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cg fill='none' stroke='%23A07C1C' stroke-width='1.1' opacity='.4'%3E%3Cpath d='M0 12h48'/%3E%3Cpath d='M24 3c2 2.2 3 4 3 5.4a3 3 0 0 1-6 0C21 7 22 5.2 24 3Z'/%3E%3Ccircle cx='6' cy='8' r='1.6'/%3E%3Ccircle cx='42' cy='8' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center}

/* Article body framed as a parchment leaf (§9). */
.art{background:var(--parchment);border:var(--temple-border);border-radius:4px;
  padding:clamp(18px,4vw,30px);position:relative;box-shadow:var(--temple-shadow)}
.art::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold-line)}
/* Room for the frame's own corners.
   The carved rosettes are clamp(38px,7vw,62px), so 38px on a phone, and the
   frame's padding is clamp(18px,4vw,30px), which is 18px there -- the headline
   started well inside the ornament and ran over it. On a wide screen the
   padding is 30px against a rosette that is still 38px, so it needs the same
   treatment, just less of it. The first line clears the corner now instead of
   sharing it. */
@media(max-width:700px){.art{padding-top:46px}}
@media(min-width:701px){.art{padding-top:44px}}
.art--404{background:none;border:0;box-shadow:none}
.art--404::before{display:none}

/* ======================================================================
   CARVED FRAME  — after the reference plate
   A polychrome stucco border with a cusped arch at the head and a lotus
   medallion at each corner. The band is drawn with gradients and gold
   hairlines; only the corners are SVG, and one corner is reused four times
   under CSS transforms. Total cost: one small inline SVG per frame.
   ====================================================================== */
.tdefs{position:absolute;width:0;height:0;overflow:hidden}

.tframe{position:relative;padding:clamp(12px,2.6vw,20px);
  background:
    linear-gradient(160deg,var(--stucco-cream),#EDE0C6 45%,var(--stucco-cream)),
    var(--grain);
  border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--gold),
             inset 0 0 0 7px rgba(156,191,166,.55),
             inset 0 0 0 8px var(--gold),
             0 10px 34px rgba(62,42,32,.18)}
.tframe__in{position:relative;overflow:hidden;border-radius:4px;
  box-shadow:0 0 0 1px var(--gold-deep)}
/* Cusped arch across the head of the plate. */
.tframe--arch .tframe__in{clip-path:url(#tarch)}
.tframe__corner{position:absolute;width:clamp(38px,7vw,62px);height:clamp(38px,7vw,62px);
  z-index:2;pointer-events:none;line-height:0}
.tframe__corner svg{width:100%;height:100%;display:block}
.tframe__corner--tl{top:-2px;left:-2px}
.tframe__corner--tr{top:-2px;right:-2px;transform:scaleX(-1)}
.tframe__corner--bl{bottom:-2px;left:-2px;transform:scaleY(-1)}
.tframe__corner--br{bottom:-2px;right:-2px;transform:scale(-1,-1)}

/* The hero, mounted as a framed plate. */
.heroplate{padding:clamp(14px,3vw,26px) 16px clamp(18px,3vw,28px);
  background:linear-gradient(180deg,var(--surface-2),var(--cream))}
.heroplate .tframe{max-width:var(--temple-container);margin:0 auto}
.hero{border-radius:0}
/* Inside a frame the hero no longer needs its own outer rounding or shadow. */
.tframe .hero{box-shadow:none}
@media(max-width:520px){
  /* On the narrowest phones the frame band eats too much of the picture, so
     it thins rather than disappearing — the plate still reads as framed. */
  .tframe{padding:9px;box-shadow:inset 0 0 0 1px var(--gold),
    inset 0 0 0 5px rgba(156,191,166,.5),inset 0 0 0 6px var(--gold),
    0 8px 24px rgba(62,42,32,.16)}
}

/* --------------------------------------------- frame: edge-centre lotus
   The reference carries a lotus at the centre of each edge as well as at the
   corners. Added as backgrounds on the frame itself, so it stays markup-free
   and cannot end up in the accessibility tree. */
.tframe{
  background-image:
    /* top and bottom centre medallions */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26' viewBox='0 0 46 26'%3E%3Cg transform='translate(23 13)'%3E%3Cg fill='%23EFB3C0' stroke='%23C9A227' stroke-width='.7'%3E%3Cellipse rx='3.1' ry='8'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(50)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(100)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(150)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(200)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(250)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle r='2.6' fill='%23C9A227'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26' viewBox='0 0 46 26'%3E%3Cg transform='translate(23 13)'%3E%3Cg fill='%23EFB3C0' stroke='%23C9A227' stroke-width='.7'%3E%3Cellipse rx='3.1' ry='8'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(50)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(100)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(150)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(200)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(250)'/%3E%3Cellipse rx='3.1' ry='8' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle r='2.6' fill='%23C9A227'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg,var(--stucco-cream),#EDE0C6 45%,var(--stucco-cream)),
    var(--grain);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-position:center top -2px,center bottom -2px,center,center}
@media(max-width:520px){.tframe{background-size:34px 20px,34px 20px,auto,auto}}

/* =========================================================== page plates
   Every interior page wears the same frame, quieter: gold hairline, sage
   inner rule and a lotus medallion in each corner. No cusped arch and no
   heavy band — a carved border around six paragraphs of Tamil would fight
   the reading rather than frame it.

   Corners are backgrounds on the existing .art element, so this reaches every
   page without touching a single template. */
.art{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate(17 17)'%3E%3Cg fill='%23EFB3C0' stroke='%23C9A227' stroke-width='.7' opacity='.9'%3E%3Cellipse rx='2.6' ry='7'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(45)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(90)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(135)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(180)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(225)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(270)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(315)'/%3E%3C/g%3E%3Ccircle r='2.2' fill='%23C9A227'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate(17 17)'%3E%3Cg fill='%23EFB3C0' stroke='%23C9A227' stroke-width='.7' opacity='.9'%3E%3Cellipse rx='2.6' ry='7'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(45)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(90)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(135)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(180)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(225)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(270)'/%3E%3Cellipse rx='2.6' ry='7' transform='rotate(315)'/%3E%3C/g%3E%3Ccircle r='2.2' fill='%23C9A227'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,#FCF8F0,#F6EEDE);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:6px 6px,right 6px top 6px,center;
  box-shadow:inset 0 0 0 1px var(--gold-deep),
             inset 0 0 0 5px rgba(156,191,166,.28),
             var(--temple-shadow)}
.art--404{background-image:none;box-shadow:none}

/* Collection and item pages get the cornice above their grids too. */
.pgrid,.mlist,.hscroll{position:relative}

/* ======================================================================
   UI KIT COMPONENTS
   Ported from meenakshi-temple-ui-kit/styles.css, keeping the geometry that
   gives the kit its character: the chamfered card head, the inset gold rule
   with a flower breaking the bottom edge, and the circular teal icon plate.
   ====================================================================== */

/* Section title — gold ornament, teal type, centred. */
.shead{margin:0 0 clamp(18px,3vw,28px);text-align:center}
.shead__eyebrow{margin:0 0 3px;font-size:13px;font-weight:700;color:var(--gold);}
.shead__t{margin:0;font-size:var(--fs-h2);line-height:1.3;color:var(--teal);font-weight:700}
.shead__rule{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:9px}
.shead__rule i{display:block;width:52px;height:1px;background:var(--gold);opacity:.7}
.shead__rule b{display:block;width:0;height:0;color:var(--gold);font-size:19px;line-height:1}
.shead__rule b::before{content:"\2767";display:block;transform:translate(-50%,-50%)}

/* The kit's framed panel: an inset gold hairline with a flower breaking the
   bottom edge. Used on article bodies and the FAQ. */
.framed{position:relative}
.framed::before{content:"";position:absolute;inset:7px;border:1px solid var(--frame-rule);
  pointer-events:none}
.framed::after{content:"\2740";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  background:var(--ivory);color:var(--gold);padding:0 8px;line-height:1}

/* Quick grid — chamfered heads, circular teal icon plates. */
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:560px){.qgrid{grid-template-columns:repeat(4,1fr);gap:13px}}
@media(min-width:1000px){.qgrid{grid-template-columns:repeat(8,1fr)}}
.qcard{min-height:128px;background:var(--card);border:1px solid var(--card-edge);
  box-shadow:var(--temple-shadow);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:12px 8px;text-align:center;text-decoration:none;
  color:inherit;transition:transform .2s,box-shadow .2s;
  clip-path:polygon(12% 0,88% 0,100% 12%,100% 100%,0 100%,0 12%)}
.qcard:hover,.qcard:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.qcard__ico{width:52px;height:52px;border-radius:50%;background:var(--teal);color:var(--gold2);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.qcard b{font-size:13px;color:var(--deep);font-weight:600;line-height:1.35}

/* Photo card — the festival strip. */
.photo-card{background:#FFF7EA;border:1px solid #D6C19F;box-shadow:var(--temple-shadow);
  overflow:hidden;display:block;text-decoration:none;color:inherit}
.photo-card__fig{height:150px;background:linear-gradient(160deg,var(--paper),var(--card));
  display:flex;align-items:center;justify-content:center;color:var(--gold)}
.photo-card__b{padding:12px}
.photo-card__b b{display:block;color:var(--deep);font-size:14.5px}
.photo-card__b small{color:var(--muted);font-size:12px}

/* Dark experience card. */
.dark-card{background:var(--deep);color:#F8E7C4;min-height:240px;position:relative;
  overflow:hidden;border:5px solid #A88A5D;box-shadow:var(--temple-shadow);
  display:flex;flex-direction:column;justify-content:flex-end}
.dark-card__b{padding:22px}
.dark-card h3{margin:4px 0 12px;color:#FFF1B9;font-size:19px}
.big360{font:700 38px var(--font-display);color:#FFF1B9;line-height:1}

/* Zones on the kit's grounds. */
.zone--cream{background:var(--ivory)}
.zone--parchment{background:var(--panel);background-image:none}
.zone--stone{background:linear-gradient(135deg,#EFE0C6,#F9F1E3)}
.zone--dark{background:var(--deep);color:#F8E7C4}
.zone--dark .shead__t{color:#F1CC7D}
.zone--dark .shead__eyebrow{color:var(--gold2)}
.zone--dark .shead__rule i{background:var(--gold2)}
.zone + .zone{border-top:1px solid var(--card-edge)}
.zone--dark + .zone,.zone + .zone--dark{border-top:0}

/* Stats, the kit's rule-bounded row rather than dashboard tiles. */
.figs{display:flex;gap:clamp(16px,4vw,32px);flex-wrap:wrap;justify-content:center;
  border-top:1px solid #CDB58D;border-bottom:1px solid #CDB58D;padding:16px 0;margin:22px 0 0;
  background:none}
.figs__i{background:none;padding:0;text-align:center;border:0;flex:0 1 auto;min-width:88px}
.figs__n{display:block;font-size:clamp(24px,5vw,30px);color:var(--teal);font-weight:700;
  line-height:1.1;font-variant-numeric:tabular-nums}
.figs__l{display:block;font-size:11px;color:var(--ink-2);margin-top:3px}
.figs__ghost{display:none}

/* Lamp panel — the kit's radial. */
.lampzone{background:radial-gradient(circle at 50% 45%,#49645C,#183B3A 55%)}
.lampzone__n b{color:#FFF1B9}
.lampzone__n span{color:#CDBD9B}

/* Footer as the base of the structure. */
.foot{background:var(--deep);color:#ECD9B4;border-top:6px solid var(--gold)}
.foot__h{color:var(--gold2)}
.foot a{color:#ECD9B4}
.foot a:hover{color:#FFF0BD}

/* ======================================================================
   NICHE ICON  — the tile from the asset sheet
   A gold glyph set in a teal temple niche: arched head, gold border, a
   finial at the apex and beads at the shoulders.

   Built in CSS around the vector icons rather than sliced out of the sheet.
   The sheet is 1536x1024, which works out at about 119x68px per tile — fine
   as a moodboard, too small to ship, and a bitmap could not recolour for the
   dark zones or scale for a 2x screen. This does both for no bytes.
   ====================================================================== */
.niche{position:relative;flex:0 0 auto;
  width:56px;height:64px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold2);
  background:linear-gradient(170deg,#2B534E,#1B3E3B);
  border:2px solid var(--gold);
  /* Arched head, flat foot — the niche you see cut into a mandapam wall. */
  border-radius:46% 46% 10% 10% / 34% 34% 7% 7%;
  box-shadow:inset 0 0 0 1px rgba(255,240,189,.18),0 3px 8px rgba(24,59,58,.3)}
/* Finial at the apex. */
.niche::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;background:var(--gold2);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:0 0 0 1px rgba(24,59,58,.5)}
/* Beads at the shoulders. */
.niche::after{content:"";position:absolute;left:4px;right:4px;top:52%;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent 22%,transparent 78%,var(--gold));
  opacity:.55}
.niche .ico{position:relative;z-index:1}
.niche--sm{width:44px;height:50px}
.niche--lg{width:72px;height:82px}

/* On dark grounds the niche inverts to gold-on-ivory so it still reads. */
.zone--dark .niche,.dark-card .niche{background:linear-gradient(170deg,#F3E4C4,#E2CFA6);
  color:var(--deep);border-color:var(--gold2)}

/* Quick card uses the niche instead of the circular plate. */
.qcard__ico{width:auto;height:auto;border-radius:0;background:none}

/* Real niche assets from the pack replace the CSS approximation. */
.niche-img{display:block;line-height:0}
.niche-img img{width:100%;height:100%;object-fit:contain}
.qcard__ico{display:flex;align-items:center;justify-content:center}

/* Decorative elements from the pack. */
.deco{display:block;line-height:0}
.deco img{width:100%;height:auto}
.deco--divider{max-width:340px;margin:0 auto;opacity:.9}
.deco--border{width:100%}
.deco--bells{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;
  opacity:.85;pointer-events:none;z-index:2}

/* --------------------------------------------------- artwork in cards
   The gopurams arrive as transparent cut-outs, so they want a ground and a
   little breathing room rather than an edge-to-edge crop. */
.mediapic{display:block;line-height:0;width:100%;height:100%}
.mediapic img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* A photograph fills the box. contain+bottom is for the transparent cut-outs
   the kit shipped, which stand on the plinth; a square photograph from a
   phone under that rule sat at the foot of a 4:5 card with the top quarter
   empty. Positioned a little above centre because a tower's crown matters
   more than its steps when the sides are cropped. */
.mediapic--photo img{object-fit:cover;object-position:center 30%}
.tile__fig:has(.mediapic--photo){padding:0}
.plate__fig{padding:10px 10px 0;background:linear-gradient(180deg,#EFE3CB,var(--paper))}
/* TM063: on iPhone the photograph in these plates came out stretched and
   zoomed. Safari does not resolve a percentage height against a box sized by
   aspect-ratio, so the picture fell back to its height attribute -- 600px of
   image in a 290px plate. Positioned absolutely against the plate instead,
   which every browser resolves the same way. */
.plate__fig{position:relative;overflow:hidden}
.plate__fig .mediapic{position:absolute;inset:10px 10px 6px;width:auto;height:auto}
.plate__fig .mediapic img{position:absolute;inset:0;width:100%;height:100%}
.plate__fig:has(.mediapic--photo) .mediapic{inset:0}
.tile__fig{position:relative}
.tile__fig .mediapic{position:absolute;inset:10px 10px 0;width:auto;height:auto}
.tile__fig .mediapic img{position:absolute;inset:0;width:100%;height:100%}
.tile__fig:has(.mediapic--photo) .mediapic,.tile__fig--mandapam .mediapic{inset:0}
/* The default figure is a portrait plate, which is right for the gopuram set:
   those are tall cut-outs standing on the baseline, so the picture is fitted
   rather than cropped and sits on the floor of the box.

   A photograph of a hall is the opposite case. It is landscape, it has no
   transparency, and fitting it into a 4:5 box left it stranded at the bottom
   of a tall empty plate. The halls get the ratio the kit specifies for them
   and the frame is filled rather than letterboxed. */
.tile__fig{display:block;aspect-ratio:4/5;overflow:hidden;margin:-15px -15px 12px;
  padding:10px 10px 0;background:linear-gradient(180deg,#EFE3CB,var(--paper));
  border-bottom:1px solid var(--card-edge)}
.tile__fig--mandapam{aspect-ratio:4/3;padding:0}
/* Waiting for a photograph. The plate fills the same box the picture will,
   so the day it lands nothing on the page moves. */
.tile__fig--waiting{background:#F3E8D6}
.tile__fig--waiting .plate{display:block;width:100%;height:100%}
.tile--lead .tile__fig--waiting .plate{opacity:.9}
.tile__fig--mandapam .mediapic img{object-fit:cover;object-position:center center}
.tile{overflow:hidden}
.art__leadfig{margin:0 0 18px;padding:14px 14px 0;
  background:linear-gradient(180deg,#EFE3CB,var(--paper));
  border:1px solid var(--card-edge);border-radius:4px}
.art__leadfig .mediapic img{max-height:52vh;object-fit:contain}
/* The carved panel as the lead: no plate padding, no cream ground -- the
   panel is its own ground -- and it keeps its own proportions. */
.art__leadfig--art{padding:0;background:none}
.art__leadfig--art .plate--art{display:block;width:100%}
.art__leadfig--art .plate--art img{display:block;width:100%;height:auto;border-radius:8px}

/* The collection header's set picture. It is NOT .art__leadfig: that one
   floats inline-end at 400px, which is right for an item page where body text
   wraps around it, and wrong here. This header is only a heading and one line
   of lede, about 190px tall, so a 484px float escaped the frame, hung over the
   section below it and squeezed the card grid from 1048px to 593px. A grid
   keeps both columns inside the panel. */
.art__setfig{margin:14px 0 0}
.art__setfig .mediapic img{width:100%;height:auto;max-height:240px;object-fit:contain;
  object-position:center bottom}
.art__setxt{min-width:0}
.foot__all{font-weight:700;color:var(--gold2)}
@media(min-width:860px){
  /* Two cells, not four. The heading and the lede live in one cell together,
     because when they were two grid rows the figure spanned both and stretched
     them apart, leaving a gap between the title and its own standfirst. */
  .art--setfig{display:grid;grid-template-columns:minmax(0,1fr) 300px;
    column-gap:28px;align-items:center}
  .art--setfig .art__lede{margin-bottom:0}
  .art__setfig{margin:0}
  .art__setfig .mediapic img{max-height:260px}
}
@media(min-width:960px){
  .art__leadfig{float:inline-end;width:400px;margin:0 0 18px 24px}
  /* The card must contain its own float. A short article beside a tall
     photograph ended at the last line of text and the picture ran on below
     the card's bottom edge, into whatever came next. flow-root makes the
     card a formatting context, so it grows to hold the figure. */
  .art{display:flow-root}
}

/* ================================================================= share
   A row of plain links, not a widget. WhatsApp is the one that matters for
   this audience, so it gets the filled treatment and the first position;
   everything else is a ghost button of equal weight. Every target is 44px
   tall — these are tapped by people standing in a queue.
   ------------------------------------------------------------------- */
.share{margin:30px 0 8px;padding:15px 16px 16px;background:var(--panel);
  border:1px solid var(--panel-edge);border-radius:4px}
.share__h{display:flex;align-items:center;gap:8px;margin:0 0 11px;
  font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase}
.share__h .ico{color:var(--gold);flex:0 0 auto}
.share__row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.share__i{display:block}
.share__i[hidden]{display:none}
.share__b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 15px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);
  font:inherit;font-size:14px;font-weight:600;line-height:1.2;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.share__b .ico{flex:0 0 auto;color:var(--gold-line-b)}
.share__b:hover{background:#fff;border-color:var(--gold)}
.share__b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.share__b--whatsapp{background:var(--wa);border-color:var(--wa);color:#fff}
.share__b--whatsapp .ico{color:#fff}
.share__b--whatsapp:hover{background:var(--deep);border-color:var(--deep)}
/* Outlined, not filled. Only WhatsApp gets a filled pill — two solid buttons
   side by side would leave the eye with no idea which one is the point. */
.share__b--native{border-color:var(--brand);color:var(--brand)}
.share__b--native .ico{color:var(--brand)}
.share__b--native:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.share__b--native:hover .ico{color:#fff}
.share__msg{margin:11px 0 0;font-size:13.5px;font-weight:600;color:var(--brand);
  display:flex;align-items:center;gap:7px}
.share__msg[hidden]{display:none}

/* Tamil never takes tracking — see the Tamil tracking block in critical.css
   for why. Off by default here, added back only where the label is Latin. */
.share__h,.prevnext__pos,.art__updated{letter-spacing:normal}
html:lang(en) .share__h{letter-spacing:.07em}

/* Position in the set, above the prev/next pair. */
.prevnext__pos{margin:26px 0 -14px;font-size:12.5px;color:var(--muted)}

/* When the page behind a reference page was last edited. */
.art__updated{margin:20px 0 0;font-size:12.5px;color:var(--muted)}

/* ------------------------------------------------------------ back to top
   Parked clear of everything else fixed to the bottom edge: the mobile bar
   publishes --bnav-h, the sticky ad publishes --stickyad-h, and both default
   to 0 so the desktop layout needs no special case. z-index sits under the
   bar (46) and under the push invite (45) so it can never cover either. */
.totop{position:fixed;inset-inline-end:14px;z-index:44;
  bottom:calc(var(--bnav-h,0px) + var(--stickyad-h,0px) + 14px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;
  border-radius:999px;background:var(--brand);color:var(--on-deep);
  border:1px solid var(--gold-edge);box-shadow:var(--shadow-lift);
  font-size:13px;font-weight:700;text-decoration:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.totop .ico{color:var(--gold2)}
/* Visible by default, so it still works when site.js never lands. The script
   adds .is-auto to opt into hiding until there is something to scroll back
   up from — the enhancement, not the baseline. */
.totop.is-auto{opacity:0;visibility:hidden;transform:translateY(10px)}
.totop.is-auto.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand-deep)}
.totop:focus-visible{outline:2px solid var(--gold);outline-offset:2px;
  opacity:1;visibility:visible;transform:none}
@media(max-width:420px){.totop__t{display:none}.totop{padding:0;width:44px;justify-content:center}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}


/* ---------------------------------------------------------------- 2009 archive
   The 2009 report reset as a page. It is a piece of reporting, not a museum
   label, so it reads as a story: a source line, a headline, the photograph
   with the caption the paper actually printed, then the copy. */
.report{margin-top:6px}
.report__src{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--ink-2);
  text-transform:none}
.report__h{margin:0 0 14px;font-size:clamp(21px,3.4vw,30px);line-height:1.28;
  color:var(--teal);font-weight:700}
.report__fig{margin:0 0 16px}
.report__fig img{width:100%;height:auto;display:block;border:1px solid var(--border)}
.report__fig figcaption{margin-top:8px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.report__credit{display:block;margin-top:4px;font-size:11.5px;font-weight:700;
  color:var(--ink-2);opacity:.85}
.report__body{padding:16px 18px}
.report__body p{margin:0 0 12px;line-height:1.72}
.report__body p:last-child{margin-bottom:0}
.report__dateline b{color:var(--terracotta)}
@media(min-width:900px){
  .report__fig{float:inline-end;width:420px;margin:0 0 16px 26px}
  .report__body{overflow:hidden}
}

/* A plain two-column fact list. Numbers belong in a table, not in prose. */
.ftable{margin:0;display:grid;gap:1px;background:var(--surface);
  border:1px solid var(--border);border-radius:4px;overflow:hidden}
.ftable__row{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;
  align-items:baseline;background:var(--surface);
  box-shadow:0 0 0 1px var(--border);padding:11px 14px}
.ftable dt{margin:0;font-size:13.5px;color:var(--ink-2)}
.ftable dd{margin:0;font-size:15px;font-weight:700;color:var(--teal)}
@media(min-width:640px){.ftable{grid-template-columns:1fr 1fr}}

/* The colour notes. Marked with a small carved dot rather than a bullet. */
.drops{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.drops__i{position:relative;padding-inline-start:22px;line-height:1.68;font-size:14.5px}
.drops__i::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;
  width:8px;height:8px;border:1.5px solid var(--gold);transform:rotate(45deg)}
@media(min-width:860px){.drops{grid-template-columns:1fr 1fr;gap:14px 30px}}

.sec__note{margin:-4px 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* A newspaper page is portrait and tall; the centre spread is not. */
.thumb--print img{width:100%;height:auto;display:block;border:1px solid var(--border);
  background:#fff}
/* TM055, second pass: every scan card the same height. A landscape page
   sat in a short card beside a tall portrait one, and the empty caption
   box under it read as a hole in the grid. The picture area is a fixed
   3:4 box and the page fits inside it, centred, whatever its shape. */
.thumb--print a{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;text-decoration:none;background:#fff;
  border:1px solid var(--border);border-radius:4px;overflow:hidden}
.thumb--print a img{width:auto;height:auto;max-width:100%;max-height:100%;border:0}
.thumb--print a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* TM055: a landscape scan used to take the whole row on a phone, leaving
   the cell beside the scan before it empty. It sits in one cell like the
   rest there (two columns, same width), and spans two only where there
   are three; dense packing fills any hole a wide item leaves.
   Third pass: where it spans two, its box was 3:4 of that double width,
   so it stood twice as tall as the card beside it, which stretched to
   match and showed a blank below its caption. The spread's box is now
   exactly as tall as one 3:4 cell: two cells and the gap wide, so
   ((width - gap) / 2) * 4/3 high, measured off the card itself. That
   sum only holds with the figure's browser-default margin (18px 40px,
   which also left 88px between cards where the gallery grid has 8)
   taken off. */
.thumb--print{margin:0}
.thumbs{grid-auto-flow:dense}
.thumb--wide{grid-column:auto}
@media(min-width:640px){
  .thumb--wide{grid-column:span 2;container-type:inline-size}
  .thumb--wide a{aspect-ratio:3/2}
  @supports (height:1cqw){.thumb--wide a{aspect-ratio:auto;height:calc((100cqw - 8px) / 2 * 4 / 3)}}
}


/* ------------------------------------------------- கோயிலை அறிந்துகொள்ள
   Twenty-four destinations as carved plaques.

   The plaque is artwork and the label is text, and they stay that way: the
   PNG carries no words, so the label translates, wraps, is read aloud and is
   indexed. Nineteen plaques come from the kit; five destinations had no
   artwork, so their arch is drawn in CSS around the site's own vector glyph.
   The two are tuned to read as one set at this size. */
.igzone{padding-block:34px}
.ig{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;gap:14px 10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* The plaque size, in one place, because it is set at four breakpoints and
     read by both kinds of plaque. The artwork was drawn at 112px and painted
     at 56, which is retina-correct and too small to look at: in a 141px cell
     the plaque took up 40% of the width and the grid read as a list of labels
     with a mark beside each. */
  --plq:74px;
}
@media(min-width:380px){.ig{grid-template-columns:repeat(3,minmax(0,1fr));--plq:70px}}
@media(min-width:700px){.ig{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;--plq:86px}}
@media(min-width:1000px){.ig{grid-template-columns:repeat(8,minmax(0,1fr));--plq:86px}}

.ig__i{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 6px 12px;
  text-decoration:none;color:var(--ink);
  border-radius:4px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s;
}
.ig__i:hover,.ig__i:focus-visible{background:rgba(184,144,85,.10)}
.ig__i:hover .ig__plaque,.ig__i:focus-visible .ig__plaque{transform:translateY(-2px)}
.ig__i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Sized by height, width from the artwork's own proportions.
   The arch is a tall shape, roughly 166 by 256. Forcing it into a square box
   spent a third of the width on transparency and painted the plaque smaller
   than the cell allowed.

   The ratio is declared rather than left to the image, because these load
   lazily: with width:auto an image that has not arrived yet is zero wide, the
   plaque collapses, and all twenty-four cells jump sideways the moment the
   artwork appears. Declaring it reserves the space from the first paint. */
.ig__plaque{
  display:flex;align-items:center;justify-content:center;
  height:var(--plq);aspect-ratio:166/256;flex:0 0 auto;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.ig__plaque img{height:100%;width:100%;display:block}

/* The drawn arch is gone. Seven destinations had no plaque and were given a
   CSS arch around a line glyph; they read as a second set beside the carved
   ones however carefully they were tuned. All twenty-four are artwork now. */

/* A label can be longer than its cell.
   Three columns on a 390px phone give a cell of 113px, and
   "ஒரு விளக்கேற்றுங்கள்" wraps to a second line that is 129px wide on its
   own -- it broke out of the grid on the left. Balance decides where to wrap
   between words; this decides what happens when a single word has nowhere to
   wrap, which no amount of balancing can help. No letter-spacing: Tamil is not
   spaced. */
.ig__l{
  font-size:12.5px;line-height:1.34;text-align:center;
  color:var(--ink-2);font-weight:600;
  letter-spacing:normal;
  text-wrap:balance;
  overflow-wrap:break-word;
  max-width:100%;
}
html:lang(en) .ig__l{letter-spacing:.01em}
.ig__i:hover .ig__l,.ig__i:focus-visible .ig__l{color:var(--teal)}

@media(prefers-reduced-motion:reduce){
  .ig__i,.ig__plaque{transition:none}
  .ig__i:hover .ig__plaque{transform:none}
}


/* --------------------------------------------------- desk-attached media
   A gallery of whatever the desk has put on this item. The frames are mixed
   ratios on purpose: these are photographs off a camera, not a set of crops,
   and forcing them into one box would slice people out of the edges. */
.mgal{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mgal__i figure{margin:0}
.mgal__i img{width:100%;height:auto;display:block;border:1px solid var(--border);
  border-radius:4px;background:var(--surface-2)}
.mgal__i a:focus-visible img{outline:2px solid var(--gold);outline-offset:2px}
.mgal__i figcaption{margin-top:7px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.mgal__c{display:block;margin-top:3px;font-size:11.5px;font-weight:700;
  color:var(--ink-2);opacity:.85}

/* The video is a still with a play button this page draws. The player is
   fetched only when a reader presses it, so a reference page carries no
   third-party script for a video nobody may watch. */
.vshelf{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.vshelf__i figure{margin:0}
.vfacade{position:relative;display:block;width:100%;padding:0;border:0;
  background:none;cursor:pointer;border-radius:5px;overflow:hidden;
  line-height:0}
.vfacade img{width:100%;height:auto;display:block;border:1px solid var(--border);
  border-radius:5px}
.vfacade__play{position:absolute;left:50%;top:50%;width:58px;height:40px;
  margin:-20px 0 0 -29px;border-radius:9px;background:rgba(24,59,58,.82);
  border:1px solid var(--gold2);transition:background .2s}
.vfacade__play::after{content:"";position:absolute;left:50%;top:50%;
  margin:-9px 0 0 -5px;border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--gold2)}
.vfacade:hover .vfacade__play{background:rgba(24,59,58,.95)}
.vfacade:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vfacade iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}
.vshelf__i figcaption{margin-top:7px;font-size:13px;line-height:1.55;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.vfacade__play{transition:none}}


/* ------------------------------------------------- reader photographs
   Two ways to send one in, side by side on a desktop and stacked on a
   phone. The sponsorship is labelled as sponsorship and sits apart from
   the editorial invitation above it. */
.sendin__lede{margin:0 0 18px;font-size:15px;line-height:1.7;color:var(--ink-2);max-width:62ch}
.sendin__ways{display:grid;gap:22px;align-items:start}
@media(min-width:820px){.sendin__ways{grid-template-columns:1.4fr 1fr;gap:30px}}
.sendin__form{background:var(--surface);border:1px solid var(--border);
  border-radius:6px;padding:16px 18px}
.sendin__row{margin-bottom:12px}
.sendin__row label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);
  margin-bottom:4px}
.sendin__row input{width:100%;font:inherit;padding:9px 10px;
  border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--ink);
  min-height:44px;box-sizing:border-box}
.sendin__row input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.sendin__act{margin:14px 0 0}
.sendin__msg{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--teal);min-height:1.2em}
/* A field for scripts to fill in. Off-screen rather than display:none,
   because some bots skip anything that is not rendered. */
.sendin__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Collapsed as well as hidden: an off-screen input with a height still
   measures as an interactive control in an accessibility sweep, and it
   is not one. A script filling the form reads the DOM, not the CSS, so
   it still does its job. */
.sendin__hp input{height:0;min-height:0;padding:0;border:0}

.sendin__wa{background:var(--surface-2);border:1px solid var(--border);
  border-radius:6px;padding:16px 18px}
.sendin__wa h3{margin:0 0 6px;font-size:15.5px;color:var(--teal)}
.sendin__wa p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.sendin__wabtn{font-variant-numeric:tabular-nums;letter-spacing:normal}
.sendin__note{margin:10px 0 0!important;font-size:12px;color:var(--ink-2);opacity:.9}

.sendin__wallh{margin:26px 0 12px;font-size:16px;color:var(--teal)}


/* --------------------------------------------- the 2009 hour-by-hour list
   This list borrowed .tl, whose vertical rule is drawn at 7px and whose
   indentation comes from .tl__day -- a class this list does not use. So the
   rule ran straight through the first digit of every time: "03.30" with a
   line through the nought.

   It is a time list, not a day timeline, so it gets the shape it actually
   wants: a fixed time column, right-aligned so the digits stack, the rule in
   the gutter between the two columns where it has a job to do, and the
   description in its own column with room to wrap without crossing anything. */
.tl--2009::before{inset-inline-start:72px}
.tl--2009 .tl__i{display:grid;grid-template-columns:72px minmax(0,1fr);
  gap:0 18px;padding:9px 0;align-items:baseline}
.tl--2009 .tl__t{grid-column:1;text-align:end;padding-inline-end:14px;
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--teal);
  letter-spacing:normal}
.tl--2009 .tl__d{grid-column:2;line-height:1.68}
@media(max-width:520px){
  .tl--2009::before{inset-inline-start:56px}
  .tl--2009 .tl__i{grid-template-columns:56px minmax(0,1fr);gap:0 14px}
  .tl--2009 .tl__t{padding-inline-end:10px}
}

/* ------------------------------------------------------ the 360 tours

   Ten scenes. A facade first, because each tour is megabytes of cube faces
   and most readers scroll past; the stage keeps its aspect ratio whether it
   is holding the button or the iframe, so the swap moves nothing. */
.pano__stage{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,#1B4240,#112B2A);border:1px solid var(--border)}
/* TM053: upright on a phone. 4:3 gave a letterbox a third of the screen
   tall on a portrait phone; 9:16 fills it the way the phone is held, and
   the tour's phone edition draws to whatever box it is given. */
@media(max-width:520px){.pano__stage{aspect-ratio:9/16;max-height:80vh}}
/* The opening frame behind the button (TM050), and a scrim so the words read. */
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.pano__open{z-index:1;background:linear-gradient(180deg,rgba(16,32,32,.25),rgba(16,32,32,.62))!important;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pano__open:hover{background:linear-gradient(180deg,rgba(16,32,32,.35),rgba(16,32,32,.7))!important}
.pano__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.pano__open{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:none;border:0;color:#F6E8C9;cursor:pointer;padding:22px;text-align:center;
  font-family:inherit}
.pano__open:hover{background:rgba(255,255,255,.06)}
.pano__open:focus-visible{outline:2px solid var(--gold2);outline-offset:-4px}
.pano__ico{display:block;color:var(--gold2)}
.pano__open b{font-size:17px;font-weight:700}
.pano__sub{font-size:13.5px;opacity:.85}

.pano__h{margin:22px 0 10px;font-size:15px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px}
.pano__h span{background:var(--brand);color:#fff;border-radius:999px;
  padding:1px 9px;font-size:12px;font-variant-numeric:tabular-nums}

/* The picker. A thumbnail each, because "north Aadi street" means far less to
   a reader than a picture of it does. */
.pano__scenes{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.pano__btn{display:block;width:100%;padding:0;border:1px solid var(--border);
  border-radius:9px;overflow:hidden;background:#fff;cursor:pointer;text-align:start;
  font-family:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.pano__btn img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:#EFE7DC}
.pano__btn span{display:block;padding:8px 10px 9px;font-size:13px;line-height:1.35;
  font-weight:600}
.pano__btn:hover{border-color:var(--gold)}
.pano__btn.is-on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(180,40,6,.18)}
.pano__btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pano__credit{margin:14px 0 0;font-size:13px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){.pano__btn{transition:none}}

/* ------------------------------------------------- the all-sections sheet

   Built for the reader who did not find the sideways scroll: every section,
   grouped, at 56px a row with a 16px label and the whole width tappable.
   Small targets and 13px type are exactly what makes a menu unusable for an
   older reader, and this is the menu they will actually use. */
.sheet__top{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:2px 4px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
.sheet__title{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.sheet__x{background:none;border:0;font-size:30px;line-height:1;color:var(--muted);
  cursor:pointer;padding:2px 10px;border-radius:8px;min-width:44px;min-height:44px}
.sheet__x:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.sheet__x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sheet__grp{margin:0 0 14px}
.sheet__h{margin:14px 0 4px;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase}
html:lang(ta) .sheet__h{text-transform:none;letter-spacing:normal;font-size:13.5px}
/* One column, and say so: .sheet__list is a two-column grid higher up this
   file, and a rule that does not reset display inherits it. Tamil section
   names do not fit half a phone. */
.sheet__list{list-style:none;margin:0;padding:0;display:block;
  grid-template-columns:none}
.sheet__list a{display:flex;align-items:center;gap:13px;min-height:56px;
  padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--ink);
  font-size:16px;line-height:1.35;border-bottom:1px solid rgba(0,0,0,.05)}
.sheet__list a:hover{background:rgba(180,40,6,.06)}
.sheet__list a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.sheet__list a .ico{flex:0 0 auto;color:var(--brand);opacity:.85}
.sheet__list a.is-on{background:rgba(180,40,6,.09);font-weight:700;color:var(--brand)}
.sheet__close{width:100%;min-height:52px;margin-top:8px;border:1px solid var(--border);
  border-radius:10px;background:#fff;font:inherit;font-size:16px;font-weight:600;
  color:var(--ink);cursor:pointer}
.sheet__close:hover{background:#faf6ef}

/* ----------------------------------------------------------- flash news

   The latest headlines, on every page. It does not move: a marquee is the
   usual way to build one of these and the wrong way here, because a lot of
   this site's readers are older, moving text is hard to read and impossible to
   catch up with, and a screen reader repeats it. The reader steps through
   them, or leaves them alone. */
.flash{background:#FFF4E0;border-bottom:1px solid rgba(184,144,85,.45)}
.flash__in{display:flex;align-items:center;gap:12px;min-height:42px;padding:6px 16px}
.flash__k{flex:0 0 auto;background:var(--brand);color:#fff;border-radius:4px;
  padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.flash__list{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0}
.flash__i a{color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.4;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flash__i a:hover{color:var(--brand);text-decoration:underline}
.flash__nav{flex:0 0 auto;display:flex;align-items:center;gap:2px}
.flash__b{width:30px;height:30px;border:1px solid rgba(184,144,85,.5);background:#fff;
  border-radius:6px;color:var(--brand);font-size:17px;line-height:1;cursor:pointer;padding:0}
.flash__b:hover{background:var(--brand);color:#fff}
.flash__b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.flash__n{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  min-width:30px;text-align:center}
.flash__all{flex:0 0 auto;font-size:13px;color:var(--brand);text-decoration:none;
  font-weight:600;white-space:nowrap}
.flash__all:hover{text-decoration:underline}
/* On a phone the strip is a small card, not a ticker.
   One line with an ellipsis left three words of a Tamil headline showing
   ("...") and the rest cut, so pressing next changed three words and looked
   like nothing had happened (TM049). The label, the counter and the arrows
   share the top row; the headline has the whole width below, two lines of
   it, at a size an older reader can take in. Nothing moves on its own. */
@media(max-width:620px){
  .flash__in{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"k all nav" "h h h";
    row-gap:8px;column-gap:10px;align-items:center;padding:10px 16px 12px}
  .flash__k{grid-area:k;font-size:11.5px;padding:3px 9px}
  .flash__all{grid-area:all;display:block;justify-self:start;font-size:13px}
  .flash__nav{grid-area:nav;gap:4px}
  .flash__list{grid-area:h;min-width:0}
  .flash__i a{white-space:normal;font-size:16.5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .flash__b{width:36px;height:36px;font-size:19px}
  .flash__n{font-size:13px;min-width:34px}
}

/* ------------------------------------------------------------- news page */
.news{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.news__i{display:grid;grid-template-columns:1fr;gap:0;background:#fff;
  border:1px solid var(--border);border-radius:11px;overflow:hidden}
@media(min-width:640px){
  .news__i{grid-template-columns:200px 1fr}
  .news__i--lead{grid-template-columns:1fr}
}
/* TM049: one shape for every thumbnail. The figure is a 16:10 box and the
   picture fills it. Before, the picture had height:100% and the figure sat
   in a grid row stretched to the text's height, so a long story got a tall
   portrait crop and a short one a landscape crop -- every card different. */
.news__fig{margin:0;position:relative;background:#EFE7DC;aspect-ratio:16/10;align-self:start;overflow:hidden}
.news__fig img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.news__i--lead .news__fig{aspect-ratio:16/9}
.news__fig figcaption{position:absolute;inset-inline:0;bottom:0;background:rgba(20,12,6,.62);
  color:#fff;font-size:11px;padding:4px 8px}
.news__b{padding:14px 16px 16px}
.news__when{margin:0 0 5px;font-size:12.5px;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.news__h{margin:0 0 7px;font-size:18px;line-height:1.35}
.news__i--lead .news__h{font-size:clamp(20px,3.4vw,26px)}
.news__x{font-size:14.5px;line-height:1.65;color:var(--ink)}
.news__x p{margin:0 0 8px}
.news__x :last-child{margin-bottom:0}

/* the admin's kind picker */
.kindpick{border:1px solid #ddd2c2;border-radius:7px;padding:12px 14px;margin:14px 0}
.kindpick legend{padding:0 6px;font-weight:600;font-size:13px}
.kindpick label{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:14px;cursor:pointer}
.kindpick label b{font-weight:700}
.kindpick label span{color:#6b6058;font-size:13px}

/* What the desk attaches to a ritual day: photographs, video, news.
   Nothing here renders until something is attached, so the calendar reads
   exactly as it did before the festival opens. */
.tl__more{margin:14px 0 2px;display:flex;flex-direction:column;gap:14px}
.tl__pics{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.tl__pic{margin:0}
.tl__pic a{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--gold-deep,#8d6c3a)}
.tl__pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.tl__pic figcaption{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:5px}
.tl__credit{display:block;font-size:11.5px;opacity:.8}
.tl__vids{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.tl__vid{position:relative;display:block;border-radius:6px;overflow:hidden;
  border:1px solid var(--gold-deep,#8d6c3a);text-decoration:none;color:inherit}
.tl__vid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tl__play{position:absolute;left:50%;top:42%;translate:-50% -50%;
  width:44px;height:44px;border-radius:50%;background:rgba(24,59,58,.82);
  box-shadow:0 1px 6px rgba(0,0,0,.3)}
.tl__play::after{content:"";position:absolute;left:52%;top:50%;translate:-50% -50%;
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #F3E7CE}
.tl__vidl{display:block;padding:7px 9px 8px;font-size:13px;line-height:1.4}
.tl__news{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tl__news li{padding-inline-start:15px;position:relative;font-size:14.5px;line-height:1.5}
.tl__news li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--gold,#B89055)}

/* A page with nothing on it yet, and the page that was not found.
   Both were a sentence in the middle of a lot of nothing. The panel gives the
   eye something to land on and says the same thing the sentence does -- the
   instruments are there, nobody has played them yet; the door is shut. */
.waiting{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:26px auto 34px;max-width:44ch;text-align:center}
.waiting__art{display:block;width:200px;max-width:52vw;height:auto;
  border-radius:8px;overflow:hidden;box-shadow:0 2px 14px rgba(24,59,58,.16)}
.waiting__art img{display:block;width:100%;height:auto}
.waiting .phempty{margin:0}
.feed__empty{display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;padding:24px 12px 28px}
.art--404{text-align:center}
.art404__art{display:block;width:210px;max-width:56vw;height:auto;margin:6px auto 22px;
  border-radius:8px;overflow:hidden;box-shadow:0 2px 14px rgba(24,59,58,.16)}
.art404__art img{display:block;width:100%;height:auto}
.art--404 .links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;
  justify-content:center;margin:20px auto 0;max-width:52ch}
.art--404 .links a{display:inline-block;padding:8px 14px;border:1px solid var(--gold);
  border-radius:20px;text-decoration:none;font-size:14.5px;background:var(--paper)}
.art--404 .links a:hover{background:rgba(184,144,85,.12)}

/* A carved panel filling the home card figure.
   The figure is 338x254 and held a 46px line glyph in the middle of it. The
   panel is generated at the figure's own ratio so cover crops nothing; the
   rule is there because a panel that arrives at the wrong shape should crop
   rather than stretch. */
.plaque__fig--art{display:block;padding:0;background:var(--deep)}
.plaque__art{display:block;width:100%;height:100%}
.plaque__art img{display:block;width:100%;height:100%;object-fit:cover}

/* A story from the main temple site, on the news page. */
.news__src{display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:10px;
  font-size:11.5px;letter-spacing:normal;background:rgba(184,144,85,.16);color:var(--ink-2)}
.news__h a{color:inherit;text-decoration:none}
.news__h a:hover{text-decoration:underline}
.news__more{margin:8px 0 0;font-size:14px}
.news__more a{font-weight:600}

/* The carved surround around the player. The box is the frame's own 3:2; the
   slot is inset to the hole measured in the artwork (see the partial). */
.pframe{position:relative;aspect-ratio:3/2;margin:0 auto}
.pframe__art{position:absolute;inset:0;z-index:2;pointer-events:none;display:block}
.pframe__art img{display:block;width:100%;height:100%}
.pframe .player__slot{position:absolute;left:7.2%;right:7.2%;top:12.5%;bottom:16%;
  aspect-ratio:auto;border-radius:3px}
/* On a phone the surround costs too much. At 390px the bands took the video
   down to 306x171 -- a quarter of the screen for the thing the page is for
   (TM056). Below 700px the frame is dropped and the player has the full card
   width at 16:9; the surround is for screens with room to spare. */
@media(max-width:699px){
  .pframe{aspect-ratio:auto}
  .pframe__art{display:none}
  .pframe .player__slot{position:relative;inset:auto;aspect-ratio:16/9;border-radius:11px}
}

/* Extra photographs on a news entry, under its words. */
.epics{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin:12px 0 4px}
.epics__i{margin:0}
.epics__i a{display:block;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.epics__i img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.epics__i figcaption{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:5px}
.epics__c{display:block;font-size:11.5px;opacity:.8}

/* The one-time sound hint over the 360 stage on touch screens. */
.pano__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  margin:0;padding:8px 14px;border-radius:20px;background:rgba(24,59,58,.88);color:#F3E7CE;
  font-size:14px;line-height:1.3;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;z-index:3;transition:opacity .6s}
.pano__hint.is-gone{opacity:0}

/* ------------------------------------------------------------ video library
   A card with the frame of the video on it, a play mark over the frame when
   there is a video, and the title beneath. The lead card is wider. */
.tile__fig--video{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  margin:-15px -15px 12px;padding:0;background:var(--deep);border-bottom:1px solid var(--card-edge)}
.tile__fig--video img{display:block;width:100%;height:100%;object-fit:cover}
.tile__fig--video .tile__art{display:block;width:100%;height:100%}
.tile__fig--video .tile__art img{object-fit:cover}
.tile__play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;
  background:rgba(24,59,58,.82);box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .2s,background .2s}
.tile__play::after{content:"";position:absolute;left:53%;top:50%;translate:-50% -50%;
  border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #F3E7CE}
.tile--video:hover .tile__play,.tile--video:focus-visible .tile__play{background:var(--brand);transform:scale(1.06)}
.tile--video h2::before,.tile--video h3::before{content:none}
.tile--soon .tile__fig--video img,.tile--soon .tile__fig--video .tile__art{opacity:.78}
@media(min-width:940px){
  .grid--3 .tile--video.tile--lead{grid-column:span 2}
  .grid--3 .tile--video.tile--lead h2{font-size:22px}
}

/* The video desk's Shorts on the video page: a sideways strip of portrait
   tiles, and a portrait player on the reel's own page. hqdefault carries the
   vertical frame pillarboxed in 4:3; cover into 9:16 shows just the frame. */
.sec--reels{margin-top:22px}
.sec__n{font-size:13px;font-weight:600;color:var(--muted,#6b5f5a);margin-left:6px}
.hscroll--reels .hscroll__i{flex:0 0 clamp(150px,42vw,190px)}
.reel__a{display:block;color:inherit;text-decoration:none}
.reel__fig{display:block;position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:12px;
  background:#1a1012;border:1px solid var(--card-edge,#d8c8bc)}
.reel__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.reel__t{display:block;margin-top:8px;font-size:14px;line-height:1.35;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel__a:hover .reel__t{color:var(--brand)}
.player--reel{display:flex;justify-content:center}
.player__slot--reel{aspect-ratio:9/16;width:min(100%,420px);max-height:80vh}
.art__meta--src{font-size:13px;color:var(--muted,#6b5f5a)}

/* The story a ticker headline points at (TM061). */
.news__i:target{outline:2px solid var(--gold);outline-offset:3px;scroll-margin-top:120px}

/* The 360 narration control (TM057). One button, two faces: playing / off. */
.pano__soundrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 0}
.pano__sound{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;min-height:44px;
  border:1px solid var(--gold);border-radius:999px;background:var(--surface);color:var(--teal);
  font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.pano__sound .ico{width:18px;height:18px}
.pano__sound[aria-pressed="true"] .pano__sound-off{display:none}
.pano__sound[aria-pressed="false"] .pano__sound-on{display:none}
.pano__sound[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.pano__sound-on,.pano__sound-off{display:inline-flex;align-items:center;gap:8px}
.pano__soundnote{font-size:13px;color:var(--muted,#6b5f5a)}
.pano__hint{display:none}

/* The scene name over the stage's bottom-left corner (see site.js). Sized
   to cover the 114x27 mark the tour draws there, with room to spare. */
.pano__badge{position:absolute;left:0;bottom:6px;z-index:3;display:inline-flex;align-items:center;
  min-width:132px;min-height:38px;padding:6px 14px 6px 12px;box-sizing:border-box;
  background:rgba(16,32,32,.94);color:#F3E8D6;font-size:13px;font-weight:700;line-height:1.2;
  border:1px solid rgba(210,173,107,.55);border-left:0;border-radius:0 9px 9px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:auto;
  /* never as far as the tour's own Dinamalar mark in the opposite corner
     (180px, anchored right); a long scene name is cut with an ellipsis */
  max-width:calc(100% - 196px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* The live page's standfirst, under the player. */
.live__lede{margin:14px 0 6px}

/* The sound button over a stream that started muted on its own. */
.player__unmute{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;min-height:44px;border:1px solid rgba(255,255,255,.6);border-radius:999px;
  background:rgba(16,32,32,.82);color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.player__unmute:hover{background:rgba(16,32,32,.95)}
.player__unmute span{font-size:18px;line-height:1}

/* The control pill over the tour's own toolbar (TM065): 390x41 centred, 59px
   up from the foot on the wide skin; 106x42 on the phone skin. This covers
   it at every width, with its own sound switch and full-screen button. */
.pano__bar{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:4;display:flex;gap:6px;align-items:center;
  padding:4px;min-width:min(420px,calc(100% - 24px));justify-content:center;
  background:rgba(16,32,32,.94);border:1px solid rgba(210,173,107,.55);border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.pano__bar .pano__sound{min-height:40px;padding:8px 14px;font-size:13px;border-color:transparent;background:transparent;color:#F3E8D6}
.pano__bar .pano__sound[aria-pressed="true"]{background:rgba(210,173,107,.18);color:#F3E8D6;border-color:transparent}
.pano__full{min-width:40px;min-height:40px;border:0;border-radius:999px;background:transparent;color:#F3E8D6;font-size:18px;cursor:pointer}
.pano__full:hover,.pano__bar .pano__sound:hover{background:rgba(255,255,255,.1)}
@media(max-width:520px){.pano__bar{min-width:0;bottom:52px}}


/* ================================================================ சிறப்பு மலர்
   The printed supplement re-set for the phone. Three surfaces:
   the deck (/malar/: a cover, then one story to a screen), the story
   (big Tamil type, a size control, the next story ready at the end) and
   the printed pages (a grid, then one page at reading size). Colours and
   type are the site's own; the cards borrow the paper's darkness so the
   headlines read as headlines, not as more of the page. */

/* ---- cover */
.mk-cover{background:var(--deep);color:#F5EBDD;position:relative;overflow:hidden;
  padding:26px 18px 30px;background-image:radial-gradient(rgba(255,240,189,.10) .7px,transparent .8px);background-size:12px 12px}
.mk-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold2) 30%,var(--gold2) 70%,transparent)}
.mk-cover__in{max-width:600px;margin:0 auto;position:relative}
.mk-cover__eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.05em;color:var(--gold2)}
.mk-cover__h1{margin:0 0 12px;font-family:var(--font-tamil);font-weight:700;color:var(--gold-soft);
  font-size:clamp(30px,8.4vw,44px);line-height:1.2;text-wrap:balance}
.mk-cover__lede{margin:0 0 16px;font-size:16px;line-height:1.7;color:rgba(245,235,221,.88);max-width:34em}
.mk-cover__stats{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:rgba(245,235,221,.8)}
.mk-cover__stats b{font-size:20px;color:var(--gold-soft);font-variant-numeric:tabular-nums;margin-right:3px}
.mk-cover__cta{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.mk-cover__cta .btn{padding:11px 18px;border-radius:999px}
.mk-cover__fan{display:flex;justify-content:center;margin:24px 0 -6px;padding-top:8px}
.mk-cover__fan img{width:96px;height:auto;border:3px solid #fff;border-radius:3px;box-shadow:0 10px 26px rgba(0,0,0,.4);background:#fff}
.mk-cover__fan img:nth-child(1){transform:rotate(-9deg) translate(14px,10px)}
.mk-cover__fan img:nth-child(2){transform:translateY(-4px);position:relative;z-index:1}
.mk-cover__fan img:nth-child(3){transform:rotate(9deg) translate(-14px,10px)}
@media(min-width:760px){
  .mk-cover{padding:44px 24px 46px}
  .mk-cover__in{max-width:1000px;display:grid;grid-template-columns:1fr 340px;align-items:center;column-gap:30px}
  .mk-cover__in>*{grid-column:1}
  .mk-cover__fan{grid-column:2;grid-row:1/span 5;margin:0;padding:0}
  .mk-cover__fan img{width:130px}
}
/* the homepage strip for the supplement */
.mkpromo{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 16px;border-radius:12px;text-decoration:none;
  color:#F5EBDD;background:linear-gradient(160deg,#1F4846,#112B2A);box-shadow:0 8px 22px rgba(24,59,58,.18);position:relative;overflow:hidden}
.mkpromo::after{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
.mkpromo__fan{display:flex;flex:0 0 auto;width:86px;justify-content:center}
.mkpromo__fan img{width:44px;height:auto;border:2px solid #fff;border-radius:2px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.mkpromo__fan img:nth-child(1){transform:rotate(-10deg) translate(10px,4px)}
.mkpromo__fan img:nth-child(2){position:relative;z-index:1}
.mkpromo__fan img:nth-child(3){transform:rotate(10deg) translate(-10px,4px)}
.mkpromo__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mkpromo__k{font-size:12px;letter-spacing:.04em;color:var(--gold2)}
.mkpromo__h{font-family:var(--font-tamil);font-weight:700;font-size:clamp(17px,4.4vw,21px);line-height:1.3;color:var(--gold-soft)}
.mkpromo__d{font-size:12.5px;color:rgba(245,235,221,.8)}
.mkpromo__go{margin-left:auto;font-size:22px;color:var(--gold2)}
.mkpromo:hover .mkpromo__go{transform:translateX(3px)}

/* ---- iPaper free-read links: the paper itself, one link per part */
.mk-ipaper{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;
  text-decoration:none;color:var(--gold-soft);border:1px solid rgba(210,173,107,.7);background:rgba(255,240,189,.08)}
.mk-ipaper::before{content:"";width:9px;height:12px;border:1.5px solid currentColor;border-radius:1px;
  box-shadow:inset 0 3px 0 -1.5px currentColor;opacity:.9}
.mk-ipaper:hover{background:rgba(255,240,189,.16)}
.mk-cover__ipaper{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(245,235,221,.85)}
.mk-cover__ipaper-k{flex:1 0 100%}
.mk-part__ipaper{margin-top:10px;color:var(--brand-deep);border-color:var(--gold);background:#fff}
.mk-part__ipaper:hover{background:var(--card)}
.mk-tools__b--ipaper{border-color:var(--gold);color:var(--brand-deep);font-weight:700}
.mk-tools__b--ipaper small{font-weight:400;font-size:12px;color:var(--muted)}
.mk-pages__ipaper{margin:-6px 0 12px}
.mk-pages__ipaper .mk-ipaper{color:var(--brand-deep);border-color:var(--gold);background:#fff}
.mkpromo__ip{color:var(--gold-soft);font-weight:700}
@media(min-width:760px){.mk-cover__ipaper-k{flex:0 0 auto}}

/* ---- part bar (sticky under the section nav) */
.mk-bar{position:sticky;top:48px;z-index:25;background:var(--ivory);border-bottom:1px solid var(--border);
  box-shadow:0 2px 8px rgba(24,59,58,.08)}
.mk-bar__in{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:8px 12px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mk-bar__in::-webkit-scrollbar{display:none}
.mk-bar__part{white-space:nowrap;font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);
  color:var(--ink);text-decoration:none;background:#fff}
.mk-bar__part.is-on{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.mk-bar__count{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:6px}
.mk-bar__pages{font-size:13px;color:var(--brand);white-space:nowrap;font-weight:700}
@media(min-width:900px){.mk-bar__in{max-width:1000px}}

/* ---- deck */
.mk-deck{display:flex;flex-direction:column;gap:12px;padding:12px 12px 28px;max-width:600px;margin:0 auto}
.mk-part{padding:22px 6px 6px}
.mk-part__k{margin:0 0 4px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.mk-part__h{margin:0;font-size:clamp(19px,4.6vw,24px);color:var(--brand-deep);text-wrap:balance}
.mk-card{position:relative;border-radius:16px;color:#F5EBDD;display:flex;overflow:hidden;
  min-height:min(72dvh,560px);box-shadow:0 10px 28px rgba(24,59,58,.16)}
.mk-card--teal{background:linear-gradient(160deg,#1F4846,#112B2A)}
.mk-card--maroon{background:linear-gradient(160deg,#5C2721,#30130F)}
.mk-card--bronze{background:linear-gradient(160deg,#4C3B21,#271E12)}
.mk-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,240,189,.09) .7px,transparent .8px);background-size:12px 12px}
.mk-card::after{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
.mk-card__a{position:relative;display:flex;flex-direction:column;flex:1 1 auto;padding:20px 20px 18px;
  color:inherit;text-decoration:none}
.mk-card__a:focus-visible{outline:3px solid var(--gold2);outline-offset:-6px;border-radius:16px}
.mk-card__k{display:flex;gap:10px;align-items:center;margin:0;font-size:12px;letter-spacing:.04em;color:var(--gold2)}
.mk-card__page{border:1px solid rgba(210,173,107,.6);border-radius:999px;padding:3px 9px}
.mk-card__h{margin:auto 0 12px;padding-right:72px;font-family:var(--font-tamil);font-weight:700;
  font-size:clamp(24px,6.6vw,32px);line-height:1.3;color:var(--gold-soft);text-wrap:balance}
.mk-card__teaser{margin:0 0 18px;font-size:16px;line-height:1.7;color:rgba(245,235,221,.86);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mk-card__go{margin-top:auto;font-size:14px;font-weight:700;color:var(--gold2)}
.mk-card.is-read .mk-card__go{color:rgba(210,173,107,.75)}
.mk-card.is-read .mk-card__go::before{content:"\2713\00a0";}
.mk-card__clip{position:absolute;right:16px;top:44px;width:64px;height:auto;border:3px solid #fff;border-radius:3px;
  background:#fff;transform:rotate(4deg);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.mk-end{max-width:600px;margin:0 auto;padding:6px 18px 30px;font-size:14px;color:var(--ink-2);line-height:1.6}
/* one story to a screen on a phone; the snap is a suggestion, so ads and part headers never trap the thumb */
@media(max-width:767px){
  :root:has(.mk-deck){scroll-snap-type:y proximity}
  .mk-card{scroll-snap-align:start;scroll-margin-top:98px}
}
@media(min-width:900px){
  .mk-deck{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 16px 36px}
  .mk-part,.mk-deck>.ad,.mk-deck>.ad-wrap,.mk-deck>[class*="ad--"]{grid-column:1/-1}
  .mk-card{min-height:340px}
  .mk-card__h{font-size:27px}
  .mk-end{max-width:1000px}
}

/* ---- the story */
.mk-progress{position:sticky;top:48px;z-index:26;height:3px;background:rgba(184,144,85,.18);margin:-1px -16px 0}
.mk-progress b{display:block;height:100%;width:0;background:var(--gold);transition:width .12s linear}
.mk-story{max-width:660px;margin:0 auto;padding:8px 0 10px}
.mk-story__k{margin:0 0 10px;font-size:12.5px;letter-spacing:.03em;color:var(--muted)}
.mk-story__k a{color:var(--brand);text-decoration:none;font-weight:700}
.mk-story__h1{margin:0 0 10px;font-family:var(--font-tamil);font-weight:700;color:var(--brand-deep);
  font-size:clamp(27px,7vw,40px);line-height:1.28;text-wrap:balance}
.mk-story__meta{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.mk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding:10px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mk-tools__fs{display:inline-flex;gap:4px}
.mk-tools__b{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--border);background:#fff;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.mk-tools__b:hover{border-color:var(--gold);color:var(--brand)}
.mk-tools__b--page{margin-left:auto}
.mk-tools__b--page img{width:22px;height:auto;border:1px solid var(--border);border-radius:2px}
.mk-body{--mk-fs:19px;font-size:var(--mk-fs);line-height:1.85;color:var(--ink);max-width:36em}
.mk-body p{margin:0 0 1.05em;text-wrap:pretty}
.mk-body p:first-child{font-size:calc(var(--mk-fs) * 1.06);color:var(--brand-deep)}
.mk-body__h{margin:1.5em 0 .5em;font-family:var(--font-tamil);font-weight:700;color:var(--brand-deep);
  font-size:calc(var(--mk-fs) * 1.12);line-height:1.4}
.mk-body__list{margin:0 0 1.1em;padding-inline-start:1.3em}
.mk-body__list li{margin:0 0 .45em}
.mk-body ul.mk-body__list{list-style:none;padding-inline-start:1.2em}
.mk-body ul.mk-body__list li{position:relative}
.mk-body ul.mk-body__list li::before{content:"";position:absolute;inset-inline-start:-1.15em;top:.68em;width:7px;height:7px;
  border:1.5px solid var(--gold);transform:rotate(45deg)}
.mk-body__verse{margin:0 0 1.2em;padding:14px 18px;border-inline-start:3px solid var(--gold);background:var(--card);
  border-radius:0 8px 8px 0;font-size:calc(var(--mk-fs) * .98);line-height:1.9;color:var(--brand-deep)}
.mk-body__by{margin:-.3em 0 1.4em;font-size:calc(var(--mk-fs) * .82);color:var(--muted);text-align:end}
.mk-body__info{margin:0 0 1.2em;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:10px;
  font-size:calc(var(--mk-fs) * .88);line-height:1.6}
.mk-body__info div{display:grid;grid-template-columns:7.5em 1fr;gap:6px;padding:4px 0}
.mk-body__info dt{color:var(--muted)}
.mk-body__info dd{margin:0}
.mk-story__foot{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.mk-story__src{margin:0;font-size:13px;color:var(--ink-2);line-height:1.6}
.mk-story__src a{color:var(--brand)}
.mk-next{max-width:660px;margin:18px auto 10px;display:grid;gap:10px}
.mk-next__a{display:block;padding:18px 20px;border-radius:14px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--border)}
.mk-next__a--next{background:linear-gradient(160deg,#1F4846,#112B2A);color:#F5EBDD;border-color:transparent;
  box-shadow:0 10px 24px rgba(24,59,58,.18)}
.mk-next__k{display:block;font-size:12px;letter-spacing:.05em;color:var(--gold2);margin-bottom:6px}
.mk-next__a--prev .mk-next__k{color:var(--muted)}
.mk-next__h{display:block;font-family:var(--font-tamil);font-weight:700;font-size:20px;line-height:1.35;text-wrap:balance}
.mk-next__a--next .mk-next__h{color:var(--gold-soft)}
.mk-next__t{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:rgba(245,235,221,.8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-next__m{display:block;margin-top:10px;font-size:12px;color:var(--gold2)}
.mk-next__all{justify-self:center;font-size:14px;color:var(--brand);padding:6px}
@media(min-width:760px){.mk-next{grid-template-columns:1fr 1fr}.mk-next__a--next{grid-column:1/-1}.mk-next__all{grid-column:1/-1}}

/* ---- the printed pages */
.mk-pages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.mk-pages{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.mk-pages{grid-template-columns:repeat(5,1fr)}}
.mk-pages__a{display:block;position:relative;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden;
  background:#fff;border:1px solid var(--border);box-shadow:0 4px 12px rgba(24,59,58,.08)}
.mk-pages__a img{display:block;width:100%;height:auto;aspect-ratio:2008/3189;object-fit:cover}
.mk-pages__n{position:absolute;top:8px;left:8px;background:var(--brand-deep);color:var(--gold-soft);font-size:12px;
  font-weight:700;padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.mk-pages__t{display:block;padding:8px 9px 2px;font-size:12.5px;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-pages__c{display:block;padding:0 9px 9px;font-size:11px;color:var(--muted)}
.mk-page{max-width:760px;margin:0 auto}
.mk-page__h1{margin:0 0 12px;font-size:clamp(22px,5.4vw,30px);color:var(--brand-deep)}
.mk-page__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:14px}
.mk-page__nav a{color:var(--brand);text-decoration:none;font-weight:700;padding:6px 0}
.mk-page__ep{border:1px solid var(--gold);border-radius:999px;padding:6px 14px!important;background:#fff}
.mk-page__hint{font-size:12px;color:var(--muted)}
.mk-page__fig{margin:0;background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden;
  box-shadow:0 8px 24px rgba(24,59,58,.12);touch-action:pinch-zoom}
.mk-page__fig img{display:block;width:100%;height:auto}
.mk-page__stories{margin-top:22px}
.mk-page__list{list-style:none;margin:0;padding:0}
.mk-page__list li{padding:9px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mk-page__list a{color:var(--brand-deep);font-weight:700;text-decoration:none}
.mk-page__list span{font-size:12px;color:var(--muted);white-space:nowrap}