/* ==========================================================================
   BhaktiMeShakti — v2
   Reading-first, with a visual identity.

   Organising idea: the temple arch — the ogee silhouette of a shikhara
   doorway. It masks hero and card images, marks section headings, and forms
   the brand mark. One motif used structurally, not decoration applied on top.

   Still: no framework, no jQuery, no webfont FOUT, no layout shift.
   ========================================================================== */

:root {
  --paper:      #fbf9f5;
  --paper-2:    #f4f0e8;
  --ink:        #17161d;
  --ink-soft:   #46434f;
  --muted:      #6f6b78;
  --rule:       #e2ddd2;

  /* Brand vermillion, sampled from the logo (#f83030 family).
     Three tones because one is not accessible everywhere:
       --brand      graphics + large display   (3.75:1 on paper — large only)
       --brand-ink  links + small text         (5.48:1 on paper — AA)
       --brand-lit  anything on a dark ground  (footer)                   */
  --brand:      #f0392e;
  --brand-ink:  #c22a20;
  --brand-lit:  #ff8074;
  --deep:       #2b1512;

  --step--2: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.15vw, 0.96rem);
  --step-0:  clamp(1.06rem, 1.01rem + 0.26vw, 1.22rem);
  --step-1:  clamp(1.33rem, 1.23rem + 0.47vw, 1.65rem);
  /* Scaled down from the original ladder — the top end in particular was
     producing an H1 near 4rem and a hero headline near 5.5rem, both too
     large on a wide screen. Values below trimmed roughly 25-35% off the
     high end while keeping the low end (mobile) close to unchanged. */
  --step-2:  clamp(1.5rem, 1.38rem + 0.6vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.56rem + 0.95vw, 2.35rem);
  --step-4:  clamp(2.05rem, 1.78rem + 1.35vw, 2.75rem);
  --step-5:  clamp(2.4rem, 1.98rem + 2.1vw, 3.4rem);

  --measure: 88ch; /* widened again: 74ch still left noticeable empty space
                      beside the article column on wide screens. */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --flow: 1.4em;

  --font-read: "Tiro Devanagari Hindi", "Iowan Old Style", Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --arch: 46% 46% 3px 3px / 34% 34% 3px 3px;
  --arch-deep: 50% 50% 4px 4px / 46% 46% 4px 4px;

  --shadow-1: 0 1px 2px rgb(23 22 29 / .04), 0 4px 14px rgb(23 22 29 / .06);
  --shadow-2: 0 2px 6px rgb(23 22 29 / .07), 0 14px 40px rgb(23 22 29 / .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

html[lang^="mr"] { --font-read: "Tiro Devanagari Marathi", Georgia, serif; }
html[lang^="gu"] { --font-read: "Tiro Gujarati", Georgia, serif; }
html[lang^="hi"] { --font-read: "Tiro Devanagari Hindi", Georgia, serif; }

html[lang^="hi"], html[lang^="mr"], html[lang^="gu"] {
  --flow: 1.55em;
  /* Indic scripts were held at a narrower measure than Latin on the theory
     that taller glyphs need shorter lines. In practice, with the sidebar
     taking its own column, that left a large empty gutter on Hindi and
     Marathi posts. Brought close to the Latin measure. */
  --measure: 84ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14131a; --paper-2: #1c1a24; --ink: #ece9e3; --ink-soft: #b8b3c0;
    --muted: #8b8695; --rule: #2e2b38;
    --brand: #ff6a5c; --brand-ink: #ff8074; --brand-lit: #ff9c92; --deep: #1a0d0b;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 4px 14px rgb(0 0 0 / .3);
    --shadow-2: 0 2px 6px rgb(0 0 0 / .5), 0 14px 40px rgb(0 0 0 / .4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-read);
  font-size: var(--step-0);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  background-color: var(--paper);
  background-image:
    radial-gradient(60rem 40rem at 80% -10%, rgb(154 107 18 / .055), transparent 60%),
    radial-gradient(50rem 36rem at -10% 8%, rgb(36 28 51 / .045), transparent 60%);
  background-attachment: fixed;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* NOTE: do not reintroduce `img[width][height] { height:auto }` here.
   Its specificity (0,2,1) beats every `.container img` rule (0,1,1), which
   silently breaks object-fit sizing and leaves empty space under images. */

/* Any image that fills a ratio-locked frame. Declared once, used everywhere. */
.hero__media img,
.card__media img,
.tile__media img,
.entry-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

a { color: var(--brand-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - (var(--gutter) * 2), 84rem); margin-inline: auto; }
.reading { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; }
.flow > * + * { margin-block-start: var(--flow); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink);
  color: var(--paper); padding: .8rem 1.2rem; z-index: 100;
}
.skip:focus { left: 0; }

.site-head {
  border-block-end: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  position: sticky; top: 0; z-index: 40;
}
.site-head__inner {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 4.4rem; padding-block: .7rem;
}
.brand {
  font-size: var(--step-1); font-weight: 600; letter-spacing: -.018em;
  text-decoration: none; color: var(--ink); margin-inline-end: auto;
  display: inline-flex; align-items: center; gap: .55rem;
}
.brand span { color: var(--brand-ink); }
.brand::before {
  content: ""; inline-size: .82em; block-size: 1.05em; flex: none;
  background: linear-gradient(160deg, var(--brand), var(--brand-ink));
  border-radius: var(--arch-deep);
  opacity: .9;
}

.nav-toggle {
  display: none; font-family: var(--font-ui); font-size: var(--step--1);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: .5rem .95rem; color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brand-ink); color: var(--brand-ink); }

.nav { font-family: var(--font-ui); font-size: var(--step--1); }
.nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: var(--ink-soft); text-decoration: none; padding-block: .3rem; position: relative;
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -.15rem; block-size: 1.5px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--brand-ink); }
.nav a:hover::after, .nav .current-menu-item > a::after { transform: scaleX(1); }

.langs { display: flex; gap: .3rem; font-family: var(--font-ui); font-size: var(--step--1); }
.langs a {
  text-decoration: none; color: var(--muted); padding: .5rem .75rem;
  min-block-size: 2.4rem; display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid transparent; transition: all .2s var(--ease);
}
.langs a:hover { color: var(--ink); background: var(--paper-2); }
.langs a[aria-current="true"] {
  color: var(--ink); border-color: var(--rule); background: var(--paper-2); font-weight: 600;
}

@media (max-width: 56rem) {
  .site-head { position: static; }
  .nav-toggle { display: block; order: 3; }
  .nav { display: none; width: 100%; order: 4; padding-block-end: .8rem; }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .7rem 0; border-block-end: 1px solid var(--rule); }
  .nav a::after { display: none; }
  .site-head__inner { flex-wrap: wrap; }
}

.arch { border-radius: var(--arch); overflow: hidden; }

.hero {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 58rem) {
  .hero { grid-template-columns: 1.05fr .95fr; }
}
.hero__eyebrow {
  font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-ink); font-weight: 600;
  margin-block-end: .9rem;
}
.hero__title {
  font-size: var(--step-5); line-height: .98; letter-spacing: -.035em;
  margin: 0 0 1rem; font-weight: 600; text-wrap: balance;
}
.hero__lede {
  font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 1.8rem; max-width: 34ch;
}
.hero__media {
  position: relative; aspect-ratio: 4 / 5; background: var(--paper-2);
  border-radius: var(--arch-deep); overflow: hidden; box-shadow: var(--shadow-2);
}
.hero__media::after {
  content: ""; position: absolute; inset: .6rem; border: 1px solid rgb(255 255 255 / .38);
  border-radius: var(--arch-deep); pointer-events: none;
}

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid var(--ink);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.btn:hover { background: var(--deep); color: var(--paper); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--brand-ink); }

