/* ============================================================
   premanandjimaharaj.org — Global Foundation
   Colours allowed sitewide: #000, #fff, #F9EEEE, #8B0000
   No box-shadow. No transform. No font-weight at all. Radius fixed at 5px.
   Headings: Columbia Serial Bold. All other text: Roboto.
   ============================================================ */

/* ----------------------------------------------------------
   1. FONTS — self-hosted, no CDN
---------------------------------------------------------- */
@font-face {
  font-family: 'Columbia Serial';
  src: url('../fonts/columbia-serial-bold.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto.woff2') format('woff2-variations');
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------
   2. ROOT VARIABLES
---------------------------------------------------------- */
:root {
  /* Lets block-size animate to and from auto, which is what makes the
     FAQ panel slide instead of snap. Ignored where unsupported. */
  interpolate-size: allow-keywords;

  /* Colours — the only four permitted anywhere on this site */
  --c-black: #000;
  --c-white: #fff;
  --c-section: #F9EEEE;
  --c-main: #8B0000;

  /* Font families */
  --ff-heading: 'Columbia Serial', serif;
  --ff-body: 'Roboto', sans-serif;

  /* Heading sizes — one per level, h1 through h6 */
  --fs-h1: clamp(1.45rem, 1.1rem + 1.5vw, 2.6rem);
  --fs-h2: clamp(1.3rem, 1.1rem + 0.85vw, 1.85rem);
  --fs-h3: clamp(1.18rem, 1.06rem + 0.5vw, 1.45rem);
  --fs-h4: clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --fs-h5: clamp(1.05rem, 1rem + 0.22vw, 1.25rem);
  --fs-h6: clamp(0.98rem, 0.95rem + 0.14vw, 1.1rem);

  /* Text size — ONE size for every non-heading element on the site */
  --fs-text: clamp(0.875rem, 0.845rem + 0.13vw, 0.95rem);

  /* Line heights */
  --lh-tight: 1.2;
  --lh-mid: 1.4;
  --lh-loose: 1.7;

  /* Gaps — used with the gap property, never as margin */
  --gap-xs: clamp(0.35rem, 0.3rem + 0.25vw, 0.5rem);
  --gap-sm: clamp(0.6rem, 0.5rem + 0.4vw, 0.85rem);
  --gap-md: clamp(0.85rem, 0.75rem + 0.45vw, 1.15rem);
  --gap-lg: clamp(1.2rem, 1.03rem + 0.75vw, 1.75rem);
  --gap-xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem);

  /* Section spacing — one fluid value covers mobile through desktop */
  --section-y: clamp(2.5rem, 1.8rem + 3.2vw, 5rem);

  /* Container */
  --container-w: 1360px;
  --container-pad: clamp(1rem, 0.7rem + 1.4vw, 2rem);

  /* Radius — the only radius value permitted sitewide */
  --radius: 5px;

  /* Border width */
  --border-w: 1px;

  /* Motion */
  --ease: 0.25s ease;
}

/* ----------------------------------------------------------
   3. RESET — every element starts at margin 0
---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Guard: the closed nav drawer is parked past the right edge, and some
     mobile browsers let that widen the page. clip contains it without making
     body a scroll container, so the sticky header keeps working. */
  overflow-x: clip;
  font-synthesis: none;
  font-family: var(--ff-body);
  font-size: var(--fs-text);
  line-height: var(--lh-loose);
  color: var(--c-black);
  background: var(--c-white);
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--c-main);
  text-decoration: none;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}

a:hover {
  color: var(--c-black);
}

/* Inline links inside body copy carry an underline, colour alone is not enough */
p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ----------------------------------------------------------
   4. TYPOGRAPHY
   Headings: six sizes, one per level.
   Everything else: a single size, no exceptions.
---------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
  line-height: var(--lh-tight);
  color: var(--c-black);
}

/* Inline spans and links inside a heading follow the heading, not the text size */
h1 span, h2 span, h3 span,
h4 span, h5 span, h6 span,
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p,
a,
span,
li,
td,
th,
label,
figcaption,
small,
strong,
b,
em,
button,
input,
textarea,
select,
blockquote,
address,
time,
cite,
code {
  font-family: var(--ff-body);
  font-size: var(--fs-text);
  line-height: var(--lh-loose);
}

