/*
 * Pitru Theme v2 — components.css
 *
 * Shared-component bundle. Contains every reusable UI partial's
 * styles. Loaded on every content page (see src/enqueue.php) so no
 * "forgot-to-enqueue" class of bug can render a partial unstyled.
 *
 * Sections (add new partials below as they ship):
 *
 *   1. Archive shell        — header / controls / result-bar / empty / pagination
 *   2. (Cards  — added wave C.3+)
 *   3. (Bands  — added wave C.4+)
 *   4. (Motif  — decorative SVG wrappers, when needed)
 *
 * Rule of thumb: if a partial is used on 2+ pages, its CSS lives
 * here. Page-specific styling (only one consumer) goes in pages/*.
 */


/* =========================================================================
 * 1. ARCHIVE SHELL
 *    Ported from ORG components/Archive.jsx (inline styles extracted to
 *    BEM classes). Rendered by templates/partials/archive/*.php.
 * ========================================================================= */

/* --- 1.1  ArchiveHeader -------------------------------------------------- */

.pps-archive-header {
  padding: 56px 0 40px;
}

.pps-archive-header__grid {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 40px;
}

.pps-archive-header__eyebrow {
  margin-bottom: 16px;
}

.pps-archive-header__sanskrit {
  font-family: var(--font-display);
  font-size: 40px;
  font-style: italic;
  color: var(--gold-deep);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}

.pps-archive-header__title {
  font-size: clamp(56px, 7vw, 92px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-top: 6px;
}

.pps-archive-header__lede {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  font-style: italic;
  font-family: var(--font-display);
}

.pps-archive-header__count-block {
  text-align: right;
  padding-bottom: 8px;
}

.pps-archive-header__count {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--ink);
}

.pps-archive-header__count-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--stone);
  text-transform: uppercase;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .pps-archive-header__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pps-archive-header__count-block { text-align: left; }
  .pps-archive-header__count { font-size: 72px; }
}


/* --- 1.2  ArchiveControls ------------------------------------------------ */

.pps-archive-controls {
  position: sticky;
  top: 64px; /* nav height — will sync with shell/nav.css once built */
  z-index: 30;
  background: rgba(246, 241, 230, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.pps-archive-controls__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Search ------------------------------------------------------------------ */
.pps-archive-controls__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex: 0 1 320px;
  min-width: 240px;
}

.pps-archive-controls__search-icon { color: var(--stone); display: inline-flex; }

.pps-archive-controls__search-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.pps-archive-controls__search-input::placeholder { color: var(--stone); }

.pps-archive-controls__search-clear {
  color: var(--stone);
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}
.pps-archive-controls__search-clear:hover { color: var(--ink); }

/* Filter pill row --------------------------------------------------------- */
.pps-archive-controls__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  list-style: none;
}

.pps-archive-controls__pill {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.18s var(--ease-ios), color 0.18s var(--ease-ios), border-color 0.18s var(--ease-ios);
  line-height: 1;
}

.pps-archive-controls__pill:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.pps-archive-controls__pill.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pps-archive-controls__pill-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.08em;
}

/* Sort dropdown (zero-JS via <details>) ----------------------------------- */
.pps-archive-controls__sort {
  position: relative;
}

.pps-archive-controls__sort > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pps-archive-controls__sort > summary::-webkit-details-marker { display: none; }

.pps-archive-controls__sort-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--stone);
  text-transform: uppercase;
}

.pps-archive-controls__sort-value {
  color: var(--ink);
}

.pps-archive-controls__sort-caret {
  display: inline-flex;
  transition: transform 0.2s var(--ease-ios);
}
.pps-archive-controls__sort[open] .pps-archive-controls__sort-caret { transform: rotate(180deg); }

.pps-archive-controls__sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 240px;
  list-style: none;
}

.pps-archive-controls__sort-option {
  display: flex;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
}
.pps-archive-controls__sort-option:hover { background: rgba(26, 22, 19, 0.05); }
.pps-archive-controls__sort-option.is-active { background: rgba(26, 22, 19, 0.05); }
.pps-archive-controls__sort-option-check { color: var(--gold-deep); }