.section { margin-block-end: clamp(2.5rem, 6vw, 4.5rem); }
.section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem;
  margin-block-end: 1.5rem; padding-block-end: .9rem;
  border-block-end: 1px solid var(--rule);
}
.section__title {
  font-size: var(--step-2); line-height: 1.15; margin: 0; font-weight: 600;
  letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .6rem;
}
.section__title::before {
  content: ""; inline-size: .42em; block-size: .58em; flex: none;
  background: var(--brand); border-radius: 50%; opacity: .9;
}
.section__more {
  margin-inline-start: auto; font-family: var(--font-ui);
  font-size: var(--step--1); text-decoration: none; white-space: nowrap;
}
.section__more::after { content: " \2192"; }

.grid { display: grid; gap: clamp(1.3rem, 2.6vw, 2.1rem); grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }

.card { background: transparent; border: 0; }
.card__media {
  display: block; aspect-ratio: 4 / 3.4; background: var(--paper-2);
  border-radius: var(--arch); overflow: hidden; margin-block-end: .95rem;
  box-shadow: var(--shadow-1); position: relative;
}
.card__media img {
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__media::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--arch);
  box-shadow: inset 0 0 0 1px rgb(23 22 29 / .07); pointer-events: none;
}
.card__title {
  font-size: var(--step-0); font-weight: 600; margin: 0 0 .4rem; line-height: 1.32;
  letter-spacing: -.008em;
}
.card__title a { color: var(--ink); text-decoration: none; }
.card:hover .card__title a { color: var(--brand-ink); }
.card__meta {
  font-family: var(--font-ui); font-size: var(--step--2); color: var(--muted);
  letter-spacing: .01em; margin: 0;
}

.entry-head { padding-block: clamp(2.2rem, 6vw, 4rem) 1.6rem; }
.entry-title {
  font-size: var(--step-4); line-height: 1.08; margin: 0 0 .8rem;
  font-weight: 600; letter-spacing: -.03em; text-wrap: balance;
}
.entry-meta {
  font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
}
.entry-meta img { border-radius: 50%; }

/* Pull-quote treatment for the standfirst — a tinted panel with large
   decorative quote marks, matching the reference: italic centred summary
   sitting just under the hero image before the body copy begins. */
.standfirst {
  font-size: var(--step-1); font-style: italic; line-height: 1.6;
  color: var(--ink-soft); text-align: center; text-wrap: balance;
  margin: 0 auto 2.2rem; max-inline-size: 46rem;
  padding: 1.7rem 2.2rem; position: relative;
  background: var(--paper-2); border-radius: 10px;
  border: 1px solid var(--rule);
}
.standfirst::before {
  content: "\201C"; position: absolute; top: -.3rem; left: 1rem;
  font-family: Georgia, serif; font-style: normal; font-size: 3.2rem;
  color: var(--brand); opacity: .35; line-height: 1;
}

.entry-media {
  margin: 0 0 2.5rem; border-radius: var(--arch); overflow: hidden;
  box-shadow: var(--shadow-2);
}

.entry-content h2 {
  font-size: var(--step-2); line-height: 1.2; font-weight: 600;
  margin-block: 2.4em .55em; letter-spacing: -.02em; text-wrap: balance;
}
.entry-content h3 {
  font-size: var(--step-1); font-weight: 600; margin-block: 1.9em .4em;
  letter-spacing: -.012em;
}
.entry-content > * + * { margin-block-start: var(--flow); }
.entry-content ul, .entry-content ol { padding-inline-start: 1.25em; }
.entry-content li + li { margin-block-start: .55em; }
.entry-content li::marker { color: var(--brand-ink); }
.entry-content figure { margin-inline: 0; }
.entry-content figure img {
  border-radius: 8px; box-shadow: var(--shadow-2);
  transition: transform .4s var(--ease);
}
.entry-content figcaption {
  font-family: var(--font-ui); font-size: var(--step--1);
  color: var(--muted); margin-block-start: .6rem; line-height: 1.5;
}

.verse, .wp-block-group.verse {
  font-size: var(--step-1);
  line-height: 2.1;
  text-align: center;
  margin-block: 2.6rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 2.5rem);
  background: var(--paper-2);
  border-radius: var(--arch);
  border: 1px solid var(--rule);
  position: relative;
}
.verse::before {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: -1px;
  inline-size: 4.5rem; block-size: 3px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.verse p { margin: 0; }
.verse p + p { margin-block-start: 1.15em; }
.verse--numbered { counter-reset: verse; text-align: start; }
.verse--numbered p { counter-increment: verse; position: relative; padding-inline-start: 2.8rem; }
.verse--numbered p::before {
  content: counter(verse); position: absolute; inset-inline-start: 0;
  color: var(--brand-ink); font-family: var(--font-ui); font-size: var(--step--1);
  line-height: inherit; opacity: .8;
}
.verse__meaning {
  font-size: var(--step-0); line-height: 1.7; color: var(--ink-soft);
  text-align: start; max-width: 58ch; margin: 1.6rem auto 0;
  padding-block-start: 1.3rem; border-block-start: 1px solid var(--rule);
}

.steps { counter-reset: step; list-style: none; padding: 0; margin-block: 2.2rem; }
.steps > li {
  counter-increment: step; position: relative;
  padding-inline-start: 3.6rem; padding-block: 1.2rem;
  border-block-start: 1px solid var(--rule);
}
.steps > li:last-child { border-block-end: 1px solid var(--rule); }
.steps > li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 1.15rem;
  inline-size: 2.3rem; block-size: 2.6rem; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--brand-ink);
  border-radius: var(--arch-deep); color: var(--brand-ink);
  font-family: var(--font-ui); font-size: var(--step--1); line-height: 1;
}
.steps h3 { margin: 0 0 .35rem; font-size: var(--step-0); font-weight: 600; }
.steps p { margin: 0; color: var(--ink-soft); }

.entry-content table, .timings {
  width: 100%; border-collapse: collapse; font-size: var(--step-0);
  margin-block: 2rem; font-variant-numeric: tabular-nums;
}
.entry-content th, .timings th {
  text-align: start; font-family: var(--font-ui); font-size: var(--step--1);
  font-weight: 600; color: var(--muted); letter-spacing: .04em;
  text-transform: uppercase; padding: .75rem .9rem;
  border-block-end: 2px solid var(--rule);
}
.entry-content td, .timings td { padding: .8rem .9rem; border-block-end: 1px solid var(--rule); }
.entry-content tbody tr:hover, .timings tbody tr:hover { background: var(--paper-2); }