/* ----------------------------------------------------------
   5. CONTAINER — identical on every page
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  padding-inline: var(--container-pad);
  margin-inline: auto;
}

/* ----------------------------------------------------------
   6. SECTION SPACING
---------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
}

.section-alt {
  background: var(--c-section);
}

/* ----------------------------------------------------------
   7. GAP METHOD — spacing comes from the parent, never margin
---------------------------------------------------------- */
/* ----------------------------------------------------------
   8. BUTTONS — solid main colour, black on hover
---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-size: var(--fs-text);
  line-height: var(--lh-mid);
  padding: var(--gap-sm) var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-main);
  color: var(--c-white);
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.btn:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

.btn-outline {
  background: var(--c-white);
  color: var(--c-main);
}

.btn-outline:hover {
  background: var(--c-black);
  border-color: var(--c-black);
  color: var(--c-white);
}

/* ----------------------------------------------------------
   9. HEADER
   Single bar: logo, navigation and the ask-a-question CTA.
---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-main);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding-block: var(--gap-md);
}

/* Right-hand group: navigation beside the CTA */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* The logo is used exactly as supplied, name included. */
.logo img {
  width: auto;
  height: 45px;
}

/* The footer link rule paints a sliding underline on every anchor in a
   column, which caught the logo too. The logo is an image, so it opts out. */
.logo,
.footer-col a.logo {
  padding-bottom: 0;
  background-image: none;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.nav a {
  line-height: var(--lh-mid);
  color: var(--c-white);
  white-space: nowrap;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease), color var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--c-white);
  background-size: 100% var(--border-w);
}

/* Language link: one plain link that swaps the page to the other language. */
.nav .language-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 var(--gap-sm);
  border: var(--border-w) solid var(--c-white);
  border-radius: var(--radius);
  background-image: none;
  color: var(--c-white);
  white-space: nowrap;
}

.nav .language-link:hover,
.nav .language-link:focus-visible {
  background: var(--c-white);
  color: var(--c-main);
  outline: none;
}

.language-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Header CTA */
/* Same min-height as .nav .language-link so the two pills line up; without it
   the CTA is sized by its own padding and sits shorter. */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  line-height: var(--lh-mid);
  padding: 0 var(--gap-md);
  border: var(--border-w) solid var(--c-white);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-main);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
}

.header-cta:hover {
  background: var(--c-main);
  border-color: var(--c-white);
  color: var(--c-white);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  cursor: pointer;
  transition: color var(--ease);
}

.nav-toggle:hover {
  color: var(--c-section);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

/* --- Drawer overlay --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--c-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease), visibility var(--ease);
}

.nav-overlay.is-open {
  opacity: 0.5;
  visibility: visible;
}

.nav-close {
  display: none;
  align-self: flex-end;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-white);
  cursor: pointer;
  transition: color var(--ease);
}

.nav-close:hover {
  color: var(--c-section);
}

.nav-close svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* --- Tablet and below: slide-in side drawer --- */
@media (max-width: 1099px) {
  .nav-toggle { display: flex; }

  .nav-close { display: block; }

  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    z-index: 60;
    width: 300px;
    max-width: 82vw;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--gap-xs);
    padding: var(--gap-md) var(--gap-md) var(--gap-xl);
    background: var(--c-main);
    overflow-y: auto;
    transition: right var(--ease);
  }

  .nav.is-open { right: 0; }

  .nav a {
    padding: var(--gap-sm) 0;
    background-image: none;
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    color: var(--c-section);
  }

  .nav .language-link {
    align-self: flex-start;
    margin-top: var(--gap-xs);
    padding: 0 var(--gap-sm);
  }

  .nav .language-link:hover,
  .nav .language-link:focus-visible {
    color: var(--c-main);
  }
}

/* --- Small mobile --- */
@media (max-width: 599px) {



  .header-cta { display: none; }

  .logo img { height: 40px; }
}

/* ----------------------------------------------------------
   10. FOOTER — same dark treatment as the header
---------------------------------------------------------- */
.site-footer {
  background: var(--c-main);
  color: var(--c-white);
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-md);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.footer-grid {
  display: grid;
  gap: var(--gap-xl) var(--gap-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.footer-col h2,
.footer-col h3,
.footer-col h4,
.footer-col h5,
.footer-col h6 {
  color: var(--c-white);
}

.footer-brand {
  gap: var(--gap-md);
}

.footer-brand .logo img { height: 50px; }

.footer-col p,
.footer-col span,
.footer-col li {
  color: var(--c-white);
}

/* Footer links carry the same underline behaviour as the header nav */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.footer-col a {
  align-self: flex-start;
  line-height: var(--lh-mid);
  color: var(--c-white);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease), color var(--ease);
}

.footer-col a:hover {
  color: var(--c-white);
  background-size: 100% var(--border-w);
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.footer-contact svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap-md);
  padding-top: var(--gap-md);
  border-top: var(--border-w) solid var(--c-white);
}

@media (max-width: 599px) {
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

.footer-bottom p,
.footer-bottom a {
  color: var(--c-white);
  line-height: var(--lh-mid);
}

.footer-bottom a {
  padding-bottom: 3px;
  background-image: linear-gradient(var(--c-white), var(--c-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease);
}

.footer-bottom a:hover {
  background-size: 100% var(--border-w);
}
/* ----------------------------------------------------------
   11. HERO
---------------------------------------------------------- */
.hero {
  background: var(--c-section);
  padding-block: var(--section-y);
}

.hero-inner {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1fr 1fr; }
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-md);
}