/* Secondary MiniSelects (e.g., pandits has Language + Specialty) --------- */
.pps-archive-controls__miniselects {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pps-archive-controls__mini {
  position: relative;
}
.pps-archive-controls__mini > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.pps-archive-controls__mini > summary::-webkit-details-marker { display: none; }
.pps-archive-controls__mini[open] > summary { color: var(--ink); border-color: var(--ink); }
.pps-archive-controls__mini-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 200px;
  list-style: none;
}
.pps-archive-controls__mini-option {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.pps-archive-controls__mini-option:hover { background: rgba(26, 22, 19, 0.05); }
.pps-archive-controls__mini-option.is-active { background: rgba(26, 22, 19, 0.05); color: var(--gold-deep); }


/* --- 1.3  ArchiveResultBar ---------------------------------------------- */

.pps-archive-resultbar {
  padding: 22px 0 4px;
}
.pps-archive-resultbar__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.pps-archive-resultbar__count,
.pps-archive-resultbar__sort-display {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pps-archive-resultbar__count-num {
  color: var(--ink);
  font-weight: 500;
}
.pps-archive-resultbar__clear {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pps-archive-resultbar__sort-display strong {
  color: var(--ink);
  font-weight: 500;
}


/* --- 1.4  ArchiveEmpty --------------------------------------------------- */

.pps-archive-empty {
  padding: 80px 0;
  text-align: center;
}
.pps-archive-empty__motif {
  color: var(--stone-2);
  display: inline-flex;
  margin-bottom: 20px;
}
.pps-archive-empty__title {
  font-size: 28px;
  letter-spacing: -0.02em;
}
.pps-archive-empty__lede {
  margin-top: 10px;
  color: var(--ink-soft);
}
.pps-archive-empty__cta {
  margin-top: 20px;
}


/* --- 1.5  ArchivePagination --------------------------------------------- */

.pps-archive-pagination {
  padding: 40px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pps-archive-pagination__edge {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.pps-archive-pagination__edge.is-disabled { opacity: 0.4; pointer-events: none; }

.pps-archive-pagination__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pps-archive-pagination__num:hover { color: var(--ink); border-color: var(--line); }
.pps-archive-pagination__num.is-current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}


/* --- Card: pandit -----------------------------------------------------------
 * Ported from ORG pandits.html PanditCard (default + featured) and
 * pandit.html "Related pandits" inline card (compact).
 *
 * Structure:
 *   .pps-card-pandit                → <article> shell (flex column)
 *   .pps-card-pandit--default       → 4-col grid span, 200px banner
 *   .pps-card-pandit--featured      → 6-col grid span, 260px banner, quote
 *   .pps-card-pandit--compact       → horizontal anchor, no banner
 *   .pps-card-pandit__banner        → gradient header with monogram
 *     .pps-card-pandit__mandala     → mandala motif overlay (opacity 0.18)
 *     .pps-card-pandit__avatar      → ivory disc behind initials
 *       .pps-card-pandit__initials  → display-serif monogram
 *     .pps-card-pandit__city-chip   → top-left city label
 *     .pps-card-pandit__number      → top-right mono № NN pill
 *     .pps-card-pandit__badge       → bottom-right SENIOR PANDIT (featured only)
 *   .pps-card-pandit__body          → content column (flex:1)
 *     .pps-card-pandit__head        → name + rating row
 *       .pps-card-pandit__name
 *       .pps-card-pandit__rating
 *     .pps-card-pandit__lineage     → mono "Gayawal lineage · 4th generation"
 *     .pps-card-pandit__quote       → featured-only italic pull-quote
 *     .pps-card-pandit__stats       → 3-col stat block
 *       .pps-card-pandit__stat
 *         .pps-card-pandit__stat-value
 *         .pps-card-pandit__stat-label
 *     .pps-card-pandit__languages   → chips row
 *       .pps-card-pandit__languages-label
 *       .pps-card-pandit__languages-list
 *       .pps-card-pandit__lang-chip
 *     .pps-card-pandit__cta         → "Request this pandit / BOOK →"
 *       .pps-card-pandit__cta-label
 *       .pps-card-pandit__cta-action
 * ========================================================================= */

.pps-card-pandit {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.24s var(--ease-ios), box-shadow 0.24s var(--ease-ios);
  color: inherit;
  text-decoration: none;
}

.pps-card-pandit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Banner (monogram + overlays) -------------------------------------- */

.pps-card-pandit__banner {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pps-card-pandit--featured .pps-card-pandit__banner {
  height: 260px;
}

.pps-card-pandit__mandala {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pps-card-pandit__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(251, 247, 238, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 10px 30px rgba(26, 22, 19, 0.25);
  position: relative;
  z-index: 1;
}

.pps-card-pandit--featured .pps-card-pandit__avatar {
  width: 128px;
  height: 128px;
}

.pps-card-pandit__initials {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.pps-card-pandit--featured .pps-card-pandit__initials {
  font-size: 48px;
}

/* Banner chips + pills --------------------------------------------------- */

.pps-card-pandit__city-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(251, 247, 238, 0.9);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 2;
}

.pps-card-pandit__number {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: rgba(251, 247, 238, 0.9);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  z-index: 2;
}

.pps-card-pandit__badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--paper);
  background: rgba(26, 22, 19, 0.5);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}

/* --- Body --------------------------------------------------------------- */

.pps-card-pandit__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pps-card-pandit__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.pps-card-pandit__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  flex: 1;
  margin: 0;
}

.pps-card-pandit--featured .pps-card-pandit__name {
  font-size: 24px;
}

.pps-card-pandit__rating {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-deep);
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.pps-card-pandit__lineage {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pps-card-pandit__lineage .pps-card-pandit__dot {
  opacity: 0.4;
}

.pps-card-pandit__quote {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 4px 0 16px;
  padding-left: 14px;
  letter-spacing: -0.005em;
  border-left: 2px solid var(--gold);
}

.pps-card-pandit__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin: auto 0 14px;
}

.pps-card-pandit__stat {
  text-align: center;
}

.pps-card-pandit__stat-value {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pps-card-pandit__stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
}

.pps-card-pandit__languages {
  margin-bottom: 14px;
}

.pps-card-pandit__languages-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pps-card-pandit__languages-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pps-card-pandit__lang-chip {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--ivory-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--ink-soft);
}

.pps-card-pandit__cta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s var(--ease-ios);
}

.pps-card-pandit__cta:hover {
  background: var(--ivory-3);
}

.pps-card-pandit__cta-action {
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

/* --- Compact variant ---------------------------------------------------- */

.pps-card-pandit--compact {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease-ios), box-shadow 0.2s var(--ease-ios);
}

.pps-card-pandit--compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pps-card-pandit__avatar--compact {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  box-shadow: none;
  flex-shrink: 0;
}

.pps-card-pandit__initials--compact {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--gold-deep);
  letter-spacing: -0.01em;
}

