/* 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,#38220f);
  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,#e6d9bd);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,#faf3e5)}
.sp-nav-in{max-width:1180px;margin:0 auto;padding:14px 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,#38220f);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,#aa4c1d);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,#38220f);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-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,#aa4c1d);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,#aa4c1d)}
.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,#38220f);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,#a8481a);
  box-shadow:inset 2px 0 0 var(--saffron,#aa4c1d)}
.sp-panel-k{margin:10px 12px 4px;font-family:'Marcellus SC',Georgia,serif;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#7a6448}

.sp-cta{background:var(--saffron,#aa4c1d);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-cta:hover{background:#8f3c15;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,#38220f);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:1001px){
  .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,#faf3e5);border:1px solid var(--line,#e6d9bd);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:1000px){
  /* 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,#faf3e5);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,#aa4c1d)}
  .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-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:#7a6448}
  .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,#e6d9bd);border-radius:6px;text-decoration:none;font-size:14.5px;
    line-height:1.35;color:var(--espresso,#38220f);background:#fff}
  .sp-call a:hover{border-color:var(--saffron,#aa4c1d)}
}

/* -------------------------------------------------------------- footer -- */
.sp-foot{background:var(--espresso,#38220f);color:rgba(250,243,229,.78);padding:58px 0 32px;
  margin-top:0}
.sp-foot-in{max-width:1180px;margin:0 auto;padding:0 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,#faf3e5);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,#e7cf9c);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,#e7cf9c);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,#e7cf9c);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,#e7cf9c)}

.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}
.sp-copy{margin:0;color:rgba(250,243,229,.72)}
.sp-rights{margin:4px 0 0;max-width:78ch}
.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,#e7cf9c)}
.sp-tag{margin:14px 0 0;color:rgba(250,243,229,.62);font-size:12.5px;line-height:1.6}  /* .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:1000px){
  .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,#faf3e5)}
  .sp-foot-about,.sp-foot-bottom,.sp-tag{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-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,#e7cf9c);border-left:4px solid var(--saffron,#aa4c1d);
  background:var(--cream,#faf3e5);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,#a8481a);margin:0 0 8px}
.ans-what{margin:0 0 12px;font-size:1rem;line-height:1.65;color:var(--espresso,#38220f)}
.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:#6f5a41;padding-top:3px;white-space:nowrap}
.ans-dl dd{margin:0;color:#4f443b;line-height:1.6}
.ans-dl a{color:var(--saffron-dark,#a8481a)}
@media(max-width:640px){.ans-dl{grid-template-columns:1fr;gap:2px 0}
  .ans-dl dd{margin-bottom:9px}}