/* Second half of a heading, carried in the main colour */
.text-main { color: var(--c-main); }

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.hero-tag {
  line-height: var(--lh-mid);
  padding: var(--gap-xs) var(--gap-sm);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-main);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* When a hero tag is a jump link it needs a hover state; as a span it has none */
a.hero-tag:hover {
  background: var(--c-main);
  color: var(--c-white);
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  order: -1;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* On desktop the image runs a little taller than the content column */
@media (min-width: 900px) {
  .hero-media {
    aspect-ratio: auto;
    min-height: 420px;
    order: 0;
  }
}

/* Quick facts strip under the hero */
.facts {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.fact svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fact-label {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.fact-value {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}



/* ----------------------------------------------------------
   12. SECTION HEAD — reused by every content section
---------------------------------------------------------- */
/* Every section is ONE stack with ONE gap. Nothing nests a second gap. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.section-eyebrow {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.section-head p {
  color: var(--c-black);
}

/* ----------------------------------------------------------
   13. GUIDE CARDS — internal link hub
---------------------------------------------------------- */
.guide-grid {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .guide-grid { grid-template-columns: repeat(3, 1fr); }

  /* four cards fill one row instead of leaving two dead cells */
  .guide-grid.is-four { grid-template-columns: repeat(4, 1fr); }
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-black);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}

.guide-card svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--ease);
}

.guide-card h3 {
  line-height: var(--lh-tight);
  color: var(--c-black);
  transition: color var(--ease);
}

.guide-card p {
  color: var(--c-black);
  transition: color var(--ease);
}

.guide-more {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  line-height: var(--lh-mid);
  color: var(--c-main);
  transition: color var(--ease);
}

.guide-more svg {
  width: 18px;
  height: 18px;
}

.guide-card:hover {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}

.guide-card:hover h3,
.guide-card:hover p,
.guide-card:hover .guide-more {
  color: var(--c-white);
}

.guide-card:hover svg { stroke: var(--c-white); }


/* ----------------------------------------------------------
   14. ABOUT — image and story side by side
---------------------------------------------------------- */
.about-inner {
  display: grid;
  gap: var(--gap-xl);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .about-inner { grid-template-columns: 1fr 1fr; }
}

.about-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.about-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait subjects sit high in the frame, so bias the crop upward and
     keep the face when the column is shorter than the image. */
  object-position: 50% 18%;
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .about-media {
    aspect-ratio: auto;
    min-height: 570px;
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-md);
}

.about-points {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  list-style: none;
}

.about-point {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  line-height: var(--lh-loose);
}

.about-point svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ----------------------------------------------------------
   17. DARSHAN SLOTS — colour alternates by position
---------------------------------------------------------- */
.slot-grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

@media (min-width: 560px) {
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  /* six tiles fill two rows of three instead of five plus one */
  .slot-grid.is-three { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .slot-grid { grid-template-columns: repeat(5, 1fr); }
  .slot-grid.is-three { grid-template-columns: repeat(3, 1fr); }
}

.slot {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.slot-status {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.slot-status svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slot-time {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.slot-name,
.slot-desc {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

/* Colour alternates by position so the grid reads as one clean sequence.
   Open or closed is carried by the tick or cross and its label. */
.slot:nth-child(odd) {
  background: var(--c-main);
}

.slot:nth-child(odd) .slot-status,
.slot:nth-child(odd) .slot-time,
.slot:nth-child(odd) .slot-name,
.slot:nth-child(odd) .slot-desc {
  color: var(--c-white);
}

.slot:nth-child(odd) .slot-status svg { stroke: var(--c-white); }


/* ----------------------------------------------------------
   24. FESTIVALS — a year ruler. One hairline runs the width of
   the section and each festival hangs a marker off it.
---------------------------------------------------------- */
.year-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 560px) {
  .year-strip {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
    row-gap: var(--gap-xl);
  }
}

@media (min-width: 1000px) {
  .year-strip { grid-template-columns: repeat(4, 1fr); }
}

.year-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-top: var(--gap-lg);
  border-top: var(--border-w) solid var(--c-main);
}

@media (min-width: 560px) {
  .year-item { padding-right: var(--gap-xl); }
  .year-item:last-child { padding-right: 0; }
}

/* the marker sits on the rule, not beside it */
.year-item::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius);
  background: var(--c-main);
}

.year-month {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.year-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.year-desc {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   16. NOTE — small highlighted advisory block
---------------------------------------------------------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  line-height: var(--lh-loose);
}

.note svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ----------------------------------------------------------
   19. VAULT — panel on the left, image on the right
---------------------------------------------------------- */
.vault-compose {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}

.vault-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.vault-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.vault-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-lg);
  border-radius: var(--radius);
  background: var(--c-main);
}