.pps-card-pandit__compact-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pps-card-pandit__name--compact {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

.pps-card-pandit__compact-meta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 720px) {
  .pps-card-pandit__banner,
  .pps-card-pandit--featured .pps-card-pandit__banner {
    height: 200px;
  }
  .pps-card-pandit--featured .pps-card-pandit__avatar {
    width: 96px;
    height: 96px;
  }
  .pps-card-pandit--featured .pps-card-pandit__initials {
    font-size: 38px;
  }
  .pps-card-pandit--featured .pps-card-pandit__name {
    font-size: 20px;
  }
  .pps-card-pandit__body {
    padding: 20px;
  }
  .pps-card-pandit--compact {
    padding: 20px;
    gap: 16px;
  }
}


/* --- Card: testimonial ----------- */
/* Ported from ORG Pitrupaksha ORG/testimonials.html ReflectionCard
 * (lines 221-270). Circular gradient initials, oversized italic
 * quote-mark, display-serif italic quote body, star rating + formatted
 * date footer. Two variants: default / featured (ribbon).              */

.pps-card-testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Featured ribbon — absolute-positioned pill peeking above the top edge. */
.pps-card-testimonial__badge {
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--vermillion);
  color: var(--paper);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Header: circular gradient avatar + name/role stack. */
.pps-card-testimonial__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.pps-card-testimonial__initials {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold-deep) 100%);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Inner rim — non-obvious but load-bearing; gives the avatar a lit edge. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.pps-card-testimonial__identity {
  flex: 1 1 auto;
  min-width: 0;
}

.pps-card-testimonial__name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.pps-card-testimonial__role {
  font-size: 12px;
  color: var(--stone);
  margin-top: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* Meta chip row: city / rite / gotra. */
.pps-card-testimonial__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pps-card-testimonial__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(184, 137, 58, 0.12);
  color: var(--gold-deep);
}
.pps-card-testimonial__chip--rite {
  background: rgba(26, 22, 19, 0.06);
  color: var(--ink-soft);
}
.pps-card-testimonial__chip--gotra {
  background: rgba(107, 122, 90, 0.12);
  color: var(--sage);
}

/* Oversized editorial quote-mark glyph (ASCII curly double quote
 * rendered in Cormorant — the typeface's own curl supplies the
 * character; no pseudo-element substitute). */
.pps-card-testimonial__quote-mark {
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.6;
  margin-bottom: -14px;
  margin-left: -4px;
}

/* Quote body — italic display serif. Size scales with `length` modifier. */
.pps-card-testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.55;
  letter-spacing: -0.003em;
  font-size: 18px; /* medium (default) */
}
.pps-card-testimonial--length-short .pps-card-testimonial__quote { font-size: 20px; }
.pps-card-testimonial--length-long  .pps-card-testimonial__quote { font-size: 19px; }

/* Footer: star rating ↔ formatted date, top-ruled. */
.pps-card-testimonial__footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pps-card-testimonial__rating {
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  font-size: 12px;
  line-height: 1;
}

.pps-card-testimonial__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.1em;
}

/* Featured variant: no visual delta beyond the ribbon (strict ORG clone). */


/* --- Card: journal -----------------------------------------------------------
 * Ported verbatim from ORG `journal.html` — `ArticleCard` (L227-261) and
 * `HeroArticle` (L184-225). Compact variant from `blog.html` "Continue
 * reading" band (L111-125). One partial, four variants; the parent grid
 * decides 4/6 magazine span, the card decides internal sizing.
 *
 * Structure:
 *   .pps-card-journal                    → <a> wrapper (flex column)
 *   .pps-card-journal--default           → 4-col magazine span (cover 220, H3 22)
 *   .pps-card-journal--large             → 6-col magazine span (cover 320, H3 32)
 *   .pps-card-journal--hero              → HeroArticle (two-col, giant title)
 *   .pps-card-journal--compact           → blog "Continue reading" band
 *   .pps-card-journal__cover             → placeholder surface (motif or img)
 *     .pps-card-journal__cover-fallback  → motif + label centre-stack
 *     .pps-card-journal__cover-motif     → tinted motif SVG
 *     .pps-card-journal__cover-label     → "COVER · CATEGORY" mono label
 *     .pps-card-journal__cover-img       → real image when image_url set
 *   .pps-card-journal__body              → text column
 *     .pps-card-journal__meta            → eyebrow row (category · read)
 *       .pps-card-journal__meta--hero    → hero adds Latest chip
 *         .pps-card-journal__latest-chip → .chip.vermillion instance
 *       .pps-card-journal__eyebrow       → "category · N min read" string
 *       .pps-card-journal__category      → category token
 *       .pps-card-journal__read          → read-time token
 *       .pps-card-journal__dot           → " · " separator
 *     .pps-card-journal__title           → H2 (hero) or H3 (cards)
 *     .pps-card-journal__excerpt         → lede (italic in hero)
 *     .pps-card-journal__footer          → bottom strip: author + date
 *       .pps-card-journal__author        → avatar + name
 *         .pps-card-journal__avatar      → circular initials disc
 *         .pps-card-journal__author-name
 *         .pps-card-journal__sep         → " · " dot (hero only)
 *         .pps-card-journal__views       → "N,NNN reads" (hero only)
 *       .pps-card-journal__date          → mono date
 *     .pps-card-journal__cta-row         → hero-only, holds:
 *       .pps-card-journal__cta           → "Read essay →" button
 * ========================================================================= */

.pps-card-journal {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform 0.24s var(--ease-ios);
  height: 100%;
}

.pps-card-journal:hover {
  transform: translateY(-3px);
}