.faq, .wp-block-group.faq {
  margin-block: 2.8rem; padding: 1.6rem 1.6rem .4rem;
  background: var(--paper-2); border-radius: 12px; border: 1px solid var(--rule);
}
.faq::before {
  content: "FAQ"; display: block; font-family: var(--font-ui); font-size: var(--step--2);
  font-weight: 700; letter-spacing: .14em; color: var(--brand-ink); margin-block-end: 1rem;
}
.faq details, .faq .wp-block-details {
  border: 1px solid var(--rule); border-radius: 8px;
  margin-block-end: .9rem; background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq details[open] {
  border-color: var(--brand-ink); box-shadow: var(--shadow-2);
}
.faq summary {
  cursor: pointer; padding: 1.15rem 3.2rem 1.15rem 1.4rem; font-weight: 600;
  list-style: none; position: relative; line-height: 1.45;
  transition: color .2s var(--ease);
}
.faq summary:hover { color: var(--brand-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: 1.3rem; top: 1.6rem;
  inline-size: .6rem; block-size: .6rem; border-inline-end: 2px solid var(--brand-ink);
  border-block-end: 2px solid var(--brand-ink); rotate: 45deg;
  transition: rotate .25s var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; top: 1.8rem; }
.faq details > *:not(summary) { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

.author-box {
  display: flex; gap: 1.3rem; align-items: flex-start;
  padding: 1.8rem; margin-block-start: 3.5rem;
  background: var(--paper-2); border-radius: 8px; border: 1px solid var(--rule);
}
.author-box img { border-radius: 50%; flex: none; box-shadow: var(--shadow-1); }
.author-box h2 { font-size: var(--step-0); margin: 0 0 .35rem; }
.author-box h2 a { color: var(--ink); text-decoration: none; }
.author-box h2 a:hover { color: var(--brand-ink); }
.author-box p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.65; }

.crumbs { font-family: var(--font-ui); font-size: var(--step--1); color: var(--muted); padding-block-start: 1.4rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "\203A"; margin-inline-end: .45rem; color: var(--rule); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-ink); }

/* WordPress wraps the actual links in a .nav-links div — the flex context
   has to live there, not on the outer <nav>. Missing this is what produced
   the vertical stack of circles: .nav-links was the lone flex item, and
   each display:grid link inside it became its own block box.            */
.navigation.pagination {
  margin-block: 3rem; font-family: var(--font-ui); font-size: var(--step--1);
}
.navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem;
}
.navigation.pagination .page-numbers {
  display: inline-grid; place-items: center; min-inline-size: 2.6rem; block-size: 2.6rem;
  border: 1px solid var(--rule); border-radius: 999px; text-decoration: none;
  color: var(--ink-soft);
}
.navigation.pagination .page-numbers:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.navigation.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.recite-btn {
  position: sticky; bottom: 1.3rem; margin-inline-start: auto; display: block;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  background: var(--ink); color: var(--paper); border: none;
  border-radius: 999px; padding: .8rem 1.4rem; cursor: pointer;
  box-shadow: var(--shadow-2);
}
body[data-recite="on"] {
  --paper: #0e0d13; --paper-2: #0e0d13; --ink: #efe9dd; --ink-soft: #cbc4b6;
  --rule: #2b2833; --brand-ink: #ff8074; --brand: #ff6a5c;
  background-image: none;
}
body[data-recite="on"] .site-head,
body[data-recite="on"] .site-foot,
body[data-recite="on"] .entry-meta,
body[data-recite="on"] .entry-media,
body[data-recite="on"] .author-box,
body[data-recite="on"] .related { display: none; }
body[data-recite="on"] .entry-content { font-size: calc(var(--step-1) * 1.12); line-height: 2.1; }
body[data-recite="on"] .reading { width: min(100% - 2rem, 42rem); }

