:root {
            --saffron: #a93b1c;
            --gold: #d4a64a;
            --deep-blue: #2b4a7a;
            --black: #1f1a14;
            --warm-bg: #fdfcf6;
            --meta: #5a5147;          /* darkened from #6b6457 → 7.0:1 contrast on warm-bg */
            --serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
            --devanagari: 'Noto Serif Devanagari', 'Sanskrit Text', 'Mangal', serif;
            --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
            /* Reader scale is persisted by the floating controls. */
            --reader-scale: 1;
          }
          * { box-sizing: border-box; margin: 0; padding: 0; }
          html {
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            /* 16px base × the reader's saved scale. */
            font-size: calc(16px * var(--reader-scale));
            /* outer page background — beyond the 960px reading column */
            background: #f5efde;
            overflow-x: clip;
          }
          body {
            font-family: var(--serif);
            line-height: 1.65;
            color: var(--black);
            background: var(--warm-bg);
            max-width: 960px;
            margin: 0 auto;
            /* NO padding — header/main/footer each own their padding · prevents
               negative-margin overlap that previously happened on mobile widths. */
            padding: 0;
            box-shadow: 0 0 24px rgba(180, 100, 40, 0.06);
            overflow-x: clip;
          }
          /* Skip-to-main link · WCAG 2.4.1 bypass-block · invisible until focused */
          .skip-link {
            position: absolute; left: -9999px; top: 1rem;
            background: var(--saffron); color: var(--warm-bg);
            padding: 0.5rem 1rem; text-decoration: none;
            border-radius: 4px; font-weight: 600;
          }
          .skip-link:focus { left: 1rem; z-index: 100; outline: 3px solid var(--gold); outline-offset: 2px; }

          /* Visible focus indicator on ALL interactive elements (WCAG 2.4.7) */
          a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
            outline: 3px solid var(--saffron);
            outline-offset: 2px;
            border-radius: 2px;
          }

          .invocation {
            text-align: center;
            font-size: 1.4rem;
            font-family: var(--devanagari), var(--serif);
            color: var(--saffron);
            margin-bottom: 1.5rem;
            font-weight: 500;
          }
          .breadcrumbs {
            font-size: 0.85rem; color: var(--meta);
            padding: 0.75rem 1rem 0;
            margin-bottom: 0;
          }
          .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: 680px; margin: 0 auto; padding: 0; }
          .breadcrumbs li::after { content: '›'; margin-left: 0.4rem; color: var(--meta); }
          .breadcrumbs li:last-child::after { content: ''; }
          .breadcrumbs a { color: var(--deep-blue); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; }
          .breadcrumbs a:hover { text-decoration: underline; }
          .breadcrumbs li[aria-current=page] { color: var(--meta); font-weight: 600; }
          .breadcrumb-current { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.35rem; border: 1px solid rgba(212,166,74,.28); border-radius: 4px; background: rgba(212,166,74,.1); }

          main {
            padding: 1.5rem 1rem 1rem;
            overflow-wrap: break-word;
            min-width: 0;
            max-width: 100%;
          }
          main article { min-width: 0; max-width: 100%; }

          h1 { font-size: 2rem; color: var(--deep-blue); margin-bottom: 0.5rem; line-height: 1.2; }
          h2 {
            font-size: 1.4rem; color: var(--saffron);
            margin: 2.5rem 0 0.75rem;
            padding: 1rem 0 0.3rem;
            border-top: 1px solid rgba(212, 166, 74, 0.25);   /* C3 · subtle chapter-break */
            border-bottom: 2px solid var(--gold);
          }
          /* C3 · spare the first h2 on the page from the top-divider */
          main h2:first-of-type,
          main article h2:first-of-type {
            border-top: none; padding-top: 0; margin-top: 1.5rem;
          }
          h3 { font-size: 1.15rem; color: var(--deep-blue); margin: 1.25rem 0 0.4rem; }

          /* A3 · body-content link affordance — gold-tinted underline on
             prose links so mobile readers immediately see they're links.
             :not([class]) skips chrome links (nav · footer · breadcrumb)
             which already have their own design treatment. */
          main a:not([class]) {
            border-bottom: 1px solid rgba(212, 166, 74, 0.45);
            transition: border-color 0.15s ease, color 0.15s ease;
            overflow-wrap: anywhere;
          }
          main a:not([class]):hover {
            border-bottom-color: var(--saffron);
            color: var(--saffron);
          }

          /* B6 · inline <code> styling — currently blank, blends into prose.
             Subtle gold background + monospace, clearly distinguished. */
          code {
            background: rgba(212, 166, 74, 0.10);
            padding: 0.15rem 0.4rem;
            border-radius: 3px;
            font-family: var(--mono);
            font-size: 0.92em;
            color: var(--meta);
            overflow-wrap: anywhere;
          }
          /* But don't double-style <code> inside <pre> blocks (if any) */
          pre code { background: transparent; padding: 0; }

          /* B4 · long-form prose readability — narrow container for
             reading-flow on per-Upaniṣad / per-saṁskāra / per-vibhūti
             / /lineage. ~680px = optimal 60-75 chars/line.
             At <720px the natural mobile padding takes over. */
          @media (min-width: 720px) {
            article.prose-narrow {
              max-width: 680px;
              margin-inline: auto;
            }
          }

          /* content-visibility: auto · defer off-screen rendering */
          .cv-auto, .verse-list, .chapter-list, .sarga-list, .entry-list { content-visibility: auto; contain-intrinsic-size: auto 500px; }

          /* BG-layer card focus anchor (?focus=slug highlight on /vishwaroopa-darshana).
             Uses CSS outline instead of box-shadow so the highlight survives the
             inline box-shadow on the BG-2 (sankhya-yoga) and BG-12 (bhakti-yoga)
             special cream-gradient cards. Inline styles win specificity over class
             rules; outline is a separate property and avoids the conflict. */
          .bg-card { transition: outline 0.4s ease, transform 0.4s ease, background-color 0.4s ease; scroll-margin-top: 5rem; }
          .bg-card.focus-target {
            outline: 3px solid var(--gold);
            outline-offset: 3px;
            transform: translateY(-2px);
          }
          .bg-card.focus-target::before {
            content: '🪷 your focus';
            position: absolute;
            top: -0.85rem;
            left: 1rem;
            background: var(--gold);
            color: var(--deep-blue);
            font-size: 0.72rem;
            font-weight: 600;
            padding: 0.18rem 0.55rem;
            border-radius: 3px;
            letter-spacing: 0.04em;
          }
          .bg-card.focus-target { position: relative; }
          .focus-banner {
            margin: 1rem 0; padding: 0.75rem 1rem;
            background: #fdf3e2; border-left: 4px solid var(--saffron);
            border-radius: 4px; font-size: 0.95rem;
          }
          .focus-banner a { color: var(--saffron); text-decoration: none; font-weight: 600; }
          .focus-banner a:hover { text-decoration: underline; }

          /* Auto-linked Bhagavad-Gītā citations. */
          .bg-citation {
            color: var(--saffron);
            text-decoration: none;
            border-bottom: 1px dotted var(--saffron);
            padding: 0 0.1em;
            display: inline-flex;
            align-items: center;
            min-height: 32px;
            vertical-align: middle;
            transition: background 0.15s ease, border-bottom-style 0.15s ease;
          }
          .bg-citation:hover {
            background: rgba(220, 130, 50, 0.08);
            border-bottom-style: solid;
            text-decoration: none;
          }
          .bg-citation:focus-visible {
            outline: 2px solid var(--saffron);
            outline-offset: 2px;
            border-radius: 2px;
          }

          .festival-banner {
            margin: 1rem 0;
            padding: 1.25rem;
            background: linear-gradient(135deg, #fdf3e2 0%, #fff8eb 100%);
            border-left: 4px solid var(--saffron);
            border-radius: 4px;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
          }
          .festival-banner:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(169, 59, 28, 0.08);
          }
          /* A2 · WCAG contrast — saffron-on-warm-gradient is 4.2:1 (fails AA).
             Use deep-blue for headings inside the cream-banner (8.5:1 contrast). */
          .festival-banner h2, .festival-banner h3 { color: var(--deep-blue); }
          .festival-banner .primary { font-size: 1.3rem; color: var(--saffron); font-weight: 600; }
          .festival-banner .significance { color: var(--meta); margin-top: 0.5rem; font-size: 0.95rem; }
          .festival-list { list-style: none; padding: 0; margin: 0.5rem 0; }
          .festival-list li {
            padding: 0.4rem 0; border-bottom: 1px dashed #e6dcc4; font-size: 0.92rem;
          }
          .festival-list li:last-child { border-bottom: none; }
          .festival-tradition {
            display: inline-block; padding: 0.1rem 0.5rem; margin-left: 0.5rem;
            background: var(--gold); color: var(--deep-blue);
            font-size: 0.75rem; border-radius: 2px;
          }

          .calendar-conversions {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 0.5rem 1rem; margin: 0.75rem 0;
            font-size: 0.92rem;
          }
          .calendar-conversions div { padding: 0.3rem 0; border-bottom: 1px solid #f0eadb; }
          .calendar-conversions strong { color: var(--meta); font-weight: 500; margin-right: 0.5rem; }

          .panchang-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
          .panchang-table th, .panchang-table td {
            padding: 0.6rem 0.5rem; text-align: left;
            border-bottom: 1px solid #e6dcc4;
          }
          .panchang-table th { background: #fdf3e2; color: var(--deep-blue); font-weight: 600; }

          .devanagari { font-family: var(--devanagari); overflow-wrap: break-word; }

          .cosmic-resonance {
            margin: 1rem 0; padding: 1rem;
            background: #f5f3eb; border-radius: 4px;
            font-size: 0.95rem;
          }
          .cosmic-resonance .resonance-item { padding: 0.4rem 0; border-bottom: 1px dashed #d8d2c0; }
          .cosmic-resonance .resonance-item:last-child { border-bottom: none; }
          .cosmic-resonance a { color: var(--saffron); text-decoration: none; font-weight: 500; }

          .walk-recommendation {
            margin: 1rem 0; padding: 1.25rem;
            background: #f0ebde; border-radius: 4px;
            border-left: 4px solid var(--gold);
          }
          .walk-recommendation .walk-name { font-size: 1.1rem; color: var(--deep-blue); font-weight: 600; }
          .walk-recommendation .walk-meta { color: var(--meta); font-size: 0.88rem; margin-top: 0.3rem; }

          .provenance {
            margin-top: 2.5rem; padding: 1rem;
            background: #f5f3eb; border-left: 4px solid var(--saffron);
            font-size: 0.85rem; color: var(--meta);
          }
          .provenance strong { color: var(--deep-blue); }

          .nav-links { margin: 1rem 0; }
          .nav-links a {
            margin-right: 1rem; color: var(--deep-blue);
            text-decoration: none; padding: 0.3rem 0.6rem;
            background: #f5f3eb; border-radius: 3px; font-size: 0.92rem;
          }
          .nav-links a:hover { background: var(--gold); color: var(--deep-blue); }

          .json-link {
            display: inline-block; margin: 0.5rem 0;
            font-family: var(--mono); font-size: 0.85rem;
            color: var(--meta); text-decoration: none;
          }
          .json-link:hover { color: var(--saffron); }

          /* ───────────────────────────────────────────────────────────────
             SITE HEADER — per docs/PAGE-ANATOMY-TEMPLATES.md §2
             Brand left · Primary Nav right · gold accent rule beneath
             Krishna-consciousness design: radial sun-mandala backdrop at
             top-center · subtle ornamental flourish · reverent typography.
             Mobile: stack vertically · ≥44px tap targets (WCAG AA)
             ─────────────────────────────────────────────────────────────── */
          .site-header {
            /* NO negative margin — own its padding entirely (fixes mobile overlap) */
            padding: 1rem 1rem 0;
            border-bottom: 2px solid var(--gold);
            background:
              radial-gradient(circle at 50% -10%, rgba(212, 166, 74, 0.20) 0%, transparent 55%),
              linear-gradient(180deg, #fdf3e2 0%, var(--warm-bg) 100%);
            position: relative;
            overflow: hidden;
          }
          /* Subtle mandala-petal motif at top corners (very low opacity) */
          .site-header::before,
          .site-header::after {
            content: '';
            position: absolute; top: -12px; width: 80px; height: 80px;
            background-image: radial-gradient(circle, rgba(169, 59, 28, 0.12) 0%, transparent 50%);
            pointer-events: none;
          }
          .site-header::before { left: -20px; }
          .site-header::after  { right: -20px; }

          .site-header-row {
            display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
            gap: 0.75rem 1rem;
            position: relative; z-index: 1;
          }
          .brand {
            display: inline-flex; align-items: center; gap: 0.55rem;
            text-decoration: none; color: var(--saffron);
            font-family: var(--serif); font-weight: 700;
            font-size: 1.35rem; letter-spacing: 0.02em;
          }
          .brand-lotus {
            font-size: 1.5rem; line-height: 1;
            display: inline-block;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 1px 2px rgba(169, 59, 28, 0.25));
          }
          .brand:hover .brand-lotus { transform: rotate(20deg) scale(1.1); }
          .brand-tagline {
            display: block; font-size: 0.72rem; font-weight: 400;
            color: var(--meta); letter-spacing: 0.05em; line-height: 1.2;
            margin-top: 0.1rem;
          }
          .site-nav { display: flex; position: relative; z-index: 1; }
          .site-nav ul {
            display: flex; flex-wrap: wrap; gap: 0.25rem 0.3rem;
            list-style: none; padding: 0; margin: 0;
            font-size: 0.95rem;
          }
          .site-nav a {
            display: inline-flex; align-items: center;
            min-height: 44px;       /* WCAG AA tap target */
            padding: 0.55rem 0.85rem;
            color: var(--deep-blue); text-decoration: none;
            border-radius: 3px;
            position: relative;
            transition: color 0.2s ease;
          }
          /* Animated gold underline on hover/focus (Krishna-consciousness touch) */
          .site-nav a::after {
            content: '';
            position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.4rem;
            height: 2px; background: var(--gold);
            transform: scaleX(0); transform-origin: center;
            transition: transform 0.25s ease;
          }
          .site-nav a:hover { color: var(--saffron); }
          .site-nav a:hover::after,
          .site-nav a:focus-visible::after { transform: scaleX(1); }
          /* B7 · current-page nav state · bottom-border accent
             (refined from full-saffron-fill · less visually heavy on a 6-item nav) */
          .site-nav a[aria-current=page] {
            background: transparent;
            color: var(--saffron);
            font-weight: 600;
            box-shadow: inset 0 -3px 0 var(--gold);
          }
          .site-nav a[aria-current=page]::after { display: none; }

          .invocation-strip {
            text-align: center;
            font-family: var(--devanagari), var(--serif);
            color: var(--saffron);
            font-size: 1.15rem;
            padding: 0.6rem 1rem 0.55rem;
            margin: 0.65rem -1rem 0;       /* extend to header padding edges */
            border-top: 1px dashed #e6dcc4;
            position: relative; z-index: 1;
            letter-spacing: 0.04em;
          }

          /* Today's dharmic-window ribbon · pañchāṅga + BG verse
             Subtle 1-line strip immediately below the invocation. Each half is
             a clickable anchor (no underline by default · saffron on hover). */
          .today-ribbon {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 0.35rem 0.75rem;
            padding: 0.4rem 1rem 0.5rem;
            margin: 0 -1rem;
            font-size: 0.84rem;
            color: var(--deep-blue);
            background: linear-gradient(90deg, transparent 0%, rgba(212, 166, 74, 0.10) 50%, transparent 100%);
            border-top: 1px dotted #e6dcc4;
            line-height: 1.5;
          }
          .today-ribbon a {
            display: inline-flex; align-items: center; min-height: 32px;
            color: var(--deep-blue);
            text-decoration: none;
            border-bottom: 1px dotted transparent;
            transition: color 0.15s ease, border-bottom-color 0.15s ease;
          }
          .today-ribbon a:hover {
            color: var(--saffron);
            border-bottom-color: var(--saffron);
          }
          .today-ribbon strong { color: var(--saffron); font-weight: 600; }
          .today-ribbon-icon { margin-right: 0.2rem; }
          .today-ribbon-sep { color: var(--meta); }
          .today-ribbon-bg-title { color: var(--meta); font-style: italic; }
          @media (max-width: 600px) {
            .today-ribbon { font-size: 0.78rem; padding: 0.35rem 0.85rem 0.45rem; margin: 0 -0.85rem; }
            .today-ribbon a { width: 100%; justify-content: center; min-height: 36px; text-align: center; flex-wrap: wrap; overflow-wrap: anywhere; }
            .today-ribbon-sep { display: none; }
            .today-ribbon-bg-title { display: none; }   /* hide on small screens for compactness */
          }

          /* ───────────────────────────────────────────────────────────────
             SITE FOOTER — per docs/PAGE-ANATOMY-TEMPLATES.md §2
             LiturgicalClose · ProvenanceBlock · NavSecondary · Copyright
             Krishna-consciousness: warm reverse-gradient · mandala accent ·
             Multi-column on desktop · single-column on mobile
             ─────────────────────────────────────────────────────────────── */
          footer.site-footer {
            /* NO negative margin — own its padding */
            margin: 3rem 0 0;
            padding: 2rem 1rem 1.5rem;
            border-top: 3px solid var(--gold);
            background:
              radial-gradient(circle at 50% 100%, rgba(212, 166, 74, 0.18) 0%, transparent 50%),
              linear-gradient(180deg, var(--warm-bg) 0%, #fdf3e2 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
          }
          .footer-closing {
            color: var(--saffron);
            font-family: var(--devanagari), var(--serif);
            font-size: 1.3rem; margin-bottom: 0.4rem;
          }
          .footer-tagline {
            font-size: 1rem; color: var(--deep-blue); margin-bottom: 0.35rem;
            font-weight: 600;
          }
          .footer-lineage {
            max-width: 760px; margin: 0 auto 1.25rem;
            font-size: 0.8rem; color: #6b6457; line-height: 1.65;
          }
          .footer-nav-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.5rem;
            max-width: 920px;
            margin: 0 auto 1.5rem;
            text-align: left;
            font-size: 0.88rem;
          }
          /* C4 · explicit columns by viewport · 4-col at desktop fits the
             expanded footer (Pañchāṅga · Krishna-Gītā · Reference-Hubs ·
             Substrate-Access) without cramping */
          @media (min-width: 700px) {
            .footer-nav-grid { grid-template-columns: repeat(2, 1fr); }
          }
          @media (min-width: 1000px) {
            .footer-nav-grid { grid-template-columns: repeat(4, 1fr); }
          }
          /* BG 9.17 4-fold · Devanāgarī role over IAST gloss */
          .footer-nav-grid .col-role-sa { display: block; font-family: var(--devanagari), var(--serif); color: var(--saffron); font-size: 1.15rem; line-height: 1.1; margin-bottom: 0.15rem; }
          .footer-nav-grid h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--deep-blue); margin: 0 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid #e6dcc4; }
          .footer-nav-grid .col-role-en { display: block; font-size: 0.66rem; font-style: italic; color: #6b6457; margin-top: 0.15rem; letter-spacing: 0; text-transform: none; }
          .footer-nav-grid ul { list-style: none; padding: 0; margin: 0; }
          .footer-nav-grid li { padding: 0.25rem 0; }
          .footer-nav-grid a { color: var(--deep-blue); text-decoration: none; display: inline-block; min-height: 32px; line-height: 1.7; overflow-wrap: anywhere; }
          .footer-nav-grid a:hover { color: var(--saffron); text-decoration: underline; }
          .footer-bg917-anchor { max-width: 720px; margin: 0 auto 0.75rem; padding: 0.65rem 1rem; font-size: 0.82rem; color: var(--deep-blue); background: rgba(212, 166, 74, 0.06); border-top: 1px solid #e6dcc4; border-bottom: 1px solid #e6dcc4; text-align: center; }
          .footer-bg917-anchor .sa { display: block; font-family: var(--devanagari), var(--serif); color: var(--saffron); font-size: 1rem; margin-bottom: 0.2rem; }
          /* BG 18.66 Carama-Śloka surrender-anchor · the dharmic resolution of BG 9.17 multiplicity */
          .footer-bg1866-anchor { max-width: 720px; margin: 1.25rem auto 0.5rem; padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--deep-blue); background: linear-gradient(135deg, rgba(212, 166, 74, 0.10), rgba(217, 88, 17, 0.06)); border: 1px solid var(--gold); border-radius: 4px; text-align: center; }
          .footer-bg1866-anchor .sa { display: block; font-family: var(--devanagari), var(--serif); color: var(--saffron); font-size: 1.05rem; margin-bottom: 0.25rem; font-weight: 600; }
          .footer-bg1866-anchor a { color: var(--saffron); }
          .footer-util-bar { max-width: 920px; margin: 1rem auto 0.5rem; padding-top: 0.75rem; border-top: 1px dashed #e6dcc4; font-size: 0.74rem; color: var(--meta); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; line-height: 1.6; }
          .footer-util-bar a { color: var(--meta); text-decoration: none; padding: 0.2rem 0; display: inline-flex; align-items: center; min-height: 32px; overflow-wrap: anywhere; }
          .footer-util-bar a:hover { color: var(--saffron); text-decoration: underline; }
          .footer-util-bar .sep { color: var(--meta); }

          /* BG 9.17 doorways · पिता-माता-धाता-पितामहः */
          .home-bg917-doorways { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin: 0.5rem 0 2rem; }
          @media (min-width: 560px) { .home-bg917-doorways { grid-template-columns: repeat(2, 1fr); } }
          @media (min-width: 900px) { .home-bg917-doorways { grid-template-columns: repeat(4, 1fr); } }
          .bg917-card { display: block; padding: 0.85rem 1rem; background: linear-gradient(135deg, #fdf3e2, #fff8eb); border: 2px solid var(--saffron); border-radius: 6px; text-decoration: none; color: inherit; }
          .bg917-card[data-role=mata], .bg917-card[data-role=pitamaha] { border-color: var(--gold); }
          .bg917-role { display: flex; align-items: baseline; gap: 0.4rem; padding-bottom: 0.35rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(212,166,74,0.4); }
          .bg917-role-sa { color: var(--saffron); font-size: 1.05rem; line-height: 1; font-weight: 600; }
          .bg917-role-en { color: var(--deep-blue); font-size: 0.72rem; font-style: italic; }
          .bg917-card-eyebrow { font-size: 0.72rem; color: var(--meta); text-transform: uppercase; letter-spacing: 0.06em; }
          .bg917-card-title { margin-top: 0.25rem; font-size: 1rem; color: var(--saffron); font-weight: 700; line-height: 1.35; }
          .bg917-card-sub { margin-top: 0.3rem; color: var(--meta); font-size: 0.78rem; line-height: 1.5; }

          .home-first-realms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;margin:.7rem 0 1.05rem}.home-first-realms a{display:block;min-height:58px;padding:.55rem .6rem;border:1px solid rgba(212,166,74,.58);border-radius:8px;background:#fff8eb;color:var(--deep-blue);text-align:center;text-decoration:none;border-bottom:1px solid rgba(212,166,74,.58)!important}.home-first-realms a:hover{border-color:var(--saffron);background:#fdf3e2;color:var(--deep-blue)}.home-first-realms .realm-title{display:block;color:var(--saffron);font-weight:700;font-size:.88rem;line-height:1.25}.home-first-realms .realm-sub{display:block;color:var(--meta);font-size:.72rem;line-height:1.25}@media(max-width:860px){.home-first-realms{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:520px){.home-first-realms{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.home-first-realms a{min-height:54px;padding:.45rem .3rem}.home-first-realms .realm-title{font-size:.78rem}.home-first-realms .realm-sub{font-size:.68rem}}@media(max-width:360px){.site-nav{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.site-nav ul{flex-wrap:nowrap}.site-nav a{white-space:nowrap}}
          .footer-provenance {
            font-size: 0.78rem; color: var(--meta);
            margin: 0 auto 0.75rem; max-width: 720px;
            padding: 0.75rem 1rem;
            background: rgba(212, 166, 74, 0.08);
            border-left: 3px solid var(--gold);
            text-align: left;
            overflow-wrap: anywhere;
          }
          .footer-provenance strong { color: var(--deep-blue); }
          .footer-copyright {
            font-size: 0.75rem; color: #6b6457;
            padding-top: 0.75rem; margin-top: 0.5rem;
            border-top: 1px dashed #e6dcc4;
          }
          .footer-copyright a { color: var(--meta); text-decoration: none; }
          .footer-copyright a:hover { color: var(--saffron); }
          .footer-final-mantra {
            font-family: var(--devanagari), var(--serif);
            color: var(--saffron); margin-top: 0.65rem;
            font-size: 1rem;
          }

          /* ─── Responsive breakpoints — clean, no negative margins ───
             375-599: mobile · 600-999: tablet · 1000+: desktop
             All horizontal padding scales from 1rem → 2rem at >=700px. */
          @media (min-width: 700px) {
            .site-header     { padding-left: 2rem; padding-right: 2rem; }
            .invocation-strip { margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
            .today-ribbon    { margin-left: -2rem; margin-right: -2rem; padding-left: 2rem; padding-right: 2rem; }
            .site-header::before { left: -10px; }
            .site-header::after  { right: -10px; }
            .breadcrumbs     { padding-left: 2rem; padding-right: 2rem; }
            main             { padding: 2rem; }
            footer.site-footer { padding-left: 2rem; padding-right: 2rem; }
          }
          @media (min-width: 1100px) {
            html { padding: 0 1rem; }    /* let the 960px container breathe on wide screens */
          }

          /* Reduce-motion support · WCAG 2.3.3 */
          @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
          }
          /* Print styles · clean PDF/print rendering */
          @media print {
            body { max-width: none; padding: 1rem; color: #000; background: #fff; }
            .skip-link, .nav-links, .breadcrumbs { display: none; }
            a { color: #000; text-decoration: underline; }
          }
          @media (max-width: 600px) {
            /* body padding now lives on main/header/footer · just tweak content scale */
            main { padding: 1rem 0.85rem; }
            .site-header { padding: 0.85rem 0.85rem 0; }
            .site-footer { padding: 1.5rem 0.85rem 1.25rem; }
            .breadcrumbs { padding: 0.6rem 0.85rem 0; }
            h1 { font-size: 1.55rem; }
            h2 { font-size: 1.2rem; }
            .calendar-conversions { grid-template-columns: 1fr; }
            .brand { font-size: 1.2rem; }
            .brand-lotus { font-size: 1.35rem; }
            .site-nav ul { gap: 0.15rem 0.25rem; }
            .site-nav a { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
            .footer-nav-grid a { min-height: 36px; }
            .footer-util-bar a { min-height: 36px; padding: 0.25rem 0.35rem; }
            .footer-util-bar .sep { display: none; }
            .invocation-strip { font-size: 1rem; margin-left: -0.85rem; margin-right: -0.85rem; padding-left: 0.85rem; padding-right: 0.85rem; }
            .festival-banner { padding: 1rem; min-width: 0; overflow: hidden; }
            .festival-banner .primary { font-size: 1.15rem !important; line-height: 1.75 !important; overflow-wrap: anywhere; word-break: break-word; }
            /* Forms: stack 2-col grids on phones · keep 1-col for finger-friendliness */
            form div[style*=grid-template-columns] { display: block !important; }
            form div[style*=grid-template-columns] div { margin-bottom: 1rem; }
            /* Wider tap target on submit buttons */
            form button[type=submit] { width: 100%; padding: 1rem 1.25rem !important; font-size: 1.05rem !important; }
            /* Panchang tables — allow horizontal scroll instead of cramping */
            .panchang-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
          }

          /* mobile breadcrumb tighten · single-line horizontal-scroll · trim last item (repeats H1) */
          @media (max-width: 500px) {
            .breadcrumbs { padding: 0.4rem 0.85rem 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
            .breadcrumbs::-webkit-scrollbar { display: none; }
            .breadcrumbs ol { flex-direction: row !important; flex-wrap: nowrap !important; gap: 0.25rem !important; align-items: center !important; white-space: nowrap; font-size: 0.78rem; opacity: 0.78; }
            .breadcrumbs li:last-child { display: none; }
            .breadcrumbs li:nth-last-child(2)::after { content: ''; }
            .panchang-table th, .panchang-table td { font-size: 0.85rem; padding: 0.4rem 0.3rem; word-break: break-word; }
          }
          /* H1 mobile prominence */
          @media (max-width: 600px) {
            main h1 { font-size: 1.75rem !important; line-height: 1.25; margin: 1rem 0 0.85rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold); color: var(--saffron); }
          }
          /* Sapta-Mokṣa-Puri chips */
          .puri-chip { display: inline-flex; align-items: center; padding: 0.32rem 0.7rem; font-size: 0.84rem; background: #fff8eb; color: var(--deep-blue); border: 1px solid var(--gold); border-radius: 999px; text-decoration: none; line-height: 1.3; transition: background 0.15s, color 0.15s; }
          .puri-chip:hover { background: var(--gold); color: var(--deep-blue); }
          .puri-chip.current { background: var(--saffron); color: var(--warm-bg); border-color: var(--saffron); font-weight: 600; cursor: default; }
          .puri-chip.muted { background: transparent; color: var(--meta); border-style: dashed; font-size: 0.78rem; }
          @media (max-width: 600px) {
            .puri-chip { font-size: 0.78rem; padding: 0.32rem 0.6rem; }
            .puri-chip.muted { font-size: 0.74rem; }
            .sapta-puri-chips { gap: 0.3rem !important; }
          }

          /* UX-Perfection · Mobile-first polish */
          .day-temporal-nav {
            background: linear-gradient(90deg, transparent, rgba(212, 166, 74, 0.06), transparent);
            border-top: 1px dotted #e6dcc4; border-bottom: 1px dotted #e6dcc4;
            padding-left: 0.5rem !important; padding-right: 0.5rem !important;
          }
          .day-temporal-nav a { display: inline-flex; align-items: center; min-height: 36px; }
          .provenance { line-height: 1.7; }
          .provenance br + strong { display: inline-block; margin-top: 0.25rem; }
          main h2 { position: relative; padding-left: 0.85rem; margin-top: 2rem; margin-bottom: 0.85rem; }
          main h2::before { content: ''; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 3px; background: var(--gold); border-radius: 1px; }
          @media (max-width: 600px) {
            .day-temporal-nav { flex-wrap: wrap; justify-content: center !important; gap: 0.4rem 0.6rem !important; font-size: 0.85rem !important; padding: 0.5rem 0.4rem !important; }
            .day-temporal-nav a, .day-temporal-nav span { flex-shrink: 0; }
            .day-temporal-nav span[style*=--meta] { order: -1; width: 100%; text-align: center; padding: 0.15rem 0; font-size: 0.78rem !important; border-bottom: 1px dotted #e6dcc4; margin-bottom: 0.2rem; }
            .provenance { padding: 0.85rem 1rem !important; font-size: 0.82rem !important; }
            .provenance div[style*=grid-template-columns] { display: block !important; }
            .provenance div[style*=grid-template-columns] strong { display: block; margin-top: 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--saffron); }
            .provenance div[style*=grid-template-columns] strong + span { display: block; }
            main h2 { margin-top: 1.5rem; padding-left: 0.7rem; }
            main h2::before { width: 2px; }
          }
          @media (max-width: 500px) {
            .panchang-table { border: none; }
            .panchang-table tr { display: block; padding: 0.55rem 0; border-bottom: 1px solid #e6dcc4; }
            .panchang-table th { display: block; background: transparent !important; padding: 0 !important; color: var(--meta); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border: none; }
            .panchang-table td { display: block; padding: 0.15rem 0 !important; font-size: 0.95rem; border: none; }
            .panchang-table:has(thead) { display: block; overflow-x: auto; white-space: nowrap; }
            .panchang-table:has(thead) tr { display: table-row; border: none; }
            .panchang-table:has(thead) th, .panchang-table:has(thead) td { display: table-cell; padding: 0.4rem 0.5rem !important; border-bottom: 1px solid #e6dcc4 !important; white-space: normal; }
            .panchang-table:has(thead) th { background: #fdf3e2 !important; text-transform: none; letter-spacing: 0; font-size: 0.82rem; }
          }

          /* ─────────────────────────────────────────────────────────
             FORM-FIELD POLISH — WCAG-AA tap targets + iOS no-zoom
             Mandate: every form input ≥ 44px tall · font-size ≥ 16px
             so iOS Safari does not auto-zoom on focus (jarring UX).
             ───────────────────────────────────────────────────────── */
          form input[type=text],
          form input[type=date],
          form input[type=time],
          form input[type=number],
          form input[type=email],
          form input[type=tel],
          form select,
          form textarea {
            font-size: 16px !important;              /* iOS Safari no-zoom guarantee */
            min-height: 48px;                         /* WCAG 2.5.5 + comfort margin */
            min-width: 0; max-width: 100%;
            box-sizing: border-box;
            -webkit-appearance: none;                 /* unify cross-browser */
            appearance: none;
          }
          form label, form small { overflow-wrap: anywhere; }
          form input[type=date],
          form input[type=time] {
            -webkit-appearance: auto;                 /* but KEEP native pickers */
            appearance: auto;
          }
          form input[type=text]:focus,
          form input[type=date]:focus,
          form input[type=time]:focus,
          form input[type=number]:focus,
          form select:focus,
          form textarea:focus {
            outline: 3px solid var(--gold);
            outline-offset: 1px;
          }
          /* Quick-fill chip row — touch-friendly preset buttons */
          .quick-fills {
            display: flex; flex-wrap: wrap; gap: 0.4rem;
            margin-top: 0.4rem; margin-bottom: 0.25rem;
          }
          /* B2 · chip-button redesign · transparent default, gold-fill hover */
          .quick-fills button {
            background: transparent;
            color: var(--saffron);
            border: 2px solid var(--saffron);
            border-radius: 18px;
            padding: 0.4rem 0.85rem;
            font-size: 0.86rem;
            font-family: var(--serif);
            font-weight: 500;
            cursor: pointer;
            min-height: 36px;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
          }
          .quick-fills button:hover,
          .quick-fills button:focus-visible {
            background: var(--gold);
            color: var(--deep-blue);
            border-color: var(--gold);
            outline: none;
            transform: translateY(-1px);
          }

          /* B3 · per-element attribute-list (was <table class="panchang-table">) */
          dl.attr-list {
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: 0.4rem 1rem;
            margin: 1rem 0;
            font-size: 0.95rem;
          }
          dl.attr-list dt {
            font-weight: 600;
            color: var(--deep-blue);
            background: rgba(253, 243, 226, 0.5);
            padding: 0.35rem 0.5rem;
            border-radius: 3px;
          }
          dl.attr-list dd {
            color: var(--black);
            margin: 0;
            padding: 0.35rem 0;
          }
          @media (max-width: 600px) {
            dl.attr-list { grid-template-columns: 1fr; gap: 0.1rem; }
            dl.attr-list dt { margin-top: 0.5rem; }
          }

          /* C2 · disabled-button dual-cue (color + opacity) */
          button[type=submit]:disabled {
            opacity: 0.65;
            background: var(--gold) !important;
            color: var(--deep-blue) !important;
            cursor: not-allowed;
          }

          /* ────────────────────────────────────────────────────────────────
             Reader-Reverence · Floating font-scale controls
             Bottom-right pill widget with [A−] [Aa] [A+] buttons that
             scale the --reader-scale CSS variable. Persists to localStorage.
             Hidden on print. Keyboard-accessible. ARIA-labeled.
             ──────────────────────────────────────────────────────────────── */
          .reader-controls {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            z-index: 100;
            display: flex;
            gap: 0;
            padding: 0.3rem;
            background: var(--warm-bg);
            border: 1px solid var(--gold);
            border-radius: 24px;
            box-shadow: 0 4px 14px rgba(169, 59, 28, 0.18);
            opacity: 0.85;
            transition: opacity 0.18s ease;
            font-family: var(--serif);
            max-width: calc(100vw - 1rem);
          }
          .reader-controls:hover, .reader-controls:focus-within { opacity: 1; }
          .reader-controls button {
            background: transparent;
            border: none;
            color: var(--deep-blue);
            cursor: pointer;
            padding: 0.45rem 0.7rem;
            font-family: var(--serif);
            font-weight: 600;
            border-radius: 20px;
            transition: background 0.15s ease, color 0.15s ease;
            min-width: 2.2rem;
            line-height: 1;
          }
          .reader-controls button:hover {
            background: rgba(212, 166, 74, 0.18);
            color: var(--saffron);
          }
          .reader-controls button:focus-visible {
            outline: 2px solid var(--saffron);
            outline-offset: 2px;
          }
          .reader-controls button[aria-pressed=true] {
            background: var(--saffron);
            color: var(--warm-bg);
          }
          .reader-controls .rc-minus  { font-size: 0.78rem; }
          .reader-controls .rc-medium { font-size: 0.95rem; }
          .reader-controls .rc-plus   { font-size: 1.1rem; }
          .reader-controls .rc-label {
            font-size: 0.62rem;
            color: var(--meta);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 0 0.5rem;
            align-self: center;
            border-right: 1px solid #e6dcc4;
            margin-right: 0.2rem;
          }
          .reader-nav a{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:.55rem .7rem}
          @media (max-width: 600px) {
            .reader-controls { right: max(0.5rem, env(safe-area-inset-right)); bottom: max(0.5rem, env(safe-area-inset-bottom)); opacity: 0.8; }
            .reader-controls button { padding: 0.35rem 0.5rem; min-width: 44px; min-height: 44px; }
            .reader-controls .rc-label { display: none; }
            .reader-nav{gap:.4rem!important}.reader-nav a{flex:1 1 auto}
          }
          @media print { .reader-controls { display: none !important; } }