/* --- Cover --------------------------------------------------------------- */

.pps-card-journal__cover {
  position: relative;
  height: 220px;
  border-radius: var(--r-md);
  margin-bottom: 18px;
  overflow: hidden;
}

.pps-card-journal__cover-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.pps-card-journal__cover-motif {
  color: var(--vermillion);
  opacity: 0.75;
  display: inline-flex;
  line-height: 0;
}

.pps-card-journal__cover-label {
  /* inherits .placeholder-label — nothing further needed */
}

.pps-card-journal__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Body shared --------------------------------------------------------- */

.pps-card-journal__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Meta / eyebrow ---------------------------------------------------------- */

.pps-card-journal__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pps-card-journal__meta--hero {
  gap: 10px;
  margin-bottom: 20px;
  letter-spacing: 0.18em;
}

.pps-card-journal__category {
  color: var(--gold-deep);
}

.pps-card-journal__read,
.pps-card-journal__dot,
.pps-card-journal__eyebrow {
  color: var(--stone);
}

.pps-card-journal--hero .pps-card-journal__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--stone);
  text-transform: uppercase;
}

/* Latest chip overrides chip-pill type metrics to mono uppercase */
.pps-card-journal__latest-chip {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Title ------------------------------------------------------------------- */

.pps-card-journal__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 22px;
  margin: 0;
}

.pps-card-journal--large .pps-card-journal__title {
  font-size: 32px;
}

.pps-card-journal--hero .pps-card-journal__title {
  font-size: clamp(48px, 5.5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.pps-card-journal--compact .pps-card-journal__title {
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 10px;
}

/* Excerpt ----------------------------------------------------------------- */

.pps-card-journal__excerpt {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pps-card-journal--large .pps-card-journal__excerpt {
  font-size: 16px;
}

.pps-card-journal--hero .pps-card-journal__excerpt {
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.6;
  font-family: var(--font-display);
  font-style: italic;
}

.pps-card-journal--compact .pps-card-journal__excerpt {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
}

/* Author + footer (default / large) --------------------------------------- */

.pps-card-journal__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pps-card-journal__author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}

.pps-card-journal__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.pps-card-journal__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Hero author row (larger avatar, inline views) --------------------------- */

.pps-card-journal__author--hero {
  margin-top: 26px;
  gap: 14px;
  color: var(--stone);
  font-size: 13px;
  flex-wrap: wrap;
}

.pps-card-journal__author--hero .pps-card-journal__avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.pps-card-journal__author--hero .pps-card-journal__author-name {
  color: var(--ink);
}

.pps-card-journal__sep {
  color: var(--stone);
}

.pps-card-journal__views {
  color: var(--stone);
}

/* Hero CTA ---------------------------------------------------------------- */

.pps-card-journal__cta-row {
  margin-top: 32px;
}

.pps-card-journal__cta {
  padding: 14px 24px;
}

/* --- Variant: hero (two-column editorial band) --------------------------- */

.pps-card-journal--hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.pps-card-journal--hero .pps-card-journal__body {
  /* hero body is the left column — lives inside the grid track, not below cover */
  order: 1;
}

.pps-card-journal--hero .pps-card-journal__cover {
  order: 2;
  height: 460px;
  border-radius: var(--r-xl);
  margin-bottom: 0;
}

.pps-card-journal--hero:hover {
  /* hero is a sprawling band — no lift transform */
  transform: none;
}

/* --- Variant: large (6-col magazine) ------------------------------------- */

.pps-card-journal--large .pps-card-journal__cover {
  height: 320px;
}

/* --- Variant: compact ---------------------------------------------------- */

.pps-card-journal--compact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  overflow: hidden;
}

.pps-card-journal--compact .pps-card-journal__cover {
  height: 140px;
  margin-bottom: 16px;
}

.pps-card-journal--compact .pps-card-journal__meta {
  margin-bottom: 0;
  letter-spacing: 0.12em;
}

.pps-card-journal--compact .pps-card-journal__excerpt {
  color: var(--ink-soft);
}

/* Compact has no footer — excerpt is the last line. */

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .pps-card-journal--hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pps-card-journal--hero .pps-card-journal__cover {
    height: 340px;
    order: 1;
  }
  .pps-card-journal--hero .pps-card-journal__body {
    order: 2;
  }
  .pps-card-journal--large .pps-card-journal__cover {
    height: 260px;
  }
}

@media (max-width: 720px) {
  .pps-card-journal__cover { height: 180px; }
  .pps-card-journal--large .pps-card-journal__title { font-size: 24px; }
  .pps-card-journal--hero .pps-card-journal__cover { height: 240px; }
  .pps-card-journal--hero .pps-card-journal__author--hero { margin-top: 20px; }
  .pps-card-journal--hero .pps-card-journal__cta-row { margin-top: 24px; }
  .pps-card-journal--compact { padding: 18px; }
  .pps-card-journal--compact .pps-card-journal__cover { height: 120px; }
}


/* --- Card: city ---------------------------------------------------------
 *
 * Ported from ORG cities.html (GridView → CityCard, variants hero/large/
 * default) and components/HomeSections.jsx → Cities (variant compact).
 *
 * Variants are self-contained — no shared `.pps-card` baseline. Each
 * card type (city / rite / pandit) owns its visual in full per the
 * design-system decision.
 *
 * Grid sizing (span-12 / span-6 / span-4) is a layout concern owned by
 * the caller. The card adapts its internal rhythm via `--hero | --large
 * | --default | --compact`.
 * -----------------------------------------------------------------------*/