@media (min-width: 900px) {
  .vault-compose { grid-template-columns: 1fr 1fr; }

  /* Panel leads on the left, image sits on the right */
  .vault-panel {
    order: -1;
    padding: var(--gap-xl);
  }

  .vault-media { aspect-ratio: auto; }
}

.vault-panel .section-eyebrow,
.vault-panel h2 {
  color: var(--c-section);
}

.vault-panel h2 .text-main,
.vault-panel p {
  color: var(--c-white);
}

.vault-panel .btn {
  border-color: var(--c-white);
  background: var(--c-white);
  color: var(--c-main);
}

.vault-panel .btn-outline {
  background: var(--c-main);
  color: var(--c-white);
}

.vault-panel .btn:hover,
.vault-panel .btn-outline:hover {
  border-color: var(--c-black);
  background: var(--c-black);
  color: var(--c-white);
}

/* Figures sit inside the panel as white tiles */
.figure-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-sm);
}

@media (min-width: 620px) {
  .figure-row { grid-template-columns: repeat(2, 1fr); }
}

.figure {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-white);
  border-radius: var(--radius);
  background: var(--c-white);
}

.figure-value {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--c-main);
}

.figure-label {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   18. FAQ — native details, no script, no transform
---------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.faq-item {
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md);
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
  transition: color var(--ease);
}

.faq-item summary:hover h3 { color: var(--c-main); }

.faq-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The icon follows the native open attribute, so the panel works with
   JavaScript off. The script only enforces one open panel at a time. */
.faq-item[open] .faq-plus { display: none; }
.faq-item:not([open]) .faq-minus { display: none; }

.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: 0 var(--gap-md) var(--gap-md);
}

/* The panel slides because ::details-content can transition its block-size
   from 0 to auto. Browsers without it simply open instantly, which is the
   same behaviour a plain <details> has always had. */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--ease), content-visibility var(--ease);
  transition-behavior: allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
}

.faq-answer p {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   25. CLOSING CTA — heading on the left, actions on the right
---------------------------------------------------------- */
.cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-inner { grid-template-columns: 1fr auto; }
}

.cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* ----------------------------------------------------------
   29. PROSE — long form copy blocks
---------------------------------------------------------- */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Long copy runs in two columns so the line length stays readable */
.prose-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

@media (min-width: 900px) {
  .prose-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap-xl);
  }
}

.prose-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-top: var(--gap-md);
  border-top: var(--border-w) solid var(--c-main);
}

.prose-block h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.prose-block p {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.prose h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.prose-grid ul,
.prose ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding-left: var(--gap-md);
}

.prose-grid li,
.prose li {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.prose-grid li::before,
.prose li::before {
  content: '';
  position: relative;
  top: 0.62em;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--c-main);
}

/* Anchored sections must not hide under the sticky header */
[id] { scroll-margin-top: 90px; }



/* ----------------------------------------------------------
   26. BREADCRUMB — inner pages only
---------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xs);
}

.crumbs a,
.crumbs span {
  line-height: var(--lh-mid);
}

.crumbs a { color: var(--c-main); }
.crumbs a:hover { color: var(--c-black); }
.crumbs [aria-current] { color: var(--c-black); }

/* On a phone the photo title is long enough to wrap the trail onto a second
   line and strand the chevron at the end of the first. The name is repeated as
   the heading immediately below, so drop it from the trail at that width. */
@media (max-width: 559px) {
  .photo-crumbs [aria-current],
  .photo-crumbs svg:last-of-type { display: none; }
}

.crumbs svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------
   27. PAGE HERO — smaller opener for inner pages
---------------------------------------------------------- */
.page-hero {
  background: var(--c-section);
  padding-block: var(--section-y);
}


.page-hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.page-updated {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

/* ----------------------------------------------------------
   31. FORM — contact form, same borders and radius as everything
   else on the site. No shadow, no transform.
---------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
}

@media (min-width: 620px) {
  .form-row { grid-template-columns: repeat(2, 1fr); }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.field label {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  line-height: var(--lh-mid);
  padding: var(--gap-sm) var(--gap-md);
  border: var(--border-w) solid var(--c-black);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-black);
  transition: border-color var(--ease), background var(--ease);
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: var(--border-w) solid var(--c-main);
  outline-offset: 2px;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--c-main); }

/* The honeypot is a real field that people never see and bots fill in */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-md);
}

.form-note {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

/* Result banner after a submit, in the same shape as .note */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  line-height: var(--lh-loose);
}

.alert svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alert-ok {
  border-color: var(--c-main);
  background: var(--c-section);
}

