/* ============================================================================
   v25 Gate 3e — THE CHROME STOPS CARRYING A SECOND PALETTE.

   This sheet loads LAST on all 219 routes, and until now it decided its own
   colours twice over: eight var() calls whose FALLBACK was a hard-coded v21
   literal, and thirty-four bare hex literals besides. A fallback only applies
   when the name is undefined, so on the migrated estate most of them never
   fired — but they were a second set of values sitting behind the first, and
   the one that mattered fired on every route that had not migrated yet:

       --saffron  #aa4c1d   4.38 : 1 on the quiet band   BELOW AA
       --sp-accent #a8481a  4.71 : 1 on the quiet band

   Every fallback is now a canonical token rather than a literal, and every
   literal that was one of the v21 palette values is now the token it was a
   copy of. What is left is #fff, #000 and #999, which are print and
   forced-colors values and are not part of any palette.

   NOTHING HERE CHANGES THE HEADER'S CALL-TO-ACTION COLOUR. It is still the
   saffron family, and whether this site should have two action colours — this
   one and the temple maroon the system's primary button uses — is a design
   decision for the owner, with previews, not a side effect of removing a
   duplicate value.
   ============================================================================ */

/* chrome.css — the ONE header and footer, for all 200 pages.
 *
 * WHY THIS FILE EXISTS
 *   Until 2026-08-20 the site had three header layouts and four footer layouts,
 *   styled by rules scattered across 29 stylesheets. Every page carried the same
 *   *links*, which is what tools/verify_chrome.py checked — but they did not
 *   render the same, and on a phone they were not close: the homepage header was
 *   75px with a menu button, while inner pages were 145–180px because the nav
 *   had nowhere to collapse to and wrapped under the emblem. The footer was
 *   680px of three-column layout on the homepage and a 291px flat link row
 *   everywhere else.
 *
 * TWO RULES THAT KEEP IT FIXED
 *   1. Every class here is prefixed `sp-`. No other stylesheet on the site uses
 *      that prefix, so no per-page rule can reach into the chrome and no chrome
 *      rule can leak out. Do not reuse an unprefixed name (.brand, .emblem,
 *      .foot-links, .nav) — those are exactly the names that collided before.
 *   2. This file is loaded LAST on every page. Anything that still tried to
 *      style the chrome would lose on source order as well as on specificity.
 *
 * 2026-08-20 (v13) — grouped navigation and a real mobile drawer.
 *   Nine flat header links became five top-level items, four of which open a
 *   panel. The same tree is a row of dropdowns above 1000px and an accordion
 *   inside an off-canvas drawer below it — one information architecture, two
 *   presentations, so a visitor who learns the menu on a laptop finds the same
 *   shape on a phone.
 */

/* --------------------------------------------------------- self-contained --
 * The chrome must not inherit page typography. Five different body settings
 * exist across the site (18px/1.72, 16px/1.60, 16px/1.72, 16px/1.70, 16px/1.75),
 * and because the footer's text inherits them the SAME markup measured 857px
 * to 916px tall depending on which page it sat in. Every text element in the
 * chrome therefore declares its own font-size and line-height. Do not remove
 * these and rely on inheritance.
 */