.pps-card-city {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.28s var(--ease-ios),
    box-shadow 0.28s var(--ease-ios);
  box-shadow: var(--shadow-sm);
}

.pps-card-city:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pps-card-city__media {
  position: relative;
  flex: 0 0 auto;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%);
}

.pps-card-city__media-inner {
  text-align: center;
}

.pps-card-city__sunwater {
  color: var(--vermillion);
  display: inline-flex;
}

.pps-card-city__motif {
  color: var(--gold-deep);
  opacity: 0.85;
  display: inline-flex;
  position: relative;
}

.pps-card-city__photo-label {
  margin-top: 14px;
  display: inline-block;
}

.pps-card-city__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 6px;
}

.pps-card-city__priority {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: 5px 10px;
  border-radius: var(--r-pill);
}

.pps-card-city__body {
  flex: 1;
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pps-card-city__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 14px;
}

.pps-card-city__rank { color: var(--gold-deep); }

.pps-card-city__state {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.1em;
}

.pps-card-city__sanskrit {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: var(--gold-deep);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.pps-card-city__name {
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.pps-card-city__lede,
.pps-card-city__blurb {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.pps-card-city__footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}

.pps-card-city__stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pps-card-city__stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pps-card-city__stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin-top: 2px;
}

.pps-card-city__caption {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.1em;
}

.pps-card-city__cta { color: var(--gold-deep); }

/* Variant: hero (span-12, row layout — ORG cities.html first card) */
.pps-card-city--hero { flex-direction: row; }
.pps-card-city--hero .pps-card-city__media { flex: 0 0 50%; height: 440px; }
.pps-card-city--hero .pps-card-city__body { padding: 48px 52px; }
.pps-card-city--hero .pps-card-city__sanskrit { font-size: 30px; }
.pps-card-city--hero .pps-card-city__name { font-size: 64px; }
.pps-card-city--hero .pps-card-city__lede {
  margin-top: 18px;
  font-size: 18px;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.55;
}
.pps-card-city--hero .pps-card-city__blurb--hero {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 460px;
  font-family: var(--font-body);
  font-style: normal;
}
.pps-card-city--hero .pps-card-city__footer { margin-top: 28px; }
.pps-card-city--hero .pps-card-city__stats { gap: 24px; }

/* Variant: large (span-6, cards #2–3) */
.pps-card-city--large .pps-card-city__media { height: 260px; }
.pps-card-city--large .pps-card-city__name { font-size: 36px; }

/* Variant: default (span-4) uses baseline — no overrides. */

/* Variant: compact (ORG homepage 3-col) */
.pps-card-city--compact .pps-card-city__media {
  height: 200px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--city-accent, var(--gold-deep)) 13%, transparent) 0%,
      color-mix(in srgb, var(--city-accent, var(--gold-deep)) 3%, transparent) 100%
    ),
    linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%);
}
.pps-card-city--compact .pps-card-city__motif { color: var(--city-accent, var(--gold-deep)); }
.pps-card-city--compact:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pps-card-city--compact .pps-card-city__body { padding: 22px 24px 24px; }
.pps-card-city--compact .pps-card-city__name {
  font-size: 28px;
  letter-spacing: -0.01em;
}
.pps-card-city--compact .pps-card-city__tagline {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.55;
}
.pps-card-city--compact .pps-card-city__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pps-card-city--compact .pps-card-city__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--stone);
  text-transform: uppercase;
}
.pps-card-city--compact .pps-card-city__arrow {
  color: var(--gold-deep);
  font-size: 18px;
  transition: transform 0.2s var(--ease-ios);
}
.pps-card-city--compact:hover .pps-card-city__arrow { transform: translateX(2px); }

.pps-card-city__chip-tl {
  position: absolute;
  top: 14px;
  left: 14px;
}
.pps-card-city__chip-br {
  position: absolute;
  bottom: 14px;
  right: 14px;
}
.pps-card-city__state-chip,
.pps-card-city__slots-chip {
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
}

@media (max-width: 1024px) {
  .pps-card-city--hero { flex-direction: column; }
  .pps-card-city--hero .pps-card-city__media { flex: 0 0 auto; height: 320px; }
  .pps-card-city--hero .pps-card-city__body { padding: 36px 32px; }
  .pps-card-city--hero .pps-card-city__name { font-size: 48px; }
}

@media (max-width: 720px) {
  .pps-card-city--hero .pps-card-city__media { height: 240px; }
  .pps-card-city--hero .pps-card-city__body { padding: 28px 24px; }
  .pps-card-city--hero .pps-card-city__name { font-size: 40px; }
  .pps-card-city--large .pps-card-city__media { height: 220px; }
  .pps-card-city--large .pps-card-city__name { font-size: 30px; }
}


/* --- Card: rite ---------------------------------------------------------
 *
 * Ported from ORG:
 *   poojas.html  → PoojaCard (default + featured)
 *   pooja.html   → "Other rites" grid (compact)
 *   HomeHero.jsx → Rituals tab-panel (panel)
 *
 * Namespace is isolated: every class uses `.pps-card-rite` prefix.
 * -----------------------------------------------------------------------*/

.pps-card-rite {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.28s var(--ease-ios),
    box-shadow 0.28s var(--ease-ios);
}

.pps-card-rite:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Variant: default (archive non-featured span-4) */
.pps-card-rite--default {
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 24px;
}

/* Variant: featured (archive featured span-8; row layout + photo) */
.pps-card-rite--featured {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0;
  flex-direction: row;
  gap: 0;
}