/* Contact details beside the form */
.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-split { grid-template-columns: 1.4fr 1fr; }
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.contact-item span:first-child {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.contact-item a,
.contact-item span:last-child {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   15. TABLE — reused by every page that lists timings or fees
---------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--gap-md);
  line-height: var(--lh-mid);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  background: var(--c-main);
  color: var(--c-white);
}

.table tbody tr {
  border-top: var(--border-w) solid var(--c-main);
}

.table th + th,
.table td + td {
  border-left: var(--border-w) solid var(--c-main);
}

.table thead th + th {
  border-left-color: var(--c-white);
}

/* Below 700px each row becomes a compact card, no repeated column labels */
@media (max-width: 700px) {
  .table thead { display: none; }

  .table,
  .table tbody { display: block; }

  .table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gap-xs) var(--gap-sm);
    padding: var(--gap-md);
    border-top: var(--border-w) solid var(--c-main);
  }

  .table tbody tr:first-child { border-top: 0; }

  .table td,
  .table td + td {
    display: block;
    padding: 0;
    border-left: 0;
  }

  /* the first cell keeps stacking its time and description */
  .table-fees td:first-child {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .table td[data-label]::before { display: none; }

  /* two column tables: name on the left, value on the right */
  .table-fees td:last-child {
    width: auto;
    text-align: right;
    align-self: center;
  }

  /* schedule: time and description, session underneath, entry as a badge */
  .table-schedule td:nth-child(1) { grid-column: 1; grid-row: 1; }

  .table-schedule td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    line-height: var(--lh-mid);
    color: var(--c-main);
  }

  .table-schedule td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: max-content;
    align-self: start;
    justify-self: end;
    padding: var(--gap-xs) var(--gap-sm);
    border: var(--border-w) solid var(--c-main);
    border-radius: var(--radius);
    text-align: center;
    white-space: nowrap;
  }
}

/* ----------------------------------------------------------
   20. RULES — allowed against refused, side by side
---------------------------------------------------------- */
.rules-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .rules-split { grid-template-columns: 1fr 1fr; }
}

.rule-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.rule-panel.is-dark { background: var(--c-main); }

.rule-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.rule-head h3 {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.rule-head svg,
.rule-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.rule-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-sm);
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.rule-panel.is-dark .rule-head h3,
.rule-panel.is-dark .rule-item {
  color: var(--c-white);
}

.rule-panel.is-dark .rule-head svg,
.rule-panel.is-dark .rule-item svg {
  stroke: var(--c-white);
}