.sp-nav,.sp-foot{font-family:Spectral,Georgia,serif;font-size:16px;line-height:1.6;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
.sp-nav *,.sp-foot *{font-size:inherit;line-height:inherit}
.sp-nav button{font-family:inherit}

/* ---------------------------------------------------------------- skip -- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--espresso, var(--sp-deep));
  color:#fff;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none;font-size:.95rem}
.skip-link:focus{left:0}

/* -------------------------------------------------------------- header -- */
.sp-nav{position:sticky;top:0;z-index:100;background:rgba(250,243,229,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line, var(--sp-line));transition:box-shadow .3s}
/* While the drawer is open the header must (a) out-rank the homepage's fixed
   .mobile-bar at z-index:1200 and (b) drop backdrop-filter, because a filtered
   ancestor becomes the containing block for position:fixed descendants and the
   drawer would be trapped inside the 75px header box. */
.sp-nav.sp-open{z-index:1300;-webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--cream, var(--sp-ground))}
/* ONE CONTAINER FORMULA, TWO DESIGN GENERATIONS (v25 Gate 3c).
   The chrome said 1180px with a 28px gutter, which is a 1124px content
   box; a migrated page says var(--sp-wide) with var(--sp-gutter), which
   is 1160. So on every wide migrated route the header sat 18px inboard
   of the h1 it introduces, and the footer with it. The v24 gate-2 review
   records the same defect and the same fix: ONE formula that resolves to
   the OLD numbers where there are no v24 tokens, so the 22 routes still
   on the legacy estate do not move by a pixel. */
.sp-nav-in{max-width:var(--sp-wide,1180px);margin:0 auto;padding:14px var(--sp-gutter,28px);display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.sp-brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 1 auto;min-width:0}
.sp-mark{width:104px;height:46px;flex:0 0 104px;
  background:url("../img/emblem.webp") left center/contain no-repeat}
.sp-word{display:block;min-width:0}
.sp-full{display:block;font-family:'Marcellus',Georgia,serif;font-size:17px;
  color:var(--espresso, var(--sp-deep));letter-spacing:.02em;line-height:1;white-space:nowrap}
.sp-sub{display:block;font-family:'Marcellus SC',Georgia,serif;font-size:12px;line-height:1.2;
  letter-spacing:.07em;color:var(--saffron, var(--sp-accent));text-transform:uppercase;margin-top:3px;
  white-space:nowrap}

/* ------------------------------------------------------------- nav tree -- */
.sp-nav ul{list-style:none;margin:0;padding:0}
.sp-nav li{list-style:none;margin:0;padding:0;background:none;text-indent:0}
.sp-nav li::marker,.sp-nav li::before{content:none}
.sp-links{display:flex;align-items:center;gap:2px}
.sp-item{position:relative}
.sp-link,.sp-top{color:var(--espresso, var(--sp-deep));text-decoration:none;font-size:14px;line-height:1.3;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;min-height:40px;
  padding:4px 10px;border:0;border-radius:6px;background:none;cursor:pointer}
.sp-link:hover,.sp-top:hover{background:rgba(170,76,29,.08)}
.sp-link:focus-visible,.sp-top:focus-visible,.sp-nav-cta:focus-visible,.sp-burger:focus-visible,
.sp-panel a:focus-visible,.sp-brand:focus-visible,.sp-call a:focus-visible{
  outline:2px solid var(--saffron, var(--sp-accent));outline-offset:2px}
/* current page, and the section that contains it */
.sp-link[aria-current="page"],.sp-top[data-current="section"]{
  box-shadow:inset 0 -2px 0 var(--saffron, var(--sp-accent))}
.sp-caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  margin-top:3px;transition:transform .2s}
.sp-top[aria-expanded="true"] .sp-caret{transform:rotate(180deg)}

.sp-panel a{display:block;color:var(--espresso, var(--sp-deep));text-decoration:none;font-size:14px;
  line-height:1.35;padding:9px 12px;border-radius:5px;min-height:38px}
.sp-panel a:hover{background:rgba(170,76,29,.09)}
.sp-panel a[aria-current="page"]{color:var(--saffron-dark, var(--sp-accent));
  box-shadow:inset 2px 0 0 var(--saffron, var(--sp-accent))}
.sp-panel-k{margin:10px 12px 4px;font-family:'Marcellus SC',Georgia,serif;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sp-ink-3)}

/* RENAMED 2026-10-03 (v25 Gate 3b) from .sp-cta. The header button and the
   system primary button are two different objects — this one is a nav pill
   at 13px with a 40px box — and they were sharing a name while this sheet
   loaded last on all 219 routes, so the chrome silently painted every page
   button it could reach. NOTHING about its appearance changed here. That it
   is saffron while the system primary is the temple maroon is a REAL second
   action colour, and resolving it is the documented design decision that
   belongs with the chrome migration, not with a rename. */