.pps-card-rite__photo {
  flex: 0 0 42%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%);
}
.pps-card-rite__photo-inner { text-align: center; }
.pps-card-rite__photo-motif { color: var(--vermillion); display: inline-flex; }
.pps-card-rite__photo-label { margin-top: 14px; }

.pps-card-rite--featured .pps-card-rite__body {
  flex: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pps-card-rite--default .pps-card-rite__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.pps-card-rite__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pps-card-rite--featured .pps-card-rite__top { margin-bottom: 14px; }

.pps-card-rite__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--stone);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pps-card-rite__motif {
  color: var(--gold-deep);
  display: inline-flex;
}

.pps-card-rite__sanskrit {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
  line-height: 1;
}
.pps-card-rite__sanskrit--featured { font-size: 22px; margin-bottom: 4px; }
.pps-card-rite__sanskrit--compact { font-size: 18px; }
.pps-card-rite__sanskrit--panel {
  font-size: 72px;
  letter-spacing: -0.02em;
  opacity: 0.9;
}

.pps-card-rite__name {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.pps-card-rite--featured .pps-card-rite__name { font-size: 40px; }
.pps-card-rite__name--compact {
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.pps-card-rite__name--panel {
  font-size: 44px;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

.pps-card-rite__lede {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
}
.pps-card-rite__blurb {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.pps-card-rite__blurb--short {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.pps-card-rite__blurb-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pps-card-rite__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pps-card-rite--featured .pps-card-rite__footer {
  margin-top: 24px;
  padding-top: 18px;
}
.pps-card-rite__stats { display: flex; gap: 18px; }
.pps-card-rite__stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--stone);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pps-card-rite__stat-value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin-top: 2px;
}
.pps-card-rite__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-deep);
  letter-spacing: 0.1em;
}

/* Variant: compact (single-rite "Other rites" 3-col) */
.pps-card-rite--compact {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: transform 0.2s var(--ease-ios);
}
.pps-card-rite--compact:hover {
  transform: translateY(-3px);
  box-shadow: none;
}
.pps-card-rite__compact-motif {
  color: var(--gold-deep);
  margin-bottom: 14px;
  display: inline-flex;
}
.pps-card-rite__compact-lede {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pps-card-rite__compact-meta {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

/* Variant: panel (HomeHero Rituals tab-panel) */
.pps-card-rite--panel {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 48px;
  box-shadow: var(--shadow-md);
}
.pps-card-rite--panel:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}
.pps-card-rite__panel-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}
.pps-card-rite__panel-lhs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pps-card-rite__subtitle {
  font-size: 15px;
  color: var(--stone);
  margin-top: 4px;
  font-style: italic;
}
.pps-card-rite__details {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.pps-card-rite__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  gap: 16px;
  margin: 0;
}
.pps-card-rite__detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stone);
  text-transform: uppercase;
  flex-shrink: 0;
  margin: 0;
}
.pps-card-rite__detail-value {
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  margin: 0;
}
.pps-card-rite__detail-value--highlight {
  color: var(--gold-deep);
  font-weight: 500;
}
.pps-card-rite__panel-cta {
  margin-top: 28px;
  padding: 14px 22px;
  font-size: 14px;
}
.pps-card-rite__panel-body {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-2);
  font-family: var(--font-body);
}
.pps-card-rite__advisory {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pps-card-rite__advisory-block {
  padding: 18px 20px;
  border-radius: var(--r-md);
}
.pps-card-rite__advisory-block--positive {
  background: color-mix(in srgb, var(--sage) 12%, transparent);
  border-left: 2px solid var(--sage);
}
.pps-card-rite__advisory-block--note {
  background: color-mix(in srgb, var(--vermillion) 10%, transparent);
  border-left: 2px solid var(--vermillion);
}
.pps-card-rite__advisory-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.pps-card-rite__advisory-block--positive .pps-card-rite__advisory-label { color: var(--sage); }
.pps-card-rite__advisory-block--note .pps-card-rite__advisory-label { color: var(--vermillion-deep); }
.pps-card-rite__advisory-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.pps-card-rite__advisory-list { margin: 0; padding-left: 18px; }
.pps-card-rite__advisory-list li + li { margin-top: 4px; }

.pps-card-rite__broadcast {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--ivory);
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pps-card-rite__broadcast-icon {
  color: var(--gold-deep);
  flex-shrink: 0;
}
.pps-card-rite__broadcast-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pps-card-rite__broadcast-body strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .pps-card-rite--featured { flex-direction: column; }
  .pps-card-rite__photo {
    flex: 0 0 auto;
    width: 100%;
    min-height: 220px;
  }
  .pps-card-rite--featured .pps-card-rite__body { padding: 28px 28px; }
}

@media (max-width: 720px) {
  .pps-card-rite--panel { padding: 28px; }
  .pps-card-rite__panel-grid { grid-template-columns: 1fr; gap: 28px; }
  .pps-card-rite__advisory { grid-template-columns: 1fr; }
  .pps-card-rite__sanskrit--panel { font-size: 52px; }
  .pps-card-rite__name--panel { font-size: 34px; }
  .pps-card-rite--featured .pps-card-rite__name { font-size: 32px; }
  .pps-card-rite__stats { gap: 14px; flex-wrap: wrap; }
}

/* --- Band: scripture ---------------------------------------------------
 * Dark ink quote band with gold-soft Ornament motif + italic display
 * quote + mono attribution. Ported 1:1 from ORG cities.html ScriptureBand
 * (lines 452-462). Token-only; lengths match the inline styles.
 * ---------------------------------------------------------------------- */
.pps-band-scripture {
  padding: 80px 0;
  background: var(--ink);
  color: var(--ivory);
  text-align: center;
}