/* ----------------------------------------------------------
   21. FEES — the price table, built on the shared .table
---------------------------------------------------------- */
.table-fees td:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.fee-name {
  font-family: var(--ff-heading);
  font-size: var(--fs-h6);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.fee-who {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.table-fees th:last-child,
.table-fees td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.table-fees td:last-child {
  font-family: var(--ff-heading);
  font-size: var(--fs-h6);
}

/* text columns read left aligned, prices stay right */
.table.is-left th:last-child,
.table.is-left td:last-child {
  text-align: left;
}

/* ----------------------------------------------------------
   32. QUOTES — a saying with its meaning underneath, in the
   same tile shape as .slot so the site keeps one vocabulary
---------------------------------------------------------- */
.quote-grid {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.quote-hi {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.quote-en {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.quote-meaning {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

/* Colour alternates by position, as the teaching tiles do */
.quote-card:nth-child(4n+2),
.quote-card:nth-child(4n+3) {
  background: var(--c-main);
}

.quote-card:nth-child(4n+2) .quote-hi,
.quote-card:nth-child(4n+3) .quote-hi {
  color: var(--c-section);
}

.quote-card:nth-child(4n+2) .quote-en,
.quote-card:nth-child(4n+3) .quote-en,
.quote-card:nth-child(4n+2) .quote-meaning,
.quote-card:nth-child(4n+3) .quote-meaning {
  color: var(--c-white);
}

/* ----------------------------------------------------------
   33. GALLERY — photo grid and wallpaper downloads
---------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

.shot {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.shot-media {
  position: relative;
  aspect-ratio: 3 / 2;
}

.shot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.shot-media.is-tall { aspect-ratio: 3 / 4; }

.shot-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.shot-note {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.shot-credit {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.shot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  margin-top: auto;
}

.shot-links a {
  line-height: var(--lh-mid);
  padding: var(--gap-xs) var(--gap-sm);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-main);
  transition: background var(--ease), color var(--ease);
}

.shot-links a:hover {
  background: var(--c-main);
  color: var(--c-white);
}

/* ----------------------------------------------------------
   36. PHOTO PAGE — a breadcrumb, the wallpaper shapes that exist
   for this picture, and one row of buttons. Nothing is cropped.
---------------------------------------------------------- */
/* An element with an explicit display rule ignores the hidden attribute,
   which silently breaks anything toggled from script. Settle it once. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The title and its Hindi line are one block, so they sit tight together
   while the breadcrumb keeps the hero's normal spacing above them. */
.photo-title {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.photo-title h1 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.photo-title p {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.photo-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.photo-views {
  display: grid;
  gap: var(--gap-sm);
  grid-template-columns: 1fr;
  justify-items: center;
}

.photo-views img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
}



/* On a phone every picture runs the full width of the screen. Only from the
   tablet breakpoint up is a lone picture capped and pulled to the left, so it
   does not stretch across a desktop on its own. */
@media (min-width: 720px) {
  .photo-views:not(.has-two) { justify-items: start; }

  .photo-views:not(.has-two) img {
    width: auto;
    max-width: 100%;
    max-height: 520px;
  }
}

/* Two shapes side by side. The columns are in the ratio of the two aspect
   ratios (1024/576 and 720/960), so the pair fills the container exactly and
   both pictures come out the same height with no cropping and no dead space. */
@media (min-width: 720px) {
  .photo-views.has-two {
    grid-template-columns: var(--photo-cols, 1fr 1fr);
    justify-items: stretch;
  }
}

/* --- one row of buttons, left aligned under the pictures --- */
.photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
}

.photo-get {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  line-height: var(--lh-mid);
  cursor: pointer;
}

.photo-get em {
  font-style: normal;
  opacity: 0.75;
}

.photo-get svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}


/* ----------------------------------------------------------
   35. BENTO — photo wall. Columns rather than a row grid, so every
   picture keeps its own natural height and nothing is ever cropped.
   Vertical spacing has to be margin here: a column layout has no
   row gap to use.
---------------------------------------------------------- */
.bento {
  column-count: 1;
  column-gap: var(--gap-md);
}

@media (min-width: 560px)  { .bento { column-count: 2; } }
@media (min-width: 1000px) { .bento { column-count: 3; } }
@media (min-width: 1320px) { .bento { column-count: 4; } }

.bento-item {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: var(--gap-md);
  overflow: hidden;
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.bento-link {
  display: block;
  background-image: none;
}

.bento-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* The caption is a fixed two rows: one line of title, one row of links.
   Hindi and English titles are different lengths, and if the caption were
   allowed to wrap the tiles would end up different heights in the two
   languages, which would break the columns at different points and make
   the two galleries look like different pages. */
.bento-cap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-sm);
  border-top: var(--border-w) solid var(--c-main);
}

.bento-title {
  line-height: var(--lh-mid);
  color: var(--c-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bento .bento-title a {
  background-image: none;
  color: var(--c-black);
}

.bento .bento-title a:hover,
.bento .bento-title a:focus-visible {
  color: var(--c-main);
  outline: none;
}

.bento-links {
  display: flex;
  gap: var(--gap-xs);
}

.bento .bento-links a {
  line-height: var(--lh-mid);
  padding: 2px var(--gap-xs);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background-image: none;
  color: var(--c-main);
  white-space: nowrap;
}

.bento .bento-links a:hover,
.bento .bento-links a:focus-visible {
  background: var(--c-main);
  color: var(--c-white);
  outline: none;
}


/* ----------------------------------------------------------
   34. VERSE — a stotra line with its meaning underneath
---------------------------------------------------------- */
.verse-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.verse {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-lg);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
}

.verse-sa {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  line-height: var(--lh-loose);
  color: var(--c-main);
}

.verse-tr {
  line-height: var(--lh-loose);
  color: var(--c-black);
}

.verse-en {
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  line-height: var(--lh-mid);
  color: var(--c-black);
}

/* ----------------------------------------------------------
   37. reCAPTCHA

   Google's floating badge is fixed to the bottom right of every page it
   loads on and sits over the content. Hiding it is allowed provided the
   same notice appears in the form, which is what .form-legal carries.
---------------------------------------------------------- */
.grecaptcha-badge {
  visibility: hidden;
}

.form-legal {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.form-legal a {
  color: var(--c-main);
}

/* ----------------------------------------------------------
   38. SHOP — affiliate product cards

   Vertical cards, three to a row: picture on top, two lines of copy, and a
   filled button on the bottom edge so every card ends on the same line.

   Base rules first, media queries after: same specificity means the later
   rule wins, and writing them the other way round silently undoes the
   responsive widths.
---------------------------------------------------------- */
.shop-grid {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
}

/* position: relative so the call to action can stretch over the whole card */
.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-md);
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  transition: border-color var(--ease);
}

.shop-card:hover { border-color: var(--c-black); }

/* Every card shows the same amount of picture whatever shape the seller
   photographed it in, so a row of cards lines up. */
.shop-shot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 230px;
  padding: var(--gap-sm);
  border-radius: var(--radius);
  background: var(--c-section);
}

.shop-shot {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

/* flex children refuse to shrink past their content without this */
.shop-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  min-width: 0;
}

/* A card title is a label, not a page heading; at h2 size these ran to
   three lines and pushed the cards out of step. */
.shop-body h2,
.shop-body h3 {
  font-size: 1.15rem;
  line-height: var(--lh-tight);
  color: var(--c-black);
}

.shop-hindi {
  line-height: var(--lh-mid);
  color: var(--c-main);
}


/* Pushed to the bottom so buttons line up across a row of uneven cards.
   The ::after stretches over the whole card, which makes the box clickable
   without putting a link inside a link. */
.shop-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  margin-top: auto;
}

.shop-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.shop-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-hero-note { color: var(--c-main); }

@media (min-width: 640px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   39. PRODUCT PAGE — gallery, price, buy panel

   No nested panels. The page already has a border around the picture; the
   price, the specs and the button carry their weight through size and
   spacing instead of through three more outlined rectangles.
---------------------------------------------------------- */
.product-crumbs {
  padding-bottom: var(--gap-lg);
}

.product {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Gallery — big picture, thumbnails under it, no frames */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  min-width: 0;
}

/* The stage carries the tint and the padding, so a product photographed on
   white sits inside a frame instead of dissolving into the page. */
.gallery-stage {
  position: relative;
  min-width: 0;
  padding: var(--gap-md);
  border-radius: var(--radius);
  background: var(--c-section);
}

/* A scroll-snap track rather than a transform: the design system has no
   transforms, and scrolling gives the same one-slide-at-a-time movement,
   animates smoothly, and lets a phone swipe it for free. */
/* A tint behind the picture: a product shot cut out on white otherwise
   floats in a white page with no edge to it. */
.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius);
}

.gallery-track::-webkit-scrollbar { display: none; }

/* Let each photograph keep its own shape. Forcing a height and containing
   the picture inside it leaves the track's background showing as bands down
   either side, which is worse than a slightly taller picture. */
.gallery-slide {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  scroll-snap-align: center;
  border-radius: var(--radius);
}

/* Arrows sit on the picture. A solid white face keeps them readable over a
   dark photograph without needing a shadow. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border-w) solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-white);
  cursor: pointer;
  transition: background var(--ease);
}

.gallery-prev { left: var(--gap-md); }
.gallery-next { right: var(--gap-md); }

.gallery-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--c-main);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--ease);
}

.gallery-arrow:hover { background: var(--c-main); }
.gallery-arrow:hover svg { stroke: var(--c-white); }

/* At either end of the strip there is nowhere to go */
.gallery-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.gallery-arrow:disabled:hover { background: var(--c-white); }
.gallery-arrow:disabled:hover svg { stroke: var(--c-main); }

/* Which picture of how many, so a long strip does not lose the reader */
.gallery-count {
  position: absolute;
  right: var(--gap-md);
  bottom: var(--gap-md);
  padding: 0.15em 0.6em;
  border-radius: var(--radius);
  background: var(--c-white);
  line-height: var(--lh-mid);
  color: var(--c-main);
}

/* Each thumbnail is an exact share of the row, so the strip finishes flush
   with the picture above it instead of leaving a gap at the right. --thumb-cols
   comes from PHP and is the picture count, capped at eight; a product with more
   than eight keeps the same tile size and scrolls sideways. */
.gallery-thumbs {
  --thumb-count: 8;
  scroll-behavior: smooth;
  /* 3.5 rather than 4 on a phone: the half tile at the edge is what tells
     the reader the strip scrolls. */
  --thumb-cols: min(var(--thumb-count), 3.5);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--thumb-cols) - 1) * var(--gap-sm)) / var(--thumb-cols));
  gap: var(--gap-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

/* No border on a thumbnail: the chosen one is simply the one at full
   strength, which reads without adding another rectangle to the page. */
.gallery-thumb {
  display: block;
  min-width: 0;
  padding: var(--gap-xs);
  border: var(--border-w) solid var(--c-section);
  border-radius: var(--radius);
  background: var(--c-white);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--ease), border-color var(--ease);
}