.sp-nav-cta{background:var(--saffron, var(--sp-accent));color:#fff;padding:10px 18px;border-radius:999px;
  font-family:'Marcellus SC',Georgia,serif;letter-spacing:.05em;font-size:13px;line-height:1.2;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;white-space:nowrap}
.sp-nav-cta:hover{background:var(--sp-accent-deep);color:#fff}

/* burger: three bars that become an X, driven by aria-expanded so the visual
   state and the accessibility state cannot disagree. */
.sp-burger{display:none;background:none;border:0;color:var(--espresso, var(--sp-deep));cursor:pointer;
  padding:10px;min-width:44px;min-height:44px;align-items:center;justify-content:center;
  border-radius:6px;position:relative;z-index:2}
.sp-burger-i{position:relative;display:block;width:22px;height:2px;background:currentColor;
  transition:background-color .2s}
.sp-burger-i::before,.sp-burger-i::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:currentColor;transition:transform .25s}
.sp-burger-i::before{transform:translateY(-7px)}
.sp-burger-i::after{transform:translateY(7px)}
.sp-burger[aria-expanded="true"] .sp-burger-i{background:transparent}
.sp-burger[aria-expanded="true"] .sp-burger-i::before{transform:rotate(45deg)}
.sp-burger[aria-expanded="true"] .sp-burger-i::after{transform:rotate(-45deg)}

.sp-scrim{display:none}
.sp-call{display:none}
.sp-drawer-k{display:none}

/* --------------------------------------------------- desktop: dropdowns -- */
@media(min-width:1061px){
  .sp-drawer{display:flex;align-items:center;gap:18px}
  .sp-panel{position:absolute;top:calc(100% + 6px);left:-6px;min-width:264px;z-index:5;
    background:var(--cream, var(--sp-ground));border:1px solid var(--line, var(--sp-line));border-radius:10px;
    box-shadow:0 18px 34px rgba(56,34,15,.16);padding:8px;display:none}
  /* :hover and :focus-within are the no-JavaScript fallback: without them the
     grouped pages would be reachable only from the footer. With JS, chrome.js
     also toggles .sp-open and keeps aria-expanded honest. */
  .sp-has:hover>.sp-panel,.sp-has:focus-within>.sp-panel,.sp-panel.sp-open{display:block}
  /* the last two groups open leftwards so they cannot leave the viewport */
  .sp-item:nth-last-child(2)>.sp-panel,.sp-item:nth-last-child(3)>.sp-panel{left:auto;right:-6px}
}