.pps-band-scripture__inner {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.pps-band-scripture__motif {
  color: var(--gold-soft);
  display: inline-flex;
  margin-bottom: 20px;
}

.pps-band-scripture__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 38px;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ivory);
}

.pps-band-scripture__attribution {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
}

@media (max-width: 720px) {
  .pps-band-scripture { padding: 60px 0; }
  .pps-band-scripture__quote { font-size: 26px; line-height: 1.35; }
}

/* --- Band: archive-cta -------------------------------------------------
 * Ivory-tinted CTA band used at the foot of archives (C.4 /rites/,
 * later shared by pandits/journal). Ported 1:1 from ORG poojas.html
 * ArchiveCTA (lines 326-345). Two-column grid: copy block on the left
 * (1.4fr), MandalaLine motif on the right (1fr). Token-only; lengths
 * match the ORG inline styles.
 * ---------------------------------------------------------------------- */
.pps-band-archive-cta {
  padding: 80px 0;
  border-top: 1px solid var(--line);
  background: var(--ivory-2);
}

.pps-band-archive-cta__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.pps-band-archive-cta__copy {
  min-width: 0;
}

.pps-band-archive-cta__eyebrow {
  margin-bottom: 14px;
}

.pps-band-archive-cta__title {
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.pps-band-archive-cta__title em {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}

.pps-band-archive-cta__lede {
  margin-top: 16px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 520px;
}

.pps-band-archive-cta__actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pps-band-archive-cta__motif {
  display: flex;
  justify-content: center;
  color: var(--gold-deep);
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .pps-band-archive-cta { padding: 64px 0; }
  .pps-band-archive-cta__title { font-size: 40px; }
}

@media (max-width: 720px) {
  .pps-band-archive-cta { padding: 48px 0; }
  .pps-band-archive-cta__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .pps-band-archive-cta__title { font-size: 32px; line-height: 1.1; }
  .pps-band-archive-cta__lede { font-size: 15px; }
  .pps-band-archive-cta__motif { justify-content: flex-start; opacity: 0.5; }
  .pps-band-archive-cta__actions { gap: 10px; }
}

/* --- Band: lineage -----------------------------------------------------
 * Ivory four-stat band with ink display numerals + mono captions.
 * Ported 1:1 from ORG pandits.html LineageBand (lines 320-338).
 * Paired shape with .pps-band-scripture (same rhythm, inverted palette).
 * ---------------------------------------------------------------------- */
.pps-band-lineage {
  padding: 80px 0;
  background: var(--ivory-2);
  border-top: 1px solid var(--line);
}

.pps-band-lineage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.pps-band-lineage__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pps-band-lineage__num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}

.pps-band-lineage__label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--stone);
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .pps-band-lineage__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .pps-band-lineage__num { font-size: 44px; }
}

@media (max-width: 720px) {
  .pps-band-lineage { padding: 56px 0; }
  .pps-band-lineage__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pps-band-lineage__num { font-size: 40px; }
}

/* --- Band: trust strip -------------------------------------------------
 * Five-stat trust row on ivory-2 panel. Ported 1:1 from ORG
 * testimonials.html TrustStrip (lines 294-313). Display-serif values +
 * mono labels. 1px separator between stats via ::before lines on all but
 * first. Token-only.
 * ---------------------------------------------------------------------- */
.pps-band-trust {
  padding: 10px 0 40px;
}

.pps-band-trust__panel {
  background: var(--ivory-2);
  border-radius: var(--r-lg);
  padding: 26px 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: center;
}

.pps-band-trust__stat {
  text-align: center;
  position: relative;
  padding-left: 24px;
}

.pps-band-trust__stat:first-child {
  padding-left: 0;
}

.pps-band-trust__stat:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--line);
}

.pps-band-trust__value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.pps-band-trust__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--stone);
  text-transform: uppercase;
  margin-top: 8px;
}