/* contain, not cover: a thumbnail that crops a statue's head is no use */
.gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.gallery-thumb:hover { opacity: 0.8; }

.gallery-thumb.is-on {
  opacity: 1;
  border-color: var(--c-main);
}

/* The default focus ring is blue, which is not one of this site's colours */
.gallery-thumb:focus-visible,
.gallery-arrow:focus-visible {
  outline: var(--border-w) solid var(--c-main);
  outline-offset: 2px;
  opacity: 1;
}

/* Buy panel */
.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  min-width: 0;
}

.product-title {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.product-hindi {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-xs) var(--gap-sm);
}

/* The one deliberate break from the single type size: a price that reads at
   body weight is not a price. */
.product-amount {
  font-size: 2.25rem;
  line-height: var(--lh-tight);
  color: var(--c-main);
}

.product-price-note {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.product-blurb { color: var(--c-black); }

/* Hairline rows rather than a bordered panel */
.product-specs {
  display: flex;
  flex-direction: column;
  border-top: var(--border-w) solid var(--c-section);
}

.spec-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--gap-sm);
  padding: var(--gap-sm) 0;
  border-bottom: var(--border-w) solid var(--c-section);
}

.spec-row dt {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.spec-row dd {
  line-height: var(--lh-mid);
  color: var(--c-black);
}

.product-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
}