/* ------------------------------------------------------ mobile: drawer -- */
@media(max-width:1060px){
  /* above the drawer (z-index 3), so the ✕ is always the thing you tap to
     close and the close control is never hidden under the panel it opened */
  .sp-burger{display:inline-flex;z-index:4}
  .sp-nav-in{position:relative;gap:8px}
  .sp-mark{width:78px;height:35px;flex:0 0 78px}
  .sp-brand{gap:8px}
  .sp-full{font-size:15px}
  .sp-sub{font-size:11px}

  .sp-scrim{display:block;position:fixed;inset:0;z-index:1;background:rgba(56,34,15,.5);
    opacity:0;pointer-events:none;transition:opacity .28s}
  .sp-scrim.sp-open{opacity:1;pointer-events:auto}

  /* display:none while closed, NOT just parked off-screen.
     A position:fixed element that sticks out past the right edge still counts
     towards the viewport's scrollable overflow, so a translated-away drawer
     lets the whole site be dragged sideways on a phone. The obvious remedy —
     overflow-x:clip on <html> — was tried and rejected: it silently stopped
     position:sticky working, so the header scrolled away and the menu button
     went with it. chrome.js therefore sets display before it animates in, and
     clears it after the slide out finishes. */
  .sp-drawer{position:fixed;top:0;right:0;bottom:0;z-index:3;width:min(88vw,380px);
    background:var(--cream, var(--sp-ground));box-shadow:-14px 0 40px rgba(56,34,15,.22);
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:74px 18px calc(24px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(102%);visibility:hidden;transition:transform .28s ease}
  .sp-drawer.sp-mounted{display:flex}
  .sp-drawer.sp-open{transform:none;visibility:visible}

  .sp-links{flex-direction:column;align-items:stretch;gap:0}
  .sp-item{width:100%}
  .sp-link,.sp-top{width:100%;justify-content:space-between;min-height:48px;padding:12px 6px;
    font-size:15.5px;border-radius:0;border-bottom:1px solid rgba(158,129,57,.18);white-space:normal}
  .sp-link[aria-current="page"],.sp-top[data-current="section"]{
    box-shadow:inset 3px 0 0 var(--saffron, var(--sp-accent))}
  .sp-panel{display:none;padding:2px 0 10px 14px;border-bottom:1px solid rgba(158,129,57,.18)}
  .sp-panel.sp-open{display:block}
  .sp-panel a{min-height:44px;display:flex;align-items:center;font-size:14.5px;padding:10px 8px}

  .sp-nav-cta{width:100%;margin-top:18px;border-radius:6px;min-height:48px;font-size:14px}

  .sp-drawer-k{display:block;margin:22px 0 6px;font-family:'Marcellus SC',Georgia,serif;
    font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-ink-3)}
  .sp-call{display:flex;flex-direction:column;gap:8px}
  .sp-call a{display:flex;align-items:center;min-height:46px;padding:11px 12px;
    border:1px solid var(--line, var(--sp-line));border-radius:6px;text-decoration:none;font-size:14.5px;
    line-height:1.35;color:var(--espresso, var(--sp-deep));background:#fff}
  .sp-call a:hover{border-color:var(--saffron, var(--sp-accent))}
}

/* -------------------------------------------------------------- footer -- */
.sp-foot{background:var(--espresso, var(--sp-deep));color:rgba(250,243,229,.78);padding:58px 0 32px;
  margin-top:0}
.sp-foot-in{max-width:var(--sp-wide,1180px);margin:0 auto;padding:0 var(--sp-gutter,28px)}
.sp-foot-grid{display:grid;grid-template-columns:1.15fr 1.35fr 1fr;gap:40px;margin-bottom:40px;align-items:start}
.sp-foot-mark{width:104px;height:46px;display:block;margin:0 0 14px;
  background:url("../img/emblem.webp") left center/contain no-repeat}
.sp-foot-name{font-family:'Marcellus',Georgia,serif;font-size:19px;line-height:1.25;
  color:var(--cream, var(--sp-ground));margin:0}
.sp-foot-role{font-family:'Marcellus SC',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
  font-size:12.5px;line-height:1.4;color:var(--gold-soft, var(--sp-gold-soft));margin:4px 0 0}
.sp-foot-about{color:rgba(250,243,229,.6);font-size:14.5px;line-height:1.65;margin:14px 0 0;
  max-width:38ch}
.sp-foot-om{color:var(--gold-soft, var(--sp-gold-soft));margin:12px 0 0;font-size:17px;line-height:1.5}
.sp-foot-col h2{font-family:'Marcellus SC',Georgia,serif;letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;line-height:1.2;color:var(--gold-soft, var(--sp-gold-soft));margin:0 0 16px;font-weight:400}
/* the Explore column carries sixteen links; the sub-headings make it a
   structure a visitor can scan instead of a wall of blue-on-brown text */
.sp-foot-col h3{font-family:'Marcellus SC',Georgia,serif;letter-spacing:.1em;text-transform:uppercase;
  font-size:11.5px;line-height:1.2;color:rgba(231,207,156,.72);margin:18px 0 6px;font-weight:400}
.sp-foot-col h3:first-of-type{margin-top:0}
.sp-foot-col a{display:block;width:100%;color:rgba(250,243,229,.72);font-size:14.5px;
  line-height:1.5;padding:5px 0;text-decoration:none;transition:color .25s;min-height:24px}
.sp-foot-col a:hover,.sp-foot-col a:focus-visible{color:#fff;text-decoration:underline}
.sp-foot-col a[aria-current="page"]{color:var(--gold-soft, var(--sp-gold-soft))}

.sp-foot-bottom{border-top:1px solid rgba(231,207,156,.2);padding-top:24px;
  color:rgba(250,243,229,.58);font-size:13px;line-height:1.7}
/* The footer is a dark band inside a light document, and an archive stylesheet
   still carries `p,li{color:var(--ink)}` — an ELEMENT selector, which beats the
   inherited colour on .sp-foot-bottom without beating a class. That is exactly
   how .sp-rights ended up as #2f2013 on var(--sp-deep) (1.1:1, invisible) on all 218
   pages after the footer redesign. Every paragraph in the footer therefore
   states its own colour, and tools/verify_pages.js measures the result. */
.sp-foot p{color:rgba(250,243,229,.72)}
.sp-copy{margin:0;color:rgba(250,243,229,.72)}
.sp-rights{margin:4px 0 0;max-width:78ch;color:rgba(250,243,229,.72)}
.sp-rights a{color:rgba(250,243,229,.72);text-decoration:underline}
.sp-rights a:hover{color:#fff}
.sp-foot-legal{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.sp-foot-legal a{color:rgba(250,243,229,.72);text-decoration:none;font-size:13px;
  line-height:1.6;display:inline-flex;align-items:center;min-height:24px}
.sp-foot-legal a:hover,.sp-foot-legal a:focus-visible{color:#fff;text-decoration:underline}
.sp-foot-legal a[aria-current="page"]{color:var(--gold-soft, var(--sp-gold-soft))}
/* .sp-tag REMOVED 2026-10-03 (v25 Gate 3b). It was the footer tagline, it
   had been dead markup for months — nothing in tools/apply_chrome.py writes
   the class — and v24-components.css defines .sp-tag as the system chip.
   This sheet loads LAST on all 219 routes, so the first page to use a chip
   rendered its badges in 62%-opacity cream on a cream ground. That is the
   same defect the v24 gate-2 review recorded; it came back with the tree.
   verify_component_governance.py rule 1 now covers this sheet. */  /* .45 measured 3.91:1 on the espresso ground -- below AA for small text */

/* ------------------------------------------------------------ responsive -- */
/* 1000px, not 900: between 901px and ~990px the full nav still fits by
   squeezing the brand, and 'Sri Kumar Gurukkal' was being truncated to
   'Sri Kum...'. Hand the nav to the menu button before that happens. */
@media(max-width:1060px){
  .sp-foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:640px){
  .sp-nav-in{padding-left:18px;padding-right:18px}
  .sp-foot-in{padding-left:18px;padding-right:18px}
  .sp-foot-grid{grid-template-columns:1fr;gap:28px}
  .sp-foot{padding:40px 0 28px}
  .sp-sub{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .sp-nav,.sp-foot-col a,.sp-drawer,.sp-scrim,.sp-caret,
  .sp-burger-i,.sp-burger-i::before,.sp-burger-i::after{transition:none}
}
@media(prefers-contrast:more){
  .sp-nav{background:var(--cream, var(--sp-ground))}
  .sp-foot-about,.sp-foot-bottom{color:rgba(250,243,229,.9)}
  .sp-foot-col a,.sp-foot-col h3,.sp-foot-legal a,.sp-rights a{color:#fff}
}
@media(forced-colors:active){
  .sp-mark,.sp-foot-mark{outline:1px solid CanvasText;outline-offset:-1px}
  .sp-nav-cta,.sp-panel,.sp-drawer{border:1px solid CanvasText}
}
@media print{
  .sp-nav,.sp-burger,.sp-foot-legal,.sp-scrim{display:none}
  .sp-foot{background:none;color:#000;padding:12px 0 0;border-top:1px solid #999}
  .sp-foot-grid{display:none}
  .sp-copy,.sp-rights{color:#000}
}

/* "In short" answer block — ceremony pages (2026-08-20).
   A family scanning a search result and an AI system quoting a source want the
   same five facts: what this is, who performs it, where, in what language, and
   how to ask. Kept high on the page and in plain markup so both can find it. */
.ans{border:1px solid var(--gold-soft, var(--sp-gold-soft));border-left:4px solid var(--saffron, var(--sp-accent));
  background:var(--cream, var(--sp-ground));padding:18px 20px;margin:22px 0}
.ans-k{font-family:'Marcellus SC',Georgia,serif;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--saffron-dark, var(--sp-accent));margin:0 0 8px}
.ans-what{margin:0 0 12px;font-size:1rem;line-height:1.65;color:var(--espresso, var(--sp-deep))}
.ans-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:.9rem}
.ans-dl dt{font-family:'Marcellus SC',Georgia,serif;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sp-ink-3);padding-top:3px;white-space:nowrap}
.ans-dl dd{margin:0;color:#4f443b;line-height:1.6}
.ans-dl a{color:var(--saffron-dark, var(--sp-accent))}
@media(max-width:640px){.ans-dl{grid-template-columns:1fr;gap:2px 0}
  .ans-dl dd{margin-bottom:9px}}


/* ==== v21-system tokens and shared components, appended 2026-09-08 ====
   Every page loads the chrome sheet, so the design system rides with it and
   no page can be left on a different visual language. ==== */
/* ============================================================================
   v21-system.css — the one design system.
   ----------------------------------------------------------------------------
   Authorised 2026-09-08 by the site owner, superseding the v18 constraint that
   the homepage <main> stay byte-identical to v16.

   WHY TOKENS AND NOT ANOTHER STYLESHEET
     The archive carries 37 stylesheets in 26 combinations, and the same button
     could be a pill on one page and a square on another depending on which
     historical bundle loaded. Tokens here are the single source; components
     below consume only tokens. Nothing in this file uses !important, and any
     future exception must carry a reason.

   COLOUR — contemporary sacred editorial, per the mandate §4.
     Warm ivory ground, deep warm charcoal text, temple maroon as the ONE
     action accent, aged bronze as a restrained support, saffron used sparingly.
     Semantic green/amber/red are reserved for labelled statuses and never
     carry meaning on their own.
   ============================================================================ */

/* The v21 token block used to be duplicated here. It now lives only in
   assets/css/v21-system.css, which apply_chrome.py loads on every page
   immediately before this sheet. See the note at the top of that script. */


/* --------------------------------------------------------------- primitives */
.v-wrap   { width: 100%; max-width: var(--v-wide);    margin-inline: auto; padding-inline: var(--v-gutter); }
.v-wrap-c { width: 100%; max-width: var(--v-content); margin-inline: auto; padding-inline: var(--v-gutter); }
.v-read   { max-width: 68ch; }

.v-sec       { padding-block: var(--v-sec); }
.v-sec-tight { padding-block: var(--v-sec-tight); }
.v-band      { background: var(--v-ivory-2); }

.v-eyebrow {
  font-family: var(--v-sc); font-size: var(--v-t-eyebrow); letter-spacing: .16em;
  text-transform: uppercase; color: var(--v-bronze); margin: 0 0 var(--v-3);
}
.v-h2 {
  font-family: var(--v-display); font-size: var(--v-t-h2); line-height: 1.16;
  color: var(--v-ink); margin: 0 0 var(--v-4); text-wrap: balance; font-weight: 400;
}
.v-h3 {
  font-family: var(--v-display); font-size: var(--v-t-h3); line-height: 1.28;
  color: var(--v-ink); margin: 0 0 var(--v-2); font-weight: 400;
}
.v-lede { font-size: var(--v-t-body); line-height: 1.72; color: var(--v-ink-2); margin: 0; }
.v-meta { font-size: var(--v-t-xs); color: var(--v-ink-3); }

/* ------------------------------------------------------------------ buttons */
/* One shape language: moderately rounded for actions. Pills are reserved for
   filters and statuses, so a pill never reads as a primary action. */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v-2);
  min-height: 46px; padding: 12px 22px; border-radius: var(--v-radius);
  font-family: var(--v-sc); font-size: .84rem; letter-spacing: .07em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.v-btn-primary   { background: var(--v-maroon); color: #fff; }
.v-btn-primary:hover  { background: var(--v-maroon-deep); }
.v-btn-secondary { border-color: var(--v-bronze); color: var(--v-maroon); background: transparent; }
.v-btn-secondary:hover { background: var(--v-ivory-2); }
.v-btn-quiet     { color: var(--v-ink-2); padding-inline: 4px; min-height: 44px; }
.v-btn-quiet:hover { color: var(--v-maroon); }

/* a text link that is a link, not a button — §18 keeps the two distinct */
.v-link { color: var(--v-maroon); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v-link:hover { text-decoration-thickness: 2px; }

/* focus is never animated: a ring that grows from zero is absent at the moment
   focus lands. That defect was found on this site in v18 and must not return. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--v-ring) solid var(--v-saffron); outline-offset: 2px;
  transition: none !important;   /* the one exception, and this is its reason */
  border-radius: var(--v-radius-s);
}

/* ------------------------------------------------------------------- chips  */
.v-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--v-ivory-3); background: var(--v-paper);
  font-family: var(--v-ui); font-size: var(--v-t-xs); color: var(--v-ink-2);
  text-decoration: none;
}
.v-chip:hover { border-color: var(--v-bronze-soft); color: var(--v-maroon); }

/* --------------------------------------------------------------- ornaments  */
.v-rule { display: flex; align-items: center; gap: var(--v-3); color: var(--v-bronze-soft); }
.v-rule::before, .v-rule::after { content: ""; height: 1px; background: currentColor; flex: 1 1 auto; }
.v-rule-l::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- search --- */
/* §6 puts Search in the header. It is a button that opens a dialog, not a
   decorative input: with JavaScript off the button is simply not shown, and
   every destination remains reachable through the header groups and the hubs. */
.sp-search{display:inline-flex;align-items:center;gap:7px;min-height:40px;
  padding:8px 14px;border:1px solid var(--v-ivory-3);border-radius:999px;
  background:transparent;color:var(--v-ink-2);cursor:pointer;font:inherit;
  font-family:var(--v-ui);font-size:.82rem}
.sp-search:hover{border-color:var(--v-bronze-soft);color:var(--v-maroon)}
html:not(.v-js) .sp-search{display:none}
/* The search control was added to a header row that was already full. Between
   1010px and 1100px the desktop nav is still shown and the extra 90-odd pixels
   pushed the brand into an ellipsis — 'Sri Kum...' — which no overflow check
   catches because nothing overflows. The LABEL goes first; the icon and its
   accessible name stay. Asserted by tools/verify_interactive.js at 16 widths. */
@media(max-width:1180px){.sp-search-l{display:none}.sp-search{padding:8px 11px}}
@media(max-width:520px){.sp-search{padding:8px 10px}}

.vs-panel{position:fixed;inset:0;z-index:9000;background:rgba(36,28,21,.42);
  padding:clamp(12px,6vh,80px) var(--v-gutter);overflow:auto}
.vs-panel[hidden]{display:none}
.vs-inner{max-width:640px;margin:0 auto;background:var(--v-ivory);
  border-radius:var(--v-radius);box-shadow:0 24px 60px -20px rgba(36,28,21,.5);
  padding:clamp(18px,2.4vw,26px)}
.vs-form{display:flex;flex-wrap:wrap;gap:var(--v-2);align-items:center}
.vs-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vs-input{flex:1 1 240px;font:inherit;font-size:1.05rem;padding:12px 14px;min-height:48px;
  border:1px solid var(--v-bronze-soft);border-radius:var(--v-radius);
  background:var(--v-paper);color:var(--v-ink)}
.vs-close{font:inherit;font-family:var(--v-sc);font-size:.8rem;letter-spacing:.07em;
  min-height:48px;padding:12px 18px;border:1px solid var(--v-ivory-3);
  border-radius:var(--v-radius);background:transparent;color:var(--v-ink-2);cursor:pointer}
.vs-close:hover{background:var(--v-ivory-2)}
.vs-out{margin-top:var(--v-4);max-height:56vh;overflow:auto}
.vs-count,.vs-msg{font-family:var(--v-ui);font-size:var(--v-t-xs);color:var(--v-ink-3);
  margin:var(--v-2) 0 var(--v-3)}
.vs-msg{font-size:var(--v-t-sm);line-height:1.65}
.vs-hit{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:2px var(--v-3);
  padding:11px 0;border-top:1px solid var(--v-ivory-3);text-decoration:none;align-items:baseline}
.vs-hit:hover .vs-t{color:var(--v-maroon)}
.vs-k{font-family:var(--v-sc);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-bronze)}
.vs-t{font-size:1rem;color:var(--v-ink);line-height:1.35}
.vs-d{grid-column:2;font-family:var(--v-ui);font-size:var(--v-t-xs);color:var(--v-ink-3);
  line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vs-foot{margin:var(--v-5) 0 0;padding-top:var(--v-4);border-top:1px solid var(--v-ivory-3);
  font-family:var(--v-ui);font-size:var(--v-t-xs);color:var(--v-ink-3)}
.vs-foot a{color:var(--v-maroon)}
html.vs-open{overflow:hidden}
@media(max-width:520px){.vs-hit{grid-template-columns:1fr}.vs-d{grid-column:1}}

/* ============================================================================
   v25 Gate 3e — THE HEADER CALL TO ACTION, RESTATED SO IT WINS.

   `.sp-nav-cta { color: #fff }` is specificity (0,1,0). Page sheets carry
   `a[class] { color: inherit }` at (0,1,1), so the header's "Request a Pooja"
   rendered BODY INK on the saffron fill: 2.70 : 1, measured at 1440px and
   390px. It is the same shape of defect as the homepage's own primary button,
   and it is the third time a link-colour override has quietly beaten a
   button's own colour on this site.

   The ring was worse. `outline: 2px solid var(--saffron)` put the accent
   colour on top of a button filled with the accent colour — 1.00 : 1, which
   is to say the keyboard focus indicator on the site's main call to action
   was invisible. SC 1.4.11 asks for 3:1 against what is adjacent, and
   "adjacent" here is the button, not the header.

   Measured after the fix:
     ground on accent      5.27 : 1   the button's text
     deep on ground       13.55 : 1   the ring against what is actually
                                      adjacent to it

   The second number is the one to read carefully. `outline-offset: 2px` puts
   a two-pixel gap between the button and the ring, and that gap shows the
   HEADER's ground, not the button's fill. So the ring has cream on both
   sides — 13.55 : 1 — and SC 1.4.11's "adjacent colours" are satisfied by a
   wide margin. Against the accent fill itself the ring measures only 2.57 : 1,
   which is why the offset is load-bearing and not decoration: remove it and
   this indicator fails.
   ============================================================================ */
a.sp-nav-cta { color: var(--sp-ground); }
a.sp-nav-cta:hover { color: var(--sp-ground); }
a.sp-nav-cta:focus-visible {
  outline: 3px solid var(--sp-deep);
  outline-offset: 2px;
}