@media (max-width: 1024px) {
  .pps-band-trust__panel {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
  .pps-band-trust__stat:nth-child(3n+1) {
    padding-left: 0;
  }
  .pps-band-trust__stat:nth-child(3n+1)::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .pps-band-trust { padding: 4px 0 28px; }
  .pps-band-trust__panel {
    grid-template-columns: 1fr 1fr;
    padding: 22px 18px;
    row-gap: 22px;
  }
  .pps-band-trust__stat {
    padding-left: 0;
  }
  .pps-band-trust__stat::before { display: none !important; }
  .pps-band-trust__value { font-size: 30px; }
}

/* --- Band: sharing CTA -------------------------------------------------
 * Centered call-to-action with Ornament motif on top, H2, lede, and
 * two CTAs. Ported 1:1 from ORG testimonials.html SharingCTA
 * (lines 315-329). Ivory-2 bg, top hairline, gold-deep motif.
 * ---------------------------------------------------------------------- */
.pps-band-sharing {
  padding: 80px 0;
  border-top: 1px solid var(--line);
  background: var(--ivory-2);
}

.pps-band-sharing__inner {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pps-band-sharing__motif {
  color: var(--gold-deep);
  display: inline-flex;
  margin-bottom: 16px;
}

.pps-band-sharing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.pps-band-sharing__lede {
  margin-top: 16px;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.pps-band-sharing__actions {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .pps-band-sharing { padding: 60px 0; }
  .pps-band-sharing__title { font-size: 32px; }
  .pps-band-sharing__lede  { font-size: 16px; }
}

/* --- Band: newsletter --------------------------------------------------
 * Dark ink newsletter signup band. Ported 1:1 from ORG journal.html
 * NewsletterBand (lines 263-284). Gold-soft Ornament motif, large
 * display H2 in ivory, translucent ivory lede, pill email input + gold
 * CTA side-by-side, mono meta line beneath.
 *
 * Alpha values against --ivory (no direct token):
 *   0.08  → input bg
 *   0.12  → input focus bg
 *   0.20  → input border
 *   0.45  → input placeholder
 *   0.50  → meta line
 *   0.70  → lede text
 * ---------------------------------------------------------------------- */
.pps-band-newsletter {
  padding: 100px 0;
  background: var(--ink);
  color: var(--ivory);
  text-align: center;
}

.pps-band-newsletter__inner {
  max-width: 640px;
}

.pps-band-newsletter__motif {
  display: inline-flex;
  color: var(--gold-soft);
  margin-bottom: 16px;
}

.pps-band-newsletter__heading {
  font-size: 48px;
  color: var(--ivory);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.pps-band-newsletter__lede {
  margin: 14px 0 0;
  font-size: 17px;
  color: color-mix(in srgb, var(--ivory) 70%, transparent);
  line-height: 1.6;
}

.pps-band-newsletter__form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 30px auto 0;
}

.pps-band-newsletter__input {
  flex: 1;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--ivory) 20%, transparent);
  background: color-mix(in srgb, var(--ivory) 8%, transparent);
  color: var(--ivory);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.pps-band-newsletter__input::placeholder {
  color: color-mix(in srgb, var(--ivory) 45%, transparent);
}

.pps-band-newsletter__input:focus {
  border-color: var(--gold-soft);
  background: color-mix(in srgb, var(--ivory) 12%, transparent);
}

.pps-band-newsletter__submit {
  padding: 14px 24px;
}

.pps-band-newsletter__meta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: color-mix(in srgb, var(--ivory) 50%, transparent);
  letter-spacing: 0.14em;
}

@media (max-width: 720px) {
  .pps-band-newsletter { padding: 64px 0; }
  .pps-band-newsletter__heading { font-size: 36px; }
  .pps-band-newsletter__form {
    flex-direction: column;
    gap: 12px;
    max-width: 360px;
  }
  .pps-band-newsletter__submit { width: 100%; }
}

/* --- Band: trust-icons --------------------------------------------------
 * Five-icon trust strip (gold motif + title + body), hairline-bordered top
 * & bottom. Ported 1:1 from ORG components/HomeSections.jsx TrustBand
 * (lines 78-99). Distinct from .pps-band-trust (5-stat numerical row).
 * Reusable across pages — homepage uses default 5-item ORG copy.
 * ---------------------------------------------------------------------- */
.pps-band-trust-icons {
  padding: 60px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.pps-band-trust-icons__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  align-items: start;
}

.pps-band-trust-icons__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pps-band-trust-icons__motif {
  color: var(--gold-deep);
  display: inline-flex;
}

.pps-band-trust-icons__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.pps-band-trust-icons__body {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .pps-band-trust-icons { padding: 48px 0; }
  .pps-band-trust-icons__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 28px;
  }
}

@media (max-width: 560px) {
  .pps-band-trust-icons { padding: 40px 0; }
  .pps-band-trust-icons__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* --- Band: faq-accordion ------------------------------------------------
 * Two-column FAQ band: intro (eyebrow + H2 + lede + ghost CTA) on the
 * left, native <details>/<summary> stack on the right. Ported from ORG
 * HomeSections.jsx FAQ (lines 166-214) — useState replaced with the
 * native disclosure widget (zero JS). First item ships `open`.
 * ---------------------------------------------------------------------- */
.pps-band-faq-accordion {
  padding: 100px 0;
}

.pps-band-faq-accordion__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.pps-band-faq-accordion__intro {
  min-width: 0;
}

.pps-band-faq-accordion__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
}

.pps-band-faq-accordion__title {
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.pps-band-faq-accordion__title em {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}

.pps-band-faq-accordion__lede {
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.pps-band-faq-accordion__cta {
  margin-top: 28px;
  padding: 12px 20px;
  font-size: 14px;
}

.pps-band-faq-accordion__list {
  min-width: 0;
}

.pps-band-faq-accordion__item {
  border-bottom: 1px solid var(--line);
}

.pps-band-faq-accordion__summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.pps-band-faq-accordion__summary::-webkit-details-marker {
  display: none;
}

.pps-band-faq-accordion__question {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.22s var(--ease-ios);
}

.pps-band-faq-accordion__item[open] .pps-band-faq-accordion__question {
  color: var(--ink);
}

.pps-band-faq-accordion__indicator {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.22s var(--ease-ios), color 0.22s var(--ease-ios);
}

.pps-band-faq-accordion__indicator::before,
.pps-band-faq-accordion__indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.22s var(--ease-ios), opacity 0.22s var(--ease-ios);
}

.pps-band-faq-accordion__indicator::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.pps-band-faq-accordion__item[open] .pps-band-faq-accordion__indicator {
  background: var(--ink);
  color: var(--paper);
}

.pps-band-faq-accordion__item[open] .pps-band-faq-accordion__indicator::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.pps-band-faq-accordion__answer-wrap {
  padding: 0 0 24px;
}

.pps-band-faq-accordion__answer {
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 620px;
}

@media (max-width: 1024px) {
  .pps-band-faq-accordion { padding: 72px 0; }
  .pps-band-faq-accordion__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .pps-band-faq-accordion { padding: 56px 0; }
  .pps-band-faq-accordion__question { font-size: 18px; }
}