.site-foot {
  margin-block-start: 5rem; background: var(--deep); color: #cfc9d8;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--font-ui); font-size: var(--step--1);
}
.site-foot a { color: #e6e1ee; text-decoration: none; }
.site-foot a:hover { color: var(--brand-lit); }
.foot-cols { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.foot-cols h2 {
  font-size: var(--step--2); font-weight: 600; color: #fff; margin: 0 0 .9rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li + li { margin-block-start: .5rem; }
.site-foot .langs a { color: #cfc9d8; }
.site-foot .langs a[aria-current="true"] { background: rgb(255 255 255 / .1); border-color: transparent; color: #fff; }

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

/* --- Custom logo ----------------------------------------------------------
   When a logo is set in Customizer it replaces the text wordmark and the
   CSS arch mark. Height is capped so a large upload cannot inflate the
   header, and the aspect ratio is preserved to avoid layout shift.        */
.brand--image { margin-inline-end: auto; display: flex; align-items: center; }
.brand--image::before { content: none; }
.brand--image .custom-logo-link { display: block; line-height: 0; }
.brand--image .custom-logo {
  block-size: auto; inline-size: auto;
  max-block-size: clamp(2.4rem, 6vw, 3.1rem);
  max-inline-size: 15rem;
}
@media (prefers-color-scheme: dark) {
  /* The logo is vermillion on transparent, which reads fine on the dark
     ground, so no inversion — only a slight lift so it does not glare. */
  :root:not([data-theme="light"]) .brand--image .custom-logo { opacity: .95; }
}

/* ==========================================================================
   v3 — furniture the site actually needs
   ========================================================================== */

/* --- Cards: 16:9, matching the banner artwork the site is authored in ----
   The arch is reserved for portrait imagery. Cropping a 768x432 banner into
   a portrait arch cut the composition in half.                            */
.card__media {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  margin-block-end: .9rem;
}
.card__media::after { border-radius: 8px; }

.card__cat {
  display: inline-block; font-family: var(--font-ui); font-size: var(--step--2);
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink); text-decoration: none; margin-block-end: .45rem;
}
.card__cat:hover { color: var(--brand); }
.card__excerpt {
  font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6;
  margin: .5rem 0 .6rem;
}
.card__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }

/* Lead card: first item in a section, given more weight. */
@media (min-width: 46rem) {
  .section--split .grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .card--lead .card__title { font-size: var(--step-2); line-height: 1.18; letter-spacing: -.02em; }
  .card--lead .card__media { aspect-ratio: 16 / 9; }
  .section--split .card-stack { display: grid; gap: 1.2rem; }
  .section--split .card-stack .card { display: grid; grid-template-columns: 7.5rem 1fr; gap: .9rem; align-items: start; }
  .section--split .card-stack .card__media { margin: 0; aspect-ratio: 4 / 3; border-radius: 6px; }
  .section--split .card-stack .card__title { font-size: var(--step--1); line-height: 1.4; }
  .section--split .card-stack .card__cat, .section--split .card-stack .card__meta { display: none; }
}

/* --- Category tiles ------------------------------------------------------- */
.tiles {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.tile { text-align: center; text-decoration: none; display: block; }
.tile__media {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper-2);
  box-shadow: var(--shadow-1); margin-block-end: .7rem;
  border: 2px solid transparent; transition: border-color .25s var(--ease), transform .35s var(--ease);
}
.tile:hover .tile__media { border-color: var(--brand); transform: translateY(-3px); }
.tile__name {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  color: var(--ink); line-height: 1.3; display: block;
}
.tile:hover .tile__name { color: var(--brand-ink); }
.tile__count { font-family: var(--font-ui); font-size: var(--step--2); color: var(--muted); }

/* --- Social icons ---------------------------------------------------------- */
.social { display: flex; gap: .35rem; align-items: center; }
.social a {
  display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem;
  border-radius: 50%; color: var(--ink-soft); text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.social a:hover { background: var(--brand); color: #fff; }
.site-foot .social a { color: #cfc9d8; }
.site-foot .social a:hover { background: var(--brand); color: #fff; }

/* --- Footer ---------------------------------------------------------------- */
.foot-cols { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 60rem) {
  .foot-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
.foot-about p { line-height: 1.7; margin: 0 0 1.1rem; max-width: 42ch; }
.foot-logo { margin-block-end: 1rem; }
.foot-logo img { max-block-size: 3.2rem; inline-size: auto; }
.site-foot li a { display: inline-block; padding-block: .15rem; }
.foot-bar {
  margin-block-start: clamp(2rem, 5vw, 3rem); padding-block-start: 1.4rem;
  border-block-start: 1px solid rgb(255 255 255 / .12);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center;
  justify-content: space-between;
}
.foot-bar p { margin: 0; }
.foot-bar strong { color: #fff; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }

.to-top {
  position: fixed; inset-block-end: 1.2rem; inset-inline-end: 1.2rem;
  inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border-radius: 50%;
  text-decoration: none; box-shadow: var(--shadow-2); z-index: 30;
  font-size: 1.1rem;
}
.to-top:hover { background: var(--brand); color: #fff; }
@media (max-width: 46rem) { .to-top { display: none; } }

/* --- Chips: taxonomy cross-links on archives ------------------------------
   These are the internal links that tie the category tree together. They
   matter for crawl depth as much as for navigation.                       */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 0 2.2rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-family: var(--font-ui); font-size: var(--step--1);
  padding: .45rem .9rem; border: 1px solid var(--rule); border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); background: var(--paper);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chip span { color: var(--muted); font-size: var(--step--2); }
.chip:hover { border-color: var(--brand); color: var(--brand-ink); }

/* Archive lead card spans the full row on wide screens. */
@media (min-width: 46rem) {
  /* This is the rule that caused the reported blank-space bug: image height
     forced the row height while the text column (title + meta only) sat
     centered with empty space above and below. Fixed two ways: align to the
     top instead of centering, and the card now always carries an excerpt
     plus sibling links so the column has real content to fill the row. */
  .grid > .card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.2rem; align-items: start; }
  .grid > .card--lead .card__media { margin: 0; max-block-size: 26rem; }
}

/* --- Slider ---------------------------------------------------------------
   CSS scroll-snap, not a JS carousel. Native scroll, keyboard accessible via
   the focusable track, and nothing moves after paint — so it contributes
   zero CLS. Autoplay is deliberately omitted: it hurts accessibility and is
   the usual reason carousels tank Core Web Vitals.                        */
.slider { position: relative; margin-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem); }
.slider__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 14px;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

.slide {
  scroll-snap-align: center;
  display: grid; gap: 0;
  border-radius: 14px; overflow: hidden;
  background: var(--paper-2); box-shadow: var(--shadow-2);
  position: relative; min-block-size: 0;
}
.slide__media { aspect-ratio: 16 / 9; background: var(--paper-2); }
/* Reserve the row height up front: slides 2-5 load lazily, and without this
   the track can resize as they arrive, which shows up as CLS. */
.slider__track { min-block-size: 0; }
.slide { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.slide__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.slide__body { padding: clamp(1.2rem, 3vw, 2rem); }
.slide__title {
  font-size: var(--step-2); line-height: 1.15; margin: 0 0 .6rem;
  letter-spacing: -.025em; font-weight: 600; text-wrap: balance;
}
.slide__title a { color: var(--ink); text-decoration: none; }
.slide__title a:hover { color: var(--brand-ink); }
.slide__lede { color: var(--ink-soft); margin: 0 0 1.2rem; font-size: var(--step--1); line-height: 1.6; }

@media (min-width: 54rem) {
  /* Text over image on wide screens, with a scrim for contrast. */
  .slide { grid-template-columns: 1fr; aspect-ratio: 21 / 9; }
  .slide__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .slide__body {
    position: relative; align-self: end; max-inline-size: 42rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(to top, rgb(20 12 10 / .88) 12%, rgb(20 12 10 / .55) 55%, transparent);
    inline-size: 100%;
  }
  .slide__title a, .slide__lede { color: #fff; }
  .slide__title a:hover { color: var(--brand-lit); }
  .slide__body .hero__eyebrow { color: var(--brand-lit); }
  .slide__body .btn { background: #fff; color: var(--ink); border-color: #fff; }
  .slide__body .btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
}

.slider__dots { display: flex; gap: .5rem; justify-content: center; margin-block-start: 1rem; }
.slider__dots a {
  inline-size: .55rem; block-size: .55rem; border-radius: 50%;
  background: var(--rule); display: block; position: relative;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
/* The dot is 9px for visual restraint, but the tappable area must be at
   least 24px (WCAG 2.2 target-size). Expand the hit box, not the dot. */
.slider__dots a::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
}
.slider__dots { gap: .75rem; padding-block: .5rem; }
.slider__dots a:hover { background: var(--brand); transform: scale(1.3); }

/* --- Share ----------------------------------------------------------------- */
.share {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-block-start: 2rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
.share__label {
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-inline-end: .4rem;
}
.share__link {
  font-family: var(--font-ui); font-size: var(--step--1); text-decoration: none;
  padding: .4rem .85rem; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-soft); transition: all .2s var(--ease);
}
.share__link:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Prev / next ----------------------------------------------------------- */
.post-nav {
  display: grid; gap: 1rem; margin-block-start: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link {
  display: block; padding: 1.1rem 1.3rem; border: 1px solid var(--rule);
  border-radius: 8px; text-decoration: none; background: var(--paper);
  transition: border-color .2s var(--ease);
}
.post-nav__link:hover { border-color: var(--brand); }
.post-nav__link span {
  display: block; font-family: var(--font-ui); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-block-end: .3rem;
}
.post-nav__link strong { color: var(--ink); font-weight: 600; line-height: 1.35; display: block; }
.post-nav__link--next { text-align: end; }

/* ==========================================================================
   v4 — sidebar, split layout, table of contents
   ========================================================================== */

/* --- Split layout: main content + sidebar ---------------------------------
   Single column until there is room for a sidebar without squeezing the
   reading column below a comfortable measure.                             */
.layout--split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
/* Lowered from 64rem: that threshold meant the sidebar stacked underneath
   the article on anything narrower than ~1024px, including many laptop
   windows — which reads as "the side elements moved to the bottom". At
   52rem there is still ample room for a readable main column beside an
   18rem sidebar. */
@media (min-width: 52rem) {
  .layout--split { grid-template-columns: minmax(0, 1fr) 18rem; }
}
@media (min-width: 72rem) {
  .layout--split { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.layout--article .layout__main { min-inline-size: 0; }
.layout--article .reading { width: 100%; max-inline-size: var(--measure); }
.layout__aside {
  display: grid; gap: 1.6rem; align-content: start;
  position: sticky; top: calc(4.4rem + 1.5rem);
}
@media (max-width: 52rem) {
  .layout__aside { position: static; }
}

/* --- Widgets ---------------------------------------------------------------- */
.widget {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.3rem 1.4rem;
}
.widget h2 {
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1rem;
}
.widget ul, .widget ol { list-style: none; margin: 0; padding: 0; }
.widget li + li { margin-block-start: .85rem; padding-block-start: .85rem; border-block-start: 1px solid var(--rule); }

.widget--search form { display: flex; gap: .5rem; }
.widget--search input[type="search"] {
  flex: 1; min-inline-size: 0; font: inherit; font-size: var(--step--1);
  padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-2); color: var(--ink);
}
.widget--search button {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  padding: .6rem 1rem; border-radius: 6px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer;
}

.widget--toc ol { counter-reset: toc; }
.widget--toc li { counter-increment: toc; padding-block-start: .6rem; margin-block-start: .6rem; }
.widget--toc li:first-child { padding-block-start: 0; margin-block-start: 0; }
.widget--toc a {
  font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.4;
  color: var(--ink-soft); text-decoration: none; display: flex; gap: .5rem;
}
.widget--toc a::before { content: counter(toc) "."; color: var(--brand-ink); flex: none; }
.widget--toc a:hover { color: var(--brand-ink); }

.widget--recent a { display: flex; gap: .8rem; text-decoration: none; align-items: flex-start; }
.widget__thumb {
  inline-size: 3.6rem; block-size: 3.6rem; border-radius: 6px; overflow: hidden;
  flex: none; background: var(--paper-2);
}
.widget__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.widget--recent strong {
  display: block; font-size: var(--step--1); line-height: 1.35; color: var(--ink);
  font-weight: 600; margin-block-end: .25rem;
}
.widget--recent a:hover strong { color: var(--brand-ink); }
.widget--recent time { font-family: var(--font-ui); font-size: var(--step--2); color: var(--muted); }

.widget--cats a {
  display: flex; justify-content: space-between; text-decoration: none;
  color: var(--ink-soft); font-size: var(--step--1);
}
.widget--cats a:hover { color: var(--brand-ink); }
.widget--cats span { color: var(--muted); font-family: var(--font-ui); font-size: var(--step--2); }

.widget .social { justify-content: center; }

/* ==========================================================================
   v5 — lead-card content, dated meta, full-width hero, auto-interlinking
   ========================================================================== */

.card--lead .card__body { padding-block-start: .3rem; }
.card__excerpt { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: .6rem 0 1.1rem; }

.card__siblings {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-block-end: 1.3rem; padding: .9rem 1rem; background: var(--paper-2);
  border-radius: 8px; border: 1px solid var(--rule);
}
.card__siblings-label {
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  inline-size: 100%; margin-block-end: .2rem;
}
.card__siblings a {
  font-family: var(--font-ui); font-size: var(--step--1); text-decoration: none;
  color: var(--brand-ink); padding: .3rem .7rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 999px;
}
.card__siblings a:hover { border-color: var(--brand); background: var(--paper-2); }

.card__cta { margin-block-end: 1.2rem; }

/* Auto-inserted interlinking anchors read as ordinary body links — no
   special styling, so they never look like an ad or a plugin injection. */

/* --- Full-width hero on single posts --------------------------------------
   Title and hero image intentionally sit OUTSIDE .layout--split so they use
   the full page width; only the body text column is constrained for
   readability once the sidebar appears below.                             */
.entry-head-full { padding-block: clamp(2rem, 6vw, 3.5rem) 0; }
/* Removed the 42ch cap — was wrapping the title narrowly even though the
   page itself is now full width. text-wrap:balance (set on .entry-title
   already) keeps multi-line titles looking even without an artificial cap. */
.entry-media--full {
  /* Bottom margin matters: the hero sits in .entry-head-full (full width,
     outside the sidebar grid) and .layout--split begins immediately after.
     With no bottom margin the sidebar's first widget butted straight up
     against the image edge — the overlap seen in testing. */
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.8rem, 4vw, 2.8rem);
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-2); aspect-ratio: 21 / 9;
}
.entry-media--full img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 46rem) {
  .entry-media--full { aspect-ratio: 16 / 9; }
}

/* --- Author box: qualification line + social ------------------------------- */
.author-box__label {
  display: block; font-family: var(--font-ui); font-size: var(--step--2);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-block-end: .2rem;
}
.author-box__qual {
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600;
  color: var(--brand-ink); margin: 0 0 .6rem !important;
}
.author-box .social { justify-content: flex-start; margin-block-start: .9rem; }
.author-box .social a {
  inline-size: 2rem; block-size: 2rem; background: var(--paper-2);
  border: 1px solid var(--rule);
}

/* --- Dedicated author page --------------------------------------------------- */
.author-page__head {
  display: flex; gap: 1.8rem; align-items: center; flex-wrap: wrap;
  padding-block: clamp(2rem, 5vw, 3.5rem); border-block-end: 1px solid var(--rule);
  margin-block-end: 2.5rem;
}
.author-page__head img { border-radius: 50%; box-shadow: var(--shadow-2); }
.author-page__avatar { flex: none; }
/* The name/qualification/social block: an explicit basis + min-width:0 so it
   sits beside the photo in the available space rather than being pushed to
   wrap onto its own row underneath. Without min-width:0 a flex item defaults
   to refusing to shrink below its content's natural width, which — with a
   qualification line this long — was wide enough to force a wrap even where
   there was technically room. */
.author-page__head > div:not(.author-page__avatar) { flex: 1 1 16rem; min-width: 0; }
.author-page__qual { overflow-wrap: break-word; }
.author-page__name { font-size: var(--step-3); margin: 0 0 .3rem; font-weight: 600; letter-spacing: -.02em; }
.author-page__qual {
  font-family: var(--font-ui); font-size: var(--step-0); font-weight: 600;
  color: var(--brand-ink); margin: 0 0 .8rem;
}
.author-page .entry-content h2 { font-size: var(--step-1); }
.expertise-list {
  list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.expertise-list li {
  font-family: var(--font-ui); font-size: var(--step--1); padding: .7rem 1rem;
  background: var(--paper-2); border-radius: 6px; border-inline-start: 3px solid var(--brand);
}

/* --- Author page: post grid + pagination -----------------------------------
   paginate_links(type:'list') produces a DIFFERENT DOM shape from
   the_posts_pagination() — <ul class="page-numbers"><li><a>...</a></li></ul>
   rather than a nav/.nav-links wrapper. Styled separately and scoped to
   .author-posts so it can't collide with the archive pagination fix above.
   display:contents on the <li> removes its own box so the flex context set
   on the <ul> applies directly to the <a>/<span> circles — the exact class
   of bug fixed earlier, avoided here by checking the real markup first.   */
.author-posts { margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.author-posts ul.page-numbers {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  list-style: none; padding: 0; margin: 2rem 0 0;
  font-family: var(--font-ui); font-size: var(--step--1);
}
.author-posts ul.page-numbers li { display: contents; }
.author-posts ul.page-numbers .page-numbers {
  display: inline-grid; place-items: center; min-inline-size: 2.6rem; block-size: 2.6rem;
  border: 1px solid var(--rule); border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); padding-inline: .4rem;
}
.author-posts ul.page-numbers .page-numbers:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.author-posts ul.page-numbers .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.author-posts ul.page-numbers .dots { border-color: transparent; }

/* --- Top byline: qualification directly under the name --------------------- */
.entry-meta { align-items: flex-start; }
.entry-meta__author { display: flex; flex-direction: column; gap: .15rem; }
.entry-meta__byline a { color: var(--ink); font-weight: 600; }
.entry-meta__byline a:hover { color: var(--brand-ink); }
.entry-meta__qual {
  font-size: var(--step--2); color: var(--brand-ink); font-weight: 500;
}
.entry-meta__stats {
  margin-inline-start: auto; display: flex; align-items: center; gap: .5rem;
  color: var(--muted); white-space: nowrap;
}
@media (max-width: 30rem) {
  .entry-meta__stats { margin-inline-start: 0; flex-basis: 100%; }
}

/* --- Author page: LHS sidebar + main bio content --------------------------- */
.author-page__layout {
  display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start;
}
/* Matches the 52rem breakpoint used by .layout--split so both layouts go
   two-column at the same width, rather than the author page staying stacked
   on screens where article pages have already split. */
@media (min-width: 52rem) {
  /* main content left, sidebar panel right — reversed from the first pass
     per feedback; also widened slightly since the page now has real room
     to work with via page-author.php's full .wrap instead of .reading. */
  .author-page__layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}
/* Full width: this page overrides .wrap's normal 84rem cap entirely,
   rather than just widening it, per repeated feedback that it needed to
   use the full screen. */
.author-page-wrap {
  width: min(100% - (var(--gutter) * 2), 100rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
}
.author-page__side {
  display: grid; gap: 1.6rem; align-content: start;
  /* position: sticky removed — it was escaping the grid's bounds and
     floating over the article grid section below as the page scrolled,
     producing the overlap in the screenshot. A bio-page sidebar doesn't
     need to be pinned badly enough to justify that risk; it now just
     scrolls normally with the rest of the page. */
}

/* --- Expertise widget: static list, not links — styled distinctly so it
   doesn't read as clickable navigation like the widgets around it. */
.widget--expertise ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.widget--expertise li {
  border: 0; padding: 0; margin: 0 !important; flex: none;
  font-family: var(--font-ui); font-size: var(--step--2);
  padding: .4rem .7rem; background: var(--paper-2); border-radius: 999px;
  color: var(--ink-soft);
}

/* --- Posted / Updated date labels ------------------------------------------ */
.meta-date { white-space: nowrap; }
.meta-date__label {
  font-family: var(--font-ui); font-weight: 600; color: var(--ink-soft);
}
.meta-date--updated { margin-inline-start: .9rem; }
@media (max-width: 34rem) {
  .meta-date--updated { margin-inline-start: 0; }
  .entry-meta__stats { flex-wrap: wrap; gap: .3rem .9rem; }
}

/* --- Rank Math FAQ block ---------------------------------------------------
   54 of 57 posts use Rank Math's FAQ block rather than the themed <details>
   markup, so this is the FAQ styling that actually applies across the site.

   Styled as a card list, NOT converted to an accordion: Rank Math outputs
   plain divs with every answer visible, and it attaches FAQPage schema to
   this exact markup. Rewriting it into <details> across 54 posts would risk
   the structured data for a purely cosmetic gain, so this is CSS only —
   zero markup changes, schema untouched.                                  */
.wp-block-rank-math-faq-block {
  margin-block: 2.8rem;
  padding: 1.6rem 1.6rem .6rem;
  background: var(--paper-2);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.wp-block-rank-math-faq-block::before {
  content: "FAQ";
  display: block; font-family: var(--font-ui); font-size: var(--step--2);
  font-weight: 700; letter-spacing: .14em; color: var(--brand-ink);
  margin-block-end: 1.1rem;
}
.rank-math-faq-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-block-end: 1rem;
  box-shadow: var(--shadow-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rank-math-faq-item:hover { border-color: var(--brand-ink); box-shadow: var(--shadow-2); }

/* The question is an <h3>; reset the theme's large heading sizing and the
   big top margin it would otherwise inherit inside .entry-content. */
.entry-content .rank-math-question,
.rank-math-question {
  font-size: var(--step-0) !important;
  line-height: 1.4;
  margin: 0 0 .6rem !important;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-inline-start: 1.9rem;
}
.rank-math-question strong { font-weight: 600; }
/* Q marker, echoing the brand accent used elsewhere. */
.rank-math-question::before {
  content: "Q";
  position: absolute; inset-inline-start: 0; top: 0;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700;
  color: var(--brand-ink);
  inline-size: 1.35rem; block-size: 1.35rem;
  display: grid; place-items: center;
  background: var(--paper-2); border-radius: 50%;
}
.rank-math-answer {
  color: var(--ink-soft); line-height: 1.7;
  padding-inline-start: 1.9rem;
}
.rank-math-answer p:first-child { margin-block-start: 0; }
.rank-math-answer p:last-child { margin-block-end: 0; }

/* --- Lead paragraph -------------------------------------------------------
   With the duplicated standfirst removed from above the hero, the post's own
   opening paragraph becomes the summary. Styled up so it reads as a lead-in
   rather than plain body copy — this is the "beautified summary" treatment,
   applied to content that already exists on all 57 posts rather than to an
   element that only 3 of them had.                                        */
.entry-content > p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink);
  padding: 1.5rem 1.8rem;
  background: var(--paper-2);
  border-radius: 10px;
  border-inline-start: 3px solid var(--brand);
  margin-block-end: 2rem;
}
/* Italic quote blocks that some posts open with already carry their own
   styling — don't double up the panel treatment on those. */
.entry-content > p:first-of-type em:only-child { font-style: italic; }

/* --- FAQ accordion behaviour -----------------------------------------------
   Collapsing only applies to .is-accordion, which JS adds. Without JS every
   answer stays visible, so the content (and its schema) is never hidden
   from a crawler or a user with scripting off.                            */
.rank-math-question__toggle {
  all: unset;
  cursor: pointer;
  display: block;
  inline-size: 100%;
  box-sizing: border-box;
  padding-inline-end: 2rem;
  position: relative;
  font: inherit;
  color: inherit;
}
.rank-math-question__toggle:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 3px;
}
.is-accordion .rank-math-question { margin-block-end: 0 !important; }
.is-accordion .rank-math-question__toggle::after {
  content: ""; position: absolute; inset-inline-end: .2rem; top: .35em;
  inline-size: .55rem; block-size: .55rem;
  border-inline-end: 2px solid var(--brand-ink);
  border-block-end: 2px solid var(--brand-ink);
  rotate: 45deg; transition: rotate .25s var(--ease);
}
.is-accordion.is-open .rank-math-question__toggle::after { rotate: -135deg; }

/* Collapsed by default once enhanced; grid-template-rows animates cleanly
   from 0 to auto without needing a fixed max-height guess. */
.is-accordion .rank-math-answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease), padding-block-start .28s var(--ease);
  padding-block-start: 0;
}
.is-accordion .rank-math-answer > * { overflow: hidden; }
.is-accordion.is-open .rank-math-answer {
  grid-template-rows: 1fr; padding-block-start: .8rem;
}
@media (prefers-reduced-motion: reduce) {
  .is-accordion .rank-math-answer { transition: none; }
}

/* --- Lists: bullets and numbering across all post content ------------------
   Applies to every post automatically rather than needing per-post markup. */
.entry-content ul:not(.expertise-list):not(.wp-block-gallery) {
  list-style: none; padding-inline-start: 0;
}
.entry-content ul:not(.expertise-list):not(.wp-block-gallery) > li {
  position: relative; padding-inline-start: 1.75rem; margin-block-end: .7rem;
}
.entry-content ul:not(.expertise-list):not(.wp-block-gallery) > li::before {
  content: ""; position: absolute; inset-inline-start: .25rem; top: .62em;
  inline-size: .45rem; block-size: .45rem; border-radius: 50%;
  background: var(--brand); flex: none;
}
/* Nested lists get a lighter, hollow marker so hierarchy reads clearly. */
.entry-content ul ul > li::before {
  background: transparent; border: 1.5px solid var(--brand-ink); opacity: .7;
}

.entry-content ol { counter-reset: bms-ol; list-style: none; padding-inline-start: 0; }
.entry-content ol > li {
  counter-increment: bms-ol; position: relative;
  padding-inline-start: 2.4rem; margin-block-end: .8rem;
}
.entry-content ol > li::before {
  content: counter(bms-ol); position: absolute; inset-inline-start: 0; top: .05em;
  inline-size: 1.65rem; block-size: 1.65rem; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 50%;
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  color: var(--brand-ink); line-height: 1;
}
.entry-content li > strong:first-child { color: var(--ink); }

/* --- FAQ when the Rank Math FAQ Block module is OFF -------------------------
   With the module disabled WordPress has no render callback for
   wp:rank-math/faq-block, so it emits only the inner elements:

     <h3 class="rank-math-question">Q</h3>
     <div class="rank-math-answer">A</div>

   No .rank-math-faq-item wrapper exists to turn into a card. So instead of
   depending on a wrapper that is not there, each Q/A pair is styled as a
   card by giving the QUESTION the card's top half and the ANSWER its bottom
   half, joined seamlessly. Visually identical to a real card, built from the
   two elements that actually render.

   If the module is later enabled, the wrapper-based rules further up take
   over and these are superseded.                                          */

.entry-content .rank-math-question {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-block-end: 0;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  padding: 1.15rem 1.4rem .9rem 3.2rem !important;
  margin: 1rem 0 0 !important;
  box-shadow: var(--shadow-1);
  position: relative;
}
.entry-content .rank-math-question::before {
  inset-inline-start: 1.25rem;
  top: 1.15rem;
}
.entry-content .rank-math-answer {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-block-start: 0;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
  padding: 0 1.4rem 1.25rem 3.2rem;
  margin: 0 0 .2rem;
  color: var(--ink-soft);
  line-height: 1.7;
  box-shadow: var(--shadow-1);
}
.entry-content .rank-math-answer p { margin: 0; }
.entry-content .rank-math-answer p + p { margin-block-start: .7rem; }

/* "A" counterpart to the Q badge, so the pairing reads clearly. */
.entry-content .rank-math-answer::before {
  content: "A";
  position: absolute; inset-inline-start: 1.25rem;
  margin-block-start: .1rem;
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 700;
  color: var(--muted);
  inline-size: 1.35rem; block-size: 1.35rem;
  display: grid; place-items: center;
  background: var(--paper-2); border-radius: 50%;
}
.entry-content .rank-math-answer { position: relative; }

/* --- Archive description ---------------------------------------------------
   Archives reuse .standfirst, but a category blurb is supporting text rather
   than an article's lead sentence — it does not need the full pull-quote
   scale. Smaller, left-aligned, lighter panel.                            */
.archive .standfirst,
body.category .standfirst,
body.tag .standfirst {
  font-size: var(--step-0);
  font-style: normal;
  text-align: start;
  line-height: 1.65;
  padding: 1.2rem 1.5rem;
  /* Full width: the 62ch cap left a large empty gutter on the right of
     category pages. Archives have no sidebar, so the description can use
     the whole column. */
  max-inline-size: none;
  margin-inline: 0;
}
.archive .standfirst::before,
body.category .standfirst::before,
body.tag .standfirst::before { content: none; }

/* --- Table of contents: highlight the section currently in view ------------
   :target covers click-through from the TOC; .is-current is applied by JS
   as the reader scrolls, so the TOC reflects position without interaction. */
.widget--toc a.is-current,
.widget--toc a:hover {
  color: var(--brand-ink); font-weight: 600;
}
.widget--toc a.is-current::before { color: var(--brand); }
.entry-content h2:target {
  scroll-margin-top: 6rem;
}
.entry-content h2 {
  scroll-margin-top: 6rem;
}

/* --- Accordion collapse for the FLAT markup --------------------------------
   The earlier accordion rules assume a .rank-math-faq-item wrapper. With the
   module off there is none, so the answer is collapsed directly via the
   .is-accordion-answer class the script adds to it.

   Collapsed state also drops the card's bottom border/radius from the
   question so a closed item reads as a single complete pill rather than a
   card sliced in half.                                                    */
.entry-content .rank-math-answer.is-accordion-answer {
  display: grid;
  grid-template-rows: 0fr;
  padding-block: 0;
  border-block-end-width: 1px;
  transition: grid-template-rows .28s var(--ease), padding-block-end .28s var(--ease);
}
.entry-content .rank-math-answer.is-accordion-answer > * { overflow: hidden; }
.entry-content .rank-math-answer.is-accordion-answer.is-open {
  grid-template-rows: 1fr;
  padding-block-end: 1.25rem;
}
/* The "A" badge should only appear once the answer is actually open. */
.entry-content .rank-math-answer.is-accordion-answer::before { opacity: 0; transition: opacity .2s var(--ease); }
.entry-content .rank-math-answer.is-accordion-answer.is-open::before { opacity: 1; }

/* Chevron on the question when it is itself the accordion unit. */
.entry-content .rank-math-question.is-accordion .rank-math-question__toggle::after {
  content: ""; position: absolute; inset-inline-end: .2rem; top: .35em;
  inline-size: .55rem; block-size: .55rem;
  border-inline-end: 2px solid var(--brand-ink);
  border-block-end: 2px solid var(--brand-ink);
  rotate: 45deg; transition: rotate .25s var(--ease);
}
.entry-content .rank-math-question.is-accordion.is-open .rank-math-question__toggle::after {
  rotate: -135deg;
}
.entry-content .rank-math-question.is-accordion { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .entry-content .rank-math-answer.is-accordion-answer { transition: none; }
}

/* --- FAQ: numbered Q badges + section background ---------------------------
   Rank Math's own stylesheet numbers each question in a separate bubble
   sitting outside the card. Combining that number INTO the Q badge reads
   better and removes the stray column of circles down the left.

   The number comes from a CSS counter on .entry-content so it survives
   regardless of Rank Math's own numbering, and is scoped to questions only
   so it cannot interfere with the ordered-list counter used elsewhere.  */
.entry-content { counter-reset: bms-faq; }

.entry-content .rank-math-question {
  counter-increment: bms-faq;
}
.entry-content .rank-math-question::before {
  content: "Q" counter(bms-faq);
  inline-size: auto;
  min-inline-size: 1.9rem;
  block-size: 1.5rem;
  padding-inline: .35rem;
  border-radius: 999px;
  font-size: var(--step--2);
  letter-spacing: .01em;
  background: var(--brand);
  color: #fff;
}
.entry-content .rank-math-question {
  padding-inline-start: 3.6rem !important;
}
.entry-content .rank-math-answer {
  padding-inline-start: 3.6rem;
}
.entry-content .rank-math-answer::before {
  inline-size: 1.9rem; block-size: 1.5rem; border-radius: 999px;
  font-size: var(--step--2);
  background: var(--rule); color: var(--ink-soft);
}

/* Hide Rank Math's own external number bubble — ours is inside the badge. */
.rank-math-faq-item > .rank-math-question::marker,
.wp-block-rank-math-faq-block > ol,
.rank-math-faq-item::before {
  content: none !important;
  display: none !important;
  list-style: none !important;
}

/* Tinted panel behind the whole FAQ section so it reads as a distinct block
   rather than loose cards floating on the page background. */
.entry-content .rank-math-question.is-accordion:first-of-type {
  margin-block-start: 0 !important;
}
.wp-block-rank-math-faq-block,
.entry-content > .rank-math-question:first-of-type {
  position: relative;
}
/* Wrapping panel: drawn behind the FAQ run using a pseudo-element on the
   block wrapper when present, else a soft background on the cards. */
.entry-content .rank-math-question,
.entry-content .rank-math-answer {
  background: var(--paper);
}
.entry-content .rank-math-question.is-accordion:hover {
  border-color: var(--brand-ink);
}


/* --- FAQ: the real container is <ol class="rank-math-list"> ----------------
   Rank Math renders the FAQ as an ordered list, generated at render time
   (the classes are not in the stored post content). That <ol> is the correct
   element to carry the section background — an injected wrapper div landed
   inside the first <li> and produced invalid HTML.

   The "1. 2. 3." markers are the <ol>'s own list numbering. Suppressed here
   because the number now lives inside the Q badge instead.               */
ol.rank-math-list {
  list-style: none;
  margin: 2.5rem 0;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  counter-reset: bms-faq;
}
ol.rank-math-list::before {
  content: "FAQ";
  display: block;
  font-family: var(--font-ui); font-size: var(--step--2); font-weight: 700;
  letter-spacing: .14em; color: var(--brand-ink);
  margin-block-end: 1.1rem;
}
/* Remove the theme's generic <ol> counter badge — FAQ items are numbered
   via the Q badge, not the left-hand circle used for content lists. */
ol.rank-math-list > li {
  counter-increment: none;
  padding-inline-start: 0;
  margin-block-end: 1rem;
  list-style: none;
}
ol.rank-math-list > li::before,
ol.rank-math-list > li::marker {
  content: none !important;
  display: none !important;
}
ol.rank-math-list > li:last-child { margin-block-end: 0; }

/* Question numbering counts within the list. */
ol.rank-math-list .rank-math-question { counter-increment: bms-faq; }

/* --- Sacred verse panels (Gutenberg colour-preset groups) -------------------
   37 posts across the three sites wrap shloka/stotra text in a group block
   using WordPress's "luminous-vivid-orange" preset — a harsh default that
   clashes with the brand palette and renders long Devanagari passages as a
   solid slab of saturated orange.

   Restyled here rather than by editing content: these blocks contain sacred
   verse, and CSS carries zero risk of altering a single character of it.
   Overriding the preset variable keeps the change contained to these blocks. */
.entry-content .has-luminous-vivid-orange-background-color {
  background: linear-gradient(160deg, #7d2d10, #5d1f0b) !important;
  border-radius: 14px;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.3rem, 4vw, 2.4rem) !important;
  margin-block: 2.5rem;
  box-shadow: var(--shadow-2);
  border: 1px solid rgb(255 255 255 / .12);
  position: relative;
}
/* Thin gold rule at the top edge, echoing the verse treatment used
   elsewhere in the theme. */
.entry-content .has-luminous-vivid-orange-background-color::before {
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: -1px;
  inline-size: 5rem; block-size: 3px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, #e0b063, transparent);
  border-radius: 2px;
}
/* Verse text: generous leading, since this is read aloud rather than skimmed. */
.entry-content .has-luminous-vivid-orange-background-color p {
  line-height: 2.05;
  color: #fdf6ec !important;
  text-align: center;
}
.entry-content .has-luminous-vivid-orange-background-color h2,
.entry-content .has-luminous-vivid-orange-background-color h3 {
  color: #f5d9a8 !important;
  text-align: center;
  margin-block: 0 1.2rem !important;
  letter-spacing: .01em;
}
.entry-content .has-luminous-vivid-orange-background-color h2 strong,
.entry-content .has-luminous-vivid-orange-background-color h3 strong {
  font-weight: 600;
}
.entry-content .has-luminous-vivid-orange-background-color a {
  color: #f0c987 !important;
}

/* --- Numbered benefit sections ---------------------------------------------
   Many posts use "1. Heading" style H3s followed by a paragraph. Give them
   a little more separation so the sections do not run together as one wall
   of text (visible in the Marathi Durga Saptashati post).                 */
.entry-content h3 + p { margin-block-start: .5em; }
.entry-content p + h3 { margin-block-start: 2.2em; }

/* --- Front page H1 ---------------------------------------------------------
   Restores a single H1 on the homepage. Visually restrained so it introduces
   the site without competing with the featured slider beneath it.        */
.home-intro { padding-block: clamp(1.5rem, 4vw, 2.5rem) 0; text-align: center; }
.home-intro__title {
  font-size: var(--step-2); margin: 0 0 .4rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.home-intro__tagline {
  font-size: var(--step-0); color: var(--ink-soft); margin: 0;
  max-inline-size: 60ch; margin-inline: auto; line-height: 1.55;
}

/* ==========================================================================
   v6 — homepage rhythm
   The page was: intro, slider, then six visually identical category blocks.
   Nothing signalled where one section ended and the next began, so it read
   as one long list. These rules introduce alternation and banding so the
   eye has anchors as it moves down the page.
   ========================================================================== */

/* --- Full-bleed tinted band ------------------------------------------------
   Breaks the page into distinct zones. Uses a pseudo-element rather than a
   wrapper div so no template markup has to change.                       */
.section--band { position: relative; padding-block: clamp(2.5rem, 6vw, 4rem); }
.section--band::before {
  content: "";
  position: absolute; inset-block: 0;
  /* Extend past the container to the viewport edges. */
  inset-inline-start: 50%; translate: -50% 0;
  inline-size: 100vw; max-inline-size: 100vw;
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  z-index: -1;
}

/* --- Centred section heads for feature bands ------------------------------ */
.section__head--centred {
  flex-direction: column; align-items: center; text-align: center;
  border-block-end: 0; gap: .5rem; padding-block-end: 0;
  margin-block-end: 2rem;
}
.section__head--centred .section__title::before { display: none; }
.section__lede {
  font-size: var(--step-0); color: var(--ink-soft); margin: 0;
  max-inline-size: 52ch; line-height: 1.55;
}

/* --- Alternating split sections -------------------------------------------
   Flips which side the lead article sits on, so consecutive category blocks
   are not carbon copies of each other.                                    */
@media (min-width: 46rem) {
  .section--reverse .grid { direction: rtl; }
  .section--reverse .grid > * { direction: ltr; }
}

/* --- Homepage intro: more presence ---------------------------------------- */
.home-intro {
  padding-block: clamp(2rem, 5vw, 3.2rem) clamp(1rem, 3vw, 1.8rem);
  text-align: center;
}
.home-intro__title {
  font-size: var(--step-3);
  letter-spacing: -.03em;
  margin: 0 0 .5rem;
}
.home-intro__tagline { font-size: var(--step-1); line-height: 1.5; }
/* Small brand rule beneath the intro, echoing the verse divider motif. */
.home-intro::after {
  content: ""; display: block; inline-size: 4rem; block-size: 3px;
  margin: 1.2rem auto 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

/* --- Logo: cap the rendered size -------------------------------------------
   The uploaded logo is 2164px wide and was being served at full resolution
   with a full srcset for a ~200px slot. Constrain it and let the browser
   pick a sensible source.                                                 */
.brand--image .custom-logo {
  max-block-size: clamp(2.2rem, 5vw, 2.9rem);
  max-inline-size: 13rem;
  object-fit: contain;
}

/* --- Section spacing ------------------------------------------------------- */
.section + .section { margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.section--band + .section--band { margin-block-start: 0; }