.product-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-legal {
  line-height: var(--lh-mid);
  color: var(--c-main);
}

.product-soldout {
  line-height: var(--lh-tight);
  color: var(--c-main);
}

@media (min-width: 620px) {
  .gallery-thumbs { --thumb-cols: min(var(--thumb-count), 6); }
}

@media (min-width: 900px) {
  .gallery-thumbs { --thumb-cols: min(var(--thumb-count), 5); }

  .product {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
  }

  /* Both columns stick. Whichever one is shorter finishes first and then
     holds still while the taller one keeps scrolling, so the picture stays
     with a long description and the buy panel stays with a tall picture.
     The offset clears the sticky header. */
  .gallery,
  .product-info {
    position: sticky;
    top: 106px;
  }
}

/* Numbered "what to look for" cards on a product page */
.check-card h3 {
  line-height: var(--lh-tight);
  color: var(--c-black);
}

/* Price on a card: the one figure a shopper scans for, so it sits above the
   blurb in the accent colour rather than hidden in the body text. */
.shop-price {
  font-size: 1.375rem;
  line-height: var(--lh-tight);
  color: var(--c-main);
}

.shop-price-off {
  font-size: 1rem;
}

/* Product photographs are Amazon's own, shown exactly as supplied, so nothing
   is painted behind them: no tinted stage, no card panel, no thumbnail fill. */
.gallery-stage {
  padding: 20px;
  background: var(--c-section);
}

.shop-shot-wrap {
  padding: 0;
  background: none;
}

.gallery-thumb {
  background: none;
}

/* ----------------------------------------------------------
   40. WEB STORIES INDEX
---------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}

.story-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  padding: var(--gap-md);
  border: 1px solid var(--c-main);
  border-radius: var(--radius);
}

/* The poster keeps the 3:4 shape Google uses in Discover, so the card and the
   card a reader saw there show the same picture at the same crop. */
.story-shot {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}

.story-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.story-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  min-width: 0;
}

.story-hindi,
.story-meta {
  color: var(--c-main);
  line-height: var(--lh-mid);
}

.story-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  margin-top: auto;
}

/* Same chevron treatment the shop buttons use: without an explicit size the
   inline SVG takes its viewBox and swamps the button. */
.story-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 760px) {
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .story-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------
   41. DONATE
---------------------------------------------------------- */

/* Sits above the amounts on purpose: what the money is for is read before
   anybody picks a figure. */
.donate-notice {
  margin-bottom: var(--gap-lg);
  padding: var(--gap-md);
  border: 1px solid var(--c-main);
  border-radius: var(--radius);
  background: var(--c-section);
}

.donate-notice h2 {
  margin-bottom: var(--gap-sm);
}

.donate-notice p + p {
  margin-top: var(--gap-sm);
}

.donate-box {
  padding: var(--gap-md);
  border: 1px solid var(--c-black);
  border-radius: var(--radius);
}

.donate-box h2 {
  margin-bottom: var(--gap-md);
}

.amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* The radio itself is hidden rather than removed, so the group stays
   keyboard reachable and the focus ring still lands on the label. */
.amount-pick {
  flex: 1 1 0;
  min-width: 90px;
  padding: var(--gap-sm);
  border: 1px solid var(--c-black);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
}

.amount-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.amount-pick.is-on {
  border-color: var(--c-main);
  background: var(--c-main);
  color: var(--c-white);
}

.amount-pick:focus-within {
  outline: 2px solid var(--c-main);
  outline-offset: 2px;
}

.amount-custom {
  margin-top: var(--gap-sm);
}

/* .field is a column, so the row direction has to be stated or the box sits
   on its own line above the words it belongs to. */
.field-check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gap-sm);
}

.field-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--c-main);
}

.field-check label {
  cursor: pointer;
}

/* A message nobody has to write does not need ten lines of box. */
.donate-form .field textarea {
  min-height: 96px;
}

.field-optional {
  color: var(--c-main);
}

.form-msg {
  margin-top: var(--gap-md);
  padding: var(--gap-sm);
  border-radius: var(--radius);
  line-height: var(--lh-mid);
}

.form-msg-error {
  border: 1px solid var(--c-main);
  color: var(--c-main);
}

.form-msg-ok {
  border: 1px solid var(--c-main);
  background: var(--c-section);
}

@media (min-width: 760px) {
  .amount-pick { flex: 0 0 auto; min-width: 120px; }
}